{
  "id": "v1-me-2834",
  "long_id": "v1.memphis.blog.s02.p08.t03.u04",
  "name": "Memphis studio portfolio and journal (2016 to 2022)",
  "era": {
    "slug": "memphis",
    "code": "me",
    "name": "Memphis",
    "years": [
      2016,
      2022
    ],
    "description": "The Memphis revival of 2016 to 2022: flat bright colours that clash on purpose, squiggles, dots, triangles and zigzags scattered as decoration, patterns laid as whole fields, flat blocks that overlap and tilt, and bold geometric type."
  },
  "archetype": "blog",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A portfolio and journal for a small design studio in the Memphis revival look of 2016 to 2022, in its softer, pastel form: a mint ground, coral, lilac, yellow and sky blocks, a violet rail, and patterns of dots and rings used as whole fields. Nothing is outlined and nothing casts a shadow: flat blocks lie over the edges of pattern fields and of each other, and corners are square, fully round or one large quarter circle. Creative studios, illustrators and playful agencies built their sites this way; the navigation is a fixed rail of one flat colour on the left and the pages are loose pieces on the open ground, separated by wide gaps.",
  "url": "https://chrono.skin/s/v1-me-2834",
  "preview_url": "https://chrono.skin/s/v1-me-2834/specimen.html",
  "files": {
    "STYLE.md": "# Memphis studio portfolio and journal (2016 to 2022)\n\n## Summary\n\nA portfolio and journal for a small design studio in the Memphis revival look of 2016 to 2022, in its softer, pastel form: a mint ground, coral, lilac, yellow and sky blocks, a violet rail, and patterns of dots and rings used as whole fields. Nothing is outlined and nothing casts a shadow: flat blocks lie over the edges of pattern fields and of each other, and corners are square, fully round or one large quarter circle. Creative studios, illustrators and playful agencies built their sites this way; the navigation is a fixed rail of one flat colour on the left and the pages are loose pieces on the open ground, separated by wide gaps.\n\n## Layout\n\n- Two columns for the whole site: a fixed `--size-rail` (264px) rail on the left holding the navigation, and the main column, which fills the rest. Inside the main column every block is at most `--size-content` (1080px) wide and left-aligned, with `--space-gutter` (56px) at the sides. Designed at a 1440px viewport; `--size-page` is 100%.\n- The rail (`.ds-nav`) is one flat `--fill-bar` field from top to bottom with no rule at its edge. From the top: the brand, the links stacked in the heading font, a search field, a tilted note on flat `--color-bar-alt`, and at the foot a band of `--fill-bar-alt` pattern that runs from edge to edge of the rail with three small shapes on it, then the studio's faces and a small button. It stays in place while the page scrolls.\n- The home view opens with a poster in three overlapping pieces on a twelve-column grid: a tall field of pattern (`.ds-hero__art`, columns 6 to 12) that runs off the top of the page and off the right edge; a flat block with the words (`.ds-hero__body`, columns 1 to 7) lying across its left edge; and three stat blocks of unequal size (columns 4 to 12) pulled up by `--space-9` to stand on its foot. A large ring crosses the top right corner. Then `Recent work` as an uneven grid, then the journal list beside a tinted panel and a carousel. The footer is a field of pattern at the foot of the main column with a flat block on it.\n- Blocks do not touch. Each `.ds-block` is followed by a `--space-8` (64px) gap and the page ground shows between them.\n- `.ds-grid` has twelve columns: tiles span 7, 5, 5, 7 in turn. The covers are cut in turn as a block, an arch and a quarter circle, and the flat caption of each tile overlaps the foot of its cover by `--space-7` and sticks out past one side of it by `--space-5`. `.ds-split` is a main column and a `--size-sidebar` (300px) column; `.ds-split--even` is two halves.\n- Inner pages keep the rail and the footer and drop the hero. They start with a `.ds-page-header` set straight on the page: the breadcrumb, a row with the `--text-h1` title and one line of lead on the left and the actions on the right, then a squiggle; one small shape sits above its right end. Below it come `.ds-block` sections: a `.ds-figure` (a wide patterned cover with a caption) on a case study, then a `.ds-split` whose main column starts with the `.ds-tabs` and holds the table, and whose side column holds a `.ds-sidebar` and a panel.\n- Spacing scale: `--space-1` 4px, `--space-2` 8px (gaps between chips, label to control), `--space-3` 12px (row padding), `--space-4` 16px (gap between buttons, list row padding), `--space-5` 20px (panel padding, gap between stacked blocks, how far a caption sticks out), `--space-6` 28px (rail padding, gap between tiles across, footer block padding), `--space-7` 40px (hero block padding, gap between columns and between rows of tiles, overlap of a caption on its cover), `--space-8` 64px (gap between blocks), `--space-9` 88px (the climb of the stat row, the pattern band left of the footer block). `--space-nudge` 2px.\n- Fixed sizes: `--size-control` 44px, `--size-control-large` 54px, `--size-control-small` 34px, `--size-logo` 40px, `--size-avatar` 40px, `--size-art` 250px (cover of a case tile), `--size-shape` 84px, `--size-dot` 16px, `--size-stroke` 4px (weight of drawn lines), `--size-dialog` 460px.\n- Below 1100px splits stack. Below 900px the rail becomes a bar across the top: brand and button on the first row, the links wrapping on the second, and the search field, the note, the pattern band, the faces and all free shapes are hidden; the hero stacks, with the pattern field tucked under the foot of the words block, and every tile spans the full width. Below 600px gutters shrink to `--space-4`, the stats stack, buttons may wrap and `.ds-table__extra` columns are hidden, so nothing scrolls sideways. On a phone (600px and below) `.ds-nav__links` is one row that scrolls sideways beside the `.ds-menu` of the bar, whose list opens from the right edge; on the views whose link lies far along the row, that link is moved to the front so that the current view is in sight. A `.ds-menu__list` is at most 80vw wide.\n- Views: four. `home` is the work index. `case` is one case study: figure, tabs, the table of pieces with a tooltip, the status key, project facts and progress bars. `journal` is one note: the article, its author and the pagination across its parts, topics and further links. `contact` is the project form with a switch and the four buttons, beside notices, the accordion and an empty state, with the discard dialog on an overlay block. The rail marks the current view through `:has()` rules, one per view.\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- Type: headings in a heavy grotesque set in capitals (`--font-heading`: Archivo Black, then Arial Black), text in Space Grotesk or Inter, controls and labels in a monospace (`--font-ui`: Space Mono, IBM Plex Mono) in capitals. `--text-base` 15px at 1.5, `--text-small` 12px, `--text-ui` 13px, `--text-large` 19px. `--text-display` 92px, used at 62% for the hero title of this layout because the hero is one block in the middle column; `--text-h1` 52px (inner page titles, stat figures), `--text-h2` 34px, `--text-h3` 19px (column labels, sidebar titles, the title of the wide tile). Links are not underlined until hovered.\n- Palette: a deep navy page `--color-page` #12163f, a slightly lighter `--color-canvas` #161b4b for the sheet, navy surfaces rising from #1c2259 through `--color-surface-alt` #272e70 to `--color-surface-strong` #343c88. The four fills are neon pink #ff5fd2, mint #3df5d0, yellow #f5ff4a and violet #9c8aff; `--color-accent` is the pink, `--color-accent-alt` the mint, the primary button the yellow, the fifth ornament colour `--color-shadow` orange #ff8f3d. `--color-accent-text` is the page navy, so every loud fill carries dark text. `--color-bar` is the mint with navy text (app bar, player, table heads); `--color-bar-alt` is the yellow. Near-white #f4f1ff is the light flat colour: the secondary button, the menu, the footer chips. Text is near-white; `--color-heading-alt` and links are mint, link hover pink.\n- Surface: no outlines, no shadows and no glow. `--border-width` and `--border-width-strong` are a 1px dotted hairline, used only round form controls and between rows; all five shadow tokens are `none`. `--radius-control` rounds the right end only (buttons, inputs and avatar tiles are bullet shapes), `--radius-panel` and `--radius-pill` are 0 (square blocks and tags), and `--radius-page` rounds one corner only, the bottom right, to a 48px quarter circle (the hero, the wide tile). `--fill-page` draws a quiet 48px grid of thin lines; `--fill-bar-alt` is loud pink teeth on yellow; `--fill-inverse` is a violet grid on near-white. `--fill-button-hover` is the mint. No text shadow, no blur.\n- Which text sits on which fill (the era's convention; every Memphis layout and token set keeps to it):\n  - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` carry `--color-text`, headings in `--color-heading` or `--color-heading-alt`, links in the `--color-link-*` tokens and secondary text in `--color-text-muted`.\n  - `--color-fill-1` to `--color-fill-4`, `--color-accent` (`--fill-accent`), `--color-accent-alt`, `--color-success` and `--color-warning` are the loud fills. They carry `--color-accent-text` and nothing else: headings and links on them inherit it (use `.ds-link--plain`), and there is no muted text on a loud fill.\n  - `--color-danger` is readable as text on any surface. Used as a fill (destructive button, danger badge) it carries `--color-surface`. `--color-danger-surface` carries `--color-text`.\n  - `--color-bar` carries `--color-bar-text`, `--color-bar-alt` carries `--color-bar-alt-text`, `--color-inverse` carries `--color-inverse-text`, `--color-notice` carries `--color-notice-text`, buttons carry their own text tokens and `--color-disabled` carries `--color-disabled-text`. The bar is a loud colour of its own, so the primary and the secondary button must both read on it.\n  - A box is a flat block of one colour. It has no outline and nothing behind it: every `--shadow-*` token is `none` and `components.css` never sets `box-shadow`. Two blocks are told apart by their fills, so a block never sits on a ground of its own colour: panels (`--fill-panel`) go on the page, on `--color-surface-alt` or on a fill; tinted blocks (`--color-surface-alt`, `--color-surface-strong`) go on the page or on a surface. The secondary button and the menu use the darkest or lightest colour of the palette (`--color-button-secondary`, `--color-inverse`) so that they read on every ground.\n  - The only borders are hairlines: `--border-width` in `--color-input-border` around a form control (a white field on a white block would vanish without it) and in `--color-border-muted` between rows of a table or list, drawn in the set's `--border-style`. `--color-border` and `--color-border-strong` are the ink of drawn ornaments (`.ds-shape--ink`, the specks in the terrazzo and confetti patterns), not of frames. `--color-shadow` is the fifth ornament colour (`.ds-shape--c5`, confetti); it is never a shadow.\n  - Patterns come in two strengths. `--fill-page` is the quiet one, drawn in a faint tint of the ground, and text may sit on it. The loud ones (`--fill-bar-alt`, `--fill-inverse` and every `.ds-cover`) are drawn in a second, clashing colour and never carry text directly: text goes on a flat block or chip laid over the pattern (`.ds-cover__chip`, the label of a tile, the footer block), in `--color-bar-alt`, `--color-inverse` or a surface. The only exceptions are the faint tints of `.ds-avatar__pic` and `.ds-progress__bar`, which mix `--color-accent-text` at under 30% into the fill.\n\n## Components\n\n- `.ds-page`: on `<body>`: the grid of rail and main column, the patterned page fill, the base font and colour.\n- `.ds-brand`: the mark and name at the top of the rail, linking home. `.ds-brand__mark` is a `--size-logo` tile dressed like the primary button (flat fill, text colour, radius, no outline) and tilted 8 degrees; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own.\n- `.ds-nav`: the rail. `.ds-nav__bar` holds `.ds-nav__links`, a stack of `.ds-nav__link` in the heading font (the current one is a flat accent chip, tilted; a hovered one takes `--color-surface`) with one `.ds-menu` that flies out to the right; `.ds-nav__search` holds a search field; `.ds-nav__strip` is the tilted note on flat `--color-bar-alt`; `.ds-nav__foot` holds `.ds-nav__art` (a band of `--fill-bar-alt` pattern from edge to edge of the rail, with three small shapes and no text), `.ds-nav__faces` (avatars and a count) and a small button.\n- `.ds-main`: the main column; it holds the views. `.ds-block` is one section of it (`.ds-block--overlay` is the dialog backdrop); `.ds-block__head` puts a `.ds-block__title` with its `.ds-squiggle` on the left and a link on the right; `.ds-block__label` is a small heading over one block. `.ds-split`, `.ds-stack` (`.ds-stack--wide`) and `.ds-row` arrange blocks.\n- `.ds-hero`: the poster, a twelve-column grid with no fill or frame of its own. `.ds-hero__art` is also a `.ds-cover`: the tall pattern field with `--radius-page`, running off the top and right of the main column, holding six shapes placed by their order. `.ds-hero__body` is a flat `--fill-panel` block laid across its left edge, holding a tilted badge, `.ds-hero__title` with a phrase in `.ds-hero__mark` (a tilted `--color-accent-alt` block), `.ds-hero__lead` and `.ds-hero__actions`. The `.ds-stat` row is its last child.\n- `.ds-page-header`: the head of an inner page, used instead of the hero: the breadcrumb, `.ds-page-header__row` with `.ds-page-header__title` and `.ds-page-header__lead` on the left and `.ds-page-header__actions` on the right, then a `.ds-squiggle`.\n- `.ds-stat`: the row of figures standing on the foot of the hero's pattern field: three `.ds-stat__cell` blocks of unequal width (4:3:5) and height, each one flat fill with `--color-accent-text`, touching; a `.ds-stat__value` at `--text-h1` over a small `.ds-stat__label`. `.ds-stat` is the row.\n- `.ds-grid`: case studies. A `.ds-grid__cell` has no frame and no fill of its own: a tall `.ds-cover` with two or three shapes, cut as a block, an arch or a quarter circle, and `.ds-grid__body`, a flat `--fill-panel` caption laid over its lower corner, with `.ds-grid__title`, a row of plain badges and `.ds-grid__text`.\n- `.ds-list`: journal rows on the open page, divided by hairlines: `.ds-list__item` with a tilted `.ds-list__date` block (`.ds-list__day` over the month; square, round and square again, in three fills), `.ds-list__main` (`.ds-list__title` in the heading font, `.ds-list__text`) and a muted `.ds-list__meta`.\n- `.ds-panel`: a flat `--fill-panel` block; `.ds-panel__title` starts with a small accent disc and has no strip; `.ds-panel__body`. `.ds-panel--tint` sets it on `--color-surface-strong`. `.ds-figure` is a wide `.ds-cover` with `--radius-page` and a flat `.ds-figure__caption` under it, for the lead picture of a case study.\n- `.ds-sidebar`: a flat `--color-surface-alt` block: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows.\n- `.ds-footer`: a field of `--fill-inverse` pattern with `--radius-page`; the pattern shows as a wide band on the left and a narrow one round the rest. The content lies on a flat `--color-inverse` block: `.ds-footer__inner` is a 2:1:1 grid with `.ds-footer__brand` at `--text-h1` and `.ds-footer__text`, then columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` is the last line of the block.\n- `.ds-shape`: an ornament. An empty `aria-hidden` span, absolutely placed in a section that has `position: relative`, behind the content or across the edge of two blocks. Filled kinds, with no outline: `.ds-shape--disc`, `.ds-shape--half`, `.ds-shape--quarter`, `.ds-shape--tri` (clipped box), `.ds-shape--block`. Line-only kinds: `.ds-shape--ring` (a thick circle) and `.ds-shape--hoop` (a thin one), both drawn with a radial gradient and not with a border; `.ds-shape--line`, which holds an inline SVG squiggle or zigzag, and `.ds-shape--draw`, which holds an inline SVG triangle, cross or arc, all stroked in `currentColor` at one and a half times `--size-stroke`. Pattern kinds: `.ds-shape--dots`, `.ds-shape--grid`, `.ds-shape--bars`, `.ds-shape--stripes`. Colour: `.ds-shape--c1` to `.ds-shape--c4` (the four fills), `.ds-shape--c5` (`--color-shadow`), `.ds-shape--ink` (`--color-border-strong`), `.ds-shape--paper` (`--color-surface`). A shape is either filled or a line, never a filled shape with an outline round it. Size: `.ds-shape--s`, none, `.ds-shape--l`, `.ds-shape--xl`, `.ds-shape--xxl` (0.5, 1, 2, 3 and 4.5 times `--size-shape`). `.ds-shape--tilt`, `.ds-shape--turn`, `.ds-shape--flip` and `.ds-shape--side` rotate it. Place with `.ds-shape--tl`, `--tr`, `--bl`, `--br`, `--edge-l`, `--edge-r`. Free shapes are hidden on narrow screens so they never cover text; keep them out of the way of buttons.\n- `.ds-cover`: a field of pattern, for pictures and for whole grounds: a fill with a pattern in a clashing colour. Colour pairs: `.ds-cover--1` to `.ds-cover--4` (each fill with the next one), `.ds-cover--5` (`--color-surface-strong` with the accent), `.ds-cover--6` (`--color-inverse` with `--color-fill-1`). Patterns: `.ds-cover--dots`, `.ds-cover--stripes`, `.ds-cover--grid`, `.ds-cover--zig` (rows of teeth), `.ds-cover--dash` (short strokes in rows), `.ds-cover--rings`, `.ds-cover--terrazzo` and `.ds-cover--confetti`, all at the pitch of `--size-dot`. As a picture it holds one to four `.ds-shape` (in a row, not absolutely) or a `.ds-avatar`, and may carry a `.ds-cover__chip` label on a solid surface. `.ds-cover--ground` makes it an absolutely placed layer behind the content of a section; the layout places it with a class of its own. Use patterns big: a band, a rail foot, a third of a hero.\n- `.ds-squiggle`: the short wavy rule under a section title, an inline SVG in `--color-accent`. It is the style's rule: there are no straight heavy rules.\n- `.ds-prose`: long text: h1, h2, h3 (in `--color-heading-alt`), paragraphs, lists with coloured markers, strong, inline code on a flat `--color-surface-alt` chip, and links. `.ds-prose__lead` is the first, larger paragraph.\n- `.ds-link`: a link in content, bold, in `--color-link` with the `--link-decoration` underline as thick as `--space-nudge`; on hover it takes `--color-link-hover` and the underline turns wavy. `.ds-link--quiet` for titles, breadcrumbs and lists; `.ds-link--plain` inherits its colour and is the only link allowed on a loud fill. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-links` is a wrapping row of them.\n- `.ds-button`: one flat block of `--fill-button` with `--radius-control` corners, no outline and no shadow. `.ds-button--secondary` uses the secondary fill; `.ds-button--danger` is `--color-danger` with `--color-surface` text, once per view; `.ds-button--large` and `.ds-button--small` change height and text size. `is-hover` swaps the fill (`--fill-button-hover`; the secondary button takes the accent) and tilts the block 2 degrees, `is-active` drops it by `--space-nudge`, `is-disabled` is `--color-disabled`, `is-focus` shows `--focus-ring`. On a block of the button's own colour use the other button. `.ds-buttons` is a row.\n- `.ds-badge`: a small flat tag in the UI font with `--radius-pill` corners and no outline; `--fill-accent` by default. `.ds-badge--alt` (`--color-accent-alt`), `.ds-badge--plain` (`--color-surface-strong`, for counts and neutral tags), and the status variants `.ds-badge--success`, `.ds-badge--warning` (both with `--color-accent-text`) and `.ds-badge--danger` (`--color-danger` with `--color-surface` text). `.ds-badge--tilt` turns it 4 degrees. `.ds-badges` is a row.\n- `.ds-form`: stacked `.ds-form__field` blocks, a bold small `.ds-form__label` over a `.ds-form__control` (input, select; `.ds-form__control--area` for a textarea, which takes `--radius-panel`), then `.ds-form__hint` or `.ds-form__error`. A control is `--fill-input` with the hairline in `--color-input-border`. `.ds-form__row` puts two fields side by side. `is-focus` adds the focus ring, `is-invalid` turns the control `--color-danger-surface` with a `--color-danger` hairline, `is-disabled` greys it. `.ds-form__check` wraps a `.ds-form__checkbox` (checked: the accent fill with a small square in it) and its text.\n- `.ds-switch`: an on/off control over a checkbox: `.ds-switch__input` (invisible, covers the label), a flat `.ds-switch__track` with a flat thumb in `--color-button-secondary`, `.ds-switch__label` and an optional `.ds-switch__hint`. On, the track is `--fill-accent`. `.ds-switch--end` puts the track at the right end of a full-width row. `is-on` shows the on state statically.\n- `.ds-table`: one flat `--color-surface` block. The head row is `--color-bar` with `--color-bar-text`; rows alternate `--color-surface` and `--color-surface-alt` and are divided by a hairline in `--color-border-muted`; `is-current` on a row makes it `--color-surface-strong` and bold. `.ds-table__num` right-aligns figures, `.ds-table__extra` marks a column that is dropped on a phone, `.ds-table__meta` is a muted second line in a cell.\n- `.ds-tabs`: a wrapping row of flat `--color-surface-strong` chips (`.ds-tabs__tab`); the current one (`is-current`) is `--fill-accent` and tilted 3 degrees. `is-hover` tints and tilts. Use for two to four views of one block, as the first row of the main column of an inner page.\n- `.ds-notice`: a flat `--color-notice` block with a striped end drawn in its own text colour; `.ds-notice__title` and `.ds-notice__text`. `.ds-notice--error` is `--color-danger-surface` with `--color-text` and `--color-danger` stripes.\n- `.ds-pagination`: a row of flat `--color-surface-strong` counters (`.ds-pagination__link`, `--radius-pill`); the current page (`is-current`) is `--fill-accent` and tilted, `is-disabled` is grey, `is-hover` takes `--color-accent-alt` and tilts the other way.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` separated by accent dots; the last has `is-current`. It is the first line of an inner page.\n- `.ds-dialog`: a flat `--fill-panel` block on the overlay, with no frame: `.ds-dialog__bar` on `--color-surface-strong` with `.ds-dialog__title` and a `.ds-dialog__close` in the secondary button colours, `.ds-dialog__body`, `.ds-dialog__actions` with the buttons at the right.\n- `.ds-empty`: a flat `--color-surface-alt` block, centred: `.ds-empty__art` (three small `.ds-shape` in a row), `.ds-empty__title`, `.ds-empty__text` and one small button.\n- `.ds-menu`: a drop-down under a navigation item, a `<details>` with a `.ds-menu__toggle` summary and a `.ds-menu__list` of `.ds-menu__link`, each with an optional `.ds-menu__note`. The list is a flat `--color-inverse` block, tilted 1 degree, so it reads on any ground without a frame or a shadow; a hovered link takes the accent fill.\n- `.ds-tooltip`: wraps its trigger; `.ds-tooltip__tip` is a small flat `--color-inverse` chip above it, tilted, shown on hover and focus (`is-open` shows it statically). Do not leave it open over other content.\n- `.ds-accordion`: `.ds-accordion__item` (`<details>`) with a `.ds-accordion__head` summary on `--color-surface-alt` ending in a `.ds-accordion__sign`: an accent disc that becomes a diamond in `--color-accent-alt` when open. The open head sits on `--color-surface-strong`; `.ds-accordion__body` holds the answer on the panel fill.\n- `.ds-progress`: a flat `--color-disabled` track with a `.ds-progress__bar` in `--fill-accent`, striped; `.ds-progress--alt` is dotted `--color-accent-alt`. Width by `.ds-progress--0`, `--25`, `--40`, `--60`, `--75`, `--90` (50% without). `.ds-progress__legend` is the label and figure above it.\n- `.ds-avatar`: a face (inline SVG) or initials in `.ds-avatar__pic`, a tile with `--radius-control` corners on a fill with a faint pattern (`.ds-avatar--1` to `.ds-avatar--4`), optionally with `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. `.ds-avatar--large` for a cover or a byline.\n- `.ds-carousel`: `.ds-carousel__track` is a scroll-snap row of `.ds-carousel__slide` on one flat `--color-surface-strong` block (a `.ds-carousel__quote` and an avatar in each); `.ds-carousel__foot` holds `.ds-carousel__dots` (a disc, a diamond and a square in `--color-border`; `is-current` is the accent) and two `.ds-carousel__arrow` buttons in the secondary button colours.\n\n## Never\n\n- `row-gap <= 8px`: rows of a table or list touch and are divided by hairlines.\n- `block-gap <= 40px`: stacked blocks inside a section are 20px to 40px apart.\n- `content-width >= 70%`: the main column fills what the rail leaves, about three quarters of the viewport.\n- `font-size <= 57px`: the hero title, at 62% of the display size, is the largest text of this layout.\n- `font-size >= 12px`: labels, badges and meta text are the smallest.\n- `font-weight >= 400`: no light weights.\n- `font-families <= 3`: a heavy grotesque for headings, a sans for text and a monospace for controls.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `uppercase-text <= 30%`: headings, navigation, buttons and labels are capitals; running text never is.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `box-shadow = none`: no box has anything behind it, neither a soft shadow nor a hard offset block. A block of colour behind every box is another style; depth here comes from one shape or block overlapping another.\n- `border-width <= 1px`: the only borders are hairlines round form controls and between rows. No card, button, tag, tile or bar is outlined; a thick line is a drawn squiggle or zigzag, never a frame.\n- `text-shadow = none`: type is flat.\n- `gradient-fills <= 8%`: gradients are used only to draw patterns: dots, stripes, dashes, zigzags, rings and terrazzo. No box fades from one colour to another.\n- `animation = none`: nothing moves on its own; only hover tilts a control.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A box is one flat fill with a radius token: no border, no `box-shadow`, no outline. If it would vanish on its ground, change its fill or the ground's, do not frame it. Follow the convention above for its text: `--color-accent-text` on the loud fills, `--color-text` on the surfaces. Give depth by overlap: pull a block over the edge of a pattern field or of the section above with a negative margin, let a `.ds-shape` cross from one block onto the next, set neighbouring blocks of different fills edge to edge and make them unequal in size. Decoration is the point of this style: a new section gets a `.ds-cover` pattern as part of its ground or a few `.ds-shape` in its empty corners, mixing filled shapes with line-only ones; draw both from the fill tokens so that every palette repaints them, and keep text on flat blocks, off the loud patterns. Corners are square or fully round (discs, arches, quarters, pills) and come from the radius tokens, some of which round a single corner; never give boxes a uniform medium radius. Tilt small things (tags, the current tab, a featured panel, one tile of a row) by 1 to 6 degrees with `transform: rotate()`; never tilt running text or a form. For a size the vocabulary lacks use `calc()` over an existing token; `--size-stroke` is the weight of every drawn line.\n",
    "components.css": "/* Layout tokens (structure part) */\n:root {\n  --size-page: 100%;\n  --size-rail: 264px;\n  --size-content: 1080px;\n  --size-measure: 600px;\n  --size-control: 44px;\n  --size-control-large: 54px;\n  --size-control-small: 34px;\n  --size-logo: 40px;\n  --size-check: 20px;\n  --size-thumb: 18px;\n  --size-track: 16px;\n  --size-avatar: 40px;\n  --size-art: 250px;\n  --size-shape: 84px;\n  --size-dot: 16px;\n  --size-stroke: 4px;\n  --size-sidebar: 300px;\n  --size-dialog: 460px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 20px;\n  --space-6: 28px;\n  --space-7: 40px;\n  --space-8: 64px;\n  --space-9: 88px;\n  --space-gutter: 56px;\n  --space-nudge: 2px;\n}\n\n/* shell: a fixed rail on the left, the pages on the right */\n.ds-page {\n  display: grid;\n  grid-template-columns: var(--size-rail) minmax(0, 1fr);\n  align-items: start;\n  margin: 0;\n  width: var(--size-page);\n  min-height: 100vh;\n  overflow-x: clip;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen 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: the rail, one flat colour from top to bottom. Brand on top, the links stacked, a search field, a block of pattern with shapes, then the studio's faces */\n.ds-nav {\n  position: sticky;\n  top: 0;\n  z-index: 5;\n  grid-row: 1 / span 2;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  min-height: 100vh;\n  padding: var(--space-6) var(--space-5);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n}\n.ds-nav__links {\n  display: grid;\n  gap: var(--space-2);\n  justify-items: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.4;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-decoration: var(--link-decoration-quiet);\n  color: var(--color-bar-text);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-text);\n  background: var(--color-surface);\n  transform: rotate(-2deg);\n}\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(#case:target) .ds-nav__link[href=\"#case\"],\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  transform: rotate(-3deg);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-nav .ds-menu__list {\n  top: 0;\n  left: calc(100% + var(--space-3));\n}\n.ds-nav__strip {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-bar-alt-text);\n  background: var(--color-bar-alt);\n  border-radius: var(--radius-panel);\n  transform: rotate(2deg);\n}\n.ds-nav__foot {\n  display: grid;\n  gap: var(--space-5);\n  justify-items: start;\n  margin-top: auto;\n}\n.ds-nav__faces {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-nav__art {\n  display: flex;\n  align-items: flex-end;\n  justify-self: stretch;\n  gap: var(--space-3);\n  margin: 0 calc(var(--space-5) * -1);\n  padding: var(--space-6) var(--space-5);\n  background: var(--fill-bar-alt);\n}\n.ds-nav__art .ds-shape {\n  position: relative;\n}\n\n/* main column: blocks stacked with wide gaps on the open ground */\n.ds-main {\n  position: relative;\n  min-width: 0;\n  padding: var(--space-7) var(--space-gutter) var(--space-8);\n}\n.ds-view--home {\n  position: relative;\n}\n.ds-view > .ds-shape--far {\n  top: calc(var(--space-6) * -1);\n  right: calc(var(--space-gutter) * -0.7);\n  z-index: 2;\n}\n.ds-block {\n  position: relative;\n  max-width: var(--size-content);\n  margin: 0 0 var(--space-8);\n}\n.ds-block:last-child {\n  margin-bottom: 0;\n}\n.ds-block--overlay {\n  padding: var(--space-7) var(--space-5);\n  background: var(--color-overlay);\n  border-radius: var(--radius-page);\n}\n.ds-block__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  margin: 0 0 var(--space-6);\n}\n.ds-block__title {\n  margin: 0 0 var(--space-2);\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  color: var(--color-heading);\n}\n.ds-block__label {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-stack {\n  display: grid;\n  gap: var(--space-5);\n  align-content: start;\n  min-width: 0;\n}\n.ds-stack--wide {\n  gap: var(--space-7);\n}\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) var(--size-sidebar);\n  gap: var(--space-7);\n  align-items: start;\n}\n.ds-split--even {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n\n/* hero: a poster in three overlapping pieces. A tall field of pattern runs off the top and the right of the page,\n   a flat block with the words lies across its left edge, the figures stand on its foot */\n.ds-hero {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  max-width: var(--size-content);\n  margin: 0 0 var(--space-8);\n  color: var(--color-text);\n}\n.ds-hero__body {\n  position: relative;\n  z-index: 1;\n  grid-column: 1 / span 7;\n  grid-row: 1;\n  display: grid;\n  gap: var(--space-5);\n  align-self: center;\n  justify-items: start;\n  margin: var(--space-8) 0 var(--space-9);\n  padding: var(--space-7);\n  background: var(--fill-panel);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-display) * 0.8);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-hero__mark {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  border-radius: var(--radius-panel);\n  transform: rotate(2deg);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: 0;\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-hero__art {\n  position: relative;\n  grid-column: 6 / -1;\n  grid-row: 1;\n  min-height: calc(var(--size-shape) * 6.5);\n  margin: calc(var(--space-7) * -1) calc(var(--space-gutter) * -1) 0 0;\n  overflow: visible;\n  border-radius: var(--radius-page);\n}\n.ds-hero .ds-hero__art .ds-shape {\n  position: absolute;\n}\n.ds-hero__art .ds-shape:nth-child(1) {\n  top: 6%;\n  left: 30%;\n}\n.ds-hero__art .ds-shape:nth-child(2) {\n  right: 8%;\n  bottom: 0;\n}\n.ds-hero__art .ds-shape:nth-child(3) {\n  top: 8%;\n  right: 10%;\n}\n.ds-hero__art .ds-shape:nth-child(4) {\n  bottom: 22%;\n  left: -8%;\n}\n.ds-hero__art .ds-shape:nth-child(5) {\n  top: 44%;\n  left: 40%;\n}\n.ds-hero__art .ds-shape:nth-child(6) {\n  bottom: 34%;\n  right: 6%;\n}\n\n/* stats: three colour blocks of unequal size that touch, standing on the foot of the pattern field */\n.ds-stat {\n  position: relative;\n  z-index: 2;\n  grid-column: 4 / -1;\n  grid-row: 2;\n  display: grid;\n  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);\n  align-items: end;\n  margin: calc(var(--space-9) * -1) 0 0;\n}\n.ds-stat__cell {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  padding: var(--space-7) var(--space-5) var(--space-4);\n  color: var(--color-accent-text);\n  background: var(--color-fill-1);\n}\n.ds-stat__cell:nth-child(2) {\n  padding-top: var(--space-4);\n  background: var(--color-fill-2);\n}\n.ds-stat__cell:nth-child(3) {\n  padding-top: var(--space-8);\n  background: var(--color-fill-4);\n  border-radius: var(--radius-page);\n}\n.ds-stat__value {\n  order: -1;\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}\n.ds-stat__label {\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n\n/* page header: the head of an inner page; plain on the page, closed by a squiggle */\n.ds-page-header {\n  position: relative;\n  max-width: var(--size-content);\n  margin: 0 0 var(--space-7);\n}\n.ds-page-header__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-4);\n}\n.ds-page-header__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-page-header__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n.ds-page-header > .ds-shape {\n  top: calc(var(--space-6) * -1);\n  right: 0;\n  width: calc(var(--size-shape) * 0.6);\n}\n\n/* grid: case studies. Uneven tiles: a tall patterned cover cut as a block, an arch or a quarter, and a flat caption laid over its lower corner */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--space-7) var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__cell {\n  grid-column: span 7;\n  display: flex;\n  flex-direction: column;\n  color: var(--color-text);\n}\n.ds-grid__cell:nth-child(4n + 2),\n.ds-grid__cell:nth-child(4n + 3) {\n  grid-column: span 5;\n}\n.ds-grid__cell .ds-cover {\n  gap: var(--space-4);\n  border-radius: var(--radius-page);\n}\n.ds-grid__cell:nth-child(4n + 2) .ds-cover {\n  border-radius: 50% 50% 0 0 / 70% 70% 0 0;\n}\n.ds-grid__cell:nth-child(4n + 3) .ds-cover {\n  border-radius: 100% 0 0 0;\n}\n.ds-grid__body {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  position: relative;\n  z-index: 1;\n  margin: calc(var(--space-7) * -1) var(--space-7) 0 calc(var(--space-5) * -1);\n  padding: var(--space-4) var(--space-5);\n  background: var(--fill-panel);\n}\n.ds-grid__cell:nth-child(even) .ds-grid__body {\n  margin-right: calc(var(--space-5) * -1);\n  margin-left: var(--space-7);\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-grid__text {\n  flex: 0 0 100%;\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n\n/* list: journal rows on the open page, each led by a date tile cut as a block or a disc, divided by hairlines */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-4) 0;\n}\n.ds-list__item + .ds-list__item {\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__date {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-control) * 1.4);\n  height: calc(var(--size-control) * 1.4);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.1;\n  text-transform: var(--ui-transform);\n  color: var(--color-accent-text);\n  background: var(--color-fill-3);\n  border-radius: var(--radius-panel);\n  transform: rotate(-5deg);\n}\n.ds-list__item:nth-child(3n + 2) .ds-list__date {\n  background: var(--color-fill-1);\n  border-radius: 50%;\n  transform: rotate(4deg);\n}\n.ds-list__item:nth-child(3n) .ds-list__date {\n  background: var(--color-fill-4);\n  transform: rotate(3deg);\n}\n.ds-list__day {\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-display);\n  line-height: 1;\n}\n.ds-list__main {\n  flex: 1;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.25;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-list__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-list__meta {\n  flex: none;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* panel */\n.ds-panel {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-panel__title {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-4) var(--space-5) 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-panel__title::before {\n  content: \"\";\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  background: var(--fill-accent);\n  border-radius: 50%;\n}\n.ds-panel__body {\n  display: grid;\n  gap: var(--space-3);\n  justify-items: start;\n  padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-panel__body > * {\n  margin: 0;\n}\n.ds-panel__body > .ds-form,\n.ds-panel__body > .ds-progress,\n.ds-panel__body > .ds-progress__legend {\n  width: 100%;\n}\n.ds-panel--tint {\n  background: var(--color-surface-strong);\n}\n.ds-figure {\n  margin: 0;\n  border-radius: var(--radius-page);\n  overflow: hidden;\n}\n.ds-figure .ds-cover {\n  min-height: calc(var(--size-art) * 1.3);\n  gap: var(--space-5);\n}\n.ds-figure__caption {\n  padding: var(--space-3) var(--space-5);\n  font-size: var(--text-small);\n  line-height: 1.5;\n  color: var(--color-text);\n  background: var(--fill-panel);\n}\n\n/* sidebar */\n.ds-sidebar {\n  padding: var(--space-5);\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n}\n\n/* footer: a field of pattern at the foot of the main column, the columns on a flat inverted block laid over it */\n.ds-footer {\n  position: relative;\n  grid-column: 2;\n  margin: 0 var(--space-gutter) var(--space-7);\n  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-9);\n  max-width: var(--size-content);\n  overflow: hidden;\n  color: var(--color-inverse-text);\n  background: var(--fill-inverse);\n  border-radius: var(--radius-page);\n}\n.ds-footer__inner {\n  position: relative;\n  z-index: 1;\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  gap: var(--space-6);\n  padding: var(--space-6);\n  background: var(--color-inverse);\n}\n.ds-footer__brand {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-footer__text {\n  max-width: 34ch;\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.5;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.5;\n  text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  font-size: var(--text-small);\n  line-height: 1.45;\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: underline wavy;\n  text-underline-offset: var(--space-1);\n}\n.ds-footer__legal {\n  position: relative;\n  z-index: 1;\n  margin: 0;\n  padding: 0 var(--space-6) var(--space-5);\n  background: var(--color-inverse);\n  font-size: var(--text-small);\n  line-height: 1.45;\n}\n\n/* ornaments: shapes that float free of the layout; they paint with currentColor */\n.ds-shape {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  width: var(--size-shape);\n  aspect-ratio: 1;\n  color: var(--color-fill-1);\n  pointer-events: none;\n}\n.ds-shape--disc {\n  background: currentColor;\n  border-radius: 50%;\n}\n.ds-shape--ring {\n  background: radial-gradient(closest-side, transparent 56%, currentColor 58% 98%, transparent 100%);\n}\n.ds-shape--hoop {\n  background: radial-gradient(closest-side, transparent 84%, currentColor 86% 98%, transparent 100%);\n}\n.ds-shape--half {\n  aspect-ratio: 2 / 1;\n  background: currentColor;\n  border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n}\n.ds-shape--quarter {\n  background: currentColor;\n  border-radius: 100% 0 0 0;\n}\n.ds-shape--tri {\n  background: currentColor;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n.ds-shape--block {\n  background: currentColor;\n  border-radius: var(--radius-panel);\n}\n.ds-shape--dots {\n  background: radial-gradient(currentColor 30%, transparent 34%) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--grid {\n  background:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke)) 0 0 / var(--size-dot) var(--size-dot);\n}\n.ds-shape--bars {\n  aspect-ratio: 3 / 2;\n  background: repeating-linear-gradient(currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3.5));\n}\n.ds-shape--stripes {\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n  border-radius: 50%;\n}\n.ds-shape--line {\n  width: calc(var(--size-shape) * 1.6);\n  aspect-ratio: 5 / 1;\n}\n.ds-shape svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-shape svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.5);\n}\n.ds-shape--draw {\n  background: none;\n}\n.ds-shape--c5 {\n  color: var(--color-shadow);\n}\n.ds-shape--paper {\n  color: var(--color-surface);\n}\n.ds-shape--c1 {\n  color: var(--color-fill-1);\n}\n.ds-shape--c2 {\n  color: var(--color-fill-2);\n}\n.ds-shape--c3 {\n  color: var(--color-fill-3);\n}\n.ds-shape--c4 {\n  color: var(--color-fill-4);\n}\n.ds-shape--ink {\n  color: var(--color-border-strong);\n}\n.ds-shape--s {\n  width: calc(var(--size-shape) * 0.5);\n}\n.ds-shape--l {\n  width: calc(var(--size-shape) * 2);\n}\n.ds-shape--xl {\n  width: calc(var(--size-shape) * 3);\n}\n.ds-shape--xxl {\n  width: calc(var(--size-shape) * 4.5);\n}\n.ds-shape--flip {\n  transform: rotate(180deg);\n}\n.ds-shape--side {\n  transform: rotate(90deg);\n}\n.ds-shape--tilt {\n  transform: rotate(-14deg);\n}\n.ds-shape--turn {\n  transform: rotate(28deg);\n}\n.ds-shape--tl {\n  top: var(--space-5);\n  left: var(--space-5);\n}\n.ds-shape--tr {\n  top: var(--space-5);\n  right: var(--space-5);\n}\n\n/* covers and pattern grounds: a flat fill with a pattern drawn in a second, clashing fill.\n   Text never sits straight on one: it goes on a flat block laid over the pattern */\n.ds-cover {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  overflow: hidden;\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--1 {\n  background-color: var(--color-fill-1);\n  color: var(--color-fill-2);\n}\n.ds-cover--2 {\n  background-color: var(--color-fill-2);\n  color: var(--color-fill-3);\n}\n.ds-cover--3 {\n  background-color: var(--color-fill-3);\n  color: var(--color-fill-4);\n}\n.ds-cover--4 {\n  background-color: var(--color-fill-4);\n  color: var(--color-fill-1);\n}\n.ds-cover--5 {\n  background-color: var(--color-surface-strong);\n  color: var(--color-accent);\n}\n.ds-cover--6 {\n  background-color: var(--color-inverse);\n  color: var(--color-fill-1);\n}\n.ds-cover--dots {\n  background-image: radial-gradient(currentColor 28%, transparent 31%);\n  background-size: var(--size-dot) var(--size-dot);\n}\n.ds-cover--stripes {\n  background-image: repeating-linear-gradient(-45deg, currentColor 0 calc(var(--size-stroke) * 1.5), transparent calc(var(--size-stroke) * 1.5) var(--size-dot));\n}\n.ds-cover--grid {\n  background-image:\n    linear-gradient(currentColor var(--size-stroke), transparent var(--size-stroke)),\n    linear-gradient(90deg, currentColor var(--size-stroke), transparent var(--size-stroke));\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--zig {\n  background-image:\n    linear-gradient(135deg, currentColor 25%, transparent 25%),\n    linear-gradient(225deg, currentColor 25%, transparent 25%);\n  background-size: calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--terrazzo {\n  background-image:\n    radial-gradient(ellipse 10% 6% at 18% 24%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 11% at 72% 16%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 9% 9% at 46% 58%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 12% 5% at 84% 70%, currentColor 96%, transparent),\n    radial-gradient(ellipse 5% 8% at 14% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 6% 4% at 56% 92%, var(--color-surface) 96%, transparent);\n  background-size: calc(var(--size-dot) * 7) calc(var(--size-dot) * 6);\n}\n.ds-cover--dash {\n  background-image:\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent),\n    radial-gradient(ellipse 34% 10% at 50% 50%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 2) calc(var(--size-dot) * 1.5);\n  background-position: 0 0, var(--size-dot) calc(var(--size-dot) * 0.75);\n}\n.ds-cover--rings {\n  background-image:\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%),\n    radial-gradient(closest-side, transparent 50%, currentColor 54% 80%, transparent 84%);\n  background-size: calc(var(--size-dot) * 3) calc(var(--size-dot) * 3);\n  background-position: 0 0, calc(var(--size-dot) * 1.5) calc(var(--size-dot) * 1.5);\n}\n.ds-cover--confetti {\n  background-image:\n    radial-gradient(ellipse 4% 4% at 12% 16%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 44% 10%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 2% 9% at 80% 22%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 5% 5% at 66% 52%, var(--color-shadow) 96%, transparent),\n    radial-gradient(ellipse 2% 8% at 26% 48%, currentColor 96%, transparent),\n    radial-gradient(ellipse 9% 2% at 16% 82%, var(--color-border-strong) 96%, transparent),\n    radial-gradient(ellipse 3% 3% at 50% 78%, var(--color-surface) 96%, transparent),\n    radial-gradient(ellipse 8% 2% at 84% 86%, currentColor 96%, transparent);\n  background-size: calc(var(--size-dot) * 8) calc(var(--size-dot) * 8);\n}\n.ds-cover--ground {\n  position: absolute;\n  z-index: 0;\n  display: block;\n  min-height: 0;\n}\n.ds-cover .ds-shape {\n  position: relative;\n  flex: none;\n}\n.ds-cover__chip {\n  position: absolute;\n  left: var(--space-3);\n  bottom: var(--space-3);\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-pill);\n}\n\n/* brand */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-logo);\n  height: var(--size-logo);\n  padding: var(--space-1);\n  color: var(--color-button-text);\n  background: var(--fill-button);\n  border-radius: var(--radius-control);\n  transform: rotate(-8deg);\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-h3);\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\n/* typography */\n.ds-prose {\n  max-width: 66ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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  margin: 0 0 var(--space-5);\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin: var(--space-6) 0 var(--space-3);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n  color: var(--color-heading-alt);\n  font-weight: var(--weight-bold);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-prose a {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: var(--space-1);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  text-decoration-thickness: var(--space-nudge);\n  text-underline-offset: var(--space-1);\n}\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--plain {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link--plain:visited {\n  color: inherit;\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n  text-decoration-style: wavy;\n}\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n  color: inherit;\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  outline-offset: var(--space-nudge);\n}\n.ds-links {\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\n/* buttons: one flat block of colour, no outline and nothing behind it; hover swaps the fill and tilts the block */\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  margin: 0;\n  padding: 0 var(--space-5);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\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  color: var(--color-button-text);\n  background: var(--fill-button);\n  border: 0;\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-button--secondary {\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  transition: var(--transition), background-color 0s;\n}\n.ds-button--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button--large {\n  min-height: var(--size-control-large);\n  padding: 0 var(--space-6);\n  font-size: var(--text-large);\n}\n.ds-button--small {\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  color: var(--color-button-hover-text);\n  background: var(--fill-button-hover);\n  transform: rotate(-2deg);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-button:active,\n.ds-button.is-active {\n  transform: translateY(var(--space-nudge)) rotate(1deg);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n  transform: none;\n  cursor: not-allowed;\n}\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* badge: a small flat tag */\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  vertical-align: middle;\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  border-radius: var(--radius-pill);\n}\n.ds-badge--alt {\n  background: var(--color-accent-alt);\n}\n.ds-badge--plain {\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n}\n.ds-badge--success {\n  background: var(--color-success);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n}\n.ds-badge--danger {\n  color: var(--color-surface);\n  background: var(--color-danger);\n}\n.ds-badge--tilt {\n  transform: rotate(-4deg);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: grid;\n  gap: var(--space-2);\n  align-content: start;\n}\n.ds-form__label {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-form__control {\n  width: 100%;\n  min-height: var(--size-control);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\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  color: var(--color-input-text);\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-form__control--area {\n  min-height: calc(var(--size-control) * 2.4);\n  border-radius: var(--radius-panel);\n  resize: vertical;\n}\n.ds-form__control:focus,\n.ds-form__control.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-form__control:disabled,\n.ds-form__control.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n.ds-form__control.is-invalid {\n  background: var(--color-danger-surface);\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  margin: 0;\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-form__checkbox {\n  appearance: none;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  background: var(--fill-input);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-panel);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n  background:\n    linear-gradient(var(--color-accent-text), var(--color-accent-text)) center / 44% 44% no-repeat,\n    var(--fill-accent);\n}\n.ds-form__checkbox:focus-visible,\n.ds-form__checkbox.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* switch: a flat track with a flat thumb; on is the accent fill */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  cursor: pointer;\n}\n.ds-switch--end {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n.ds-switch__input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  position: relative;\n  flex: none;\n  width: calc(var(--size-thumb) * 2 + var(--space-nudge) * 2);\n  height: calc(var(--size-thumb) + var(--space-nudge) * 2);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__track::before {\n  content: \"\";\n  position: absolute;\n  top: var(--space-nudge);\n  left: var(--space-nudge);\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  background: var(--color-button-secondary);\n  border-radius: var(--radius-pill);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n  background: var(--fill-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::before,\n.ds-switch.is-on .ds-switch__track::before {\n  left: auto;\n  right: var(--space-nudge);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n.ds-switch__label {\n  min-width: 0;\n}\n.ds-switch__hint {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* table */\n.ds-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  color: var(--color-text);\n  background: var(--color-surface);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-4);\n  text-align: left;\n  vertical-align: middle;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n  color: var(--color-bar-text);\n  background: var(--color-bar);\n  border-bottom: 0;\n}\n.ds-table tbody tr:nth-child(even) td {\n  background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr.is-current td {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n  color: var(--color-text-muted);\n}\n\n/* tabs: a row of flat chips; the current one takes the accent fill and tilts */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-4);\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  white-space: nowrap;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-control);\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-alt);\n  transform: rotate(-2deg);\n}\n.ds-tabs__tab.is-current {\n  font-weight: var(--weight-bold);\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-3deg);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--space-nudge);\n}\n\n/* notice: a flat block with a striped end */\n.ds-notice {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-6) + var(--space-3));\n  color: var(--color-notice-text);\n  background: var(--color-notice);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-notice::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-6);\n  background: repeating-linear-gradient(-45deg, currentColor 0 var(--size-stroke), transparent var(--size-stroke) calc(var(--size-stroke) * 3));\n}\n.ds-notice__title {\n  flex: none;\n  font-family: var(--font-ui);\n  font-weight: var(--weight-bold);\n  text-transform: var(--ui-transform);\n}\n.ds-notice__text {\n  flex: 1 1 24ch;\n  margin: 0;\n}\n.ds-notice--error {\n  color: var(--color-text);\n  background: var(--color-danger-surface);\n}\n.ds-notice--error::before {\n  color: var(--color-danger);\n}\n\n/* pagination: flat counters; the current one takes the accent fill and tilts */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control-small);\n  min-height: var(--size-control-small);\n  padding: 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--color-accent-alt);\n  transform: rotate(-3deg);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(6deg);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n  background: var(--color-disabled);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\";\n  width: var(--space-2);\n  height: var(--space-2);\n  background: var(--fill-accent);\n  border-radius: 50%;\n}\n.ds-breadcrumb__item.is-current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog */\n.ds-dialog {\n  position: relative;\n  z-index: 1;\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\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-3) var(--space-4);\n  background: var(--color-surface-strong);\n}\n.ds-dialog__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  padding: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n}\n.ds-dialog__body {\n  padding: var(--space-5) var(--space-4);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-4);\n  padding: 0 var(--space-4) var(--space-5);\n}\n\n/* empty state: a quiet flat block with a small cluster of shapes */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  text-align: center;\n  color: var(--color-text);\n  background: var(--color-surface-alt);\n  border-radius: var(--radius-panel);\n}\n.ds-empty__art {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-2);\n}\n.ds-empty__art .ds-shape {\n  position: relative;\n}\n.ds-empty__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  color: var(--color-heading);\n}\n.ds-empty__text {\n  max-width: 40ch;\n  margin: 0 0 var(--space-2);\n}\n\n/* menu: a drop-down under a navigation item */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle {\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu__toggle svg {\n  flex: none;\n  width: var(--space-3);\n  height: var(--space-3);\n}\n.ds-menu[open] .ds-menu__toggle svg {\n  transform: rotate(180deg);\n}\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--space-3));\n  left: 0;\n  z-index: 8;\n  display: grid;\n  min-width: 24ch;\n  margin: 0;\n  padding: var(--space-2);\n  list-style: none;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-1deg);\n}\n.ds-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1.4;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-panel);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n}\n.ds-menu__note {\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.75;\n}\n\n/* tooltip */\n.ds-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 0;\n  z-index: 9;\n  padding: var(--space-1) var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.5;\n  text-transform: none;\n  white-space: nowrap;\n  color: var(--color-inverse-text);\n  background: var(--color-inverse);\n  border-radius: var(--radius-panel);\n  transform: rotate(-2deg);\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  display: block;\n}\n\n/* accordion */\n.ds-accordion {\n  display: grid;\n  gap: var(--space-3);\n}\n.ds-accordion__item {\n  color: var(--color-text);\n  background: var(--fill-panel);\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--size-control);\n  padding: var(--space-2) var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  list-style: none;\n  cursor: pointer;\n  color: var(--color-heading);\n  background: var(--color-surface-alt);\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__item[open] .ds-accordion__head {\n  background: var(--color-surface-strong);\n}\n.ds-accordion__sign {\n  position: relative;\n  flex: none;\n  width: var(--size-check);\n  height: var(--size-check);\n  background: var(--fill-accent);\n  border-radius: 50%;\n  transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__sign {\n  background: var(--color-accent-alt);\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-accordion__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* progress: a flat track, the done part striped over the accent */\n.ds-progress {\n  display: block;\n  height: var(--size-track);\n  background: var(--color-disabled);\n  border-radius: var(--radius-pill);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  background:\n    repeating-linear-gradient(-45deg, transparent 0 var(--space-2), color-mix(in srgb, var(--color-accent-text) 28%, transparent) var(--space-2) calc(var(--space-2) + var(--size-stroke))),\n    var(--fill-accent);\n}\n.ds-progress--alt .ds-progress__bar {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 32%, transparent) 26%, transparent 30%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-accent-alt);\n}\n.ds-progress--0 .ds-progress__bar {\n  width: 0;\n}\n.ds-progress--25 .ds-progress__bar {\n  width: 25%;\n}\n.ds-progress--40 .ds-progress__bar {\n  width: 40%;\n}\n.ds-progress__legend {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n}\n\n/* avatar: a face or initials on a patterned tile */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  color: inherit;\n  text-decoration: none;\n}\n.ds-avatar__pic {\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  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  color: var(--color-accent-text);\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n  border-radius: var(--radius-control);\n}\n.ds-avatar--1 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-1);\n}\n.ds-avatar--2 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-2);\n}\n.ds-avatar--3 .ds-avatar__pic {\n  background:\n    radial-gradient(color-mix(in srgb, var(--color-accent-text) 22%, transparent) 24%, transparent 28%) 0 0 / var(--space-2) var(--space-2),\n    var(--color-fill-3);\n}\n.ds-avatar--4 .ds-avatar__pic {\n  background:\n    repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent-text) 18%, transparent) 0 var(--space-nudge), transparent var(--space-nudge) var(--space-2)),\n    var(--color-fill-4);\n}\n.ds-avatar--large .ds-avatar__pic {\n  width: calc(var(--size-avatar) * 1.75);\n  height: calc(var(--size-avatar) * 1.75);\n}\n.ds-avatar__pic svg {\n  display: block;\n  width: 70%;\n  height: 70%;\n}\n.ds-avatar__text {\n  min-width: 0;\n}\n.ds-avatar__name {\n  display: block;\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n}\n.ds-avatar__meta {\n  display: block;\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n\n/* carousel: one slide shows; the dots are a disc, a diamond and a square */\n.ds-carousel {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n  color: var(--color-text);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-panel);\n}\n.ds-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  margin: 0;\n  padding: var(--space-5);\n  scroll-snap-align: start;\n}\n.ds-carousel__quote {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.3;\n  color: var(--color-heading);\n}\n.ds-carousel__foot {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n.ds-carousel__arrow {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control-small);\n  height: var(--size-control-small);\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  border: 0;\n  border-radius: var(--radius-pill);\n  transition: var(--transition), background-color 0s;\n}\n.ds-carousel__arrow svg {\n  width: var(--space-4);\n  height: var(--space-4);\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  color: var(--color-accent-text);\n  background: var(--fill-accent);\n  transform: rotate(-6deg);\n}\n.ds-carousel__dots {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-carousel__dot {\n  width: var(--space-3);\n  height: var(--space-3);\n  background: var(--color-border);\n  border-radius: 50%;\n}\n.ds-carousel__dot:nth-child(3n + 2) {\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n.ds-carousel__dot:nth-child(3n) {\n  border-radius: 0;\n}\n.ds-carousel__dot.is-current {\n  background: var(--fill-accent);\n}\n\n/* squiggle: the wavy rule under a section title */\n.ds-squiggle {\n  display: block;\n  width: calc(var(--size-shape) * 1.25);\n  height: var(--space-4);\n  color: var(--color-accent);\n}\n.ds-squiggle svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.ds-squiggle svg path {\n  vector-effect: non-scaling-stroke;\n  stroke-width: calc(var(--size-stroke) * 1.25);\n}\n\n@media (max-width: 1100px) {\n  .ds-split,\n  .ds-split--even {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-main {\n    padding: var(--space-7) var(--space-6) var(--space-8);\n  }\n  .ds-footer {\n    margin: 0 var(--space-6) var(--space-6);\n  }\n}\n\n@media (max-width: 900px) {\n  .ds-page {\n    display: block;\n  }\n  .ds-nav {\n    position: relative;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-3) var(--space-4);\n    min-height: 0;\n    padding: var(--space-3) var(--space-4);\n  }\n  .ds-nav__bar {\n    order: 3;\n    flex: 0 0 100%;\n  }\n  .ds-nav__links {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-1);\n  }\n  .ds-nav__link {\n    padding: 0 var(--space-3);\n    font-size: var(--text-base);\n  }\n  .ds-nav .ds-menu__list {\n    top: calc(100% + var(--space-3));\n    left: 0;\n    min-width: 0;\n    width: 26ch;\n    max-width: 80vw;\n  }\n  .ds-nav__strip,\n  .ds-nav__search,\n  .ds-nav__faces,\n  .ds-nav__art {\n    display: none;\n  }\n  .ds-nav__foot {\n    margin-top: 0;\n  }\n  .ds-view > .ds-shape,\n  .ds-page-header > .ds-shape,\n  .ds-block > .ds-shape,\n  .ds-footer > .ds-shape {\n    display: none;\n  }\n  .ds-hero {\n    display: block;\n  }\n  .ds-hero__art {\n    min-height: calc(var(--size-shape) * 3);\n    margin: calc(var(--space-6) * -1) 0 0 var(--space-5);\n  }\n  .ds-hero__body {\n    margin: 0 var(--space-5) 0 0;\n  }\n  .ds-stat {\n    margin: 0;\n  }\n  .ds-grid__cell .ds-grid__body,\n  .ds-grid__cell:nth-child(even) .ds-grid__body {\n    margin-right: var(--space-5);\n    margin-left: 0;\n  }\n  .ds-footer {\n    padding: var(--space-6) var(--space-4);\n  }\n  .ds-hero__art .ds-shape {\n    width: calc(var(--size-shape) * 0.8);\n  }\n  .ds-hero__art .ds-shape--l,\n  .ds-hero__art .ds-shape--xl {\n    width: calc(var(--size-shape) * 1.3);\n  }\n  .ds-hero__art .ds-shape--s {\n    width: calc(var(--size-shape) * 0.4);\n  }\n  .ds-grid__cell,\n  .ds-grid__cell:nth-child(4n + 2),\n  .ds-grid__cell:nth-child(4n + 3) {\n    grid-column: 1 / -1;\n  }\n  .ds-footer__inner {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n@media (max-width: 600px) {\n  .ds-main {\n    padding: var(--space-6) var(--space-4) var(--space-7);\n  }\n  .ds-block,\n  .ds-hero {\n    margin-bottom: var(--space-7);\n  }\n  .ds-hero__body {\n    padding: var(--space-5);\n  }\n  .ds-hero__title {\n    font-size: calc(var(--text-display) * 0.46);\n  }\n  .ds-hero__actions,\n  .ds-hero__actions .ds-button {\n    width: 100%;\n  }\n  .ds-stat {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat__cell,\n  .ds-stat__cell:nth-child(2),\n  .ds-stat__cell:nth-child(3) {\n    padding: var(--space-3) var(--space-5);\n  }\n  .ds-page-header__title,\n  .ds-prose h1 {\n    font-size: var(--text-h2);\n  }\n  .ds-block__title,\n  .ds-prose h2 {\n    font-size: calc(var(--text-h2) * 0.8);\n  }\n  .ds-grid {\n    gap: var(--space-6);\n  }\n  .ds-grid__cell .ds-cover {\n    min-height: calc(var(--size-art) * 0.7);\n  }\n  .ds-grid__cell .ds-cover .ds-shape--l {\n    width: var(--size-shape);\n  }\n  .ds-figure .ds-cover {\n    min-height: var(--size-art);\n  }\n  .ds-figure .ds-cover .ds-shape--l,\n  .ds-figure .ds-cover .ds-shape--xl {\n    width: var(--size-shape);\n  }\n  .ds-list__item {\n    flex-wrap: wrap;\n    gap: var(--space-2) var(--space-4);\n  }\n  .ds-list__main {\n    flex: 1 1 60%;\n  }\n  .ds-list__meta {\n    flex: 0 0 100%;\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-button {\n    white-space: normal;\n  }\n  .ds-table {\n    font-size: var(--text-small);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-2);\n  }\n  .ds-table .ds-table__extra {\n    display: none;\n  }\n  .ds-block--overlay {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-footer {\n    margin: 0 var(--space-4) var(--space-5);\n    padding: var(--space-5);\n  }\n  .ds-footer__brand {\n    font-size: var(--text-h2);\n  }\n}\n\n/* the Studio menu sits beside the list, so the list can scroll on a phone */\n.ds-nav__bar {\n  display: grid;\n  gap: var(--space-2);\n  justify-items: start;\n}\n@media (max-width: 900px) {\n  .ds-nav__bar {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n  }\n}\n/* phone navigation: one strip of blocks that scrolls from edge to edge */\n@media (max-width: 600px) {\n  .ds-nav__bar {\n    min-width: 0;\n  }\n  .ds-nav__links {\n    flex: 1 1 0;\n    flex-wrap: nowrap;\n    min-width: 0;\n    margin-left: calc(var(--space-4) * -1);\n    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n    overflow-x: auto;\n    scrollbar-width: none;\n    mask-image: linear-gradient(to left, transparent, black var(--space-6));\n  }\n  .ds-nav__links > li {\n    flex: none;\n  }\n  .ds-nav__link {\n    white-space: nowrap;\n  }\n  .ds-nav__bar > .ds-menu {\n    flex: none;\n  }\n  .ds-nav .ds-menu__list {\n    right: 0;\n    left: auto;\n  }\n  .ds-page:has(#journal:target) .ds-nav__links > li:nth-child(3),\n  .ds-page:has(#contact:target) .ds-nav__links > li:nth-child(4) {\n    order: -1;\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: memphis studio specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n    <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M2.8 18q2.3-5.6 4.6 0t4.6 0t4.6 0t4.6 0\" stroke-width=\"2.4\"/><circle cx=\"6.5\" cy=\"7\" r=\"3.4\" fill=\"currentColor\" stroke=\"none\"/><polygon points=\"16.8,3.6 21.2,10.6 12.4,10.6\"/></svg></span>\n    <span class=\"ds-brand__name\">chronoskin</span>\n  </a>\n  <nav class=\"ds-nav__bar\" aria-label=\"Main\">\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Work</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#case\">Case study</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#journal\">Journal</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#contact\">Contact</a></li>\n    </ul>\n    <details class=\"ds-menu\" data-component=\"menu\">\n      <summary class=\"ds-nav__link ds-menu__toggle\">Studio <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></summary>\n      <ul class=\"ds-menu__list\">\n        <li><a class=\"ds-menu__link\" href=\"#contact\">How we work</a></li>\n        <li><a class=\"ds-menu__link\" href=\"#journal\">Studio notes <span class=\"ds-menu__note\">31</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#contact\">Open roles <span class=\"ds-menu__note\">none</span></a></li>\n        <li><a class=\"ds-menu__link\" href=\"#contact\">Press kit</a></li>\n      </ul>\n    </details>\n  </nav>\n  <div class=\"ds-nav__search\">\n    <input class=\"ds-form__control\" type=\"search\" aria-label=\"Search the work\" placeholder=\"Search the work\">\n  </div>\n  <p class=\"ds-nav__strip\">Booking projects for autumn</p>\n  <div class=\"ds-nav__foot\">\n    <div class=\"ds-nav__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c2\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--ink\"></span><span class=\"ds-shape ds-shape--half ds-shape--s ds-shape--c4\"></span></div>\n    <div class=\"ds-nav__faces\">\n      <span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span>\n      <span class=\"ds-avatar ds-avatar--3\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M7 9.5h3M14 9.5h3\"/><circle cx=\"12\" cy=\"15.5\" r=\"2\"/></svg></span></span>\n      <span class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span></span>\n      <span class=\"ds-badge ds-badge--plain\">+3</span>\n    </div>\n    <a class=\"ds-button ds-button--small\" href=\"#contact\">Start a project</a>\n  </div>\n</header>\n\n<main class=\"ds-main\">\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <span class=\"ds-shape ds-shape--ring ds-shape--l ds-shape--c2 ds-shape--far\"></span>\n  <section class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__body\">\n      <span class=\"ds-badge ds-badge--tilt\">Studio of six, since 2016</span>\n      <h1 class=\"ds-hero__title\">Brands that <span class=\"ds-hero__mark\">wave back.</span></h1>\n      <p class=\"ds-hero__lead\">chronoskin is a small studio for identities, packaging and websites. We draw everything by hand first and keep the wobble.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--large\" href=\"#case\">See a case study</a>\n        <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#contact\">Say hello</a>\n      </div>\n    </div>\n    <div class=\"ds-hero__art ds-cover ds-cover--3 ds-cover--dots\" aria-hidden=\"true\">\n      <span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c1\"></span>\n      <span class=\"ds-shape ds-shape--quarter ds-shape--l ds-shape--c2\"></span>\n      <span class=\"ds-shape ds-shape--tri ds-shape--c4 ds-shape--turn\"></span>\n      <span class=\"ds-shape ds-shape--line ds-shape--ink ds-shape--tilt\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n      <span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c4 ds-shape--turn\"></span>\n      <span class=\"ds-shape ds-shape--line ds-shape--ink\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span>\n    </div>\n    <dl class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">identities drawn</dt><dd class=\"ds-stat__value\">84</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">years of wobble</dt><dd class=\"ds-stat__value\">6</dd></div>\n      <div class=\"ds-stat__cell\"><dt class=\"ds-stat__label\">clients who came back</dt><dd class=\"ds-stat__value\">71%</dd></div>\n    </dl>\n  </section>\n\n  <section class=\"ds-block\">\n    <div class=\"ds-block__head\">\n      <div><h2 class=\"ds-block__title\">Recent work</h2><span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span></div>\n      <a class=\"ds-link\" href=\"#case\">All 84 projects</a>\n    </div>\n    <ul class=\"ds-grid\" data-component=\"grid\">\n      <li class=\"ds-grid__cell\">\n        <div class=\"ds-cover ds-cover--1 ds-cover--stripes\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c3\"></span><span class=\"ds-shape ds-shape--tri ds-shape--c4 ds-shape--tilt\"></span><span class=\"ds-shape ds-shape--line ds-shape--ink\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span></div>\n        <div class=\"ds-grid__body\">\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#case\">Pip and Plum, a juice bar</a></h3>\n          <div class=\"ds-badges\"><span class=\"ds-badge ds-badge--plain\">Identity</span><span class=\"ds-badge ds-badge--plain\">Packaging</span></div>\n          <p class=\"ds-grid__text\">Name, identity, cups and a shop front in four colours.</p>\n        </div>\n      </li>\n      <li class=\"ds-grid__cell\">\n        <div class=\"ds-cover ds-cover--2 ds-cover--dots\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c1 ds-shape--tilt\"></span><span class=\"ds-shape ds-shape--block ds-shape--s ds-shape--c4 ds-shape--turn\"></span></div>\n        <div class=\"ds-grid__body\">\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#case\">Loop, a bike repair co-op</a></h3>\n          <div class=\"ds-badges\"><span class=\"ds-badge ds-badge--plain\">Identity</span></div>\n          <p class=\"ds-grid__text\">A wordmark built from spokes.</p>\n        </div>\n      </li>\n      <li class=\"ds-grid__cell\">\n        <div class=\"ds-cover ds-cover--3 ds-cover--terrazzo\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--ring ds-shape--c1\"></span><span class=\"ds-shape ds-shape--quarter ds-shape--c2\"></span></div>\n        <div class=\"ds-grid__body\">\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#case\">Tide, a swimming club</a></h3>\n          <div class=\"ds-badges\"><span class=\"ds-badge ds-badge--plain\">Print</span></div>\n          <p class=\"ds-grid__text\">Posters and caps for a cold-water season.</p>\n        </div>\n      </li>\n      <li class=\"ds-grid__cell\">\n        <div class=\"ds-cover ds-cover--4 ds-cover--zig\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--block ds-shape--c2 ds-shape--tilt\"></span><span class=\"ds-shape ds-shape--disc ds-shape--l ds-shape--c3\"></span><span class=\"ds-shape ds-shape--line ds-shape--ink\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 20 18 4l15 16L48 4l15 16L78 4l15 16 15-16 9 10\"/></svg></span></div>\n        <div class=\"ds-grid__body\">\n          <h3 class=\"ds-grid__title\"><a class=\"ds-link ds-link--quiet\" href=\"#case\">Marmalade, a radio station</a></h3>\n          <div class=\"ds-badges\"><span class=\"ds-badge ds-badge--plain\">Website</span><span class=\"ds-badge ds-badge--plain\">Motion</span></div>\n          <p class=\"ds-grid__text\">A website that changes colour with the programme.</p>\n        </div>\n      </li>\n    </ul>\n  </section>\n\n  <section class=\"ds-block\">\n    <div class=\"ds-split\">\n      <div>\n        <div class=\"ds-block__head\">\n          <div><h2 class=\"ds-block__title\">From the journal</h2><span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span></div>\n          <a class=\"ds-link\" href=\"#journal\">All notes</a>\n        </div>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\"><span class=\"ds-list__day\">14</span>Mar</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Why we keep the wobble</a></h3><p class=\"ds-list__text\">A hand-drawn circle says more than a perfect one. Notes on leaving lines alone.</p></div>\n            <span class=\"ds-list__meta\">6 min</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\"><span class=\"ds-list__day\">02</span>Mar</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Four colours are plenty</a></h3><p class=\"ds-list__text\">How a strict palette made the juice bar louder.</p></div>\n            <span class=\"ds-list__meta\">4 min</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\"><span class=\"ds-list__day\">19</span>Feb</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">A pattern is a logo that repeats</a></h3><p class=\"ds-list__text\">Dots, stripes and what we learned from wrapping paper.</p></div>\n            <span class=\"ds-list__meta\">8 min</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__date\"><span class=\"ds-list__day\">05</span>Feb</span>\n            <div class=\"ds-list__main\"><h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">The studio moves upstairs</a></h3><p class=\"ds-list__text\">More light, the same kettle.</p></div>\n            <span class=\"ds-list__meta\">2 min</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel ds-panel--tint\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">Autumn calendar</h3>\n          <div class=\"ds-panel__body\">\n            <p>We take four projects a season. Two places are left from September.</p>\n            <div class=\"ds-progress__legend\"><span>Booked</span><span>2 of 4</span></div>\n            <span class=\"ds-progress\" data-component=\"progress\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Autumn places booked\"><span class=\"ds-progress__bar\"></span></span>\n            <a class=\"ds-link\" href=\"#contact\">Ask about a place</a>\n          </div>\n        </section>\n        <div class=\"ds-carousel\" data-component=\"carousel\" aria-roledescription=\"carousel\" aria-label=\"Clients say\">\n          <div class=\"ds-carousel__track\">\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">They sent us a logo drawn with a felt pen and we never changed it.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--2\"><span class=\"ds-avatar__pic\">PH</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Petra Halloran</span><span class=\"ds-avatar__meta\">Pip and Plum</span></span></figcaption>\n            </figure>\n            <figure class=\"ds-carousel__slide\">\n              <blockquote class=\"ds-carousel__quote\">Our members now argue about which colour cap is theirs.</blockquote>\n              <figcaption class=\"ds-avatar ds-avatar--4\"><span class=\"ds-avatar__pic\">SO</span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Sami Oyelaran</span><span class=\"ds-avatar__meta\">Tide</span></span></figcaption>\n            </figure>\n          </div>\n          <div class=\"ds-carousel__foot\">\n            <div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Previous\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 3 5 8l5 5\"/></svg></button>\n            <button class=\"ds-carousel__arrow\" type=\"button\" aria-label=\"Next\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 3 5 5-5 5\"/></svg></button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"case\">\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <span class=\"ds-shape ds-shape--tri ds-shape--c2 ds-shape--tr ds-shape--turn\"></span>\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Work</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Identity</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Pip and Plum</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div>\n        <h1 class=\"ds-page-header__title\">Pip and Plum</h1>\n        <p class=\"ds-page-header__lead\">A juice bar that wanted to look like its menu tastes.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">All work</a>\n        <a class=\"ds-button\" href=\"#contact\">Start a project</a>\n      </div>\n    </div>\n    <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n  </header>\n\n  <section class=\"ds-block\">\n    <figure class=\"ds-figure\">\n      <div class=\"ds-cover ds-cover--1 ds-cover--stripes\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--disc ds-shape--xl ds-shape--c3\"></span><span class=\"ds-shape ds-shape--half ds-shape--l ds-shape--c4 ds-shape--tilt\"></span><span class=\"ds-shape ds-shape--tri ds-shape--l ds-shape--c3 ds-shape--turn\"></span><span class=\"ds-shape ds-shape--line ds-shape--ink\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span></div>\n      <figcaption class=\"ds-figure__caption\">The shop front, drawn at one tenth and painted by the owners over a weekend.</figcaption>\n    </figure>\n  </section>\n\n  <section class=\"ds-block\">\n    <div class=\"ds-split\">\n      <div class=\"ds-stack\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\" role=\"tablist\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#case\" role=\"tab\" aria-selected=\"true\">What we made</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#case\" role=\"tab\">Process</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#case\" role=\"tab\">Results</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#case\" role=\"tab\">Credits <span class=\"ds-badge ds-badge--plain\">5</span></a></li>\n        </ul>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Piece</th><th class=\"ds-table__extra\">Made as</th><th>State</th><th class=\"ds-table__num\">Pieces</th></tr>\n          </thead>\n          <tbody>\n            <tr><td><span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-link ds-link--quiet\" href=\"#case\">Wordmark and pip</a><span class=\"ds-tooltip__tip\" role=\"tooltip\">Drawn with a felt pen, traced once</span></span></td><td class=\"ds-table__extra\">Vector drawing</td><td><span class=\"ds-badge ds-badge--success\">Delivered</span></td><td class=\"ds-table__num\">2</td></tr>\n            <tr><td>Cups and lids</td><td class=\"ds-table__extra\">Two-colour print</td><td><span class=\"ds-badge ds-badge--success\">Delivered</span></td><td class=\"ds-table__num\">6</td></tr>\n            <tr><td>Menu boards</td><td class=\"ds-table__extra\">Painted wood</td><td><span class=\"ds-badge ds-badge--warning\">In print</span></td><td class=\"ds-table__num\">4</td></tr>\n            <tr><td>Shop front</td><td class=\"ds-table__extra\">Sign paint</td><td><span class=\"ds-badge ds-badge--success\">Delivered</span></td><td class=\"ds-table__num\">1</td></tr>\n            <tr><td>Delivery bike</td><td class=\"ds-table__extra\">Vinyl wrap</td><td><span class=\"ds-badge ds-badge--danger\">On hold</span></td><td class=\"ds-table__num\">1</td></tr>\n            <tr class=\"is-current\"><td>Everything</td><td class=\"ds-table__extra\"></td><td></td><td class=\"ds-table__num\">14</td></tr>\n          </tbody>\n        </table>\n        <div class=\"ds-badges\" data-component=\"badge\">\n          <span class=\"ds-badge\">Identity</span>\n          <span class=\"ds-badge ds-badge--alt\">New</span>\n          <span class=\"ds-badge ds-badge--plain\">Packaging</span>\n          <span class=\"ds-badge ds-badge--success\">Delivered</span>\n          <span class=\"ds-badge ds-badge--warning\">In print</span>\n          <span class=\"ds-badge ds-badge--danger\">On hold</span>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Project facts</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\">Client <a class=\"ds-link ds-link--quiet\" href=\"#case\">Pip and Plum</a></li>\n            <li class=\"ds-sidebar__item\">Season <span>Spring</span></li>\n            <li class=\"ds-sidebar__item\">Weeks <span>9</span></li>\n            <li class=\"ds-sidebar__item\">Colours <span class=\"ds-badge ds-badge--plain\">4</span></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <h3 class=\"ds-panel__title\">Where the weeks went</h3>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-progress__legend\"><span>Drawing</span><span>40%</span></div>\n            <span class=\"ds-progress ds-progress--40\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Drawing\"><span class=\"ds-progress__bar\"></span></span>\n            <div class=\"ds-progress__legend\"><span>Printing and paint</span><span>25%</span></div>\n            <span class=\"ds-progress ds-progress--25 ds-progress--alt\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Printing and paint\"><span class=\"ds-progress__bar\"></span></span>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"journal\">\n  <header class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--half ds-shape--c4 ds-shape--tr ds-shape--tilt\"></span>\n    <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Work</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Journal</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Why we keep the wobble</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div>\n        <h1 class=\"ds-page-header__title\">Journal</h1>\n        <p class=\"ds-page-header__lead\">Notes from the studio table, one or two a month.</p>\n      </div>\n    </div>\n    <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n  </header>\n\n  <section class=\"ds-block\">\n    <div class=\"ds-split\">\n      <div class=\"ds-stack ds-stack--wide\">\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>Why we keep the wobble</h1>\n          <p class=\"ds-prose__lead\">Every identity we make starts as a drawing on paper. Somewhere between the paper and the screen, most studios tidy the line. We stopped doing that.</p>\n          <h2>A circle is a decision</h2>\n          <p>Draw a circle by hand and it closes a little late, a little flat on one side. That is the part people remember. In our files the layer is called <code>keep-as-drawn</code> and nobody is allowed to smooth it.</p>\n          <ul>\n            <li>Trace once, at the size it was drawn</li>\n            <li>Fix what is unclear, never what is uneven</li>\n            <li>Print it small before anyone approves it</li>\n          </ul>\n          <h3>When we do tidy</h3>\n          <p>Signs that are read from a moving tram, and anything <strong>smaller than a thumbnail</strong>. Everything else waves back.</p>\n        </article>\n        <div class=\"ds-row\">\n          <span class=\"ds-avatar ds-avatar--large ds-avatar--2\"><span class=\"ds-avatar__pic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><circle cx=\"8.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"15.5\" cy=\"9.5\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5c2.6 2.8 6.4 2.8 9 0\"/></svg></span><span class=\"ds-avatar__text\"><span class=\"ds-avatar__name\">Rosa Kiviniemi</span><span class=\"ds-avatar__meta\">draws the first line, 14 March</span></span></span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\" aria-label=\"Parts of this note\">\n            <li><a class=\"ds-pagination__link\" href=\"#journal\">Previous</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#journal\" aria-current=\"page\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#journal\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#journal\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#journal\">Next</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Topics</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Process</a><span class=\"ds-badge\">12</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Colour</a><span class=\"ds-badge ds-badge--plain\">8</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Pattern</a><span class=\"ds-badge ds-badge--plain\">7</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#journal\">Studio life</a><span class=\"ds-badge ds-badge--plain\">4</span></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <h3 class=\"ds-panel__title\">Read next</h3>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-links\" data-component=\"links\">\n              <li><a class=\"ds-link\" href=\"#journal\">Four colours are plenty</a></li>\n              <li><a class=\"ds-link is-visited\" href=\"#journal\">A pattern is a logo that repeats</a></li>\n              <li><a class=\"ds-link is-hover\" href=\"#case\">The juice bar case study</a></li>\n              <li><a class=\"ds-link is-active\" href=\"#home\">Back to the work</a></li>\n            </ul>\n          </div>\n        </section>\n      </div>\n    </div>\n  </section>\n</section>\n\n<section class=\"ds-view\" id=\"contact\">\n  <header class=\"ds-page-header\">\n    <span class=\"ds-shape ds-shape--disc ds-shape--c3 ds-shape--tr\"></span>\n    <ol class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Work</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#contact\">Studio</a></li>\n      <li class=\"ds-breadcrumb__item is-current\" aria-current=\"page\">Say hello</li>\n    </ol>\n    <div class=\"ds-page-header__row\">\n      <div>\n        <h1 class=\"ds-page-header__title\">Say hello</h1>\n        <p class=\"ds-page-header__lead\">Tell us what you are making. We answer within two working days.</p>\n      </div>\n    </div>\n    <span class=\"ds-squiggle\" aria-hidden=\"true\"><svg viewBox=\"0 0 120 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12c10-13 20-13 29 0s19 13 28 0 19-13 28 0 19 13 29 0\"/></svg></span>\n  </header>\n\n  <section class=\"ds-block\">\n    <div class=\"ds-split ds-split--even\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Your project</h2>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-name\">Your name</label>\n                <input class=\"ds-form__control\" id=\"c-name\" type=\"text\" value=\"Jonas Lindqvist\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-mail\">Email</label>\n                <input class=\"ds-form__control is-invalid\" id=\"c-mail\" type=\"email\" value=\"jonas@example\" aria-invalid=\"true\" aria-describedby=\"c-mail-err\">\n                <p class=\"ds-form__error\" id=\"c-mail-err\">Enter a full address, such as name@example.org.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"c-kind\">What do you need</label>\n              <select class=\"ds-form__control\" id=\"c-kind\">\n                <option>A new identity</option>\n                <option>Packaging</option>\n                <option>A website</option>\n              </select>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"c-note\">Tell us about it</label>\n              <textarea class=\"ds-form__control ds-form__control--area\" id=\"c-note\">We are opening a second bakery in May and the first one has no sign.</textarea>\n              <p class=\"ds-form__hint\">Three sentences are enough to start.</p>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> We already have a name</label>\n            <label class=\"ds-switch\" data-component=\"switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked><span class=\"ds-switch__track\"></span><span class=\"ds-switch__label\">Send me a copy<span class=\"ds-switch__hint\">To the address above</span></span></label>\n            <div class=\"ds-buttons\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Send it</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Save draft</button>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Discard</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Attach files</button>\n            </div>\n          </form>\n        </div>\n      </section>\n      <div class=\"ds-stack\">\n        <div class=\"ds-stack\" data-component=\"notice\">\n          <div class=\"ds-notice\" role=\"status\">\n            <strong class=\"ds-notice__title\">Autumn</strong>\n            <p class=\"ds-notice__text\">Two places are left from September.</p>\n          </div>\n          <div class=\"ds-notice ds-notice--error\" role=\"alert\">\n            <strong class=\"ds-notice__title\">Not sent</strong>\n            <p class=\"ds-notice__text\">The email address is incomplete. Your draft is saved.</p>\n          </div>\n        </div>\n        <div>\n          <h2 class=\"ds-block__label\">How we work</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item\" open>\n              <summary class=\"ds-accordion__head\">How long does an identity take? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>Eight to ten weeks, with three rounds of drawing.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Do you work with small budgets? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>One project a season is kept for a shop, club or school.</p></div>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__head\">Who owns the drawings? <span class=\"ds-accordion__sign\"></span></summary>\n              <div class=\"ds-accordion__body\"><p>You do, once the last invoice is paid.</p></div>\n            </details>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <div class=\"ds-empty__art\" aria-hidden=\"true\"><span class=\"ds-shape ds-shape--half ds-shape--s ds-shape--c2\"></span><span class=\"ds-shape ds-shape--disc ds-shape--s ds-shape--c1\"></span><span class=\"ds-shape ds-shape--tri ds-shape--s ds-shape--c4\"></span></div>\n          <h3 class=\"ds-empty__title\">No open roles</h3>\n          <p class=\"ds-empty__text\">We are six and the table seats six. Leave a note and we write when that changes.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#journal\">Read the studio notes</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-block ds-block--overlay\">\n    <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n      <div class=\"ds-dialog__bar\">\n        <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Discard this message?</h2>\n        <a class=\"ds-dialog__close\" href=\"#contact\" aria-label=\"Close\">&times;</a>\n      </div>\n      <div class=\"ds-dialog__body\">\n        <p>The draft about the second bakery will be thrown away. This cannot be undone.</p>\n      </div>\n      <div class=\"ds-dialog__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#contact\">Keep writing</a>\n        <button class=\"ds-button ds-button--danger\" type=\"button\">Discard</button>\n      </div>\n    </div>\n  </section>\n</section>\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div>\n      <p class=\"ds-footer__brand\">chronoskin</p>\n      <p class=\"ds-footer__text\">A design studio of six. Placeholder street, placeholder town.</p>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Look</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Work</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#case\">Case study</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#journal\">Journal</a></li>\n      </ul>\n    </div>\n    <div>\n      <p class=\"ds-footer__title\">Talk</p>\n      <ul class=\"ds-footer__list\">\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Say hello</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#contact\">How we work</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#contact\">Open roles</a></li>\n      </ul>\n    </div>\n  </div>\n  <p class=\"ds-footer__legal\">Specimen page. All names and figures are placeholders.</p>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.memphis.blog.s02.p08.t03.u04\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"memphis\",\n    \"years\": [\n      2016,\n      2022\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-me-2834\",\n  \"short\": \"v1-me-2834\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #fff0f5;\n  --color-canvas: #fff0f5;\n  --color-surface: #ffffff;\n  --color-surface-alt: #ffd9e6;\n  --color-surface-strong: #ffb8d2;\n  --color-bar: #ff8fba;\n  --color-bar-text: #3f0a25;\n  --color-bar-alt: #0e7a55;\n  --color-bar-alt-text: #fff0f5;\n  --color-inverse: #3f0a25;\n  --color-inverse-text: #fff0f5;\n  --color-text: #3f0a25;\n  --color-text-muted: #8a4a66;\n  --color-heading: #3f0a25;\n  --color-heading-alt: #c2185b;\n  --color-link: #c2185b;\n  --color-link-quiet: #3f0a25;\n  --color-link-visited: #7a3b8f;\n  --color-link-hover: #0c7d55;\n  --color-link-active: #3f0a25;\n  --color-border: #3f0a25;\n  --color-border-strong: #3f0a25;\n  --color-border-muted: #f2b3ca;\n  --color-accent: #2fd39a;\n  --color-accent-text: #3f0a25;\n  --color-accent-alt: #f0609b;\n  --color-fill-1: #ff8fba;\n  --color-fill-2: #2fd39a;\n  --color-fill-3: #f7a6e4;\n  --color-fill-4: #f0609b;\n  --color-button: #2fd39a;\n  --color-button-text: #3f0a25;\n  --color-button-hover-text: #3f0a25;\n  --color-button-secondary: #3f0a25;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #ffffff;\n  --color-input-text: #3f0a25;\n  --color-input-border: #3f0a25;\n  --color-disabled: #ecd3dc;\n  --color-disabled-text: #8f6878;\n  --color-danger: #b80f2a;\n  --color-danger-surface: #ffe0d9;\n  --color-success: #5fdc8a;\n  --color-warning: #ffb84d;\n  --color-notice: #d3f6e6;\n  --color-notice-text: #3f0a25;\n  --color-focus: #c2185b;\n  --color-shadow: #e8203f;\n  --color-overlay: rgb(63 10 37 / 0.6);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Space Grotesk\", \"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: \"Archivo Black\", \"Arial Black\", \"Helvetica Neue\", Impact, sans-serif;\n  --font-ui: \"Space Mono\", \"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --font-mono: \"Space Mono\", \"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 19px;\n  --text-display: 92px;\n  --text-h1: 52px;\n  --text-h2: 34px;\n  --text-h3: 19px;\n  --line-body: 1.5;\n  --line-heading: 1.02;\n  --line-display: 0.92;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 900;\n  --weight-display: 900;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.01em;\n  --display-tracking: -0.02em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0 0 0 80px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-border-muted) 45%, transparent) 0 2px, transparent 2px 22px), var(--color-page);\n  --fill-bar: linear-gradient(45deg, var(--color-bar-alt) 25%, transparent 25%) 0 100% / 14px 14px repeat-x, linear-gradient(-45deg, var(--color-bar-alt) 25%, transparent 25%) 0 100% / 14px 14px repeat-x, var(--color-bar);\n  --fill-bar-alt: repeating-linear-gradient(90deg, var(--color-accent) 0 8px, transparent 8px 22px, var(--color-fill-2) 22px 26px, transparent 26px 40px), var(--color-bar-alt);\n  --fill-inverse: radial-gradient(ellipse 30% 9% at 50% 50%, var(--color-fill-1) 96%, transparent) 0 0 / 64px 64px, radial-gradient(ellipse 9% 30% at 50% 50%, var(--color-fill-1) 96%, transparent) 0 0 / 64px 64px, radial-gradient(var(--color-shadow) 5px, transparent 5.5px) 32px 32px / 64px 64px, 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-fill-4);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 4px solid var(--color-focus);\n  --transition: transform 0.12s ease-out, background-color 0.12s ease-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}