{ "id": "v1-br-3437", "long_id": "v1.brutalism.blog.s03.p04.t03.u07", "name": "Web brutalism, index", "era": { "slug": "brutalism", "code": "br", "name": "Web brutalism", "years": [ 2014, 2019 ], "description": "The reaction to polish, 2014 to 2019: raw default-looking pages, system and monospace type, hard black rules, harsh or absent colour, and layouts that show their structure instead of hiding it." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": true, "responsive": true }, "summary": "The catalogue page of web brutalism, as built between 2014 and 2019 by archives, directories and one-person collections that wanted a site to be a ruled list of everything it holds: the window is cut edge to edge into a narrow rail of stacked links and a field of numbered cells that share their rules like a table. This one is dark, in bold system sans, with one red block for navigation, 1px grey rules for cells and 4px rules where a part ends. Nothing is rounded, shadowed, graded or animated, there are no margins around the page and no pictures; a thing is found by its number, its place in the grid and its date.", "url": "https://chrono.skin/s/v1-br-3437", "preview_url": "https://chrono.skin/s/v1-br-3437/specimen.html", "files": { "STYLE.md": "# Web brutalism, index\n\n## Summary\n\nThe catalogue page of web brutalism, as built between 2014 and 2019 by archives, directories and one-person collections that wanted a site to be a ruled list of everything it holds: the window is cut edge to edge into a narrow rail of stacked links and a field of numbered cells that share their rules like a table. This one is dark, in bold system sans, with one red block for navigation, 1px grey rules for cells and 4px rules where a part ends. Nothing is rounded, shadowed, graded or animated, there are no margins around the page and no pictures; a thing is found by its number, its place in the grid and its date.\n\n## Layout\n\n- The page fills the window: `.ds-page` has no margin and no padding, and `.ds-page__frame` is `--size-page` (100%) wide with no maximum. Nothing is centred and nothing floats in a column of its own; every block touches the window edge or a rule.\n- `.ds-page__frame` is a grid of two columns: `.ds-page__rail` at `--size-rail` (264px) on the left, closed at its right by a rule of `--border-width-strong`, and `.ds-page__main` taking the rest. The frame ends with a strong rule; `.ds-footer` follows it across the whole window. The rail and the footer are written once; the views change in the field.\n- The rail is the same on every page. It holds `.ds-nav` (the site name set large, a tagline, then the links stacked one per line on a block of `--fill-bar`) and under it `.ds-sidebar`, a stack of blocks divided by 1px rules. Navigation is never horizontal and never at the top of the field.\n- The field is a stack of full-width parts with no gaps between them: `.ds-hero`, then blocks each opened by a `.ds-page__label` strip. Parts are divided only by rules: 1px between blocks and cells, strong under the hero and the page header. There is no vertical space between parts; all space is padding inside a cell (`--space-4` 16px above and below, `--space-5` 24px at the sides).\n- The home page's main block is `.ds-grid`, three equal columns of numbered cells sharing 1px rules, followed by `.ds-list` (dated rows in three columns: date, title and sentence, meta at the right). Smaller blocks go in a `.ds-page__row`: two `.ds-page__cell` halves divided by a 1px rule, each holding `.ds-page__section` blocks `--space-5` apart under a small grey `.ds-page__caption`.\n- Inner pages (one place, one recording, the notes, an about page) keep the rail as it is. The field has no hero: it opens with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one line, one button at the right, a strong rule below), then, when present, `.ds-stats` as a row of ruled cells, `.ds-tabs` as a row of ruled cells with the `.ds-table` flush under it, or the `.ds-list`, then the `.ds-pagination` strip. The foot of the field is a `.ds-page__row`: running text in the left cell and the form, a boxed note or short captioned blocks in the right, filled so that the field ends near the foot of the rail.\n- Views. The specimen is one small site with five views, one showing at a time in the field. `index` is the home page: hero, the nine newest numbers as cells, the latest notes. `place` is one place: figures, tabs over the table of its recordings, pagination, a note on the place and the empty state of the next place along. `recording` is one number: the maker's notes and the confirmation for withdrawing it in the left cell, the two messages and the correction form in the right. `notes` is the dated list with pagination, the newest replies and a boxed note. `about` is running text beside who keeps the catalogue, the marks, a small table and other catalogues. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale: `--space-1` 2px is the vertical padding of a navigation link and the gap under a list title; `--space-2` 4px is the padding of badges, label strips, panel titles and buttons (vertical) and the gap under a form label; `--space-3` 8px is the padding of table cells, tabs, list rows, the breadcrumb and pagination strips (vertical) and the gap between buttons; `--space-4` 16px is the padding of the rail, of cells (vertical), of table cells and buttons (horizontal) and the gap between paragraphs; `--space-5` 24px is the side padding of every cell of the field and the gap between blocks inside a cell; `--space-6` 48px is not used by the specimen and is the largest space allowed inside a cell.\n- Fixed sizes: `--size-date` 120px is the date column of the list, `--size-field` 360px a text input, `--size-num` 104px a numeric table column, `--size-dialog` 440px a dialog.\n- Below 900px the page is one column: the name and the links (now side by side on their block) first, then the field, then the rail's sidebar blocks under a strong rule. Rows, the grid and list rows become one column, figures go two to a line, the page header puts its button under the text and table cells marked `.ds-table__extra` are left out.\n- On a phone (560px and below) there is no menu button: `.ds-nav__list` becomes a grid of four equal columns, one link per cell with centred, wrapping text and `--space-2` side padding, still on the `--fill-bar` block; between 560px and 900px the links sit side by side in a wrapping row. The current page stays an inverted block.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- A dark page: `--color-page`, `--color-canvas` and `--color-surface` are #0c0c0c, `--color-surface-alt` #181818 (alternate table rows, tags), `--color-surface-strong` #202020 (label strips, panel titles, inline code).\n- `--color-bar` #ac130d with white `--color-bar-text` is the red block of navigation links, table heads and dialog titles. `--color-bar-alt` #202020 with #a0a0a0 text is the footer. `--color-inverse` #dedede with #0c0c0c text is the light block of the current navigation row, the current tab and the current page number.\n- Text is grey-white in three steps: `--color-text` and `--color-heading` #dedede, `--color-heading-alt` #c4c4c4 (sidebar and panel titles), `--color-text-muted` and `--color-link-quiet` #a0a0a0 (numbers, dates, meta, captions, tabs, sidebar links).\n- `--color-link` #8ab1ff, visited #5070b1, hover and active #ffffff.\n- Rules are greys: `--color-border` #585858 between cells, `--color-border-strong` #a0a0a0 for the rail, the frame, the hero and page header and around dialogs, `--color-border-muted` #303030 for the edge of a disabled button.\n- Block fills are the dark tints of tags and messages: `--color-fill-1` #3b320d, `--color-fill-2` #3b1719, `--color-fill-3` #15293d, `--color-fill-4` #202020 colour the cells of the index in turn; `--color-notice` is #15293d and `--color-danger-surface` #3b1719. `--color-text` and `--color-text-muted` are readable on all of them.\n- `--color-accent` #ac130d with white text is the count badge. Buttons are #303030 and #181818 with light text; inputs are #181818 with a #707070 edge.\n- Text-coloured status needs lighter colours than the references' dark red and yellow-brown fills: `--color-danger` #f0706a, `--color-success` #8fc07a, `--color-warning` and `--color-accent-alt` #d4b106 are derived (the same hues, lightened to read on #0c0c0c), not measured.\n- One sans: `--font-body`, `--font-heading` and `--font-ui` are \"Helvetica Neue\", Helvetica, Arial, sans-serif; `--font-mono` is Menlo, Consolas, monospace, used for everything that is a number of the catalogue: cell numbers, dates, sidebar counts, the id column of a table, inline code.\n- `--text-base` and `--text-ui` 16px with `--line-body` 1.45; `--text-small` 13px for numbers, meta, captions, label strips, table heads, form labels, badges and the footer; `--text-large` 18px for the hero's lead. Headings are bold: `--text-display` 29px (hero headline), `--text-h1` 26px (site name, page title, figures), `--text-h2` 18px (cell titles, form and empty titles), `--text-h3` 16px.\n- Navigation, tabs and buttons are bold (`--weight-ui` 700).\n- Links in running text are underlined; index and list titles, navigation, tabs, sidebar, breadcrumb, pagination and footer links are bare (`--link-decoration-quiet` none) and underline on hover. Current navigation items, tabs and page numbers are ``, not links. Nothing is uppercased or tracked.\n- Two weights far apart: `--border-width` 1px solid for cells, boxes, row dividers and controls; `--border-width-strong` 4px for the rule beside the rail, under a frame, the hero and the page header, the left edge of a notice and a quotation, and the outline of dialogs.\n- Heavy edges are also drawn with hard inset shadows, never blurred: `--shadow-control` puts a 2px line of `--color-border-strong` along the foot of every button and input (4px on hover, moved to the top when pressed), and `--shadow-panel` a 4px bar down the left of a panel. `--shadow-dialog` is `none`.\n- All radii are 0. `--fill-panel` is `--color-surface-alt`, `--fill-input` is `transparent` so a field is its edge and its heavy foot on whatever it stands on, `--fill-button-hover` lightens the button; every other fill is its plain palette colour. `--focus-ring` is a 2px dotted outline; `--transition` none.\n- Each text token is used only on its own fill: `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-button-text` on `--fill-button`, `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface` or the canvas, `--color-text` and the muted and heading colours on the canvas, the surfaces and the four fills. Keep to this so that other palettes work with the same structure.\n\n## Components\n\n- `.ds-page` on ``: page colour and base type, no margin. Each page is a `.ds-page__frame` holding `.ds-page__rail` and `.ds-page__main`. In the field, `.ds-page__label` is the strip that opens a block; `.ds-page__row` is two `.ds-page__cell` halves sharing a rule (`--last` drops the rule under the row); inside a cell `.ds-page__section` is a block (`--last` drops its gap) and `.ds-page__caption` its small grey caption.\n- `.ds-nav`: the top of the rail. `.ds-nav__head` holds the `.ds-brand` and an optional `.ds-nav__tagline`. `.ds-nav__list` is the block of links on `--fill-bar`: one `.ds-nav__item` per line, each a `.ds-nav__link` as wide as the rail. The current page is an inverted row: the stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own, give the link `is-current`.\n- `.ds-brand`: the site's mark and name, a link to the home page, at the top of the rail. `.ds-brand__mark` is a plain ruled square as tall as the name (1.2 times `--text-h1`), dressed like the button: `--fill-button`, a `--border-width` edge in `--color-input-border`, the mark drawn in `--color-button-text` with square line caps; no radius and no shadow beyond what the tokens give. `.ds-brand__name` is 26px bold in `--color-heading`, on the canvas. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a 13px strip across the top of the field of an inner page: `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`, over a 1px rule.\n- `.ds-hero`: the first cell of the home page's field: `.ds-hero__title` (29px bold, at most 44 characters to a line), one `.ds-hero__lead` paragraph at 18px and `.ds-hero__actions` with one button and one text link, closed by a strong rule. Left-aligned, no fill.\n- `.ds-page-header`: the head of an inner page, instead of the hero: `.ds-page-header__main` with `.ds-page-header__title` (26px) and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A strong rule closes it.\n- `.ds-stat`: one figure in a cell of its own: a bold 26px `.ds-stat__value` over a grey 13px `.ds-stat__label`. Three to five sit in a `.ds-stats` row of equal cells divided by 1px rules, with a 1px rule below.\n- `.ds-prose`: running text, at most 72 characters wide: h1, h2, h3, paragraphs, square-bulleted and numbered lists, `code` in 13px monospace on `--color-surface-strong`, `blockquote` behind a strong rule. `.ds-prose__meta` is a grey monospace line above the title (number and date).\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is for meta and tool links; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a flat rectangle with a 1px edge in `--color-input-border`, bold 16px. `.ds-button--secondary` is the same on the secondary fill. `.ds-button--danger` is the destructive action: `--color-danger` text and edge on `--color-danger-surface`. `disabled` or `is-disabled` greys it; `is-hover` underlines the label; `is-active` takes the strong border colour. Group with `.ds-buttons`.\n- `.ds-form`: a form with no box: `.ds-form__title`, then rows (`.ds-form__row`) of a small bold `.ds-form__label` above its control. Controls take `.ds-form__input` (`--wide` fills the cell, for textareas; `--auto` for selects); `is-invalid` plus a bold `.ds-form__error` marks a validation error; `.ds-form__hint` is help text; `.ds-form__check` with a native `.ds-form__checkbox`; `.ds-form__actions` is the row of buttons.\n- `.ds-table`: a data table flush with the field: every cell ruled 1px at its right and bottom, no outer border, small bold `th` on the bar fill, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__id` for a grey monospace number column, `.ds-table__group` for a group row.\n- `.ds-list`: dated rows, each a `.ds-list__item` of three columns over a 1px rule: a grey monospace `.ds-list__date`, a `.ds-list__body` with a bold `.ds-list__title` link and an optional `.ds-list__excerpt`, and a grey right-aligned `.ds-list__meta`.\n- `.ds-panel`: a 1px ruled box inside a cell, with a small bold `.ds-panel__title` strip on `--color-surface-strong` and a `.ds-panel__body`. Use it rarely; a cell of the field is already a box.\n- `.ds-grid`: the index. Three columns of `.ds-grid__cell` that share 1px rules and have no gap (`--2`, `--3`, `--4` select the other fills, used in turn), each with a grey monospace `.ds-grid__num`, an 18px `.ds-grid__title` (a `.ds-grid__link` inside it leads to the cell's page and keeps the heading colour), one `.ds-grid__text` sentence and a grey `.ds-grid__meta` line.\n- `.ds-tabs`: a row of `.ds-tabs__item` cells divided by 1px rules, each holding a bold `.ds-tabs__tab` link in the quiet link colour, over a 1px rule. The current one is a ``: an inverted cell. Content goes in `.ds-tabs__body`, flush under the row.\n- `.ds-badge`: a count: bold 13px on the accent fill, square. `.ds-badge--alt` is a bold word in `--color-accent-alt` (\"new\"); `.ds-badge--tag` is a word in a 1px box on `--color-surface-alt`. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a bold lowercase word in the status colour inside a 1px outline of the same colour. No fill, no pill, no icon.\n- `.ds-sidebar`: the rest of the rail under the navigation. Each `.ds-sidebar__block` is closed by a 1px rule and has a small `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__row` lines: a `.ds-sidebar__link` at the left and an optional monospace `.ds-sidebar__count` at the right. `.ds-sidebar__text` is a grey 13px paragraph; `.ds-sidebar__search` is an input with a button.\n- `.ds-notice`: a sentence in a 1px box whose left edge is a strong rule, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and box. Stack several in `.ds-notices`.\n- `.ds-pagination`: a strip under a table or list, over a 1px rule: `.ds-pagination__link` items for previous, numbers and next. The current page is a `` with `is-current`: an inverted block. `is-disabled` is grey; `--edge` drops the left padding of the first word.\n- `.ds-dialog`: a box with a strong rule all round, `--size-dialog` wide, with a bold `.ds-dialog__title` on the bar fill, `.ds-dialog__body`, `.ds-dialog__text` and left-aligned `.ds-dialog__actions`. It sits at the left of `.ds-dialog__backdrop`, a flat block of `--color-overlay` as wide as the cell it is in. No shadow, no dimming, no centring.\n- `.ds-empty`: an 18px bold `.ds-empty__title`, a grey `.ds-empty__text` sentence and one secondary button, left-aligned, with no box of its own.\n- `.ds-footer`: one 13px line across the window on `--fill-bar-alt`: a bold `.ds-footer__name` as wide as the rail, a `.ds-footer__text` sentence, and `.ds-footer__links` of `.ds-footer__link` items at the right.\n- `.ds-accordion`: questions and answers between rules. Each `
` has a `` that keeps the browser's own triangle and a `.ds-accordion__body`. Use it for a short list of questions, never for navigation.\n- `.ds-progress`: a `.ds-progress__label` line (what is counted at the left, the figure at the right) over a ruled `.ds-progress__track` whose `.ds-progress__bar` is filled with the accent to a quarter, or `--50`, `--75`, `--100`. Use it for one count against a known whole.\n\n## Never\n\n- `content-width >= 80%`: the rail and the field fill the window between them; there is no centred column.\n- `block-gap <= 24px`: parts of the field touch; the only gaps are between blocks inside a cell.\n- `letter-spacing <= 0px`: no text is tracked.\n- `font-size <= 29px`: the hero headline is 29px.\n- `font-size >= 13px`: small text is 13px.\n- `font-families <= 2`: one sans and a monospace.\n- `line-height >= 1.4`: body text is set at 1.45.\n- `line-height <= 1.5`: and no looser.\n- `uppercase-text <= 0%`: nothing is uppercased.\n- `underlined-links <= 40%`: only links inside running text are underlined.\n- `border-radius <= 0px`: every box, button and input is square.\n- `box-shadow-blur <= 0px`: shadows are hard blocks; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: every fill is one flat colour.\n- `border-width <= 8px`: rules are 2px, slabs 8px.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new part of the field is a full-width block under a `.ds-page__label` strip, divided from its neighbours by a 1px rule and never by space; a set of things copies `.ds-grid` (cells sharing rules, a monospace number first); a row type copies `.ds-list__item` (date, body, meta in three columns over a rule); a line of choices copies `.ds-tabs` (ruled cells, the current one inverted); a status copies the outlined `.ds-badge--success`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and pair each text token with its own fill as listed above. When in doubt do less: a rule before a box, a number before an icon, a cell of the grid before a card, and no radius, shadow, gradient or transition at all.\n", "components.css": "/* Layout tokens (structure part). Read from the references: pages that fill\n the window edge to edge, a narrow column of stacked links at the left, the\n rest cut into three equal columns; 8px and 16px inside cells, 24px at the\n sides of a cell, and no gap between cells at all. */\n:root {\n --size-page: 100%;\n --size-rail: 264px;\n --size-date: 120px;\n --size-field: 360px;\n --size-dialog: 440px;\n --size-num: 104px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 48px;\n}\n\n/* ---------- shell: the window cut into a rail and a field of cells ---------- */\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}\n.ds-page__frame {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n box-sizing: border-box;\n width: var(--size-page);\n background: var(--color-canvas);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-page__rail {\n min-width: 0;\n border-right: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page__main {\n min-width: 0;\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/* A row of two cells that share a rule. */\n.ds-page__row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__row--last {\n border-bottom: 0;\n}\n.ds-page__cell {\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-page__cell + .ds-page__cell {\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section {\n margin: 0 0 var(--space-5);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n}\n/* A block that follows running text in the same cell. */\n.ds-page__section--after {\n margin-top: var(--space-5);\n}\n/* The head of a block: a strip across the field. */\n.ds-page__label {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n/* The same caption inside a cell: plain small bold text. */\n.ds-page__caption {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\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.ds-link--quiet.is-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-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- brand: the mark on a plain ruled square, then the name ---------- */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n flex: none;\n display: block;\n box-sizing: content-box;\n width: calc(var(--text-h1) * 1.2);\n height: calc(var(--text-h1) * 1.2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background-color: var(--color-button);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\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 text-transform: var(--heading-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-brand:hover .ds-brand__name,\n.ds-brand.is-hover .ds-brand__name {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-brand:focus-visible,\n.ds-brand.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- nav: the name, then links stacked down the rail ---------- */\n.ds-nav {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__head {\n padding: var(--space-4) var(--space-4) var(--space-4);\n}\n.ds-nav__tagline {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-nav__list {\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item {\n margin: 0;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n/* The page you are on: an inverted row. One selector per view, and the home\n link when the address names no view; a recording belongs to its place. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#index\"],\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"],\n.ds-page:has(#place:target) .ds-nav__link[href=\"#place\"],\n.ds-page:has(#recording:target) .ds-nav__link[href=\"#place\"],\n.ds-page:has(#notes:target) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb: a strip across the top of the field ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n\n/* ---------- hero: the first cell of the field ---------- */\n.ds-hero {\n padding: var(--space-5) var(--space-5) var(--space-5);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\n max-width: 44ch;\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 color: var(--color-heading);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n max-width: 78ch;\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-4);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 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 text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats: a row of cells, figure over label ---------- */\n.ds-stats {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat {\n min-width: 0;\n padding: var(--space-3) var(--space-5) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\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 color: var(--color-heading);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n max-width: 72ch;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\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: 0 0 0 var(--space-5);\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose blockquote {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__meta {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons: a flat ruled rectangle ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-color: var(--color-border-strong);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\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}\n/* Destructive: the error message's colours on a button. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-muted);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n text-decoration: none;\n cursor: default;\n}\n\n/* ---------- form: label above its control ---------- */\n.ds-form {\n margin: 0;\n}\n.ds-form__title {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-form__row {\n margin: 0 0 var(--space-4);\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-form__input {\n display: block;\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-5) 0 0;\n}\n\n/* ---------- table: every cell ruled, flush with the field ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-radius: var(--radius-panel);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n border-style: var(--border-style);\n border-color: var(--color-border);\n border-width: 0 var(--border-width) var(--border-width) 0;\n text-align: left;\n vertical-align: top;\n}\n.ds-table th:first-child,\n.ds-table td:first-child {\n padding-left: var(--space-5);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n padding-right: var(--space-5);\n border-right-width: 0;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n background: var(--color-surface);\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n width: var(--size-num);\n text-align: right;\n}\n.ds-table td.ds-table__id {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-table__group td {\n background: var(--color-surface-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- list: dated rows, three columns, ruled ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-date) minmax(0, 1fr) auto;\n gap: var(--space-5);\n align-items: baseline;\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__date {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:visited,\n.ds-list__title.is-visited {\n color: var(--color-link-visited);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__excerpt {\n margin: var(--space-1) 0 0;\n}\n.ds-list__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n\n/* ---------- panel: a ruled box with a title strip ---------- */\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}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n padding: var(--space-3) var(--space-4) var(--space-4);\n}\n\n/* ---------- grid: the index, three columns of numbered cells sharing rules ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-4);\n background: var(--color-fill-1);\n border-style: var(--border-style);\n border-color: var(--color-border);\n border-width: 0 var(--border-width) var(--border-width) 0;\n border-radius: var(--radius-page);\n}\n.ds-grid__cell:nth-child(3n) {\n border-right-width: 0;\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__num {\n margin: 0 0 var(--space-3);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n/* A cell title that leads to its page keeps the heading colour. */\n.ds-grid__link {\n color: inherit;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__link:hover,\n.ds-grid__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__link:focus-visible,\n.ds-grid__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-grid__text {\n margin: 0;\n}\n.ds-grid__meta {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs: a row of ruled cells, the current one inverted ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\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 font-weight: var(--weight-ui);\n}\n.ds-tabs__item {\n border-right: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab:focus-visible,\n.ds-tabs__tab.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n.ds-tabs__body {\n padding: 0;\n}\n\n/* ---------- badge: a count, a tag, a status word in its own outline ---------- */\n.ds-badge {\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-badge--alt,\n.ds-badge--tag,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: transparent;\n color: var(--color-text);\n}\n.ds-badge--alt {\n padding: 0;\n color: var(--color-accent-alt);\n}\n.ds-badge--tag {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n border: var(--border-width) var(--border-style) currentColor;\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n\n/* ---------- sidebar: blocks down the rail, each under a rule ---------- */\n.ds-sidebar {\n box-sizing: border-box;\n}\n.ds-sidebar__block {\n padding: var(--space-4) var(--space-4) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__block:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-sidebar__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__count {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-sidebar__search {\n display: flex;\n gap: var(--space-2);\n}\n.ds-sidebar__search .ds-form__input {\n flex: 1;\n min-width: 0;\n width: auto;\n}\n\n/* ---------- notice: a sentence behind a heavy rule ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-style: var(--border-style);\n border-color: var(--color-border-strong);\n border-width: var(--border-width) var(--border-width) var(--border-width) var(--border-width-strong);\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* ---------- pagination: a strip under the table ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-3);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link:focus-visible,\n.ds-pagination__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-pagination__link--edge {\n padding-left: 0;\n}\n\n/* ---------- dialog: a heavy-ruled box on a flat block ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--fill-panel);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-body);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-4);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n gap: var(--space-3);\n}\n\n/* ---------- empty: a bold line, a sentence, a button ---------- */\n.ds-empty {\n padding: var(--space-4) 0 0;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer: three cells across the window ---------- */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n}\n.ds-footer__name {\n flex: none;\n box-sizing: border-box;\n width: calc(var(--size-rail) + var(--space-3));\n font-weight: var(--weight-bold);\n}\n.ds-footer__text {\n flex: 1;\n min-width: 0;\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- narrow windows: navigation, then the field, then the rail's blocks ---------- */\n/* ---------- components of the period ---------- */\n.ds-accordion {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__title {\n padding: var(--space-2) 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n max-width: 86ch;\n margin: 0;\n padding: 0 0 var(--space-3) var(--space-4);\n}\n.ds-progress {\n margin: 0 0 var(--space-4);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-2);\n font-weight: var(--weight-bold);\n}\n.ds-progress__track {\n height: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--color-input);\n}\n.ds-progress__bar {\n width: 25%;\n height: 100%;\n background: var(--fill-accent);\n}\n.ds-progress__bar--75 {\n width: 75%;\n}\n\n@media (max-width: 900px) {\n .ds-page__frame {\n display: flex;\n flex-direction: column;\n }\n .ds-page__rail {\n display: contents;\n }\n .ds-page__main {\n order: 1;\n }\n .ds-sidebar {\n order: 2;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n }\n .ds-nav__list {\n display: flex;\n flex-wrap: wrap;\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__link {\n padding: var(--space-1) var(--space-3);\n }\n .ds-page__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page__cell + .ds-page__cell {\n border-left: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-stats {\n grid-auto-flow: row;\n grid-template-columns: 1fr 1fr;\n }\n .ds-list__item {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-1);\n }\n .ds-list__meta {\n text-align: left;\n }\n .ds-table__extra {\n display: none;\n }\n .ds-table th.ds-table__num,\n .ds-table td.ds-table__num {\n width: auto;\n }\n .ds-dialog__backdrop {\n padding: var(--space-4);\n }\n .ds-footer {\n gap: var(--space-2) var(--space-4);\n }\n .ds-footer__name {\n width: 100%;\n }\n .ds-footer__text {\n flex: none;\n width: 100%;\n }\n}\n\n/* ---------- phones: four links and four tabs in one row each; the table scrolls in its own box ---------- */\n@media (max-width: 900px) {\n .ds-tabs__body {\n overflow-x: auto;\n }\n}\n@media (max-width: 560px) {\n .ds-nav__list {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n padding: var(--space-2) 0;\n }\n .ds-nav__link {\n padding: var(--space-1) var(--space-2);\n text-align: center;\n overflow-wrap: anywhere;\n }\n .ds-tabs {\n flex-wrap: nowrap;\n overflow-x: auto;\n }\n .ds-tabs__item {\n flex: 1 0 auto;\n }\n .ds-tabs__item:last-child {\n border-right: 0;\n }\n .ds-tabs__tab {\n padding: var(--space-2);\n text-align: center;\n white-space: nowrap;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a catalogue of field recordings. Web brutalism, index: specimen\n\n\n\n\n\n\n
\n\n
\n
\n
\n chronoskin\n

A numbered catalogue of sound recorded on foot. Nothing here plays by itself.

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

238 recordings of water, wind and machinery, in the order they were made.

\n

Each one has a number, a place, a length and a sentence. That is the whole catalogue. Take any of them and use it for whatever you like.

\n
\n Browse by place\n or start at the newest number\n
\n
\n\n

Newest numbers

\n
\n
\n

238

\n

Sluice gate at slack water

\n

Forty seconds of nothing, then the chain takes the weight.

\n

Brack Sluice, 2017-03-14, 6 min 12 s

\n
\n
\n

237

\n

Pump house, door open

\n

The old diesel on a cold start, recorded from the step.

\n

Cold Harbour, 2017-03-09, 11 min 40 s

\n
\n
\n

236

\n

Reeds in an east wind

\n

Two microphones a metre apart, one of them too close.

\n

Alder Fen, 2017-03-05, 18 min 03 s

\n
\n
\n

235

\n

Rain on a tin boat

\n

Upturned on the bank, with the recorder underneath it.

\n

Eel Bridge, 2017-03-01, 9 min 27 s

\n
\n
\n

234

\n

Level crossing, last train

\n

The bell, the barrier, four coaches and a long tail of rail hum.

\n

Dunlin Road, 2017-02-24, 3 min 51 s

\n
\n
\n

233

\n

Ice leaving the drain

\n

A hydrophone under the footbridge on the first mild morning.

\n

Alder Fen, 2017-02-19, 14 min 30 s

\n
\n
\n

232

\n

Sheet piling in a swell

\n

The harbour wall ringing like a slack drum, twice a minute.

\n

Cold Harbour, 2017-02-12, 8 min 44 s

\n
\n
\n

231

\n

Wires in frost

\n

A contact microphone on a fence post, before the sun reached it.

\n

Dunlin Road, 2017-02-05, 12 min 10 s

\n
\n
\n

230

\n

Eel trap, lifted

\n

Water running out of wicker, and one remark from the man lifting it.

\n

Eel Bridge, 2017-01-31, 2 min 36 s

\n
\n
\n\n

Latest notes

\n \n\n
\n\n \n
\n\n
    \n
  1. Index
    2. \n
  2. /
    3. \n
  3. Places
    4. \n
  4. /
    5. \n
  5. Alder Fen
    6. \n
\n\n
\n
\n

Alder Fen

\n

Every recording made on the fen since 2014, newest number first.

\n
\n
\n
\n\n
    \n
  • 71 recordings
    • \n
  • 14 h 06 min total length
    • \n
  • 58 checked
    • \n
  • 212 kilometres walked
    • \n
\n
\n
\n

Checked by ear 58 of 71

\n
\n
\n
\n\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.TitleRecordedStateRepliesMinutes
236Reeds in an east wind2017-03-05checked418.1
233Ice leaving the drain2017-02-19checked1114.5
229Geese over, twice2017-01-30clipped27.8
221Fog, with a distant generator2016-12-11checked922.0
218Footbridge, loose plank2016-11-27withdrawn01.2
214Drain pump, heard from the far bank2016-11-06checked69.4
209Starlings going to roost2016-10-23checked1726.3
\n
\n
\n\n\n \n\n\n
\n
\n

About the place

\n
\n

Four square kilometres of reed and cut drain between the sluice and the railway. There is one path, two bridges and no shelter, which is why most of these were made in a hurry.

\n

The best hour is the one before the pump at Cold Harbour starts. After that everything on the fen has a hum under it, and you can find it in number 236 if you listen on the right.

\n
\n
\n
\n

Next place along the drain

\n
\n

No recordings from “Fenny Lock”.

\n

Nobody has walked there with a recorder yet.

\n Back to the index\n
\n
\n
\n\n
\n\n \n
\n\n
    \n
  1. Index
    2. \n
  2. /
    3. \n
  3. Alder Fen
    4. \n
  4. /
    5. \n
  5. 236
    6. \n
\n\n
\n
\n

236. Reeds in an east wind

\n

Alder Fen, 2017-03-05, 18 min 03 s. Two microphones a metre apart. checked

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

Notes by the maker

\n

The fen is loudest when nothing happens

\n

This one was made from the second drain bridge with the recorder on the rail, and the knocking at four minutes is the loose plank of number 218, not a fault in the file.

\n

What you are hearing

\n
    \n
  • Reed heads, close, on the left.
    • \n
  • The pump at Cold Harbour, far off, on the right.
    • \n
  • One heron, once, at 11 min 20 s.
    • \n
\n

Getting the file

\n

Every recording is one plain file named after its number. Fetch this one with get 236.flac and check it against the length in the table above.

\n
\n
\n

Asked for by the maker

\n
\n
\n

Withdraw number 236?

\n
\n

The file will be removed and its number will stay empty in the index. This cannot be undone.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Received. Your correction to number 214 will be read this week.

\n

Not sent. The correction below has no address to answer to.

\n
\n
\n
\n
\n

Send a correction

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

That is not an e-mail address.

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

Plain text. Line breaks are kept; addresses become links.

\n
\n
\n \n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n\n
\n\n \n
\n\n
    \n
  1. Index
    2. \n
  2. /
    3. \n
  3. Notes
    4. \n
\n\n
\n
\n

Notes

\n

What went wrong, what was bought and what was learned. 64 notes since 2014.

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

Newest replies

\n
\n

Jonas Pell on the tea strainer: mine rusted in a month. Use a brass one.

\n

Marit Aas on ten seconds of silence: it is also how you find the hum in your own cable.

\n

Halvard Moe on batteries: keep the spare in an inside pocket and swap at the bridge.

\n
\n
\n
\n

Before you reply

\n
\n

Replies are read first

\n
Every reply waits until Tove has read it, which is usually the same evening. Corrections to a recording go on the page of its number, not here.
\n
\n
\n
\n\n
\n\n \n
\n\n
    \n
  1. Index
    2. \n
  2. /
    3. \n
  3. About
    4. \n
\n\n
\n
\n

About this catalogue

\n

Who makes it, how a recording gets a number and what you may do with one.

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

How a recording gets a number

\n

It gets the next one, on the day it is made, whether it is good or not. Numbers are never reused: a file that is withdrawn leaves a gap, and the gap stays in the index.

\n
    \n
  1. Walk. Record. Write the place and the time on the back of a hand.
    2. \n
  2. Cut nothing but the walk to and from the spot.
    3. \n
  3. Give it a number, a sentence and a length.
    4. \n
\n

What you may do with one

\n

Anything. Play it, cut it up, sell what you make from it. Nobody needs to be asked and nobody needs to be named.

\n

What is not here

\n

Pictures, maps, players, accounts. A file opens in whatever your machine already has.

\n

What it is recorded with

\n

Whatever fits in a coat pocket and survives being sat on. The list changes when something breaks, and every change is written up in the notes.

\n
    \n
  • A hand recorder, bought used in 2014, dropped twice.
    • \n
  • Two small microphones on a wire coat hanger.
    • \n
  • A hydrophone made from a piezo disc and a jam jar lid.
    • \n
\n
\n
\n
\n
\n

Who keeps this

\n

Tove Lindqvist walks the same nine kilometres most weeks with a recorder in a coat pocket, and answers mail slowly.

\n
\n
\n

Marks used in the tables

\n

Unread replies 12, a place Alder Fen, a number added this week new, and the state of a file: checked clipped withdrawn

\n
\n
\n

The catalogue so far

\n \n \n \n \n \n \n \n \n \n \n
YearNumbersHours
2017579.8
20168316.2
20156412.5
2014345.1
\n
\n
\n

Other catalogues

\n \n
\n
\n
\n\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.brutalism.blog.s03.p04.t03.u07\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"brutalism\",\n \"years\": [\n 2014,\n 2019\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": true,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-br-3437\",\n \"short\": \"v1-br-3437\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fffceb;\n --color-canvas: #fffceb;\n --color-surface: #fffceb;\n --color-surface-alt: #ffffff;\n --color-surface-strong: #eeeeee;\n --color-bar: #111111;\n --color-bar-text: #dddddd;\n --color-bar-alt: #222222;\n --color-bar-alt-text: #dddddd;\n --color-inverse: #ff3333;\n --color-inverse-text: #000000;\n --color-text: #111111;\n --color-text-muted: #444444;\n --color-heading: #000000;\n --color-heading-alt: #111111;\n --color-link: #00449e;\n --color-link-quiet: #111111;\n --color-link-visited: #444444;\n --color-link-hover: #000000;\n --color-link-active: #ff3333;\n --color-border: #111111;\n --color-border-strong: #000000;\n --color-border-muted: #cccccc;\n --color-accent: #ff3333;\n --color-accent-text: #000000;\n --color-accent-alt: #ff3333;\n --color-fill-1: #cdecff;\n --color-fill-2: #ffffff;\n --color-fill-3: #eeeeee;\n --color-fill-4: #dddddd;\n --color-button: #111111;\n --color-button-text: #ffffff;\n --color-button-hover-text: #cdecff;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #111111;\n --color-input: #ffffff;\n --color-input-text: #111111;\n --color-input-border: #111111;\n --color-disabled: #eeeeee;\n --color-disabled-text: #444444;\n --color-danger: #b00000;\n --color-danger-surface: #ffffff;\n --color-success: #1a6b1a;\n --color-warning: #7a4e00;\n --color-notice: #cdecff;\n --color-notice-text: #111111;\n --color-focus: #00449e;\n --color-shadow: #000000;\n --color-overlay: #eeeeee;\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Consolas, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 29px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 16px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 8px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 -6px 0 var(--color-border-strong);\n --shadow-control: none;\n --shadow-control-hover: inset 0 0 0 2px var(--color-button-hover-text);\n --shadow-control-pressed: inset 0 0 0 4px var(--color-border-strong);\n --shadow-dialog: -8px 8px 0 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: color-mix(in srgb, var(--color-button) 75%, white);\n --fill-button-secondary: transparent;\n --fill-input: var(--color-input);\n --focus-ring: 4px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }