{ "id": "v1-em-6535", "long_id": "v1.editorial-minimal.shop.s06.p05.t03.u05", "name": "Editorial minimalism bookshop", "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": "shop", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: large, carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its shop form, the page of a small press, a single-book publisher or a paid newsletter of those years: one title at a time shown as a flat cover with its name set in type, a price and one button, the back catalogue as a ruled list, and an order form as plain as a letter. It sells by being readable, so the cover, the lead and the price are set with the same care as a page of the book.", "url": "https://chrono.skin/s/v1-em-6535", "preview_url": "https://chrono.skin/s/v1-em-6535/specimen.html", "files": { "STYLE.md": "# Editorial minimalism bookshop\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: large, carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its shop form, the page of a small press, a single-book publisher or a paid newsletter of those years: one title at a time shown as a flat cover with its name set in type, a price and one button, the back catalogue as a ruled list, and an order form as plain as a letter. It sells by being readable, so the cover, the lead and the price are set with the same care as a page of the book.\n\n## Layout\n\n- The page is a fixed centred sheet of `--size-page` (980px), designed for a 1280px viewport; `.ds-wrap` holds every row. Only the navigation bar and the footer strip paint edge to edge.\n- Navigation is one line `--size-nav` (72px) tall on `--fill-bar` with a hairline under it, in three parts: the shelves at the left, the brand in the middle, the basket (a word and its sum in a quiet badge) at the right. The current view is underlined with a `--border-width-strong` accent stroke.\n- The home view is the book of the season and what else there is. The `.ds-hero` is two columns: the `.ds-cover` of `--size-cover` (300px) at the left and, `--space-6` away, a label, the title at `--text-display`, the lead, the `.ds-price` line over a hairline, two buttons and one small note. Then `.ds-stat` centred between two hairlines, the shelf as a `.ds-grid` of four covers, the catalogue as a `.ds-list`, and `.ds-offer`: the subscription `.ds-panel` beside the inverted `.ds-letters` block. Rows begin with a `.ds-rule`, small capitals centred over a short strong stroke.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (title at `--text-h1`, one italic line, one action at the right) closed by a hairline. A book page is `.ds-split`: a column of `--size-aside` (300px) with the cover and the book's particulars as a `.ds-sidebar`, and the wide column (600px, about 62 characters) that starts with `.ds-tabs` and holds the text. A list page puts `.ds-tabs` directly over the table. The order page is `.ds-split--reverse`: notices and form in the wide column, the basket panel at the right, and the dialog in a row of its own under both.\n- Views. The specimen is a small press's shop with four views. `home` is the book of the season, the press in figures, four more books, the four latest of the catalogue and the two offers. `book` is one title: breadcrumb, page header with the price on its button, cover and particulars at the left, tabs, ten pages of the text with a drop cap and a pull quote, and more by the author. `issues` is the catalogue: tabs, the table with pagination and the label legend, and the empty row of announced books. `order` is the notices, the delivery form with its button row, the basket summary and, under them, the open dialog. Below 920px the side column goes over or under the words and the shelf goes two across; below 640px the shelves move to a second row of the bar, the hero stacks under a smaller cover, titles drop a size and a wide table scrolls inside `.ds-table__wrap`, while the page itself never scrolls sideways.\n- Spacing scale, built on the 32px line of the text: `--space-1` 4px (inside badges, between list entries), `--space-2` 8px (label to field, adjacent controls), `--space-3` 16px (row padding, button row, under a label), `--space-4` 32px, one line (between paragraphs and fields, cover and panel padding, grid gutter, side padding of the sheet), `--space-5` 48px (under a rule, between stacked blocks, above a breadcrumb), `--space-6` 80px (between sections, between the columns of the hero and a split), `--space-7` 112px (reserved for a single opening space; with `--space-5` it sets the height of a text field).\n- Other sizes: `--size-dialog` 460px, `--size-icon` 40px.\n- On a phone (640px and below) there is no menu button: the brand and `.ds-nav__aside` stay on the first row and `.ds-nav__links` takes a second row of its own, centred. The current link keeps its accent stroke. At 920px and below a tooltip opens as a note fixed to the bottom of the window, `--space-3` from its edges, the full width at 600px and below and no wider than 28 characters above that.\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- `--font-heading` sets the brand, titles of stories, figures and dialog titles; `--font-body` the excerpts, the story and the fields a writer types in; `--font-ui` everything that is the application talking: navigation, buttons, tabs, bylines, labels, counts, footer. With this pack's own type set that is a slab serif for titles (Rockwell, then Roboto Slab), a transitional serif for text (Charter, then Georgia) and a plain humanist sans for the interface (Lucida Grande, then Verdana); the references used their own commercial faces.\n- Body is `--text-base` 17px at `--line-body` 1.5 in `--color-text`. Lead lines (`--text-large` 20px) use a line height of 1.4 to 1.45; excerpts and page header lines are `--color-text-muted`.\n- Sizes: `--text-display` 38px (hero title only), `--text-h1` 30px (page title, a part heading in a story, the editor's title field, figures), `--text-h2` 23px (card titles, section headings, pull quotes, dialog and empty titles), `--text-h3` 18px (brand, picks, panel titles), `--text-ui` 13px (navigation, buttons, tabs, sidebar lines), `--text-small` 11px (bylines, counts, labels, badges, footer). Tables, notices and form fields use the body face at 85% of `--text-base`.\n- `.ds-label`, table heads, sidebar titles and badges are small capitals with letter spacing of a tenth of their size; navigation, buttons, tabs and form labels follow `--ui-transform` and carry 4% spacing.\n- The text and fill pairs are those of the era, set by its first layout: page, canvas and surface colours and `--fill-panel` carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and links; `--fill-bar` carries `--color-bar-text`; `--fill-bar-alt` carries `--color-bar-alt-text` (the editor toolbar and the footer); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for the lead (the hero); `--fill-accent` carries `--color-accent-text`; `--color-fill-1` to `--color-fill-4` are picture tones (picks, card pictures, avatars) that carry only initials in `--color-inverse-text`; `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border and `--fill-button-hover` carries `--color-button-hover-text`; `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline; `--fill-input` carries `--color-input-text`. Buttons stand on page, surface and bar colours only; on the hero band use `.ds-button--inverse` and `.ds-hero__link`.\n- `--color-accent` marks the current section, tab and page number and fills the default badge. Author names in a byline are `--color-link`.\n- Hairlines of `--border-width` in `--color-border` divide cards and close the page header and the bar; `--color-border-muted` divides table rows; `--border-width-strong` marks current items and the foot of a table head. `--radius-page` and `--shadow-panel` dress pictures, `--radius-panel` panels, the dialog and the empty box, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges and the search field. With this pack's surface set corners are 4px and panels, pictures and controls carry a faint 1px shadow.\n- One-off values the vocabulary has no token for: avatars are circles (50%); the hero lead is dimmed by opacity 0.75; the pull quote is italic at a line height of 1.35.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill and the body type. It has no width; `.ds-wrap` is the sheet.\n- `.ds-wrap`: the 980px sheet with 32px side padding. `.ds-section` gives a block 80px above and below (`--first` 48px above, `--flush` none above). `.ds-stack` stacks blocks one line apart. `.ds-split` is a 300px `.ds-split__side` and a wide `.ds-split__main`; `--reverse` puts the narrow column at the right. `.ds-label` is a small capital line; `.ds-rule` a centred section head over a short strong stroke.\n- `.ds-cover`: a book as a flat rectangle of 2 to 3 in a picture tone (`--2`, `--3`, `--4`): `.ds-cover__series` at the top, `.ds-cover__title` in the middle, `.ds-cover__author` over a hairline at the foot. `--small` is the shelf size.\n- `.ds-brand`: the mark and name in the middle of the bar. `.ds-brand__mark` is a 32px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` border, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name at `--text-h2`. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the bar. `.ds-nav__inner` holds `.ds-nav__links` of `.ds-nav__link` (current: `is-current`), the brand, and `.ds-nav__aside` with the basket link and a `.ds-badge--quiet`. 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 book of the season: a `.ds-cover` and `.ds-hero__copy` with a label, `.ds-hero__title`, `.ds-hero__lead`, the `.ds-price` line (`.ds-price__amount`, `.ds-price__note`), `.ds-hero__actions` (the buy button and one secondary) and a `.ds-hero__note`.\n- `.ds-page-header`: head of an inner page, after the breadcrumb: `.ds-page-header__copy` with `.ds-page-header__title` and one italic `.ds-page-header__text` line, `.ds-page-header__actions` with a single button, and a hairline below.\n- `.ds-prose`: running text: `h1`, `h2` (italic), `h3` (a label), paragraphs, lists, `strong`, `code`. `.ds-prose__lead` is a larger paragraph; `.ds-prose__dropcap` is a span around a first letter that makes it a three-line initial. `.ds-quote` with `.ds-quote__text` is the italic pull quote hung on a hairline at its left; `.ds-quote__source` names who said it.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for titles in tables and side lists; `--more` is a small capital link with an arrow. `.ds-linklist` with `.ds-linklist__item` sets links as rows on faint rules.\n- `.ds-button`: a word in a bordered box on `--fill-button`. Variants: `--secondary` (hairline border on `--fill-button-secondary`), `--danger` (outlined in `--color-danger`, filled on hover; destructive actions only), `--inverse` (on an inverted block), `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-3` apart.\n- `.ds-form`: vertical form, `--space-4` 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-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-notice`: a tinted line with a strong rule at its left; `--error` uses the danger colours. `.ds-notice__title` is the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: a row of words and numbers, `.ds-pagination__link`; `is-current` is underlined in the accent, `is-disabled` is grey.\n- `.ds-dialog`: a veil of `--color-overlay` centring a plain `.ds-dialog__box` with a strong hairline border and `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, right-aligned `.ds-dialog__actions`.\n- `.ds-list`: the catalogue as a ruled list. Each `.ds-list__item` is a `.ds-list__no`, `.ds-list__main` with the `.ds-list__title` and an italic `.ds-list__text` line, and `.ds-list__meta` at the right with the season and the `.ds-list__price`. `.ds-list__more` holds the centred link to the whole catalogue.\n- `.ds-panel`: the one bordered box of a page on `--fill-panel`: a label, `.ds-panel__title` and `.ds-panel__body`. An order's lines go in a `.ds-summary` of `.ds-summary__row` (`--total` for the sum) with a `.ds-summary__figure` at the right. `.ds-offer` sets the panel beside `.ds-letters`, the inverted block with `.ds-letters__title`, `.ds-letters__text` and an inline form.\n- `.ds-stat`: the press in figures, centred between two hairlines. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` over a `.ds-stat__label`, without dividers.\n- `.ds-grid`: the shelf, four across: each `.ds-grid__cell` a `.ds-cover--small`, a `.ds-grid__title` and a `.ds-grid__text` line with author and price.\n- `.ds-tabs`: equal words between two hairlines, each in a `.ds-tabs__item`; `.ds-tabs__tab` with `is-current` stands on an accent stroke.\n- `.ds-sidebar`: the particulars of a book: `.ds-sidebar__title` over a hairline, `.ds-sidebar__list` of `.ds-sidebar__item` rows with a name at the left and a link or `.ds-sidebar__value` at the right; the current row is `is-current`, bold.\n- `.ds-breadcrumb`: a small capital trail of `.ds-breadcrumb__item` separated by dots; the last is `.ds-breadcrumb__current`.\n- `.ds-empty`: a centred message closed by a hairline, where the rows would be: `.ds-empty__icon`, `.ds-empty__title`, an italic `.ds-empty__text` and one button.\n- `.ds-footer`: the imprint strip on `--fill-bar-alt`: `.ds-footer__inner` with a line of text and `.ds-footer__links` of `.ds-footer__link`.\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-accordion`: `
` rows on hairlines, each a `.ds-accordion__head` question and a `.ds-accordion__body` answer. Use it for a short list of questions or notes in a side column or panel.\n\n## Never\n\n- `content-width <= 980px`: everything stays on the sheet.\n- `block-gap <= 112px`: sections are 80px apart.\n- `font-size <= 96px`: the three-line drop cap is the largest letter; the largest title is 38px.\n- `font-size >= 11px`: bylines and counts are the smallest text.\n- `font-weight <= 700`: titles are bold, nothing is heavier.\n- `font-families <= 4`: a slab for titles, a serif for text, a sans for the interface, monospace for code.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing <= 1.1px`: only small capitals are tracked.\n- `box-shadow-blur <= 0px`: nothing has a soft shadow; the dialog is framed by a second hard line.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 0px`: every corner is square.\n- `border-width <= 2px`: hairlines are 1px; 2px marks the current item, a part title and a table head.\n- `transition = none`: states change at once.\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 thing for sale is a `.ds-cover` with its name set in type, a `.ds-price` line and one primary button; never a photograph, a star rating or a banner. A new row of the home view is a `.ds-section` that begins with a `.ds-rule`; a new list is ruled like `.ds-list`. Use one `.ds-panel` and one inverted block per page at most. Keep to the era's fill and text pairs so that the component works with every palette, light or dark: only a few words on a picture tone, only `.ds-button--inverse` on an inverted block.\n", "components.css": ":root {\n --size-page: 980px;\n --size-cover: 300px;\n --size-aside: 300px;\n --size-nav: 72px;\n --size-dialog: 460px;\n --size-icon: 40px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 32px;\n --space-5: 48px;\n --space-6: 80px;\n --space-7: 112px;\n}\n\n/* shell: a small press's shop; one book at a time, shown as a flat cover beside its words */\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/* 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\n/* sheet: the width of the shop */\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-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-4);\n}\n/* rule: a section head; small capitals centred over a short strong stroke */\n.ds-rule {\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-align: center;\n text-transform: uppercase;\n}\n.ds-rule::after {\n content: \"\";\n display: block;\n width: var(--space-5);\n margin: var(--space-3) auto 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n/* split: a narrow column for the cover or the order, a wide one for the words */\n.ds-split {\n display: grid;\n grid-template-columns: var(--size-aside) minmax(0, 1fr);\n column-gap: var(--space-6);\n align-items: start;\n}\n.ds-split--reverse {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-split__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-split__main {\n min-width: 0;\n}\n\n/* cover: a book as a flat rectangle in a picture tone, its title set in type */\n.ds-cover {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n aspect-ratio: 2 / 3;\n padding: var(--space-4);\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}\n.ds-cover--2 {\n background: var(--color-fill-2);\n}\n.ds-cover--3 {\n background: var(--color-fill-3);\n}\n.ds-cover--4 {\n background: var(--color-fill-4);\n}\n.ds-cover__series {\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-cover__title {\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}\n.ds-cover__author {\n padding-top: var(--space-2);\n border-top: var(--border-width) var(--border-style) currentColor;\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-cover--small {\n padding: var(--space-3);\n}\n.ds-cover--small .ds-cover__title {\n font-size: var(--text-h3);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* nav: one line; the shelves at the left, the name in the middle, the basket at the right */\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__inner {\n max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-4);\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\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: var(--space-4);\n height: var(--space-4);\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-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-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 white-space: nowrap;\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; a book marks the shop, the order marks the basket */\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(#book:target) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#issues:target) .ds-nav__link[href=\"#issues\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#order:target) .ds-nav__links .ds-nav__link[href=\"#order\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* hero: the book of the season; its cover at the left, title, a few lines, the price and one button at the right */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-cover) minmax(0, 1fr);\n column-gap: var(--space-6);\n align-items: center;\n padding: var(--space-6) 0;\n}\n.ds-hero__copy {\n min-width: 0;\n}\n.ds-hero__title {\n margin: var(--space-3) 0 var(--space-3);\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-4);\n max-width: 44ch;\n font-size: var(--text-large);\n line-height: 1.4;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n/* price: the figure in the display face with what it buys beside it */\n.ds-price {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-1) var(--space-3);\n margin: 0 0 var(--space-4);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-price__amount {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n font-variant-numeric: lining-nums;\n}\n.ds-price__note {\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/* page header: the head of an inner page; title and one italic 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-3) 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-2) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text-muted);\n font-style: italic;\n line-height: 1.4;\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n padding-bottom: var(--space-1);\n}\n\n/* typography: what the press says about a book, and a page of the book 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-5) 0 var(--space-3);\n font-size: var(--text-h1);\n}\n.ds-prose h1:first-child,\n.ds-prose h2: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 font-style: italic;\n}\n.ds-prose h3 {\n margin: var(--space-4) 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-1);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n 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__lead {\n font-size: var(--text-large);\n line-height: 1.4;\n}\n.ds-prose + .ds-rule {\n margin-top: var(--space-5);\n}\n/* pull quote: what a reader said; italic, hung on a hairline at its left */\n.ds-quote {\n margin: var(--space-4) 0;\n padding: 0 0 0 var(--space-4);\n color: var(--color-heading);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-style: italic;\n font-weight: var(--weight-heading);\n line-height: 1.4;\n}\n.ds-quote__text {\n margin: 0;\n}\n.ds-quote__source {\n margin-top: var(--space-2);\n font-style: normal;\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\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: \" \\2192\";\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: a word in a bordered box; the palette decides whether it is an outline or a fill */\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 block */\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 */\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-4);\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/* 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 flex-wrap: wrap;\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/* 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 flex-wrap: wrap;\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/* list: the back catalogue as a ruled list. Number, title and a line about it, then season and price */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--space-6) minmax(0, 1fr) auto;\n column-gap: var(--space-3);\n align-items: baseline;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__no {\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__main {\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\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: 0;\n color: var(--color-text-muted);\n font-size: calc(var(--text-base) * 0.85);\n font-style: italic;\n line-height: 1.4;\n}\n.ds-list__meta {\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-align: right;\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-list__price {\n margin-left: var(--space-3);\n color: var(--color-heading);\n font-variant-numeric: lining-nums tabular-nums;\n}\n.ds-list__more {\n margin: var(--space-4) 0 0;\n text-align: center;\n}\n\n/* offer: the subscription panel and the letters block, side by side */\n.ds-offer {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: stretch;\n}\n/* panel: the one box of a page */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n padding: var(--space-4);\n}\n.ds-panel__title {\n margin: 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 {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-panel__body p {\n margin: 0;\n}\n/* summary: the lines of an order inside a panel */\n.ds-summary {\n width: 100%;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-summary__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-summary__row--total {\n color: var(--color-heading);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n font-weight: var(--weight-bold);\n}\n.ds-summary__figure {\n flex: 0 0 auto;\n font-variant-numeric: lining-nums tabular-nums;\n}\n/* letters: the inverted block for the press's letter */\n.ds-letters {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n}\n.ds-letters__title {\n margin: var(--space-2) 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}\n.ds-letters__text {\n margin: 0;\n font-size: calc(var(--text-base) * 0.85);\n opacity: 0.75;\n}\n.ds-letters .ds-label {\n color: inherit;\n opacity: 0.65;\n}\n\n/* stats: the edition in figures, centred between two hairlines */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-stat__item {\n min-width: 0;\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: lining-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: the shelf; four covers with title, author and price underneath */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: block;\n min-width: 0;\n color: var(--color-text);\n text-decoration: none;\n}\n.ds-grid__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\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 letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n\n/* tabs: equal words between two hairlines; the current one stands on an accent stroke */\n.ds-tabs {\n display: flex;\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__item {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) var(--space-2);\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-align: center;\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/* sidebar: the particulars of a book; name at the left, value at the right, on faint rules */\n.ds-sidebar {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: 1.5;\n}\n.ds-sidebar__title {\n margin: 0;\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 display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n color: var(--color-text-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__value {\n color: var(--color-text);\n text-align: right;\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: \"\\00B7\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* empty state: a centred sentence where the rows would be, closed by a hairline */\n.ds-empty {\n padding: var(--space-4) var(--space-4) var(--space-5);\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-2);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-style: italic;\n}\n\n/* footer: the imprint 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 two columns: the side column goes over or under the words, the shelf goes two across */\n@media (max-width: 920px) {\n .ds-hero {\n grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n column-gap: var(--space-5);\n padding: var(--space-5) 0;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-split,\n .ds-split--reverse {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-5);\n }\n .ds-split__side > .ds-cover {\n max-width: var(--size-cover);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n/* narrow windows: one column; the shelves move to a second row of the bar, a wide table scrolls inside its own box */\n@media (max-width: 640px) {\n .ds-wrap,\n .ds-nav__inner,\n .ds-footer__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav__inner {\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0 var(--space-3);\n padding-top: var(--space-3);\n padding-bottom: var(--space-2);\n min-height: 0;\n }\n .ds-brand {\n grid-column: 1;\n grid-row: 1;\n }\n .ds-brand__name {\n font-size: var(--text-h3);\n }\n .ds-nav__aside {\n grid-column: 2;\n grid-row: 1;\n }\n .ds-nav__links {\n grid-column: 1 / -1;\n grid-row: 2;\n gap: var(--space-4);\n padding-top: var(--space-2);\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-4);\n padding: var(--space-4) 0 var(--space-5);\n }\n .ds-hero > .ds-cover {\n width: 62%;\n }\n .ds-hero__title,\n .ds-page-header__title,\n .ds-prose h1,\n .ds-cover__title,\n .ds-stat__figure,\n .ds-price__amount {\n font-size: calc(var(--text-h1) * 0.8);\n }\n .ds-hero__lead,\n .ds-prose__lead,\n .ds-quote,\n .ds-list__title {\n font-size: calc(var(--text-large) * 0.85);\n }\n .ds-cover--small .ds-cover__title {\n font-size: calc(var(--text-h3) * 0.85);\n }\n .ds-cover--small .ds-cover__series {\n display: none;\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 }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4) var(--space-3);\n }\n .ds-grid {\n gap: var(--space-4) var(--space-3);\n }\n .ds-list__item {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n .ds-list__no {\n grid-column: 1 / -1;\n }\n .ds-offer {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-tabs {\n overflow-x: auto;\n }\n .ds-tabs__item {\n flex: 0 0 auto;\n }\n .ds-tabs__tab {\n padding: var(--space-3);\n }\n .ds-table {\n min-width: 56ch;\n }\n .ds-form__row,\n .ds-form--inline {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-3);\n }\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--most .ds-progress__bar {\n width: 80%;\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: 920px) {\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@media (min-width: 601px) and (max-width: 920px) {\n .ds-tooltip__tip {\n right: auto;\n max-width: 28ch;\n }\n}\n\n/* accordion: questions on hairlines; one opens at a time under its own line */\n.ds-accordion {\n margin: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::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 color: var(--color-text-muted);\n}\n.ds-accordion__item[open] .ds-accordion__head::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3);\n color: var(--color-text);\n}\n\n/* phones: the links sit centred in the bar */\n@media (max-width: 640px) {\n .ds-nav__links {\n justify-content: center;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, bookshop specimen\n\n\n\n\n\n
\n
\n \n \n \n chronoskin\n \n
\n Two books\n $32\n
\n
\n
\n\n
\n
\n
\n
\n chronoskin No. 12\n The Night Ferry\n Ilse Brandt\n
\n
\n Book of the season New\n

The Night Ferry

\n

Nine crossings of the same water, written between midnight and the first light by a deckhand who kept a notebook for thirty years.

\n

$18Paperback · 184 pages · posted in three days

\n
\n Buy the book\n Read ten pages first\n
\n

chronoskin is a press of two people. We print four small books a year and sell them here.

\n
\n
\n\n
    \n
  • 12Books so far
    • \n
  • 4A year
    • \n
  • 600Copies of each
    • \n
  • 3Days to the post
    • \n
\n\n
\n

Still on the shelf

\n
\n \n
No. 11A Year of BreadHana Voss
\n

A Year of Bread

\n

Hana Voss · $16

\n \n \n
No. 10Forty BridgesOren Malik
\n

Forty Bridges

\n

Oren Malik · $16

\n \n \n
No. 9Weeds of One Car ParkSami Aro
\n

Weeds of One Car Park

\n

Sami Aro · $14

\n \n \n
No. 8Letters Never PostedPetra Lund
\n

Letters Never Posted

\n

Petra Lund · $14

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

The catalogue

\n
    \n
  • \n No. 12\n
    The Night Ferry

    Ilse Brandt. Nine crossings of the same water.

    \n Spring 2016 $18\n
    • \n
  • \n No. 11\n
    A Year of Bread

    Hana Voss. Fifty-two loaves, most of them wrong.

    \n Winter 2015 $16\n
    • \n
  • \n No. 10\n
    Forty Bridges

    Oren Malik. A river walked from its mouth to its source.

    \n Autumn 2015 $16\n
    • \n
  • \n No. 9\n
    Weeds of One Car Park

    Sami Aro. Thirty-one species, with drawings.

    \n Summer 2015 $14\n
    • \n
\n

All twelve books

\n
\n\n
\n
\n
\n Subscription\n

The next four books, by post, for $48

\n
\n

Each one arrives in the week it is printed, a fortnight before the shop has it. Stop whenever you like.

\n 438 of 600 places taken for this year\n Subscribe for a year\n
\n
\n
\n
\n Letters\n

A note when a book goes to the printer

\n

Four notes a year, and never anything else.

\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Shop
    2. \n
  2. Catalogue
    3. \n
  3. No. 12, The Night Ferry
    4. \n
\n
\n
\n

The Night Ferry

\n

Ilse Brandt. Nine crossings of the same water.

\n
\n
\n Add to basket · $18\n
\n
\n\n
\n \n\n
\n \n
\n

First crossing

\n

The last ferry leaves at ten to midnight and nobody on it has chosen to be there. I have worked its deck for thirty years and I can tell you who will be aboard before the ramp comes down: two nurses, a baker, a man with a bicycle and whoever missed the bridge.

\n

The crossing takes nineteen minutes. That is long enough to drink a cup of tea and too short to fall asleep, which is the whole trouble with it.

\n
\n

Nineteen minutes is long enough for tea and too short for sleep, which is the whole trouble.

\n
\n

What the notebook was for

\n

I began writing things down in 1986 because the mate asked me to keep count of the cars. The count is still at the front of every page, in the form cars / foot / cycles, and after it comes whatever else happened:

\n
    \n
  • the weather, in one word;
    • \n
  • who spoke, and to whom;
    • \n
  • anything left on board.
    • \n
\n

A note on the text

\n

The nine crossings are printed as they were written. Only the names have been changed.

\n
\n\n

Also by this author

\n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Shop
    2. \n
  2. Catalogue
    3. \n
\n
\n
\n

Catalogue

\n

Every book the press has printed since 2013, 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 \n
Showing 7 of 12 books. Prices include postage within the country.
No.TitleAuthorSeasonPagesPrice
12The Night Ferry NewIlse BrandtSpring 2016184$18
11A Year of BreadHana VossWinter 2015142$16
10Forty BridgesOren MalikAutumn 2015168$16
9Weeds of One Car ParkSami AroSummer 201596$14
8Letters Never PostedPetra LundSpring 2015120$14
7A Borrowed KitchenTove MarenWinter 2014132$14
6The Harbour at Low WaterIlse BrandtAutumn 2014156$16
\n
\n
\n \n
\n New\n Second printing\n 12\n In stock\n Last copies\n Sold out\n
\n
\n
\n\n
\n

Announced

\n
\n \n

Nothing announced yet

\n

Number thirteen is with its author. We will say what it is when the proofs come back, and not a day before.

\n Tell me when it is\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Shop
    2. \n
  2. Your order
    3. \n
\n
\n
\n

Your order

\n

Two books, wrapped together and posted on Friday.

\n
\n
\n Keep looking\n
\n
\n\n
\n
\n
\n

Orders made before Thursday noon are posted on Friday. Later ones go a week after.

\n

The order was not placed. Check the address below and try again. Nothing has been charged.

\n
\n
\n
\n \n \n
\n \n \n \n
\n \n Check the total\n Keep for later\n Empty the basket\n \n
\n
\n
\n\n \n
\n\n
\n

Before the basket is emptied

\n
\n
\n
\n

Empty the basket?

\n \n
\n
\n

Both books go back on the shelf. The address you typed is kept.

\n
\n
\n Keep them\n Empty it\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.shop.s06.p05.t03.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"editorial-minimal\",\n \"years\": [\n 2012,\n 2018\n ]\n },\n \"archetype\": \"shop\",\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-6535\",\n \"short\": \"v1-em-6535\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f4f4f4;\n --color-surface-strong: #fff48f;\n --color-bar: #ffffff;\n --color-bar-text: #000000;\n --color-bar-alt: #f4f4f4;\n --color-bar-alt-text: #444444;\n --color-inverse: #111111;\n --color-inverse-text: #ffe600;\n --color-text: #111111;\n --color-text-muted: #6b6b6b;\n --color-heading: #000000;\n --color-heading-alt: #444444;\n --color-link: #000000;\n --color-link-quiet: #555555;\n --color-link-visited: #5c5c5c;\n --color-link-hover: #806600;\n --color-link-active: #000000;\n --color-border: #8c8c8c;\n --color-border-strong: #000000;\n --color-border-muted: #d9d9d9;\n --color-accent: #111111;\n --color-accent-text: #ffe600;\n --color-accent-alt: #ffe600;\n --color-fill-1: #2a2a2a;\n --color-fill-2: #555555;\n --color-fill-3: #777777;\n --color-fill-4: #3d3d3d;\n --color-button: #111111;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffe600;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #111111;\n --color-disabled: #e8e8e8;\n --color-disabled-text: #9b9b9b;\n --color-danger: #c8102e;\n --color-danger-surface: #fde8ea;\n --color-success: #1a7f37;\n --color-warning: #8a6100;\n --color-notice: #ffef5c;\n --color-notice-text: #111111;\n --color-focus: #000000;\n --color-shadow: rgb(0 0 0 / 0.25);\n --color-overlay: rgb(17 17 17 / 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Charter, \"Bitstream Charter\", \"Source Serif Pro\", Georgia, Cambria, \"Times New Roman\", serif;\n --font-heading: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"Zilla Slab\", Georgia, serif;\n --font-ui: \"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", Geneva, Verdana, sans-serif;\n --font-mono: \"Andale Mono\", \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 17px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 20px;\n --text-display: 38px;\n --text-h1: 30px;\n --text-h2: 23px;\n --text-h3: 18px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.18;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: 0 0 0 3px var(--color-surface), 0 0 0 4px 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: var(--color-button-secondary);\n --fill-input: var(--color-surface);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }