{
  "id": "v1-em-3333",
  "long_id": "v1.editorial-minimal.app.s03.p03.t03.u03",
  "name": "Editorial minimalism writing platform",
  "era": {
    "slug": "editorial-minimal",
    "code": "em",
    "name": "Editorial minimalism",
    "years": [
      2012,
      2018
    ],
    "description": "Reading-first pages of 2012 to 2018: one narrow column of large serif text on white, a thin header, generous white space, hairline rules, a single accent colour and almost no boxes."
  },
  "archetype": "app",
  "mode": "pure",
  "viewport": {
    "width": 1280,
    "fluid": false
  },
  "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: a narrow column of carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its application form, the writing platform and notes tool of those years: one low top bar, a feed of story cards that have no box around them, a reading view and an editor that both keep to the same measure. Chrome is kept to the least that works, so the look is carried by the type sizes, the line height and the white space between stories.",
  "url": "https://chrono.skin/s/v1-em-3333",
  "preview_url": "https://chrono.skin/s/v1-em-3333/specimen.html",
  "files": {
    "STYLE.md": "# Editorial minimalism writing platform\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: a narrow column of carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its application form, the writing platform and notes tool of those years: one low top bar, a feed of story cards that have no box around them, a reading view and an editor that both keep to the same measure. Chrome is kept to the least that works, so the look is carried by the type sizes, the line height and the white space between stories.\n\n## Layout\n\n- The app is a fixed centred column of `--size-page` (1040px), designed for a 1280px viewport. Reading and writing views narrow it to `--size-measure` (680px) with `.ds-wrap--narrow`. Only the top bar, the hero band and the footer strip paint edge to edge.\n- Navigation is one bar `--size-nav` (56px) tall on `--fill-bar` with a hairline under it: brand and two or three section names at the left, and at the right a rounded search field, one small primary button and the reader's avatar. The current section has a `--border-width-strong` accent line on the bar's lower edge.\n- The home view is the feed. Under the bar comes the inverted `.ds-hero` band, then a row of four editors' picks (`.ds-grid`), then `.ds-split`: the feed in a 680px column with its `.ds-tabs` on top, and a `--size-aside` (280px) column of a panel and sidebar lists at the right.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then a compact `.ds-page-header` (title, one grey line, one or two buttons at the right, an optional large avatar at the left, closed by a hairline). The story and the editor follow in the 680px measure; a profile keeps the full width, puts `.ds-stat` directly under the page header and then uses `.ds-split`: tabs, table and lists at the left, account panel and settings links at the right.\n- Views. The specimen is a writing platform with four views. `home` is the feed: the hero, four picks, the tabbed list of stories and the side column with the week's prompt, topics, writers and drafts. `story` is the reading view: breadcrumb, page header, byline, the text with its drop cap and pull quote, then a row of links. `write` is the editor: the draft's page header with Preview and Publish, the notices, the compose form with its large title field, toolbar and text field, the button row and the open publish dialog. `profile` is the writer's page and settings: the figures, the table of stories with pagination and the label legend, the empty bookmarks box, and the account form, settings links and series at the right. Below 880px the side column falls under the main one and the picks go two across; below 600px the section names move to a second row of the bar, cards shrink their picture and a wide table scrolls inside `.ds-table__wrap` while the page itself never scrolls sideways.\n- Spacing scale (denser than the era's other layouts): `--space-1` 4px (inside badges, under a title), `--space-2` 8px (between a label and its field, adjacent controls), `--space-3` 12px (under a byline or label, gaps in a button row), `--space-4` 20px (paragraph gap, panel padding, column side padding, between fields), `--space-5` 32px (between cards, between stacked blocks, grid gutter), `--space-6` 48px (between sections), `--space-7` 72px (hero padding).\n- Other sizes: `--size-avatar` 32px, `--size-thumb` 136px (the picture of a card), `--size-dialog` 440px, `--size-icon` 40px.\n\n## Typography and colour roles\n\n- `--font-heading` sets the brand, titles of stories, figures and dialog titles; `--font-body` the excerpts, the story and the fields a writer types in; `--font-ui` everything that is the application talking: navigation, buttons, tabs, bylines, labels, counts, footer. With this pack's own type set that is a slab serif for titles (Rockwell, then Roboto Slab), a transitional serif for text (Charter, then Georgia) and a plain humanist sans for the interface (Lucida Grande, then Verdana); the references used their own commercial faces.\n- Body is `--text-base` 17px at `--line-body` 1.5 in `--color-text`. Lead lines (`--text-large` 20px) use a line height of 1.4 to 1.45; excerpts and page header lines are `--color-text-muted`.\n- Sizes: `--text-display` 38px (hero title only), `--text-h1` 30px (page title, a part heading in a story, the editor's title field, figures), `--text-h2` 23px (card titles, section headings, pull quotes, dialog and empty titles), `--text-h3` 18px (brand, picks, panel titles), `--text-ui` 13px (navigation, buttons, tabs, sidebar lines), `--text-small` 11px (bylines, counts, labels, badges, footer). Tables, notices and form fields use the body face at 85% of `--text-base`.\n- `.ds-label`, table heads, sidebar titles and badges are small capitals with letter spacing of a tenth of their size; navigation, buttons, tabs and form labels follow `--ui-transform` and carry 4% spacing.\n- The text and fill pairs are those of the era, set by its first layout: page, canvas and surface colours and `--fill-panel` carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and links; `--fill-bar` carries `--color-bar-text`; `--fill-bar-alt` carries `--color-bar-alt-text` (the editor toolbar and the footer); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for the lead (the hero); `--fill-accent` carries `--color-accent-text`; `--color-fill-1` to `--color-fill-4` are picture tones (picks, card pictures, avatars) that carry only initials in `--color-inverse-text`; `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border and `--fill-button-hover` carries `--color-button-hover-text`; `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline; `--fill-input` carries `--color-input-text`. Buttons stand on page, surface and bar colours only; on the hero band use `.ds-button--inverse` and `.ds-hero__link`.\n- `--color-accent` marks the current section, tab and page number and fills the default badge. Author names in a byline are `--color-link`.\n- Hairlines of `--border-width` in `--color-border` divide cards and close the page header and the bar; `--color-border-muted` divides table rows; `--border-width-strong` marks current items and the foot of a table head. `--radius-page` and `--shadow-panel` dress pictures, `--radius-panel` panels, the dialog and the empty box, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges and the search field. With this pack's surface set corners are 4px and panels, pictures and controls carry a faint 1px shadow.\n- One-off values the vocabulary has no token for: avatars are circles (50%); the hero lead is dimmed by opacity 0.75; the pull quote is italic at a line height of 1.35.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill and the body type. It has no width; `.ds-wrap` is the column.\n- `.ds-wrap`: the 1040px column with 20px side padding; `--narrow` is the 680px measure. `.ds-section` gives a block 48px above and below (`--first` 32px above, `--flush` none above). `.ds-stack` stacks blocks 32px apart. `.ds-split` is the 680px column with a 280px column at its right.\n- `.ds-label`: a small capital line above a block. `.ds-avatar`: a round picture tone with initials (`--1`, `--3`, `--4` for the other tones, `--large` for a profile). `.ds-byline`: avatar, `.ds-byline__name` and a date line.\n- `.ds-brand`: the site's mark and name at the left of the bar. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` border, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name at `--text-h3` in bold. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`, an accent line on the bar's edge) and `.ds-nav__aside` with `.ds-nav__search`, a `.ds-button--small` and the avatar. In the specimen the showing view marks its item with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the inverted band on the home view: `.ds-hero__inner` with `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (one `.ds-button--inverse` and one `.ds-hero__link`).\n- `.ds-page-header`: head of an inner page, after the breadcrumb: an optional `.ds-avatar--large`, `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text` line, and `.ds-page-header__actions` with at most one secondary and one primary button.\n- `.ds-prose`: a story: `h1`, `h2`, `h3`, paragraphs, lists, `strong`, `code`. `.ds-prose__lead` is a larger paragraph; `.ds-prose__dropcap` is a span around the first letter of a paragraph that makes it a three-line initial. `.ds-quote` with `.ds-quote__text` is the centred italic pull quote, without rules.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for titles in tables and side lists; `--more` is a small capital link with a chevron. `.ds-linkrow` is the row of links under a story, above a hairline.\n- `.ds-button`: a word in a box on `--fill-button`. Variants: `--secondary` (hairline border on `--fill-button-secondary`), `--danger` (outlined in `--color-danger`, filled on hover; destructive actions only), `--inverse` (on the hero band), `--small` (in the bar). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 12px apart.\n- `.ds-form`: vertical form. `.ds-form__row` sets 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`; `--inline` puts one field and its button on a line. For the editor: `.ds-form__input--title` is the large title field, `.ds-form__textarea--body` the tall text field, and `.ds-toolbar` the strip joined to its top with `.ds-toolbar__item` words (`--strong`, `--em`) and a `.ds-toolbar__count`.\n- `.ds-table`: text rows on faint hairlines, no box and no stripes; the head is small capitals over a strong rule. `.ds-table__num` right-aligns figures; `.ds-table__caption` is a note below. Wrap it in `.ds-table__wrap`; `.ds-table__foot` holds the pagination and a legend.\n- `.ds-list`: the feed. Each `.ds-list__item` is a card without a box, closed by a hairline: `.ds-list__main` with a `.ds-byline`, the `.ds-list__title`, a grey `.ds-list__text` excerpt and a `.ds-list__meta` row (a badge and counts), and an optional `.ds-list__thumb` picture (`--2`, `--3`) at the right.\n- `.ds-panel`: a small card in the side column on `--fill-panel`: `.ds-panel__title` and `.ds-panel__body`.\n- `.ds-stat`: a writer's figures in a row closed by a hairline. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, set close together at the left, without dividers.\n- `.ds-grid`: four picks across: each `.ds-grid__cell` a `.ds-grid__tile` picture tone (`--2`, `--3`, `--4`), a `.ds-grid__title` and a `.ds-grid__text` byline.\n- `.ds-tabs`: words on a hairline; `.ds-tabs__tab` with `is-current` is underlined in the accent.\n- `.ds-badge`: a small capital label on `--fill-accent`. `--alt` is outlined in `--color-accent-alt`, `--quiet` sits on `--color-surface-strong` for topics and counts. Status variants are outlines in their own colour: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a titled list in the side column: `.ds-sidebar__title` over a hairline, `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count` at the right; the current row is `is-current`, bold and not a link.\n- `.ds-notice`: a tinted line with a strong rule at its left; `--error` uses the danger colours. `.ds-notice__title` is the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: a row of words and numbers, `.ds-pagination__link`; `is-current` is underlined in the accent, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` separated by chevrons; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a veil of `--color-overlay` centring a `.ds-dialog__box`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, right-aligned `.ds-dialog__actions`.\n- `.ds-empty`: a centred message in a hairline box where a list would be: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one low strip on `--fill-bar-alt`: `.ds-footer__inner` with a line of text and `.ds-footer__links` of `.ds-footer__link`.\n\n## Never\n\n- `content-width <= 1040px`: everything stays in the column.\n- `block-gap <= 72px`: sections are 48px apart.\n- `font-size <= 96px`: the three-line drop cap is the largest letter; the largest title is 38px.\n- `font-size >= 11px`: bylines and counts are the smallest text.\n- `font-weight <= 700`: titles are bold, nothing is heavier.\n- `font-families <= 4`: a slab for titles, a serif for text, a sans for the interface, monospace for code.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing <= 1.1px`: only small capitals are tracked.\n- `box-shadow-blur <= 12px`: shadows are faint and close; nothing floats.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 4px`: corners are barely eased; only avatars are round.\n- `border-width <= 2px`: rules are 1px hairlines; 2px marks the current item and a table head.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new list is a set of unboxed rows closed by hairlines, as `.ds-list` does it; a new side block is a `.ds-sidebar` or, once per column, a `.ds-panel`. Anything the reader reads or the writer types takes the body face in the 680px measure; anything the application says takes `--font-ui` at `--text-ui` or `--text-small`. Pictures are picture tones, never images. Keep to the era's fill and text pairs so the component works with every palette: only initials on picture tones, only `.ds-button--inverse` and `.ds-hero__link` on the inverted band.\n",
    "components.css": ":root {\n  --size-page: 1040px;\n  --size-measure: 680px;\n  --size-aside: 280px;\n  --size-nav: 56px;\n  --size-dialog: 440px;\n  --size-icon: 40px;\n  --size-avatar: 32px;\n  --size-thumb: 136px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 20px;\n  --space-5: 32px;\n  --space-6: 48px;\n  --space-7: 72px;\n}\n\n/* shell: a quiet page; all content sits in one centred reading column */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-rendering: optimizeLegibility;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* column: the app's width; --narrow is the reading and writing measure */\n.ds-wrap {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  margin: 0 auto;\n  padding: 0 var(--space-4);\n}\n.ds-wrap--narrow {\n  max-width: calc(var(--size-measure) + var(--space-4) + var(--space-4));\n}\n.ds-section {\n  padding-top: var(--space-6);\n  padding-bottom: var(--space-6);\n}\n.ds-section--first {\n  padding-top: var(--space-5);\n}\n.ds-section--flush {\n  padding-top: 0;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n/* split: the feed or the work at the left, a narrow column of side blocks at the right */\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, var(--size-measure)) var(--size-aside);\n  justify-content: space-between;\n  align-items: start;\n}\n\n/* label: the small tracked capitals above a block */\n.ds-label {\n  display: block;\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n/* avatar: a round picture tone with an initial */\n.ds-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  background: var(--color-fill-2);\n  color: var(--color-inverse-text);\n  border-radius: 50%;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-avatar--3 {\n  background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n  background: var(--color-fill-4);\n}\n.ds-avatar--1 {\n  background: var(--color-fill-1);\n}\n.ds-avatar--large {\n  width: calc(var(--size-avatar) * 2);\n  height: calc(var(--size-avatar) * 2);\n  font-size: var(--text-large);\n}\n\n/* nav: one low bar; brand and sections at the left, search, the write button and the reader at the right */\n.ds-nav {\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__inner {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-4);\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-5);\n}\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: calc(var(--space-4) + var(--space-2));\n  height: calc(var(--space-4) + var(--space-2));\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  color: var(--color-bar-text);\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-4);\n  flex: 1 1 auto;\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  margin-bottom: calc(var(--border-width) * -1);\n  color: var(--color-bar-text);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  border-top: var(--border-width-strong) var(--border-style) transparent;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  border-bottom-color: var(--color-border-strong);\n}\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-accent);\n}\n/* the current view marks its section; a story marks Home */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#story:target) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#write:target) .ds-nav__link[href=\"#write\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#profile:target) .ds-nav__link[href=\"#profile\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-nav__aside {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-nav__search {\n  width: calc(var(--size-thumb) + var(--space-6));\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-pill);\n  box-shadow: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-nav__search::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n\n/* hero: the inverted band that tells a new reader what this is */\n.ds-hero {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  padding: var(--space-7) var(--space-4);\n}\n.ds-hero__inner {\n  max-width: var(--size-page);\n  margin: 0 auto;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-3);\n  max-width: 22ch;\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-5);\n  max-width: 54ch;\n  font-size: var(--text-large);\n  line-height: 1.45;\n  opacity: 0.75;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-4);\n}\n.ds-hero__link {\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  text-decoration: none;\n  border-bottom: var(--border-width) var(--border-style) currentColor;\n}\n\n/* page header: the head of an inner page; a compact title row closed by a hairline */\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) 0 var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* byline: who wrote it and when, with the avatar */\n.ds-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 1.4;\n}\n.ds-byline__name {\n  display: block;\n  color: var(--color-link);\n  font-size: var(--text-ui);\n  text-decoration: var(--link-decoration-quiet);\n}\n\n/* typography: a story as its reader sees it */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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  margin: var(--space-6) 0 var(--space-3);\n  font-size: var(--text-h1);\n}\n.ds-prose h1:first-child {\n  margin-top: 0;\n}\n.ds-prose h2 {\n  margin: var(--space-5) 0 var(--space-2);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-1);\n  color: var(--color-heading-alt);\n  font-size: var(--text-h3);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-4);\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-bottom: var(--space-2);\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  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  border-radius: var(--radius-control);\n  font-family: var(--font-mono);\n  font-size: calc(var(--text-base) * 0.82);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  line-height: 1.45;\n}\n/* drop cap: three lines deep. The span is a floated box holding an unseen strut in the text face, pushed two lines down, and the letter with no line height of its own; the two share a baseline, so the letter stands on the third line of the paragraph whatever the metrics of the two faces */\n.ds-prose__dropcap {\n  float: left;\n  display: flex;\n  align-items: baseline;\n  margin: 0 var(--space-2) calc(var(--text-base) * -0.2) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: calc(var(--text-base) * (2 * var(--line-body) + 0.7) * 1.4);\n  font-style: normal;\n  font-weight: var(--weight-heading);\n  line-height: 0;\n}\n.ds-prose__dropcap::before {\n  content: \"\\200B\";\n  padding-top: calc(var(--text-base) * var(--line-body) * 2);\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/* pull quote: centred, in italics, larger than the text, with no rule at all */\n.ds-quote {\n  margin: var(--space-5) auto;\n  max-width: 30ch;\n  color: var(--color-text-muted);\n  font-size: var(--text-h2);\n  font-style: italic;\n  line-height: 1.35;\n  text-align: center;\n}\n.ds-quote__text {\n  margin: 0;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  text-underline-offset: calc(var(--text-small) * 0.25);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link);\n}\n.ds-link--more {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-link--more::after {\n  content: \" \\203A\";\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n\n/* buttons: outlined or flat, small tracked words; the palette decides which */\n.ds-button {\n  display: inline-block;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-align: center;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-border);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: currentColor;\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n  background: var(--fill-button-secondary);\n  color: var(--color-link-active);\n  border-color: currentColor;\n}\n.ds-button--danger {\n  background: transparent;\n  color: var(--color-danger);\n  border-color: var(--color-danger);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n  background: var(--color-danger);\n  color: var(--color-accent-text);\n}\n\n/* inverse: the only button allowed on an inverted band */\n.ds-button--inverse {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n  border-color: var(--color-inverse-text);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: transparent;\n  color: var(--color-inverse-text);\n}\n.ds-button--small {\n  padding: var(--space-1) var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: transparent;\n  box-shadow: 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  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__row {\n  display: flex;\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-body);\n  font-size: calc(var(--text-base) * 0.85);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: calc(var(--space-7) + var(--space-5));\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n}\n.ds-form__check {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-form__checkbox {\n  margin: 0;\n  accent-color: var(--color-accent);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  padding-top: var(--space-2);\n}\n\n/* inline: one field and its button on a line, for a subscription */\n.ds-form--inline {\n  flex-direction: row;\n  align-items: stretch;\n  gap: var(--space-2);\n}\n.ds-form--inline .ds-form__input {\n  flex: 1 1 0;\n  min-width: 0;\n  width: auto;\n}\n\n/* editor: the compose form; a large title field, a toolbar strip and a tall text field */\n.ds-form__input--title {\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-form__textarea--body {\n  min-height: calc(var(--space-7) * 3);\n  padding: var(--space-4);\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  font-size: var(--text-base);\n}\n.ds-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-4);\n  margin-bottom: calc((var(--space-2) + var(--border-width)) * -1);\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-toolbar__item {\n  color: var(--color-bar-alt-text);\n  text-decoration: none;\n}\n.ds-toolbar__item--strong {\n  font-weight: var(--weight-bold);\n}\n.ds-toolbar__item--em {\n  font-style: italic;\n}\n.ds-toolbar__count {\n  margin-left: auto;\n  font-size: var(--text-small);\n}\n\n/* table: text rows on hairlines; no box, no stripes */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--color-text);\n  font-size: calc(var(--text-base) * 0.85);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-3) var(--space-3) var(--space-3) 0;\n  text-align: left;\n  vertical-align: baseline;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n  padding-right: 0;\n}\n.ds-table thead th {\n  padding-top: var(--space-2);\n  padding-bottom: var(--space-2);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-table tbody th {\n  color: var(--color-heading);\n  font-weight: var(--weight-body);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-align: left;\n}\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-5);\n}\n\n/* list: the feed; story cards with no box, divided by hairlines */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-5) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n  padding-top: 0;\n}\n.ds-list__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__main .ds-byline {\n  margin-bottom: var(--space-3);\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-list__meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin-top: var(--space-3);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-list__thumb {\n  flex: 0 0 var(--size-thumb);\n  aspect-ratio: 4 / 3;\n  background: var(--color-fill-1);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-list__thumb--2 {\n  background: var(--color-fill-2);\n}\n.ds-list__thumb--3 {\n  background: var(--color-fill-3);\n}\n\n/* panel: a small card in the side column */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  padding: var(--space-4);\n}\n.ds-panel__title {\n  margin: 0 0 var(--space-2);\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-panel__body {\n  font-size: calc(var(--text-base) * 0.88);\n}\n.ds-panel__body p {\n  margin: 0 0 var(--space-3);\n}\n\n/* stats: a writer's figures on one line between two hairlines */\n.ds-stat {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: var(--space-4) 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  min-width: 0;\n}\n.ds-stat__figure {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* grid: editors' picks, a picture tone over a title */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-5);\n}\n.ds-grid__cell {\n  min-width: 0;\n}\n.ds-grid__tile {\n  aspect-ratio: 3 / 2;\n  margin-bottom: var(--space-3);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__tile--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__title {\n  display: block;\n  margin: 0 0 var(--space-2);\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-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__title:hover,\n.ds-grid__title.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-grid__text {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* tabs: words on a hairline, the current one underlined in the accent */\n.ds-tabs {\n  display: flex;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  margin-bottom: calc(var(--border-width) * -1);\n  padding: var(--space-3) 0;\n  color: var(--color-text-muted);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  color: var(--color-heading);\n  border-bottom-color: var(--color-accent);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-2);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-style: normal;\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  letter-spacing: calc(var(--text-small) * 0.08);\n  text-transform: uppercase;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.ds-badge--alt {\n  background: transparent;\n  color: var(--color-heading);\n  border-color: var(--color-accent-alt);\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: transparent;\n  color: var(--color-success);\n  border-color: currentColor;\n}\n.ds-badge--warning {\n  background: transparent;\n  color: var(--color-warning);\n  border-color: currentColor;\n}\n.ds-badge--danger {\n  background: transparent;\n  color: var(--color-danger);\n  border-color: currentColor;\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n/* sidebar: topics or drafts, each line with its count */\n.ds-sidebar {\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  line-height: var(--line-body);\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  padding-bottom: var(--space-2);\n  color: var(--color-heading-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  padding: var(--space-1) 0;\n}\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  float: right;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* notice: a tinted line with a strong rule at its left */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border-left: var(--border-width-strong) var(--border-style) currentColor;\n  border-radius: var(--radius-panel);\n  font-size: calc(var(--text-base) * 0.85);\n}\n.ds-notice--error {\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-2);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-1);\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-ui) * 0.04);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n  color: var(--color-heading);\n  border-bottom-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\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: var(--space-5) 0 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\\203A\";\n  margin-right: var(--space-2);\n}\n.ds-breadcrumb__current {\n  color: var(--color-heading);\n}\n\n/* dialog: a plain sheet on a veil */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-5) var(--space-4);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-4) 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}\n.ds-dialog__close {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-dialog__body {\n  padding: var(--space-2) var(--space-4) var(--space-4);\n  font-size: calc(var(--text-base) * 0.85);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* empty state: a hairline box where a list would be */\n.ds-empty {\n  padding: var(--space-6) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-bottom: var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n  margin: 0 auto var(--space-4);\n  max-width: 46ch;\n  color: var(--color-text-muted);\n}\n\n/* footer: one low strip */\n.ds-footer {\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-footer__inner {\n  max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  margin: 0 auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n.ds-footer__link {\n  color: var(--color-bar-alt-text);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: var(--link-decoration-hover);\n}\n\n/* medium windows: the side column falls under the feed, picks go two across, the search field goes */\n@media (max-width: 880px) {\n  .ds-split {\n    grid-template-columns: minmax(0, 1fr);\n    row-gap: var(--space-5);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: var(--space-5) var(--space-4);\n  }\n  .ds-nav__search {\n    display: none;\n  }\n}\n\n/* narrow windows: the sections move to a second row of the bar, cards lose their picture column */\n@media (max-width: 600px) {\n  .ds-wrap,\n  .ds-nav__inner {\n    padding-left: var(--space-3);\n    padding-right: var(--space-3);\n  }\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 0 var(--space-4);\n    padding-top: var(--space-2);\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: 0 0 100%;\n  }\n  .ds-nav__link {\n    padding: var(--space-2) 0;\n  }\n  .ds-hero {\n    padding: var(--space-6) var(--space-3);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    letter-spacing: var(--heading-tracking);\n    line-height: var(--line-heading);\n  }\n  .ds-section {\n    padding-top: var(--space-5);\n    padding-bottom: var(--space-5);\n  }\n  .ds-section--flush {\n    padding-top: 0;\n  }\n  .ds-page-header {\n    flex-wrap: wrap;\n  }\n  .ds-page-header__actions {\n    flex: 0 0 100%;\n  }\n  .ds-page-header__title,\n  .ds-prose h1,\n  .ds-form__input--title {\n    font-size: calc(var(--text-h1) * 0.85);\n  }\n  .ds-quote {\n    font-size: var(--text-large);\n  }\n  .ds-list__item {\n    gap: var(--space-3);\n    align-items: flex-start;\n  }\n  .ds-list__thumb {\n    flex-basis: calc(var(--size-thumb) * 0.55);\n    aspect-ratio: 1 / 1;\n  }\n  .ds-list__title {\n    font-size: calc(var(--text-h2) * 0.88);\n  }\n  .ds-stat {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--space-4);\n  }\n  .ds-tabs {\n    gap: var(--space-4);\n    overflow-x: auto;\n  }\n  .ds-table {\n    min-width: 60ch;\n  }\n  .ds-form__row {\n    flex-direction: column;\n  }\n  .ds-form--inline {\n    flex-direction: column;\n  }\n  .ds-toolbar__count {\n    display: none;\n  }\n  .ds-dialog {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-dialog__actions {\n    flex-wrap: wrap;\n  }\n  .ds-footer__inner {\n    padding: var(--space-4) 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: editorial minimalism, writing platform 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\">Home</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#write\">Write</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#profile\">Profile</a></li>\n    </ul>\n    <div class=\"ds-nav__aside\">\n      <input class=\"ds-nav__search\" type=\"text\" placeholder=\"Search stories\" aria-label=\"Search stories\">\n      <a class=\"ds-button ds-button--small\" href=\"#write\">New story</a>\n      <a class=\"ds-avatar\" href=\"#profile\" aria-label=\"Your profile\">HV</a>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__inner\">\n      <h1 class=\"ds-hero__title\">A quiet place to write, and to be read</h1>\n      <p class=\"ds-hero__lead\">chronoskin is a plain page and a patient audience. Write something worth an afternoon; readers who care about the subject will find it.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button ds-button--inverse\" href=\"#write\">Start writing</a>\n        <a class=\"ds-hero__link\" href=\"#story\">Read a story first</a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-wrap\">\n    <div class=\"ds-section\">\n      <span class=\"ds-label\">Picked by the editors</span>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <article class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile\"></div>\n          <a class=\"ds-grid__title\" href=\"#story\">What a year of bread taught me about patience</a>\n          <p class=\"ds-grid__text\">Hana Voss · 8 min read</p>\n        </article>\n        <article class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--2\"></div>\n          <a class=\"ds-grid__title\" href=\"#story\">The spreadsheet that ran a village library</a>\n          <p class=\"ds-grid__text\">Oren Malik · 11 min read</p>\n        </article>\n        <article class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--3\"></div>\n          <a class=\"ds-grid__title\" href=\"#story\">Learning to draw at fifty, badly and gladly</a>\n          <p class=\"ds-grid__text\">Petra Lindqvist · 6 min read</p>\n        </article>\n        <article class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--4\"></div>\n          <a class=\"ds-grid__title\" href=\"#story\">A field guide to the weeds of one car park</a>\n          <p class=\"ds-grid__text\">Sami Aro · 14 min read</p>\n        </article>\n      </div>\n    </div>\n\n    <div class=\"ds-split ds-section ds-section--flush\">\n      <div>\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">For you</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#home\">Following</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#home\">Most read</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#profile\">Bookmarks</a></li>\n        </ul>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__main\">\n              <div class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--3\">OM</span><span><a class=\"ds-byline__name\" href=\"#profile\">Oren Malik</a>2 hrs ago · 11 min read</span></div>\n              <a class=\"ds-list__title\" href=\"#story\">The spreadsheet that ran a village library</a>\n              <p class=\"ds-list__text\">For nineteen years one file kept track of four thousand books and everyone who borrowed them.</p>\n              <div class=\"ds-list__meta\"><span class=\"ds-badge ds-badge--quiet\">Work</span><span>43 recommends</span><span>2 responses</span></div>\n            </div>\n            <div class=\"ds-list__thumb ds-list__thumb--2\" aria-hidden=\"true\"></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__main\">\n              <div class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--4\">PL</span><span><a class=\"ds-byline__name\" href=\"#profile\">Petra Lindqvist</a>7 hrs ago · 6 min read</span></div>\n              <a class=\"ds-list__title\" href=\"#story\">Learning to draw at fifty, badly and gladly</a>\n              <p class=\"ds-list__text\">The first hundred drawings are for the bin. Nobody tells you how freeing that is.</p>\n              <div class=\"ds-list__meta\"><span class=\"ds-badge ds-badge--quiet\">Craft</span><span>118 recommends</span><span>9 responses</span></div>\n            </div>\n            <div class=\"ds-list__thumb ds-list__thumb--3\" aria-hidden=\"true\"></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__main\">\n              <div class=\"ds-byline\"><span class=\"ds-avatar ds-avatar--1\">SA</span><span><a class=\"ds-byline__name\" href=\"#profile\">Sami Aro</a>Yesterday · 14 min read</span></div>\n              <a class=\"ds-list__title\" href=\"#story\">A field guide to the weeds of one car park</a>\n              <p class=\"ds-list__text\">Thirty-one species between the ticket machine and the exit barrier, counted over one summer.</p>\n              <div class=\"ds-list__meta\"><span class=\"ds-badge ds-badge--quiet\">Nature</span><span>76 recommends</span><span>4 responses</span></div>\n            </div>\n          </li>\n          <li class=\"ds-list__item\">\n            <div class=\"ds-list__main\">\n              <div class=\"ds-byline\"><span class=\"ds-avatar\">HV</span><span><a class=\"ds-byline__name\" href=\"#profile\">Hana Voss</a>2 days ago · 8 min read</span></div>\n              <a class=\"ds-list__title\" href=\"#story\">What a year of bread taught me about patience</a>\n              <p class=\"ds-list__text\">Fifty-two loaves, most of them wrong, and the one thing that finally made them right.</p>\n              <div class=\"ds-list__meta\"><span class=\"ds-badge\">Staff pick</span><span>204 recommends</span><span>17 responses</span></div>\n            </div>\n            <div class=\"ds-list__thumb\" aria-hidden=\"true\"></div>\n          </li>\n        </ul>\n      </div>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">This week's prompt</h2>\n          <div class=\"ds-panel__body\">\n            <p>Describe a tool you have owned for more than ten years, and what it has outlasted.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#write\">Write about it</a>\n          </div>\n        </section>\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Topics</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">1,204</span><a class=\"ds-link ds-link--quiet\" href=\"#home\">Work</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">986</span><a class=\"ds-link ds-link--quiet\" href=\"#home\">Craft</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">742</span><a class=\"ds-link ds-link--quiet\" href=\"#home\">Food</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">610</span><a class=\"ds-link ds-link--quiet\" href=\"#home\">Nature</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">388</span><a class=\"ds-link ds-link--quiet\" href=\"#home\">Memory</a></li>\n          </ul>\n        </aside>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Writers to follow</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">64 stories</span><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Oren Malik</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">42 stories</span><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Hana Voss</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">31 stories</span><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Sami Aro</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">18 stories</span><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Petra Lindqvist</a></li>\n          </ul>\n        </aside>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Most recommended this week</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">204</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">A year of bread</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">118</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">Learning to draw at fifty</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">97</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">Letters I never posted</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">76</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">Weeds of one car park</a></li>\n          </ul>\n        </aside>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Your drafts</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">Today</span><a class=\"ds-link ds-link--quiet\" href=\"#write\">Notes on a borrowed kitchen</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">Monday</span><a class=\"ds-link ds-link--quiet\" href=\"#write\">Untitled</a></li>\n          </ul>\n        </aside>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"story\">\n  <div class=\"ds-wrap ds-wrap--narrow\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Food</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">A year of bread</li>\n    </ol>\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__copy\">\n        <h1 class=\"ds-page-header__title\">What a year of bread taught me about patience</h1>\n        <p class=\"ds-page-header__text\">Fifty-two loaves, most of them wrong.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#profile\">Follow</a>\n      </div>\n    </header>\n\n    <div class=\"ds-section ds-section--first\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-byline\"><span class=\"ds-avatar\">HV</span><span><a class=\"ds-byline__name\" href=\"#profile\">Hana Voss</a>3 May 2016 · 8 min read</span></div>\n        <article class=\"ds-prose\" data-component=\"typography\">\n          <p><span class=\"ds-prose__dropcap\">E</span>very Sunday for a year I baked one loaf. I am not a patient person, and I chose bread for exactly that reason: it cannot be hurried, argued with or fixed afterwards. You mix four things, and then you <strong>wait</strong>.</p>\n          <p>The first loaf was a brick. So were the next eleven. I kept notes in a file called <code>bread.txt</code>, one line a week, and for three months every line said the same thing.</p>\n          <blockquote class=\"ds-quote\">\n            <p class=\"ds-quote__text\">You mix four things, and then you wait. Everything I got wrong, I got wrong by not waiting.</p>\n          </blockquote>\n          <h1>What changed</h1>\n          <p>In week fourteen I left the dough overnight by accident. It was the first loaf anyone asked for a second slice of.</p>\n          <h2>The four things</h2>\n          <ul>\n            <li>flour, weighed and not scooped;</li>\n            <li>water, a little warmer than your hand;</li>\n            <li>salt, more than seems right;</li>\n            <li>time, more than seems reasonable.</li>\n          </ul>\n          <h3>A note on ovens</h3>\n          <p>Mine is small, old and runs twenty degrees hot. None of that turned out to matter.</p>\n        </article>\n        <p class=\"ds-linkrow\" data-component=\"links\">\n          <a class=\"ds-link\" href=\"#story\">More stories about food</a>\n          <a class=\"ds-link is-visited\" href=\"#story\">Notes on a borrowed kitchen</a>\n          <a class=\"ds-link is-hover\" href=\"#profile\">Everything by Hana Voss</a>\n          <a class=\"ds-link is-active\" href=\"#write\">Write a response</a>\n          <a class=\"ds-link ds-link--quiet\" href=\"#home\">Report this story</a>\n        </p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"write\">\n  <div class=\"ds-wrap ds-wrap--narrow\">\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Drafts</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Notes on a borrowed kitchen</li>\n    </ol>\n    <header class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__copy\">\n        <h1 class=\"ds-page-header__title\">Draft</h1>\n        <p class=\"ds-page-header__text\">Saved two minutes ago. Only you can see it.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#story\">Preview</a>\n        <a class=\"ds-button\" href=\"#write\">Publish</a>\n      </div>\n    </header>\n\n    <div class=\"ds-section ds-section--first\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Drafts save themselves.</span> Close the page whenever you like.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not published yet.</span> The link below is already used by another of your stories.</p>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#write\">\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Title</span><input class=\"ds-form__input ds-form__input--title\" type=\"text\" value=\"Notes on a borrowed kitchen\"></label>\n          <div class=\"ds-form__field\">\n            <span class=\"ds-form__label\">Story</span>\n            <div class=\"ds-toolbar\">\n              <a class=\"ds-toolbar__item ds-toolbar__item--strong\" href=\"#write\">Bold</a>\n              <a class=\"ds-toolbar__item ds-toolbar__item--em\" href=\"#write\">Italic</a>\n              <a class=\"ds-toolbar__item\" href=\"#write\">Heading</a>\n              <a class=\"ds-toolbar__item\" href=\"#write\">Quote</a>\n              <a class=\"ds-toolbar__item\" href=\"#write\">Link</a>\n              <span class=\"ds-toolbar__count\">312 words</span>\n            </div>\n            <textarea class=\"ds-form__textarea ds-form__textarea--body\" rows=\"8\" placeholder=\"Tell your story\">For six weeks this spring I cooked in a kitchen that was not mine. The knives were sharper than my own, the pans were heavier, and nothing was where I reached for it.</textarea>\n          </div>\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Topic</span>\n              <select class=\"ds-form__select\"><option>Food</option><option>Work</option><option>Craft</option><option>Nature</option></select>\n            </label>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Link</span><input class=\"ds-form__input is-error\" type=\"text\" value=\"borrowed-kitchen\"><span class=\"ds-form__error\">You already have a story at this link.</span></label>\n          </div>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Let readers write responses</span></label>\n          <div class=\"ds-form__actions ds-buttonrow\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"submit\">Publish</button>\n            <a class=\"ds-button is-hover\" href=\"#write\">Schedule</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#story\">Preview</a>\n            <a class=\"ds-button ds-button--danger\" href=\"#profile\">Delete draft</a>\n            <button class=\"ds-button\" type=\"button\" disabled>Add to a series</button>\n          </div>\n        </form>\n\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n            <div class=\"ds-dialog__head\">\n              <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Publish this story?</h2>\n              <a class=\"ds-dialog__close\" href=\"#write\" aria-label=\"Close\">×</a>\n            </div>\n            <div class=\"ds-dialog__body\">\n              <p>It will appear on your profile and under Food. You can edit it afterwards.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#write\">Not yet</a>\n              <a class=\"ds-button\" href=\"#story\">Publish</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"profile\">\n  <div class=\"ds-wrap\">\n    <ol class=\"ds-breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Home</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Hana Voss</li>\n    </ol>\n    <header class=\"ds-page-header\">\n      <span class=\"ds-avatar ds-avatar--large\">HV</span>\n      <div class=\"ds-page-header__copy\">\n        <h1 class=\"ds-page-header__title\">Hana Voss</h1>\n        <p class=\"ds-page-header__text\">Writes about kitchens, small tools and getting things wrong slowly.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#write\">New story</a>\n      </div>\n    </header>\n    <ul class=\"ds-stat\" data-component=\"stats\">\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">42</span><span class=\"ds-stat__label\">Stories</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">1,208</span><span class=\"ds-stat__label\">Followers</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">96</span><span class=\"ds-stat__label\">Following</span></li>\n      <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">8,430</span><span class=\"ds-stat__label\">Reads this month</span></li>\n    </ul>\n\n    <div class=\"ds-split ds-section ds-section--first\">\n      <div class=\"ds-stack\">\n        <div>\n          <ul class=\"ds-tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#profile\">Stories</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#profile\">Responses</a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#profile\">Bookmarks</a></li>\n          </ul>\n          <div class=\"ds-table__wrap\">\n            <table class=\"ds-table\" data-component=\"table\">\n              <caption class=\"ds-table__caption\">A read is a view that reached the end. Showing 5 of 42 stories.</caption>\n              <thead>\n                <tr>\n                  <th scope=\"col\">Story</th>\n                  <th scope=\"col\">Status</th>\n                  <th scope=\"col\" class=\"ds-table__num\">Views</th>\n                  <th scope=\"col\" class=\"ds-table__num\">Reads</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#story\">What a year of bread taught me about patience</a></th><td><span class=\"ds-badge ds-badge--success\">Published</span></td><td class=\"ds-table__num\">6,120</td><td class=\"ds-table__num\">3,904</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#story\">The knife my grandmother sharpened</a></th><td><span class=\"ds-badge ds-badge--success\">Published</span></td><td class=\"ds-table__num\">2,871</td><td class=\"ds-table__num\">1,650</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#write\">Notes on a borrowed kitchen</a></th><td><span class=\"ds-badge ds-badge--warning\">Draft</span></td><td class=\"ds-table__num\">0</td><td class=\"ds-table__num\">0</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#story\">Twelve ways to ruin a stew</a></th><td><span class=\"ds-badge ds-badge--success\">Published</span></td><td class=\"ds-table__num\">1,944</td><td class=\"ds-table__num\">1,212</td></tr>\n                <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#story\">On a recipe I got wrong in print</a></th><td><span class=\"ds-badge ds-badge--danger\">Withdrawn</span></td><td class=\"ds-table__num\">508</td><td class=\"ds-table__num\">164</td></tr>\n              </tbody>\n            </table>\n          </div>\n          <div class=\"ds-table__foot\">\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><a class=\"ds-pagination__link is-disabled\" href=\"#profile\">Newer</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#profile\">1</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#profile\">2</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#profile\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#profile\">Older</a></li>\n            </ul>\n            <div class=\"ds-badgerow\" data-component=\"badge\">\n              <span class=\"ds-badge\">Staff pick</span>\n              <span class=\"ds-badge ds-badge--alt\">Series</span>\n              <span class=\"ds-badge ds-badge--quiet\">42</span>\n              <span class=\"ds-badge ds-badge--success\">Published</span>\n              <span class=\"ds-badge ds-badge--warning\">Draft</span>\n              <span class=\"ds-badge ds-badge--danger\">Withdrawn</span>\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <span class=\"ds-label\">Bookmarks</span>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <svg class=\"ds-empty__icon\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><path d=\"M12 6h16v28l-8-7-8 7z\"/></svg>\n            <h3 class=\"ds-empty__title\">No bookmarks yet</h3>\n            <p class=\"ds-empty__text\">Stories you save to read later will wait for you here.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#home\">Find something to read</a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-stack\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Account</h2>\n          <div class=\"ds-panel__body\">\n            <form class=\"ds-form\" action=\"#profile\">\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Name</span><input class=\"ds-form__input\" type=\"text\" value=\"Hana Voss\"></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Email</span><input class=\"ds-form__input\" type=\"text\" value=\"hana@voss.example\"></label>\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Email me when someone responds</span></label>\n              <div class=\"ds-form__actions\">\n                <button class=\"ds-button\" type=\"submit\">Save</button>\n                <a class=\"ds-button ds-button--danger\" href=\"#profile\">Close account</a>\n              </div>\n            </form>\n          </div>\n        </section>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Settings</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\">Account</li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Notifications</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Reading history</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#profile\">Export your stories</a></li>\n          </ul>\n        </aside>\n        <aside class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Your series</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">12</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">A year of bread</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">7</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">Small tools</a></li>\n            <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__count\">4</span><a class=\"ds-link ds-link--quiet\" href=\"#story\">Borrowed kitchens</a></li>\n          </ul>\n        </aside>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">This month</h2>\n          <div class=\"ds-panel__body\">\n            <p>Your stories were read to the end 3,904 times, a third more than in April.</p>\n            <a class=\"ds-link\" href=\"#profile\">See all figures</a>\n          </div>\n        </section>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <span>© 2016 chronoskin. Words belong to the people who wrote them.</span>\n    <span class=\"ds-footer__links\">\n      <a class=\"ds-footer__link\" href=\"#home\">About</a>\n      <a class=\"ds-footer__link\" href=\"#home\">Help</a>\n      <a class=\"ds-footer__link\" href=\"#home\">Terms</a>\n      <a class=\"ds-footer__link\" href=\"#home\">Privacy</a>\n    </span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.editorial-minimal.app.s03.p03.t03.u03\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"editorial-minimal\",\n    \"years\": [\n      2012,\n      2018\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-em-3333\",\n  \"short\": \"v1-em-3333\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f3eee1;\n  --color-canvas: #f3eee1;\n  --color-surface: #fbf8ef;\n  --color-surface-alt: #ebe5d5;\n  --color-surface-strong: #dfd8c5;\n  --color-bar: #fbf8ef;\n  --color-bar-text: #1f2a3d;\n  --color-bar-alt: #ebe5d5;\n  --color-bar-alt-text: #5c5a52;\n  --color-inverse: #132847;\n  --color-inverse-text: #f3eee1;\n  --color-text: #2e2c28;\n  --color-text-muted: #77736a;\n  --color-heading: #132847;\n  --color-heading-alt: #8a4f12;\n  --color-link: #0058b0;\n  --color-link-quiet: #5c5a52;\n  --color-link-visited: #4a4f8a;\n  --color-link-hover: #003f8f;\n  --color-link-active: #18345b;\n  --color-border: #d3ccb9;\n  --color-border-strong: #18345b;\n  --color-border-muted: #e3ddcc;\n  --color-accent: #0058b0;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #c16e15;\n  --color-fill-1: #18345b;\n  --color-fill-2: #6f8fb3;\n  --color-fill-3: #b08a5b;\n  --color-fill-4: #7d8471;\n  --color-button: #0058b0;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #fbf8ef;\n  --color-button-secondary-text: #0058b0;\n  --color-input: #fffdf7;\n  --color-input-text: #1f2a3d;\n  --color-input-border: #bdb5a0;\n  --color-disabled: #dfd8c5;\n  --color-disabled-text: #9a9585;\n  --color-danger: #a3231b;\n  --color-danger-surface: #f7e4dc;\n  --color-success: #3d7a3a;\n  --color-warning: #a36a00;\n  --color-notice: #e3e9ee;\n  --color-notice-text: #18345b;\n  --color-focus: #0058b0;\n  --color-shadow: rgb(19 40 71 / 0.14);\n  --color-overlay: rgb(19 40 71 / 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Charter, \"Bitstream Charter\", \"Source Serif Pro\", Georgia, Cambria, \"Times New Roman\", serif;\n  --font-heading: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"Zilla Slab\", Georgia, serif;\n  --font-ui: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n  --font-mono: \"Andale Mono\", \"Lucida Console\", \"Courier New\", monospace;\n  --text-base: 17px;\n  --text-small: 11px;\n  --text-ui: 13px;\n  --text-large: 20px;\n  --text-display: 38px;\n  --text-h1: 30px;\n  --text-h2: 23px;\n  --text-h3: 18px;\n  --line-body: 1.5;\n  --line-heading: 1.2;\n  --line-display: 1.18;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 400;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 4px;\n  --radius-panel: 4px;\n  --radius-pill: 4px;\n  --radius-page: 4px;\n  --shadow-panel: 0 1px 4px var(--color-shadow);\n  --shadow-control: 0 1px 2px var(--color-shadow);\n  --shadow-control-hover: 0 2px 5px var(--color-shadow);\n  --shadow-control-pressed: inset 0 1px 2px var(--color-shadow);\n  --shadow-dialog: 0 2px 12px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-link-active);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: box-shadow 0.15s ease, background-color 0.15s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}
