{
  "id": "v1-me-1111",
  "long_id": "v1.memphis.landing.s01.p01.t01.u01",
  "name": "Memphis festival landing page (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": "landing",
  "mode": "pure",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A fluid landing page in the Memphis revival look of 2016 to 2022, after the Milan group of the 1980s: flat loud colours that clash on purpose, big fields of terrazzo, dots and dashes, and squiggles, triangles, rings and half circles 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 sites of design conferences and festivals, creative agencies and playful products; this pack is the festival poster, with full-bleed fields that meet edge to edge, a hero of huge type beside a field of pattern, speakers on patterned tiles, a schedule and tickets.",
  "url": "https://chrono.skin/s/v1-me-1111",
  "preview_url": "https://chrono.skin/s/v1-me-1111/specimen.html",
  "files": {
    "STYLE.md": "# Memphis festival landing page (2016 to 2022)\n\n## Summary\n\nA fluid landing page in the Memphis revival look of 2016 to 2022, after the Milan group of the 1980s: flat loud colours that clash on purpose, big fields of terrazzo, dots and dashes, and squiggles, triangles, rings and half circles 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 sites of design conferences and festivals, creative agencies and playful products; this pack is the festival poster, with full-bleed fields that meet edge to edge, a hero of huge type beside a field of pattern, speakers on patterned tiles, a schedule and tickets.\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` (1200px) column with `--space-gutter` (40px) at the sides. Designed at a 1440px viewport.\n- Order of the home page: a strip of loud pattern with the date on a flat chip, the navigation bar (`--size-nav` 72px) in one flat colour, the hero, four stat blocks that climb over the foot of the hero, the speaker tiles standing half on a band of dashes, a pale band with the programme list beside a panel and a carousel, a band in `--color-fill-4` with the call to action, and the footer.\n- Sections touch and have no rule between them: one flat field ends where the next begins. Bands are of different heights. Shapes lie over the corners of bands and across their edges.\n- The hero is a poster, not a centred message: the words at display size, the three date blocks (overlapping each other) and the buttons on the left 7 of 12 columns; down the right 38% of the window runs `.ds-hero__ground`, a field of terrazzo from the top edge to the bottom; `.ds-hero__art` holds nine shapes piled across the seam, some on the open ground and some on the pattern.\n- `.ds-stat` is four blocks of unequal width (5:3:4:3) and height standing on one line with no gap; one is tilted across its neighbours. The row is pulled up by `--space-9` so that it crosses from its own band into the hero.\n- `.ds-grid` is four columns (three with `.ds-grid--3`); the covers are cut in turn as a block, an arch, a taller block and a disc, every second tile is pushed down by `--space-5`, and the flat label of each tile overlaps the foot of its cover, set in from one side. `.ds-split` is a main column and a `--size-sidebar` (320px) column, `.ds-split--flip` puts the narrow column first, `.ds-split--even` is two halves; `.ds-prices` is three panels.\n- Inner pages keep the strip, the navigation and the footer and drop the hero. In its place comes a `.ds-page-header`: a pale `--color-surface-alt` band closed by a candy stripe of two fills, with the breadcrumb, the `--text-h1` title and one line of lead on the left, the actions on the right and one or two shapes at its right end. Below it one `.ds-band` holds a `.ds-split`: the main column starts with the `.ds-tabs`, then notices, the table and the badges; the side column holds a panel and a `.ds-sidebar`. 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, overlap of the date blocks), `--space-4` 16px (panel padding, gap between buttons), `--space-5` 24px (gap between cards and stacked blocks, button side padding, inset of a tile label), `--space-6` 32px (large button padding, footer columns, overlap of a tile label on its cover), `--space-7` 48px (tight band padding, band head to content, gap between columns), `--space-8` 72px (band and hero padding), `--space-9` 104px (the climb of the stat row into the hero). `--space-nudge` 3px is the pressed offset, the focus outline offset and the underline thickness.\n- Fixed sizes: `--size-control` 46px, `--size-control-large` 58px, `--size-control-small` 36px, `--size-logo` 36px, `--size-avatar` 44px, `--size-art` 190px (unit of a speaker cover and of the dash band), `--size-shape` 96px (the unit of every ornament), `--size-dot` 18px (pitch of every pattern), `--size-stroke` 4px (weight of drawn lines and pattern lines), `--size-dialog` 500px.\n- Below 1000px the grid and the stats drop to two columns, splits and prices stack, the hero pattern becomes a field across the top with the shapes on it and the words below, pattern bands and free shapes in bands disappear and the navigation links wrap under the brand. Below 600px gutters shrink to `--space-4`, the grid 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. On a phone (600px and below) `.ds-nav__links` and the small button in `.ds-nav__actions` leave the bar and `.ds-nav__fold` (a `.ds-menu` with the `.ds-nav__burger` summary) stands at the right of the brand; it opens a list of every view across the width of the window, the current one on the accent fill, and a `.ds-menu__list` elsewhere is at most 80vw wide.\n- Views: five, switched by plain `#name` links. `home` is the poster. `speakers` is the line-up: a stage filter and an empty state on the left, six speaker tiles and the pagination on the right. `schedule` is one day: tabs, notices, the table with a tooltip, the status key, room progress bars and the day's speakers. `tickets` has three price panels, the order form with a switch and the four buttons beside the questions accordion, and the confirmation dialog on its overlay band. `info` is an article with the contents sidebar. The navigation marks the current view through `:has()` rules, one per view; `info` is reached from the More menu, which is marked instead.\n\n## Typography and colour roles\n\n- Type: headings, navigation and buttons in a bold geometric sans (`--font-heading`, `--font-ui`: Poppins, Montserrat, then Avenir Next and Century Gothic); body in Work Sans or DM Sans, then Helvetica. The references used commercial geometric faces; these are the nearest open ones. `--text-base` 17px at 1.55, `--text-small` 14px, `--text-ui` 14px uppercase at weight 600, `--text-large` 21px for leads. `--text-display` 104px at weight 900, line height 0.95 and tight tracking for the hero title; `--text-h1` 56px (inner page titles, stat figures, the date blocks, prices), `--text-h2` 38px (band titles), `--text-h3` 22px (card, panel and sidebar titles). Headings are weight 800 and not uppercase. Links in running text are underlined, titles and navigation are not.\n- Palette: an off-white page `--color-page` #fdf6ec with white surfaces, pale yellow `--color-surface-alt` #fff1c9 and pale pink `--color-surface-strong` #ffd9e6. The four fills are yellow #ffd23f, pink #ff5fa2, teal #00c2b8 and blue #6c8cff, used in clashing pairs; `--color-accent` and the primary button are the pink, `--color-accent-alt` the teal, the fifth ornament colour `--color-shadow` is orange #ff8a4c. Black #141414 and white are two more flat colours: the secondary button, the date strip and the footer are black, labels of tiles are white. `--color-bar` is the yellow, for the navigation and table heads. Text and links are the black; link hover is deep pink, active deep teal, visited violet. Danger #d4143c, success #3ecf8e, warning #ff9f1c, notice pale teal #c8f4f0.\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`. Corners are square (`--radius-control`, `--radius-panel`, `--radius-page` 0) and tags, counters and switches are pills (`--radius-pill`). `--fill-page` adds a quiet 24px dot grid to the page; `--fill-bar-alt` draws loud pink diagonal stripes on the black strip; `--fill-inverse` scatters yellow, pink and teal dots over the black footer. `--fill-button-hover` is the teal. 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.\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 (`--fill-panel`) go on the page, on `--color-surface-alt` or on a fill; tinted blocks (`--color-surface-alt`, `--color-surface-strong`) 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`) so that they read on every ground.\n  - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control (a white field on a white block would vanish without it) and in `--color-border-muted` between rows of a table or list, 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 label of a tile, the footer block), in `--color-bar-alt`, `--color-inverse` or a surface. 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 `<body>`. Sets the dotted 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__strip` is a strip of `--fill-bar-alt` pattern; its words sit in `.ds-nav__strip-text`, a flat `--color-bar-alt` chip, with a `.ds-nav__strip-link`. `.ds-nav__bar` is flat `--fill-bar` and holds the brand, the centred `.ds-nav__links` of `.ds-nav__link` (the current one is a flat accent pill, tilted; a hovered one takes `--color-surface`) with one `.ds-menu`, and `.ds-nav__actions` with a small button.\n- `.ds-hero`: the poster. Its first child is `.ds-hero__ground`, a `.ds-cover .ds-cover--ground` that fills the right 38% from top to bottom. `.ds-hero__inner` is the two-column grid; `.ds-hero__body` holds a tilted badge, `.ds-hero__title` at display size with one word in `.ds-hero__mark` (a tilted accent block), `.ds-hero__date` (three `.ds-hero__day` blocks in three fills, one of them a circle, each overlapping the one before, and a `.ds-hero__when` line), `.ds-hero__lead` and `.ds-hero__actions`. `.ds-hero__art` holds nine `.ds-shape`, placed by their order so that they cross the left edge of the pattern.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: `.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. A stripe of `--color-fill-2` and `--color-fill-3` closes it.\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. A `.ds-cover--ground` in a band takes `.ds-band__strip` (a band of pattern across its lower part, behind tiles) or `.ds-band__slab` (a field down its right 30%). `.ds-band__inner` is the content column, `.ds-band__head` a `.ds-band__title`, a `.ds-squiggle` and a `.ds-band__lead`; `.ds-band__label` is 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` blocks, each one flat fill, unequal in width and height, touching, the second tilted over its neighbours; a `.ds-stat__value` at `--text-h1` over a `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-grid`: speaker tiles. A `.ds-grid__cell` has no frame and no fill of its own: a `.ds-cover` holding a large face avatar, cut as a block, an arch or a disc, and `.ds-grid__body`, a flat `--fill-panel` label that overlaps the foot of the cover, with `.ds-grid__title`, `.ds-grid__text` and a plain badge.\n- `.ds-list`: programme rows on one flat `--color-surface` block: `.ds-list__item` with a tilted `.ds-list__time` chip that cycles through the four fills, `.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 with a `.ds-panel__title` strip on `--color-surface-strong` and a `.ds-panel__body`. `.ds-panel--pick` tilts it and gives the strip the accent fill; `.ds-panel__price` is a large figure; `.ds-panel--gap` adds space above. `.ds-prices` lays three out; `.ds-inline` puts an input and a button on one line. Set panels on the page or on a tinted band, and let a large shape show from behind one corner.\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 or hold an avatar.\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 2:1:1:1 grid with `.ds-footer__brand` and `.ds-footer__text`, then columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.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 to four `.ds-shape` (in a row, not absolutely) or a `.ds-avatar`, 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, a rail foot, a third of a hero.\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`, for counts and neutral tags), 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. `.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 `<details>` 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-nav__fold`: the phone navigation, a `.ds-menu` that is hidden above 600px. Below it the links leave the bar and its `.ds-nav__burger` summary, a tilted flat `--color-surface` block, opens one list of every view (`.ds-nav__fold-link`, the current one on the accent fill) followed by the secondary links.\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` (`<details>`) 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 cover 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 (a `.ds-carousel__quote` and an avatar in each); `.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 <= 48px`: stacked blocks are 24px apart, columns 48px; sections themselves touch.\n- `content-width >= 80%`: bands are full-bleed and their column is 1200px of a 1440px viewport.\n- `palette-colours <= 16`: off-white, white, black, four fills, two pale tints, orange, the status colours and two greys.\n- `font-size <= 104px`: the hero title is the largest text.\n- `font-size >= 14px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights; headings go up to 900.\n- `font-families <= 2`: one geometric sans for headings and controls, one plain sans for text (plus the monospace of inline code).\n- `line-height <= 1.6`: body text is set at 1.55.\n- `uppercase-text <= 20%`: only navigation, buttons, badges and labels are uppercase; headings are not.\n- `underlined-links <= 15%`: 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- `border-radius <= 0px`: boxes are square; only tags, counters, discs, arches and half circles are round, and those are shapes.\n- `gradient-fills <= 7%`: 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: pull a block over the edge of a pattern field or of the section above with a negative margin, let a `.ds-shape` cross from one block onto the next, set neighbouring blocks of different fills edge to edge and make them unequal in size. 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, pills) 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 featured panel, one tile of a row) by 1 to 6 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: 1200px;\n  --size-measure: 640px;\n  --size-nav: 72px;\n  --size-control: 46px;\n  --size-control-large: 58px;\n  --size-control-small: 36px;\n  --size-logo: 36px;\n  --size-check: 22px;\n  --size-thumb: 20px;\n  --size-track: 18px;\n  --size-avatar: 44px;\n  --size-art: 190px;\n  --size-shape: 96px;\n  --size-dot: 18px;\n  --size-stroke: 4px;\n  --size-sidebar: 320px;\n  --size-dialog: 500px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 72px;\n  --space-9: 104px;\n  --space-gutter: 40px;\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: a patterned strip with its words on a flat chip, then a bar of one flat colour */\n.ds-nav {\n  position: relative;\n  z-index: 5;\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-nav__strip {\n  margin: 0;\n  padding: var(--space-2) var(--space-gutter);\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-align: center;\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-alt-text);\n  background: var(--fill-bar-alt);\n}\n.ds-nav__strip-text {\n  display: inline-block;\n  padding: 0 var(--space-4);\n  background: var(--color-bar-alt);\n}\n.ds-nav__strip-link {\n  color: inherit;\n  text-decoration: underline;\n  text-underline-offset: var(--space-1);\n}\n.ds-nav__bar {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  max-width: calc(var(--size-content) + 2 * var(--space-gutter));\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-gutter);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3);\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  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-text);\n  background: var(--color-surface);\n  transform: rotate(-3deg);\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(#speakers:target) .ds-nav__link[href=\"#speakers\"],\n.ds-page:has(#schedule:target) .ds-nav__link[href=\"#schedule\"],\n.ds-page:has(#tickets:target) .ds-nav__link[href=\"#tickets\"],\n.ds-page:has(#info:target) .ds-nav__link.ds-menu__toggle {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  transform: rotate(-3deg);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\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__strip {\n  right: 0;\n  bottom: var(--space-8);\n  left: 0;\n  height: calc(var(--size-art) * 1.2);\n}\n.ds-band__slab {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 30%;\n}\n.ds-band--overlay {\n  background: var(--color-overlay);\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: grid;\n  gap: var(--space-3);\n  max-width: var(--size-measure);\n  margin: 0 0 var(--space-7);\n}\n.ds-band__title {\n  margin: 0;\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  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-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 poster. Huge words and the date on the open ground, a field of pattern down the right edge, shapes piled across where the two meet */\n.ds-hero {\n  position: relative;\n  padding: var(--space-8) var(--space-gutter) calc(var(--space-9) + var(--space-7));\n  overflow: hidden;\n}\n.ds-hero__ground {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 38%;\n}\n.ds-hero__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  gap: var(--space-7);\n  align-items: center;\n  max-width: var(--size-content);\n  margin: 0 auto;\n}\n.ds-hero__body {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  gap: var(--space-5);\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(-3deg);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__date {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-hero__day {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control-large) * 1.5);\n  padding: calc(var(--space-2) - var(--figure-shift)) var(--space-3) calc(var(--space-2) + var(--figure-shift));\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-panel);\n}\n.ds-hero__day + .ds-hero__day {\n  position: relative;\n  margin-left: calc(var(--space-3) * -2);\n}\n.ds-hero__day:nth-child(2) {\n  background: var(--color-fill-3);\n  border-radius: 50%;\n  aspect-ratio: 1;\n  transform: rotate(6deg);\n}\n.ds-hero__day:nth-child(3) {\n  background: var(--color-fill-2);\n  transform: rotate(-5deg);\n}\n.ds-hero__when {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-hero__art {\n  position: relative;\n  min-height: calc(var(--size-shape) * 5);\n}\n.ds-hero__art .ds-shape:nth-child(1) {\n  top: 4%;\n  left: -14%;\n}\n.ds-hero__art .ds-shape:nth-child(2) {\n  right: -8%;\n  bottom: -6%;\n}\n.ds-hero__art .ds-shape:nth-child(3) {\n  top: -4%;\n  right: 0;\n}\n.ds-hero__art .ds-shape:nth-child(4) {\n  bottom: 2%;\n  left: -16%;\n}\n.ds-hero__art .ds-shape:nth-child(5) {\n  top: 46%;\n  right: 16%;\n}\n.ds-hero__art .ds-shape:nth-child(6) {\n  top: -11%;\n  left: -6%;\n}\n.ds-hero__art .ds-shape:nth-child(7) {\n  bottom: 10%;\n  left: 30%;\n}\n.ds-hero__art .ds-shape:nth-child(8) {\n  right: 34%;\n  bottom: -2%;\n}\n.ds-hero__art .ds-shape:nth-child(9) {\n  top: 58%;\n  left: -26%;\n}\n\n/* page header: the head of an inner page; a pale band with one cluster of shapes at its right end, closed by a candy stripe */\n.ds-page-header {\n  position: relative;\n  padding: var(--space-7) var(--space-gutter) var(--space-6);\n  overflow: hidden;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n}\n.ds-page-header::after {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--space-3);\n  background: repeating-linear-gradient(-45deg, var(--color-fill-2) 0 var(--space-3), var(--color-fill-3) var(--space-3) var(--space-5));\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 colour blocks of unequal width and height that touch, standing on one line and climbing over the edge of the hero */\n.ds-stat {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);\n  align-items: end;\n  margin: calc(var(--space-9) * -1) 0 0;\n}\n.ds-stat__cell {\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  padding: var(--space-8) var(--space-5) var(--space-5);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-page);\n}\n.ds-stat__cell:nth-child(2) {\n  z-index: 1;\n  padding-top: var(--space-5);\n  background: var(--color-fill-2);\n  transform: rotate(-4deg);\n}\n.ds-stat__cell:nth-child(3) {\n  padding-top: var(--space-7);\n  background: var(--color-fill-3);\n}\n.ds-stat__cell:nth-child(4) {\n  padding-top: var(--space-9);\n  background: var(--color-fill-4);\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  margin: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n\n/* grid: speaker tiles. A patterned cover cut as a block, an arch or a disc, and a flat label laid over its lower edge; no frame holds the two */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-6) var(--space-5);\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  display: flex;\n  flex-direction: column;\n  color: var(--color-text);\n}\n.ds-grid__cell .ds-cover {\n  min-height: calc(var(--size-art) * 1.3);\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-cover {\n  border-radius: 50% 50% 0 0 / 60% 60% 0 0;\n}\n.ds-grid__cell:nth-child(4n + 3) .ds-cover {\n  min-height: calc(var(--size-art) * 1.6);\n}\n.ds-grid__cell:nth-child(4n) .ds-cover {\n  align-self: center;\n  width: 86%;\n  min-height: 0;\n  aspect-ratio: 1;\n  border-radius: 50%;\n}\n.ds-grid__cell:nth-child(even) {\n  margin-top: var(--space-5);\n  margin-bottom: calc(var(--space-5) * -1);\n}\n.ds-grid--3 .ds-grid__cell:nth-child(even) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.ds-grid--3 .ds-grid__cell:nth-child(3n + 2) {\n  margin-top: var(--space-5);\n  margin-bottom: calc(var(--space-5) * -1);\n}\n.ds-grid__body {\n  display: grid;\n  flex: 1;\n  gap: var(--space-2);\n  align-content: start;\n  justify-items: start;\n  position: relative;\n  z-index: 1;\n  margin: calc(var(--space-6) * -1) var(--space-5) 0 0;\n  padding: var(--space-4) var(--space-4) var(--space-5);\n  background: var(--fill-panel);\n}\n.ds-grid__cell:nth-child(even) .ds-grid__body {\n  margin-right: 0;\n  margin-left: var(--space-5);\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  color: var(--color-heading);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n\n/* list: programme rows on one flat block, each led by a time chip in the next fill */\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__time {\n  flex: none;\n  min-width: 7ch;\n  padding: var(--space-1) var(--space-2);\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-align: center;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-pill);\n  transform: rotate(-4deg);\n}\n.ds-list__item:nth-child(4n + 2) .ds-list__time {\n  background: var(--color-fill-2);\n  transform: rotate(3deg);\n}\n.ds-list__item:nth-child(4n + 3) .ds-list__time {\n  background: var(--color-fill-3);\n}\n.ds-list__item:nth-child(4n) .ds-list__time {\n  background: var(--color-fill-4);\n  transform: rotate(4deg);\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 */\n.ds-panel {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-3) 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  background: var(--color-surface-strong);\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  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 {\n  transform: rotate(-1.5deg);\n}\n.ds-panel--pick .ds-panel__title {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-panel--gap {\n  margin-top: var(--space-5);\n}\n.ds-prices {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n  align-items: start;\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\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\n/* footer: a field of pattern with the columns on one flat inverted block laid over it */\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: 2fr 1fr 1fr 1fr;\n  gap: var(--space-6);\n  max-width: var(--size-content);\n  margin: 0 auto;\n  padding: var(--space-7) var(--space-6) var(--space-6);\n  background: var(--color-inverse);\n}\n.ds-footer__brand {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\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;\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-6);\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--c3 {\n  color: var(--color-fill-3);\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-shape--bl {\n  bottom: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--br {\n  bottom: var(--space-5);\n  right: var(--space-5);\n}\n.ds-band--fill > .ds-shape--br {\n  right: 30%;\n  bottom: 0;\n  transform: none;\n}\n.ds-shape--edge-r {\n  top: 30%;\n  right: 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--40 .ds-progress__bar {\n  width: 40%;\n}\n.ds-progress--60 .ds-progress__bar {\n  width: 60%;\n}\n.ds-progress--75 .ds-progress__bar {\n  width: 75%;\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--3 .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-3);\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-grid,\n  .ds-grid--3,\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-grid--3 .ds-grid__cell:nth-child(3n + 2) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n  .ds-split,\n  .ds-split--even,\n  .ds-split--flip,\n  .ds-prices {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__inner {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-hero__art {\n    min-height: calc(var(--size-shape) * 2.5);\n    order: -1;\n  }\n  .ds-hero__ground {\n    bottom: auto;\n    left: 0;\n    width: auto;\n    height: calc(var(--size-shape) * 2.5 + var(--space-8));\n  }\n  .ds-hero__art .ds-shape:nth-child(1),\n  .ds-hero__art .ds-shape:nth-child(4),\n  .ds-hero__art .ds-shape:nth-child(6),\n  .ds-hero__art .ds-shape:nth-child(9) {\n    left: 0;\n  }\n  .ds-stat {\n    margin-top: calc(var(--space-8) * -1);\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(3),\n  .ds-stat__cell:nth-child(4) {\n    padding-top: var(--space-5);\n  }\n  .ds-band__strip,\n  .ds-band__slab {\n    display: none;\n  }\n  .ds-hero__art .ds-shape {\n    width: calc(var(--size-shape) * 0.9);\n  }\n  .ds-hero__art .ds-shape--xl {\n    width: calc(var(--size-shape) * 1.6);\n  }\n  .ds-hero__art .ds-shape--line {\n    width: calc(var(--size-shape) * 1.2);\n  }\n  .ds-hero__art .ds-shape--s {\n    width: calc(var(--size-shape) * 0.4);\n  }\n  .ds-band > .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-nav__bar {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: var(--space-2) var(--space-4);\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    gap: var(--space-1);\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-band,\n  .ds-band--tight,\n  .ds-hero {\n    padding: var(--space-7) var(--space-4);\n  }\n  .ds-page-header {\n    padding: var(--space-6) var(--space-4) var(--space-5);\n  }\n  .ds-nav__strip {\n    padding: var(--space-2) var(--space-4);\n  }\n  .ds-nav__link {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-small);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.5);\n  }\n  .ds-hero__day {\n    min-width: calc(var(--size-control-large) * 1.1);\n    font-size: var(--text-h2);\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-stat__value,\n  .ds-panel__price {\n    font-size: var(--text-h2);\n  }\n  .ds-band__title,\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-band__head {\n    margin-bottom: var(--space-6);\n  }\n  .ds-stat {\n    gap: var(--space-4);\n  }\n  .ds-stat__cell {\n    padding: var(--space-4);\n  }\n  .ds-grid,\n  .ds-grid--3 {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell:nth-child(even) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n  .ds-grid__cell:nth-child(4n) .ds-cover {\n    width: 60%;\n  }\n  .ds-footer__inner,\n  .ds-footer__legal {\n    padding-right: var(--space-4);\n    padding-left: var(--space-4);\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  .ds-footer {\n    padding: var(--space-7) var(--space-4) var(--space-5);\n  }\n}\n\n/* phone navigation: the links fold into one menu behind a flat block */\n.ds-nav__fold {\n  display: none;\n}\n.ds-nav__burger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\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: var(--line-body);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  color: var(--color-text);\n  background: var(--color-surface);\n  transform: rotate(3deg);\n  transition: var(--transition);\n}\n.ds-nav__fold[open] .ds-nav__burger {\n  transform: rotate(-3deg);\n}\n.ds-nav__burger:focus-visible {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__fold-link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__fold-link[href=\"#home\"],\n.ds-page:has(#speakers:target) .ds-nav__fold-link[href=\"#speakers\"],\n.ds-page:has(#schedule:target) .ds-nav__fold-link[href=\"#schedule\"],\n.ds-page:has(#tickets:target) .ds-nav__fold-link[href=\"#tickets\"],\n.ds-page:has(#info:target) .ds-nav__fold-link[href=\"#info\"] {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n@media (max-width: 600px) {\n  .ds-nav__bar {\n    position: relative;\n    gap: var(--space-2);\n  }\n  .ds-nav__actions {\n    gap: var(--space-2);\n    margin-left: auto;\n  }\n  .ds-nav__links,\n  .ds-nav__actions > .ds-button {\n    display: none;\n  }\n  .ds-nav__fold {\n    position: static;\n    display: block;\n  }\n  .ds-nav__fold .ds-menu__list {\n    top: 100%;\n    right: var(--space-4);\n    left: var(--space-4);\n    width: auto;\n    max-width: none;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: memphis festival specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <p class=\"ds-nav__strip\"><span class=\"ds-nav__strip-text\">chronoskin festival, 12 to 14 June, the old tram depot. <a class=\"ds-nav__strip-link\" href=\"#tickets\">Early tickets end on 1 May</a></span></p>\n  <nav class=\"ds-nav__bar\" aria-label=\"Main\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.8 18q2.3-5.6 4.6 0t4.6 0t4.6 0t4.6 0\" stroke-width=\"2.4\"/><circle cx=\"6.5\" cy=\"7\" r=\"3.4\" fill=\"currentColor\" stroke=\"none\"/><polygon points=\"16.8,3.6 21.2,10.6 12.4,10.6\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Festival</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#speakers\">Speakers</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#schedule\">Schedule</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#tickets\">Tickets</a></li>\n      <li>\n        <details class=\"ds-menu\" data-component=\"menu\">\n          <summary class=\"ds-nav__link ds-menu__toggle\">More <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n          <ul class=\"ds-menu__list\">\n            <li><a class=\"ds-menu__link\" href=\"#info\">Getting there <span class=\"ds-menu__note\">map</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#info\">House rules</a></li>\n            <li><a class=\"ds-menu__link\" href=\"#schedule\">Workshops <span class=\"ds-menu__note\">18</span></a></li>\n            <li><a class=\"ds-menu__link\" href=\"#tickets\">Volunteer</a></li>\n          </ul>\n        </details>\n      </li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-button ds-button--small\" href=\"#tickets\">Get tickets</a>\n      <details class=\"ds-menu ds-nav__fold\" data-component=\"menu\">\n        <summary class=\"ds-nav__burger ds-menu__toggle\">Menu <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m3 6 5 5 5-5\"/></svg></summary>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#home\">Festival</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#speakers\">Speakers</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#schedule\">Schedule</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#tickets\">Tickets</a></li>\n          <li><a class=\"ds-menu__link ds-nav__fold-link\" href=\"#info\">Getting there <span class=\"ds-menu__note\">map</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#info\">House rules</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#schedule\">Workshops <span class=\"ds-menu__note\">18</span></a></li>\n          <li><a class=\"ds-menu__link\" href=\"#tickets\">Volunteer</a></li>\n        </ul>\n      </details>\n    </div>\n  </nav>\n</header>\n\n<main>\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <section class=\"ds-hero\" data-component=\"hero\">\n    <span class=\"ds-cover ds-cover--3 ds-cover--terrazzo ds-cover--ground ds-hero__ground\" aria-hidden=\"true\"></span>\n    <div class=\"ds-hero__inner\">\n      <div class=\"ds-hero__body\">\n        <span class=\"ds-badge ds-badge--alt ds-badge--tilt\">Sixth edition</span>\n        <h1 class=\"ds-hero__title\">Three loud days of <span class=\"ds-hero__mark\">design.</span></h1>\n        <ul class=\"ds-hero__date\" aria-label=\"12 to 14 June\">\n          <li class=\"ds-hero__day\">12</li>\n          <li class=\"ds-hero__day\">13</li>\n          <li class=\"ds-hero__day\">14</li>\n          <li class=\"ds-hero__when\">June, the old tram depot<br>doors at nine</li>\n        </ul>\n        <p class=\"ds-hero__lead\">Talks, workshops and one very long table. Forty people who make posters, typefaces, toys and interfaces show how they work and what went wrong.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--large\" href=\"#tickets\">Get a ticket</a>\n          <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#schedule\">See the schedule</a>\n        </div>\n      </div>\n      <div class=\"ds-hero__art\" aria-hidden=\"true\">\n        <span class=\"ds-shape ds-shape--disc ds-shape--xl ds-shape--c2\"></span>\n        <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c5\"></span>\n        <span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--turn\"></span>\n        <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--ink\"></span>\n        <span class=\"ds-shape ds-shape--ring ds-shape--paper\"></span>\n        <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n        <span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c4 ds-shape--turn\"></span>\n        <span class=\"ds-shape ds-shape--line ds-shape--paper\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n        <span class=\"ds-shape ds-shape--draw ds-shape--c2 ds-shape--tilt\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3 22 21H2z\"/></svg></span>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--surface ds-band--tight ds-band--lift\">\n    <div class=\"ds-band__inner\"><dl class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">Speakers on two stages</dt><dd class=\"ds-stat__value\">40</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">Hands-on workshops</dt><dd class=\"ds-stat__value\">18</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">Seats in the depot</dt><dd class=\"ds-stat__value\">900</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">Very long table</dt><dd class=\"ds-stat__value\">1</dd></div>\n    </dl></div>\n  </section>\n\n  <section class=\"ds-band\">\n    <span class=\"ds-cover ds-cover--6 ds-cover--dash ds-cover--ground ds-band__strip\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--ring ds-shape--c3 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--draw ds-shape--s ds-shape--c2 ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3v18M3 12h18\"/></svg></span>\n    <div class=\"ds-band__inner\">\n      <div class=\"ds-band__head\">\n        <h2 class=\"ds-band__title\">First speakers</h2>\n        <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n        <p class=\"ds-band__lead\">Four of forty. The rest are announced every Friday until May.</p>\n      </div>\n      <ul class=\"ds-grid\" data-component=\"grid\">\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--1 ds-cover--dots\"><span class=\"ds-avatar ds-avatar--large ds-avatar--2\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Ines Marchetti</a></h3>\n            <p class=\"ds-grid__text\">Poster maker, prints everything twice</p>\n            <span class=\"ds-badge ds-badge--plain\">Main stage</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--2 ds-cover--stripes\"><span class=\"ds-avatar ds-avatar--large ds-avatar--3\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Tunde Okafor</a></h3>\n            <p class=\"ds-grid__text\">Type designer with a soft spot for stencils</p>\n            <span class=\"ds-badge ds-badge--plain\">Workshop</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--3 ds-cover--zig\"><span class=\"ds-avatar ds-avatar--large ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Rosa Kiviniemi</a></h3>\n            <p class=\"ds-grid__text\">Builds toys that teach colour</p>\n            <span class=\"ds-badge ds-badge--plain\">Main stage</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--4 ds-cover--terrazzo\"><span class=\"ds-avatar ds-avatar--large ds-avatar--1\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Jonas Lindqvist</a></h3>\n            <p class=\"ds-grid__text\">Interface designer, former sign painter</p>\n            <span class=\"ds-badge ds-badge--plain\">Side stage</span>\n          </div>\n        </li>\n      </ul>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--alt\">\n    <span class=\"ds-shape ds-shape--dots ds-shape--l ds-shape--c2 ds-shape--bl\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c3 ds-shape--tr\" aria-hidden=\"true\"></span>\n    <div class=\"ds-band__inner ds-split ds-split--even\">\n      <div>\n        <h2 class=\"ds-band__label\">Friday at a glance</h2>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">09:30</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">Doors, coffee, name stickers</a></h3><p class=\"ds-list__text\">Pick a colour for your badge and find a seat.</p></div>\n            <span class=\"ds-list__meta\">Hall</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">10:15</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">Everything twice</a></h3><p class=\"ds-list__text\">Ines Marchetti on printing a poster until it is wrong enough.</p></div>\n            <span class=\"ds-list__meta\">Main stage</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">13:00</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">The long table</a></h3><p class=\"ds-list__text\">Lunch for nine hundred, served down the middle of the depot.</p></div>\n            <span class=\"ds-list__meta\">Tracks 3 and 4</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">15:30</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">Cut a stencil alphabet</a></h3><p class=\"ds-list__text\">A workshop with knives, card and Tunde Okafor.</p></div>\n            <span class=\"ds-list__meta\">Workshop B</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__time\">17:00</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">Loops only</a></h3><p class=\"ds-list__text\">Milan Dvorak shows forty animations that never end.</p></div>\n            <span class=\"ds-list__meta\">Side stage</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">Friday letter</h3>\n          <div class=\"ds-panel__body\">\n            <p>One short letter a week: new speakers, workshop seats and the lunch menu. It stops the day the festival ends.</p>\n            <div class=\"ds-inline\">\n              <input class=\"ds-form__control\" type=\"email\" aria-label=\"Email address\" placeholder=\"you@example.org\">\n              <button class=\"ds-button\" type=\"button\">Sign up</button>\n            </div>\n            <a class=\"ds-link\" href=\"#info\">How to get to the depot</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Voices from last year\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">I came for one talk and stayed for the table. I have never drawn so much on a napkin.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\">AB</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Aino Berg</span><span class=\"ds-avatar__meta\">visitor, fifth edition</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">The only event where the workshop ran out of yellow.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">MD</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Milan Dvorak</span><span class=\"ds-avatar__meta\">visitor, fourth edition</span></span></figcaption>\n            </figure>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--fill\">\n    <span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c1 ds-shape--br ds-shape--tilt\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tr\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n    <div class=\"ds-band__inner ds-row\">\n      <div>\n        <h2 class=\"ds-band__title\">Early tickets end on 1 May</h2>\n        <p class=\"ds-band__lead\">Three days, lunch at the long table and one workshop of your choice.</p>\n      </div>\n      <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#tickets\">Choose a ticket</a>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"speakers\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--disc ds-shape--c2 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tr\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Speakers</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Main stage</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Speakers</h1>\n          <p class=\"ds-page-header__lead\">Sixteen announced so far, six of them on the main stage.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button\" href=\"#schedule\">Open the schedule</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split ds-split--flip\">\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Stages</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Main stage</a><span class=\"ds-badge\">6</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Side stage</a><span class=\"ds-badge ds-badge--plain\">5</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Workshops</a><span class=\"ds-badge ds-badge--plain\">5</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Evening</a><span class=\"ds-badge ds-badge--plain\">0</span></li>\n          </ul>\n        </aside>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c2\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s\"></span><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c3\"></span></div>\n          <h3 class=\"ds-empty__title\">No evening acts yet</h3>\n          <p class=\"ds-empty__text\">The Saturday party line-up is announced in May.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">Get the Friday letter</a>\n        </div>\n      </div>\n      <div class=\"ds-stack ds-stack--wide\">\n        <ul class=\"ds-grid ds-grid--3\">\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--1 ds-cover--dots\"><span class=\"ds-avatar ds-avatar--large ds-avatar--2\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Ines Marchetti</a></h3>\n            <p class=\"ds-grid__text\">Poster maker, prints everything twice</p>\n            <span class=\"ds-badge ds-badge--plain\">Friday 10:15</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--3 ds-cover--zig\"><span class=\"ds-avatar ds-avatar--large ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Rosa Kiviniemi</a></h3>\n            <p class=\"ds-grid__text\">Builds toys that teach colour</p>\n            <span class=\"ds-badge ds-badge--plain\">Friday 11:30</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--2 ds-cover--grid\"><span class=\"ds-avatar ds-avatar--large ds-avatar--3\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Aino Berg</a></h3>\n            <p class=\"ds-grid__text\">Draws maps of places that never existed</p>\n            <span class=\"ds-badge ds-badge--plain\">Saturday 10:00</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--4 ds-cover--terrazzo\"><span class=\"ds-avatar ds-avatar--large ds-avatar--1\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Milan Dvorak</a></h3>\n            <p class=\"ds-grid__text\">Animator, loops only</p>\n            <span class=\"ds-badge ds-badge--plain\">Saturday 11:15</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--2 ds-cover--stripes\"><span class=\"ds-avatar ds-avatar--large ds-avatar--3\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Petra Halloran</a></h3>\n            <p class=\"ds-grid__text\">Art director of a very small magazine</p>\n            <span class=\"ds-badge ds-badge--plain\">Sunday 10:00</span>\n          </div>\n        </li>\n        <li class=\"ds-grid__cell\">\n          <div class=\"ds-cover ds-cover--3 ds-cover--dots\"><span class=\"ds-avatar ds-avatar--large ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span></div>\n          <div class=\"ds-grid__body\">\n            <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Sami Oyelaran</a></h3>\n            <p class=\"ds-grid__text\">Colour researcher and weaver</p>\n            <span class=\"ds-badge ds-badge--plain\">Sunday 11:15</span>\n          </div>\n        </li>\n        </ul>\n        <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Pages\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#speakers\" aria-disabled=\"true\">Previous</a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#speakers\" aria-current=\"page\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#speakers\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#speakers\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#speakers\">Next</a></li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"schedule\">\n  <section class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-shape ds-shape--half ds-shape--c3 ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#schedule\">Schedule</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Friday 12 June</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Schedule</h1>\n          <p class=\"ds-page-header__lead\">Two stages and two workshop rooms. Times may move by a quarter of an hour.</p>\n        </div>\n        <div class=\"ds-page-header__actions\">\n          <a class=\"ds-button ds-button--secondary\" href=\"#info\">Getting there</a>\n          <a class=\"ds-button\" href=\"#tickets\">Get tickets</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band\">\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#schedule\" role=\"tab\" aria-selected=\"true\">Friday 12</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#schedule\" role=\"tab\">Saturday 13</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#schedule\" role=\"tab\">Sunday 14</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#schedule\" role=\"tab\">Workshops <span class=\"ds-badge ds-badge--plain\">18</span></a></li>\n        </ul>\n        <div class=\"ds-stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <strong class=\"ds-notice__title\">Moved</strong>\n            <p class=\"ds-notice__text\">The stencil workshop is now in room B, next to the print shop.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <strong class=\"ds-notice__title\">Full</strong>\n            <p class=\"ds-notice__text\">Risograph basics has no seats left. Join the waiting list at the desk.</p>\n          </div>\n        </div>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Time</th><th>Session</th><th class=\"ds-table__extra\">Where</th><th>Status</th><th class=\"ds-table__num\">Seats left</th></tr>\n          </thead>\n          <tbody>\n            <tr><td>09:30</td><td>Doors, coffee, name stickers</td><td class=\"ds-table__extra\">Hall</td><td><span class=\"ds-badge ds-badge--success\">Open</span></td><td class=\"ds-table__num\">900</td></tr>\n            <tr class=\"is-current\"><td>10:15</td><td><span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Everything twice</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">Ines Marchetti, 40 minutes</span></span></td><td class=\"ds-table__extra\">Main stage</td><td><span class=\"ds-badge ds-badge--success\">Open</span></td><td class=\"ds-table__num\">212</td></tr>\n            <tr><td>11:30</td><td><a class=\"ds-link ds-link--quiet\" href=\"#speakers\">Toys that teach colour</a></td><td class=\"ds-table__extra\">Main stage</td><td><span class=\"ds-badge ds-badge--warning\">Filling</span></td><td class=\"ds-table__num\">48</td></tr>\n            <tr><td>13:00</td><td>The long table</td><td class=\"ds-table__extra\">Tracks 3 and 4</td><td><span class=\"ds-badge ds-badge--success\">Open</span></td><td class=\"ds-table__num\">900</td></tr>\n            <tr><td>14:30</td><td>Risograph basics</td><td class=\"ds-table__extra\">Workshop A</td><td><span class=\"ds-badge ds-badge--danger\">Full</span></td><td class=\"ds-table__num\">0</td></tr>\n            <tr><td>15:30</td><td>Cut a stencil alphabet</td><td class=\"ds-table__extra\">Workshop B</td><td><span class=\"ds-badge ds-badge--warning\">Filling</span></td><td class=\"ds-table__num\">6</td></tr>\n            <tr><td>17:00</td><td>Loops only</td><td class=\"ds-table__extra\">Side stage</td><td><span class=\"ds-badge ds-badge--success\">Open</span></td><td class=\"ds-table__num\">130</td></tr>\n          </tbody>\n        </table>\n        <div class=\"ds-badges\" data-component=\"badge\">\n          <span class=\"ds-badge\">Main stage</span>\n          <span class=\"ds-badge ds-badge--alt\">New</span>\n          <span class=\"ds-badge ds-badge--plain\">Workshop</span>\n          <span class=\"ds-badge ds-badge--success\">Open</span>\n          <span class=\"ds-badge ds-badge--warning\">Filling</span>\n          <span class=\"ds-badge ds-badge--danger\">Full</span>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Rooms filling up</h2>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress__legend\"><span>Main stage</span><span>75%</span></div>\n            <span class=\"ds-progress ds-progress--75\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Main stage\"><span class=\"ds-progress__bar\"></span></span>\n            <div class=\"ds-progress__legend\"><span>Side stage</span><span>40%</span></div>\n            <span class=\"ds-progress ds-progress--40 ds-progress--alt\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Side stage\"><span class=\"ds-progress__bar\"></span></span>\n            <div class=\"ds-progress__legend\"><span>Workshop B</span><span>90%</span></div>\n            <span class=\"ds-progress ds-progress--90\" role=\"progressbar\" aria-valuenow=\"90\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Workshop B\"><span class=\"ds-progress__bar\"></span></span>\n          </div>\n        </section>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">On stage today</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--1\" href=\"#speakers\"><span class=\"ds-avatar__pic\">IM</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Ines Marchetti</span><span class=\"ds-avatar__meta\">10:15, main stage</span></span></a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--3\" href=\"#speakers\"><span class=\"ds-avatar__pic\">RK</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">11:30, main stage</span></span></a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-avatar ds-avatar--2\" href=\"#speakers\"><span class=\"ds-avatar__pic\">TO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Tunde Okafor</span><span class=\"ds-avatar__meta\">15:30, workshop B</span></span></a></li>\n          </ul>\n        </aside>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"tickets\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--c2 ds-shape--br ds-shape--turn\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--dots ds-shape--ink ds-shape--tr\" aria-hidden=\"true\"></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#tickets\">Tickets</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Order</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Tickets</h1>\n          <p class=\"ds-page-header__lead\">Early prices until 1 May. Every ticket includes lunch at the long table.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--surface\">\n    <div class=\"ds-band__inner ds-stack ds-stack--wide\">\n      <div class=\"ds-prices\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">One day</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">95</p>\n            <p>Any single day, both stages, lunch.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#tickets\">Pick a day</a>\n          </div>\n        </section>\n        <section class=\"ds-panel ds-panel--pick\">\n          <h2 class=\"ds-panel__title\">Three days</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">220</p>\n            <p>All talks, one workshop of your choice, three lunches and the Saturday party.</p>\n            <a class=\"ds-button ds-button--small\" href=\"#tickets\">Take all three</a>\n          </div>\n        </section>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Student</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__price\">120</p>\n            <p>Three days with a valid student card at the door.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#tickets\">Bring your card</a>\n          </div>\n        </section>\n      </div>\n      <div class=\"ds-split ds-split--even\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Your order</h2>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" data-component=\"form\">\n              <div class=\"ds-form__row\">\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"t-name\">Name on the badge</label>\n                  <input class=\"ds-form__control\" id=\"t-name\" type=\"text\" value=\"Aino Berg\">\n                </div>\n                <div class=\"ds-form__field\">\n                  <label class=\"ds-form__label\" for=\"t-mail\">Email</label>\n                  <input class=\"ds-form__control is-invalid\" id=\"t-mail\" type=\"email\" value=\"aino@example\" aria-invalid=\"true\" aria-describedby=\"t-mail-err\">\n                  <p class=\"ds-form__error\" id=\"t-mail-err\">Enter a full address, such as name@example.org.</p>\n                </div>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"t-kind\">Ticket</label>\n                <select class=\"ds-form__control\" id=\"t-kind\">\n                  <option>Three days, 220</option>\n                  <option>One day, 95</option>\n                  <option>Student, 120</option>\n                </select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"t-note\">Anything we should know</label>\n                <textarea class=\"ds-form__control ds-form__control--area\" id=\"t-note\">Vegetarian lunch, please.</textarea>\n                <p class=\"ds-form__hint\">Food, access needs, a workshop you hope for.</p>\n              </div>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me the Friday letter</label>\n              <label class=\"ds-switch\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Add the Saturday party<span class=\"ds-switch__hint\">Free with three days, 15 otherwise</span></span></label>\n              <div class=\"ds-buttons\" data-component=\"buttons\">\n                <button class=\"ds-button\" type=\"button\">Reserve</button>\n                <button class=\"ds-button ds-button--secondary\" type=\"button\">Save for later</button>\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Clear order</button>\n                <button class=\"ds-button\" type=\"button\" disabled>Pay at the door</button>\n              </div>\n            </form>\n          </div>\n        </section>\n        <div>\n          <h2 class=\"ds-band__label\">Before you ask</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">Can I give my ticket to a friend? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Yes, until the day before. Change the name on the badge from the link in your receipt.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Is the depot step-free? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Both stages and the long table are. Workshop A has two steps and a ramp.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">What if a workshop is full? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Put your name on the list at the desk. Seats that are empty five minutes in are given away.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Do children need a ticket? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Under twelve come free with an adult.</p></div>\n            </details>\n          </div>\n          <section class=\"ds-panel ds-panel--gap\">\n            <h3 class=\"ds-panel__title\">Early tickets</h3>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-progress__legend\"><span>Sold so far</span><span>540 of 900</span></div>\n              <span class=\"ds-progress ds-progress--60\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Early tickets sold\"><span class=\"ds-progress__bar\"></span></span>\n              <p>Coming as six or more? Write to the desk and we keep your seats together at the long table.</p>\n              <a class=\"ds-link\" href=\"#info\">Write to the desk</a>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Clear this order?</h2>\n        <a class=\"ds-dialog__close\" href=\"#tickets\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>Your seat in the stencil workshop is held for ten more minutes. Clearing the order gives it to the next person on the list.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#tickets\">Keep it</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Clear order</button>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"info\">\n  <section class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--ring ds-shape--c4 ds-shape--br\" aria-hidden=\"true\"></span>\n    <span class=\"ds-shape ds-shape--line ds-shape--c2 ds-shape--tr\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n    <div class=\"ds-page-header__inner\">\n      <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Festival</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#info\">Good to know</a></li>\n        <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Getting there</li>\n      </ol>\n      <div class=\"ds-page-header__row\">\n        <div>\n          <h1 class=\"ds-page-header__title\">Good to know</h1>\n          <p class=\"ds-page-header__lead\">Where the depot is, what to bring and how we treat each other.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-band ds-band--surface\">\n    <div class=\"ds-band__inner ds-split\">\n      <div class=\"ds-stack ds-stack--wide\">\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>Getting there</h1>\n          <p class=\"ds-prose__lead\">The old tram depot is ten minutes on foot from the central station. Follow the yellow triangles painted on the pavement.</p>\n          <h2>By tram, bike or on foot</h2>\n          <p>Lines 4 and 9 stop at the depot gate. There are racks for four hundred bikes behind the hall, and the map link in your receipt opens at <code>gate-b</code>, the entrance nearest the long table.</p>\n          <ul>\n            <li>Doors open at nine, the first talk starts at a quarter past ten</li>\n            <li>Bring a pencil; paper is on every table</li>\n            <li>The cloakroom is free and closes at midnight</li>\n          </ul>\n          <h3>House rules</h3>\n          <p>Be kind, share the scissors and <strong>ask before you photograph someone's work</strong>. The full text is read out once, on Friday morning.</p>\n        </article>\n        <div>\n          <h2 class=\"ds-band__label\">Read next</h2>\n          <ul class=\"ds-links\" data-component=\"links\">\n            <li><a class=\"ds-link\" href=\"#schedule\">The Friday schedule</a></li>\n            <li><a class=\"ds-link is-visited\" href=\"#speakers\">Who is speaking</a></li>\n            <li><a class=\"ds-link is-hover\" href=\"#tickets\">Ticket questions</a></li>\n            <li><a class=\"ds-link is-active\" href=\"#home\">Back to the poster</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">On this page</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#info\">Getting there</a><span class=\"ds-badge ds-badge--plain\">map</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#info\">What to bring</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#info\">House rules</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#info\">Access</a></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel ds-panel--pick\">\n          <h3 class=\"ds-panel__title\">Need a hand?</h3>\n          <div class=\"ds-panel__body\">\n            <p>The desk by gate B is staffed from eight until the last talk ends.</p>\n            <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#tickets\">Ticket questions</a>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n</section>\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <span class=\"ds-shape ds-shape--disc ds-shape--c3 ds-shape--edge-r\" aria-hidden=\"true\"></span>\n  <span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--tr ds-shape--tilt\" aria-hidden=\"true\"></span>\n  <div class=\"ds-footer__inner\">\n    <div>\n      <p class=\"ds-footer__brand\">chronoskin</p>\n      <p class=\"ds-footer__text\">A festival of design, held each June in a tram depot. Placeholder organiser, placeholder address.</p>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Festival</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Poster</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#speakers\">Speakers</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#schedule\">Schedule</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Come along</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#tickets\">Tickets</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#info\">Getting there</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#info\">House rules</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Stay in touch</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Friday letter</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#tickets\">Volunteer</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#info\">Contact</a></li>\n      </ul>\n    </div>\n  </div>\n  <p class=\"ds-footer__legal\">Specimen page. All names, dates and prices are placeholders.</p>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.landing.s01.p01.t01.u01\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-me-1111\",\n  \"short\": \"v1-me-1111\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #fdf6ec;\n  --color-canvas: #fdf6ec;\n  --color-surface: #ffffff;\n  --color-surface-alt: #fff1c9;\n  --color-surface-strong: #ffd9e6;\n  --color-bar: #ffd23f;\n  --color-bar-text: #141414;\n  --color-bar-alt: #141414;\n  --color-bar-alt-text: #fdf6ec;\n  --color-inverse: #141414;\n  --color-inverse-text: #fdf6ec;\n  --color-text: #141414;\n  --color-text-muted: #5f5a52;\n  --color-heading: #141414;\n  --color-heading-alt: #141414;\n  --color-link: #141414;\n  --color-link-quiet: #141414;\n  --color-link-visited: #5b3fa0;\n  --color-link-hover: #c9146a;\n  --color-link-active: #00756f;\n  --color-border: #141414;\n  --color-border-strong: #141414;\n  --color-border-muted: #d6cab6;\n  --color-accent: #ff5fa2;\n  --color-accent-text: #141414;\n  --color-accent-alt: #00c2b8;\n  --color-fill-1: #ffd23f;\n  --color-fill-2: #ff5fa2;\n  --color-fill-3: #00c2b8;\n  --color-fill-4: #6c8cff;\n  --color-button: #ff5fa2;\n  --color-button-text: #141414;\n  --color-button-hover-text: #141414;\n  --color-button-secondary: #141414;\n  --color-button-secondary-text: #fdf6ec;\n  --color-input: #ffffff;\n  --color-input-text: #141414;\n  --color-input-border: #141414;\n  --color-disabled: #d8d2c6;\n  --color-disabled-text: #6b655c;\n  --color-danger: #d4143c;\n  --color-danger-surface: #ffd9de;\n  --color-success: #3ecf8e;\n  --color-warning: #ff9f1c;\n  --color-notice: #c8f4f0;\n  --color-notice-text: #141414;\n  --color-focus: #141414;\n  --color-shadow: #ff8a4c;\n  --color-overlay: rgb(20 20 20 / 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Work Sans\", \"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: \"Poppins\", \"Montserrat\", \"Avenir Next\", \"Century Gothic\", Futura, sans-serif;\n  --font-ui: \"Poppins\", \"Montserrat\", \"Avenir Next\", \"Century Gothic\", Futura, sans-serif;\n  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  --text-base: 17px;\n  --text-small: 14px;\n  --text-ui: 14px;\n  --text-large: 21px;\n  --text-display: 104px;\n  --text-h1: 56px;\n  --text-h2: 38px;\n  --text-h3: 22px;\n  --line-body: 1.55;\n  --line-heading: 1.08;\n  --line-display: 0.95;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 800;\n  --weight-display: 900;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: -0.01em;\n  --display-tracking: -0.03em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 999px;\n  --radius-page: 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: radial-gradient(color-mix(in srgb, var(--color-border-muted) 80%, transparent) 2px, transparent 2.5px) 0 0 / 24px 24px, var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: repeating-linear-gradient(-45deg, var(--color-accent) 0 10px, transparent 10px 30px), var(--color-bar-alt);\n  --fill-inverse: radial-gradient(var(--color-fill-1) 5px, transparent 5.5px) 0 0 / 96px 96px, radial-gradient(var(--color-fill-2) 4px, transparent 4.5px) 48px 32px / 96px 96px, radial-gradient(var(--color-fill-3) 6px, transparent 6.5px) 24px 64px / 96px 96px, 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-accent-alt);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid var(--color-focus);\n  --transition: transform 0.15s ease, background-color 0.15s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}