{ "id": "v1-sk-8a49", "long_id": "v1.skeuomorphism.blog.s08.p10.t04.u09", "name": "Skeuomorphism blog (kitchen notebook, paper slips on a table)", "era": { "slug": "skeuomorphism", "code": "sk", "name": "Skeuomorphism", "years": [ 2009, 2013 ], "description": "App-era product sites, 2009 to 2013: pages that imitate materials, with linen and paper textures, bevelled glossy keys, inset wells, stitched edges and engraved text." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1280, "fluid": false }, "summary": "A personal journal from the years when web pages imitated physical materials: no bar at all, only the site's mark and name centred on a table top, a ruled line of labels under them, and below that paper: a taped sheet for this week's entry, slips with a calendar leaf for the earlier ones, index cards down the side. It was a common dress for recipe, craft, travel and diary sites between about 2009 and 2013, when a blog wanted to look like the notebook it replaced. Text is a bookish serif at a comfortable size, and the richness is in the paper: punched holes, a red margin line, card dividers with coloured tabs, labels that look printed.", "url": "https://chrono.skin/s/v1-sk-8a49", "preview_url": "https://chrono.skin/s/v1-sk-8a49/specimen.html", "files": { "STYLE.md": "# Skeuomorphism blog (kitchen notebook, paper slips on a table)\n\n## Summary\n\nA personal journal from the years when web pages imitated physical materials: no bar at all, only the site's mark and name centred on a table top, a ruled line of labels under them, and below that paper: a taped sheet for this week's entry, slips with a calendar leaf for the earlier ones, index cards down the side. It was a common dress for recipe, craft, travel and diary sites between about 2009 and 2013, when a blog wanted to look like the notebook it replaced. Text is a bookish serif at a comfortable size, and the richness is in the paper: punched holes, a red margin line, card dividers with coloured tabs, labels that look printed.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 880px (`.ds-page__wrap` and `.ds-nav__inner`). Only the page texture and the footer board run the full window width.\n- The header (`.ds-nav`) is not a bar: the brand centred on the page texture `--space-6` from the top, one italic `.ds-nav__tagline`, then `.ds-nav__items`, a centred line of labels between two scored rules. The footer is a dark board across the window. Both are written once.\n- Order of the home view (`notebook`): the `.ds-hero` sheet across the column; the `.ds-stats` line of figures on the page texture; `.ds-page__columns`, with `.ds-page__aside` (`--size-aside`, 220px) on the left holding the `.ds-search` field and three `.ds-sidebar` cards, and `.ds-page__main` (630px) on the right, `--size-gutter` (30px) apart, holding a `.ds-page__title`, the `.ds-list` of entry slips and the `.ds-pagination` centred under them; then a second `.ds-page__title` and the `.ds-grid` of four divider cards across the column. The side column and the slips end near each other; keep three slips to three cards.\n- Inner pages drop the hero, the figures and the side column. In their place: `.ds-page__trail` (the breadcrumb on the page texture) and one `.ds-page__sheet`, a punched sheet with a margin line, as wide as the column. The sheet opens with `.ds-page-header` (title and one italic line left, one or two keys right, a double rule under it) and continues in `.ds-section` parts, later ones with `.ds-section--ruled`. A section may be split by `.ds-section__split` into `.ds-section__main` and a `--size-side` (240px) `.ds-section__side` of stacked panels on the right. Tabs stand at the top of the section they sort.\n- Views. The specimen is a four-screen site, one `.ds-view` showing at a time. `notebook` is the home view: this week's recipe, the figures, the latest three entries with the side cards, the recipe box. `recipe` is one entry: the table of ingredients, the method as running text, two panels beside them, and the empty card where readers' notes would be. `index` is the recipe index: divider tabs, the table of recipes with its testing labels, a count and the key to the labels. `send` is the form for sending a recipe, with its notices and keys, two panels beside it, and under it the dialog that the destructive key opens. The labels lead to `notebook`, `index` and `send`; `recipe` is reached from any title and keeps Recipe index marked.\n- Spacing scale: `--space-1` 4px (inside labels, between lines of a card), `--space-2` 7px (cell padding, between keys), `--space-3` 10px (card padding, under titles), `--space-4` 15px (between slips and cards, key side padding), `--space-5` 20px (sheet padding, between side cards), `--space-6` 30px (above the masthead and the hero, the sheet's right padding), `--space-7` 44px (above the footer).\n- Control sizes: `--size-pill` 22px (pagination keys, small keys, a divider tab), `--size-control` 30px (keys, fields, labels of the header), `--size-control-large` 42px (the hero key and the brand tile). `--size-leaf` (56px) is the calendar leaf, `--size-plate` (300px) and `--size-dish` (170px) the photograph in the hero. `--size-hair` (1px) is the offset of every highlight.\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- Slate metal and black glass, with one blue; the set is dark. `--color-page` #383a44 is the slate page; `--color-canvas` #454853 the sheet; `--color-surface` #4a4d59 rows and cells, `--color-surface-alt` #424550 alternate rows and wells, `--color-surface-strong` #33353e title strips.\n- `--color-bar` #1a1b1f (black glass, near-white text) is the current menu row, the tab bar, the counters and pressed \"current\" states; `--color-bar-alt` #5a5e6b (brushed steel, pale text) the menu rows, the breadcrumb strip, the table head and the shelf plank; `--color-inverse` #16171b (the black stage, white text) the hero, the alert sheet and the footer band.\n- Text is `--color-text` #cdd0d8, meta `--color-text-muted` #9da2af, headings `--color-heading` #f2f3f5, section, sidebar and panel titles and form labels `--color-heading-alt` #dcdfe3.\n- Links are `--color-link` #74b9f2, lighter on hover (#a8d8ff), lilac when visited (#9aa6d8).\n- `--color-button` #2b84dc (blue, white text) is the one primary action colour; the secondary key is steel `--color-button-secondary` #626675 with near-white text. Fields are wells darker than the sheet (`--color-input` #2c2e36).\n- `--color-accent` #ee8a22 (orange) for badges, `--color-accent-alt` #7a56c2 (violet) for \"new\" markers and the tape of a panel; `--color-success` #18a546, `--color-warning` #b87a10, `--color-danger` #f0553f on `--color-danger-surface` #3d2526. Notices are a dark blue tint, `--color-notice` #33475c with #cfe2f7 text.\n- `--color-fill-1` to `--color-fill-4` (#2b84dc blue, #ee8a22 orange, #18a546 green, #747a88 steel) colour the boxes on the shelf only; white glyphs on all four.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Lato where installed, then Helvetica Neue, Helvetica and Arial; Lato stands in for the era's commercial humanist sans. `--font-mono` Menlo.\n- Larger than the era's other sets: `--text-base` 14px at `--line-body` 1.5; `--text-small` 12px for meta, badges, table heads and the footer; `--text-ui` 13px at `--weight-ui` 700 for keys, menu rows and tabs; `--text-large` 17px for the lead and the large key.\n- Headings are light, white on dark: `--weight-heading` and `--weight-display` 300; `--text-h3` 15px (bold), `--text-h2` 20px, `--text-h1` 28px, `--text-display` 36px at `--line-display` 1.2. A bold phrase inside the light headline is the only emphasis. No uppercase from this part.\n- Links are not underlined until hovered (`--link-decoration: none`, `--link-decoration-hover: underline`).\n- Woven metal and glass. `--fill-page` is a fine diagonal weave at a 4px pitch with a faint glare over the top 260px. `--fill-bar` is black glass with a hard split at half height. `--fill-bar-alt` is brushed steel and `--fill-inverse` a top-lit black stage, both under 2px horizontal hairlines.\n- Corners: `--radius-control` 6px, `--radius-panel` 6px, `--radius-page` 8px, `--radius-pill` 11px (badges, pagination keys).\n- Keys are chunky: glossy with the same hard split (`--fill-button`), a light inner top edge, and a hard 3px ledge under them with a tight shadow below it (`--shadow-control`); a pressed key sinks onto a 1px ledge (`--shadow-control-pressed`). Sheets and boxes stand on the metal the same way: `--shadow-panel` is a 3px ledge and 0 4px 6px at 45%; `--shadow-dialog` is a dark ring, a 4px ledge and 0 5px 6px. `--shadow-text` is a dark line one pixel above light text. `--fill-input` shades the top 5px of a well. `--transition` is none.\n- Pairings this structure uses: `--color-bar-alt-text` on `--fill-bar-alt` (menu rows, breadcrumb strip, table head); `--color-bar-text` on `--fill-bar` (current menu row, tab bar, counters, the phone's title bar) and on the darkened bar colour of pressed \"current\" states (page, count badge); `--color-inverse-text` on `--fill-inverse` (hero, alert sheet, footer) and on the four `--color-fill-*` boxes; `--color-button-text` on `--fill-button` and `--color-button-secondary-text` on `--fill-button-secondary` (keys, list thumbs, pagination keys, select); `--color-accent-text` on `--fill-accent`, on the success and danger badges and on the danger key; `--color-heading` on the `--color-accent-alt` and `--color-warning` badges; `--color-heading-alt` on `--color-surface-strong` (sidebar title) and on the sheet. On the page texture: `--color-heading`, `--color-text`, `--color-text-muted` and the link colours.\n- One-off values built in `components.css` from tokens: the spotlight of the hero and the glass highlight of the alert sheet (radial gradients of `--color-inverse-text` at 12 to 34%), the phone body (`--color-shadow` mixed with 12 to 30% `--color-inverse-text`) and its corner (`--radius-page` plus `--space-4`), the spine and sheen of a shelf box, the split line of a counter, the notch under the current tab (a `--space-3` square of `--color-canvas` turned 45 degrees, half of it hidden in the part below), the 3 degree tilt and 55% opacity of the tape, the engraving shadow `0 var(--size-hair) 0` of `--color-canvas` at 50 to 70% under text on the page and on light fills, the inset well shadow of fields and the empty state, the gloss gradients of the danger key and the status badges, border colours darkened with `color-mix()` toward `--color-shadow`, the 1px tracking and `uppercase` of sidebar, footer and kicker titles, and `dashed` for the panel's perforation, the empty state and the footer stitching.\n\n- Manila card, cream paper and dark saddle leather. `--color-page` #d9c59c is the manila desk; `--color-canvas` and `--color-surface` #fbf5e6 the cream sheet; `--color-surface-alt` #f3ead3 the tone sections fade to; `--color-surface-strong` #e9dcbd toolbar and title strips.\n- `--color-bar` #4b2e1c (dark brown leather, cream text #f7ecd2) is the navigation bar, table head, count badges and pressed \"current\" states; `--color-bar-alt` #d6c193 (card, dark brown text #47301c) is title strips and the segmented control; `--color-inverse` #6f2a22 (oxblood leather, cream text) the closing band or hero block.\n- Text is the brown ink `--color-text` #4a3b2b, meta `--color-text-muted` #7d6a52, headings `--color-heading` #2e2015, sidebar and panel titles `--color-heading-alt` #5a3a1f. Nothing is pure black.\n- Links are a teal ink, `--color-link` #1c6672, darker on hover (#0f4852), slate when visited (#5c5a7a), red when active.\n- `--color-button` #3d6b47 (bookcloth green, white text) is the one primary action colour; the secondary key is `--color-button-secondary` #eadfc4 with #47301c text.\n- `--color-accent` #b5382c (ribbon red) for badges, `--color-accent-alt` #e3b23c (brass, dark text) for \"new\" markers; `--color-success` #4a7d3a, `--color-warning` #e3b23c (dark text), `--color-danger` #a3271c on `--color-danger-surface` #f8e4da. Notices are legal-pad yellow, `--color-notice` #fbf0a8 with #4a3b12 text.\n- `--color-fill-1` to `--color-fill-4` (#2b6f73 teal, #3d6b47 green, #2f4a6b navy, #a8701c ochre) are book-cover colours for the grid blocks only; cream text on all four.\n- `--color-shadow` is a dark brown, #1e0f04, not black, so every shadow is warm.\n\n- Felt and soft pills. `--fill-page` is a fine 4px speckle over `--color-page`, with no gradient. `--fill-bar` and `--fill-inverse` are felt: the same speckle and a pool of light from the top centre (white at 30%) over the flat bar colour.\n- Controls are pills: `--radius-control` 13px rounds the 28px keys and fields fully, `--radius-pill` 20px the large key, navigation items and badges; `--radius-panel` and `--radius-page` are 6px.\n- Keys are matte, lit from above: `--fill-button` goes from 30% lighter at the top through the plain colour at 55% to 14% darker, with a light inner top edge and a light line below (`--shadow-control`). No drop shadow under keys; pressed is a 1px inset shade.\n- Nothing floats: `--shadow-panel` is only a 1px ring at 12% and `--shadow-dialog` a ring with a hard 3px step below. Blur comes only from the wells the structure sinks into the sheet.\n- `--shadow-text` is a soft dark edge above light text (0 -1px 1px at 40%). `--fill-panel` fades evenly from `--color-surface` to `--color-surface-alt` over the whole height. `--fill-input` is flat. `--transition` is none.\n\n## Components\n\n- `.ds-page`: on ``; paints the table top. `.ds-page__wrap` is the 880px column; `.ds-page__columns` with `.ds-page__aside` (left) and `.ds-page__main`; `.ds-page__title` a heading on the table top (`--spaced` when it follows a block); `.ds-page__trail` the breadcrumb's place; `.ds-page__sheet` the punched sheet of an inner page. `.ds-section` is one part of a sheet (`--ruled` after another), with `.ds-section__title`, `.ds-section__split` into `.ds-section__main` and `.ds-section__side`, and `.ds-section__foot` (a `.ds-section__note` left, labels right).\n- `.ds-view`: one screen of the site, a `
` with an id; only the one named in the address shows, and `.ds-view--home` when none is named. Always a plain block.\n- `.ds-nav`: the masthead. `.ds-nav__inner` centres the brand, the `.ds-nav__tagline` and `.ds-nav__items`, a line of `.ds-nav__item` labels. The current one is a small stitched label: `is-current`, or in the specimen one selector per view. `is-hover` lays a pale patch under a label.\n- `.ds-brand`: the mark and name, centred at the top. `.ds-brand__mark` is a 42px tile dressed as the primary key; `.ds-brand__name` the name in the heading font, always bold. Both are placeholders for the installing project's own name and logo.\n- `.ds-hero`: this week's entry, once, at the top of the home view: a sheet held by a strip of tape. `.ds-hero__plate` is the photograph (`.ds-hero__cloth`, `.ds-hero__dish`, `.ds-hero__soup`, all drawn); `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (the one `.ds-button--large` and at most one link) and `.ds-hero__note`.\n- `.ds-page-header`: the head of a sheet in place of the hero: `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text`; `.ds-page-header__actions` with at most two keys, the primary last.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, lists, `code`, links.\n- `.ds-link`: text link, underlined; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for breadcrumb and meta links. `.ds-links` is a wrapping row.\n- `.ds-button`: an enamelled label. `.ds-button--secondary`; `.ds-button--danger` for a destructive action, set apart with `.ds-buttons__end`; `.ds-button--large` for the hero; `.ds-button--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-button__icon` is a 16px glyph. `.ds-buttons` is a row.\n- `.ds-form`: `.ds-form__row` with a `.ds-form__label` column and a `.ds-form__field`. `.ds-form__input` (`--short` for a number) and `.ds-form__textarea` are fields with a line to write on, `.ds-form__select` a secondary key. `is-error` with `.ds-form__error`; `.ds-form__hint`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule. `.ds-search` is one field and one key at the head of the side column.\n- `.ds-table`: framed, ruled table. `.ds-table__head` cells are the stitched band; `.ds-table__row` with `is-first` and `is-alt`; `.ds-table__cell`, `.ds-table__cell--name`, `is-numeric`.\n- `.ds-list`: the entries, each `.ds-list__item` its own slip: a `.ds-list__date` calendar leaf (`.ds-list__month`, `.ds-list__day`) and a `.ds-list__body` with `.ds-list__title`, `.ds-list__meta`, `.ds-list__text` and a `.ds-list__foot` (labels left, one link right). Slips lie `--space-4` apart.\n- `.ds-panel`: an index card with a `.ds-panel__title` strip and `.ds-panel__body`; `.ds-panel__text`, or `.ds-panel__rows` of `.ds-panel__row` (`is-first`) with `.ds-panel__key` and `.ds-panel__value`.\n- `.ds-stat`: one figure: `.ds-stat__value` over a `.ds-stat__label`, centred. Three to five sit in the `.ds-stats` line between two scored rules on the table top; `is-first` on the first.\n- `.ds-grid`: four `.ds-grid__cell` divider cards across the column (`--2`, `--3`, `--4` for the other fills and tab positions). Each has a `.ds-grid__tab` standing on its upper edge, a `.ds-grid__title`, a `.ds-grid__text` and a `.ds-grid__more` link.\n- `.ds-tabs`: card dividers standing on a rule: `.ds-tabs__tab`; the `is-current` one is paper coloured, a little taller, and joins the sheet below.\n- `.ds-badge`: a small printed label. `.ds-badge--count` is a number on a sunk patch; `.ds-badge--success` (tested), `.ds-badge--warning` (still testing) and `.ds-badge--danger` (withdrawn) are the testing labels. `.ds-badges` is a row.\n- `.ds-sidebar`: an index card in the side column: `.ds-sidebar__title` strip, optional `.ds-sidebar__text`, and a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (`is-first`), each a link and an optional `.ds-sidebar__meta`.\n- `.ds-notice`: a note stuck on the sheet; `.ds-notice__title` for the bold lead-in; `.ds-notice--error`. `.ds-notices` wraps several.\n- `.ds-pagination`: small keys centred under the entries, `.ds-pagination__link`; `is-current` is pressed, `is-disabled` is flat.\n- `.ds-breadcrumb`: on the table top above a sheet, of quiet links, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-dialog`: a card with a red upper edge: `.ds-dialog__title` strip with `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__heading` and `.ds-dialog__text`, `.ds-dialog__actions` with the confirming key last. `.ds-dialog__backdrop` is the dimmed area behind it.\n- `.ds-empty`: a blank card with a dashed edge: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one secondary key.\n- `.ds-footer`: the dark board: centred `.ds-footer__links` of `.ds-footer__link` and an italic `.ds-footer__note`.\n- `.ds-switch`: glossy sliding ON/OFF switch over a checkbox (`.ds-switch__track`, inset, with a raised knob), set as rows of a `.ds-switches` list (`.ds-switches__row`, `.ds-switches__name`). Here: the Promise row of the send form.\n- `.ds-progress`: inset `` bar with a glossy fill and a `.ds-progress__label` line. Here: the Photograph row of the send form.\n- `.ds-tooltip`: `?` key with a dark glossy bubble and arrow (`.ds-tooltip__trigger`, `.ds-tooltip__bubble`) shown on hover or focus. Here: on the Promise label.\n- `.ds-avatar`: framed photo with an inner shadow (`.ds-avatar__photo`, `.ds-avatar__glyph`), used in a `.ds-testimonial` (`.ds-testimonial__text`, `.ds-testimonial__who`). Here: a reader's box in the notebook side column.\n- `.ds-menu`: popover list with an arrow, hanging from a toolbar button (`
`, `.ds-menu__button`, `.ds-menu__list`, `.ds-menu__item`). Here: the header toolbar of a recipe.\n\n## Never\n\n- `content-width <= 900px`: everything stays inside the 880px column.\n- `row-gap <= 20px`: slips lie 15px apart; table rows touch.\n- `font-size <= 36px`: the hero headline is the largest text.\n- `font-size >= 12px`: meta text is the smallest.\n- `font-weight >= 300`: light headlines stop at 300.\n- `font-families <= 2`: one sans-serif and a monospace.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `underlined-links <= 10%`: links are coloured, not underlined, until hovered.\n- `letter-spacing <= 1px`: only small capital titles are tracked.\n- `border-radius <= 20px`: the 20px pill is the largest radius; panels and blocks are 6px.\n- `border-width <= 1px`: every edge is a hairline.\n- `box-shadow-blur <= 3px`: panels have rings, not shadows; only wells are shaded.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new thing on the table is paper: `--fill-panel`, a 1px border in `--color-border-strong`, `--radius-panel` and `--shadow-panel`; if it has a title, a `--fill-bar-alt` strip. Something that must stand out is a label: a small `--fill-accent`, status or `--fill-bar` patch with text in the label font. A long inner page is another `.ds-page__sheet` with sections; do not put a bar across the window, do not round corners beyond a key's, and do not add soft floating shadows, new font families or new colours.\n", "components.css": ":root {\n --size-page: 880px;\n --size-aside: 220px;\n --size-side: 240px;\n --size-gutter: 30px;\n --size-plate: 300px;\n --size-dish: 170px;\n --size-leaf: 56px;\n --size-pill: 22px;\n --size-control: 30px;\n --size-control-large: 42px;\n --size-icon: 16px;\n --size-label: 120px;\n --size-dialog: 380px;\n --size-hair: 1px;\n --space-1: 4px;\n --space-2: 7px;\n --space-3: 10px;\n --space-4: 15px;\n --space-5: 20px;\n --space-6: 30px;\n --space-7: 44px;\n}\n\n/* shell: a table top, a centred masthead, paper lying on it */\n.ds-page {\n min-width: var(--size-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 { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 0 var(--space-7);\n}\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n}\n.ds-page__aside {\n flex: 0 0 var(--size-aside);\n width: var(--size-aside);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__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-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--heading-transform);\n}\n.ds-page__title--spaced { margin-top: var(--space-6); }\n.ds-page__trail {\n margin: var(--space-5) 0 var(--space-3);\n padding: 0 var(--space-1);\n}\n.ds-page__sheet {\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n background:\n radial-gradient(circle at var(--space-4) 12%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n radial-gradient(circle at var(--space-4) 50%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n radial-gradient(circle at var(--space-4) 88%, var(--color-page) 0, var(--color-page) calc(var(--space-2) - var(--size-hair)), color-mix(in srgb, var(--color-shadow) 35%, var(--color-page)) var(--space-2), transparent calc(var(--space-2) + var(--size-hair))),\n linear-gradient(90deg, transparent 0, transparent calc(var(--space-6) + var(--space-1)), color-mix(in srgb, var(--color-danger) 40%, transparent) calc(var(--space-6) + var(--space-1)), color-mix(in srgb, var(--color-danger) 40%, transparent) calc(var(--space-6) + var(--space-1) + var(--size-hair)), transparent calc(var(--space-6) + var(--space-1) + var(--size-hair))),\n var(--color-canvas);\n box-shadow: var(--shadow-panel);\n}\n.ds-section { padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + var(--space-5)); }\n.ds-section--ruled { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-section__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-section__split {\n display: flex;\n align-items: flex-start;\n gap: var(--size-gutter);\n}\n.ds-section__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-section__side {\n display: flex;\n flex: 0 0 var(--size-side);\n flex-direction: column;\n gap: var(--space-4);\n width: var(--size-side);\n}\n.ds-section__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n margin: var(--space-4) 0 0;\n}\n.ds-section__note {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: no bar; the mark and name centred on the table, a ruled line of labels under them */\n.ds-nav { padding: var(--space-6) 0 0; }\n.ds-nav__inner {\n width: var(--size-page);\n margin: 0 auto;\n text-align: center;\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-control-large);\n height: var(--size-control-large);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-style: italic;\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-nav__items {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n list-style: none;\n}\n.ds-nav__item {\n display: block;\n height: var(--size-control);\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__item:hover,\n.ds-nav__item.is-hover { background: color-mix(in srgb, var(--color-canvas) 55%, transparent); }\n.ds-nav__item.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#notebook:target) .ds-nav__item[href=\"#notebook\"],\n.ds-page:has(#index:target) .ds-nav__item[href=\"#index\"],\n.ds-page:has(#recipe:target) .ds-nav__item[href=\"#index\"],\n.ds-page:has(#send:target) .ds-nav__item[href=\"#send\"] {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: var(--fill-bar);\n box-shadow: var(--shadow-control);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item:focus-visible,\n.ds-nav__item.is-focus { outline: var(--focus-ring); }\n\n/* hero: this week's recipe, a taped sheet with a photograph of the dish */\n.ds-hero {\n position: relative;\n display: flex;\n align-items: stretch;\n gap: var(--space-6);\n margin: var(--space-6) 0 0;\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: calc(var(--space-3) * -1);\n left: calc(50% - var(--space-7));\n width: calc(var(--space-7) + var(--space-7));\n height: var(--space-5);\n background: color-mix(in srgb, var(--color-accent-alt) 50%, transparent);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 25%, transparent);\n transform: rotate(-2deg);\n}\n.ds-hero__plate {\n display: flex;\n flex: 0 0 var(--size-plate);\n width: var(--size-plate);\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) var(--space-1) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n}\n.ds-hero__cloth {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n justify-content: center;\n padding: var(--space-5) 0;\n background-color: var(--color-fill-2);\n background-image:\n repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) var(--space-3), transparent var(--space-3), transparent var(--space-5)),\n repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) 0, color-mix(in srgb, var(--color-inverse-text) 24%, transparent) var(--space-3), transparent var(--space-3), transparent var(--space-5));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-hero__dish {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-dish);\n height: var(--size-dish);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 80%, var(--color-shadow));\n border-radius: 50%;\n background: var(--color-inverse-text);\n box-shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 55%, transparent);\n}\n.ds-hero__soup {\n width: 62%;\n height: 62%;\n border-radius: 50%;\n background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--color-accent-alt) 70%, var(--color-inverse-text)) 0, var(--color-accent-alt) 60%, color-mix(in srgb, var(--color-accent-alt) 80%, var(--color-shadow)) 100%);\n box-shadow: inset 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 40%, transparent), 0 0 0 var(--space-3) color-mix(in srgb, var(--color-shadow) 5%, transparent);\n}\n.ds-hero__copy {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: var(--size-hair);\n text-transform: uppercase;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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 text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-hero__note {\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* page header: the head of a sheet, title and one line left, keys right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6) var(--space-4) calc(var(--space-6) + var(--space-5));\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: 0 var(--border-width-strong) 0 calc(var(--size-hair) * -1) var(--color-border);\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-style: italic;\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { color: var(--color-heading-alt); font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\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 { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons: enamelled labels */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-buttons__end { margin-left: auto; }\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\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 box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: linear-gradient(var(--color-button), var(--color-button));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: color-mix(in srgb, var(--color-button-secondary) 50%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 78%, var(--color-accent-text)) 0, var(--color-danger) 60%, color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow)) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 68%, var(--color-accent-text)) 0, color-mix(in srgb, var(--color-danger) 92%, var(--color-accent-text)) 60%, var(--color-danger) 100%);\n color: var(--color-accent-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: linear-gradient(var(--color-danger), var(--color-danger)); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--small {\n height: var(--size-pill);\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n.ds-button__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n\n/* form: label column, fields ruled like a line to write on */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-1);\n color: var(--color-heading-alt);\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}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: inset 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 14%, transparent);\n color: var(--color-input-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-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select {\n width: auto;\n border-color: color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__textarea {\n height: calc(var(--size-control) * 4);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder { color: var(--color-disabled-text); opacity: 1; }\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-form__input--short { width: calc(var(--size-label) - var(--space-5)); }\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: italic;\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n margin: var(--space-4) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* search: one field and a small key, at the head of the side column */\n.ds-search {\n display: flex;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n}\n\n/* table: a ruled sheet under a stitched head */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n}\n.ds-table__head {\n padding: var(--space-3) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell--name { color: var(--color-heading); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n\n/* list: entries, each its own slip of paper with a calendar leaf */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__date {\n flex: 0 0 var(--size-leaf);\n width: var(--size-leaf);\n overflow: hidden;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n text-align: center;\n}\n.ds-list__month {\n display: block;\n padding: var(--space-1) 0;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-list__day {\n display: block;\n padding: var(--space-1) 0;\n color: var(--color-heading);\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}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\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-decoration: var(--link-decoration-quiet);\n text-transform: var(--heading-transform);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover { color: var(--color-link-hover); }\n.ds-list__meta {\n display: block;\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-list__text { margin: var(--space-2) 0 0; }\n.ds-list__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n}\n\n/* badge: a small printed label */\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-badge {\n display: inline-block;\n flex: 0 0 auto;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 35%, transparent);\n color: var(--color-accent-text);\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 white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-heading);\n text-shadow: none;\n}\n.ds-badge--success { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success) 82%, var(--color-accent-text)) 0, var(--color-success) 100%); }\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning) 78%, var(--color-accent-text)) 0, var(--color-warning) 100%);\n color: color-mix(in srgb, var(--color-shadow) 78%, var(--color-warning));\n text-shadow: none;\n}\n.ds-badge--danger { background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 82%, var(--color-accent-text)) 0, var(--color-danger) 100%); }\n\n/* panel: an index card with a title strip */\n.ds-panel {\n margin: 0;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-panel__body { padding: var(--space-3); }\n.ds-panel__text { margin: 0 0 var(--space-2); }\n.ds-panel__rows { margin: 0; }\n.ds-panel__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__row.is-first { border-top: 0; }\n.ds-panel__key {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel__value {\n margin: 0;\n color: var(--color-heading);\n text-align: right;\n}\n\n/* stats: a line of figures on the table top, between two scored rules */\n.ds-stats {\n display: flex;\n margin: var(--space-5) 0 var(--space-6);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent), 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n list-style: none;\n}\n.ds-stat {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 16%, transparent);\n box-shadow: inset var(--size-hair) 0 0 color-mix(in srgb, var(--color-canvas) 55%, transparent);\n text-align: center;\n}\n.ds-stat.is-first {\n border-left: 0;\n box-shadow: none;\n}\n.ds-stat__value {\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 text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n\n/* grid: four divider cards, each with a coloured tab standing on its upper edge */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: var(--size-pill) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n position: relative;\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__tab {\n position: absolute;\n bottom: 100%;\n left: calc(var(--border-width) * -1);\n height: var(--size-pill);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--color-fill-1);\n box-shadow: inset 0 var(--size-hair) 0 color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--size-pill);\n text-shadow: var(--shadow-text);\n}\n.ds-grid__cell--2 { border-top-color: var(--color-fill-2); }\n.ds-grid__cell--2 .ds-grid__tab { left: 25%; background: var(--color-fill-2); }\n.ds-grid__cell--3 { border-top-color: var(--color-fill-3); }\n.ds-grid__cell--3 .ds-grid__tab { left: 50%; background: var(--color-fill-3); }\n.ds-grid__cell--4 { border-top-color: var(--color-fill-4); }\n.ds-grid__cell--4 .ds-grid__tab { right: calc(var(--border-width) * -1); left: auto; background: var(--color-fill-4); }\n.ds-grid__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-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__more {\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__more:hover,\n.ds-grid__more.is-hover { color: var(--color-link-hover); text-decoration: underline; }\n\n/* tabs: card dividers standing on the rule above the table */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin: 0 0 calc(var(--border-width) * -1);\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-link-hover); }\n.ds-tabs__tab.is-current {\n padding-top: var(--space-2);\n border-bottom-color: var(--color-canvas);\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n\n/* sidebar: an index card in the side column */\n.ds-sidebar {\n margin: 0 0 var(--space-5);\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__text {\n margin: 0;\n padding: var(--space-3) var(--space-3) 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-1) var(--space-3) var(--space-2);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__item.is-first { border-top: 0; }\n.ds-sidebar__meta {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* notice: a note stuck on the sheet */\n.ds-notices { margin: 0 0 var(--space-4); }\n.ds-notice {\n margin: 0 0 var(--space-2);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice) 75%, var(--color-notice-text));\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n box-shadow: 0 var(--size-hair) var(--size-hair) color-mix(in srgb, var(--color-shadow) 20%, transparent);\n color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: color-mix(in srgb, var(--color-danger-surface) 60%, var(--color-danger));\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: small keys under the entries */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: block;\n min-width: var(--size-pill);\n height: var(--size-pill);\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 65%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-pill) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n background: color-mix(in srgb, var(--color-bar) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-strong);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: on the table top above a sheet */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: 0 var(--size-hair) 0 color-mix(in srgb, var(--color-canvas) 60%, transparent);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n\n/* dialog: a card laid over a dimmed part of the sheet */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: var(--border-width-strong) var(--border-style) var(--color-danger);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-dialog__close {\n position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-ui) * 0.75);\n height: calc(var(--text-ui) * 0.75);\n color: var(--color-bar-alt-text);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-ui) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body { padding: var(--space-4) var(--space-3); }\n.ds-dialog__heading {\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-bold);\n line-height: var(--line-heading);\n}\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n}\n\n/* empty state: a blank card with a cut-out edge */\n.ds-empty {\n padding: var(--space-5) var(--space-5);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\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-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-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* footer: a dark board across the foot of the window */\n.ds-footer {\n padding: var(--space-5) 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n background: var(--fill-inverse);\n box-shadow: inset 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-shadow) 40%, transparent);\n color: color-mix(in srgb, var(--color-inverse-text) 75%, transparent);\n font-size: var(--text-small);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-5);\n margin: 0 0 var(--space-2);\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: underline; }\n.ds-footer__note { margin: 0; font-style: italic; }\n\n/* Period components: switch, progress, tooltip, carousel, avatar, accordion, menu. Tokens only. */\n.ds-switch { display: inline-flex; flex: none; align-items: center; cursor: pointer; }\n.ds-switch input { position: absolute; opacity: 0; width: var(--size-hair); height: var(--size-hair); }\n.ds-switch__track { position: relative; display: block; flex: none; width: calc(var(--size-control) * 2); height: var(--size-pill); background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); }\n.ds-switch__track::before { content: \"OFF\"; position: absolute; top: 0; right: var(--space-2); line-height: var(--size-pill); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }\n.ds-switch__track::after { content: \"\"; position: absolute; top: var(--size-hair); left: var(--size-hair); width: var(--size-control); height: var(--size-icon); background: var(--fill-button-secondary); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-switch input:checked + .ds-switch__track { background: var(--fill-button); border-color: var(--color-button); }\n.ds-switch input:checked + .ds-switch__track::before { content: \"ON\"; left: var(--space-3); right: auto; color: var(--color-button-text); text-shadow: var(--shadow-text); }\n.ds-switch input:checked + .ds-switch__track::after { left: calc(var(--size-control) + var(--space-1)); }\n.ds-switch input:focus-visible + .ds-switch__track { outline: var(--focus-ring); }\n.ds-switches { width: 100%; max-width: calc(var(--size-control) * 11); margin: var(--space-2) 0; padding: 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }\n.ds-switches__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--size-control) + var(--space-2)); padding: var(--space-1) var(--space-3); }\n.ds-switches__row + .ds-switches__row { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-switches__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-bold); color: var(--color-text); }\n\n.ds-progress { display: block; width: 100%; max-width: calc(var(--size-control) * 10); height: var(--size-icon); margin: var(--space-2) 0 var(--space-1); padding: 0; appearance: none; -webkit-appearance: none; background: var(--fill-input); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control-pressed); overflow: hidden; }\n.ds-progress::-webkit-progress-bar { background: var(--fill-input); box-shadow: var(--shadow-control-pressed); }\n.ds-progress::-webkit-progress-value { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress::-moz-progress-bar { background: var(--fill-button); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); }\n.ds-progress__label { display: block; margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--color-text-muted); }\n\n.ds-tooltip { position: relative; display: inline-flex; flex: none; align-items: center; margin-left: var(--space-1); vertical-align: middle; }\n.ds-tooltip__trigger { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); padding: 0; background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1; cursor: help; }\n.ds-tooltip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-3)); z-index: 5; width: max-content; max-width: calc(var(--size-control) * 8); padding: var(--space-2) var(--space-3); transform: translateX(-50%); visibility: hidden; opacity: 0; background: var(--fill-inverse); color: var(--color-inverse-text); border-radius: var(--radius-control); box-shadow: var(--shadow-control), var(--shadow-dialog); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-body); line-height: var(--line-body); letter-spacing: 0; text-align: left; text-transform: none; text-shadow: var(--shadow-text); white-space: normal; }\n.ds-tooltip__bubble::after { content: \"\"; position: absolute; left: 50%; top: 100%; width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); transform: rotate(45deg); background: var(--color-inverse); }\n.ds-tooltip:hover .ds-tooltip__bubble, .ds-tooltip:focus-within .ds-tooltip__bubble { visibility: visible; opacity: 1; }\n\n.ds-avatar { display: block; flex: none; width: calc(var(--size-control) + var(--space-4)); height: calc(var(--size-control) + var(--space-4)); padding: var(--space-1); background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }\n.ds-avatar__photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fill-bar); color: var(--color-bar-text); }\n.ds-avatar__photo::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--shadow-control-pressed); }\n.ds-avatar__glyph { display: block; width: 100%; height: 100%; fill: currentColor; }\n.ds-testimonial { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: 0; border: 0; background: none; }\n.ds-testimonial__text { margin: 0; min-width: 0; font-family: var(--font-body); font-size: var(--text-small); font-style: italic; line-height: var(--line-body); color: var(--color-text); }\n.ds-testimonial__who { display: block; margin-top: var(--space-1); font-style: normal; color: var(--color-text-muted); }\n\n.ds-menu { position: relative; display: inline-block; flex: none; }\n.ds-menu__button { display: inline-flex; align-items: center; height: var(--size-control); padding: 0 var(--space-3); background: var(--fill-button-secondary); color: var(--color-button-secondary-text); border: var(--border-width) var(--border-style) var(--color-input-border); border-radius: var(--radius-control); box-shadow: var(--shadow-control); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-ui); cursor: pointer; list-style: none; }\n.ds-menu__button::-webkit-details-marker { display: none; }\n.ds-menu__button::after { content: \"\"; flex: none; width: 0; height: 0; border: calc(var(--text-ui) * 0.3) solid transparent; border-top: calc(var(--text-ui) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: var(--space-2); }\n.ds-menu__button:hover { box-shadow: var(--shadow-control-hover); }\n.ds-menu[open] > .ds-menu__button { box-shadow: var(--shadow-control-pressed); }\n.ds-menu__list { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 6; min-width: calc(var(--size-control) * 6); margin: 0; padding: var(--space-1) 0; list-style: none; background: var(--color-surface); border: var(--border-width) var(--border-style) var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-dialog); text-align: left; }\n.ds-menu__list::before { content: \"\"; position: absolute; right: var(--space-4); bottom: 100%; width: var(--space-3); height: var(--space-3); margin-bottom: calc(var(--space-3) / -2 + var(--size-hair)); transform: rotate(45deg); background: var(--color-surface); border-top: var(--border-width) var(--border-style) var(--color-border-strong); border-left: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-menu__item { position: relative; display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-ui); text-decoration: none; white-space: nowrap; }\n.ds-menu__item:hover, .ds-menu__item:focus { background: var(--fill-button); color: var(--color-button-text); text-shadow: var(--shadow-text); }\n", "specimen.html": "\n\n\n\nchronoskin, skeuomorphism kitchen notebook specimen\n\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n

A kitchen notebook: one recipe a week, cooked twice before it is written down.

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

This week in the notebook

\n

Saffron broth with white beans

\n

A pot for a cold evening: beans soaked overnight, a pinch of saffron, and bread to wipe the bowl.

\n
\n Read the recipe\n or browse all 214\n
\n

Serves four. Fifty minutes at the stove, a night for the beans.

\n
\n
\n\n
    \n
  • 214recipes written down
    • \n
  • 428trial runs at the stove
    • \n
  • 37sent in by readers
    • \n
  • 9years of Sundays
    • \n
\n\n
\n\n \n\n
\n

Latest pages

\n
    \n
  • \n Feb16\n
    \n Saffron broth with white beans\n Soups and broths, 50 minutes, serves four\n

    The beans want a night in cold water and no salt until the end. Everything else happens in one pot while the bread warms.

    \n
    \n NewTested twice\n Read the recipe\n
    \n
    \n
    • \n
  • \n Feb9\n
    \n Blood orange marmalade, small batch\n Preserves, 1 hour 40 minutes, three jars\n

    Three jars is the right amount: enough to give one away, not so much that the pan boils over while you answer the door.

    \n
    \n Tested twice\n Read the recipe\n
    \n
    \n
    • \n
  • \n Feb2\n
    \n Rye loaf with caraway\n Bakes, 3 hours with rising, one loaf\n

    A dense, sour loaf that keeps for a week. The second trial came out flat, so the amount of water is still being argued over.

    \n
    \n Still testing\n Read the recipe\n
    \n
    \n
    • \n
\n \n
\n\n
\n\n

The recipe box

\n
    \n
  • \n Soups\n

    Soups and broths

    \n

    Stocks, clear broths and the thick ones that are nearly stew.

    \n 41 recipes\n
    • \n
  • \n Mains\n

    Mains

    \n

    One pot, one tray or one pan, and what to put beside it.

    \n 86 recipes\n
    • \n
  • \n Bakes\n

    Bakes

    \n

    Bread first, then the cakes that travel well in a tin.

    \n 52 recipes\n
    • \n
  • \n Preserves\n

    Preserves

    \n

    Jams, pickles and bottled things for the back of the shelf.

    \n 35 recipes\n
    • \n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Soups and broths
    4. \n
  4. /
    5. \n
  5. Saffron broth with white beans
    6. \n
\n
\n\n
\n
\n
\n

Saffron broth with white beans

\n

Written down on 16 February, after two trials and one burnt pan.

\n
\n
\n
More
\n Print\n Keep in my box\n
\n
\n\n
\n
\n
\n

What you need

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IngredientAmountUnitNote
Dried white beans300gramssoaked overnight
Leeks2wholewhite parts, sliced
Saffron0.2gramsa generous pinch
Vegetable stock1.5litresunsalted
Olive oil3spoonsand more to finish
\n\n
\n

Method

\n

Warm the oil in a heavy pot and let the leeks soften without colour. This takes ten minutes and is not to be hurried.

\n
    \n
  1. Crumble the saffron into a cup of hot stock and leave it to stand.
    2. \n
  2. Add the drained beans and the rest of the stock, and simmer until the beans give.
    3. \n
  3. Stir in the saffron and its stock, salt at the very end, and rest for five minutes.
    4. \n
\n

Keeping

\n

Better the next day. It keeps three days in the cold; on the label write broth 16-02 so that it is found again. More in the notes on keeping.

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

At a glance

\n
\n
\n
Course
Soups
\n
At the stove
50 minutes
\n
Serves
four
\n
Trials
Tested twice
\n
\n
\n
\n
\n

Goes with

\n
\n

Something to wipe the bowl, and something sharp afterwards.

\n

\n Rye loaf with caraway\n Blood orange marmalade\n All soups and broths\n Send your own version\n

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

Notes from other kitchens

\n
\n \n

No notes yet

\n

Nobody has written back about this recipe. Cook it, then say what you changed.

\n Write the first note\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Recipe index
    4. \n
  4. /
    5. \n
  5. All courses
    6. \n
\n
\n\n
\n
\n
\n

Recipe index

\n

Everything in the notebook, newest first, with how far its testing has come.

\n
\n
\n Send a recipe\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RecipeCourseWrittenMinutesServesTesting
Saffron broth with white beansSoups16 February504Tested twice
Blood orange marmalade, small batchPreserves9 February10012Tested twice
Rye loaf with carawayBakes2 February1808Still testing
Celeriac baked in saltMains26 January1404Tested twice
Leek and potato pieMains19 January756Tested twice
Quick pickled red onionsPreserves12 January1510Withdrawn
Barley soup with smoked paprikaSoups5 January656Tested twice
\n
\n Showing 1 to 7 of 214. Next seven\n
\n New\n 214\n Tested twice\n Still testing\n Withdrawn\n
\n
\n
\n
\n\n
\n\n
\n\n
\n
    \n
  1. Notebook
    2. \n
  2. /
    3. \n
  3. Recipe index
    4. \n
  4. /
    5. \n
  5. Send a recipe
    6. \n
\n
\n\n
\n
\n
\n

Send a recipe

\n

Write it as you would on a card for a neighbour. It is cooked here before it is printed.

\n
\n
\n See what is in the box\n
\n
\n\n
\n
\n

Draft kept. Your card was saved a minute ago and will be here when you come back.

\n

Not sent. The time at the stove is missing. Fill it in below and send again.

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

Give the time in minutes, as a number.

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

Amounts first, then the method in the order you do it.

\n
\n
\n
\n PromiseOnly recipes cooked at least twice are printed.\n
\n \n
  • Print my name on the card
  • Tell me when it is printed
\n
\n
\n
\n Photograph\n
\n 62%

plum-cake.jpg: 62% sent

\n
\n
\n
\n
\n \n Keep as draft\n \n Throw away\n
\n
\n
\n
\n
\n
\n

Before you send

\n
\n

Weights in grams, spoons level, oven temperatures for an oven without a fan.

\n

Say what can be left out, and what cannot.

\n See a finished page\n
\n
\n
\n

Your cards

\n
\n
\n
Sent
3
\n
Printed
2
\n
Drafts
1
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n

Throw away

\n
\n

Throw this card away?

\n

The draft of Plum cake on a tray is removed. Cards you have already sent stay in the box.

\n
\n
\n Keep the draft\n Throw it away\n
\n
\n
\n
\n
\n\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.skeuomorphism.blog.s08.p10.t04.u09\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"skeuomorphism\",\n \"years\": [\n 2009,\n 2013\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-sk-8a49\",\n \"short\": \"v1-sk-8a49\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #d9c59c;\n --color-canvas: #fbf5e6;\n --color-surface: #fbf5e6;\n --color-surface-alt: #f3ead3;\n --color-surface-strong: #e9dcbd;\n --color-bar: #4b2e1c;\n --color-bar-text: #f7ecd2;\n --color-bar-alt: #d6c193;\n --color-bar-alt-text: #47301c;\n --color-inverse: #6f2a22;\n --color-inverse-text: #fbf0dc;\n --color-text: #4a3b2b;\n --color-text-muted: #7d6a52;\n --color-heading: #2e2015;\n --color-heading-alt: #5a3a1f;\n --color-link: #1c6672;\n --color-link-quiet: #7d6a52;\n --color-link-visited: #5c5a7a;\n --color-link-hover: #0f4852;\n --color-link-active: #9a3324;\n --color-border: #e2d5b6;\n --color-border-strong: #b9a274;\n --color-border-muted: #efe6cf;\n --color-accent: #b5382c;\n --color-accent-text: #ffffff;\n --color-accent-alt: #e3b23c;\n --color-fill-1: #2b6f73;\n --color-fill-2: #3d6b47;\n --color-fill-3: #2f4a6b;\n --color-fill-4: #a8701c;\n --color-button: #3d6b47;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #eadfc4;\n --color-button-secondary-text: #47301c;\n --color-input: #fffdf6;\n --color-input-text: #2e2015;\n --color-input-border: #b9a274;\n --color-disabled: #e6dcc3;\n --color-disabled-text: #a8997c;\n --color-danger: #a3271c;\n --color-danger-surface: #f8e4da;\n --color-success: #4a7d3a;\n --color-warning: #e3b23c;\n --color-notice: #fbf0a8;\n --color-notice-text: #4a3b12;\n --color-focus: #3b98a6;\n --color-shadow: #1e0f04;\n --color-overlay: rgba(30, 15, 4, 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Monaco, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 36px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 300;\n --weight-display: 300;\n --weight-ui: 700;\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: 1px;\n --border-style: solid;\n --radius-control: 13px;\n --radius-panel: 6px;\n --radius-pill: 20px;\n --radius-page: 6px;\n --shadow-panel: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 1px 0 color-mix(in srgb, white 70%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 80%, transparent), 0 1px 0 color-mix(in srgb, white 70%, transparent);\n --shadow-control-pressed: inset 0 1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 3px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-text: 0 -1px 1px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='black' fill-opacity='.03'/%3E%3Cpath d='M2 0h1v1H2zM0 2h1v1H0z' fill='white' fill-opacity='.35'/%3E%3C/svg%3E\"), var(--color-page);\n --fill-bar: radial-gradient(ellipse 45% 160% at 50% 0, color-mix(in srgb, white 30%, transparent) 0, transparent 100%), url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='black' fill-opacity='.06'/%3E%3Cpath d='M3 1h1v1H3zM1 3h1v1H1z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), var(--color-bar);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 55%) 0, color-mix(in srgb, var(--color-bar-alt), white 10%) 100%);\n --fill-inverse: radial-gradient(ellipse 50% 130% at 50% 0, color-mix(in srgb, white 26%, transparent) 0, transparent 100%), url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='black' fill-opacity='.06'/%3E%3Cpath d='M3 1h1v1H3zM1 3h1v1H1z' fill='white' fill-opacity='.06'/%3E%3C/svg%3E\"), var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 16%) 0, var(--color-accent) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%) 0, var(--color-button) 55%, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 42%) 0, color-mix(in srgb, var(--color-button), white 12%) 55%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 12%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }