{ "id": "v1-bg-8232", "long_id": "v1.bento-grids.portal.s08.p02.t03.u02", "name": "Line-up bento, 2024", "era": { "slug": "bento-grids", "code": "bg", "name": "Bento grids", "years": [ 2022, 2026 ], "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A festival site whose programme is a bento: three wide tracks on a short row unit, in which the poster cell, the headliners, the stages, the countdown and the ticket counter are rounded cells that grow downwards more than sideways. The ground is a deep wine red, cells are a shade lighter and lit from one corner, a few are filled flat with bottle green, plum or night blue, text is pale pink in a heavy narrow grotesque, and one lime carries links, progress and the closing call. The form was common for festivals, conferences, launches and year-in-review pages from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-8232", "preview_url": "https://chrono.skin/s/v1-bg-8232/specimen.html", "files": { "STYLE.md": "# Line-up bento, 2024\n\n## Summary\n\nA festival site whose programme is a bento: three wide tracks on a short row unit, in which the poster cell, the headliners, the stages, the countdown and the ticket counter are rounded cells that grow downwards more than sideways. The ground is a deep wine red, cells are a shade lighter and lit from one corner, a few are filled flat with bottle green, plum or night blue, text is pale pink in a heavy narrow grotesque, and one lime carries links, progress and the closing call. The form was common for festivals, conferences, launches and year-in-review pages from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1160px, designed at a 1440px viewport, padded by `--space-5` (24px) at the sides. Nothing spans the window: no bar, no band, no rule.\n- `.ds-nav` is a masthead that scrolls with the page. Its first line, `.ds-nav__top`, holds the `.ds-brand` at the left, the date and place in `.ds-nav__when` in the middle and one button at the right. Under it `.ds-nav__links` is one strip as wide as the column, filled with `--fill-bar-alt`, cut into five equal segments; the current view's segment is filled with `--color-surface-strong`, and the last segment opens a `.ds-menu`.\n- `.ds-grid` has three equal tracks (about 375px) and rows of at least `--size-row` (148px). A cell takes one track and one row by default; `--w2` takes two tracks, `--full` all three, `--h2` two rows, `--h3` three. `.ds-grid--auto` lets rows follow their content.\n- The home page is one grid. Rows one to three: the `.ds-hero` poster, two tracks by three rows, with a two-row act cell over a one-row countdown beside it. Rows four and five: three two-row cells (an act, the `.ds-carousel` of stages, the ticket counter). Row six: the `.ds-stats` row of four small tinted cells. Rows seven and eight: a two-row list, two one-row cells stacked in the middle, the two-row `--accent` cell. The footer is the last cell, inverted.\n- Cells never touch: the gap is `--space-gap` (18px) in both directions, the padding inside a cell `--space-cell` (28px), in the hero and the footer `--space-7` (48px).\n- Spacing scale: `--space-1` 4px (strip inset, pill padding), `--space-2` 8px (button gap, title to caption), `--space-3` 12px (control padding, table cell padding, list rows), `--space-4` 16px (stack gap inside a cell, form gap, cell head to body), `--space-5` 24px (page gutter, above the masthead, title to lead), `--space-6` 32px (page header padding, hero blocks), `--space-7` 48px (hero and footer padding, dialog stage), `--space-8` 72px, `--space-9` 104px (textarea height).\n- Controls are `--size-control` (42px) tall, `--size-control-large` (54px) in the hero and on the accent cell, 32px with `--small`; an avatar and the brand mark are `--size-avatar` and `--size-icon` (44px), a large avatar 88px.\n- Inner pages (the programme, one act, tickets) have no hero. A view starts with the `.ds-breadcrumb` on the bare page, then the `.ds-page-header` as a band of its own: a full-width cell with the title at `--text-h1`, one line of text, an optional large avatar before them and buttons or a badge at the right. Under it, optionally, a `.ds-toolbar` with the `.ds-tabs` pill at the left and badges at the right, then one `.ds-grid--auto` in the same three tracks: the working table or form takes `--w2` with a one-track cell beside it, everything else is one track.\n- Views: `home` is the festival (poster, two headliners, countdown, stages, ticket counter, the four figures, more acts, getting there, reminders, the call for a weekend pass); `lineup` is one day's programme (tabs for the days, the status labels, the table with pagination, stages as a sidebar, announcements, an empty slot, the bookers); `artist` is one act (prose, set times in panels, how full the field is, neighbouring acts, links); `tickets` is the box office (three ticket cells, the order form with its buttons, extras as switches, notices, questions as an accordion, the dialog that empties the order). The strip marks Festival, Line-up, Headliner or Tickets.\n- Below 960px the grid and the stats row drop to two tracks and the hero takes both. Below 640px everything is one column and rows follow their content, the date line of the masthead hides, display type steps down to `--text-h2`, a table hides its `.ds-table__extra` columns and scrolls inside `.ds-table__scroll`, and a tooltip opens as a full row under its line (from 960px down).\n- On a phone (640px and below) the strip `.ds-nav__links` keeps its five segments on one row, with a smaller `--text-small` label and tighter padding, so the nav never wraps; the `.ds-nav__when` date line is not shown and the brand and the tickets button stay on the top row. The current segment stays filled with `--color-surface-strong`, and the list of the last segment's `.ds-menu--end` drop-down is at least 20 characters wide.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- A neutral graphite ramp without any blue in it: `--color-page`, `--color-canvas` and `--color-bar` `#1c1c1c`; cells `--color-surface` `#232323`; panels, the dialog and current navigation items `--color-surface-alt` `#2e2e2e`; current tab, neutral badges, chart bars and inline code `--color-surface-strong` `#3e3e3e`. `--color-bar-alt` and `--color-input` are the darker `#161616` (table head strip, tab row, form controls).\n- Text: `--color-bar-text` `#ffffff` (brand and hovered navigation), `--color-heading` `#ededed`, `--color-text` and `--color-heading-alt` `#dddddd`, `--color-text-muted`, `--color-link-quiet` and `--color-bar-alt-text` `#a0a0a0`, `--color-disabled-text` `#707070`.\n- Green leads. `--color-button` and `--color-accent` are the deeper green `#37996b` with white text: primary button, accent badge, highlighted chart bar, call-to-action cell. `--color-link`, `--color-focus` and `--color-success` are the brighter `#3ecf8e`: links, icons, the accent phrase of the hero title.\n- `--color-accent-alt` `#569cd6` is a quiet blue for \"new\" markers, passed checks, switched-on toggles and code keys, so that green stays the brand colour and the status colour only.\n- Borders are solid greys, not translucent white: `--color-border` `#343434`, `--color-border-strong` and `--color-input-border` `#505050`, `--color-border-muted` `#2e2e2e`.\n- Feature cells are barely tinted: `--color-fill-1` `#002533` (teal), `--color-fill-2` `#28302c` (green-grey), `--color-fill-3` `#0c0f24` (navy), `--color-fill-4` `#2e2e2e`.\n- Status: `--color-warning` `#f7be2b`, `--color-danger` `#fa1f41` on `--color-danger-surface` `#201818`; the notice is `--color-notice` `#002533` with `--color-notice-text` `#dddddd`. `--color-inverse` `#ededed` with `--color-inverse-text` `#1c1c1c` is the button on the accent cell.\n- One neutral grotesque, Inter first with the system sans behind it, for `--font-body`, `--font-heading` and `--font-ui`; `--font-mono` is the system mono.\n- Heavy headings: `--weight-display` 800 on the hero title and stat figures, `--weight-heading` and `--weight-bold` 700 on every title, `--weight-ui` 600 on buttons, navigation, tabs and labels, `--weight-body` 400.\n- Sizes are a step up from the usual: `--text-display` 56px at `--line-display` 1.06, `--text-h1` 46px, `--text-h2` 32px, `--text-h3` 22px at `--line-heading` 1.15; `--text-large` 20px for the lead and cell titles.\n- `--text-base` and `--text-ui` are both 16px (`--line-body` 1.5), so buttons, navigation and form controls read as large as the body; `--text-small` 14px is for captions, tables and lists.\n- Links in running text are underlined at rest and on hover (`--link-decoration`, `--link-decoration-hover` underline); quiet links in navigation, sidebar and footer are not (`--link-decoration-quiet` none). No tracking, no transforms.\n- Medium corners: `--radius-page` 20px on cells, `--radius-panel` 16px on panels, tables, notices and the dialog, `--radius-control` 11px on buttons, inputs and icon tiles, `--radius-pill` for badges, tabs and switches.\n- Cells are lit, not dropped: `--shadow-panel` is a 1px inset line of `--color-heading` at 5% on the top edge plus a 20px halo of `--color-accent` at 32%, so every cell stands in a glow of the accent colour that fills the gaps of the grid; the dialog has the same halo at 36%.\n- `--fill-panel` is a vertical gradient from 2% to 6% of `--color-text` laid into `--color-surface`: the cell is a touch stronger at the bottom than at the top.\n- Buttons are lit from above: `--fill-button` runs from the button colour mixed 15% with white down to the plain colour, `--shadow-control` adds an inset top line of `--color-heading` at 10% and a 2px drop of `--color-shadow` at 28%; hover deepens the drop to 4px at 25% and `--fill-button-hover` moves 15% toward the button's text colour.\n- `--fill-bar` is `--color-bar` at 80% so the page shows through the floating navigation pill. `--border-width` is 1px, `--border-width-strong` 2px for the focus ring. `--transition` is a 0.2s fade of colours and shadow.\n- The smallest text is 12px, written as `calc(var(--text-small) * 0.857)` because the vocabulary has no token for it: badges, hints, list meta, stat notes, the footer strip. Code in a cell is `calc(var(--text-small) * 0.886)`.\n- Which text sits on which fill: `--color-bar-text` on the navigation pill (current item on `--color-surface-alt`); `--color-heading`, `--color-text` and `--color-text-muted` on cells, including the hero cell, the footer cell and the `--color-fill-*` cells; `--color-accent-text` on the accent cell; `--color-bar-alt-text` on the table head strip and the tab row; `--color-inverse-text` only on the `--inverse` button. Table rows have no fill of their own and take `--color-text` on the cell.\n- Fills 1 to 3 are the corner of a diagonal gradient that fades to `--color-surface`; fill 4 is flat. At most half the cells of a grid are tinted.\n- The hero glow and the `--glow` cell are a radial fade from `--color-fill-2` to transparent, so a glow is always the palette's own tint (green-grey here) and a palette with neutral fills simply has none; the accent colour is never used for it.\n- One-off mixes written in `components.css` because no token exists: the button hairline (25% button text in the button colour), the `--new` and status badges (the colour at 14% with a 30% hairline), the danger button's hairline (danger at 45%) and hover fill, notice borders.\n\n## Components\n\n- `.ds-page` on ``: wine ground, family and 17px text. `.ds-page__inner` is the 1160px column of a view.\n- `.ds-nav`: the masthead. `.ds-nav__inner` holds `.ds-nav__top` (brand, `.ds-nav__when` with `.ds-nav__sep` dots, `.ds-nav__actions`) and the strip `.ds-nav__links` of `.ds-nav__link` (`is-current` by hand).\n- `.ds-brand`: the site's mark and name at the left of the masthead. `.ds-brand__mark` is a 44px round tile dressed like the primary button (`--fill-button`, `--color-button-text`, outline, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading family at 22px. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: the poster cell, always with `.ds-grid__cell--w2` and `--h3`. Badges for date and place, `.ds-hero__title`, `.ds-hero__lead` at the top; `.ds-hero__actions` with two large buttons at the bottom.\n- `.ds-grid`: the bento. `.ds-grid__cell` with spans `--w2`, `--full`, `--h2`, `--h3`; `--stack` (16px between children), `--between` (first child at the top, last at the bottom), `--flush` (no padding, clipped, for the dialog stage), fills `--fill-1` to `--fill-4`, `--accent`, `--bare`. Inside: `.ds-grid__head` (title left, badge or icon right), `.ds-grid__icon` with `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__visual` and `.ds-grid__actions` (pushed to the bottom). `.ds-grid--auto` is for cells that hold components.\n- `.ds-act`: one artist as the whole content of a cell and a link to the act: `.ds-act__top` (a large `.ds-avatar` and a day badge), then `.ds-act__name` and `.ds-act__meta` at the bottom.\n- `.ds-price`: a figure at 48px with `.ds-price__unit` saying what it buys; one per ticket cell.\n- `.ds-page-header`: the head of an inner page as a full-width band. `.ds-page-header__copy` holds an optional large avatar and a block with `.ds-page-header__title` and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right. Put a `.ds-breadcrumb` above it; never use it with a `.ds-hero`.\n- `.ds-stat`: one figure: `.ds-stat__value` (48px, optional `.ds-stat__unit`) with a `.ds-stat__label` and an optional `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row, spanning the grid: four small cells, tinted with `.ds-stat--fill-1` to `--fill-4`. `.ds-stat--display` raises a single figure in a cell of its own to 72px.\n- `.ds-prose`: long text in a `--w2` cell; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline lime link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for pink links. `.ds-links` lays several out in a row.\n- `.ds-button`: pink primary with a darker lip. `--secondary` deep wine with a pale outline, `--danger` coral text on `--color-danger-surface` (never a solid block), `--inverse` for the accent cell, `--large`, `--small`; states `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill. `--accent` lime, `--new`, `--count`, optional `.ds-badge__dot`; status labels `--success` (on time), `--warning` (moved, going fast), `--danger` (cancelled, sold out). `.ds-chips` wraps several.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full`) with `.ds-form__label`, `.ds-form__control` (`--area`; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`.\n- `.ds-table`: a 22px-rounded box with a `--fill-bar-alt` head and faint row rules, inside `.ds-table__scroll`; `.ds-table__link` on the act's name, `.ds-table__num`, `.ds-table__muted`, `.ds-table__extra` (hidden on a phone), `tr.is-current` for the act now on.\n- `.ds-list`: rule-separated `.ds-list__item` with `.ds-list__title`, `.ds-list__text`, `.ds-list__meta`, or holding a `.ds-person`; `.ds-list__row` puts a badge beside a title. `.ds-rows` with `.ds-rows__item` is the label-and-control list used for switches.\n- `.ds-panel`: the small 22px card inside a cell, `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__meta`; `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented pill of `.ds-tabs__tab`, `is-current` filled; one tab per day. `.ds-toolbar` puts it on one line with a row of badges.\n- `.ds-sidebar`: a one-track cell with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled): the stages of a day.\n- `.ds-notice`: blue information box with `.ds-notice__title` and `.ds-notice__text`; `--error` for the dark red variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items; `is-current` filled, `is-disabled` greyed.\n- `.ds-breadcrumb`: 14.5px trail of `.ds-breadcrumb__item` parted by slashes, the last `is-current`; the first thing of an inner view.\n- `.ds-dialog`: 480px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with `.ds-dialog__glyph`), `.ds-dialog__body`, `.ds-dialog__actions`, shown on a `.ds-stage` filled with `--color-overlay` inside a `--flush` cell.\n- `.ds-empty`: centred `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` cell.\n- `.ds-checks`: a ticked list, `.ds-checks__item` with `.ds-checks__mark`, for what a ticket includes. `.ds-code` (`.ds-code__key`, `.ds-code__str`) and `.ds-chart` (`.ds-chart__bar`) are there for a cell that needs them.\n- `.ds-menu`: a drop-down under its trigger, opened by hover or keyboard focus (`is-open` by hand): `.ds-menu__list` of `.ds-menu__item` with an optional `.ds-menu__hint`, parted by `.ds-menu__rule`; `.ds-menu__caret` in the trigger; `--end` aligns it to the right edge. Used under the strip's last segment.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`; the questions on the tickets page.\n- `.ds-tooltip`: a focusable term with `.ds-tooltip__mark` and `.ds-tooltip__tip`, shown on hover or focus (`is-open` by hand) on `--fill-inverse`.\n- `.ds-carousel`: `.ds-carousel__track` of `.ds-carousel__slide` with scroll snap, one showing; `.ds-carousel__foot` holds `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__arrows` of `.ds-carousel__arrow` with a `.ds-carousel__glyph`. Used for the stages.\n- `.ds-switch`: a label around `.ds-switch__input` (a checkbox) and `.ds-switch__track`; on is `--color-accent-alt` with a dark knob.\n- `.ds-progress`: `.ds-progress__label` with `.ds-progress__value` over `.ds-progress__bar` with `.ds-progress__fill` (`--1` to `--5` set the width; `--success`, `--warning` the colour). Tickets sold, pitches taken.\n- `.ds-avatar`: initials on a disc, `--accent`, `--large` (88px, in act cells and an act's page header); `.ds-avatars` overlaps several; `.ds-person` puts one beside `.ds-person__copy` with `.ds-person__name` and `.ds-person__meta`.\n- `.ds-footer`: the last cell, inverted: `.ds-footer__inner` with `.ds-footer__about` (`.ds-footer__brand` as a 48px wordmark, `.ds-footer__text`), two columns of `.ds-footer__title` over a `.ds-footer__list` of `.ds-footer__link`, and `.ds-footer__strip`.\n\n## Never\n\n- `block-gap <= 48px`: cells sit 18px apart.\n- `content-width <= 1160px`: content stays in the centred column.\n- `palette-colours <= 36`: one neutral ramp, one periwinkle, one green and four pale washes; no further hues.\n- `font-weight <= 800`: 800 is the hero weight; nothing is heavier.\n- `font-size <= 56px`: the hero heading tops out at 56px; weight carries the emphasis, not size.\n- `font-size >= 12px`: the smallest text is 12px.\n- `font-families <= 2`: one sans for everything plus the mono for code.\n- `line-height <= 1.6`: body text sits at 1.5.\n- `uppercase-text <= 1%`: nothing is set in capitals.\n- `border-radius <= 12px`: corners are tight; the largest box radius is the 12px cell.\n- `border-width <= 2px`: every hairline is 1px; 2px exists only as the focus ring.\n- `box-shadow-blur <= 15px`: shadows are rings and short blurs; the largest is the dialog's 15px.\n- `text-shadow = none`: no text shadows.\n- `animation = none`: nothing animates.\n- `gradient-fills <= 30%`: tiles are flat; no token of this pack is a gradient.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new item of the programme is a `.ds-grid__cell` that grows downwards (`--h2`) before it grows sideways, with one large name or figure and one caption; a new box inside a cell is a `.ds-panel`; a new label is a `.ds-badge`; a person is always a `.ds-avatar`, never a picture. Use tokens only: fills are `--fill-panel`, a `--color-surface*` or a flat `--color-fill-*`, outlines `--border-width` in `--color-border`, corners `--radius-page` for cells, `--radius-panel` inside them and `--radius-control` for controls, spacing from the `--space-*` scale. Keep one subject per cell, part cells with the gap and never with a rule, keep lime for what can be clicked or counted, and do not add a full-width band, a glow or a second display family.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1160px;\n --size-measure: 620px;\n --size-control: 42px;\n --size-control-large: 54px;\n --size-row: 148px;\n --size-icon: 44px;\n --size-glyph: 22px;\n --size-check: 18px;\n --size-dot: 8px;\n --size-chart: 96px;\n --size-switch: 42px;\n --size-knob: 18px;\n --size-avatar: 44px;\n --size-dialog: 480px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 72px;\n --space-9: 104px;\n --space-gap: 18px;\n --space-cell: 28px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\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 -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-gap) var(--space-5) var(--space-gap);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: a masthead. Name, date and the ticket button on one line; under it the sections as one strip of equal segments */\n.ds-nav {\n padding-top: var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n display: grid;\n gap: var(--space-gap);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-nav__when {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-2) var(--space-4);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__sep {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-link);\n border-radius: var(--radius-pill);\n}\n.ds-nav__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-nav__links {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) + var(--space-1));\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: var(--size-control);\n padding: 0 var(--space-2);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n color: var(--color-bar-alt-text);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-heading);\n}\n/* the current view fills its segment */\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(#lineup:target) .ds-nav__link[href=\"#lineup\"],\n.ds-page:has(#artist:target) .ds-nav__link[href=\"#artist\"],\n.ds-page:has(#tickets:target) .ds-nav__link[href=\"#tickets\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* hero: the poster. Two tracks wide and three rows tall, type at the top and two discs in the corner */\n.ds-grid .ds-hero {\n justify-content: space-between;\n gap: var(--space-6);\n padding: var(--space-7);\n overflow: hidden;\n background:\n radial-gradient(circle at 100% 100%, var(--color-fill-2) 0, var(--color-fill-2) 34%, transparent 34.3%),\n radial-gradient(circle at 78% 8%, var(--color-fill-3) 0, var(--color-fill-3) 9%, transparent 9.3%),\n var(--fill-panel);\n}\n.ds-hero__title {\n max-width: 11ch;\n margin: var(--space-5) 0 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__lead {\n max-width: 34ch;\n margin: var(--space-5) 0 0;\n font-size: var(--text-large);\n line-height: 1.4;\n color: var(--color-text);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* inner page: the trail on the bare page, then the page header as a band of its own */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-gap);\n padding: var(--space-6) var(--space-cell);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-page-header__copy {\n display: flex;\n flex: 1;\n align-items: center;\n gap: var(--space-5);\n min-width: 0;\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-display);\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__text {\n max-width: var(--size-measure);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* grid: the bento. Three wide tracks and a short row unit; cells grow downwards more than sideways */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-row), auto);\n grid-auto-flow: dense;\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-cell);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--w2 {\n grid-column: span 2;\n}\n.ds-grid__cell--h2 {\n grid-row: span 2;\n}\n.ds-grid__cell--h3 {\n grid-row: span 3;\n}\n.ds-grid__cell--stack {\n gap: var(--space-4);\n}\n.ds-grid__cell--between {\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-grid__cell--fill-1 {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--fill-2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--fill-3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n.ds-grid__cell--flush {\n padding: 0;\n overflow: hidden;\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-4);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-page);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\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: 1.15;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h2);\n line-height: var(--line-heading);\n color: var(--color-accent-text);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__text {\n font-size: var(--text-base);\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-4);\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-4);\n}\n\n/* act: one artist as a cell. A disc with initials, the name set large, stage and hour under it */\n.ds-act {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-width: 0;\n text-decoration: none;\n}\n.ds-act__top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-act__name {\n display: block;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\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-act__meta {\n display: block;\n margin-top: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-act:hover .ds-act__name,\n.ds-act.is-hover .ds-act__name {\n color: var(--color-link);\n}\n\n/* price: a figure with its currency and what it buys */\n.ds-price {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\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 font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-price__unit {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-price,\n.ds-grid__cell--accent .ds-price__unit {\n color: var(--color-accent-text);\n}\n\n/* stats: a row of four small cells, each its own tint */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n grid-column: 1 / -1;\n gap: var(--space-gap);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n justify-content: center;\n padding: var(--space-5) var(--space-cell);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-stats .ds-stat--fill-1 {\n background: var(--color-fill-1);\n}\n.ds-stats .ds-stat--fill-2 {\n background: var(--color-fill-2);\n}\n.ds-stats .ds-stat--fill-4 {\n background: var(--color-fill-4);\n}\n\n/* footer: the last cell, inverted */\n.ds-footer {\n padding: 0 var(--space-5) var(--space-5);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n gap: var(--space-6);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-7) var(--space-7) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-footer__brand {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-inverse-text);\n}\n.ds-footer__text {\n max-width: 34ch;\n margin: var(--space-3) 0 0;\n opacity: 0.75;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n opacity: 0.6;\n}\n.ds-footer__list {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: 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;\n}\n.ds-footer__strip {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n grid-column: 1 / -1;\n padding-top: var(--space-5);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 20%, transparent);\n font-size: calc(var(--text-small) * 0.857);\n opacity: 0.75;\n}\n/* tabs: a segmented pill */\n.ds-tabs {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-bar-alt-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-glyph) + var(--space-1));\n height: calc(var(--size-glyph) + var(--space-1));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\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/* small things that live inside cells */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-chart);\n}\n.ds-chart__bar {\n flex: 1;\n height: 30%;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar.is-current {\n background: var(--fill-accent);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\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 font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__unit {\n font-size: var(--text-h3);\n color: var(--color-text-muted);\n}\n.ds-stat__note {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n.ds-stat--display .ds-stat__value {\n font-size: var(--text-display);\n}\n.ds-stat--display .ds-stat__unit {\n font-size: var(--text-h2);\n}\n.ds-code {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--color-page);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.886);\n line-height: 1.6;\n white-space: pre;\n}\n.ds-code__key {\n color: var(--color-accent-alt);\n}\n.ds-code__str {\n color: var(--color-link);\n}\n.ds-checks {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-checks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-checks__mark {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-accent-alt);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-rows {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-rows__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\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 font-size: var(--text-h1);\n font-weight: var(--weight-display);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: 87.5%;\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* buttons: small, 8px corners, a hairline one step lighter than the fill */\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 padding: 0 var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\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 text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-surface);\n}\n.ds-button--danger {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-danger-surface));\n color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse) 86%, var(--color-inverse-text));\n color: var(--color-inverse-text);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-badge--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 14%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 30%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 14%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n background: currentColor;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--full {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-text);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1.4;\n transition: var(--transition);\n}\n.ds-form__control::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n min-height: var(--space-9);\n resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__hint {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-danger);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n grid-column: 1 / -1;\n}\n\n/* table: its own 12px box inside a cell, hairline rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n border-collapse: separate;\n border-spacing: 0;\n overflow: hidden;\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-page);\n color: var(--color-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table__scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table .ds-table__link {\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n color: var(--color-link);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n color: var(--color-text-muted);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* panel: the small card. 12px corners, sits inside a cell or in a row of its own */\n.ds-panel {\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__meta {\n display: block;\n margin-top: var(--space-4);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-panels {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n\n/* sidebar */\n.ds-sidebar {\n font-size: var(--text-small);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0 calc(var(--space-3) * -1);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n\n/* notice */\n.ds-notice {\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 20%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n opacity: 0.8;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--space-6);\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-link-quiet);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n background: var(--color-surface-alt);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n}\n\n/* dialog: a lifted 12px box on a dimmed stage */\n.ds-dialog {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\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-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border: 0;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.ds-dialog__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-8) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* empty state: an empty cell with only an outline */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: var(--space-1) 0 var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* switch: an on/off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n flex: none;\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n inset: 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 display: block;\n width: var(--size-switch);\n height: calc(var(--size-knob) + var(--space-1));\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--color-accent-alt);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n\n/* menu: a drop-down under its trigger, opened by hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__caret {\n width: var(--size-dot);\n height: var(--size-dot);\n margin-left: var(--space-1);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu--end .ds-menu__list {\n left: auto;\n right: 0;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\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 border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.3;\n color: var(--color-text);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__hint {\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-menu__rule {\n height: 0;\n margin: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* accordion: sections that open and close */\n.ds-accordion {\n display: grid;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n list-style: none;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.35;\n color: var(--color-heading);\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-link);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after,\n.ds-accordion__item.is-open > .ds-accordion__head::after {\n transform: rotate(45deg);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: var(--size-measure);\n margin: 0;\n padding: 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n cursor: help;\n}\n.ds-tooltip__mark {\n display: inline-block;\n width: var(--size-check);\n height: var(--size-check);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n color: var(--color-text-muted);\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: 28ch;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n line-height: 1.4;\n text-align: left;\n text-transform: none;\n letter-spacing: 0;\n white-space: normal;\n transform: translateX(-50%);\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n\n/* carousel: one slide showing, the rest a swipe away, dots under it */\n.ds-carousel {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-link);\n border-color: transparent;\n}\n.ds-carousel__arrows {\n display: flex;\n gap: var(--space-2);\n}\n.ds-carousel__arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-carousel__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n\n/* progress: how far something is, as a bar */\n.ds-progress {\n display: grid;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-progress__value {\n font-size: calc(var(--text-small) * 0.857);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-muted);\n}\n.ds-progress__bar {\n display: block;\n height: var(--space-2);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill--3 {\n width: 62%;\n}\n.ds-progress__fill--4 {\n width: 81%;\n}\n\n/* avatar: a person drawn as initials on a disc */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n.ds-avatar--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-avatar--large {\n width: calc(var(--size-avatar) * 2);\n height: calc(var(--size-avatar) * 2);\n font-size: var(--text-large);\n}\n.ds-avatars {\n display: flex;\n align-items: center;\n padding-left: var(--space-2);\n}\n.ds-avatars .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n}\n.ds-person {\n display: flex;\n color: inherit;\n text-decoration: none;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-person__copy {\n display: grid;\n min-width: 0;\n}\n.ds-person__name {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1.3;\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-person__meta {\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n\n.ds-person:hover .ds-person__name,\n.ds-person.is-hover .ds-person__name {\n color: var(--color-link);\n}\n\n/* this layout's own turns on the shared components */\n.ds-brand {\n gap: var(--space-3);\n}\n.ds-brand__mark {\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: var(--radius-pill);\n}\n.ds-brand__name {\n font-size: var(--text-h3);\n font-weight: var(--weight-display);\n}\n.ds-breadcrumb {\n margin: var(--space-2) var(--space-2) var(--space-4);\n}\n.ds-toolbar {\n margin-bottom: var(--space-gap);\n}\n.ds-stat__value {\n font-size: var(--text-h1);\n}\n.ds-stat--display .ds-stat__value {\n font-size: var(--text-display);\n}\n.ds-table td {\n background: transparent;\n vertical-align: middle;\n}\n.ds-table tr.is-current td {\n background: var(--color-surface-alt);\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n}\n.ds-list__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-dialog {\n margin: 0 auto;\n}\n.ds-stage {\n flex: 1;\n padding: var(--space-7) var(--space-5);\n border-radius: calc(var(--radius-page) - var(--border-width));\n}\n.ds-menu__list {\n top: calc(100% + var(--space-2));\n}\n.ds-menu::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: var(--space-2);\n}\n.ds-checks__item {\n align-items: flex-start;\n}\n\n@media (max-width: 960px) {\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n bottom: auto;\n left: var(--space-4);\n right: var(--space-4);\n width: auto;\n max-width: none;\n margin-top: var(--space-6);\n transform: none;\n }\n .ds-grid,\n .ds-stats {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-grid__cell--w2,\n .ds-hero {\n grid-column: 1 / -1;\n }\n .ds-hero {\n grid-row: auto;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-footer__inner {\n grid-template-columns: 1fr 1fr;\n }\n .ds-footer__about {\n grid-column: 1 / -1;\n }\n}\n@media (max-width: 640px) {\n .ds-grid,\n .ds-form,\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-auto-rows: auto;\n }\n .ds-grid__cell--h2,\n .ds-grid__cell--h3 {\n grid-row: auto;\n }\n .ds-grid__cell,\n .ds-hero,\n .ds-page-header {\n padding: var(--space-5);\n }\n .ds-grid__cell--flush {\n padding: 0;\n }\n .ds-page__inner,\n .ds-nav__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-nav {\n padding-top: var(--space-4);\n }\n .ds-nav__when,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-nav__links {\n grid-template-columns: repeat(5, auto);\n }\n .ds-nav__link {\n padding: 0 var(--space-1);\n font-size: var(--text-small);\n }\n .ds-menu--end .ds-menu__list {\n min-width: 20ch;\n }\n .ds-brand__mark {\n width: var(--size-control);\n height: var(--size-control);\n }\n .ds-hero__title,\n .ds-page-header__title,\n .ds-footer__brand {\n font-size: var(--text-h2);\n letter-spacing: var(--heading-tracking);\n }\n .ds-act__name,\n .ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h3);\n }\n .ds-stat--display .ds-stat__value,\n .ds-price {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-stats .ds-stat {\n padding: var(--space-4);\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-4);\n }\n .ds-footer {\n padding: 0 var(--space-4) var(--space-4);\n }\n .ds-footer__inner {\n grid-template-columns: minmax(0, 1fr);\n padding: var(--space-5);\n }\n}\n\n/* two columns: the last cell of the home grid would stand alone in its row, so it spans the row */\n@media (min-width: 641px) and (max-width: 960px) {\n .ds-view--home .ds-grid > .ds-grid__cell:last-child {\n grid-column: 1 / -1;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin festival, line-up bento specimen\n\n\n\n\n\n
\n
\n
\n \n \n chronoskin\n \n 14 to 16 AugustLakeside parkThree nights\n
\n Get tickets\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n
14 to 16 AugustLakeside park
\n

Three nights of sound by the water

\n

Forty-two acts on three stages, a lake to swim in at noon and a meadow to sleep in afterwards.

\n
\n
\n Get a weekend pass\n See who plays\n
\n
\n\n \n\n
\n

Gates open in23 days

\n
\n\n \n\n
\n
\n
    \n
  • \n Stage 1 of 3\n

    Main stage

    \n

    The big field, facing west. Fourteen acts, the last one ends at midnight.

    \n
    • \n
  • \n Stage 2 of 3\n

    Lake stage

    \n

    A floating platform twenty metres from the shore. Quiet sets at dusk.

    \n
    • \n
  • \n Stage 3 of 3\n

    The tent

    \n

    Six hundred standing, open until three.

    \n
    • \n
\n
\n \n \n \n \n \n
\n
\n
\n\n
\n
\n

Weekend passes

\n Going fast\n
\n
\n Passes sold 4,860 of 6,000\n \n
\n
\n Camping pitches 62%\n \n
\n
\n

129for three nights

\n
\n
\n\n
    \n
  • 42acts over the weekend
    • \n
  • 3stages, one of them afloat
    • \n
  • 6,000people a day, no more
    • \n
  • 03:00when the tent closes
    • \n
\n\n \n\n
\n
\n

Getting there

\n \n
\n

Forty minutes by train, then the free shuttle?Every ten minutes from the station, from noon until one hour after the last set. to the gate.

\n
\n\n
\n

Come for all three nights

\n

A weekend pass costs less than two day tickets, and the meadow is included.

\n
\n Choose a ticket\n
\n
\n\n
\n
    \n
  • Tell me when set times change
    • \n
  • Remind me a week before
    • \n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Festival
    2. \n
  2. Line-up
    3. \n
  3. Friday
    4. \n
\n
\n
\n
\n

Line-up

\n

Forty-two acts, three stages. Times are final unless marked.

\n
\n
\n
\n Get tickets\n
\n
\n
\n \n
\n 14 acts\n On time\n Moved\n Cancelled\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
StartsActStageStatusMinutes
17:30Saffron DriftLake stageOn time45
19:00Nilo FerreiraMain stageOn time60
20:45Hush HarbourThe tentMoved from 20:1550
22:30Mara VossMain stageOn time90
23:45Kite and LanternThe tentOn time75
01:15Glass OrchardThe tentCancelled0
\n
\n
\n \n
\n
\n \n
\n

Just announced

\n \n
\n
\n
\n

The 01:15 slot is open

\n

No act has been named for the tent's last hour on Friday yet.

\n See Saturday\n
\n
\n
\n

Who chose them

\n RARosa AlbrechtMain stage\n JNJonas NybergLake stage and the tent\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Festival
    2. \n
  2. Line-up
    3. \n
  3. Mara Voss
    4. \n
\n
\n
\n MV\n
\n

Mara Voss

\n

Friday, main stage, 22:30. Ninety minutes with a string quartet.

\n
\n
\n
\n Back to Friday\n Friday tickets\n
\n
\n
\n
\n
\n

Songs for the last light

\n

Mara Voss writes slow songs for large rooms. This is her only outdoor night of the summer, and the first time the new record is played from start to finish.

\n

The set

\n

The first half is the record in order. The second half is older songs rearranged for four strings and a piano, and it ends when the field lights go down at 00:00.

\n

Good to know

\n
    \n
  • The main field fills from 21:30; the slope at the back keeps a clear view.
    • \n
  • No photography during the first three songs, at her request.
    • \n
  • A hearing loop covers the platform at the left of the desk.
    • \n
\n
\n
\n
\n

Her weekend

\n
\n

Friday, 22:30

\n

Main stage. The full set, ninety minutes.

\n Gates to the field close at 22:20\n
\n
\n

Saturday, 14:00

\n

Lake stage. Three songs and a conversation.

\n Free with any ticket\n
\n
\n
\n

Field filling up

\n
\n Saved by ticket holders 3,720\n \n
\n

More people have saved this set than any other on Friday.

\n
\n
\n

On before and after

\n HHHush Harbour20:45, the tent\n KLKite and Lantern23:45, the tent\n
\n
\n

Read and listen

\n
\n

\n All of Friday\n Interview, read\n Set list, hovered\n Tickets, pressed\n

\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Festival
    2. \n
  2. Tickets
    3. \n
  3. Choose and order
    4. \n
\n
\n
\n
\n

Tickets

\n

Three kinds, one price each, no fees added at the end.

\n
\n
\n
\n 81% of weekend passes sold\n
\n
\n
\n
\n

One day

Fri, Sat or Sun
\n

59a day

\n
    \n
  • All three stages for that day
    • \n
  • Shuttle from the station
    • \n
\n
Choose a day
\n
\n
\n

Weekend

\n

129for three nights

\n

Every stage, every day, and a place in the meadow if you bring a tent.

\n
Choose the weekend
\n
\n
\n

Weekend and cabin

Sold out
\n

289for two people

\n
    \n
  • Two weekend passes
    • \n
  • A wooden cabin by the lake
    • \n
\n
\n
\n\n
\n

Your order

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter a full address; the tickets are sent there.\n
\n
\n \n \n Read by the box office, not by a machine.\n
\n \n
\n
\n \n Keep browsing\n \n \n
\n
\n
\n
\n
\n

Extras

\n
    \n
  • Shuttle seat on Sunday night
    • \n
  • Locker by the gate
    • \n
  • Breakfast in the meadow
    • \n
\n
\n
Held for ten minutes

Two weekend passes are set aside for you until 14:32.

\n
Cabins are sold out

The waiting list opens again if an order is returned.

\n
\n
\n\n
\n

Before you ask

\n
\n
\n Can I give my ticket to someone else?\n

Yes, until the day before. Change the name from the link in your confirmation; it costs nothing.

\n
\n
\n Do children need a ticket?\n

Under twelve come free with an adult, and get ear defenders at the gate.

\n
\n
\n What if it rains?\n

We play. The tent and the lake stage are covered, and the main field drains quickly.

\n
\n
\n Is the meadow quiet at night?\n

The far half is, from one o'clock. Say so in your order and we pitch you there.

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

Empty the order?

\n \n
\n

Your two weekend passes go back on sale at once.

\n
\n Keep them\n \n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.portal.s08.p02.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bg-8232\",\n \"short\": \"v1-bg-8232\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #f6f6f6;\n --color-surface-alt: #ececec;\n --color-surface-strong: #dddddd;\n --color-bar: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #f6f6f6;\n --color-bar-alt-text: #6f6f6f;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #6f6f6f;\n --color-heading: #000000;\n --color-heading-alt: #333333;\n --color-link: #5871ff;\n --color-link-quiet: #6f6f6f;\n --color-link-visited: #5468cc;\n --color-link-hover: #000000;\n --color-link-active: #5468cc;\n --color-border: rgb(0 0 0 / 0.06);\n --color-border-strong: rgb(0 0 0 / 0.1);\n --color-border-muted: rgb(0 0 0 / 0.04);\n --color-accent: #5871ff;\n --color-accent-text: #ffffff;\n --color-accent-alt: #37996b;\n --color-fill-1: #e8f8fc;\n --color-fill-2: #fcf4f0;\n --color-fill-3: #fcfcf0;\n --color-fill-4: #fcf0f0;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #333333;\n --color-input-border: #aaaaaa;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #aaaaaa;\n --color-danger: #fc0000;\n --color-danger-surface: #fcf0f0;\n --color-success: #37996b;\n --color-warning: #fc6418;\n --color-notice: #e8f8fc;\n --color-notice-text: #005c7c;\n --color-focus: #5871ff;\n --color-shadow: #000000;\n --color-overlay: rgb(0 0 0 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-heading: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-ui: Inter, \"Inter Variable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n --font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 16px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 46px;\n --text-h2: 32px;\n --text-h3: 22px;\n --line-body: 1.5;\n --line-heading: 1.15;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\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: 2px;\n --border-style: solid;\n --radius-control: 6px;\n --radius-panel: 8px;\n --radius-pill: 9999px;\n --radius-page: 12px;\n --shadow-panel: 0 0 0 1px var(--color-border-strong), 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-control: 0 1px 2px color-mix(in srgb, var(--color-shadow) 5%, transparent);\n --shadow-control-hover: 0 1px 3px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-dialog: 0 10px 15px -3px color-mix(in srgb, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: 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: color-mix(in srgb, var(--color-button) 85%, var(--color-button-text));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;\n --backdrop-blur: 0px;\n}\n" } }