{ "id": "v1-bs-8881-dr", "long_id": "v1.bootstrap-era.landing.s08.p08.t08.u01.dr", "name": "Framework default event page", "era": { "slug": "bootstrap-era", "code": "bs", "name": "Framework default", "years": [ 2011, 2014 ], "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "density": "roomy", "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with wells, bordered panels with tinted heading strips, round pictures and coloured buttons and labels. This pack is the narrow starter page of those years, the one with a masthead line, a boxed bar of equal-width links and a centred hero, used for conferences, meetups and small launches, in a flat navy and yellow theme of the kind the flat interface kits offered: a pale grey page with white boxes, 2px borders, no shadows or gradients, and bold geometric capitals on buttons and navigation. It is the 2014 end of the era, when the gloss had gone.", "url": "https://chrono.skin/s/v1-bs-8881-dr", "preview_url": "https://chrono.skin/s/v1-bs-8881-dr/specimen.html", "files": { "STYLE.md": "# Framework default event page\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with wells, bordered panels with tinted heading strips, round pictures and coloured buttons and labels. This pack is the narrow starter page of those years, the one with a masthead line, a boxed bar of equal-width links and a centred hero, used for conferences, meetups and small launches, in a flat navy and yellow theme of the kind the flat interface kits offered: a pale grey page with white boxes, 2px borders, no shadows or gradients, and bold geometric capitals on buttons and navigation. It is the 2014 end of the era, when the gloss had gone.\n\n## Layout\n\n- Narrow fixed width: one centred `.ds-container` of `--size-page` (800px) on a 1280px viewport. Nothing spans the window: the header, the content and the footer strip are all the same column on the page background.\n- The header (`.ds-nav`) is two rows. `.ds-nav__top` is a masthead line on the page: the brand at the left, one line of grey text and a small button at the right. Under it `.ds-nav__links`, a boxed bar on `--fill-bar` with rounded corners, `--size-nav` (46px) tall, whose links share the width equally and are divided by hairlines. It scrolls away with the page.\n- Home page, top to bottom inside `.ds-main`: the centred `.ds-hero` on `--fill-inverse`; the `.ds-stat` row of four ringed discs; two columns of `.ds-point` paragraphs, three each; a rule; a titled `.ds-grid` of four people cards; then a list panel beside a well. Blocks are `--space-5` apart.\n- Inner pages have no hero. They start with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one grey line, an action at the right, a rule under it). `.ds-tabs` go directly under the page header, above the table they switch. A text page puts the running text in the main column and the `.ds-sidebar` link list in a `--size-sidebar` (220px) column at the right; list and form pages use a wide column beside a column of panels. A dialog stands at full width under the row that opened it.\n- Views. The specimen is the site of a two-day conference about maps, with five views. `home` is the page described above. `schedule` is one day's timetable: tabs for the days, the table with a break row and labels for the kind of session, the legend, and two panels. `speakers` is a media list of people with pagination beside a panel and an empty box. `venue` is a placeholder picture and running text beside the link list, a panel and the address in a well. `register` is the ticket form in a panel under two alerts, a price panel at the side, and the open confirmation modal.\n- Responsive: below 760px the grey line in the masthead is dropped, the link bar folds into one boxed bar that says Menu and opens the links as a stack (`.ds-menu--nav`, whose `.ds-menu__toggle` holds the word Menu in `.ds-menu__label` and three bars in `.ds-menu__bars`; the current view's item has the darker plate), every row of columns stacks, the discs fold to two by two, the people cards to two columns, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field, under a point's title), `--space-2` 10px (between adjacent controls, cell padding, under a disc), `--space-3` 15px (panel padding, the page gutter, media row padding), `--space-4` 20px (between stacked blocks, well padding, between points, above the header), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (above the footer), `--space-7` 60px (hero padding). Controls are padded by `--space-control-y` (7px) and `--space-control-x` (14px).\n- Other sizes: `--size-disc` 104px (a stat disc), `--size-tile` 84px (the round picture of a card), `--size-avatar` 52px (the round picture of a media row), `--size-icon` 36px, `--size-mark` 34px, `--size-dialog` 480px.\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- Two families. `--font-body` (PT Sans, then Trebuchet MS) sets running text. `--font-heading` and `--font-ui` (Montserrat, then Century Gothic and Avenir Next) set headings, buttons, navigation, tabs and labels. `--font-mono` (PT Mono, Consolas) is for code only. Montserrat and PT Sans are openly licensed.\n- Body is `--text-base` 16px at `--line-body` 1.45 in `--color-text` #34495e. Headings are bold (`--weight-heading` 700) with `--heading-tracking` -0.3px: `--text-h1` 36px, `--text-h2` 27px, `--text-h3` 20px. `--text-display` 56px bold with `--display-tracking` -1.5px is the hero title only. `--text-large` 20px is lead text and large buttons; `--text-small` 13px is meta and labels. Buttons, navigation and tabs are 12px bold capitals (`--text-ui`, `--weight-ui` 700, `--ui-transform: uppercase`).\n- Surfaces: the page is pale grey (`--color-page` #ecf0f1) and boxes are white (`--color-surface`); `--color-surface-alt` #e2e8eb, a little darker than the page, is for wells, stripes and the breadcrumb; `--color-surface-strong` #d3dce1 for heading strips, placeholder pictures and the break row of a timetable. Borders are 2px (`--border-width`) in `--color-border` #c5d0d6; `--border-width-strong` (4px) rings a stat disc, underlines a table head and edges the link list.\n- The bar is navy (`--color-bar` #2c3e50) with a 3px line of the button colour along its bottom, drawn by `--fill-bar`; its text is pale `--color-bar-text`. Yellow `--color-button` #f1c40f with navy `--color-button-text` is the primary button and the brand tile. Slate `--color-accent` #34495e fills the current list link, the current page and the plain label, and rings the discs. Links are blue `--color-link` #2574a9.\n- `--color-fill-1` to `--color-fill-4` (orange, blue, green, purple) are the round pictures.\n- Everything is flat: no box shadow except the solid 6px halo of the modal (`--shadow-dialog`), no text shadow, no gradient except the line in the bar.\n\n- Text on fills, the convention every layout and token set of this era keeps:\n - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, link list heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. The masthead line stands on the page, so the brand name is `--color-heading` and the text beside it `--color-text-muted`;\n - on the link bar (`--fill-bar`): `--color-bar-text` only. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour;\n - on the footer strip (`--fill-bar-alt`): `--color-bar-alt-text`; links there inherit and are underlined;\n - on `--fill-inverse` (the hero): `--color-inverse-text` for the title and the text, with `opacity` for the quieter lines; never `--color-heading`;\n - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill (round pictures, labels, status buttons, the current list link): `--color-accent-text`;\n - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` (the light blue \"info\") fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- The status buttons reuse `--fill-button` with `background-color` set to their own colour, so a token set must not bake an opaque gradient into `--fill-button` or `--fill-button-hover`.\n- Links are never underlined at rest and underline on hover; the footer links are the exception.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's border (`--color-bar-text` at 22% over `--color-bar`), the hairlines between its links (16%), bar plates (9% and 18%), the hovered secondary button, contextual panel strips (20%) and their borders (45%), notice borders (25%).\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side; `.ds-main` adds `--space-4` above its first block. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes the columns end on one line (with `.ds-row--level`). `.ds-row--flush` drops the bottom margin. `.ds-col__text` is a paragraph in a well. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small` after it; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block; `.ds-rule` is the faint horizontal rule between sections.\n- `.ds-point`: a short titled paragraph, the unit of the two marketing columns: `.ds-point__title` at h3 size over `.ds-point__text`. A label may follow the title.\n- `.ds-well`: the grey box for an aside or a call to action. `.ds-code` is a block of code; `.ds-figure` is a placeholder picture with its size written on it (`--tall` doubles the height); replace it with a real picture or a map.\n- `.ds-brand`: the site's mark and name, at the left of the masthead line. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h2` in `--color-heading`, because it stands on the page. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header column. `.ds-nav__top` holds the `.ds-brand` and `.ds-nav__aside` (a grey `.ds-nav__text` line and a `.ds-button--small`). `.ds-nav__links` is the boxed bar; each `.ds-nav__link` fills its equal share (current: `is-current`, a lighter plate). Keep to between three and six links so the shares stay readable. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the centred block on `--fill-inverse` with `--radius-page` and `--space-7` padding: a small `.ds-hero__kicker` line in capitals, `.ds-hero__title` (56px bold), `.ds-hero__lead`, `.ds-hero__actions` with one large primary and one large secondary button, and a small `.ds-hero__note`. One per site, on the home page.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` and one grey `.ds-page-header__text` line, `.ds-page-header__actions` at the right, and a faint rule under it all. Place it directly after the breadcrumb.\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with `--radius-control`, in bold capitals. Variants: `--secondary` (the white default button; the usual choice), `--danger`, `--success`, `--warning`, `--info`, `--large` (hero actions), `--small` (the masthead), `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons; `.ds-buttongroup` joins small buttons into one strip.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head. `.ds-table__num` right-aligns numbers; `.ds-table__time` keeps a time on one line; a row with `.ds-table__break` is a centred grey line across the table for a pause in a timetable. Wrap the table in `.ds-table__wrap`; `.ds-table__foot` is the row under it with a legend at the left and a link at the right.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`. `.ds-list__item--media` puts a round `.ds-avatar` (`--color-fill-1`; `--2`, `--3`, `--4`) at the left of a `.ds-list__body`.\n- `.ds-panel`: bordered white box with `--radius-panel`: a tinted `.ds-panel__title` strip, `.ds-panel__body`, optional grey `.ds-panel__foot`. `.ds-panel__figure` is a large figure (a price). Contextual variants: `--primary` (the button fill), `--success`, `--warning`, `--danger`, `--info`. `.ds-panels` sets three panels side by side.\n- `.ds-stat`: the row of summary figures as ringed discs. `.ds-stat` is the row, four across; each `.ds-stat__item` is a `.ds-stat__figure`, a white disc of `--size-disc` with a `--border-width-strong` ring in `--color-accent` and the number at h1 size, over a grey `.ds-stat__label`. Keep a figure to four characters.\n- `.ds-grid`: four people cards in a row. Each `.ds-grid__cell` is a centred white box with a round `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4`) holding a `.ds-grid__icon`, then `.ds-grid__title`, grey `.ds-grid__text` and a link.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides and `--color-canvas` behind it. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info`, `--success`, `--warning`, `--danger`, all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-sidebar`: a plain list of links behind a `--border-width-strong` rule at the left: bold `.ds-sidebar__title` headings in `--color-heading-alt`, each over a `.ds-sidebar__list` of `.ds-sidebar__link` pills; `is-current` is filled with `--fill-accent`.\n- `.ds-notice`: the alert: a tinted box with a border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a grey rounded strip of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the buttons at the right, the confirming one last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: the column's closing strip. `.ds-footer__inner` is a rounded box on `--fill-bar-alt` with `.ds-footer__text` at the left and `.ds-footer__links` of underlined `.ds-footer__link` at the right.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the link bar's fold: a `
` drawn as the boxed bar itself, whose `.ds-menu__toggle` row holds a `.ds-menu__label` (Menu) and the three `.ds-menu__bars`; below 760px the row of links is hidden and this bar opens them as a stack, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation, a `
` after the `.ds-nav__links` bar; shown only below 760px, where the bar is hidden. Its `.ds-menu__toggle` summary is the boxed bar that says Menu (`.ds-menu__label`) with three bars (`.ds-menu__bars`), and the list opens in the flow under it, one `.ds-menu__item` per view, the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `
` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-carousel`: a block on the inverse fill with one `.ds-carousel__slide` showing, round `.ds-carousel__arrow` labels at the sides (`--prev`, `--next`) and `.ds-carousel__dots` below. It works without script: one hidden radio button `.ds-carousel__pick` per slide comes first, and the arrows and each `.ds-carousel__dot` are labels for them. Up to three slides; a slide holds a `.ds-carousel__title`, a `.ds-carousel__text` and, for a quotation, a `.ds-carousel__by` line.\n- `.ds-switch`: the sliding on and off control of the period, drawn over a checkbox: a label holding `.ds-switch__input`, the `.ds-switch__track` (it writes ON on the primary button fill or OFF on the disabled fill beside a pale handle) and the `.ds-switch__label`. Use it for a setting that takes effect at once; keep `.ds-form__check` for a box that is sent with a form.\n- `.ds-progress`: a sunken track holding a `.ds-progress__bar` in the primary button fill. The bar's length is one of `--20`, `--40`, `--60`, `--80`, `--100`; `--success`, `--warning` and `--danger` recolour it; `.ds-progress--small` is the thin form inside a panel or a row. `.ds-progress__label` is the line of small text above it.\n- `.ds-avatar`: a person drawn as a figure on a `--color-fill-1` disc with `--color-accent-text` (`--2` to `--4` take the other fills). It stands at the left of a `.ds-list__item--media` row.\n\n## Never\n\n- `content-width <= 800px`: content stays in the narrow centred column.\n- `font-families <= 3`: a geometric sans-serif for headings and controls, a humanist one for text, monospace for code.\n- `font-size >= 12px`: buttons, navigation and tabs are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-weight <= 700`: bold is the heaviest.\n- `underlined-links <= 20%`: links are underlined only on hover and in the footer.\n- `border-width <= 2px`: borders are 1px; 2px only under a table head.\n- `border-radius <= 6px`: controls and boxes have 4px corners, the hero and the modal 6px.\n- `box-shadow-blur <= 7px`: shadows are short and faint; nothing floats.\n- `transition = none`: nothing animates.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body) or a `.ds-well`; a new person or place is a `.ds-grid__cell` or a `.ds-list__item--media` with a round picture; a new action is a `.ds-button`, white `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of two `.ds-col` columns; the column is too narrow for three. Nothing new may span the window. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the hero and the dialog `--radius-page`; round pictures and discs are circles. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n", "components.css": ":root {\n --size-page: 800px;\n --size-nav: 46px;\n --size-mark: 34px;\n --size-sidebar: 220px;\n --size-disc: 104px;\n --size-tile: 84px;\n --size-avatar: 52px;\n --size-icon: 36px;\n --size-dialog: 480px;\n --space-control-y: 9px;\n --space-control-x: 18px;\n --space-1: 6px;\n --space-2: 13px;\n --space-3: 19px;\n --space-4: 25px;\n --space-5: 38px;\n --space-6: 50px;\n --space-7: 75px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n padding: 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}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\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/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-row--level {\n align-items: stretch;\n}\n.ds-row--flush {\n margin-bottom: 0;\n}\n.ds-col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-col--wide {\n flex: 2 1 0;\n}\n.ds-col--side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n flex: 1 0 auto;\n}\n.ds-col__text {\n margin: 0 0 var(--space-3);\n}\n.ds-rule {\n height: 0;\n margin: var(--space-5) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-title--small {\n font-size: var(--text-h3);\n}\n.ds-title__small {\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n}\n.ds-lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-muted {\n color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n display: block;\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n overflow-x: auto;\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 font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-tile);\n padding: var(--space-3);\n background: var(--color-surface-strong);\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-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-figure--tall {\n min-height: calc(var(--size-tile) * 2);\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 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n margin-top: var(--space-4);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-2);\n padding-left: var(--space-4);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose 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: var(--line-body);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\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: var(--line-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n vertical-align: middle;\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: var(--fill-button-hover);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\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 text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: var(--fill-button);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--info {\n background: var(--fill-button);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-button--small {\n padding: calc(var(--space-control-y) / 3) var(--space-2);\n font-size: var(--text-small);\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 text-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-buttongroup {\n display: inline-flex;\n vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n border-top-left-radius: var(--radius-control);\n border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n border-top-right-radius: var(--radius-control);\n border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form--flush {\n gap: 0;\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-3);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\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-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: var(--space-1);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2);\n text-align: left;\n vertical-align: middle;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n color: var(--color-heading);\n border-top: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n vertical-align: bottom;\n}\n.ds-table tbody th {\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 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 display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n display: block;\n margin: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__foot {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n font-size: var(--text-small);\n}\n.ds-panel__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel--primary {\n border-color: var(--color-button);\n}\n.ds-panel--primary > .ds-panel__title {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border-bottom-color: var(--color-button);\n text-shadow: var(--shadow-text);\n}\n.ds-panel--success {\n border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--success > .ds-panel__title {\n background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--warning {\n border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));\n}\n.ds-panel--warning > .ds-panel__title {\n background: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));\n}\n.ds-panel--info {\n border-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel--info > .ds-panel__title {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n display: flex;\n flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n flex: 1 0 auto;\n}\n.ds-panels {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n display: flex;\n gap: var(--border-width-strong);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-strong);\n border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-1);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-text-muted);\n color: var(--color-canvas);\n text-shadow: none;\n}\n.ds-badge--info {\n background: var(--color-accent-alt);\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 background: var(--color-danger);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-3);\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) 25%, var(--color-notice));\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-danger-surface));\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-3);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-3);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-h3) * 0.6);\n height: calc(var(--text-h3) * 0.6);\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 rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-3);\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-1);\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n margin-bottom: var(--space-4);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* nav: a masthead line on the page, then a boxed bar of equal-width links; nothing spans the window */\n.ds-nav {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: var(--space-4) var(--space-3) 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-3);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\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 color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-nav__text {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: right;\n}\n.ds-nav__links {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav__links > li {\n display: flex;\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-nav__links > li + li {\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 16%, transparent);\n}\n.ds-nav__link {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: center;\n min-height: var(--size-nav);\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#schedule:target) .ds-nav__link[href=\"#schedule\"],\n.ds-page:has(#schedule:target) .ds-menu--nav .ds-menu__item[href=\"#schedule\"],\n.ds-page:has(#speakers:target) .ds-nav__link[href=\"#speakers\"],\n.ds-page:has(#speakers:target) .ds-menu--nav .ds-menu__item[href=\"#speakers\"],\n.ds-page:has(#venue:target) .ds-nav__link[href=\"#venue\"],\n.ds-page:has(#venue:target) .ds-menu--nav .ds-menu__item[href=\"#venue\"],\n.ds-page:has(#register:target) .ds-nav__link[href=\"#register\"],\n.ds-page:has(#register:target) .ds-menu--nav .ds-menu__item[href=\"#register\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n\n/* main: the narrow centred column */\n.ds-main {\n padding-top: var(--space-4);\n}\n\n/* hero: a centred block on the inverted fill */\n.ds-hero {\n margin-bottom: var(--space-5);\n padding: var(--space-7) var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\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 opacity: 0.75;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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}\n.ds-hero__lead {\n max-width: 50ch;\n margin: 0 auto var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n opacity: 0.85;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n opacity: 0.7;\n}\n\n/* stats: figures in ringed discs with a label under each */\n.ds-stat {\n display: flex;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-stat__figure {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-disc);\n height: var(--size-disc);\n background: var(--fill-panel);\n color: var(--color-heading);\n border: var(--border-width-strong) var(--border-style) var(--color-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-panel);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: 1;\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n}\n\n/* points: short titled paragraphs, two columns of them */\n.ds-point {\n margin-bottom: var(--space-4);\n}\n.ds-point:last-child {\n margin-bottom: 0;\n}\n.ds-point__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-point__text {\n margin: 0;\n}\n\n/* grid: people cards, a round colour disc over a name */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: var(--space-4) var(--space-2) var(--space-3);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-tile);\n height: var(--size-tile);\n margin: 0 auto var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* media rows: a list item with a round picture at the left */\n.ds-list__item--media {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n}\n.ds-avatar svg {\n width: 56%;\n height: 56%;\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* a break row in the timetable */\n.ds-table tbody tr.ds-table__break td {\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-table .ds-table__time {\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n}\n\n/* sidebar: a plain list of pill links behind a rule */\n.ds-sidebar {\n padding-left: var(--space-3);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__title {\n margin: var(--space-3) 0 var(--space-1);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-sidebar__title:first-child {\n margin-top: 0;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n color: var(--color-link);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-sidebar__link.is-current {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: var(--shadow-text);\n}\n\n/* footer: a boxed strip that closes the column */\n.ds-footer {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: var(--space-6) auto var(--space-5);\n padding: 0 var(--space-3);\n}\n.ds-footer__inner {\n display: flex;\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 background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-1) solid transparent;\n border-right: var(--space-1) solid transparent;\n border-top: var(--space-1) solid currentColor;\n vertical-align: calc(var(--space-1) / 2);\n margin-left: var(--space-1);\n opacity: 0.7;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: calc(var(--size-icon) * 4);\n margin: 0;\n padding: var(--space-1) 0;\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__divider {\n height: 0;\n margin: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n display: none;\n position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n position: absolute;\n top: var(--space-1);\n right: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n height: calc(var(--size-nav) - var(--space-2));\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n border-radius: var(--radius-control);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__bars {\n display: block;\n width: var(--space-4);\n height: calc(var(--space-2) + var(--border-width-strong) * 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n content: \"\";\n display: block;\n margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n display: block;\n position: static;\n min-width: 0;\n padding: var(--space-1) 0 var(--space-2);\n background: transparent;\n border: 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n border-radius: 0;\n box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n padding: var(--space-2) var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\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-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n margin-top: var(--space-1);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n border-top: var(--space-1) solid transparent;\n border-bottom: var(--space-1) solid transparent;\n border-left: calc(var(--space-1) * 1.2) solid currentColor;\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: var(--space-3);\n}\n.ds-accordion__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 30;\n width: max-content;\n max-width: var(--size-sidebar);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: center;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--space-2);\n height: var(--space-2);\n margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n background: var(--color-inverse);\n transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n left: 0;\n transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n right: 0;\n left: auto;\n transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n right: var(--space-4);\n left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip,\n.ds-tooltip.is-open > .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n\n/* carousel: one slide showing on an inverted block, arrows at the sides, dots below; radio buttons keep the place */\n.ds-carousel {\n position: relative;\n margin: 0 0 var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-carousel__pick {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n}\n.ds-carousel__slide {\n display: none;\n min-height: calc(var(--size-icon) * 4);\n padding: var(--space-5) calc(var(--size-icon) + var(--space-5)) var(--space-6);\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__slide:nth-of-type(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__slide:nth-of-type(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__slide:nth-of-type(3) {\n display: block;\n}\n.ds-carousel__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n margin: 0 0 var(--space-3);\n max-width: 64ch;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-carousel__by {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: var(--text-base);\n}\n.ds-carousel__arrow {\n position: absolute;\n top: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n color: var(--color-inverse-text);\n border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n cursor: pointer;\n transform: translateY(-50%);\n transition: var(--transition);\n}\n.ds-carousel__arrow::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-h3) * 0.4);\n height: calc(var(--text-h3) * 0.4);\n border-left: calc(var(--space-2) / 4) solid currentColor;\n border-bottom: calc(var(--space-2) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__arrow--next::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-carousel__arrow--prev {\n left: var(--space-3);\n}\n.ds-carousel__arrow--next {\n right: var(--space-3);\n}\n.ds-carousel__dots {\n position: absolute;\n right: 0;\n bottom: var(--space-3);\n left: 0;\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n}\n.ds-carousel__dot {\n width: var(--space-2);\n height: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-inverse-text);\n border-radius: 50%;\n cursor: pointer;\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(3) {\n background: var(--color-inverse-text);\n}\n.ds-carousel__pick:focus-visible ~ .ds-carousel__dots {\n outline: var(--focus-ring);\n}\n\n/* switch: the sliding on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-7) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-disabled);\n color: var(--color-disabled-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-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"OFF\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50%;\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 50%;\n background: var(--fill-button-secondary);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-control) - var(--border-width)) 0 0 calc(var(--radius-control) - var(--border-width));\n box-shadow: var(--shadow-control);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-switch__input:checked + .ds-switch__track::before {\n content: \"ON\";\n right: auto;\n left: 0;\n text-shadow: var(--shadow-text);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n right: 0;\n left: auto;\n border-right: 0;\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 calc(var(--radius-control) - var(--border-width)) calc(var(--radius-control) - var(--border-width)) 0;\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n opacity: 0.6;\n}\n.ds-switch__label {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* progress: a sunken track with a filled bar; the bar's length is one of five steps */\n.ds-progress {\n height: var(--space-4);\n margin: 0 0 var(--space-3);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background-color: var(--color-button);\n background: var(--fill-button);\n}\n.ds-progress__bar--80 {\n width: 80%;\n}\n.ds-progress__bar--warning {\n background: var(--fill-button);\n background-color: var(--color-warning);\n}\n.ds-progress--small {\n height: var(--space-2);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n.ds-title--gap {\n margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-progress {\n margin-bottom: 0;\n}\n\n/* the link bar keeps its rounded ends without clipping the drop-down */\n.ds-nav__links > li:first-child > .ds-nav__link {\n border-radius: calc(var(--radius-panel) - var(--border-width)) 0 0 calc(var(--radius-panel) - var(--border-width));\n}\n.ds-nav__links > li:last-child > .ds-nav__link {\n border-radius: 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0;\n}\n\n/* on a phone the link bar is this one: a boxed bar that opens its links as a stack */\n.ds-nav > .ds-menu--nav {\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav > .ds-menu--nav > .ds-menu__toggle {\n position: static;\n justify-content: space-between;\n height: auto;\n min-height: var(--size-nav);\n padding: 0 var(--space-3);\n border: 0;\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-menu__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav > .ds-menu--nav > .ds-menu__list {\n padding: var(--space-1) 0;\n}\n\n/* narrow windows: the link bar folds into its menu, columns stack, wide tables scroll in their own box */\n@media (max-width: 760px) {\n .ds-nav__links {\n display: none;\n }\n .ds-menu--nav {\n display: block;\n }\n .ds-carousel__slide {\n padding: var(--space-4) var(--space-4) calc(var(--size-icon) + var(--space-5));\n }\n .ds-carousel__arrow {\n top: auto;\n bottom: var(--space-2);\n transform: none;\n }\n .ds-nav {\n padding-top: var(--space-3);\n }\n .ds-nav__text {\n display: none;\n }\n .ds-main {\n padding-top: var(--space-3);\n }\n .ds-row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-col,\n .ds-col--wide,\n .ds-col--side {\n flex: 0 0 auto;\n }\n .ds-hero {\n padding: var(--space-5) var(--space-3);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n letter-spacing: 0;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-stat {\n flex-wrap: wrap;\n gap: var(--space-4) 0;\n }\n .ds-stat__item {\n flex: 0 0 50%;\n }\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n }\n .ds-panels {\n grid-template-columns: 1fr;\n gap: var(--space-4);\n }\n .ds-tabs {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ds-table {\n min-width: 60ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-2);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-pagination {\n flex-wrap: wrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: framework default event page specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n
\n 9 and 10 May 2014, the Old Customs House\n Get a ticket\n
\n
\n \n
\n Menu\n \n
\n
\n\n
\n\n
\n
\n

9 and 10 May 2014

\n

Two days of maps.

\n

chronoskin is a small conference for people who draw, print and publish maps: one room, one track, twenty-four talks and a long walk on Sunday.

\n
\n Register for $95\n See the schedule\n
\n

Early price until 11 April. Students pay half.

\n
\n\n
    \n
  • 2days, one track
    • \n
  • 24talks and workshops
    • \n
  • 300seats in the hallAll on one floor, step-free, with a hearing loop.
    • \n
  • 41tickets left
    • \n
\n\n
\n
\n
\n

One room, one track

\n

Nobody has to choose between two talks. Everyone hears the same thing and argues about it at lunch.

\n
\n
\n

Workshops with ink

\n

Saturday afternoon is hands-on: relief shading by hand, and printing a two-colour map on a proof press.

\n
\n
\n

Lunch is included

\n

Both days, with coffee from eight. Tell us what you do not eat when you register.

\n
\n
\n
\n
\n

Short talks New

\n

Friday closes with ten talks of five minutes each. The list opens at the door, first come first served.

\n
\n
\n

The Sunday walk

\n

Twelve kilometres along the estuary with a paper map and no phone. Free, and optional.

\n
\n
\n

Recorded and shared

\n

Every talk is filmed and published a month later, with the slides, under an open licence.

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

\"The only conference where I took notes by hand.\"

\n

One room means everyone has seen the same talks by lunch, and lunch is where it gets good.

\n

A cartographer at a national park, here last year

\n \n \n
\n
\n

\"I came for the talks and stayed for the press.\"

\n

Two colours, one proof press and a queue of grown people waiting for a turn.

\n

A designer of transit maps, here last year

\n \n \n
\n
\n

\"Twelve kilometres and not one phone.\"

\n

The Sunday walk is a map lesson with wet feet. Bring a pencil.

\n

A student of geography, here last year

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

Speakers four of the eighteen

\n
\n
\n
\n

Hana Vesely

\n

Relief shading

\n Her talk\n
\n
\n
\n

Jonas Abara

\n

Transit diagrams

\n His talk\n
\n
\n
\n

Mirela Costin

\n

Sea charts

\n Her talk\n
\n
\n
\n

Per Lindgren

\n

Type on maps

\n His talk\n
\n
\n\n
\n
\n
\n

From the schedule

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

Coming by train?

\n

The hall is eight minutes on foot from the central station, along the quay.

\n How to get there\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Schedule
    3. \n
  3. Friday
    4. \n
\n
\n
\n

Schedule

\n

One track in the main hall. Doors open at eight.

\n
\n
\n Print it\n
\n
\n\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
TimeSessionKindMinutesPlaces left
9:00Welcome, and how the two days workOpening2041
9:30Shading a mountain with a pencil
Hana Vesely		Talk4041
10:15, coffee in the foyer
10:30Sea charts before satellites
Mirela Costin		Talk4041
11:15What a bus map leaves out
Jonas Abara		Talk4041
14:00Lettering a river by hand
Per Lindgren, upstairs studio		Workshop1203
16:30Ten short talks
Sign up at the door		Open list6010
\n
\n
\n
\n Kinds:\n Opening\n Talk\n Open list\n Workshop\n Full\n 12\n
\n Workshops need a ticket\n
\n\n
\n
\n
\n

Nearly full

\n
\n

Lettering a river by hand has three places left. Add it when you register, or put your name on the waiting list at the desk.

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

After the last talk

\n
\n

Dinner on Friday is at long tables in the old weighing room, from half past seven. It is in the price of the ticket.

\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Speakers
    3. \n
\n
\n
\n

Speakers

\n

Eighteen people who make maps for a living, or for love.

\n
\n
\n See when they speak\n
\n
\n\n
\n
\n
    \n
  • \n \n
    \n Hana Vesely\n

    Draws relief for hiking maps with pencil and airbrush, and teaches the method to people who thought it was lost.

    \n Shading a mountain with a pencil. Friday, 9:30\n
    \n
    • \n
  • \n \n
    \n Jonas Abara\n

    Redrew the bus network of a city of two million so that it fits on one folded sheet.

    \n What a bus map leaves out. Friday, 11:15\n
    \n
    • \n
  • \n \n
    \n Mirela Costin\n

    Keeps the chart collection of a harbour museum and sails with copies of the old ones to see how well they hold.

    \n Sea charts before satellites. Friday, 10:30\n
    \n
    • \n
  • \n \n
    \n Per Lindgren\n

    A type designer who spent three years on one family of letters for rivers, lakes and seas.

    \n Lettering a river by hand. Friday, 14:00, workshop\n
    \n
    • \n
\n \n
\n
\n
\n

Want to speak?

\n
\n

The main programme is full, but the ten short talks on Friday are open to anyone with a ticket.

\n
\n
\n
\n \n

No short talks yet

\n

The list opens at the door on Friday morning.

\n Get a ticket first\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Venue
    3. \n
\n
\n
\n

Venue

\n

The Old Customs House, on the quay.

\n
\n
\n Get a ticket\n
\n
\n\n
\n
\n
540 x 220
\n
\n

Getting there

\n

A brick hall from 1887 with tall windows and a view of the water.

\n

The hall is on the north quay, eight minutes on foot from the central station. Leave by the harbour exit and keep the water on your right.

\n

By train or tram

\n

Trams 4 and 9 stop outside. From the airport, the train to the central station takes twenty minutes and runs every quarter of an hour.

\n

By car or bicycle

\n
    \n
  • There is no parking on the quay; use the station car park
    • \n
  • Eighty bicycle stands in the yard behind the hall
    • \n
  • Step-free entrance from the yard side
    • \n
\n

Show the code MAPS14 at the two hotels on the quay for the conference rate.

\n
\n

\n Also useful:\n When the doors open\n Where to stay\n Eating nearby\n Tickets\n Back to the start\n

\n
\n
\n \n
\n

Rooms on the quay

\n
\n
    \n
  • The harbour hotel2 minutes on foot, from $80
    • \n
  • The pilot's house5 minutes on foot, from $55
    • \n
\n
\n
\n
\n

Address

\n

The Old Customs House
14 North Quay
Doors from 8:00

\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. Register
    3. \n
\n
\n
\n

Register

\n

One form per person. It takes two minutes.

\n
\n
\n See the schedule\n
\n
\n\n
\n

Early price. Tickets are $95 until 11 April and $120 after that.

\n

Not sent yet. One field needs another look before we can take your booking.

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

Your ticket

\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n \n
\n
\n \n Add a person\n Cancel a booking\n \n
\n
\n
\n

Before you book

\n
\n
\n Can I pay by invoice?\n

Yes, for three tickets or more. Choose the button under the form and we send the invoice the same day.

\n
\n
\n Is there a student price?\n

Half price with a student card, shown at the door. Choose the student ticket in the list.

\n
\n
\n What if I cannot come?\n

A full refund until 25 April. After that the ticket can be passed to a friend.

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

Both days

\n
\n $95\n

Talks, one workshop, lunch twice and dinner on Friday.

\n

259 of 300 seats taken41 left

\n
\n
\n
\n
\n

Coming as a group?

\n

Five tickets or more are $80 each. Write to us before you book.

\n Ask about groups\n
\n
\n

Changed your mind?

\n
\n

A full refund until 25 April. After that, pass the ticket to a friend.

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

Cancel this booking?

\n \n
\n
\n

The ticket for Elsa Moreau and her workshop place go back on sale. The $95 is returned to the card within five days.

\n
\n
\n Keep the ticket\n Cancel it\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.landing.s08.p08.t08.u01.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bs-8881-dr\",\n \"short\": \"v1-bs-8881-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ecf0f1;\n --color-canvas: #ecf0f1;\n --color-surface: #ffffff;\n --color-surface-alt: #e2e8eb;\n --color-surface-strong: #d3dce1;\n --color-bar: #2c3e50;\n --color-bar-text: #e4eaee;\n --color-bar-alt: #dce3e7;\n --color-bar-alt-text: #51626f;\n --color-inverse: #1f2d3a;\n --color-inverse-text: #ffffff;\n --color-text: #34495e;\n --color-text-muted: #7b8996;\n --color-heading: #2c3e50;\n --color-heading-alt: #34607f;\n --color-link: #2574a9;\n --color-link-quiet: #7b8996;\n --color-link-visited: #2574a9;\n --color-link-hover: #1a4f73;\n --color-link-active: #123a55;\n --color-border: #c5d0d6;\n --color-border-strong: #a9b8c1;\n --color-border-muted: #d6dfe4;\n --color-accent: #34495e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #3498db;\n --color-fill-1: #e67e22;\n --color-fill-2: #2980b9;\n --color-fill-3: #27ae60;\n --color-fill-4: #8e44ad;\n --color-button: #f1c40f;\n --color-button-text: #2c3e50;\n --color-button-hover-text: #2c3e50;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #34495e;\n --color-input: #ffffff;\n --color-input-text: #34495e;\n --color-input-border: #a9b8c1;\n --color-disabled: #d6dfe4;\n --color-disabled-text: #9aa7b0;\n --color-danger: #d8402f;\n --color-danger-surface: #fbe3e0;\n --color-success: #27ae60;\n --color-warning: #e67e22;\n --color-notice: #fdf3c8;\n --color-notice-text: #7a6200;\n --color-focus: #3498db;\n --color-shadow: rgb(44 62 80 / 0.22);\n --color-overlay: rgb(31 45 58 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"PT Sans\", \"Trebuchet MS\", \"Segoe UI\", Arial, sans-serif;\n --font-heading: Montserrat, \"Century Gothic\", \"Avenir Next\", \"Trebuchet MS\", sans-serif;\n --font-ui: Montserrat, \"Century Gothic\", \"Avenir Next\", \"Trebuchet MS\", sans-serif;\n --font-mono: \"PT Mono\", Consolas, Monaco, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 12px;\n --text-large: 20px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 27px;\n --text-h3: 20px;\n --line-body: 1.45;\n --line-heading: 1.18;\n --line-display: 1.08;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.5px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: none;\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: 4px;\n --radius-panel: 4px;\n --radius-pill: 3px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 2px var(--color-shadow);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 1px 2px var(--color-shadow);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 1px 3px var(--color-shadow);\n --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n --shadow-dialog: 0 3px 7px var(--color-shadow);\n --shadow-text: 0 -1px 0 var(--color-shadow);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(color-mix(in srgb, var(--color-bar), white 8%), color-mix(in srgb, var(--color-bar), black 40%));\n --fill-bar-alt: linear-gradient(color-mix(in srgb, var(--color-bar-alt), white 70%), var(--color-bar-alt));\n --fill-inverse: linear-gradient(color-mix(in srgb, var(--color-inverse), white 10%), var(--color-inverse));\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(color-mix(in srgb, white 22%, transparent), color-mix(in srgb, black 14%, transparent)), var(--color-button);\n --fill-button-hover: linear-gradient(color-mix(in srgb, black 14%, transparent), color-mix(in srgb, black 14%, transparent)), var(--color-button);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, var(--color-button-secondary), white 80%), color-mix(in srgb, var(--color-button-secondary), black 6%));\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }