{
  "id": "v1-sg-4434",
  "long_id": "v1.saas-gradient.blog.s04.p04.t03.u04",
  "name": "SaaS gradient blog and customer stories",
  "era": {
    "slug": "saas-gradient",
    "code": "sg",
    "name": "SaaS gradient",
    "years": [
      2016,
      2021
    ],
    "description": "The start-up product page of 2016 to 2021: slanted or curved bands of purple-to-blue gradient, white rounded cards with soft wide shadows, friendly geometric sans, pill buttons and flat illustration blocks."
  },
  "archetype": "blog",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": false
  },
  "summary": "This is the company blog of a start-up product of 2016 to 2021, where customer stories and posts are told as cards: a plain bar of navigation, then the featured story as one large card of two-colour gradient with a small drawn scene of white cards, and below it a grid of story cards, each under a block of one flat colour with a line icon. Inner pages are quiet: a band in the card colour with a small gradient tile beside the title, an author strip between two hairlines, a pull quote on the gradient and text in a comfortable column beside small cards. It was the usual way for payment, analytics and support products to show who used them around 2018.",
  "url": "https://chrono.skin/s/v1-sg-4434",
  "preview_url": "https://chrono.skin/s/v1-sg-4434/specimen.html",
  "files": {
    "STYLE.md": "# SaaS gradient blog and customer stories\n\n## Summary\n\nThis is the company blog of a start-up product of 2016 to 2021, where customer stories and posts are told as cards: a plain bar of navigation, then the featured story as one large card of two-colour gradient with a small drawn scene of white cards, and below it a grid of story cards, each under a block of one flat colour with a line icon. Inner pages are quiet: a band in the card colour with a small gradient tile beside the title, an author strip between two hairlines, a pull quote on the gradient and text in a comfortable column beside small cards. It was the usual way for payment, analytics and support products to show who used them around 2018.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (1120px) wide with `--space-5` side padding. The navigation bar, the page header and the footer run the full width of the window.\n- Navigation is a solid bar on `--fill-panel`, at least `--size-nav` (72px) tall, over a hairline: the `.ds-brand`, three links whose current one carries a `--border-width-strong` edge along the foot of the bar, then one quiet link and one small primary button at the right. Nothing of the navigation lies on the gradient.\n- The home view stacks inside `.ds-home`: `.ds-hero`, the featured story as a gradient card in two columns (6 to 5); `.ds-stat`, four figures set straight on the page; a `.ds-block__head` with the title at the left and `.ds-tabs` as filter chips at the right; `.ds-grid`, six story cards three across; and a `.ds-block` of `.ds-cols` (2 to 1, `--level`) with the latest posts in a card beside the newsletter `.ds-cta`. Blocks are `--space-7` apart.\n- Inner pages have no hero. They open with `.ds-page-header`: a band in the card colour over a hairline that holds the breadcrumb, then a `.ds-page-header__tile` (a square of gradient with an icon) beside the page title and one line of text, and at most one button at the right. `.ds-main` follows with `.ds-cols` (2 to 1) for an article, `--side` (1 to 3) for the archive with the `.ds-sidebar` at the left and the chips above the list, or `--even` (7 to 5) for a form.\n- Views. The specimen is the blog of a shared inbox product, with four views. `home` is the customer stories page. `story` is one story: author strip, pull quote, the text and a table of results, beside the customer's facts, the features used, a newsletter card, more by the author and related links. `archive` lists all posts under chips, with topics and writers at the left, the pagination in the foot of the card and an empty topic. `subscribe` is the newsletter form with its notices and buttons beside the last issue and the open unsubscribe dialog.\n- Below 960px the hero, the columns and the archive stack and cards stand two across; below 640px the navigation wraps to two rows (the links scroll sideways), the grid is one column, the gradient tile of the page header is dropped and a wide table scrolls inside `.ds-table__wrap`. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, chip padding), `--space-2` 8px (between chips and badges, kicker to title), `--space-3` 12px (avatar to name, button padding), `--space-4` 16px (list rows, author strip, drawn cards), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 32px (column gap, page header padding), `--space-7` 48px (between blocks, hero padding), `--space-8` 80px (foot of a view).\n- Other sizes: `--size-mark` 34px, `--size-icon` 44px (one and a half times that for the icon of a card and the page header tile), `--size-art` 168px (height of a card's colour block), `--size-avatar` 40px, `--size-control` 38px (pagination), `--size-dialog` 460px.\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\nThe conventions are the era's, as its first layout sets them out.\n\n- The gradient is `--fill-inverse` (from `--color-fill-1` to `--color-fill-2`); text on it is `--color-inverse-text`. It fills the band and the `.ds-cta` card. Only `.ds-button--inverse` and `.ds-button--ghost` stand directly on it. The search field is a card on the band (`--fill-input`), so its button is the primary one.\n- `--color-fill-1` to `--color-fill-4` are the round icon tiles of the collections and the empty state's icon. A fill carries an icon in `--color-inverse-text`, never running text.\n- `--color-page` is the warm pale page, `--color-surface` (through `--fill-panel`) the cards, `--color-surface-alt` the dialog foot and the empty state, `--color-surface-strong` the strip of figures, the current sidebar row, the quiet badge and inline code.\n- `--fill-bar` with `--color-bar-text` is the table head. `--fill-bar-alt` with `--color-bar-alt-text` is the footer.\n- Text is `--color-text` (`#46585c`), meta `--color-text-muted`, headings and figures `--color-heading` (`#17262b`); sidebar titles and h3 in prose are `--color-heading-alt`.\n- `--color-button` (violet `#5b4bd6`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, not underlined; only the often-asked links on the band are underlined, because colour cannot mark them there.\n- Badges, notices and the destructive button follow the era's rules: `--fill-accent` for the default badge, tints mixed into `--color-surface` for `--alt` and the status variants, `--color-notice` with `--color-notice-text`, `--color-danger` with `--color-button-text`.\n- Two families: `--font-heading` is a geometric display sans (Poppins, Montserrat, Futura) for titles and figures, `--font-body` and `--font-ui` a humanist sans (Lato, Lucida Grande); `--font-mono` for code. `--text-base` 15px at `--line-body` 1.55; `--text-ui` 13px (controls, card text, navigation); `--text-small` 12px (meta, badges, labels); `--text-large` 18px (leads); `--text-display` 42px (the hero question); `--text-h1` 32px (page titles, figures, article title); `--text-h2` 23px; `--text-h3` 16px (card and list titles).\n- The hero and page titles are bold (`--weight-display` 700); other headings are medium (`--weight-heading` 500). Buttons, tabs and navigation links are uppercase and bold (`--ui-transform`, `--weight-ui` 700); nothing else is uppercase.\n- Surface: tight corners (`--radius-control` and `--radius-panel` 5px, `--radius-pill` 3px for badges, `--radius-page` 8px for collection cards, the strip and the call to action). `--shadow-panel` is a close 3px shadow under a wide 28px one; `--shadow-dialog` is deeper and also lifts the search field and a hovered collection card. The primary button has a faint top-to-bottom gradient of its own colour (`--fill-button`).\n- One-off values made with `calc()` and `color-mix()`: the curve (`ellipse(90% 100% at 50% 0%)`), the hairline before the navigation tag (`--color-inverse-text` at 40%), the ghost button border (55%), tinted badges, the error notice's edge (`--color-danger` at 35%). Opacity 0.75 to 0.9 dims secondary text on the gradient and in the footer.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a tile dressed like the primary button holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the solid bar. `.ds-nav__inner` centres it; `.ds-nav__links` holds `.ds-nav__link`, the current one edged (`is-current`); `.ds-nav__actions` holds a quiet link (`.ds-nav__signin`) and one small primary button. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the featured story, one gradient card per site. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `--inverse`, one `--ghost` button) and a `.ds-byline`. `.ds-hero__art` is a drawn scene: `.ds-hero__ring` circles (`--small`) and two or three `.ds-hero__card` (`--in`, `--out` to stagger them) holding an avatar, a `.ds-hero__grow` label with `.ds-hero__line` bars (`--short`), a badge, a `.ds-hero__figure` or a `.ds-hero__meter` with its `.ds-hero__meter-bar`.\n- `.ds-avatar`: a circle of initials on a fill (`--1`, `--2`, `--4`; `--plain` on the gradient).\n- `.ds-byline`: who wrote it: a `.ds-avatar`, `.ds-byline__name` and `.ds-byline__meta`. `--strip` is the author strip of an article, between two hairlines, with `.ds-byline__who` at the left and tags at the right.\n- `.ds-stat`: the row of four figures; each `.ds-stat__item` has a left edge in one of the fills, a `.ds-stat__figure` and a `.ds-stat__label`.\n- `.ds-home`, `.ds-main`: the body of the home view and of an inner view. `.ds-block` is a further block of the home view; `.ds-block__head` puts a `.ds-block__title` at the left and chips at the right.\n- `.ds-cols`: main and side column, 2 to 1; `--even` 7 to 5, `--side` 1 to 3, `--level` for equal height. `.ds-stack` stacks cards 24px apart.\n- `.ds-tabs`: filter chips: `.ds-tabs__tab` pills with a hairline, the current one (`is-current`) filled with `--fill-button`.\n- `.ds-grid`: story cards, three across. Each `.ds-grid__cell` is a link: `.ds-grid__art` (a block of one fill with a line icon; `--2`, `--3`, `--4`, `--mix` for the gradient) over `.ds-grid__body` with a `.ds-kicker`, `.ds-grid__title`, `.ds-grid__text` and a `.ds-byline`. `is-hover` deepens the shadow.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds the breadcrumb, a `.ds-page-header__row` of the `.ds-page-header__tile`, `.ds-page-header__title` and `.ds-page-header__text`, and `.ds-page-header__actions` at the right.\n- `.ds-cover`: the pull quote of an article on the gradient: `.ds-cover__text` and `.ds-cover__by`.\n- `.ds-facts`: pairs of `.ds-facts__term` and `.ds-facts__value` in `.ds-facts__row`, for a customer's details.\n- `.ds-cta`: the newsletter card on the gradient: `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: 16px medium, nearly square. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table inside a card: a small bold head on `--fill-bar`, hairlines between rows; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the foot of a card for a count and the pagination.\n- `.ds-list`: posts parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the white card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph; `--side` pads a card that holds a sidebar block.\n- `.ds-badge`: pill tag on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is grey.\n- `.ds-notice`: tinted message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` squares; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a card in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-tile`: an icon tile on a fill (`--2`, `--3`, `--4`, `--round`), for small marks inside cards.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__inner` with the brand and a `.ds-footer__about` line at the left and `.ds-footer__links` of `.ds-footer__link` at the right; `.ds-footer__legal` under a rule.\n\n## Never\n\n- `font-weight <= 700`: titles are bold, never black.\n- `font-size >= 12px`: meta, badges and labels are the smallest text.\n- `font-size <= 42px`: the hero question is the largest text.\n- `font-families <= 3`: a display face, a body sans and monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `uppercase-text <= 10%`: only buttons, tabs and navigation links are uppercase.\n- `underlined-links <= 10%`: only the often-asked links on the band are underlined.\n- `text-shadow = none`: text is flat, also on the gradient.\n- `animation = none`: nothing moves by itself; only hover states ease.\n- `border-width <= 3px`: borders are hairlines; 3px marks the current navigation link and the figures.\n- `border-radius <= 6px`: controls and cards are 4px and the largest blocks 6px; only pills and circles are rounder.\n- `box-shadow-blur <= 40px`: shadows are small and close; the deepest ends at 40px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new kind of post is another `.ds-grid__cell` with its own fill and icon; a new part of an article is a card (`.ds-panel`) in the side column or a block in the text column; anything that lists posts is a `.ds-list` in a card with the pagination in a `.ds-table__foot`. Keep the gradient for the featured story, the pull quote, the newsletter card and the page header tile, with text in `--color-inverse-text` and only the `--inverse` and `--ghost` buttons on it; the four fills take an icon or initials only. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1120px;\n  --size-nav: 72px;\n  --size-mark: 34px;\n  --size-icon: 44px;\n  --size-control: 38px;\n  --size-dialog: 460px;\n  --size-art: 168px;\n  --size-avatar: 40px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 80px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\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/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-text) 35%, transparent);\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  color: var(--color-text);\n  max-width: 68ch;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-text);\n  font-size: var(--text-large);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n  content: \" \\2192\";\n}\n.ds-linkrow {\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 */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n  transform: translateY(calc(var(--space-1) * -0.25));\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  transform: none;\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-border);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n  background: transparent;\n  color: var(--color-inverse-text);\n  box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-button--small {\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button--wide {\n  width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  text-shadow: none;\n  transform: none;\n  cursor: default;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--space-8) + var(--space-6));\n  border-radius: var(--radius-panel);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: 0;\n  accent-color: var(--color-button);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin-top: var(--space-2);\n}\n\n/* table */\n.ds-table__wrap {\n  max-width: 100%;\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--text-ui);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-3) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  padding-top: 0;\n}\n.ds-list__item:last-child {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n.ds-list__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-list__title {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-ui);\n}\n.ds-list__meta {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel: the white card with the soft wide shadow */\n.ds-panel {\n  min-width: 0;\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-ui);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1.7;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n.ds-badge--alt {\n  background: color-mix(in srgb, var(--color-accent-alt) 18%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-accent-alt) 60%, var(--color-heading));\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n  min-width: 0;\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\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-2);\n  padding: var(--space-2) var(--space-3);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  font-size: var(--text-ui);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  height: var(--size-control);\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-pagination__link.is-disabled {\n  background: transparent;\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__item {\n  color: inherit;\n  opacity: 0.8;\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n  content: \"/\";\n  margin-left: var(--space-2);\n  opacity: 0.6;\n}\n.ds-breadcrumb__current {\n  font-weight: var(--weight-bold);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  border-radius: var(--radius-page);\n  background: var(--color-overlay);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-5) var(--space-5);\n  font-size: var(--text-ui);\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-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-6) var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n  text-align: center;\n}\n.ds-empty__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  border-radius: 50%;\n  background: var(--color-fill-3);\n  color: var(--color-inverse-text);\n}\n.ds-empty__icon svg {\n  width: 50%;\n  height: 50%;\n}\n.ds-empty__title {\n  margin: var(--space-1) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* tabs */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: inline-block;\n  padding: var(--space-3) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  margin-bottom: calc(var(--border-width) * -1);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n  border-bottom-color: var(--color-button);\n  color: var(--color-heading);\n}\n\n/* shared small pieces: an icon tile on one of the four fills, a sparkline */\n.ds-tile {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  border-radius: var(--radius-panel);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n}\n.ds-tile svg {\n  width: 55%;\n  height: 55%;\n}\n.ds-tile--2 { background: var(--color-fill-2); }\n.ds-tile--3 { background: var(--color-fill-3); }\n.ds-tile--4 { background: var(--color-fill-4); }\n.ds-tile--round { border-radius: 50%; }\n\n@media (max-width: 640px) {\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-2) var(--space-3);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-3);\n  }\n}\n\n/* ---- layout: company blog and customer stories ---- */\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n\n/* nav: a solid bar in the card colour over a hairline; the gradient starts below it */\n.ds-nav {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-panel);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-7);\n  min-height: var(--size-nav);\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-nav .ds-brand {\n  align-self: center;\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  align-items: stretch;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__links li {\n  display: flex;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  border-top: var(--border-width-strong) var(--border-style) transparent;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#story:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#archive:target) .ds-nav__links .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-nav__links .ds-nav__link[href=\"#subscribe\"] {\n  border-bottom-color: var(--color-button);\n  color: var(--color-heading);\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n}\n.ds-nav__actions .ds-nav__link {\n  border: 0;\n}\n\n/* avatar and byline: who wrote it and when */\n.ds-avatar {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border-radius: 50%;\n  background: var(--color-fill-3);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--plain {\n  background: color-mix(in srgb, var(--color-inverse-text) 24%, transparent);\n}\n.ds-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-byline__name {\n  display: block;\n  margin-bottom: var(--space-1);\n  font-weight: var(--weight-bold);\n}\n.ds-byline__meta {\n  opacity: 0.8;\n}\n.ds-byline--strip {\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: var(--space-4) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text);\n}\n.ds-byline--strip .ds-byline__name {\n  color: var(--color-heading);\n  font-size: var(--text-ui);\n}\n.ds-byline__who {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* hero: the featured story, one large gradient card */\n.ds-hero {\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n  align-items: stretch;\n  margin-top: var(--space-6);\n  border-radius: var(--radius-page);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-hero__copy {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-width: 0;\n  padding: var(--space-7);\n}\n.ds-hero__kicker {\n  margin: 0 0 var(--space-4);\n  padding: var(--space-1) var(--space-3);\n  border-radius: var(--radius-pill);\n  background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-hero__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: 44ch;\n  margin: var(--space-4) 0 0;\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n  opacity: 0.9;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin: var(--space-6) 0;\n}\n.ds-hero .ds-byline {\n  margin-top: auto;\n}\n.ds-hero__art {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--space-4);\n  min-width: 0;\n  padding: var(--space-7) var(--space-7) var(--space-7) var(--space-5);\n}\n.ds-hero__ring {\n  position: absolute;\n  top: -18%;\n  right: -14%;\n  width: 70%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-hero__ring--small {\n  top: auto;\n  right: auto;\n  bottom: -10%;\n  left: -6%;\n  width: 34%;\n}\n.ds-hero__card {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-hero__card--in {\n  margin-left: var(--space-7);\n}\n.ds-hero__card--out {\n  margin-right: var(--space-7);\n}\n.ds-hero__grow {\n  flex: 1;\n  min-width: 0;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-hero__line {\n  display: block;\n  width: 80%;\n  height: var(--space-2);\n  margin-top: var(--space-2);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n}\n.ds-hero__line--short {\n  width: 50%;\n}\n.ds-hero__figure {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-hero__meter {\n  display: block;\n  height: var(--space-2);\n  margin-top: var(--space-2);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n}\n.ds-hero__meter-bar {\n  display: block;\n  width: 86%;\n  height: 100%;\n  border-radius: var(--radius-pill);\n  background: var(--fill-inverse);\n}\n\n/* stats: figures set straight on the page, parted by hairlines */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-5);\n  margin: var(--space-7) 0;\n}\n.ds-stat__item {\n  padding-left: var(--space-5);\n  border-left: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n}\n.ds-stat__item:nth-child(2) { border-left-color: var(--color-fill-2); }\n.ds-stat__item:nth-child(3) { border-left-color: var(--color-fill-3); }\n.ds-stat__item:nth-child(4) { border-left-color: var(--color-fill-4); }\n.ds-stat__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n  line-height: var(--line-heading);\n}\n\n/* blocks of a view */\n.ds-main {\n  padding: var(--space-7) 0 var(--space-8);\n}\n.ds-home {\n  padding-bottom: var(--space-8);\n}\n.ds-block {\n  margin-top: var(--space-7);\n}\n.ds-block__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-5);\n  margin-bottom: var(--space-5);\n}\n.ds-block__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n  align-items: start;\n  gap: var(--space-6);\n}\n.ds-cols--even {\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n}\n.ds-cols--side {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n}\n.ds-cols--level {\n  align-items: stretch;\n}\n.ds-panel--side {\n  padding: var(--space-5);\n}\n\n/* tabs: filter chips */\n.ds-tabs {\n  gap: var(--space-2);\n  border-bottom: 0;\n}\n.ds-tabs__tab {\n  margin: 0;\n  padding: var(--space-1) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--fill-panel);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-tabs__tab.is-current {\n  border-color: transparent;\n  background: var(--fill-button);\n  color: var(--color-button-text);\n}\n\n/* grid: story cards, three across, each under a block of one fill */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  text-decoration: none;\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n  transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  box-shadow: var(--shadow-dialog);\n}\n.ds-grid__art {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-art);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  overflow: hidden;\n}\n.ds-grid__art--2 { background: var(--color-fill-2); }\n.ds-grid__art--3 { background: var(--color-fill-3); }\n.ds-grid__art--4 { background: var(--color-fill-4); }\n.ds-grid__art--mix { background: var(--fill-inverse); }\n.ds-grid__art::before,\n.ds-grid__art::after {\n  content: \"\";\n  position: absolute;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n}\n.ds-grid__art::before {\n  top: -40%;\n  left: -8%;\n  width: 46%;\n}\n.ds-grid__art::after {\n  right: -6%;\n  bottom: -50%;\n  width: 38%;\n}\n.ds-grid__art svg {\n  position: relative;\n  width: calc(var(--size-icon) * 1.5);\n  height: calc(var(--size-icon) * 1.5);\n}\n.ds-grid__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding: var(--space-5);\n}\n.ds-kicker {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-grid__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n  flex: 1;\n  margin: var(--space-2) 0 var(--space-4);\n  font-size: var(--text-ui);\n}\n\n/* page header: a quiet band in the card colour with a gradient tile */\n.ds-page-header {\n  padding: var(--space-6) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-panel);\n}\n.ds-page-header__inner {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n}\n.ds-page-header__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin-top: var(--space-4);\n}\n.ds-page-header__tile {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--size-icon) * 1.5);\n  height: calc(var(--size-icon) * 1.5);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-page-header__tile svg {\n  width: 50%;\n  height: 50%;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 60ch;\n  margin: var(--space-1) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: none;\n  gap: var(--space-3);\n}\n.ds-page-header .ds-breadcrumb {\n  color: var(--color-text-muted);\n}\n\n/* article pieces */\n.ds-cover {\n  position: relative;\n  margin: 0;\n  padding: var(--space-7);\n  border-radius: var(--radius-page);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  overflow: hidden;\n}\n.ds-cover::after {\n  content: \"\";\n  position: absolute;\n  top: -30%;\n  right: -8%;\n  width: 36%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n}\n.ds-cover__text {\n  position: relative;\n  max-width: 30ch;\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-cover__by {\n  position: relative;\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-small);\n  opacity: 0.85;\n}\n.ds-facts {\n  margin: 0;\n  font-size: var(--text-ui);\n}\n.ds-facts__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__row:last-child {\n  border-bottom: 0;\n}\n.ds-facts__term {\n  color: var(--color-text-muted);\n}\n.ds-facts__value {\n  margin: 0;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-align: right;\n}\n\n/* call to action: the newsletter card on the gradient */\n.ds-cta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-6) var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  box-shadow: var(--shadow-panel);\n}\n.ds-cta__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-cta__text {\n  margin: 0 0 var(--space-2);\n  font-size: var(--text-ui);\n  opacity: 0.9;\n}\n\n/* footer: one band, the brand at the left and a row of links at the right */\n.ds-footer {\n  padding: var(--space-7) 0 var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-ui);\n}\n.ds-footer__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-5) var(--space-7);\n}\n.ds-footer__about {\n  max-width: 40ch;\n  margin: var(--space-3) 0 0;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-6);\n  margin: var(--space-2) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n  opacity: 0.8;\n}\n.ds-footer__legal {\n  margin: var(--space-6) 0 0;\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n\n@media (max-width: 960px) {\n  .ds-hero,\n  .ds-cols,\n  .ds-cols--even,\n  .ds-cols--side {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-hero__art {\n    padding: 0 var(--space-7) var(--space-7);\n  }\n  .ds-grid,\n  .ds-stat {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n@media (max-width: 640px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 0 var(--space-4);\n    padding: var(--space-3) var(--space-4) 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: none;\n    width: 100%;\n    gap: var(--space-5);\n    overflow-x: auto;\n  }\n  .ds-nav__links .ds-nav__link {\n    padding: var(--space-2) 0;\n  }\n  .ds-nav__signin {\n    display: none;\n  }\n  .ds-hero {\n    margin-top: var(--space-4);\n  }\n  .ds-hero__copy {\n    padding: var(--space-5);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n  }\n  .ds-hero__art {\n    padding: 0 var(--space-5) var(--space-5);\n  }\n  .ds-hero__card--in {\n    margin-left: var(--space-5);\n  }\n  .ds-hero__card--out {\n    margin-right: var(--space-5);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-stat {\n    gap: var(--space-5) var(--space-4);\n    margin: var(--space-6) 0;\n  }\n  .ds-stat__item {\n    padding-left: var(--space-3);\n  }\n  .ds-stat__figure {\n    font-size: var(--text-h2);\n  }\n  .ds-main {\n    padding: var(--space-5) 0 var(--space-7);\n  }\n  .ds-page-header {\n    padding: var(--space-5) 0;\n  }\n  .ds-page-header__inner {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .ds-page-header__title {\n    font-size: var(--text-h2);\n  }\n  .ds-page-header__tile {\n    display: none;\n  }\n  .ds-cover {\n    padding: var(--space-5);\n  }\n  .ds-byline--strip {\n    gap: var(--space-3);\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: SaaS gradient blog and customer stories 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  <div class=\"ds-nav__inner\">\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.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Customer stories</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#archive\">Blog</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#subscribe\">Newsletter</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-nav__link ds-nav__signin\" href=\"#archive\">About the product</a>\n      <a class=\"ds-button ds-button--small\" href=\"#subscribe\">Subscribe</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-home\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__copy\">\n        <p class=\"ds-hero__kicker\">Customer story</p>\n        <h1 class=\"ds-hero__title\">How a six-person shop answers 900 letters a week</h1>\n        <p class=\"ds-hero__lead\">Fennel and Rye moved their support out of three private mailboxes and into one shared inbox. Replies now go out within the hour.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button ds-button--inverse\" href=\"#story\">Read the story</a>\n          <a class=\"ds-button ds-button--ghost\" href=\"#archive\">All posts</a>\n        </div>\n        <div class=\"ds-byline\">\n          <span class=\"ds-avatar ds-avatar--plain\">NA</span>\n          <span><span class=\"ds-byline__name\">Nadia Aalto</span><span class=\"ds-byline__meta\">12 March, 7 minute read</span></span>\n        </div>\n      </div>\n      <div class=\"ds-hero__art\" aria-hidden=\"true\">\n        <span class=\"ds-hero__ring\"></span>\n        <span class=\"ds-hero__ring ds-hero__ring--small\"></span>\n        <div class=\"ds-hero__card ds-hero__card--out\">\n          <span class=\"ds-avatar ds-avatar--4\">FR</span>\n          <span class=\"ds-hero__grow\">Where is my order?<span class=\"ds-hero__line\"></span><span class=\"ds-hero__line ds-hero__line--short\"></span></span>\n          <span class=\"ds-badge ds-badge--warning\">Waiting</span>\n        </div>\n        <div class=\"ds-hero__card ds-hero__card--in\">\n          <span class=\"ds-avatar ds-avatar--2\">JO</span>\n          <span class=\"ds-hero__grow\">On its way, arriving Thursday<span class=\"ds-hero__line\"></span></span>\n          <span class=\"ds-badge ds-badge--success\">Answered</span>\n        </div>\n        <div class=\"ds-hero__card ds-hero__card--out\">\n          <span class=\"ds-hero__grow\">Answered within the hour<span class=\"ds-hero__meter\"><span class=\"ds-hero__meter-bar\"></span></span></span>\n          <span class=\"ds-hero__figure\">86%</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-stat\" data-component=\"stats\">\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">2,400</p><p class=\"ds-stat__label\">teams share an inbox on chronoskin</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">41 min</p><p class=\"ds-stat__label\">median time to a first reply</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">96%</p><p class=\"ds-stat__label\">of letters closed without a hand-over</p></div>\n      <div class=\"ds-stat__item\"><p class=\"ds-stat__figure\">58</p><p class=\"ds-stat__label\">stories told here since 2017</p></div>\n    </div>\n\n    <div class=\"ds-block__head\">\n      <h2 class=\"ds-block__title\">Latest stories</h2>\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">All</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">Shops</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">Agencies</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">Software</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#home\">Charities</a></li>\n      </ul>\n    </div>\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 8h16l-1.5 11h-13z\"/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Shops</span>\n          <span class=\"ds-grid__title\">A shared inbox for a shop that never closes</span>\n          <span class=\"ds-grid__text\">Three time zones, one queue and a rule that nobody answers the same letter twice.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--4\">NA</span><span><span class=\"ds-byline__name\">Nadia Aalto</span><span class=\"ds-byline__meta\">12 March</span></span></span>\n        </span>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art ds-grid__art--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 5h16v11H10l-4 3v-3H4z\"/><path d=\"M8 9h8M8 12h5\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Agencies</span>\n          <span class=\"ds-grid__title\">Twelve clients, twelve voices, one team</span>\n          <span class=\"ds-grid__text\">How a studio keeps each client's tone apart with saved replies and a style note per mailbox.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--1\">TB</span><span><span class=\"ds-byline__name\">Tove Brandt</span><span class=\"ds-byline__meta\">27 February</span></span></span>\n        </span>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art ds-grid__art--3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 19V9M10 19V5M15 19v-7M20 19v-4\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Software</span>\n          <span class=\"ds-grid__title\">What a year of tagged letters taught a product team</span>\n          <span class=\"ds-grid__text\">Tags turned a pile of complaints into a ranked list of what to build next.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--2\">RI</span><span><span class=\"ds-byline__name\">Rafael Ibarra</span><span class=\"ds-byline__meta\">14 February</span></span></span>\n        </span>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art ds-grid__art--4\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.500-7 10-7 10z\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Charities</span>\n          <span class=\"ds-grid__title\">Forty volunteers and a helpline that answers</span>\n          <span class=\"ds-grid__text\">Rotas, hand-over notes and a gentle nudge when a letter has waited a day.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar\">SO</span><span><span class=\"ds-byline__name\">Sunniva Okoro</span><span class=\"ds-byline__meta\">30 January</span></span></span>\n        </span>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art ds-grid__art--mix\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><path d=\"M12 7v5l3 2\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Shops</span>\n          <span class=\"ds-grid__title\">From two days to two hours before the winter rush</span>\n          <span class=\"ds-grid__text\">A bicycle workshop rebuilt its queue in October and kept its weekends in December.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--4\">NA</span><span><span class=\"ds-byline__name\">Nadia Aalto</span><span class=\"ds-byline__meta\">16 January</span></span></span>\n        </span>\n      </a>\n      <a class=\"ds-grid__cell\" href=\"#story\">\n        <span class=\"ds-grid__art ds-grid__art--2\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"3\"/><path d=\"M3 19c1-4.500 11-4.500 12 0\"/><path d=\"M16 6.500a3 3 0 0 1 0 5M18 15c1.500.500 2.500 2 3 4\"/></svg></span>\n        <span class=\"ds-grid__body\">\n          <span class=\"ds-kicker\">Agencies</span>\n          <span class=\"ds-grid__title\">Hiring the fourth person without losing the thread</span>\n          <span class=\"ds-grid__text\">A new colleague read six months of history in a week and answered alone in two.</span>\n          <span class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--1\">TB</span><span><span class=\"ds-byline__name\">Tove Brandt</span><span class=\"ds-byline__meta\">8 January</span></span></span>\n        </span>\n      </a>\n    </div>\n\n    <div class=\"ds-block ds-cols ds-cols--level\">\n      <div class=\"ds-panel\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">From the blog</h2><a class=\"ds-link ds-link--more\" href=\"#archive\">All posts</a></div>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Saved replies that do not sound saved</a><span class=\"ds-badge ds-badge--alt\">New</span></div>\n              <p class=\"ds-list__text\">Five habits of teams whose templates still read like a person wrote them.</p>\n              <p class=\"ds-list__meta\">Craft, 9 March, by Rafael Ibarra</p>\n            </li>\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Release notes: snooze, and a calmer sidebar</a><span class=\"ds-badge\">Product</span></div>\n              <p class=\"ds-list__text\">Put a letter to sleep until the parcel has landed, and find a mailbox in one keystroke.</p>\n              <p class=\"ds-list__meta\">Product, 2 March, by Tove Brandt</p>\n            </li>\n            <li class=\"ds-list__item\">\n              <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Why we count replies, not tickets</a><span class=\"ds-badge ds-badge--quiet\">Opinion</span></div>\n              <p class=\"ds-list__text\">A number a customer would recognise is a better number to chase.</p>\n              <p class=\"ds-list__meta\">Company, 21 February, by Nadia Aalto</p>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"ds-cta\">\n        <h2 class=\"ds-cta__title\">One letter, every other Thursday</h2>\n        <p class=\"ds-cta__text\">The newest story and two posts worth your tea break. 14,000 readers, no tracking pixels.</p>\n        <a class=\"ds-button ds-button--inverse\" href=\"#subscribe\">Get the newsletter</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#archive\">Read a past issue</a>\n      </div>\n    </div>\n  </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"story\">\n  <div class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div>\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Customer stories</a></li>\n          <li class=\"ds-breadcrumb__current\">Fennel and Rye</li>\n        </ol>\n        <div class=\"ds-page-header__row\">\n          <span class=\"ds-page-header__tile\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 8h16l-1.5 11h-13z\"/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"/></svg></span>\n          <div>\n            <h1 class=\"ds-page-header__title\">How a six-person shop answers 900 letters a week</h1>\n            <p class=\"ds-page-header__text\">A customer story from Fennel and Rye, bakers by post.</p>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#subscribe\">Get stories by email</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-byline ds-byline--strip\">\n          <span class=\"ds-byline__who\">\n            <span class=\"ds-avatar ds-avatar--4\">NA</span>\n            <span><span class=\"ds-byline__name\">Nadia Aalto</span><span class=\"ds-byline__meta\">Writes about small teams. 12 March, 7 minute read</span></span>\n          </span>\n          <span class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--quiet\">Shops</span><span class=\"ds-badge ds-badge--quiet\">Shared inbox</span></span>\n        </div>\n        <figure class=\"ds-cover\">\n          <p class=\"ds-cover__text\">We stopped asking who had answered what. The inbox knows, so we can bake.</p>\n          <p class=\"ds-cover__by\">Jonas Ostrem, co-owner</p>\n        </figure>\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <h1>Three mailboxes, one queue</h1>\n          <p class=\"ds-prose__lead\">Fennel and Rye post sourdough kits to four thousand kitchens. Until last spring every question about them landed in one of three private mailboxes.</p>\n          <p>Two people would answer the same letter, or nobody would. On Mondays the owners spent the morning forwarding mail to each other. The move to chronoskin took one afternoon and a pot of coffee.</p>\n          <h2>What they changed</h2>\n          <p>All three addresses now feed one shared inbox. A letter belongs to whoever opens it first, and everyone else sees a small <code>answering</code> mark beside it.</p>\n          <h3>Rules they wrote on day one</h3>\n          <ul>\n            <li>Anything about a late parcel is tagged <strong>delivery</strong> and goes to the top.</li>\n            <li>A letter that has waited four hours turns amber for the whole team.</li>\n            <li>Recipes and praise are answered on Fridays, together, with cake.</li>\n          </ul>\n          <h3>What they left alone</h3>\n          <p>They kept their own wording. Saved replies hold the facts, such as the returns address, and each baker writes the greeting.</p>\n        </article>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Before and after</h2><span class=\"ds-badge ds-badge--success\">Six months in</span></div>\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <thead>\n                <tr><th>Measure</th><th class=\"ds-table__num\">Before</th><th class=\"ds-table__num\">After</th><th class=\"ds-table__num\">Change</th></tr>\n              </thead>\n              <tbody>\n                <tr><td>Letters a week</td><td class=\"ds-table__num\">610</td><td class=\"ds-table__num\">900</td><td class=\"ds-table__num\">+48%</td></tr>\n                <tr><td>Median first reply</td><td class=\"ds-table__num\">19 h</td><td class=\"ds-table__num\">52 min</td><td class=\"ds-table__num\">-95%</td></tr>\n                <tr><td>Answered twice by mistake</td><td class=\"ds-table__num\">34</td><td class=\"ds-table__num\">1</td><td class=\"ds-table__num\">-97%</td></tr>\n                <tr><td>Hours on mail each week</td><td class=\"ds-table__num\">46</td><td class=\"ds-table__num\">31</td><td class=\"ds-table__num\">-33%</td></tr>\n                <tr><td>People answering</td><td class=\"ds-table__num\">3</td><td class=\"ds-table__num\">6</td><td class=\"ds-table__num\">+3</td></tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">At a glance</h2></div>\n          <div class=\"ds-panel__body\">\n            <dl class=\"ds-facts\">\n              <div class=\"ds-facts__row\"><dt class=\"ds-facts__term\">Trade</dt><dd class=\"ds-facts__value\">Baking kits by post</dd></div>\n              <div class=\"ds-facts__row\"><dt class=\"ds-facts__term\">Team</dt><dd class=\"ds-facts__value\">6 people</dd></div>\n              <div class=\"ds-facts__row\"><dt class=\"ds-facts__term\">Customer since</dt><dd class=\"ds-facts__value\">April 2018</dd></div>\n              <div class=\"ds-facts__row\"><dt class=\"ds-facts__term\">Plan</dt><dd class=\"ds-facts__value\">Team</dd></div>\n            </dl>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">What they use</h2></div>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">The parts of chronoskin in this story, and how far along the shop is with each.</p>\n            <div class=\"ds-badgerow\" data-component=\"badge\">\n              <span class=\"ds-badge\">Shared inbox</span>\n              <span class=\"ds-badge ds-badge--alt\">Saved replies</span>\n              <span class=\"ds-badge ds-badge--success\">Rules: in use</span>\n              <span class=\"ds-badge ds-badge--warning\">Reports: on trial</span>\n              <span class=\"ds-badge ds-badge--danger\">Old mailboxes: closed</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-cta\">\n          <h2 class=\"ds-cta__title\">Stories like this one, by email</h2>\n          <p class=\"ds-cta__text\">One customer story and two posts, every other Thursday.</p>\n          <a class=\"ds-button ds-button--inverse\" href=\"#subscribe\">Get the newsletter</a>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">More from Nadia</h2></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\">\n                <a class=\"ds-list__title\" href=\"#story\">From two days to two hours before the winter rush</a>\n                <p class=\"ds-list__meta\">Shops, 16 January</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <a class=\"ds-list__title\" href=\"#archive\">Why we count replies, not tickets</a>\n                <p class=\"ds-list__meta\">Company, 21 February</p>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-panel ds-panel--side\">\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">Keep reading</h2>\n            <ul class=\"ds-linkrow\" data-component=\"links\">\n              <li><a class=\"ds-link\" href=\"#story\">Twelve clients, twelve voices</a></li>\n              <li><a class=\"ds-link is-visited\" href=\"#story\">A shop that never closes</a></li>\n              <li><a class=\"ds-link is-hover\" href=\"#archive\">Saved replies that do not sound saved</a></li>\n              <li><a class=\"ds-link is-active\" href=\"#subscribe\">Get the next story by email</a></li>\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"archive\">\n  <div class=\"ds-page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div>\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#archive\">Blog</a></li>\n          <li class=\"ds-breadcrumb__current\">All posts</li>\n        </ol>\n        <div class=\"ds-page-header__row\">\n          <span class=\"ds-page-header__tile\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 4h11l3 3v13H5z\"/><path d=\"M9 10h6M9 14h6\"/></svg></span>\n          <div>\n            <h1 class=\"ds-page-header__title\">The chronoskin blog</h1>\n            <p class=\"ds-page-header__text\">Notes on answering customers well, and on building the tool we do it with.</p>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#subscribe\">Subscribe</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--side\">\n      <div class=\"ds-stack\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Topics</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__item is-current\" href=\"#archive\">All posts <span class=\"ds-sidebar__count\">124</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Craft <span class=\"ds-sidebar__count\">41</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Product <span class=\"ds-sidebar__count\">36</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Company <span class=\"ds-sidebar__count\">29</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Engineering <span class=\"ds-sidebar__count\">18</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Events <span class=\"ds-sidebar__count\">0</span></a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Writers</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Nadia Aalto <span class=\"ds-sidebar__count\">52</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Rafael Ibarra <span class=\"ds-sidebar__count\">38</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#archive\">Tove Brandt <span class=\"ds-sidebar__count\">34</span></a></li>\n          </ul>\n        </nav>\n      </div>\n      <div class=\"ds-stack\">\n        <ul class=\"ds-tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#archive\">Newest</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#archive\">Most read</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#archive\">Long reads</a></li>\n        </ul>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\">\n                <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Saved replies that do not sound saved</a><span class=\"ds-badge ds-badge--alt\">New</span></div>\n                <p class=\"ds-list__text\">Five habits of teams whose templates still read like a person wrote them.</p>\n                <p class=\"ds-list__meta\">Craft, 9 March, by Rafael Ibarra, 6 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Release notes: snooze, and a calmer sidebar</a><span class=\"ds-badge\">Product</span></div>\n                <p class=\"ds-list__text\">Put a letter to sleep until the parcel has landed, and find a mailbox in one keystroke.</p>\n                <p class=\"ds-list__meta\">Product, 2 March, by Tove Brandt, 3 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">Why we count replies, not tickets</a><span class=\"ds-badge ds-badge--quiet\">Opinion</span></div>\n                <p class=\"ds-list__text\">A number a customer would recognise is a better number to chase.</p>\n                <p class=\"ds-list__meta\">Company, 21 February, by Nadia Aalto, 5 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">How search got four times faster</a><span class=\"ds-badge ds-badge--quiet\">Long read</span></div>\n                <p class=\"ds-list__text\">An index per mailbox, a smaller payload and one embarrassing loop.</p>\n                <p class=\"ds-list__meta\">Engineering, 11 February, by Rafael Ibarra, 14 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <div class=\"ds-list__head\"><a class=\"ds-list__title\" href=\"#story\">The first reply sets the tone for the fifth</a></div>\n                <p class=\"ds-list__text\">What 40,000 conversations say about opening lines.</p>\n                <p class=\"ds-list__meta\">Craft, 4 February, by Nadia Aalto, 8 minute read</p>\n              </li>\n            </ul>\n          </div>\n          <div class=\"ds-table__foot\">\n            <span>Posts 1 to 5 of 124</span>\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><a class=\"ds-pagination__link is-disabled\" href=\"#archive\">Newer</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#archive\">1</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">25</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#archive\">Older</a></li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 5h12v11H4z M4 8h12 M7 3v3 M13 3v3\"/></svg></span>\n          <h2 class=\"ds-empty__title\">Nothing under Events yet</h2>\n          <p class=\"ds-empty__text\">We have not written up a meet-up or a talk so far. The newsletter will say when we do.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#subscribe\">Tell me when</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"subscribe\">\n  <div class=\"ds-page-header\">\n    <div class=\"ds-wrap ds-page-header__inner\">\n      <div>\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#archive\">Blog</a></li>\n          <li class=\"ds-breadcrumb__current\">Newsletter</li>\n        </ol>\n        <div class=\"ds-page-header__row\">\n          <span class=\"ds-page-header__tile\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18v12H3z\"/><path d=\"M3 7l9 7 9-7\"/></svg></span>\n          <div>\n            <h1 class=\"ds-page-header__title\">One letter, every other Thursday</h1>\n            <p class=\"ds-page-header__text\">The newest customer story and two posts from the blog. Leave whenever you like.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-wrap ds-cols ds-cols--even\">\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Your subscription</h2><a class=\"ds-link\" href=\"#archive\">Read a past issue</a></div>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\" action=\"#subscribe\">\n            <div class=\"ds-noticerow\" data-component=\"notice\">\n              <p class=\"ds-notice\"><span class=\"ds-notice__title\">Nearly there.</span> We send one message to confirm the address, then nothing until Thursday.</p>\n              <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not subscribed yet.</span> The address below needs another look.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"nl-name\">First name</label>\n                <input class=\"ds-form__input\" id=\"nl-name\" type=\"text\" value=\"Jonas\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"nl-team\">Team size</label>\n                <select class=\"ds-form__select\" id=\"nl-team\"><option>2 to 10 people</option><option>Just me</option><option>11 to 50 people</option></select>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"nl-mail\">Email address</label>\n              <input class=\"ds-form__input is-error\" id=\"nl-mail\" type=\"email\" value=\"jonas@fennelandrye\">\n              <span class=\"ds-form__error\">This address has no ending, such as .com or .no.</span>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"nl-often\">How often</label>\n              <select class=\"ds-form__select\" id=\"nl-often\"><option>Every other Thursday</option><option>Once a month, the best of</option></select>\n              <span class=\"ds-form__hint\">You can change this from the foot of any issue.</span>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"nl-ask\">What should we write about next? (optional)</label>\n              <textarea class=\"ds-form__textarea\" id=\"nl-ask\" placeholder=\"For example: handing over a mailbox before a holiday\"></textarea>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Customer stories</label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> Release notes as they happen</label>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"submit\">Subscribe</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#archive\">Back to the blog</a>\n              <button class=\"ds-button ds-button--danger\" type=\"button\">Unsubscribe from everything</button>\n              <button class=\"ds-button is-disabled\" type=\"button\" disabled>Resend confirmation</button>\n            </div>\n          </form>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">In the last issue</h2><span class=\"ds-badge ds-badge--quiet\">No. 61</span></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-list\">\n              <li class=\"ds-list__item\">\n                <a class=\"ds-list__title\" href=\"#story\">How a six-person shop answers 900 letters a week</a>\n                <p class=\"ds-list__meta\">Customer story, 7 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <a class=\"ds-list__title\" href=\"#archive\">Saved replies that do not sound saved</a>\n                <p class=\"ds-list__meta\">Craft, 6 minute read</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <a class=\"ds-list__title\" href=\"#archive\">Release notes: snooze, and a calmer sidebar</a>\n                <p class=\"ds-list__meta\">Product, 3 minute read</p>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"nl-dialog\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"nl-dialog\">Unsubscribe from everything?</h2><a class=\"ds-dialog__close\" href=\"#subscribe\" aria-label=\"Close\">&times;</a></div>\n            <div class=\"ds-dialog__body\"><p>You will get no more stories, posts or release notes from chronoskin. Your address is deleted within a day.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#subscribe\">Stay subscribed</a>\n              <a class=\"ds-button ds-button--danger ds-button--small\" href=\"#home\">Unsubscribe</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__inner\">\n      <div>\n        <a class=\"ds-brand\" href=\"#home\">\n          <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M12 3a9 9 0 1 1-9 9\"/><path d=\"M12 17a5 5 0 1 1 5-5\"/><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"/></svg></span>\n          <span class=\"ds-brand__name\">chronoskin</span>\n        </a>\n        <p class=\"ds-footer__about\">The shared inbox for small teams, and the stories of the people who answer from it.</p>\n      </div>\n      <ul class=\"ds-footer__links\">\n        <li><a class=\"ds-footer__link\" href=\"#home\">Customer stories</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#archive\">Blog</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#subscribe\">Newsletter</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#archive\">Press</a></li>\n        <li><a class=\"ds-footer__link\" href=\"#archive\">Privacy</a></li>\n      </ul>\n    </div>\n    <p class=\"ds-footer__legal\">chronoskin, 2019. Written by the people who build it, between letters.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.saas-gradient.blog.s04.p04.t03.u04\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"saas-gradient\",\n    \"years\": [\n      2016,\n      2021\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-sg-4434\",\n  \"short\": \"v1-sg-4434\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f7f9f8;\n  --color-canvas: #f7f9f8;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f1f6f3;\n  --color-surface-strong: #e1ece6;\n  --color-bar: #f1f6f3;\n  --color-bar-text: #1f4a4d;\n  --color-bar-alt: #03363d;\n  --color-bar-alt-text: #b9d3cf;\n  --color-inverse: #12907a;\n  --color-inverse-text: #ffffff;\n  --color-text: #4a5f61;\n  --color-text-muted: #87999a;\n  --color-heading: #03363d;\n  --color-heading-alt: #17896f;\n  --color-link: #0f9b78;\n  --color-link-quiet: #567173;\n  --color-link-visited: #4f8f86;\n  --color-link-hover: #03363d;\n  --color-link-active: #0b6e56;\n  --color-border: #dde7e2;\n  --color-border-strong: #b8cbc3;\n  --color-border-muted: #ebf1ee;\n  --color-accent: #30aabc;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #d9a514;\n  --color-fill-1: #2dbd88;\n  --color-fill-2: #1a9bb0;\n  --color-fill-3: #e8a923;\n  --color-fill-4: #ef7d63;\n  --color-button: #03363d;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #03363d;\n  --color-input: #ffffff;\n  --color-input-text: #03363d;\n  --color-input-border: #b8cbc3;\n  --color-disabled: #e4ece8;\n  --color-disabled-text: #9db0ab;\n  --color-danger: #d6453d;\n  --color-danger-surface: #fdf1f0;\n  --color-success: #1fa971;\n  --color-warning: #e0a21a;\n  --color-notice: #e4f5ee;\n  --color-notice-text: #0b6e56;\n  --color-focus: #30aabc;\n  --color-shadow: rgb(3 54 61 / 0.12);\n  --color-overlay: rgb(3 54 61 / 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n  --font-heading: Poppins, Montserrat, Futura, \"Century Gothic\", sans-serif;\n  --font-ui: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n  --font-mono: \"Fira Mono\", \"Courier New\", monospace;\n  --text-base: 15px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 18px;\n  --text-display: 42px;\n  --text-h1: 32px;\n  --text-h2: 23px;\n  --text-h3: 16px;\n  --line-body: 1.55;\n  --line-heading: 1.2;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 500;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: -0.2px;\n  --display-tracking: -1px;\n  --ui-transform: uppercase;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 3px;\n  --border-style: solid;\n  --radius-control: 4px;\n  --radius-panel: 4px;\n  --radius-pill: 100px;\n  --radius-page: 6px;\n  --shadow-panel: 0 2px 4px var(--color-shadow);\n  --shadow-control: 0 1px 2px var(--color-shadow);\n  --shadow-control-hover: 0 4px 10px var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 0 12px 40px var(--color-shadow), 0 2px 6px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: linear-gradient(160deg, var(--color-fill-1), var(--color-fill-2) 70%);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 40%, transparent);\n  --transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}
