{ "id": "v1-bg-5585", "long_id": "v1.bento-grids.blog.s05.p05.t08.u05", "name": "Personal bento, 2024", "era": { "slug": "bento-grids", "code": "bg", "name": "Bento grids", "years": [ 2022, 2026 ], "description": "Feature grids, 2022 to 2026: rounded cells of unequal size, each holding one idea, packed into a tight grid on a dark or very pale page." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A personal page built as one small bento: a narrow column of square units in which a person introduces herself in the largest tile and everything else she wants to show (where she is, what is playing, where to follow her, the latest projects, three figures, a call to write) is a tile of one, two, three or four units around it. Tiles are white with very round corners on warm off-white paper, a few of them filled flat with lime, pink, pale green or sand, and the navigation is a floating dock at the bottom of the window in place of a bar at the top. The form was common on designers' and developers' own sites and on link-in-bio pages from about 2022 to 2026.", "url": "https://chrono.skin/s/v1-bg-5585", "preview_url": "https://chrono.skin/s/v1-bg-5585/specimen.html", "files": { "STYLE.md": "# Personal bento, 2024\n\n## Summary\n\nA personal page built as one small bento: a narrow column of square units in which a person introduces herself in the largest tile and everything else she wants to show (where she is, what is playing, where to follow her, the latest projects, three figures, a call to write) is a tile of one, two, three or four units around it. Tiles are white with very round corners on warm off-white paper, a few of them filled flat with lime, pink, pale green or sand, and the navigation is a floating dock at the bottom of the window in place of a bar at the top. The form was common on designers' and developers' own sites and on link-in-bio pages from about 2022 to 2026.\n\n## Layout\n\n- Fixed centred column: `--size-page` is 1040px, designed at a 1440px viewport, padded by `--space-5` at the sides. Nothing spans the window: there is no bar, no band and no full-width rule.\n- Nothing stands above a view. The page starts `--space-8` (64px) from the top with its first tile, and the `.ds-nav` is a dock: a pill as wide as its content, centred, sticky `--space-4` above the bottom edge of the window, `--size-dock` (56px) tall, lifted by `--shadow-dialog`. It is written once, after `
` and before the footer, so that at the end of a page it comes to rest between the last tile and the footer line. It holds the `.ds-brand`, four links and one small button.\n- `.ds-grid` has six equal tracks (160px at full width) and rows of `--size-tile` (160px), so a plain tile is a square. `--wide` takes two tracks, `--half` three, `--wider` four, `--full` all six, and `--tall` two rows. `.ds-grid--auto` lets rows follow their content when tiles hold components.\n- The home page is one grid. Rows one and two: the `.ds-hero` tile, four tracks by two rows, with the map tile, two by two, beside it. Row three: a two-track tile and four squares. Rows four and five: a three-track two-row project tile at the left with a three-track tile and the `.ds-stats` tile stacked at the right. Rows six and seven: a three-track two-row list at the left, a two-track tile and a square over the three-track `--accent` tile at the right. Every pair of rows splits differently and no row is six equal squares.\n- Tiles never touch. The gap is `--space-gap` (16px) in both directions and the padding inside a tile is `--space-cell` (24px). A square holds an icon, a title of one or two words and one caption line, nothing more.\n- Spacing scale: `--space-1` 4px (pill padding, title to caption), `--space-2` 8px (button gap, dock padding, icon to label), `--space-3` 12px (control padding, icon to title, table cell padding), `--space-4` 16px (stack gap inside a tile, form gap, list row padding, the dock's distance from the window edge), `--space-5` 24px (page gutter, panel padding, split tile gap), `--space-6` 32px (under the page header, under the dock), `--space-7` 48px (under the footer), `--space-8` 64px (above the first tile, dialog stage), `--space-9` 96px (textarea height).\n- Controls are `--size-control` (40px) tall, `--size-control-large` (48px) in the hero; icon tiles are `--size-icon` (40px) with a `--size-glyph` (20px) line icon; the portrait, a record sleeve and a row of swatches are `--size-avatar` (64px).\n- Inner pages (the work index, a case study, the contact form) keep the column, the six tracks, the gap and the dock, and have no hero. A view opens with the `.ds-breadcrumb`, then the `.ds-page-header` on the bare page (title at `--text-h1`, one grey line, one button at the right on the baseline), `--space-6` above the tiles. An optional `.ds-toolbar` with the `.ds-tabs` pill at the left and a count at the right follows, `--space-gap` above a `.ds-grid--auto`. Project tiles are two tracks each, three to a row; the working table takes a `--wider` tile with a two-track tile of panels beside it; prose takes a `--wider` `--tall` tile with a two-track `.ds-sidebar` and a two-track tile beside it; a form takes a `--wider` tile with a two-track tile beside it; messages, an empty state and the dialog stage take `--half` tiles in pairs.\n- Views: `home` is the bento (introduction, map, record, four link squares, two projects, the figures, the bench list, the desk, the call to write); `work` is the index (tabs, three project tiles, the engagements table with pagination, two quotes in panels, how a project runs, an empty state for a kind with no work); `project` is one case study (specimen tile, facts, prose, other case studies, links, a chart, the next project); `contact` is the form with its buttons, the calendar with its status badges, the form's notices and the discard dialog. The dock marks Home, Work, Featured or Contact.\n- Below 960px the grid has four tracks and `--half` and `--wider` tiles take all of them. Below 600px it has two tracks with a 12px gap: every tile wider than a square takes both, squares stay side by side in pairs, a lone square marked `--solo` takes both, `--tall` is ignored, tile padding drops to `--space-4`, the dock keeps the mark and the four links and drops the name and the button, a split tile stacks, and the page header's button goes under its text. A table hides the columns marked `.ds-table__extra`, lets the first column wrap and scrolls sideways inside `.ds-table__scroll` if it still does not fit.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two sans families: `--font-heading` is Bricolage Grotesque (then Archivo and Arial Narrow), heavy and narrow, for titles, names, figures and prices; `--font-body` and `--font-ui` are Familjen Grotesk with Work Sans and system fallbacks. `--font-mono` is only for inline code. The references used commercial display grotesques; these are the open substitutes.\n- Sizes: `--text-base` 17px at `--line-body` 1.45; `--text-small` 14.5px (captions, table, meta); `--text-ui` 15px (strip, buttons, form); `--text-large` 20px (hero lead); `--text-display` 72px at `--line-display` 0.96 with `--display-tracking` -2.4px (poster title, countdown); `--text-h1` 48px (page title, figures, prices, footer wordmark), `--text-h2` 34px (act names, the accent cell), `--text-h3` 22px (cell titles, brand name) at `--line-heading` 1.05 with `--heading-tracking` -0.6px. The smallest text is 12.4px, `calc(var(--text-small) * 0.857)`: badges, meta, hints.\n- Weights: `--weight-body` 400, `--weight-ui` 600, `--weight-bold` 700, `--weight-heading` and `--weight-display` 800.\n- `--color-page` `#780016` wine: the ground and the masthead. `--color-surface` `#8c1528`: cells, lit by `--fill-panel` (8% lighter at the top left corner). `--color-surface-alt` `#981f33`: panels, the dialog, menus, the current sidebar item and table row. `--color-surface-strong` `#a52c40`: the current segment and tab, neutral badges, avatars, progress tracks. `--color-bar-alt` `#650012`: the strip, the tab pill, the table head.\n- `--color-text` `#f3d3f0` pale pink, `--color-text-muted` `#d9a7c6`, `--color-heading` `#fff0fb`. Text on a `--color-fill-*` cell uses the same tokens; the fills are dark enough for them.\n- `--color-button` `#e9c0e9` pink with wine text is the primary button and the brand tile. `--color-accent` and `--color-link` `#d2e823` lime: links, icons, the dots of the masthead, progress fills, the accent badge and the closing cell, whose text is `--color-accent-text`. `--color-accent-alt` `#e8efd6` pale green marks \"new\", ticks and switched-on toggles. `--color-inverse` `#2b0008` is the footer cell, the button on the accent cell, tooltips and the knob of a switched-on toggle.\n- `--color-fill-1` bottle green, `--color-fill-2` plum, `--color-fill-3` night blue, `--color-fill-4` deep wine: flat fills for act cells, stat cells and one ticket cell; the poster carries a quarter disc of fill 2 and a small disc of fill 3.\n- Borders: `--color-border` (pink at 14%) at `--border-width` 1px on every cell, panel and badge; `--color-border-strong` (pink at 30%) on secondary buttons, the dialog, menus, avatars and the empty cell; `--color-border-muted` `#a02c40` for rows inside a cell.\n- Links have no underline and gain one on hover.\n- Radii: `--radius-page` 36px for cells, the page header and the footer, `--radius-panel` 22px for panels, tables, notices, menus and the dialog, `--radius-control` 16px for buttons, inputs and the strip's segments, `--radius-pill` for badges, tabs, switches, avatars, icon discs and the brand tile.\n- Shadows: `--shadow-panel` is one soft drop tucked under the cell (24px blur, pulled in by 14px); `--shadow-control` is a 3px darker lip inside the bottom edge of a button, 4px on hover, turned to the top when pressed; `--shadow-dialog` a 28px drop. No text shadow.\n- One-off mixes written in `components.css`: the button's outline, status badges and `--new` (the colour at 14% with a 30% outline), the danger button's outline and hover fill, notice outlines, the rule in the footer (20% of its text colour).\n- Status: `--color-success` `#8ee29a`, `--color-warning` `#ffd166`, `--color-danger` `#ffb0a0` on `--color-danger-surface` `#4a000e`, as small text and tinted badges only; `--color-notice` night blue with `--color-notice-text`.\n- `--transition` is a 0.2s fade of colour and shadow. Nothing moves except the accordion mark.\n\n## Components\n\n- `.ds-page` on ``: paper fill, body family and size. `.ds-page__inner` is the 1040px column; every view wraps its content in one.\n- `.ds-nav`: the dock at the bottom of the window. `.ds-nav__inner` is the pill, holding the `.ds-brand`, `.ds-nav__links` of `.ds-nav__link` (the current view's link is filled with `--color-surface-alt`; `is-current` does the same by hand) and `.ds-nav__actions` with one `.ds-button--small`. Never add a second row or a top bar.\n- `.ds-brand`: the site's mark and name, at the left end of the dock. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, a 1px hairline, `--radius-control`, `--shadow-control`), so it takes on every palette and surface; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in the heading family at 16px in `--color-bar-text`. The name `chronoskin` and its mark are placeholders: the installing project puts its own name and logo here.\n- `.ds-hero`: the introduction, a `--wider` `--tall` tile at the top left of the home grid. `.ds-hero__top` holds the round `.ds-hero__avatar` (a `.ds-hero__portrait` drawing on the accent fill) and a status badge; then `.ds-hero__title` (`--text-h1`, one phrase in `.ds-hero__title-accent`) with `.ds-hero__lead`; then `.ds-hero__actions` with one primary and one secondary large button. One per site, home page only.\n- `.ds-grid`: the bento. Children are `.ds-grid__cell` with span variants `--wide`, `--half`, `--wider`, `--full`, `--tall` and `--solo`; arrangement variants `--end`, `--between`, `--stack` (16px between children), `--split` (copy left in `.ds-grid__copy`, visual right), `--flush` (no padding, for the map); fill variants `--fill-1` to `--fill-4`, `--accent` (the call to action), `--bare` (outline only); and `--link` for a tile that is itself an ``, which gains an ink outline under the pointer. Inside: `.ds-grid__head` (an icon or badge at the left, a `.ds-grid__arrow` at the right), `.ds-grid__icon` with a `.ds-grid__glyph`, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__foot` and `.ds-grid__visual` (both pushed to the bottom) and `.ds-grid__actions`. `.ds-grid--auto` is for tiles that hold components.\n- Tile drawings: `.ds-map` (a street plan from `.ds-map__road`, `.ds-map__water`, `.ds-map__park`, a `.ds-map__pin` and a `.ds-map__label` with a `.ds-map__time`); `.ds-player` (a `.ds-player__sleeve` with a `.ds-player__disc`, `.ds-player__copy` with a `.ds-player__label` and a `.ds-eq` level meter) over a `.ds-progress` bar; `.ds-cover` (a project picture set in type: `.ds-cover__glyph` at the display size and `.ds-cover__line` in mono); `.ds-swatches` of `.ds-swatches__chip` (a palette); `.ds-wire` of `.ds-wire__box` (a page sketch); `.ds-chart` of `.ds-chart__bar` (`--2` to `--5`, `is-current`); `.ds-checks`, `.ds-chips`, `.ds-rows`, `.ds-code` and `.ds-switch` as small lists and marks. No tile holds an image.\n- `.ds-page-header`: the head of an inner page, on the bare page. `.ds-page-header__copy` holds `.ds-page-header__title` (an `h1` at `--text-h1`) and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right with one button or a status badge and a button. Put a `.ds-breadcrumb` above it. Never together with a `.ds-hero`.\n- `.ds-stat`: one figure: `.ds-stat__value` (`--text-h1`, weight 800, tabular figures, an optional grey `.ds-stat__unit`) over `.ds-stat__label` (14px grey), with an optional 12px `.ds-stat__note` (`--success`, `--warning`, `--danger`). `.ds-stats` is the row: a `--half` tile laid out as three columns parted by hairlines; use exactly three. `.ds-facts` with `.ds-facts__row`, `.ds-facts__term` and `.ds-facts__value` is the two-column list of plain facts beside a case study.\n- `.ds-prose`: long-form text in a `--wider` tile; styles h1 to h3, paragraphs, lists, `strong`, `code` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` for grey navigation links. `.ds-links` lays several out in a row.\n- `.ds-button`: the ink primary. `--secondary` is white with an ink hairline, `--danger` is the destructive action (danger text on `--color-danger-surface` with a danger hairline, never a solid block; one per group, beside a secondary button), `--inverse` only on the accent tile, `--large` in the hero, `--small` in the dock. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: 12px pill. `--accent` filled blue, `--new` a tint of `--color-accent-alt`, `--count` a number with control corners; optional `.ds-badge__dot`. Status labels are `--success` (delivered, open), `--warning` (in proof, held) and `--danger` (paused, booked): coloured text on a 14% tint with a 30% hairline. Use them for the state of a project or a month and nowhere decorative.\n- `.ds-form`: two-column grid of `.ds-form__field` (`--full` spans both) with `.ds-form__label` and `.ds-form__control` (`--area` for a textarea; `is-invalid`, `is-focus`, `is-disabled`), `.ds-form__hint`, `.ds-form__error`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions`. The buttons follow the form in a `.ds-buttons` row.\n- `.ds-table`: a rounded box with a pale green head; rows are parted by the table's own `--color-border-muted` fill showing through a hairline gap. `.ds-table__num` right-aligns numbers, `.ds-table__muted` greys a column, `tr.is-current` lifts a row, `.ds-table__link` in the first cell leads to the detail view. Put it in a `--wider` tile inside `.ds-table__scroll`.\n- `.ds-list`: hairline-separated `.ds-list__item` with `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: a small pale green card with `.ds-panel__title`, `.ds-panel__body` and `.ds-panel__meta`, for a quote or a note inside a tile. `.ds-panels` puts two side by side.\n- `.ds-tabs`: a segmented pill of `.ds-tabs__tab`; `is-current` is the lime segment. `.ds-toolbar` puts tabs and a count on one line between the page header and the grid.\n- `.ds-sidebar`: a two-track tile with `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__link` (`is-current` filled).\n- `.ds-notice`: information box with `.ds-notice__title` and `.ds-notice__text`; `--error` is the red variant. `.ds-notices` stacks them.\n- `.ds-pagination`: `.ds-pagination__link` items under a table; `is-current` filled with an ink hairline, `is-disabled` greyed.\n- `.ds-breadcrumb`: 14px trail of `.ds-breadcrumb__item` separated by slashes; the last carries `is-current`. The first thing on an inner page.\n- `.ds-dialog`: 440px box with `.ds-dialog__bar` (`.ds-dialog__title`, `.ds-dialog__close` with a `.ds-dialog__glyph`), `.ds-dialog__body` and `.ds-dialog__actions`. Shown on a `.ds-stage`, a `--half` tile filled with `--color-overlay`.\n- `.ds-empty`: centred icon tile, `.ds-empty__title`, `.ds-empty__text` and one secondary button inside a `--bare` tile.\n- `.ds-footer`: one quiet line under the dock, with no rule: `.ds-footer__inner` holds `.ds-footer__text` (with the name in `.ds-footer__brand`) at the left and a `.ds-footer__list` of `.ds-footer__link` at the right.\n- `.ds-accordion`: `
` as `.ds-accordion__item` with a `.ds-accordion__head` summary and `.ds-accordion__body`. Use it for questions at the end of a guide or inside a tile.\n- `.ds-tooltip`: a focusable term with `.ds-tooltip__mark` and `.ds-tooltip__tip`, shown on hover or focus (`is-open` by hand) on `--fill-inverse`. Use it for one sentence of explanation, never for an action.\n- `.ds-carousel`: `.ds-carousel__track` of `.ds-carousel__slide` with scroll snap, one showing; `.ds-carousel__foot` holds `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`). Use it for quotes from clients inside one tile.\n- `.ds-avatar`: initials on a disc, `--accent` for a count; `.ds-avatars` overlaps several; `.ds-person` puts one beside a line of text. Use it beside a quote and where a tile speaks of people.\n\n## Never\n\n- `content-width <= 1040px`: everything stays in the narrow centred column; nothing spans the window.\n- `block-gap <= 48px`: tiles sit 16px apart and the page header 32px above them; larger space exists only above the first tile.\n- `font-families <= 3`: a display grotesque, a text grotesque and the mono.\n- `font-size >= 12px`: the smallest text is 12.4px.\n- `font-size <= 72px`: the poster title is the largest text.\n- `font-weight <= 800`: display type is extra bold, never black.\n- `underlined-links <= 5%`: links are told apart by colour; underline is the hover state.\n- `uppercase-text <= 2%`: capitals only in avatar initials.\n- `line-height <= 1.6`: body text sits at 1.45.\n- `border-radius <= 32px`: the largest box radius is the 32px tile.\n- `border-radius >= 8px`: nothing is square or nearly square; the smallest radius is the 8px chart bar.\n- `border-width <= 2px`: every hairline is 1px; 2px is the ring of the map pin.\n- `box-shadow-blur <= 60px`: only the dock and the dialog are lifted, by one soft 60px drop.\n- `text-shadow = none`: no text shadows.\n- `gradient-fills <= 5%`: every tile is a flat colour.\n- `animation = none`: nothing animates.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new thing to show is a new tile: pick the smallest shape that holds it (a square for a link with an icon, two tracks for a sentence and a small drawing, three for a list or a row of figures), give it a title of a few words, one caption and at most one drawing, and make the whole tile a `--link` when it leads somewhere. Draw pictures from type, fills and simple shapes, never from an image. Use tokens only: fills are `--fill-panel`, a flat `--color-fill-*`, `--fill-accent` with `--color-accent-text` or `--color-surface-alt` for a box inside a tile; outlines are `--border-width` in `--color-border`; corners are `--radius-page` for tiles, `--radius-panel` inside them and `--radius-control` for controls; spacing comes from the `--space-*` scale. Keep one subject per tile, keep a pair of rows unevenly split, separate tiles with the gap and never with a rule, and do not add a top bar, a full-width band, a gradient or a drop shadow under a tile.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1040px;\n --size-measure: 600px;\n --size-tile: 160px;\n --size-dock: 56px;\n --size-control: 40px;\n --size-control-large: 48px;\n --size-avatar: 64px;\n --size-icon: 40px;\n --size-glyph: 20px;\n --size-check: 16px;\n --size-dot: 8px;\n --size-chart: 96px;\n --size-switch: 32px;\n --size-knob: 14px;\n --size-dialog: 440px;\n --size-blur: 12px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n --space-9: 96px;\n --space-gap: 16px;\n --space-cell: 24px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: 0 var(--space-5);\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/* nothing stands above a view: the page starts with its first tile */\n.ds-view {\n padding: var(--space-8) 0 var(--space-6);\n}\n\n/* nav: a dock. One floating pill at the bottom of the window, written after the views */\n.ds-nav {\n position: sticky;\n bottom: var(--space-4);\n z-index: 10;\n display: flex;\n justify-content: center;\n margin: 0 0 var(--space-6);\n padding: 0 var(--space-4);\n pointer-events: none;\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n max-width: 100%;\n min-height: var(--size-dock);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n backdrop-filter: blur(var(--size-blur));\n pointer-events: auto;\n}\n/* brand: the mark on a small tile dressed like the primary button, then the name */\n.ds-brand {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-glyph) + var(--space-3));\n height: calc(var(--size-glyph) + var(--space-3));\n background: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 68%;\n height: 68%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1;\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n min-width: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n color: var(--color-link-quiet);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-bar-text);\n}\n/* the current view marks its item in the dock */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#work:target) .ds-nav__link[href=\"#work\"],\n.ds-page:has(#project:target) .ds-nav__link[href=\"#project\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n background: var(--color-surface-alt);\n color: var(--color-bar-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* grid: the bento. Six tracks of square units; a tile is one unit unless it says otherwise */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n grid-auto-rows: minmax(var(--size-tile), auto);\n grid-auto-flow: dense;\n gap: var(--space-gap);\n}\n.ds-grid--auto {\n grid-auto-rows: auto;\n}\n.ds-grid__cell {\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n padding: var(--space-cell);\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n}\n.ds-grid__cell--wide {\n grid-column: span 2;\n}\n.ds-grid__cell--half {\n grid-column: span 3;\n}\n.ds-grid__cell--wider {\n grid-column: span 4;\n}\n.ds-grid__cell--tall {\n grid-row: span 2;\n}\n/* a lone square that would leave a hole beside it on a phone takes the full width there */\n.ds-grid__cell--solo {\n min-width: 0;\n}\n.ds-grid__cell--between {\n justify-content: space-between;\n}\n.ds-grid__cell--stack {\n gap: var(--space-4);\n}\n.ds-grid__cell--flush {\n padding: 0;\n}\n.ds-grid__cell--fill-1 {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--fill-2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--fill-3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--fill-4 {\n background: var(--color-fill-4);\n}\n.ds-grid__cell--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-grid__cell--bare {\n background: transparent;\n box-shadow: none;\n border-color: var(--color-border-strong);\n}\n/* a tile that is a link lifts its outline under the pointer */\n.ds-grid__cell--link {\n transition: var(--transition);\n}\n.ds-grid__cell--link:hover,\n.ds-grid__cell--link.is-hover {\n border-color: var(--color-border-strong);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__cell--link:focus-visible,\n.ds-grid__cell--link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-grid__icon {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-page);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-grid__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-grid__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-grid__arrow {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-text-muted);\n}\n.ds-grid__title {\n display: block;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.3;\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-grid__cell--accent .ds-grid__title {\n font-size: var(--text-h3);\n color: var(--color-accent-text);\n}\n.ds-grid__text {\n display: block;\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n line-height: 1.45;\n color: var(--color-text-muted);\n}\n.ds-grid__cell--accent .ds-grid__text {\n color: var(--color-accent-text);\n opacity: 0.85;\n}\n.ds-grid__foot {\n margin-top: auto;\n padding-top: var(--space-3);\n}\n.ds-grid__visual {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-4);\n}\n.ds-grid__cell--split {\n flex-direction: row;\n align-items: stretch;\n gap: var(--space-5);\n}\n.ds-grid__copy {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n}\n.ds-grid__cell--split .ds-grid__visual {\n flex: 1;\n align-self: center;\n min-width: 0;\n margin-top: 0;\n padding-top: 0;\n}\n.ds-grid__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-4);\n}\n\n/* hero: the introduction is the largest tile of the home grid. A portrait, who this is, one line, two buttons */\n.ds-hero {\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-hero__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-hero__avatar {\n display: flex;\n flex: none;\n align-items: flex-end;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n overflow: hidden;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: 50%;\n}\n.ds-hero__portrait {\n display: block;\n width: 78%;\n height: 78%;\n}\n.ds-hero__title {\n max-width: 20ch;\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n color: var(--color-heading);\n}\n.ds-hero__title-accent {\n color: var(--color-link);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* map: a piece of a street plan drawn on the second surface colour with the tile colour for streets, with a pin and a place label */\n.ds-map {\n position: relative;\n flex: 1;\n min-height: var(--size-tile);\n overflow: hidden;\n background: var(--color-surface-alt);\n}\n.ds-map__water {\n position: absolute;\n right: -22%;\n bottom: -34%;\n width: 78%;\n aspect-ratio: 1;\n background: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface-alt));\n border-radius: 50%;\n}\n.ds-map__park {\n position: absolute;\n top: 7%;\n left: 5%;\n width: 26%;\n height: 20%;\n background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface-alt));\n border-radius: var(--radius-control);\n transform: rotate(-14deg);\n}\n.ds-map__road {\n position: absolute;\n top: 34%;\n left: -10%;\n width: 120%;\n height: var(--space-3);\n background: var(--color-surface);\n transform: rotate(-14deg);\n}\n.ds-map__road--2 {\n top: 68%;\n height: var(--space-2);\n transform: rotate(8deg);\n}\n.ds-map__road--3 {\n top: -10%;\n left: 30%;\n width: var(--space-3);\n height: 120%;\n transform: rotate(16deg);\n}\n.ds-map__road--4 {\n top: -10%;\n left: 72%;\n width: var(--space-2);\n height: 120%;\n transform: rotate(-10deg);\n}\n.ds-map__pin {\n position: absolute;\n top: 47%;\n left: 50%;\n width: var(--size-check);\n height: var(--size-check);\n margin: calc(var(--size-check) / -2) 0 0 calc(var(--size-check) / -2);\n background: var(--fill-accent);\n border: var(--border-width-strong) solid var(--color-accent-text);\n border-radius: 50%;\n box-shadow: 0 0 0 var(--space-3) color-mix(in srgb, var(--color-accent) 24%, transparent);\n}\n.ds-map__label {\n position: absolute;\n bottom: var(--space-4);\n left: var(--space-4);\n display: flex;\n align-items: center;\n gap: var(--space-2);\n max-width: calc(100% - var(--space-4) * 2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n}\n.ds-map__time {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n\n/* player: what is on the turntable. A sleeve, a title, a level meter and how far the side has run */\n.ds-player {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-player__sleeve {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-fill-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-player__disc {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 62%;\n height: 62%;\n background: var(--color-heading);\n border-radius: 50%;\n}\n.ds-player__disc::after {\n content: \"\";\n width: 34%;\n height: 34%;\n background: var(--color-fill-2);\n border-radius: 50%;\n}\n.ds-player__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-player__label {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n.ds-eq {\n display: inline-flex;\n align-items: flex-end;\n gap: calc(var(--space-1) / 2);\n height: var(--space-3);\n}\n.ds-eq__bar {\n width: calc(var(--space-1) * 0.75);\n height: 40%;\n background: var(--color-link);\n border-radius: var(--radius-pill);\n}\n.ds-eq__bar--2 {\n height: 100%;\n}\n.ds-eq__bar--3 {\n height: 65%;\n}\n.ds-progress {\n display: block;\n height: var(--space-1);\n overflow: hidden;\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-progress__fill {\n display: block;\n width: 38%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n\n/* cover: the picture of a project, drawn in type and colour and never an image */\n.ds-cover {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n min-height: 0;\n}\n.ds-cover__glyph {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n white-space: nowrap;\n color: var(--color-heading);\n}\n.ds-cover__line {\n margin: var(--space-2) 0 0;\n overflow: hidden;\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.5;\n white-space: nowrap;\n color: var(--color-text-muted);\n}\n.ds-swatches {\n display: flex;\n height: var(--size-avatar);\n overflow: hidden;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-swatches__chip {\n flex: 1;\n background: var(--color-fill-1);\n}\n.ds-swatches__chip--2 {\n background: var(--color-fill-2);\n}\n.ds-swatches__chip--3 {\n background: var(--fill-accent);\n}\n.ds-swatches__chip--4 {\n flex: 2;\n background: var(--fill-inverse);\n}\n.ds-wire {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: var(--space-2);\n height: var(--size-avatar);\n}\n.ds-wire__box {\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-wire__box--2 {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* inner page: the trail, then the page header on the bare page, then tiles */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0 0 var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n max-width: var(--size-measure);\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-toolbar {\n margin-bottom: var(--space-gap);\n}\n\n/* small things that live inside tiles */\n.ds-chart {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n height: var(--size-chart);\n}\n.ds-chart__bar {\n flex: 1;\n height: 30%;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-chart__bar--2 {\n height: 45%;\n}\n.ds-chart__bar--3 {\n height: 60%;\n}\n.ds-chart__bar--4 {\n height: 75%;\n}\n.ds-chart__bar--5 {\n height: 100%;\n}\n.ds-chart__bar.is-current {\n background: var(--fill-accent);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n margin: 0;\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-small);\n line-height: 1.4;\n color: var(--color-text-muted);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__unit {\n font-size: var(--text-h3);\n color: var(--color-text-muted);\n}\n.ds-stat__note {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n font-size: calc(var(--text-small) * 0.857);\n line-height: 1.34;\n color: var(--color-text-muted);\n}\n/* stats: three figures side by side in one tile, parted by hairlines */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n align-items: end;\n gap: var(--space-4);\n margin: 0;\n list-style: none;\n}\n.ds-stats .ds-stat {\n justify-content: flex-end;\n height: 100%;\n padding-left: var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stats .ds-stat:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-grid__icon + .ds-grid__title,\n.ds-grid__head + .ds-grid__title {\n margin-top: var(--space-3);\n}\n.ds-empty .ds-grid__icon {\n margin-bottom: var(--space-3);\n}\n.ds-facts {\n display: grid;\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__term {\n color: var(--color-text-muted);\n}\n.ds-facts__value {\n margin: 0;\n font-weight: var(--weight-bold);\n text-align: right;\n color: var(--color-heading);\n}\n.ds-code {\n margin: 0;\n padding: var(--space-4);\n overflow: hidden;\n background: var(--color-page);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: calc(var(--text-small) * 0.886);\n line-height: 1.6;\n white-space: pre;\n}\n.ds-checks {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-checks__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-checks__mark {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n color: var(--color-accent-alt);\n}\n.ds-chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n.ds-rows {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-rows__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: calc(var(--size-knob) + var(--space-1));\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-switch::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: var(--size-knob);\n height: var(--size-knob);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch.is-on {\n background: var(--color-accent-alt);\n}\n.ds-switch.is-on::after {\n left: auto;\n right: calc(var(--space-1) / 2);\n background: var(--color-inverse);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-size: var(--text-h3);\n color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: 87.5%;\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n border-radius: calc(var(--radius-control) / 2);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n font-size: var(--text-small);\n}\n\n/* buttons: small, 8px corners, a hairline one step lighter than the fill */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 25%, var(--color-button));\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: color-mix(in srgb, var(--color-button) 85%, var(--color-shadow));\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-surface);\n}\n.ds-button--danger {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-danger-surface));\n color: var(--color-danger);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger-surface);\n}\n.ds-button--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse) 86%, var(--color-inverse-text));\n color: var(--color-inverse-text);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button--small {\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n cursor: not-allowed;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-ui);\n line-height: 1.34;\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-badge--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 14%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 30%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 14%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 14%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);\n}\n.ds-badge--count {\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n font-weight: var(--weight-bold);\n}\n.ds-badge__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-accent-alt);\n border-radius: var(--radius-pill);\n}\n.ds-badge--success .ds-badge__dot,\n.ds-badge--warning .ds-badge__dot,\n.ds-badge--danger .ds-badge__dot {\n background: currentColor;\n}\n\n/* form */\n.ds-form {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-2);\n min-width: 0;\n}\n.ds-form__field--full {\n grid-column: 1 / -1;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-text);\n}\n.ds-form__control {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1.4;\n transition: var(--transition);\n}\n.ds-form__control::placeholder {\n color: var(--color-disabled-text);\n}\n.ds-form__control--area {\n min-height: var(--space-9);\n resize: vertical;\n}\n.ds-form__control:focus-visible,\n.ds-form__control.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__control.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__hint {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-danger);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n grid-column: 1 / -1;\n}\n\n/* table: its own box inside a tile, hairline rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n border-collapse: separate;\n border-spacing: 0 var(--border-width);\n overflow: hidden;\n background: var(--color-border-muted);\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-page);\n color: var(--color-text);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table__scroll {\n max-width: 100%;\n overflow-x: auto;\n}\n.ds-table .ds-table__link {\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-table .ds-table__link:hover,\n.ds-table .ds-table__link.is-hover {\n color: var(--color-link);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__muted {\n color: var(--color-text-muted);\n}\n\n/* list */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n\n/* panel: the small card. 12px corners, sits inside a cell or in a row of its own */\n.ds-panel {\n min-width: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.4;\n color: var(--color-heading-alt);\n}\n.ds-panel__body {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__meta {\n display: block;\n margin-top: var(--space-4);\n font-size: calc(var(--text-small) * 0.857);\n color: var(--color-text-muted);\n}\n.ds-panels {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3);\n}\n\n/* tabs: a segmented pill */\n.ds-tabs {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n color: var(--color-bar-alt-text);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n\n/* sidebar */\n.ds-sidebar {\n font-size: var(--text-small);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0 calc(var(--space-3) * -1);\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n\n/* notice */\n.ds-notice {\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 20%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice__text {\n margin: 0;\n opacity: 0.8;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--space-6);\n min-height: var(--space-6);\n padding: 0 var(--space-3);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-link-quiet);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n background: var(--color-surface-alt);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-disabled-text);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n}\n\n/* dialog: a lifted 12px box on a dimmed stage */\n.ds-dialog {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--space-6);\n height: var(--space-6);\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n border: 0;\n border-radius: var(--radius-control);\n cursor: pointer;\n}\n.ds-dialog__glyph {\n width: var(--size-check);\n height: var(--size-check);\n}\n.ds-dialog__close:hover,\n.ds-dialog__close.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stage {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-8) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* empty state: an empty tile with only an outline */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n text-align: center;\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n max-width: 36ch;\n margin: var(--space-1) 0 var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* footer: one quiet line under the dock */\n.ds-footer {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-6);\n max-width: calc(var(--size-page) + var(--space-5) * 2);\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) var(--space-7);\n}\n.ds-footer__brand {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n}\n\n/* accordion: sections that open and close */\n.ds-accordion {\n display: grid;\n}\n.ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child {\n border-top: 0;\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n list-style: none;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: 1.35;\n color: var(--color-heading);\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-link);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after,\n.ds-accordion__item.is-open > .ds-accordion__head::after {\n transform: rotate(45deg);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: var(--size-measure);\n margin: 0;\n padding: 0 0 var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* tooltip: a hint over its trigger, on hover or focus */\n.ds-grid__cell:has(.ds-tooltip) {\n position: relative;\n overflow: visible;\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n cursor: help;\n}\n.ds-tooltip__mark {\n display: inline-block;\n width: var(--size-check);\n height: var(--size-check);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n color: var(--color-text-muted);\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 15;\n width: max-content;\n max-width: 28ch;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-body);\n line-height: 1.4;\n text-align: left;\n text-transform: none;\n letter-spacing: 0;\n white-space: normal;\n transform: translateX(-50%);\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n\n/* carousel: one slide showing, the rest a swipe away, dots under it */\n.ds-carousel {\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-2);\n min-width: 0;\n scroll-snap-align: start;\n}\n.ds-carousel__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-carousel__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: calc(var(--size-dot) * 3);\n background: var(--color-link);\n border-color: transparent;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-carousel__arrow.is-disabled {\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* avatar: a person drawn as initials on a disc */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-check) * 2);\n height: calc(var(--size-check) * 2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: calc(var(--text-small) * 0.857);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: 0;\n text-transform: uppercase;\n}\n.ds-avatar--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n.ds-avatars {\n display: flex;\n align-items: center;\n padding-left: var(--space-2);\n}\n.ds-avatars .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n}\n\n.ds-person {\n display: flex;\n color: inherit;\n text-decoration: none;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* room above a component that follows text inside a tile */\n.ds-checks + .ds-accordion {\n margin-top: var(--space-3);\n}\n.ds-carousel__slide > .ds-panel {\n display: flex;\n flex: 1;\n flex-direction: column;\n}\n.ds-carousel__slide .ds-person {\n margin-top: auto;\n padding-top: var(--space-3);\n}\n\n@media (max-width: 960px) {\n .ds-grid {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .ds-grid__cell--half,\n .ds-grid__cell--wider {\n grid-column: 1 / -1;\n }\n .ds-view {\n padding-top: var(--space-6);\n }\n}\n@media (max-width: 600px) {\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n }\n .ds-grid__cell--wide,\n .ds-grid__cell--half,\n .ds-grid__cell--wider,\n .ds-grid__cell--solo {\n grid-column: 1 / -1;\n }\n .ds-table .ds-table__link {\n white-space: normal;\n }\n .ds-grid__cell--tall {\n grid-row: auto;\n }\n .ds-grid__cell {\n padding: var(--space-4);\n }\n .ds-grid__cell--flush {\n padding: 0;\n }\n .ds-map {\n min-height: calc(var(--size-tile) * 1.25);\n }\n .ds-page__inner {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-view {\n padding-top: var(--space-4);\n }\n .ds-nav {\n bottom: var(--space-3);\n padding: 0 var(--space-3);\n }\n .ds-nav__inner {\n gap: var(--space-2);\n padding-left: var(--space-2);\n }\n .ds-nav__links {\n overflow-x: auto;\n }\n .ds-nav__link {\n padding: var(--space-2);\n }\n .ds-brand__name,\n .ds-nav__actions,\n .ds-table .ds-table__extra {\n display: none;\n }\n .ds-hero__title,\n .ds-page-header__title {\n font-size: var(--text-h2);\n letter-spacing: var(--heading-tracking);\n }\n .ds-cover__glyph {\n font-size: var(--text-h1);\n }\n .ds-grid__cell--split {\n flex-direction: column;\n }\n .ds-form,\n .ds-panels {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stats {\n gap: var(--space-3);\n }\n .ds-stats .ds-stat {\n padding-left: var(--space-3);\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-tabs {\n max-width: 100%;\n overflow-x: auto;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n white-space: nowrap;\n }\n .ds-pagination,\n .ds-form__actions,\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-page-header__copy {\n flex-basis: 100%;\n }\n .ds-stage {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer__inner {\n padding: var(--space-4) var(--space-4) var(--space-6);\n }\n}\n@media (max-width: 960px) {\n .ds-tooltip {\n position: static;\n }\n .ds-tooltip__tip {\n bottom: auto;\n left: var(--space-4);\n right: var(--space-4);\n width: auto;\n max-width: none;\n margin-top: var(--space-6);\n transform: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, personal bento specimen\n\n\n\n\n\n
\n
\n
\n
\n
\n
\n \n Booking from March\n
\n
\n

Mira Solberg draws letters and small identities

\n

chronoskin is her one-person studio in Bergen: typefaces, wordmarks and the quiet systems that hold them together.

\n
\n
\n Start a project\n See the work\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n

Bergen, Norway 09:41 local

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

On the turntable

\n

Slow Harbour

\n

The Lantern Rooms

\n
\n
\n \n
\n\n \n \n LetterMonthly, 2,140 readers\n \n \n \n PhotosProofs and signs\n \n \n \n CodeFont tools, 12 repos\n \n \n \n FeedSketches, most days\n \n\n \n New typeface\n \n Aa Gg Rr\n ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789\n abcdefghijklmnopqrstuvwxyz .,:;!?\n \n Halden GroteskA text face in six weights for a regional newspaper, 2025\n \n\n \n \n Tidewater Coffee\n Wordmark, bag labels and a palette of four for a roastery by the quay.\n Identity2024\n \n \n \n \n \n\n
    \n
  • \n 11 yrs\n Working alone\n
    • \n
  • \n 64\n Projects shipped\n
    • \n
  • \n 9\n Typefaces released\n
    • \n
\n\n \n\n
\n

On the desk

\n
\n Pen and ink\n Variable fonts\n Risograph\n HTML and CSS\n
\n
\n\n \n \n LetteringTwo a season\n \n\n
\n

Have a name that needs a shape?

\n

Three slots open from March. A first call takes twenty minutes.

\n
\n Write to Mira\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Work
    3. \n
  3. Selected
    4. \n
\n\n
\n
\n

Work

\n

Typefaces, identities and print from the last four years. Each tile opens its case study.

\n
\n
\n Start a project\n
\n
\n\n
\n \n 64 projects\n
\n\n
\n \n AaHalden Grotesk, six weights\n Halden GroteskTypeface, 2025\n \n \n \n Tidewater CoffeeIdentity, 2024\n \n \n \n Pocket ferry timetablePrint, 2024\n \n\n
\n
\n

Engagements

\n

Everything booked since last spring, newest first.

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
ProjectClientKindStatusWeeks
Halden GroteskHalden TidendeTypefaceDelivered26
Tidewater CoffeeTidewaterIdentityDelivered7
Nordvik Museum signsNordvik kommuneLetteringIn proof4
Pocket ferry timetableFjordline co-opPrintDelivered3
Skerry wordmarkSkerry BoatsIdentityPaused2
\n
\n \n
\n\n
\n

Kind words

\n
\n
    \n
  • \n
    \n

    It reads like us

    \n

    The paper looked calmer on the first morning, and nobody could say why.

    \n EHEditor, Halden Tidende\n
    \n
    • \n
  • \n
    \n

    On time, twice

    \n

    Labels arrived a week before the beans did.

    \n OTOwner, Tidewater\n
    \n
    • \n
\n
\n \n EHOT+9\n
\n
\n
\n\n
\n
\n

How a project runs

\n

The same four steps?A wordmark takes six weeks, a text face about six months., whatever the size.

\n
\n
    \n
  • A twenty minute call and a written brief
    • \n
  • Three directions on paper within two weeks
    • \n
  • One direction drawn out and tested in use
    • \n
  • Files, a short guide and a month of support
    • \n
\n
\n
\n What does a first call cost?\n

Nothing. Twenty minutes, and you leave with a rough plan either way.

\n
\n
\n Who owns the drawings?\n

You do, once the last invoice is paid. The sketches stay in the studio.

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

Nothing under Print this year

\n

The press is free until summer. Posters and small books are welcome.

\n Propose one\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Work
    3. \n
  3. Halden Grotesk
    4. \n
\n\n
\n
\n

Halden Grotesk

\n

A text face in six weights, drawn for a regional newspaper that wanted to sound like itself again.

\n
\n
\n Delivered\n All work\n
\n
\n\n
\n
\n
\n

Morgenavisen

\n

Light · Regular · Medium · Semibold · Bold · Black

\n
\n
\n
\n

In short

\n
\n
Client
Halden Tidende
\n
Year
2025
\n
Glyphs
612 a weight
\n
\n
\n\n
\n
\n

A voice for the morning paper

\n

The paper had used the same borrowed grotesque since 1994. It was tidy and it was nobody's in particular, which is a problem for a paper named after its town.

\n

Starting from the masthead

\n

The old masthead had a square g and a flat-topped t. Both stayed, and the rest of the alphabet was drawn to keep them company. The first proofs were set at 8.5 point, the size of the body text.

\n

What had to hold

\n
    \n
  • Six columns at 8.5 point on thin newsprint
    • \n
  • Headlines that fit one more word than before
    • \n
  • Figures that line up in the tide tables
    • \n
\n

Into use

\n

The family went to print in February. The italic follows this autumn; you can ask for a trial in the meantime.

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

Elsewhere

\n

A link as it looks new, visited, under the pointer and pressed.

\n
\n

\n Type specimen\n Process notes\n Press cuttings\n Licence it\n

\n
\n\n
\n
\n

Hours by stage

\n

Twenty-six weeks, most of them spent on spacing.

\n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n Next case study\n Tidewater Coffee\n Identity2024\n \n \n \n \n \n
\n
\n
\n\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Contact
    3. \n
  3. New message
    4. \n
\n\n
\n
\n

Say hello

\n

Tell Mira what you are making and when it has to exist. She answers within two working days.

\n
\n
\n See the work first\n
\n
\n\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n Enter a full address, such as name@studio.example.\n
\n
\n \n \n Budgets and deadlines are welcome here too.\n
\n
\n \n
\n
\n
\n \n \n \n \n
\n
\n\n
\n
\n

Calendar

\n

One project at a time, so the months fill quickly.

\n
\n
    \n
  • January Booked
    • \n
  • February One slot held
    • \n
  • March Open
    • \n
  • Small jobs Any time
    • \n
\n
\n Day rate on request\n 3\n
\n
\n\n
\n
\n

Before you send

\n

Messages about this form appear here.

\n
\n
\n
\n Your draft is saved on this device\n

You can close the page and finish the message later.

\n
\n
\n The message was not sent\n

The email address is incomplete. Correct it and send again.

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

Discard this draft?

\n \n
\n
\n

The four fields you filled in will be cleared. This cannot be undone.

\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n Say hello\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bento-grids.blog.s05.p05.t08.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bento-grids\",\n \"years\": [\n 2022,\n 2026\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bg-5585\",\n \"short\": \"v1-bg-5585\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f3f3f1;\n --color-canvas: #f3f3f1;\n --color-surface: #ffffff;\n --color-surface-alt: #e8efd6;\n --color-surface-strong: #d2e823;\n --color-bar: #ffffff;\n --color-bar-text: #1e2330;\n --color-bar-alt: #e8efd6;\n --color-bar-alt-text: #254f1a;\n --color-inverse: #780016;\n --color-inverse-text: #e9c0e9;\n --color-text: #1e2330;\n --color-text-muted: #676b5f;\n --color-heading: #1e2330;\n --color-heading-alt: #254f1a;\n --color-link: #2665d6;\n --color-link-quiet: #676b5f;\n --color-link-visited: #502274;\n --color-link-hover: #061492;\n --color-link-active: #061492;\n --color-border: rgb(0 0 0 / 0.08);\n --color-border-strong: #1e2330;\n --color-border-muted: rgb(0 0 0 / 0.1);\n --color-accent: #2665d6;\n --color-accent-text: #ffffff;\n --color-accent-alt: #502274;\n --color-fill-1: #d2e823;\n --color-fill-2: #e9c0e9;\n --color-fill-3: #e8efd6;\n --color-fill-4: #f0e8c0;\n --color-button: #1e2330;\n --color-button-text: #ffffff;\n --color-button-hover-text: #d2e823;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #1e2330;\n --color-input: #ffffff;\n --color-input-text: #1e2330;\n --color-input-border: #676b5f;\n --color-disabled: #f3f3f1;\n --color-disabled-text: #b8c870;\n --color-danger: #882018;\n --color-danger-surface: #f8f0f0;\n --color-success: #254f1a;\n --color-warning: #b17816;\n --color-notice: #e8efd6;\n --color-notice-text: #254f1a;\n --color-focus: #2665d6;\n --color-shadow: #01013f;\n --color-overlay: rgb(0 0 0 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: \"Familjen Grotesk\", \"Work Sans\", \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Bricolage Grotesque\", Archivo, \"Arial Narrow\", \"Helvetica Neue\", Arial, sans-serif;\n --font-ui: \"Familjen Grotesk\", \"Work Sans\", \"Avenir Next\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"DM Mono\", \"Fira Mono\", ui-monospace, Menlo, Consolas, monospace;\n --text-base: 17px;\n --text-small: 14.5px;\n --text-ui: 15px;\n --text-large: 20px;\n --text-display: 72px;\n --text-h1: 48px;\n --text-h2: 34px;\n --text-h3: 22px;\n --line-body: 1.45;\n --line-heading: 1.05;\n --line-display: 0.96;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 800;\n --weight-display: 800;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: -0.6px;\n --display-tracking: -2.4px;\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: 2px;\n --border-style: solid;\n --radius-control: 16px;\n --radius-panel: 16px;\n --radius-pill: 64px;\n --radius-page: 32px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 2px 19px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-control-pressed: inset 0 0 0 2px color-mix(in srgb, var(--color-shadow) 10%, transparent);\n --shadow-dialog: 0 24px 60px color-mix(in srgb, var(--color-shadow) 8%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid var(--color-focus);\n --transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;\n --backdrop-blur: 0px;\n}\n" } }