{
  "id": "v1-em-1111",
  "long_id": "v1.editorial-minimal.blog.s01.p01.t01.u01",
  "name": "Editorial minimalism journal",
  "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": "blog",
  "mode": "pure",
  "viewport": {
    "width": 1280,
    "fluid": false
  },
  "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: one narrow column of large serif text on a white or near-white page, a thin header, hairline rules and a single accent colour, with almost no boxes, fills or shadows. It was the look of writing platforms, single-author essay sites, small magazines and the blogs of design studios once web fonts and high-density screens made long text comfortable to read. Because there is so little chrome, the style lives in its typography: the size of the text, its line height, the measure and the white space around each block.",
  "url": "https://chrono.skin/s/v1-em-1111",
  "preview_url": "https://chrono.skin/s/v1-em-1111/specimen.html",
  "files": {
    "STYLE.md": "# Editorial minimalism journal\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: one narrow column of large serif text on a white or near-white page, a thin header, hairline rules and a single accent colour, with almost no boxes, fills or shadows. It was the look of writing platforms, single-author essay sites, small magazines and the blogs of design studios once web fonts and high-density screens made long text comfortable to read. Because there is so little chrome, the style lives in its typography: the size of the text, its line height, the measure and the white space around each block.\n\n## Layout\n\n- The page is a fixed centred column of `--size-page` (700px), about 68 characters of body text, designed for a 1280px viewport. Everything sits in this column through `.ds-wrap`: header, hero, lists, forms and footer text. Nothing is wider than the column except the inverted `.ds-letters` band and the pale footer strip, whose backgrounds run edge to edge while their content stays in the column.\n- Navigation is one thin bar, `--size-nav` (72px) tall, with a hairline under it: the brand at the left edge of the column, three or four words at the right edge. There is no second row, no search and no button in it.\n- The home page is a stack in the column: `.ds-hero`, then sections that each begin with a `.ds-rule` (a small label centred on a hairline), then the `.ds-letters` band and the footer. White space separates the sections, never a fill.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (title, one italic line, one action at the right, closed by a hairline), then the working content in the same column: `.ds-tabs` come first under the page header, then the table or the text. An essay page widens `.ds-wrap` with `--margins`: the text keeps its 700px column and two `--size-margin` (200px) note columns appear beside it, the left one for the date and length (`.ds-margin--left`, set right-aligned against the text), the right one for a `.ds-sidebar`. Below 1240px the notes fall back into the column, before and after the text.\n- Views. The specimen is a single-author journal of walking essays with four views. `home` is the journal front: the hero, the four most recent essays, the four series, the book panel and the letters band. `essay` is one essay: breadcrumb, page header, the text with its drop cap, pull quote, parts and footnotes between the two margin columns, then further reading. `archive` is the list page: tabs, the table of essays with pagination and the label legend, and the empty translations section. `about` is the author page: a short text, the figures, then the letter form with its notices, the button row and the open discard dialog. Below 760px the navigation wraps under the brand, the grid folds to two columns, form rows stack and a wide table scrolls inside `.ds-table__wrap` while the page itself never scrolls sideways.\n- Spacing scale: `--space-1` 4px (inside badges, under a title), `--space-2` 8px (between a label and its field, between adjacent controls), `--space-3` 16px (cell padding, gaps in a button row), `--space-4` 24px (paragraph gap, list row padding, column side padding, grid gutter), `--space-5` 40px (between stacked blocks, under a rule or tabs, panel padding, the margin column gap), `--space-6` 64px (between sections), `--space-7` 104px (above the hero).\n- Other sizes: `--size-dialog` 460px (dialog and subscription form), `--size-icon` 40px.\n\n## Typography and colour roles\n\n- Body and headings share one book serif (`--font-body`, `--font-heading`); the references used commercial text faces and open ones such as Cardo, so the stack is Iowan Old Style, Palatino, then EB Garamond and Georgia. `--font-ui` is a humanist sans used only small: navigation, buttons, labels, meta lines, table heads, footer. `--font-mono` is for inline code.\n- Body is `--text-base` 20px at `--line-body` 1.6 in `--color-text`. Headings are the same face at regular weight (`--weight-heading` 400): hierarchy comes from size and white space, not from bold or colour. `--weight-bold` 700 is for `strong` only; `--weight-ui` 600 for the small sans.\n- Sizes: `--text-display` 44px (hero title only), `--text-h1` 36px (page title, part titles in an essay, figures), `--text-h2` 26px (list titles, section headings, pull quotes, panel and dialog titles), `--text-h3` 20px (brand name, grid titles), `--text-large` 24px (hero lead, first paragraph, page header line), `--text-small` 13px (labels and meta), `--text-ui` 12px (navigation, buttons, tabs, form labels). Tables, form fields, notices and footnotes use the body face at 85% or 80% of `--text-base`, a one-off size made with `calc()`.\n- Labels and meta lines are always small capitals of the sans: `text-transform: uppercase` with letter spacing of a tenth of the size (`calc(var(--text-small) * 0.1)`). This is part of the structure and does not follow `--ui-transform`, which sets navigation, buttons, tabs and form labels; those carry a spacing of 4% of their size. An `h3` in running text is such a label, in `--color-heading-alt`.\n- The drop cap (`.ds-prose__dropcap`) is three lines deep: its size is computed from `--text-base` and `--line-body`, and it shares a baseline with an unseen strut in the text face set two lines down, so it stands on the third baseline with any type set. The pull quote is `--text-h2` at a line height of 1.35.\n- Links in text are `--color-link` with `--link-decoration`; hover changes to `--color-link-hover`. Quiet links (`--color-link-quiet`, `--link-decoration-quiet`) are for titles, breadcrumbs and margin lists.\n- Which text sits on which fill (the convention of this era, kept by every layout and token set):\n  - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and `--fill-panel` carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and the link colours. The surfaces are the page colour or a pale step from it.\n  - `--fill-bar` carries `--color-bar-text` (navigation and table head); the brand name is `--color-bar-text`. `--fill-bar-alt` carries `--color-bar-alt-text` only.\n  - `--fill-inverse` carries `--color-inverse-text`; quieter text on it is the same colour at an opacity of 0.65 to 0.75. The only button allowed on it is `.ds-button--inverse`.\n  - `--fill-accent` carries `--color-accent-text`. `--color-danger` used as a fill also carries `--color-accent-text`.\n  - `--color-fill-1` to `--color-fill-4` are picture tones: they stand where a photograph or cover would be. They carry nothing but a numeral, mark or short title in `--color-inverse-text`, never running text.\n  - `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border; `--fill-button-hover` carries `--color-button-hover-text`. `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline. Buttons stand on page and surface colours only.\n  - `--fill-input` carries `--color-input-text` inside `--color-input-border`; `--color-notice` carries `--color-notice-text`; `--color-danger-surface` carries `--color-danger`; `--color-disabled` carries `--color-disabled-text`.\n  - `--color-success`, `--color-warning` and `--color-danger` are text and outline colours on the page (status labels, the destructive button), so each must be readable on `--color-page`.\n- `--color-accent` is the single accent: the underline of the current navigation item, tab and page number, the checkbox, the default badge. `--color-accent-alt` only outlines the `--alt` badge.\n- Rules: hairlines are `--border-width` in `--color-border`; faint row dividers use `--color-border-muted`; `--border-width-strong` in `--color-border-strong` marks the top of a pull quote, the figures and the foot of a table head. `--radius-page` and `--shadow-panel` dress the picture tones, `--radius-panel` the panel and dialog, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: the slash of the breadcrumb is `--color-border-strong` at an opacity of 0.4; text on the inverted band is dimmed by opacity.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, the body face, size and line height. It has no width; `.ds-wrap` is the column.\n- `.ds-wrap`: the 700px column with 24px side padding. `--margins` turns it into three columns for an essay: `.ds-margin--left`, `.ds-wrap__main`, `.ds-margin--right`; `.ds-margin__text` is a note under a label. `.ds-section` gives a block 64px above and below (`--first` 40px above, directly under a page header; `--flush` none above, after another section). `.ds-stack` stacks blocks 40px apart.\n- `.ds-label`: a small tracked capital line: a kicker above a title, a date in the margin. `.ds-rule` is the section head: the same lettering centred on a hairline.\n- `.ds-brand`: the site's mark and name at the left of the navigation. `.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 in the heading face at `--text-h3`. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the thin bar on `--fill-bar` with a hairline below. `.ds-nav__inner` is the column; `.ds-nav__links` holds `.ds-nav__link` items; the current one (`is-current`) has a `--border-width-strong` underline in `--color-accent`. 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 statement of the site at the top of the home page, unboxed: a `.ds-label`, `.ds-hero__title` at `--text-display`, `.ds-hero__lead` at `--text-large` and `.ds-hero__actions` with one button and one `.ds-link--more`.\n- `.ds-page-header`: head of an inner page, after the breadcrumb: `.ds-page-header__copy` with `.ds-page-header__title` (`--text-h1`) and one italic `.ds-page-header__text` line, `.ds-page-header__actions` at the right with a single button, and a hairline below.\n- `.ds-prose`: running text: `h1` (a centred part title), `h2`, `h3` (a label), paragraphs, lists, `strong`, `code`, `sup`. `.ds-prose__lead` is a larger first 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 pull quote between a strong and a hairline rule. `.ds-footnotes` with `.ds-footnotes__item` is the numbered note list under an essay.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for titles and meta; `--more` is a small capital link with a chevron. `.ds-linklist` with `.ds-linklist__item` sets links as rows on faint rules.\n- `.ds-button`: a small-capital word in a bordered box on `--fill-button`; with this pack's palette it is an outline that fills on hover. Variants: `--secondary` (hairline border, accent text), `--danger` (outlined in `--color-danger`, filled on hover; destructive actions only), `--inverse` (on the inverted band), `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 16px apart.\n- `.ds-form`: vertical form, 24px between fields. `.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.\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` is the row under it with the pagination and a legend.\n- `.ds-list`: the journal: `.ds-list__item` rows on faint rules, each a `.ds-list__title` (`--text-h2`), an italic `.ds-list__text` line and a small capital `.ds-list__meta` line. `.ds-list__more` holds the link to the archive.\n- `.ds-panel`: the one bordered box of a page, on `--fill-panel` with 40px padding: `.ds-panel__title` and `.ds-panel__body`. `.ds-panel__split` puts a `.ds-panel__art` cover (a picture tone with its title) beside `.ds-panel__copy`.\n- `.ds-stat`: the row of figures between a strong rule above and a hairline below. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` (`--text-h1`) over a `.ds-stat__label`, divided by vertical hairlines.\n- `.ds-grid`: four equal columns of `.ds-grid__cell`, each a `.ds-grid__tile` in a picture tone (`--2`, `--3`, `--4` for the others) holding a numeral, with `.ds-grid__title` and `.ds-grid__text` below. The cell has no border.\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 counts. Status variants are outlines in their own colour: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a short list in the margin: `.ds-sidebar__title` over a hairline, `.ds-sidebar__list` of `.ds-sidebar__item`; 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 small words and numbers, `.ds-pagination__link`; `is-current` is underlined in the accent, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small capital trail of `.ds-breadcrumb__item` separated by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a veil of `--color-overlay` centring a plain `.ds-dialog__box` with a strong hairline border: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, right-aligned `.ds-dialog__actions`.\n- `.ds-empty`: a centred message closed by a hairline, standing where a list would be: `.ds-empty__icon`, `.ds-empty__title`, an italic `.ds-empty__text` and one button.\n- `.ds-letters`: the inverted band that closes the home page: a label, `.ds-letters__title`, `.ds-letters__text` and an inline `.ds-letters__form`.\n- `.ds-footer`: one pale strip on `--fill-bar-alt`: `.ds-footer__inner` holds a line of text and `.ds-footer__links` of `.ds-footer__link`.\n\n## Never\n\n- `content-width <= 700px`: text stays in the reading column.\n- `block-gap <= 104px`: the largest space is the one above the hero.\n- `font-size <= 110px`: the three-line drop cap is the largest letter; the largest title is 44px.\n- `font-size >= 12px`: the small sans of navigation and buttons is the smallest text.\n- `font-weight <= 700`: headings are regular; bold is for emphasis in text.\n- `font-families <= 3`: one serif, one small sans, monospace for code.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 1.3px`: only small capitals are tracked, by a tenth of their size.\n- `box-shadow = none`: nothing is lifted off the page; blocks are separated by white space or a hairline.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 3px`: only controls are eased; panels and pictures are square.\n- `border-width <= 2px`: rules are 1px hairlines; 2px marks the current item, a pull quote 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 section is a `.ds-section` in the `.ds-wrap` column that begins with a `.ds-rule`; separate things with white space from the `--space-*` scale first, a hairline second, and a box only once per page (`.ds-panel`). New small text is a `.ds-label`; new titles take `--text-h2` in the heading face at `--weight-heading`. Keep to the fill and text pairs listed above so that the component works with every palette of the era: never put running text on a picture tone, and put only `.ds-button--inverse` on an inverted band.\n",
    "components.css": ":root {\n  --size-page: 700px;\n  --size-margin: 200px;\n  --size-nav: 72px;\n  --size-dialog: 460px;\n  --size-icon: 40px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 16px;\n  --space-4: 24px;\n  --space-5: 40px;\n  --space-6: 64px;\n  --space-7: 104px;\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 measure; --margins adds a note column on either side of it */\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--margins {\n  display: grid;\n  grid-template-columns: var(--size-margin) minmax(0, var(--size-page)) var(--size-margin);\n  column-gap: var(--space-5);\n  justify-content: center;\n  align-items: start;\n  max-width: none;\n}\n.ds-wrap__main {\n  grid-column: 2;\n  grid-row: 1;\n  min-width: 0;\n}\n.ds-margin {\n  grid-row: 1;\n  padding-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-margin--left {\n  grid-column: 1;\n  text-align: right;\n}\n.ds-margin--right {\n  grid-column: 3;\n}\n.ds-margin__text {\n  margin: var(--space-2) 0 0;\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\n/* label: the small tracked capitals of meta lines and section heads */\n.ds-label {\n  display: block;\n  margin: 0;\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/* rule: a section head, its label centred on a hairline */\n.ds-rule {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-5);\n  color: var(--color-heading);\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.ds-rule::before,\n.ds-rule::after {\n  content: \"\";\n  flex: 1 1 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* nav: a thin bar as wide as the column, brand left, three or four words 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: center;\n  justify-content: space-between;\n  gap: var(--space-4);\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-1));\n  height: calc(var(--space-4) + var(--space-1));\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-heading);\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: center;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) 0;\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-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);\n}\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-accent);\n}\n/* the current view marks its navigation item; an essay marks Journal */\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(#essay:target) .ds-nav__link[href=\"#home\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"] {\n  border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n  border-bottom-color: var(--color-accent);\n}\n\n/* hero: the site's statement, set large in the column; no band, no picture */\n.ds-hero {\n  padding: var(--space-7) 0 var(--space-6);\n}\n.ds-hero__title {\n  margin: var(--space-3) 0 var(--space-4);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-5);\n  max-width: 52ch;\n  font-size: var(--text-large);\n  line-height: var(--line-body);\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\n/* page header: the head of an inner page; title and one line, the action at the right, closed by a hairline */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-5);\n  padding: var(--space-4) 0 var(--space-5);\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: var(--space-2) 0 var(--space-2);\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  font-style: italic;\n  line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n  padding-bottom: var(--space-1);\n}\n\n/* typography: the essay itself */\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-4);\n  font-size: var(--text-h1);\n  text-align: center;\n}\n.ds-prose h1:first-child {\n  margin-top: 0;\n}\n.ds-prose h2 {\n  margin: var(--space-5) 0 var(--space-3);\n  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\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-4);\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-alt);\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.8);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose sup {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  line-height: 0;\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\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: larger than the text, between two rules, the upper one strong */\n.ds-quote {\n  margin: var(--space-5) 0;\n  padding: var(--space-4) 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\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: 1.35;\n  letter-spacing: var(--heading-tracking);\n}\n.ds-quote__text {\n  margin: 0;\n}\n.ds-quote__source {\n  display: block;\n  margin-top: var(--space-3);\n}\n.ds-footnotes {\n  margin: var(--space-6) 0 0;\n  padding: var(--space-4) 0 0 var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text-muted);\n  font-size: calc(var(--text-base) * 0.8);\n}\n.ds-footnotes__item {\n  margin-bottom: var(--space-2);\n  padding-left: var(--space-1);\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-linklist {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-linklist__item {\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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/* 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/* 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/* 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 journal; a title, one line under it, a meta line */\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__title {\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  font-style: italic;\n}\n.ds-list__meta {\n  display: block;\n  margin-top: var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-list__more {\n  margin: var(--space-4) 0 0;\n}\n\n/* panel: the one box on a page */\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-5);\n}\n.ds-panel__title {\n  margin: var(--space-2) 0 var(--space-2);\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-panel__body p {\n  margin: 0 0 var(--space-4);\n}\n.ds-panel__split {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n}\n.ds-panel__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-panel__art {\n  flex: 0 0 var(--size-margin);\n  aspect-ratio: 3 / 4;\n  display: flex;\n  align-items: flex-end;\n  padding: var(--space-3);\n  background: var(--color-fill-3);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  line-height: var(--line-heading);\n}\n\n/* stats: figures in the display face on a ruled line */\n.ds-stat {\n  display: flex;\n  margin: 0;\n  padding: var(--space-4) 0;\n  list-style: none;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 var(--space-4);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n  padding-left: 0;\n  border-left: 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(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n\n/* grid: series, each a picture tone with its name underneath */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  min-width: 0;\n  color: var(--color-text);\n  text-decoration: none;\n}\n.ds-grid__tile {\n  display: flex;\n  align-items: flex-end;\n  aspect-ratio: 4 / 5;\n  margin-bottom: var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-fill-1);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: 1;\n}\n.ds-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  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}\n.ds-grid__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\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: a short list of links in the margin */\n.ds-sidebar {\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\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  color: var(--color-text-muted);\n}\n.ds-sidebar__item.is-current {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\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  letter-spacing: calc(var(--text-small) * 0.1);\n  text-transform: uppercase;\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin-right: var(--space-2);\n  color: var(--color-border-strong);\n  opacity: 0.4;\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 centred sentence between two hairlines */\n.ds-empty {\n  padding: var(--space-6) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-bottom: var(--space-3);\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: 44ch;\n  color: var(--color-text-muted);\n  font-style: italic;\n}\n\n/* letters: the inverted band that closes the home page with the subscription */\n.ds-letters {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  padding: var(--space-6) 0;\n  text-align: center;\n}\n.ds-letters__title {\n  margin: var(--space-3) 0 var(--space-2);\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-letters__text {\n  margin: 0 auto var(--space-4);\n  max-width: 46ch;\n  opacity: 0.75;\n}\n.ds-letters__form {\n  max-width: var(--size-dialog);\n  margin: 0 auto;\n}\n.ds-letters .ds-label {\n  color: inherit;\n  opacity: 0.65;\n}\n\n/* footer: one quiet 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  letter-spacing: calc(var(--text-small) * 0.1);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: uppercase;\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/* a window too narrow for the margins: notes fall into the column, before or after the text */\n@media (max-width: 1240px) {\n  .ds-wrap--margins {\n    display: block;\n    max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n  }\n  .ds-margin {\n    padding: var(--space-4) 0;\n    text-align: left;\n  }\n  .ds-margin--left {\n    padding-bottom: 0;\n  }\n}\n\n/* narrow windows: the column fills the screen, rows wrap, a wide table scrolls inside its own box */\n@media (max-width: 760px) {\n  .ds-wrap,\n  .ds-wrap--margins,\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    gap: 0 var(--space-4);\n    padding-top: var(--space-3);\n    padding-bottom: var(--space-2);\n    min-height: 0;\n  }\n  .ds-nav__links {\n    flex: 0 0 100%;\n    gap: var(--space-4);\n  }\n  .ds-nav__link {\n    padding: var(--space-2) 0 var(--space-1);\n  }\n  .ds-hero {\n    padding: var(--space-6) 0 var(--space-5);\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    letter-spacing: var(--heading-tracking);\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-direction: column;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding-bottom: var(--space-4);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-page-header__title,\n  .ds-prose h1,\n  .ds-letters__title {\n    font-size: calc(var(--text-h1) * 0.8);\n  }\n  .ds-prose h1 {\n    margin-top: var(--space-5);\n  }\n  .ds-quote {\n    font-size: var(--text-large);\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: var(--space-4) var(--space-3);\n  }\n  .ds-grid__tile {\n    aspect-ratio: 5 / 4;\n  }\n  .ds-panel {\n    padding: var(--space-4);\n  }\n  .ds-panel__split {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--space-4);\n  }\n  .ds-panel__art {\n    flex: 0 0 auto;\n    aspect-ratio: 5 / 2;\n  }\n  .ds-stat {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--space-4) 0;\n  }\n  .ds-stat__item {\n    padding: 0 var(--space-3);\n  }\n  .ds-stat__item:nth-child(odd) {\n    padding-left: 0;\n    border-left: 0;\n  }\n  .ds-stat__figure {\n    font-size: calc(var(--text-h1) * 0.8);\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-dialog {\n    padding: var(--space-4) var(--space-3);\n  }\n  .ds-dialog__actions {\n    flex-wrap: wrap;\n  }\n  .ds-letters {\n    padding: var(--space-5) 0;\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, essay journal 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\" 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\">Journal</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#archive\">Archive</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#about\">About</a></li>\n    </ul>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <span class=\"ds-label\">A journal of walking, since 2007</span>\n      <h1 class=\"ds-hero__title\">Essays on footpaths, rivers and the slow way round</h1>\n      <p class=\"ds-hero__lead\">chronoskin is one writer's notebook: a long essay every month or so about the places a person can reach on foot, and what is still to be found there.</p>\n      <div class=\"ds-hero__actions\">\n        <a class=\"ds-button\" href=\"#essay\">Read the latest essay</a>\n        <a class=\"ds-link ds-link--more\" href=\"#about\">About the author</a>\n      </div>\n    </div>\n\n    <div class=\"ds-section ds-section--flush\">\n      <h2 class=\"ds-rule\">Recent essays</h2>\n      <ul class=\"ds-list\" data-component=\"list\">\n        <li class=\"ds-list__item\">\n          <a class=\"ds-list__title\" href=\"#essay\">On walking the old towpath</a> <span class=\"ds-badge\">New</span>\n          <p class=\"ds-list__text\">Forty miles beside a canal that no longer carries anything but herons.</p>\n          <span class=\"ds-list__meta\">12 March 2015 · 14 minutes</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <a class=\"ds-list__title\" href=\"#essay\">The map that left out the hill</a>\n          <p class=\"ds-list__text\">What a surveyor chose not to draw, and why it matters to the people living under it.</p>\n          <span class=\"ds-list__meta\">3 February 2015 · 9 minutes</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <a class=\"ds-list__title\" href=\"#essay\">A winter in borrowed boots</a>\n          <p class=\"ds-list__text\">Three months, one pair of boots that were not mine, and a coast in fog.</p>\n          <span class=\"ds-list__meta\">18 December 2014 · 21 minutes</span>\n        </li>\n        <li class=\"ds-list__item\">\n          <a class=\"ds-list__title\" href=\"#essay\">Rights of way, wrongs of way</a>\n          <p class=\"ds-list__text\">A short history of the stile, the gate and the polite notice.</p>\n          <span class=\"ds-list__meta\">2 November 2014 · 11 minutes</span>\n        </li>\n      </ul>\n      <p class=\"ds-list__more\"><a class=\"ds-link ds-link--more\" href=\"#archive\">View the full archive</a></p>\n    </div>\n\n    <div class=\"ds-section ds-section--flush\">\n      <h2 class=\"ds-rule\">Series</h2>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell\" href=\"#archive\">\n          <div class=\"ds-grid__tile\">I</div>\n          <h3 class=\"ds-grid__title\">Canals</h3>\n          <p class=\"ds-grid__text\">9 essays</p>\n        </a>\n        <a class=\"ds-grid__cell\" href=\"#archive\">\n          <div class=\"ds-grid__tile ds-grid__tile--2\">II</div>\n          <h3 class=\"ds-grid__title\">Coast</h3>\n          <p class=\"ds-grid__text\">14 essays</p>\n        </a>\n        <a class=\"ds-grid__cell\" href=\"#archive\">\n          <div class=\"ds-grid__tile ds-grid__tile--3\">III</div>\n          <h3 class=\"ds-grid__title\">Maps</h3>\n          <p class=\"ds-grid__text\">6 essays</p>\n        </a>\n        <a class=\"ds-grid__cell\" href=\"#archive\">\n          <div class=\"ds-grid__tile ds-grid__tile--4\">IV</div>\n          <h3 class=\"ds-grid__title\">Uplands</h3>\n          <p class=\"ds-grid__text\">11 essays</p>\n        </a>\n      </div>\n    </div>\n\n    <div class=\"ds-section ds-section--flush\">\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <div class=\"ds-panel__split\">\n          <div class=\"ds-panel__art\" aria-hidden=\"true\">The Slow Way Round</div>\n          <div class=\"ds-panel__copy\">\n            <span class=\"ds-label\">The book</span>\n            <h2 class=\"ds-panel__title\">Twelve essays, collected and revised</h2>\n            <div class=\"ds-panel__body\">\n              <p>The first eight years of chronoskin in one volume, with new maps and an afterword. Printed in a small edition this spring.</p>\n              <a class=\"ds-button ds-button--secondary\" href=\"#about\">Reserve a copy</a>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  </div>\n\n  <div class=\"ds-letters\">\n    <div class=\"ds-wrap\">\n      <span class=\"ds-label\">Letters</span>\n      <h2 class=\"ds-letters__title\">A letter when there is something to read</h2>\n      <p class=\"ds-letters__text\">One short note for each new essay, and nothing in between.</p>\n      <form class=\"ds-form ds-form--inline ds-letters__form\" action=\"#home\">\n        <input class=\"ds-form__input\" type=\"text\" placeholder=\"Your email address\" aria-label=\"Email address\">\n        <button class=\"ds-button ds-button--inverse\" type=\"submit\">Subscribe</button>\n      </form>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"essay\">\n  <div class=\"ds-wrap\">\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#home\">Journal</a></li>\n      <li class=\"ds-breadcrumb__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">Canals</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">On walking the old towpath</li>\n    </ol>\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__copy\">\n        <h1 class=\"ds-page-header__title\">On walking the old towpath</h1>\n        <p class=\"ds-page-header__text\">Forty miles beside a canal that no longer carries anything but herons.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#archive\">Save for later</a>\n      </div>\n    </header>\n  </div>\n\n  <div class=\"ds-wrap ds-wrap--margins ds-section ds-section--first\">\n    <aside class=\"ds-margin ds-margin--left\">\n      <span class=\"ds-label\">12 March 2015</span>\n      <p class=\"ds-margin__text\">3,400 words, about fourteen minutes. Fourth in the series on canals.</p>\n    </aside>\n\n    <div class=\"ds-wrap__main\">\n      <article class=\"ds-prose\" data-component=\"typography\">\n        <h1>I. The cut</h1>\n        <p><span class=\"ds-prose__dropcap\">N</span>obody builds a canal for the pleasure of walking beside it. The path is an afterthought, a strip of beaten earth left for the horse, and it is the only part of the whole undertaking that has outlived its purpose with any grace. I set out along one on a wet Tuesday with a flask, a borrowed map and <strong>no particular reason</strong> to arrive.</p>\n        <p>The first lock is a mile from the town. Its gates have not moved in thirty years and a birch has taken root in the upper sill. The towpath slips past all this without comment, as towpaths do, level as a table and exactly as wide as a horse.<sup>1</sup></p>\n        <blockquote class=\"ds-quote\">\n          <p class=\"ds-quote__text\">A towpath is level as a table and exactly as wide as a horse. Everything else about a canal can be argued with.</p>\n        </blockquote>\n        <h2>What the surveyors left</h2>\n        <p>The line was set out in 1793 by men who walked it before there was anything to walk beside. Their field books survive, and they read like a list of small refusals:</p>\n        <ul>\n          <li>no gradient steeper than a barge can bear;</li>\n          <li>no bend tighter than a seventy-foot hull;</li>\n          <li>no bridge where a ford would do.</li>\n        </ul>\n        <p>On the modern sheet the junction sits at grid reference <code>SP 512 064</code>, though the surveyors marked it only as the place where two fields met.<sup>2</sup></p>\n        <h3>A note on distances</h3>\n        <p>Canal miles are honest miles. There is no climbing to do, no stile to cross and very little to decide, so the forty of them pass at exactly the speed of thought.</p>\n        <h1>II. The summit pound</h1>\n        <p>By the second afternoon the water had narrowed to a ditch and the path to a line in the grass. This is the highest and loneliest reach, fed by a reservoir nobody visits. I ate my bread on the coping of a lock and counted, in two hours, one cyclist and a heron that did not trouble to move.</p>\n      </article>\n\n      <ol class=\"ds-footnotes\">\n        <li class=\"ds-footnotes__item\">The standard width was nine feet, enough for one horse and a person leading it.</li>\n        <li class=\"ds-footnotes__item\">The field books are held in the county record office and can be read on request.</li>\n      </ol>\n    </div>\n\n    <aside class=\"ds-margin ds-margin--right\">\n      <div class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">In this series</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">A lock-keeper's year</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">The tunnel at dusk</a></li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">Water that goes uphill</a></li>\n          <li class=\"ds-sidebar__item is-current\">On walking the old towpath</li>\n          <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#archive\">All nine essays</a></li>\n        </ul>\n      </div>\n    </aside>\n  </div>\n\n  <div class=\"ds-wrap ds-section ds-section--flush\">\n    <h2 class=\"ds-rule\">Further reading</h2>\n    <ul class=\"ds-linklist\" data-component=\"links\">\n      <li class=\"ds-linklist__item\"><a class=\"ds-link\" href=\"#essay\">The map that left out the hill</a></li>\n      <li class=\"ds-linklist__item\"><a class=\"ds-link is-visited\" href=\"#essay\">A winter in borrowed boots</a></li>\n      <li class=\"ds-linklist__item\"><a class=\"ds-link is-hover\" href=\"#essay\">Rights of way, wrongs of way</a></li>\n      <li class=\"ds-linklist__item\"><a class=\"ds-link is-active\" href=\"#archive\">Everything filed under canals</a></li>\n      <li class=\"ds-linklist__item\"><a class=\"ds-link ds-link--quiet\" href=\"#about\">Write to the author about this essay</a></li>\n    </ul>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"archive\">\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\">Journal</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Archive</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\">Archive</h1>\n        <p class=\"ds-page-header__text\">Every essay since 2007, newest first.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Subscribe</a>\n      </div>\n    </header>\n\n    <div class=\"ds-section ds-section--first\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#archive\">By date</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#archive\">By series</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#archive\">Longest</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#archive\">Translations</a></li>\n      </ul>\n      <div class=\"ds-table__wrap\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <caption class=\"ds-table__caption\">Showing 7 of 40 essays. Reading time at 240 words a minute.</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">Essay</th>\n              <th scope=\"col\">Series</th>\n              <th scope=\"col\">Year</th>\n              <th scope=\"col\" class=\"ds-table__num\">Words</th>\n              <th scope=\"col\" class=\"ds-table__num\">Minutes</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">On walking the old towpath</a></th><td>Canals</td><td>2015</td><td class=\"ds-table__num\">3,400</td><td class=\"ds-table__num\">14</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">The map that left out the hill</a></th><td>Maps</td><td>2015</td><td class=\"ds-table__num\">2,150</td><td class=\"ds-table__num\">9</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">A winter in borrowed boots</a></th><td>Coast</td><td>2014</td><td class=\"ds-table__num\">5,020</td><td class=\"ds-table__num\">21</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">Rights of way, wrongs of way</a></th><td>Uplands</td><td>2014</td><td class=\"ds-table__num\">2,640</td><td class=\"ds-table__num\">11</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">The tunnel at dusk</a></th><td>Canals</td><td>2014</td><td class=\"ds-table__num\">1,900</td><td class=\"ds-table__num\">8</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">Salt marsh, low water</a></th><td>Coast</td><td>2013</td><td class=\"ds-table__num\">4,300</td><td class=\"ds-table__num\">18</td></tr>\n            <tr><th scope=\"row\"><a class=\"ds-link ds-link--quiet\" href=\"#essay\">Water that goes uphill</a></th><td>Canals</td><td>2013</td><td class=\"ds-table__num\">2,880</td><td class=\"ds-table__num\">12</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=\"#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\">Older</a></li>\n        </ul>\n        <div class=\"ds-badgerow\" data-component=\"badge\">\n          <span class=\"ds-badge\">New</span>\n          <span class=\"ds-badge ds-badge--alt\">In the book</span>\n          <span class=\"ds-badge ds-badge--quiet\">40</span>\n          <span class=\"ds-badge ds-badge--success\">Revised</span>\n          <span class=\"ds-badge ds-badge--warning\">In draft</span>\n          <span class=\"ds-badge ds-badge--danger\">Withdrawn</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-section ds-section--flush\">\n      <h2 class=\"ds-rule\">Translations</h2>\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=\"M8 6h18l6 6v22H8z\"/><path d=\"M26 6v6h6\"/><path d=\"M14 20h12M14 26h8\"/></svg>\n        <h3 class=\"ds-empty__title\">Nothing translated yet</h3>\n        <p class=\"ds-empty__text\">No essay has been put into another language so far. If you would like to try one, the author would be glad to hear from you.</p>\n        <a class=\"ds-button\" href=\"#about\">Offer a translation</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"about\">\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\">Journal</a></li>\n      <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">About</li>\n    </ol>\n    <header class=\"ds-page-header\">\n      <div class=\"ds-page-header__copy\">\n        <h1 class=\"ds-page-header__title\">About</h1>\n        <p class=\"ds-page-header__text\">Who writes chronoskin, and how to write back.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#archive\">Read the archive</a>\n      </div>\n    </header>\n\n    <div class=\"ds-section ds-section--first\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-prose\">\n          <p class=\"ds-prose__lead\">chronoskin is written by Marit Oland, who has been walking the same few counties since 2007 and has not yet run out of them.</p>\n          <p>The essays appear when they are finished. There are no advertisements, no sponsors and no comments; letters are welcome and are answered, slowly, in the order they arrive.</p>\n        </div>\n        <ul class=\"ds-stat\" data-component=\"stats\">\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">40</span><span class=\"ds-stat__label\">Essays</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">8</span><span class=\"ds-stat__label\">Years</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">2,310</span><span class=\"ds-stat__label\">Miles on foot</span></li>\n          <li class=\"ds-stat__item\"><span class=\"ds-stat__figure\">5</span><span class=\"ds-stat__label\">Pairs of boots</span></li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"ds-section ds-section--flush\">\n      <h2 class=\"ds-rule\">Write a letter</h2>\n      <div class=\"ds-stack\">\n        <div class=\"ds-noticerow\" data-component=\"notice\">\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Letters are read on Sundays.</span> A reply can take a fortnight.</p>\n          <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">The letter was not sent.</span> Check the address below and try again.</p>\n        </div>\n        <form class=\"ds-form\" data-component=\"form\" action=\"#about\">\n          <div class=\"ds-form__row\">\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Your name</span><input class=\"ds-form__input\" type=\"text\" value=\"Tomas Reve\"></label>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Email</span><input class=\"ds-form__input is-error\" type=\"text\" value=\"tomas@reve\"><span class=\"ds-form__error\">Enter a complete email address.</span></label>\n          </div>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">About</span>\n            <select class=\"ds-form__select\"><option>An essay</option><option>The book</option><option>A translation</option><option>Something else</option></select>\n          </label>\n          <label class=\"ds-form__field\"><span class=\"ds-form__label\">Letter</span><textarea class=\"ds-form__textarea\" rows=\"5\" placeholder=\"Dear Marit,\"></textarea><span class=\"ds-form__hint\">Plain text. A few paragraphs is plenty.</span></label>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Send me a letter when a new essay appears</span></label>\n          <div class=\"ds-form__actions ds-buttonrow\" data-component=\"buttons\">\n            <button class=\"ds-button\" type=\"submit\">Send the letter</button>\n            <a class=\"ds-button is-hover\" href=\"#about\">Preview</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#about\">Save as draft</a>\n            <a class=\"ds-button ds-button--danger\" href=\"#about\">Discard</a>\n            <button class=\"ds-button\" type=\"button\" disabled>Attach a file</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\">Discard this letter?</h2>\n              <a class=\"ds-dialog__close\" href=\"#about\" aria-label=\"Close\">×</a>\n            </div>\n            <div class=\"ds-dialog__body\">\n              <p>The draft has not been saved. What you have written will be lost.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#about\">Keep writing</a>\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Discard</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-footer__inner\">\n    <span>© 2007 to 2015 chronoskin. Written and set by hand.</span>\n    <span class=\"ds-footer__links\">\n      <a class=\"ds-footer__link\" href=\"#archive\">Archive</a>\n      <a class=\"ds-footer__link\" href=\"#about\">Letters</a>\n      <a class=\"ds-footer__link\" href=\"#home\">Feed</a>\n    </span>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.editorial-minimal.blog.s01.p01.t01.u01\",\n  \"library\": \"2026.10.07-2111\",\n  \"era\": {\n    \"slug\": \"editorial-minimal\",\n    \"years\": [\n      2012,\n      2018\n    ]\n  },\n  \"archetype\": \"blog\",\n  \"mode\": \"pure\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-em-1111\",\n  \"short\": \"v1-em-1111\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #fdfcf8;\n  --color-canvas: #fdfcf8;\n  --color-surface: #fdfcf8;\n  --color-surface-alt: #f5f3ec;\n  --color-surface-strong: #ebe8de;\n  --color-bar: #fdfcf8;\n  --color-bar-text: #33332f;\n  --color-bar-alt: #f5f3ec;\n  --color-bar-alt-text: #6b6a62;\n  --color-inverse: #26302b;\n  --color-inverse-text: #f5f3ec;\n  --color-text: #33332f;\n  --color-text-muted: #7d7b72;\n  --color-heading: #1c1c19;\n  --color-heading-alt: #0a6058;\n  --color-link: #0c776d;\n  --color-link-quiet: #6b6a62;\n  --color-link-visited: #56776f;\n  --color-link-hover: #0a6058;\n  --color-link-active: #063f3a;\n  --color-border: #d9d6cb;\n  --color-border-strong: #33332f;\n  --color-border-muted: #ebe8de;\n  --color-accent: #0c776d;\n  --color-accent-text: #fdfcf8;\n  --color-accent-alt: #b5651d;\n  --color-fill-1: #7f9c8f;\n  --color-fill-2: #c8a67e;\n  --color-fill-3: #5c6b73;\n  --color-fill-4: #a9a889;\n  --color-button: #fdfcf8;\n  --color-button-text: #1c1c19;\n  --color-button-hover-text: #fdfcf8;\n  --color-button-secondary: #fdfcf8;\n  --color-button-secondary-text: #0c776d;\n  --color-input: #ffffff;\n  --color-input-text: #1c1c19;\n  --color-input-border: #c0bdb1;\n  --color-disabled: #ebe8de;\n  --color-disabled-text: #a3a196;\n  --color-danger: #9d120d;\n  --color-danger-surface: #fbeeea;\n  --color-success: #2e7d4f;\n  --color-warning: #a8650f;\n  --color-notice: #edf3ee;\n  --color-notice-text: #0a6058;\n  --color-focus: #0c776d;\n  --color-shadow: rgb(40 36 20 / 0.12);\n  --color-overlay: rgb(38 48 43 / 0.45);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", \"EB Garamond\", Georgia, serif;\n  --font-heading: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", \"EB Garamond\", Georgia, serif;\n  --font-ui: \"Avenir Next\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 20px;\n  --text-small: 13px;\n  --text-ui: 12px;\n  --text-large: 24px;\n  --text-display: 44px;\n  --text-h1: 36px;\n  --text-h2: 26px;\n  --text-h3: 20px;\n  --line-body: 1.6;\n  --line-heading: 1.25;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 600;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: -0.5px;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\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: 3px;\n  --radius-panel: 0;\n  --radius-pill: 999px;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: 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-inverse);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;\n  --backdrop-blur: 0px;\n}\n"
  }
}
