{ "id": "v1-em-1828", "long_id": "v1.editorial-minimal.blog.s01.p08.t02.u08", "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": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "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-1828", "preview_url": "https://chrono.skin/s/v1-em-1828/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- On a phone (760px and below) there is no menu button: `.ds-nav__links` takes a row of its own under the brand and its links spread over the full width; the `.ds-menu` among them keeps its hairline sheet but aligns it to its right edge. The current link keeps its underline. At 600px and below a tooltip opens as a note fixed to the bottom of the window, `--space-3` from its edges.\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- The type set decides the voice; the structure only assigns sizes. `--font-heading` sets the brand, headlines, list and grid titles, figures and pull quotes; `--font-body` the running text; `--font-ui` everything small: section names, labels, buttons, captions, footer. With this pack's own type set all three are one grotesque sans (Helvetica Neue, then Helvetica and Arial; the references used commercial grotesques), with headlines at weight 700 and tight tracking.\n- Body is `--text-base` 18px at `--line-body` 1.55 in `--color-text`. Lead lines (`--text-large` 22px) use a line height of 1.45.\n- Sizes: the lead headline is `--text-display` times 1.25 (80px), the largest type on any page; `--text-display` 64px is the page title of inner pages and the figures; `--text-h1` 44px the brand, a part heading in a story, the list numerals and panel prices; `--text-h2` 28px section headings, pull quotes, panel titles (grid titles use 85% and list titles 80% of it); `--text-h3` 19px small headings and the sidebar title; `--text-ui` 14px navigation, buttons, tabs; `--text-small` 12px labels, captions, meta. Tables, form fields, notices and side text use 85% of `--text-base`.\n- Labels are small capitals of the UI face with letter spacing of a tenth of their size; they are part of the structure and do not follow `--ui-transform`, which sets navigation, buttons, tabs and form labels. `.ds-label--accent` colours the label of a lead story with `--color-accent`.\n- The text and fill pairs are those of the era, set by its first layout: page, canvas and surface colours carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and links; `--fill-bar` carries `--color-bar-text`; `--fill-bar-alt` carries `--color-bar-alt-text` (the topline); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for quieter lines (the footer); `--fill-accent` carries `--color-accent-text`; `--color-fill-1` to `--color-fill-4` are picture tones that carry only a short label or a mark in `--color-inverse-text`; `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border and `--fill-button-hover` carries `--color-button-hover-text`; `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline; buttons stand on page and surface colours only. Status colours are text and outline colours on the page.\n- `--color-accent` is the single accent: the current section, tab and page number, the lead label, the drop cap and the rule of a pull quote. It is used as text on the page, so it must be readable there.\n- Rules do the work of boxes. `--border-width-strong` in `--color-border-strong` closes the masthead and opens every section (`.ds-rule`), the figures and the byline column; hairlines of `--border-width` in `--color-border` divide columns; `--color-border-muted` divides rows inside a list, table or sidebar.\n- Pictures are drawn, not loaded: `.ds-art` is a flat composition of bars in the picture tones on `--color-fill-1` with a disc in `--color-inverse-text`. `--radius-page` and `--shadow-panel` dress pictures and grid tiles, `--radius-panel` panels, the dialog and the empty block, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: the footer rule is `--color-inverse-text` at 30% (`color-mix()`); quiet footer text and the disc use opacity; bar heights and gaps inside `.ds-art` are percentages.\n\n## Components\n\n- `.ds-page`: on ``. 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- `.ds-menu`: a `
` whose `.ds-menu__button` is a plain word (`--more` adds the plus sign) or the avatar, and whose `.ds-menu__list` of `.ds-menu__link` opens under it on a hairline sheet; `--end` aligns the list to the right edge. Use it for a few further places that do not earn a nav item.\n- `.ds-avatar`: a person, as initials in a `--size-avatar` circle on a picture tone (`--1`, `--4` for the other tones). Use it beside a name, never alone as decoration. `.ds-credit`: the row that holds an avatar, a `.ds-credit__name` and one quiet line.\n- `.ds-progress`: a `--border-width-strong` line with a `.ds-progress__bar` in the accent (`--third`, `--most` set its length; a project sets the width itself) and a `.ds-progress__label` under it that says the same in words. Use it for how far a reader or a count has come, inside a margin, sidebar or panel.\n- `.ds-tooltip`: a word with a hairline under it and a `.ds-tooltip__tip` shown on hover or focus (`--plain` drops the hairline, for a badge). Use it for a definition or a footnote of one sentence; it is never forced open.\n- `.ds-switch`: an on or off preference: a hidden `.ds-switch__input` checkbox, the `.ds-switch__track` and the words. Use it only for a setting that takes effect by itself, such as email preferences; a statement to confirm stays a `.ds-form__check`.\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 lead headline is 80px; only the drop cap of a story is larger.\n- `font-size >= 12px`: labels and captions are the smallest text.\n- `font-weight <= 700`: headlines are bold, nothing is heavier.\n- `font-families <= 2`: one family for everything, plus monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `letter-spacing <= 2px`: small capitals are spaced out by 1.2px; the largest headline is tightened by 2px.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `box-shadow-blur <= 0px`: nothing floats; the only shadows are a hard 1px line round the dialog and a ring in a hovered button.\n- `border-radius <= 0px`: boxes, fields and buttons are square; only avatars, dots and badges are round.\n- `border-width <= 4px`: rules are 1px hairlines; 4px is the rule under the navigation words, the bar of a quotation and the current tab.\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 --size-avatar: 32px;\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-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: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__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-large) * 0.75);\n height: calc(var(--text-large) * 0.75);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\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\n/* menu: a plain word (or the reader's avatar) that opens a short list under it */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n list-style: none;\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button--more::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n margin-left: var(--space-1);\n color: var(--color-text-muted);\n}\n.ds-menu[open] .ds-menu__button--more::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n color: var(--color-link-hover);\n}\n\n/* avatar: a small round picture tone with initials, beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n letter-spacing: 0;\n text-decoration: none;\n}\n/* credit: an avatar beside a name and one quiet line */\n.ds-credit {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-3) 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-credit__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* progress: a thin line that shows how far along; the words under it say the same */\n.ds-progress {\n display: block;\n height: var(--border-width-strong);\n margin: var(--space-3) 0 var(--space-1);\n background: var(--color-border-muted);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--color-accent);\n}\n.ds-progress--third .ds-progress__bar {\n width: 33%;\n}\n.ds-progress__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* tooltip: a note on a word, shown on hover or focus */\n.ds-tooltip {\n position: relative;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: max-content;\n max-width: 28ch;\n margin-bottom: var(--space-1);\n padding: var(--space-2) var(--space-3);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n@media (max-width: 600px) {\n .ds-tooltip__tip {\n position: fixed;\n right: var(--space-3);\n bottom: var(--space-3);\n left: var(--space-3);\n width: auto;\n max-width: none;\n margin: 0;\n }\n}\n\n/* switch: a preference that is on or off, drawn over a checkbox */\n.ds-switch {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n width: var(--border-width);\n height: var(--border-width);\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2);\n height: var(--space-4);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n left: var(--border-width-strong);\n width: calc(var(--space-4) - var(--border-width-strong) * 2);\n height: calc(var(--space-4) - var(--border-width-strong) * 2);\n background: var(--color-surface);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n transform: translateX(var(--space-4));\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--border-width-strong) var(--border-style) var(--color-focus);\n outline-offset: var(--border-width-strong);\n}\n\n/* phones: the links spread across the bar; the last one is a menu, which opens from the right edge */\n@media (max-width: 760px) {\n .ds-nav__links {\n justify-content: space-between;\n }\n .ds-nav__links .ds-menu__list {\n right: 0;\n left: auto;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, essay journal specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n
\n
\n
\n A journal of walking, since 2007\n

Essays on footpaths, rivers and the slow way round

\n

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.

\n
MOMarit OlandWalking and writing since 2007
\n
\n Read the latest essay\n About the author\n
\n
\n\n
\n

Recent essays

\n
    \n
  • \n On walking the old towpath New\n

    Forty miles beside a canal that no longer carries anything but herons.

    \n 12 March 2015 · 14 minutes\n
    • \n
  • \n The map that left out the hill\n

    What a surveyor chose not to draw, and why it matters to the people living under it.

    \n 3 February 2015 · 9 minutes\n
    • \n
  • \n A winter in borrowed boots\n

    Three months, one pair of boots that were not mine, and a coast in fog.

    \n 18 December 2014 · 21 minutes\n
    • \n
  • \n Rights of way, wrongs of way\n

    A short history of the stile, the gate and the polite notice.

    \n 2 November 2014 · 11 minutes\n
    • \n
\n

View the full archive

\n
\n\n
\n

Series

\n
\n \n
I
\n

Canals

\n

9 essays

\n \n \n
II
\n

Coast

\n

14 essays

\n \n \n
III
\n

Maps

\n

6 essays

\n \n \n
IV
\n

Uplands

\n

11 essays

\n \n
\n
\n\n
\n
\n
\n
The Slow Way Round
\n
\n The book\n

Twelve essays, collected and revised

\n
\n

The first eight years of chronoskin in one volume, with new maps and an afterword. Printed in a small edition this spring.

\n Reserve a copy\n
\n
\n
\n
\n
\n
\n\n
\n
\n Letters\n

A letter when there is something to read

\n

One short note for each new essay, and nothing in between.

\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. Canals
    3. \n
  3. On walking the old towpath
    4. \n
\n
\n
\n

On walking the old towpath

\n

Forty miles beside a canal that no longer carries anything but herons.

\n
\n
\n Save for later\n
\n
\n
\n\n
\n \n\n
\n
\n

I. The cut

\n

Nobody 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 no particular reason to arrive.

\n

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 sillThe beam on the canal bed that the lock gates close against.. The towpath slips past all this without comment, as towpaths do, level as a table and exactly as wide as a horse.1

\n
\n

A towpath is level as a table and exactly as wide as a horse. Everything else about a canal can be argued with.

\n
\n

What the surveyors left

\n

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:

\n
    \n
  • no gradient steeper than a barge can bear;
    • \n
  • no bend tighter than a seventy-foot hull;
    • \n
  • no bridge where a ford would do.
    • \n
\n

On the modern sheet the junction sits at grid reference SP 512 064, though the surveyors marked it only as the place where two fields met.2

\n

A note on distances

\n

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.

\n

II. The summit pound

\n

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.

\n
\n\n
    \n
  1. The standard width was nine feet, enough for one horse and a person leading it.
    2. \n
  2. The field books are held in the county record office and can be read on request.
    3. \n
\n
\n\n \n
\n\n
\n

Further reading

\n \n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. Archive
    3. \n
\n
\n
\n

Archive

\n

Every essay since 2007, newest first.

\n
\n
\n Subscribe\n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Showing 7 of 40 essays. Reading time at 240 words a minute.
EssaySeriesYearWordsMinutes
On walking the old towpathCanals20153,40014
The map that left out the hillMaps20152,1509
A winter in borrowed bootsCoast20145,02021
Rights of way, wrongs of wayUplands20142,64011
The tunnel at duskCanals20141,9008
Salt marsh, low waterCoast20134,30018
Water that goes uphillCanals20132,88012
\n
\n
\n \n
\n New\n In the book\n 40\n Revised\n In draft\n Withdrawn\n
\n
\n
\n\n
\n

Translations

\n
\n \n

Nothing translated yet

\n

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.

\n Offer a translation\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. About
    3. \n
\n
\n
\n

About

\n

Who writes chronoskin, and how to write back.

\n
\n
\n Read the archive\n
\n
\n\n
\n
\n
\n

chronoskin is written by Marit Oland, who has been walking the same few counties since 2007 and has not yet run out of them.

\n

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.

\n
\n
    \n
  • 40Essays
    • \n
  • 8Years
    • \n
  • 2,310Miles on foot
    • \n
  • 5Pairs of boots
    • \n
\n
\n
\n\n
\n

Write a letter

\n
\n
\n

Letters are read on Sundays. A reply can take a fortnight.

\n

The letter was not sent. Check the address below and try again.

\n
\n
\n
\n \n \n
\n \n \n \n
\n \n Preview\n Save as draft\n Discard\n \n
\n
\n\n
\n
\n
\n

Discard this letter?

\n \n
\n
\n

The draft has not been saved. What you have written will be lost.

\n
\n
\n Keep writing\n Discard\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.blog.s01.p08.t02.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"editorial-minimal\",\n \"years\": [\n 2012,\n 2018\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-em-1828\",\n \"short\": \"v1-em-1828\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #020733;\n --color-canvas: #020733;\n --color-surface: #0a1040;\n --color-surface-alt: #111850;\n --color-surface-strong: #1f2768;\n --color-bar: #020733;\n --color-bar-text: #ffffff;\n --color-bar-alt: #010524;\n --color-bar-alt-text: #a6a9c9;\n --color-inverse: #f4f4fa;\n --color-inverse-text: #020733;\n --color-text: #d6d8e8;\n --color-text-muted: #9599bd;\n --color-heading: #ffffff;\n --color-heading-alt: #e368d6;\n --color-link: #e97fde;\n --color-link-quiet: #b4b7d3;\n --color-link-visited: #b792d6;\n --color-link-hover: #f3a2ea;\n --color-link-active: #f9c9f4;\n --color-border: #272e6a;\n --color-border-strong: #d6d8e8;\n --color-border-muted: #161d54;\n --color-accent: #e368d6;\n --color-accent-text: #020733;\n --color-accent-alt: #02b875;\n --color-fill-1: #c7a4ea;\n --color-fill-2: #7fd6b0;\n --color-fill-3: #9ba6e2;\n --color-fill-4: #e7a2ca;\n --color-button: #e368d6;\n --color-button-text: #020733;\n --color-button-hover-text: #020733;\n --color-button-secondary: #0a1040;\n --color-button-secondary-text: #ffffff;\n --color-input: #010524;\n --color-input-text: #ffffff;\n --color-input-border: #3b4388;\n --color-disabled: #111850;\n --color-disabled-text: #5f6596;\n --color-danger: #ff8f8f;\n --color-danger-surface: #3a1033;\n --color-success: #5fd9a0;\n --color-warning: #f0c264;\n --color-notice: #10205e;\n --color-notice-text: #cbd4ff;\n --color-focus: #e368d6;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(1 3 24 / 0.75);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-mono: \"SFMono-Regular\", \"Roboto Mono\", Menlo, Consolas, monospace;\n --text-base: 18px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 22px;\n --text-display: 64px;\n --text-h1: 44px;\n --text-h2: 28px;\n --text-h3: 19px;\n --line-body: 1.55;\n --line-heading: 1.12;\n --line-display: 1.02;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.5px;\n --display-tracking: -2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: inset 0 0 0 2px var(--color-border-strong);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 1px var(--color-border-strong);\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-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-inverse);\n --fill-button-secondary: transparent;\n --fill-input: var(--color-canvas);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: color 0.12s ease-out, background-color 0.12s ease-out, opacity 0.12s ease-out;\n --backdrop-blur: 0px;\n}\n" } }