{ "id": "v1-bs-4323", "long_id": "v1.bootstrap-era.blog.s04.p03.t02.u03", "name": "Framework default blog", "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": "blog", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels and coloured buttons and labels. This pack is the blog template of those years in a warm paper theme of the kind the theme galleries offered: cream surfaces, a dark brown bar, an orange primary colour, serif text and headings with a humanist sans-serif on the controls, nearly square corners and no gloss. Personal journals and small magazines were built on it by the thousand.", "url": "https://chrono.skin/s/v1-bs-4323", "preview_url": "https://chrono.skin/s/v1-bs-4323/specimen.html", "files": { "STYLE.md": "# Framework default blog\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 a bar across the top, wells, bordered panels and coloured buttons and labels. This pack is the blog template of those years in a warm paper theme of the kind the theme galleries offered: cream surfaces, a dark brown bar, an orange primary colour, serif text and headings with a humanist sans-serif on the controls, nearly square corners and no gloss. Personal journals and small magazines were built on it by the thousand.\n\n## Layout\n\n- Fixed width: one centred `.ds-container` of `--size-page` (960px) on a 1280px viewport; only the top bar and the footer strip span the window.\n- The top bar is `--size-nav` (44px) tall and scrolls away with the page. Its inner row is as wide as the container: brand, links, then a small search field and button at the right. The current link has a plate and a `--border-width-strong` line along the bottom of the bar.\n- Home page, top to bottom inside `.ds-main`: the blog header (`.ds-hero`), plain on the page with a strong rule under it; the `.ds-stat` strip; then two columns, the posts (`.ds-post`, ending in `.ds-pager`) in a two-thirds column and a one-third side column with an \"about\" well, the `.ds-sidebar` archive module and a panel; then four topic tiles (`.ds-grid`) and the inverted `.ds-band` with the newsletter form. Blocks are `--space-5` apart.\n- Inner pages have no blog header. They start with the `.ds-breadcrumb` strip, then `.ds-page-header`, then the same two columns: the work (article and comments, table, form) in the wide column and wells, the `.ds-sidebar` module and panels in the side column. `.ds-tabs` go directly under the page header, across both columns.\n- Views. The specimen is a baking journal with four views. `home` is the post list described above. `post` is one article with its comments as a media list and a comment box. `archive` is a tabbed table of all posts with pagination, a list of years and an empty box. `contact` is the message form in a panel under two alerts, with the open confirmation modal below it.\n- Responsive: below 980px the links of the bar fold into the menu button at its right (`.ds-menu--nav`); below 760px the search field loses its button, the columns stack with the side column last, the stat strip folds to two by two, the topic tiles to two columns, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. The fold is a `
` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding), `--space-3` 15px (panel padding, the page gutter), `--space-4` 20px (between stacked blocks, well padding), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (above the footer), `--space-7` 60px (the widest padding). Controls are padded by `--space-control-y` and `--space-control-x`.\n- Other sizes: `--size-sidebar` 280px, `--size-tile` 96px (placeholder picture), `--size-icon` 32px, `--size-avatar` 48px, `--size-mark` 24px, `--size-dialog` 520px, `--size-search` 170px.\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- One sans-serif family for everything: Helvetica Neue, then Helvetica, then Arial. `--font-mono` (Menlo, Monaco, Consolas) is for code.\n- Body is `--text-base` 14px at `--line-body` 1.43 (20px) in `--color-text` #333333. Headings are medium weight (`--weight-heading` 500): `--text-h1` 36px, `--text-h2` 30px, `--text-h3` 24px. `--text-display` 63px is the masthead title only. `--text-large` 21px is lead text and large buttons; `--text-small` 12px is meta, labels and code blocks.\n- Surfaces: white page; `--color-surface-alt` #f9f9f9 for stripes, wells, code blocks and the breadcrumb; `--color-surface-strong` #eeeeee for panel heading strips and the icon plates. Borders are 1px `--color-border` #dddddd.\n- The bar is off-white (`--color-bar` #f8f8f8) with grey `--color-bar-text` #777777. Purple is the brand colour: `--color-link` #563d7c for links and small titles, `--color-button` #6f5499 for the primary button and the default label. `--color-fill-1` (sky blue #5fb0e4) is the masthead and the page-header band, with `--color-accent-text` white on it.\n- Flat: every `--fill-*` token is a single colour, `--shadow-text` is `none`, buttons have no shadow. Panels keep a hairline 1px shadow; inputs fade their border on focus (`--transition`) and get a soft 3px focus ring. Labels are fully rounded (`--radius-pill` 10px).\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, sidebar heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. A token set keeps these five fills on one side, all light or all dark, so that the same text reads on each;\n - on the top bar (`--fill-bar`): `--color-bar-text` only, for the name, the links and plain text. 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 secondary bar (`--fill-bar-alt`): `--color-bar-alt-text`; a link there is `.ds-link` or inherits and is underlined;\n - on `--fill-inverse`: `--color-inverse-text`, with `opacity` for the quieter line;\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 (buttons, labels, tiles, the masthead, the current list item): `--color-accent-text`. A token set keeps all of these dark or saturated enough for it;\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` (green), `--color-warning` (amber), `--color-danger` (red) 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- `--fill-button` is either the flat `--color-button` or a translucent gloss laid over it. The status buttons reuse it 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- Inputs, wells and the current bar item take `--shadow-control-pressed` (the inset shadow); buttons and the brand tile take `--shadow-control`. Button and brand tile borders are `--color-shadow`, a translucent dark edge on any fill.\n- Links are never underlined at rest (`--link-decoration: none`) and underline on hover. `--color-link-visited` equals the link colour.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar hover and current plates (9% and 18%), the hovered secondary button (its text colour at 12% into its fill), contextual panel strips (20%) and their borders (45% into `--color-border`), notice borders (the text colour at 25% into the notice fill).\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`. `.ds-main` is the container with `--space-4` above its first block.\n- `.ds-nav`: the thin bar across the top, on `--fill-bar`, not fixed. `.ds-nav__inner` holds the `.ds-brand`, `.ds-nav__links` with full-height `.ds-nav__link` items (current: `is-current`, a plate with a line along the bottom) and `.ds-nav__aside` at the right for a `.ds-nav__search` field and a small button. 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 blog header: `.ds-hero__copy` with `.ds-hero__title` (`--text-display`) and a grey `.ds-hero__lead`, and `.ds-hero__actions` stacked at the right (one large primary button over a secondary one), with a `--border-width-strong` rule under it. One per site, on the home page.\n- `.ds-stat`: the row of summary figures, here one bordered strip with `--radius-page`. `.ds-stat` is the row; each `.ds-stat__item` sets a `.ds-stat__figure` (`--text-h2`, heading font) beside a small grey `.ds-stat__label`, divided from the next by a faint vertical rule.\n- `.ds-post`: one entry of the blog column: `.ds-post__title` (a heading-coloured link at `--text-h1`), a small grey `.ds-post__meta` line with links and labels, an optional `.ds-post__figure`, `.ds-post__text` and a secondary button, with a faint rule under the entry. `.ds-pager` puts the older and newer buttons at the two ends of the column.\n- `.ds-media`: a comment: a square `.ds-avatar` beside `.ds-media__body` with `.ds-media__name`, `.ds-media__meta` and `.ds-media__text`; `--reply` indents an answer by one square.\n- `.ds-sidebar`: a plain module of the side column, without a box: `.ds-sidebar__title` headings in `--color-heading-alt` with a rule under them, each over a `.ds-sidebar__list` of `.ds-sidebar__link` rows; `is-current` is bold body text with a `--color-accent` edge at the left. `.ds-sidebar__count` is a small grey number at the right of a row.\n- `.ds-grid`: four topic tiles in a row. Each `.ds-grid__cell` is a link filled with `--color-fill-1` (`--2`, `--3`, `--4` for the other fills) that carries its own text in `--color-accent-text`: a `.ds-grid__icon`, a `.ds-grid__title` and a small `.ds-grid__text`.\n- `.ds-band`: the inverted block that closes the home page (`--fill-inverse`, `--radius-page`): `.ds-band__copy` with `.ds-band__title` and `.ds-band__text` beside a `.ds-band__form` of one input and one button.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side. `.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 both columns end on one line (with `.ds-row--level`); `.ds-row--flush` drops the bottom margin. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small`; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block; `.ds-nowrap` keeps a date on one line; `.ds-rule` is a faint horizontal rule.\n- `.ds-well`: the inset box (`--color-surface-alt`, faint border, `--shadow-control-pressed`) for an aside. `.ds-figure` is a placeholder picture with its size written on it (`--tall` doubles the height); replace it with a real picture. `.ds-code` is a block of code.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.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-large` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` (`--text-h1`) and one grey `.ds-page-header__text` line at `--text-large`, `.ds-page-header__actions` at the right, a faint rule under it all. It follows 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` (darker and underlined), `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 a translucent dark border and `--radius-control`. Variants: `--secondary` (the pale default button; the usual choice), `--danger` (destructive), `--success`, `--warning`, `--info`, `--large`, `--small`, `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-2` apart; `.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` (`.ds-form__input--small` in bars). 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. `--bordered` adds the outer box and vertical rules. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is a right-aligned cell for buttons. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it for the pagination and a legend.\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`.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. Contextual variants colour the strip and the border: `--primary`, `--success`, `--warning`, `--danger`, `--info`.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides, `--color-canvas` behind it and body-coloured text. 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-notice`: the alert: a tinted box (`--color-notice`, `--color-notice-text`) with a 1px 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` (bordered, `--radius-page`, `--shadow-dialog`) with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the confirming button 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`: a full-width strip on `--fill-bar-alt` with a top rule, centred: `.ds-footer__inner` holds `.ds-footer__text` over a row of underlined `.ds-footer__link` in `.ds-footer__links`.\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 bar's fold: a `
` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `
` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), 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-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's initial on a `--color-fill-1` square with `--color-accent-text`, `--size-avatar` wide (`--2` to `--4` take the other fills; `--small` is the size of the mark, for a byline). It stands at the left of a `.ds-media` comment; `.ds-person` sets one beside a `.ds-person__body` holding a name or a small title.\n\n## Never\n\n- `content-width <= 960px`: content stays in the fixed centred container.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `font-size >= 12px`: meta text, labels and code blocks are the smallest.\n- `font-size <= 63px`: the masthead title is the largest text.\n- `font-weight <= 700`: headings are medium (500); bold is the heaviest.\n- `letter-spacing = 0`: text is not tracked.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover and in the footer.\n- `border-radius <= 0px`: every corner is square.\n- `border-width <= 3px`: borders are 1px; 3px only under a table head.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills = 0%`: every background is one solid colour.\n- `box-shadow-blur <= 0px`: nothing casts a soft shadow.\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 action is a `.ds-button`, pale `--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 `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the largest blocks and the dialog `--radius-page`. 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: 960px;\n --size-nav: 44px;\n --size-mark: 24px;\n --size-search: 170px;\n --size-sidebar: 280px;\n --size-tile: 96px;\n --size-icon: 32px;\n --size-avatar: 48px;\n --size-dialog: 520px;\n --space-control-y: 5px;\n --space-control-x: 12px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\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/* brand: the mark on a button-like tile, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-right: var(--space-2);\n color: var(--color-bar-text);\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: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\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__input--small {\n padding: calc(var(--space-control-y) / 2) var(--space-2);\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 .ds-table__actions {\n text-align: right;\n white-space: nowrap;\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--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--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\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/* helper: text that must stay on one line */\n.ds-nowrap {\n white-space: nowrap;\n}\n\n/* nav: a thin bar of links that scrolls away with the page */\n.ds-nav {\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: stretch;\n gap: var(--space-3);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n padding: 0 var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\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 background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-bar-text);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 auto;\n}\n.ds-nav__search {\n width: var(--size-search);\n}\n\n/* the current view marks its navigation item: a plate and a line along the bottom of the bar */\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(#post:target) .ds-nav__link[href=\"#post\"],\n.ds-page:has(#post:target) .ds-menu--nav .ds-menu__item[href=\"#post\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#archive:target) .ds-menu--nav .ds-menu__item[href=\"#archive\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"],\n.ds-page:has(#contact:target) .ds-menu--nav .ds-menu__item[href=\"#contact\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-bar-text);\n}\n\n/* main: the centred column under the bar */\n.ds-main {\n padding-top: var(--space-4);\n}\n\n/* hero: the blog header, plain on the page, title and lead at the left, a strong rule under it */\n.ds-hero {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n margin-bottom: var(--space-4);\n padding: var(--space-4) 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\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 margin: 0;\n max-width: 56ch;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n flex: 0 0 auto;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-2);\n}\n\n/* stats: one bordered strip of figures under the header, each figure beside its label */\n.ds-stat {\n display: flex;\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\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-stat__item {\n display: flex;\n flex: 1 1 0;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n min-width: 0;\n padding: var(--space-2) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__figure {\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 font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* post: one entry of the blog column */\n.ds-post {\n margin-bottom: var(--space-5);\n padding-bottom: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-post__title {\n margin: 0 0 var(--space-1);\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-post__title a {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__title a:hover {\n color: var(--color-link-hover);\n}\n.ds-post__meta {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__text {\n margin: 0 0 var(--space-3);\n}\n.ds-post__figure {\n margin-bottom: var(--space-3);\n border-radius: var(--radius-page);\n}\n\n/* pager: older and newer at the two ends of the column */\n.ds-pager {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n}\n\n/* media: a comment, a square initial beside the text; a reply is indented by one square */\n.ds-media {\n display: flex;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-media--reply {\n margin-left: calc(var(--size-avatar) + var(--space-3));\n}\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: none;\n vertical-align: middle;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\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--small {\n width: var(--size-mark);\n height: var(--size-mark);\n font-size: var(--text-small);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-bottom: var(--space-3);\n}\n.ds-person__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-person__body > .ds-title {\n margin: 0;\n}\n.ds-media__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-media__name {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-media__meta {\n margin-left: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-media__text {\n margin: var(--space-1) 0 0;\n}\n\n/* sidebar: a plain module in the side column, a ruled heading over a list of links */\n.ds-sidebar {\n padding: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n padding-bottom: var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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-sidebar__list {\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n color: var(--color-link);\n border-left: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n color: var(--color-text);\n border-left-color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n float: right;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: four topic tiles, each a colour block that carries its own text */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: block;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n}\n.ds-grid__title {\n display: block;\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-grid__text {\n display: block;\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-grid__cell:hover .ds-grid__title {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* band: the inverted block that closes the home page, a line of text beside a short form */\n.ds-band {\n display: flex;\n align-items: center;\n gap: var(--space-4) var(--space-5);\n margin-top: var(--space-5);\n padding: var(--space-4) 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-band__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-band__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-band__text {\n margin: 0;\n opacity: 0.75;\n}\n.ds-band__form {\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-band__form .ds-form__input {\n width: calc(var(--size-sidebar) - var(--space-6));\n}\n\n/* footer: a centred strip */\n.ds-footer {\n margin-top: var(--space-6);\n padding: var(--space-5) 0;\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-footer__inner {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-footer__text {\n margin: 0 0 var(--space-1);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-1) 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/* 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--20 {\n width: 20%;\n}\n.ds-progress__bar--40 {\n width: 40%;\n}\n.ds-progress__bar--60 {\n width: 60%;\n}\n.ds-progress__bar--success {\n background: var(--fill-button);\n background-color: var(--color-success);\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/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n .ds-nav {\n position: static;\n }\n .ds-nav__inner {\n position: relative;\n flex-wrap: wrap;\n gap: 0 var(--space-2);\n }\n .ds-nav__links {\n display: none;\n }\n .ds-brand {\n min-height: var(--size-nav);\n }\n .ds-nav__aside {\n min-height: var(--size-nav);\n margin-right: calc(var(--space-6) + var(--space-3));\n }\n .ds-menu--nav {\n display: block;\n flex: 0 0 100%;\n order: 9;\n }\n}\n\n/* narrow windows: columns stack, wide tables scroll in their own box */\n@media (max-width: 760px) {\n .ds-nav__aside {\n flex: 1 1 0;\n min-width: 0;\n justify-content: flex-end;\n }\n .ds-nav__aside > .ds-button {\n display: none;\n }\n .ds-nav__search {\n width: 100%;\n max-width: var(--size-search);\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-row,\n .ds-hero,\n .ds-band {\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 .ds-hero__copy,\n .ds-band__copy {\n flex: 0 0 auto;\n }\n .ds-hero {\n padding-top: var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n line-height: var(--line-heading);\n letter-spacing: 0;\n }\n .ds-hero__actions {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\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 }\n .ds-stat__item {\n flex: 0 0 50%;\n }\n .ds-stat__item:nth-child(odd) {\n border-left: 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n }\n .ds-band {\n padding: var(--space-4);\n }\n .ds-band__form {\n flex-wrap: wrap;\n }\n .ds-band__form .ds-form__input {\n width: 100%;\n }\n .ds-media--reply {\n margin-left: 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 blog specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n \n Search\n
\n
\n \n \n
\n
\n
\n\n
\n\n
\n
\n
\n

The chronoskin baking journal

\n

Notes from a small home kitchen: slow bread, quick cakes, and what went wrong along the way. A new post most Sundays.

\n
\n
\n Subscribe by email\n Browse the archive\n
\n
\n\n
    \n
  • 214recipes tested
    • \n
  • 1,930comments answered
    • \n
  • 38guest posts
    • \n
  • 6 yearsof Sunday posts
    • \n
\n\n
\n
\n
\n

A rye loaf that forgives a late start

\n

16 March 2013 by I Ines Hartog in Bread New 12 comments

\n
620 x 220
\n

Most rye recipes want you up at six. This one is mixed after supper, left alone overnight in a cool room and baked whenever the oven is free the next day. The crumb is close and a little sour, and it keeps for a week.

\n Read the post »\n
\n
\n

Lemon drizzle, weighed and timed

\n

9 March 2013 by T Tom Reyes in Cakes 7 comments

\n

Four cakes in one afternoon, each with a different amount of syrup, to settle an argument about how wet a drizzle cake should be. The answer is wetter than you think, and poured on while the cake is still hot.

\n Read the post »\n
\n \n
\n ← Older posts\n Newer posts →\n
\n
\n
\n
\n

About

\n

Two people, one oven and a notebook. We bake everything at least three times before it is written up, and we say so when a recipe failed.

\n Write to us\n
\n \n
\n

Most read this month

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

No-knead white, step by step

\n

The post readers come back to most: four ingredients, one bowl and eighteen hours of doing nothing.

\n Read the post »\n \n \n
\n
\n

Keeping a starter alive on holiday

\n

Two weeks away, a jar in the fridge and a neighbour with instructions. What survived and what did not.

\n Read the post »\n \n \n
\n
\n

Shortbread with three ingredients

\n

Butter, sugar, flour and the one thing that matters, which is how cold the butter is.

\n Read the post »\n \n \n
\n
\n \n \n \n
\n
\n\n

Browse by topic every post is filed under one of four

\n
\n \n \n Bread\n 86 posts, from soda bread to rye\n \n \n \n Cakes\n 61 posts, most of them lemon\n \n \n \n Preserves\n 29 posts, jam, curd and pickles\n \n \n \n Kit\n 38 posts on tins, stones and scales\n \n
\n\n
\n
\n

The monthly letter

\n

One email on the first Sunday of the month, with the recipes that worked.

\n
\n
\n \n Send me the letter\n
\n
\n
\n\n
\n
    \n
  1. Journal
    2. \n
  2. Bread
    3. \n
  3. A rye loaf that forgives a late start
    4. \n
\n
\n
\n

Bread

\n

Posted on 16 March 2013 by Ines Hartog. Twelve comments so far.

\n
\n
\n All bread posts\n
\n
\n\n
\n
\n
\n

A rye loaf that forgives a late start

\n

Mixed after supper, baked whenever the oven is free the next day.

\n

Rye has little of the stretch that wheat has, so there is nothing to gain from kneading it. Stir the dough until no dry flour is left, cover the bowl and leave it alone for twelve to sixteen hours. A cool room is better than a warm one.

\n

What you need

\n
    \n
  • 400 g wholemeal rye flour and 100 g strong white flour
    • \n
  • 10 g salt and a teaspoon of caraway seed
    • \n
  • 150 g of active starterFed within the last twelve hours and risen to its peak. and 380 g of water
    • \n
\n

Baking it

\n

Heat the oven to 230 degrees with a lidded pot inside. Bake for thirty minutes with the lid on and twenty with it off. If you keep notes, file this one as rye-overnight-3: it is the third version, and the first two were bricks.

\n
\n
620 x 110
\n

\n Read next:\n Keeping a starter alive\n No-knead white\n What a baking stone changes\n Every bread post\n Back to the journal\n

\n\n

Comments 12

\n
\n M\n
\n Marta Lindqvist17 March 2013 at 9:12\n

Made this last night with no caraway and it still came out well. Mine needed ten more minutes with the lid off.

\n
\n
\n
\n I\n
\n Ines Hartog Author17 March 2013 at 10:40\n

Good to hear. Ovens differ: go by the colour of the crust, not the clock.

\n
\n
\n
\n R\n
\n Rui Pacheco18 March 2013 at 19:03\n

Does it work with a starter kept in the fridge, or should it be fed first?

\n
\n
\n
\n
\n \n
\n \n Comments are read before they appear.\n
\n
\n
\n
\n
\n
\n
I

Written by Ines

\n

Ines bakes the bread and keeps the starter. She has written 124 of the posts in this journal.

\n All posts by Ines\n
\n \n
\n

At a glance

\n
\n
    \n
  • Hands-on time15 minutes
    • \n
  • Resting time12 to 16 hours
    • \n
  • Makesone loaf of about 900 g
    • \n
\n
\n
\n
\n

Filed under

\n
\n

BreadRyeOvernightSourdough

\n \n

Printed copies of this recipe are in the March letter.

\n Get the letter\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Journal
    2. \n
  2. Archive
    3. \n
\n
\n
\n

Archive

\n

Every post since 2007, newest first.

\n
\n
\n Subscribe by email\n
\n
\n\n \n\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
DatePostTopicCommentsMinutes
16 Mar 2013A rye loaf that forgives a late startBread126
9 Mar 2013Lemon drizzle, weighed and timedCakes74
2 Mar 2013What a baking stone really changesKit219
23 Feb 2013Seville marmalade in one eveningPreserves157
16 Feb 2013Why your scones lean overCakes275
9 Feb 2013Keeping a starter alive on holidayBread418
2 Feb 2013A burnt batch, and what it taught us FailedBread333
\n
\n
\n \n
\n Topics:\n Bread\n Cakes\n Preserves\n Kit\n Failed\n
\n
\n
\n
\n \n
\n

What should we bake next?

\n
\n

A seeded sourdough212 votes

\n
\n

Brioche, by hand141 votes

\n
\n

A proper fruit cake68 votes

\n
\n Suggest something else\n
\n
\n
\n \n

No guest posts this year

\n

Nobody has sent one in since December. Yours could be the first.

\n Offer a guest post\n
\n
\n
\n
\n\n
\n
    \n
  1. Journal
    2. \n
  2. Contact
    3. \n
\n
\n
\n

Contact

\n

Questions, corrections and guest posts are all welcome.

\n
\n
\n Check the archive first\n
\n
\n\n
\n
\n
\n

A note on timing. We answer on Sundays, after the week's baking is done.

\n

Not sent. Check the email address below and send the message again.

\n
\n
\n

Your message

\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n
\n \n Save as draft\n Discard\n \n
\n
\n
\n

Asked every week

\n
\n
\n Can I use dried yeast instead of a starter?\n

For most of the breads, yes. Each recipe says so near the top and gives the amount.

\n
\n
\n Why are the weights only in grams?\n

Because cups of flour differ by a fifth from one kitchen to the next, and scales do not.

\n
\n
\n May I reprint a recipe?\n

In a newsletter or a class handout, gladly, with a line saying where it came from.

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

Discard this message?

\n \n
\n
\n

What you have written will be removed. Nothing has been sent yet.

\n
\n
\n Keep writing\n Discard it\n
\n
\n
\n
\n
\n
\n

Who reads this

\n

Ines answers questions about bread and Tom the ones about cakes. Corrections go to both of us.

\n
\n
\n

Before you write

\n
\n

Most questions about a recipe are answered in its comments. Have a look there first.

\n See a post with comments\n
\n
\n
\n

Guest posts

\n
\n
    \n
  • One recipe, tested three timeswith weights in grams
    • \n
  • Between 400 and 900 wordsplain text is fine
    • \n
  • Your own photographsthree at most
    • \n
\n
\n
\n
\n

Rather not write?

\n

Leave a comment under the post instead. Other readers often answer before we do.

\n Go to the latest post\n
\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.blog.s04.p03.t02.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"blog\",\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-4323\",\n \"short\": \"v1-bs-4323\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #111111;\n --color-canvas: #111111;\n --color-surface: #1b1b1b;\n --color-surface-alt: #222222;\n --color-surface-strong: #333333;\n --color-bar: #1fa67a;\n --color-bar-text: #d2ebe3;\n --color-bar-alt: #252525;\n --color-bar-alt-text: #999999;\n --color-inverse: #eeeeee;\n --color-inverse-text: #333333;\n --color-text: #cccccc;\n --color-text-muted: #999999;\n --color-heading: #ffffff;\n --color-heading-alt: #a5d8c7;\n --color-link: #21b384;\n --color-link-quiet: #999999;\n --color-link-visited: #21b384;\n --color-link-hover: #a5d8c7;\n --color-link-active: #1b926c;\n --color-border: #333333;\n --color-border-strong: #5a5a5a;\n --color-border-muted: #252525;\n --color-accent: #1b926c;\n --color-accent-text: #ffffff;\n --color-accent-alt: #5fb0e4;\n --color-fill-1: #1b926c;\n --color-fill-2: #6d3353;\n --color-fill-3: #006dcc;\n --color-fill-4: #c09853;\n --color-button: #1fa67a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #333333;\n --color-button-secondary-text: #ffffff;\n --color-input: #222222;\n --color-input-text: #cccccc;\n --color-input-border: #5a5a5a;\n --color-disabled: #252525;\n --color-disabled-text: #5a5a5a;\n --color-danger: #da4f49;\n --color-danger-surface: #2d1a1a;\n --color-success: #62c462;\n --color-warning: #f89406;\n --color-notice: #333333;\n --color-notice-text: #d2ebe3;\n --color-focus: #a5d8c7;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(0 0 0 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 63px;\n --text-h1: 36px;\n --text-h2: 30px;\n --text-h3: 24px;\n --line-body: 1.43;\n --line-heading: 1.1;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\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: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 1px var(--color-shadow);\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: linear-gradient(color-mix(in srgb, white 15%, transparent), color-mix(in srgb, white 15%, transparent)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }