{ "id": "v1-em-7121", "long_id": "v1.editorial-minimal.portal.s07.p01.t02.u01", "name": "Editorial minimalism interview series", "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": "portal", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its interview series, the weekly conversation with one person that small independent publications of those years ran: the newest guest shown as two halves, a portrait plate and a name set large, earlier guests as a wall of plates three across, one sentence of a guest set very large, and the interview itself as bold questions over plain answers. The picture carries the front page and the type carries everything else, so the plates are flat tones and the names do the work.", "url": "https://chrono.skin/s/v1-em-7121", "preview_url": "https://chrono.skin/s/v1-em-7121/specimen.html", "files": { "STYLE.md": "# Editorial minimalism interview series\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its interview series, the weekly conversation with one person that small independent publications of those years ran: the newest guest shown as two halves, a portrait plate and a name set large, earlier guests as a wall of plates three across, one sentence of a guest set very large, and the interview itself as bold questions over plain answers. The picture carries the front page and the type carries everything else, so the plates are flat tones and the names do the work.\n\n## Layout\n\n- The page is a fixed centred sheet of `--size-page` (1120px), designed for a 1280px viewport; `.ds-wrap` holds every row. Only the navigation bar, the inverted `.ds-band` and the footer strip paint edge to edge.\n- Navigation is one bar `--size-nav` (64px) tall on `--fill-bar` with a hairline under it: the brand at the left edge of the sheet, three words at the right. Each word is as tall as the bar and the current one hangs from a `--border-width-strong` accent stroke on the bar's upper edge.\n- The home view is the newest interview and the way into the rest. The `.ds-hero` is two equal halves: at the left `.ds-hero__plate`, a picture tone `--size-plate` (480px) tall that carries only the interview's number, at the right `.ds-hero__copy`, centred: a label, the guest's name at `--text-display`, the trades as a tracked line, two lines of lead and one button. Then `.ds-grid`, six earlier guests three across; `.ds-voice`, one quotation centred at `--text-h1`; `.ds-stat`, four figures; `.ds-duo`, seven and five parts, with the numbered `.ds-list` at the left and the `.ds-panel` at the right; and the inverted `.ds-band` with the subscription. Rows that need a name begin with a `.ds-rule`: small capitals at the left, one quiet link at the right, a hairline under both. Rows are `--space-6` apart.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (an optional label, the title at `--text-h1`, one grey line at `--text-large`, one action at the right) closed by a hairline. An interview is `.ds-article`: a column of `--size-side` (200px) with the date, the credit and a `.ds-sidebar`, the text in `--size-measure` (620px, about 68 characters), and a quotation in the remaining 220px; both side columns stay in view while the text scrolls. A list page puts `.ds-tabs` directly over the table. A form page is `.ds-split`: the form in the wide column and a column of `--size-aside` (360px) for notes and the dialog.\n- Views. The specimen is a weekly series of interviews with people who make things by hand, with four views. `home` is the newest guest, six recent guests, a quotation, the series in figures, five interviews from the archive beside the printed annual, and the subscription band. `interview` is one conversation: breadcrumb, page header, the particulars and other guests of the trade at the left, the questions and answers, a quotation at the right, then links to more. `archive` is the list page: tabs by trade, the table with pagination and the label legend, and the empty trade. `nominate` is the form page: the notices, the suggestion form with its button row, and beside it two notes and the open discard dialog. Below 1040px the quotation falls under the interview and the pairs stack; below 720px the words move to a second row of the bar, the hero stacks under a lower plate, the plates go two across, the figures two by two, 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 and tabs, under a title), `--space-2` 8px (between a label and its field, between tabs, under a rule's words), `--space-3` 16px (list row padding, under a plate, gaps in a button row), `--space-4` 24px (paragraph gap, panel padding, side padding of the sheet), `--space-5` 40px (grid gutter, under a rule, between stacked blocks, between the columns of an interview), `--space-6` 64px (between rows, between the columns of a pair, the band's padding), `--space-7` 96px (with `--space-5` it sets the height of a text field).\n- Other sizes: `--size-dialog` 440px, `--size-icon` 40px.\n- On a phone (720px and below) there is no menu button: `.ds-nav__links` takes a row of its own under the brand, spread over the full width, and the current link's accent stroke moves from above the word to below it. 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 sheet.\n- `.ds-wrap`: the 1120px sheet with 24px side padding. `.ds-section` puts 64px above a row (`--first` 40px, directly under a page header; `--last` adds 64px below the last row of a view). `.ds-stack` stacks blocks 40px apart. `.ds-duo` is two columns of seven and five parts; `.ds-split` (`.ds-split__main`, `.ds-split__side`) is a wide column and a 360px one.\n- `.ds-label`: a small tracked capital line: a kicker above a title, a date under a plate. `.ds-rule` is the section head: the same lettering at the left, a quiet link at the right, a hairline below.\n- `.ds-brand`: the site's mark and name at the left 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 in the heading face at `--text-h3`. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the bar on `--fill-bar`. `.ds-nav__inner` is the sheet; `.ds-nav__links` holds `.ds-nav__link` items; the current one (`is-current`) has the accent stroke above it. 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 newest interview on the home page. `.ds-hero__plate` is the picture tone with a small line and `.ds-hero__numeral`; `.ds-hero__copy` holds a `.ds-label`, `.ds-hero__title`, `.ds-hero__roles`, `.ds-hero__lead` 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 an optional `.ds-label`, `.ds-page-header__title` and one `.ds-page-header__text` line, `.ds-page-header__actions` at the right with a single button, and a hairline below.\n- `.ds-article`: the three columns of an interview: `.ds-article__meta` (date, `.ds-article__note`, a sidebar), `.ds-article__main` and `.ds-article__aside` (a `.ds-quote--aside`).\n- `.ds-prose`: running text: `h1` (a part title), `h2`, `h3` (a label), paragraphs, lists, `strong`, `code`. `.ds-prose__lead` is a larger first paragraph; `.ds-prose__q` is a question. `.ds-quote` with `.ds-quote__text` is the pull quote between a strong and a hairline rule; `--aside` is its smaller form for the side column. `.ds-footnotes` with `.ds-footnotes__item` is a numbered note list. `.ds-note` is a short paragraph of small print beside a form.\n- `.ds-voice`: one sentence of a guest across the sheet: `.ds-voice__text` at `--text-h1`, centred, with a `.ds-label` naming the speaker.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for names 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 tracked word on `--fill-button` inside a `--color-border-strong` border. Variants: `--secondary` (hairline border, coloured 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`: numbered interviews: each `.ds-list__item` is a `.ds-list__num`, a block with the `.ds-list__title` and one `.ds-list__text` line, and a `.ds-list__meta` date at the right, on faint rules. `.ds-list__more` holds a link below.\n- `.ds-panel`: the one bordered box of a page, on `--fill-panel` with 24px padding: `.ds-panel__art` (a wide picture tone with a short title), a `.ds-label`, `.ds-panel__title` and `.ds-panel__body`.\n- `.ds-stat`: the row of four figures. `.ds-stat` is the row; each `.ds-stat__item` hangs from its own strong rule and holds a `.ds-stat__figure` (`--text-display`) over a `.ds-stat__label`.\n- `.ds-grid`: three equal columns of `.ds-grid__cell`, each a `.ds-grid__tile` plate in a picture tone (`--2`, `--3`, `--4` for the others) holding the interview's number, then a `.ds-label`, `.ds-grid__title` and `.ds-grid__text`. The cell has no border.\n- `.ds-tabs`: a row of small outlined words, `.ds-tabs__tab`; the one with `is-current` is filled with 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 side column of an interview: `.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`, `.ds-empty__text` and one button.\n- `.ds-band`: the inverted block that closes the home page: `.ds-band__inner` puts a label, `.ds-band__title` and `.ds-band__text` at the left and an inline form at the right.\n- `.ds-footer`: one pale strip on `--fill-bar-alt`, centred: `.ds-footer__inner` holds `.ds-footer__links` of `.ds-footer__link` over a line of text.\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 (`--centre` under a centred quote).\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- `block-gap <= 64px`: rows of the sheet are 64px apart.\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- `box-shadow = none`: nothing is lifted off the page; blocks are separated by white space or a hairline.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 3px`: only controls are eased; panels and pictures are square.\n- `border-width <= 2px`: rules are 1px hairlines; 2px marks the current item, a pull quote and a table head.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new row is a `.ds-section` in the `.ds-wrap` sheet 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`). A new picture is a flat plate in a `--color-fill-*` tone with `--radius-page` and `--shadow-panel` that carries at most a numeral or a short title. New small text is a `.ds-label`; new names and 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: 1120px;\n --size-measure: 620px;\n --size-side: 200px;\n --size-aside: 360px;\n --size-nav: 64px;\n --size-plate: 480px;\n --size-dialog: 440px;\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: 96px;\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/* 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/* typography: the interview; questions are bold lines, answers plain paragraphs */\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}\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\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\n/* inverse: the only button allowed on an inverted band */\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n border-color: var(--color-inverse-text);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: transparent;\n color: var(--color-inverse-text);\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: calc(var(--text-base) * 0.85);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) + var(--space-5));\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding-top: var(--space-2);\n}\n\n/* inline: one field and its button on a line, for a subscription */\n.ds-form--inline {\n flex-direction: row;\n align-items: stretch;\n gap: var(--space-2);\n}\n.ds-form--inline .ds-form__input {\n flex: 1 1 0;\n min-width: 0;\n width: auto;\n}\n\n/* table: the archive; 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/* 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: the guest's particulars beside the interview */\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/* sheet: every row sits in one wide centred sheet; sections follow each other a fixed space apart */\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}\n.ds-section--first {\n padding-top: var(--space-5);\n}\n.ds-section--last {\n padding-bottom: var(--space-6);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* rule: a section head; its name at the left, one link at the right, a hairline under both */\n.ds-rule {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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/* split: a working column and a narrower one beside it */\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n column-gap: var(--space-6);\n align-items: start;\n}\n.ds-split__main,\n.ds-split__side {\n min-width: 0;\n}\n/* duo: two unequal columns of the front page */\n.ds-duo {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n column-gap: var(--space-6);\n align-items: start;\n}\n\n/* nav: one bar as wide as the sheet; the current word hangs from an accent stroke on the bar's upper edge */\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 margin: 0 auto;\n padding: 0 var(--space-4);\n display: flex;\n align-items: stretch;\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 min-height: var(--size-nav);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: calc(var(--space-4) + var(--space-2));\n height: calc(var(--space-4) + var(--space-2));\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 68%;\n height: 68%;\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: stretch;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n border-top: var(--border-width-strong) var(--border-style) transparent;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n border-top-color: var(--color-border);\n}\n.ds-nav__link.is-current {\n border-top-color: var(--color-accent);\n}\n/* the current view marks its navigation item; an interview marks Interviews */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n border-top-color: var(--color-accent);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n border-top-color: var(--color-accent);\n}\n.ds-page:has(#interview:target) .ds-nav__link[href=\"#home\"] {\n border-top-color: var(--color-accent);\n}\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"] {\n border-top-color: var(--color-accent);\n}\n.ds-page:has(#nominate:target) .ds-nav__link[href=\"#nominate\"] {\n border-top-color: var(--color-accent);\n}\n\n/* hero: the newest interview as two halves; a portrait plate in a picture tone, and the guest's name centred beside it */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n min-height: var(--size-plate);\n margin-top: var(--space-5);\n}\n.ds-hero__plate {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: var(--space-4) var(--space-5);\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-ui);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-hero__numeral {\n font-family: var(--font-heading);\n font-size: calc(var(--text-display) * 2);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: lining-nums;\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--space-5) var(--space-6);\n text-align: center;\n}\n.ds-hero__title {\n max-width: 100%;\n margin: var(--space-4) 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 overflow-wrap: break-word;\n}\n.ds-hero__roles {\n margin: 0 0 var(--space-4);\n color: var(--color-heading);\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-hero__lead {\n margin: 0 0 var(--space-5);\n max-width: 40ch;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--space-3) var(--space-4);\n}\n\n/* page header: the head of an inner page; label, title and one line at the left, the action at the right, a hairline under it */\n.ds-page-header {\n display: flex;\n align-items: center;\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 max-width: 60ch;\n color: var(--color-text-muted);\n font-size: var(--text-large);\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}\n\n/* article: the interview between two side columns; particulars at the left, a quotation at the right, both staying in view */\n.ds-article {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, var(--size-measure)) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-article__meta,\n.ds-article__aside {\n position: sticky;\n top: var(--space-4);\n min-width: 0;\n}\n.ds-article__meta {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-article__note {\n margin: var(--space-2) 0 0;\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-article__main {\n min-width: 0;\n}\n/* question: a line of the interviewer, bold, directly over its answer */\n.ds-prose .ds-prose__q {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n/* note: a short paragraph of small print beside a form */\n.ds-note {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-quote--aside {\n margin: 0;\n font-size: var(--text-large);\n}\n/* voice: one sentence of a guest set large across the sheet */\n.ds-voice {\n margin: 0;\n padding: var(--space-6) 0 0;\n text-align: center;\n}\n.ds-voice__text {\n max-width: 30ch;\n margin: 0 auto var(--space-4);\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}\n\n/* list: numbered interviews; number, name with one line under it, the date at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--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-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__num {\n color: var(--color-text-muted);\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 font-variant-numeric: tabular-nums lining-nums;\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-size: calc(var(--text-base) * 0.85);\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__more {\n margin: var(--space-4) 0 0;\n}\n\n/* panel: the one box on a page; a wide picture tone over its text */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n padding: var(--space-4);\n}\n.ds-panel__art {\n display: flex;\n align-items: flex-end;\n aspect-ratio: 5 / 2;\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--color-fill-4);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\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}\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 font-size: calc(var(--text-base) * 0.85);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n\n/* stats: four figures, each hanging from its own strong rule */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n column-gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n min-width: 0;\n padding-top: var(--space-3);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__figure {\n display: block;\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 font-variant-numeric: lining-nums;\n}\n.ds-stat__label {\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\n/* grid: recent interviews, three across; a portrait plate with the number, then the name and the trade */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\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__tile {\n display: flex;\n align-items: flex-end;\n aspect-ratio: 4 / 3;\n margin-bottom: var(--space-3);\n padding: var(--space-3) 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 font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n font-variant-numeric: lining-nums;\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: var(--space-1) 0 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-grid__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: calc(var(--text-base) * 0.85);\n}\n\n/* tabs: small outlined words in a row; the current one is filled with the accent */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: calc(var(--text-ui) * 0.04);\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 border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: transparent;\n}\n\n/* band: the inverted block that closes the front page; the offer at the left, its field at the right */\n.ds-band {\n margin-top: var(--space-6);\n padding: var(--space-6) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-band__inner {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n column-gap: var(--space-6);\n align-items: center;\n}\n.ds-band__title {\n margin: var(--space-2) 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-band__text {\n margin: 0;\n max-width: 46ch;\n opacity: 0.75;\n}\n.ds-band .ds-label {\n color: inherit;\n opacity: 0.65;\n}\n\n/* footer: one pale strip; the links in a row over a line of small text, all centred */\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 text-align: center;\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-5) var(--space-4);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-5);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-ui);\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 three columns: the quotation falls under the interview, halves and pairs stack */\n@media (max-width: 1040px) {\n .ds-article {\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n }\n .ds-article__aside {\n position: static;\n grid-column: 2;\n margin-top: var(--space-5);\n }\n .ds-split,\n .ds-duo {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-5);\n }\n .ds-hero__copy {\n padding: var(--space-5) var(--space-4);\n }\n}\n\n/* narrow windows: one column; the bar wraps, plates shrink, a wide table scrolls inside its own box */\n@media (max-width: 720px) {\n .ds-wrap,\n .ds-nav__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav__inner {\n flex-wrap: wrap;\n gap: 0 var(--space-4);\n }\n .ds-brand {\n min-height: 0;\n padding-top: var(--space-3);\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;\n border-top: 0;\n }\n .ds-nav__link.is-current,\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n .ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n .ds-page:has(#interview:target) .ds-nav__link[href=\"#home\"],\n .ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n .ds-page:has(#nominate:target) .ds-nav__link[href=\"#nominate\"] {\n border-bottom-color: var(--color-accent);\n }\n .ds-section {\n padding-top: var(--space-5);\n }\n .ds-section--last {\n padding-bottom: var(--space-5);\n }\n .ds-rule {\n margin-bottom: var(--space-4);\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n min-height: 0;\n margin-top: var(--space-3);\n }\n .ds-hero__plate {\n min-height: calc(var(--size-plate) * 0.45);\n padding: var(--space-3);\n }\n .ds-hero__numeral {\n font-size: var(--text-display);\n }\n .ds-hero__copy {\n padding: var(--space-5) 0 0;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\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-band__title {\n font-size: calc(var(--text-h1) * 0.8);\n }\n .ds-voice {\n padding-top: var(--space-5);\n }\n .ds-voice__text,\n .ds-quote {\n font-size: var(--text-large);\n }\n .ds-article {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-4);\n }\n .ds-article__meta {\n position: static;\n }\n .ds-article__aside {\n grid-column: 1;\n margin-top: 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4) var(--space-3);\n }\n .ds-grid__tile {\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-h2);\n }\n .ds-grid__title {\n font-size: var(--text-h3);\n }\n .ds-list__item {\n grid-template-columns: var(--space-5) minmax(0, 1fr);\n }\n .ds-list__meta {\n grid-column: 2;\n margin-top: var(--space-1);\n text-align: left;\n }\n .ds-list__num,\n .ds-list__title {\n font-size: var(--text-h3);\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4) var(--space-3);\n }\n .ds-stat__figure {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-band {\n margin-top: var(--space-5);\n padding: var(--space-5) 0;\n }\n .ds-band__inner {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-4);\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-footer__inner {\n padding: var(--space-4) var(--space-3);\n }\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.ds-avatar--4 {\n background: var(--color-fill-4);\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--centre {\n justify-content: center;\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/* 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 spread across the bar */\n@media (max-width: 720px) {\n .ds-nav__links {\n justify-content: space-between;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, interview series specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n
\n
\n
\n
\n Interview no.\n 154\n
\n
\n This week · 16 December 2014\n

Ines Varga

\n

Plane maker / Teacher / Writer

\n

On leaving an office at forty, learning to sharpen from a retired shipwright, and why she gives every drawing away.

\n
\n Read the interview\n All 154\n
\n
\n
\n\n
\n

Recent interviews View the archive

\n
\n \n
153
\n 9 December\n

Tobias Lund

\n

Bookbinder, Aarhus

\n \n \n
152
\n 2 December\n

Amara Okoye

\n

Weaver and dyer, Lagos

\n \n \n
151
\n 25 November\n

Pieter Haan

\n

Letterpress printer, Ghent

\n \n \n
150
\n 18 November\n

Sofia Marek

\n

Violin maker, Brno

\n \n \n
149
\n 11 November\n

Kenji Arai

\n

Knife grinder, Sakai

\n \n \n
148
\n 4 November\n

Leonie Brandt

\n

Potter, Leipzig

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

“I stopped asking whether the work was good and started asking whether it was finished. Things got better after that.”

\n SMSofia Marek, interview no. 150\n
\n\n
\n
    \n
  • 154Interviews
    • \n
  • 37Trades
    • \n
  • 61Towns visited
    • \n
  • 3Printed annuals
    • \n
\n
\n\n
\n
\n
\n

From the archive By trade

\n
    \n
  • \n 112\n
    Halima Yusuf In the annual\n

    Saddler, on a workshop that has not moved since 1931.

    \n Feb 2014\n
    • \n
  • \n 098\n
    Aldo Ferri\n

    Type founder, on casting the same letter ten thousand times.

    \n Oct 2013\n
    • \n
  • \n 071\n
    Greta Nyberg\n

    Boat builder, on teaching her daughters to steam oak.

    \n Apr 2013\n
    • \n
  • \n 044\n
    Daniel Osei\n

    Luthier, on the guitar he has been repairing for nine years.

    \n Sep 2012\n
    • \n
  • \n 001\n
    Ruth Calder\n

    Stone carver, and the first person who agreed to talk to us.

    \n Jan 2012\n
    • \n
\n
\n
\n
Annual 03
\n In print\n

Twenty interviews on paper

\n
\n

The third chronoskin annual collects the year's longest conversations in 208 pages, sewn and printed in two colours.

\n Order the annual\n
\n
\n
\n
\n
\n\n
\n
\n
\n Every Tuesday\n

One interview a week, by letter

\n

A new conversation each Tuesday morning and nothing else.

\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Interviews
    2. \n
  2. Woodwork
    3. \n
  3. Ines Varga
    4. \n
\n
\n
\n Interview no. 154 · Plane maker / Teacher / Writer\n

Ines Varga

\n

On leaving an office at forty and giving every drawing away.

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

Ines Varga makes wooden hand planesA plane pushed by hand to shave wood flat, not a machine. in a former dairy in the south of Hungary. She came to the trade late, teaches four weeks a year and publishes the drawings of every tool she sells.

\n

Beginnings

\n

Describe the path that led you to the bench.

\n

I was an insurance clerk for seventeen years, and a good one. Nobody leaves that for a romantic reason. My father died, I inherited a chest of tools I could not use, and it annoyed me that I could not use them. That is the whole origin story: irritation.

\n

Who taught you?

\n

A retired shipwright called Bela, who charged me nothing and corrected everything. He would take the plane out of my hands, look at the sole and hand it back without a word. It took a year before he said one was acceptable.

\n

What he asked of a tool

\n

He had three tests, and I still use them on everything that leaves the workshop:

\n
    \n
  • it takes a shaving you can read a newspaper through;
    • \n
  • it can be set with one tap of a mallet;
    • \n
  • it is still comfortable in the fourth hour.
    • \n
\n

The work

\n

Why give the drawings away?

\n

Because a drawing is not the plane. Every jig in the workshop has a number, and the drawing for the smoother is simply jig-014.pdf on the site. Perhaps forty people have built one from it. None of them has stopped buying from me, and several now write to argue about the bedding angle, which I enjoy.

\n

A note on the wood

\n

The bodies are hornbeam, felled in winter and dried for six years before she will cut it.

\n

What would you tell someone starting at forty?

\n

That it is late, and that it does not matter. You will never have the hands of someone who began at fourteen. You will have patience they did not have at fourteen, and customers forgive a great deal in a person who answers letters.

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

Keep reading

\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Interviews
    2. \n
  2. Archive
    3. \n
\n
\n
\n

Archive

\n

All 154 conversations since January 2012, newest first.

\n
\n
\n Suggest a guest\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 \n
Showing 8 of 154 interviews. Reading time at 240 words a minute.
No.GuestTradeTownPublishedMinutes
154Ines Varga NewPlane makerGyula16 Dec 201419
153Tobias LundBookbinderAarhus9 Dec 201414
152Amara OkoyeWeaver and dyerLagos2 Dec 201422
151Pieter HaanLetterpress printerGhent25 Nov 201417
150Sofia MarekViolin makerBrno18 Nov 201426
149Kenji AraiKnife grinderSakai11 Nov 201412
148Leonie BrandtPotterLeipzig4 Nov 201415
147Marco BelliniCooperAsti28 Oct 201418
\n
\n
\n \n
\n New\n In the annual\n 154\n With audio\n Being edited\n Withdrawn\n
\n
\n
\n\n
\n

Glass

\n
\n \n

No glassmakers yet

\n

In three years we have not interviewed anyone who works in glass. If you know someone we should meet, tell us.

\n Suggest a guest\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Interviews
    2. \n
  2. Suggest a guest
    3. \n
\n
\n
\n

Suggest a guest

\n

Half of the people in the archive were proposed by a reader.

\n
\n
\n See who we have met\n
\n
\n\n
\n
\n
\n

Suggestions are read on Fridays. We write back to every one, usually within a month.

\n

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

\n
\n
\n
\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
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.portal.s07.p01.t02.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"editorial-minimal\",\n \"years\": [\n 2012,\n 2018\n ]\n },\n \"archetype\": \"portal\",\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-7121\",\n \"short\": \"v1-em-7121\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fdfcf8;\n --color-canvas: #fdfcf8;\n --color-surface: #fdfcf8;\n --color-surface-alt: #f5f3ec;\n --color-surface-strong: #ebe8de;\n --color-bar: #fdfcf8;\n --color-bar-text: #33332f;\n --color-bar-alt: #f5f3ec;\n --color-bar-alt-text: #6b6a62;\n --color-inverse: #26302b;\n --color-inverse-text: #f5f3ec;\n --color-text: #33332f;\n --color-text-muted: #7d7b72;\n --color-heading: #1c1c19;\n --color-heading-alt: #0a6058;\n --color-link: #0c776d;\n --color-link-quiet: #6b6a62;\n --color-link-visited: #56776f;\n --color-link-hover: #0a6058;\n --color-link-active: #063f3a;\n --color-border: #d9d6cb;\n --color-border-strong: #33332f;\n --color-border-muted: #ebe8de;\n --color-accent: #0c776d;\n --color-accent-text: #fdfcf8;\n --color-accent-alt: #b5651d;\n --color-fill-1: #7f9c8f;\n --color-fill-2: #c8a67e;\n --color-fill-3: #5c6b73;\n --color-fill-4: #a9a889;\n --color-button: #fdfcf8;\n --color-button-text: #1c1c19;\n --color-button-hover-text: #fdfcf8;\n --color-button-secondary: #fdfcf8;\n --color-button-secondary-text: #0c776d;\n --color-input: #ffffff;\n --color-input-text: #1c1c19;\n --color-input-border: #c0bdb1;\n --color-disabled: #ebe8de;\n --color-disabled-text: #a3a196;\n --color-danger: #9d120d;\n --color-danger-surface: #fbeeea;\n --color-success: #2e7d4f;\n --color-warning: #a8650f;\n --color-notice: #edf3ee;\n --color-notice-text: #0a6058;\n --color-focus: #0c776d;\n --color-shadow: rgb(40 36 20 / 0.12);\n --color-overlay: rgb(38 48 43 / 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: \"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: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-inverse);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }