{ "id": "v1-em-4654-dc", "long_id": "v1.editorial-minimal.landing.s04.p06.t05.u04.dc", "name": "Editorial minimalism studio portfolio", "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": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "density": "compact", "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: carefully set type on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its portfolio form, the site of a small design studio or a freelancer of those years: a rail of three words at the left edge, a statement in very large type, and the work as a numbered index with years, each section named in a narrow note column beside it. With so little on the page the look is carried by the contrast between the display size and the small tracked labels, by the measure and by the white space between sections.", "url": "https://chrono.skin/s/v1-em-4654-dc", "preview_url": "https://chrono.skin/s/v1-em-4654-dc/specimen.html", "files": { "STYLE.md": "# Editorial minimalism studio portfolio\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: carefully set type on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its portfolio form, the site of a small design studio or a freelancer of those years: a rail of three words at the left edge, a statement in very large type, and the work as a numbered index with years, each section named in a narrow note column beside it. With so little on the page the look is carried by the contrast between the display size and the small tracked labels, by the measure and by the white space between sections.\n\n## Layout\n\n- The page is two columns designed for a 1280px viewport: a rail of `--size-rail` (220px) at the left edge of the window and the main column beside it. `.ds-frame` is that grid. Content in the main column sits in `.ds-wrap`, `--size-page` (920px) wide with `--space-6` at each side, set against the rail and not centred.\n- Navigation is the rail, not a bar: the brand at the top, the views as a column of words `--space-1` apart, a short note under them. It stays in view while the page scrolls. The current view is marked by a `--border-width-strong` accent stroke at the left of its word. `--fill-bar` paints the rail and a hairline closes its right side.\n- Every row below the hero is a `.ds-section`: a hairline above, then a note column of `--size-note` (180px) holding the section's name as a `.ds-label` and an optional caption, a gap of `--space-5`, and the content in the remaining 700px. Running text inside it keeps to `--size-measure` (560px). Captions of figures, a project's facts and an address stand in the note column: it is the margin of the page.\n- The home view is the hero (label, the statement at `--text-display` across the whole 920px, then the lead and the action under it, indented by the note column), the selected work as a two by two `.ds-grid`, the index as a `.ds-list`, the studio row (a lead paragraph, `.ds-stat`, the `.ds-panel`) and the inverted `.ds-band`. The footer is a strip under the main column only.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (title at `--text-h1`, one grey line at `--text-large`, one action at the right, no rule of its own), then sections as on the home view. A list page puts `.ds-tabs` directly over the table. A case study puts a wide `.ds-figure` across the full 920px under the page header, its caption in the note column, then the text with the project's `.ds-sidebar` in the note column.\n- Views. The specimen is a studio's site with four views. `home` is the statement, four selected projects, the index of the five latest, the studio's figures and availability, and the letter block. `work` is the full index: tabs by kind of work, the table with pagination and the label legend, and the empty row of self-initiated work. `case` is one project: breadcrumb, page header, the plate drawn in CSS, the account of the project with its facts in the margin, a pull quote, two smaller plates and links to more books. `contact` is the notices, the enquiry form with its button row, and the open discard dialog. Below 960px the rail becomes a bar across the top (brand left, words right, the note hidden) and the statement drops to `--text-h1`; below 640px the note column folds over its content, the figures go two across, 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 (between navigation words, under a title), `--space-2` 8px (label to field, adjacent controls), `--space-3` 16px (list row padding, paragraph gap, button row), `--space-4` 24px (between fields, rail padding, stat gutter), `--space-5` 40px (the gap beside the note column, grid gutter, panel padding, above a section's content), `--space-6` 72px (under a section, the side padding of the main column, between rail blocks), `--space-7` 120px (above the statement, under the last section).\n- Other sizes: `--size-dialog` 440px, `--size-icon` 40px.\n- On a phone (640px and below) there is no menu button: the bar across the top keeps the brand, and `.ds-nav__links` takes a row of its own with its words spread over the full width; `.ds-nav__note` is not shown from 960px down. The current word keeps its accent underline. At 960px 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- With this pack's own type set every role is one monospaced face (IBM Plex Mono, then Menlo and Consolas): `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same stack, and hierarchy comes from weight and size alone. With another type set the roles separate as usual: headings and figures in `--font-heading`, running text in `--font-body`, navigation, labels, notes and captions in `--font-ui`, listings and inline code in `--font-mono`.\n- Body is `--text-base` 15px at `--line-body` 1.6, a 24px line, in `--color-text`. Lead lines are `--text-large` 18px at 1.5. Listings are 85% of `--text-base` at 1.6, inline code 90%.\n- Sizes: `--text-display` 40px (the title of the book only), `--text-h1` 28px (page titles, first-level headings, figures), `--text-h2` 20px (second-level headings, part titles of the contents, panel, dialog and empty titles), `--text-h3` 15px (brand, cell titles), `--text-ui` 13px (running head, buttons, tabs, form labels), `--text-small` 12px (labels, notes, captions, contents of a chapter, footer). Headings are `--weight-heading`; a third-level heading is a small bold capital label in `--color-heading-alt`.\n- `.ds-label`, `.ds-rule`, table heads and badges are small capitals with letter spacing of a tenth of their size; navigation, buttons, tabs and form labels follow `--ui-transform` with 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 the link colours; `--fill-bar` carries `--color-bar-text` (navigation, brand name, table head); `--fill-bar-alt` carries `--color-bar-alt-text` only (the footer); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for quieter lines, and the only button on it is `.ds-button--inverse`; `--fill-accent` carries `--color-accent-text`, as does `--color-danger` when it is a fill; `--color-fill-1` to `--color-fill-4` are picture tones that carry only a few words or a mark in `--color-inverse-text`, never running 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`; `--color-notice` carries `--color-notice-text`; `--color-danger-surface` carries `--color-danger`. `--color-success`, `--color-warning` and `--color-danger` are text and outline colours on the page. Nothing assumes that the page is light.\n- The highlight: `--color-notice` with `--color-notice-text` marks a found word (`.ds-mark`) as well as a note. `--fill-inverse` is used once, for the listing on the title page. `--color-accent` marks the current part, chapter entry and page number; a current tab and the default badge are filled with `--fill-accent`.\n- Rules use `--border-style`, dotted in this pack's surface set: hairlines of `--border-width` in `--color-border` under the head, around the grid and the empty box and above second-level headings; `--color-border-muted` between rows; `--border-width-strong` in `--color-border-strong` under the page header and each part title, over the figures and under a table head. Leaders are dots of the text face, not a border. `--radius-panel` dresses the panel, grid, listings and dialog, `--radius-page` and `--shadow-panel` the picture tones, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: line heights of 1.5 for leads, notes and captions; comment lines of a listing and the edition beside the brand at an opacity of 0.6.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill and the body type. `.ds-frame` inside it is the grid of rail and `.ds-main`; `.ds-main__views` holds the views so that the footer stays at the foot of the column.\n- `.ds-wrap`: the 920px content column. `.ds-section` is a row with `.ds-section__label` (the note column: a `.ds-label` and `.ds-section__note` captions) and `.ds-section__body`; `--last` leaves 120px under it. `.ds-stack` stacks blocks 40px apart. `.ds-label` is a small capital line.\n- `.ds-brand`: the mark and name at the top of the rail. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` border, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name in the display face at `--text-h3`. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the rail on `--fill-bar`. `.ds-nav__inner` holds the brand, `.ds-nav__links` of `.ds-nav__link` (current: `is-current`) and one `.ds-nav__note`. In the specimen the showing view marks its item with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the statement: a `.ds-label`, `.ds-hero__title` at `--text-display`, then `.ds-hero__foot` with a label in the note column and, beside it, `.ds-hero__lead` and `.ds-hero__actions` (one button, one `.ds-link--more`).\n- `.ds-page-header`: head of an inner page, after the breadcrumb: `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text` line, `.ds-page-header__actions` with a single button.\n- `.ds-prose`: running text on the 560px measure: `h1`, `h2`, `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 pull quote in the display face, with no rule.\n- `.ds-figure`: a plate. `.ds-figure__art` is a picture tone (`--3`, `--4` for other tones at 4 to 3) holding a drawing made of `.ds-figure__sheet` leaves (`--cover`), `.ds-figure__word` (`--small`), `.ds-figure__line` strokes (`--head`, `--short`) or one `.ds-figure__letter`; `.ds-figure__caption` puts a label in the note column and the caption beside it. `.ds-figure__pair` sets two plates side by side.\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 index under a strong rule. Each `.ds-list__item` is a `.ds-list__no`, `.ds-list__main` with the `.ds-list__title` at `--text-h2` and a grey `.ds-list__text` line, and the year as `.ds-list__meta` at the right. `.ds-list__more` holds the link to the full index.\n- `.ds-panel`: the one bordered sheet of a page on `--fill-panel`: `.ds-panel__split` puts `.ds-panel__copy` (label, `.ds-panel__title`, `.ds-panel__body`) beside `.ds-panel__actions`, a column of at most two buttons.\n- `.ds-stat`: four figures across. `.ds-stat` is the row; each `.ds-stat__item` hangs under its own strong rule: a `.ds-stat__figure` at `--text-h1` over a `.ds-stat__label`.\n- `.ds-grid`: selected work, two across. Each `.ds-grid__cell` is a `.ds-grid__tile` in a picture tone (`--2`, `--3`, `--4`) with a `.ds-grid__no` and a large `.ds-grid__initial`, then `.ds-grid__head` (`.ds-grid__title`, `.ds-grid__year`) and a `.ds-grid__text` line.\n- `.ds-tabs`: a row of words without a rule; `.ds-tabs__tab` with `is-current` is underlined in the accent; `.ds-tabs__count` is a small figure after the word.\n- `.ds-sidebar`: a short titled list in the note column: `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item` on faint rules; the current row is `is-current`, bold and not a link.\n- `.ds-breadcrumb`: a small capital trail of `.ds-breadcrumb__item` separated by arrows; the last is `.ds-breadcrumb__current`.\n- `.ds-empty`: a message set at the left between a strong rule and a faint one, where the rows would be: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-band`: the inverted block that closes the home view: a label, `.ds-band__title` and `.ds-band__text` at the left, an inline form with a `.ds-button--inverse` at the right.\n- `.ds-footer`: one strip on `--fill-bar-alt` under the main column: `.ds-footer__inner` with a line of text and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-avatar`: a person, as initials in a `--size-avatar` circle on a picture tone (`--1`, `--4` for the other tones). Use it beside a name, never alone as decoration. `.ds-credit`: the row that holds an avatar, a `.ds-credit__name` and one quiet line.\n- `.ds-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- `.ds-tooltip`: a word with a hairline under it and a `.ds-tooltip__tip` shown on hover or focus (`--plain` drops the hairline, for a badge). Use it for a definition or a footnote of one sentence; it is never forced open.\n- `.ds-switch`: an on or off preference: a hidden `.ds-switch__input` checkbox, the `.ds-switch__track` and the words. Use it only for a setting that takes effect by itself, such as email preferences; a statement to confirm stays a `.ds-form__check`.\n\n## Never\n\n- `content-width <= 1220px`: rail and main column together.\n- `block-gap <= 120px`: the largest space is the one above the statement.\n- `font-size <= 40px`: the title of the book is the largest text.\n- `font-size >= 12px`: notes and labels are the smallest text.\n- `font-weight <= 700`: bold is the only weight besides regular.\n- `font-families <= 1`: one monospaced face for everything.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 1.2px`: only small capitals are tracked.\n- `box-shadow-blur <= 40px`: sheets carry a 3px shadow at most; only the dialog floats.\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; only badges are pills.\n- `border-width <= 1px`: every rule is a hairline.\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 of a page is a `.ds-section`: put its name, and anything that is a caption or a fact, in the note column and the content beside it. Large words take the display face at `--text-h2` or above; everything small is a `.ds-label` or `--text-small` in the sans. Separate with space and hairlines; use one `.ds-panel` per page at most. A new picture is a picture tone with a few letters on it, never an image. Keep to the era's fill and text pairs so that the component works with every palette, light or dark.\n", "components.css": ":root {\n --size-page: 920px;\n --size-rail: 220px;\n --size-note: 180px;\n --size-measure: 560px;\n --size-dialog: 440px;\n --size-icon: 40px;\n --size-avatar: 32px;\n --space-1: 3px;\n --space-2: 6px;\n --space-3: 13px;\n --space-4: 19px;\n --space-5: 32px;\n --space-6: 58px;\n --space-7: 96px;\n}\n\n/* shell: a quiet page with a rail at its left edge; the work sits beside it */\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/* frame: the rail and the main column */\n.ds-frame {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n min-height: 100vh;\n}\n.ds-main {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.ds-main__views {\n flex: 1 0 auto;\n}\n/* column: the content of the main column, set against the rail and not centred */\n.ds-wrap {\n max-width: calc(var(--size-page) + var(--space-6) + var(--space-6));\n padding: 0 var(--space-6);\n}\n/* section: a row of the page; its name and any caption stand in the note column, the content beside them */\n.ds-section {\n display: grid;\n grid-template-columns: var(--size-note) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-5) 0 var(--space-6);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section--last {\n padding-bottom: var(--space-7);\n}\n.ds-section__label {\n min-width: 0;\n padding-top: var(--space-1);\n}\n.ds-section__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: 1.5;\n}\n.ds-section__body {\n min-width: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n\n/* nav: the rail. Brand at the top, the views as a short column of words, a note under them */\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-right: 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 position: sticky;\n top: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n margin-left: calc(var(--space-3) * -1);\n padding: var(--space-1) 0 var(--space-1) var(--space-3);\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-left: 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-left-color: var(--color-border);\n}\n.ds-nav__link.is-current {\n border-left-color: var(--color-accent);\n}\n/* the current view marks its navigation item; a case study marks Work */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n border-left-color: var(--color-accent);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n border-left-color: var(--color-accent);\n}\n.ds-page:has(#work:target) .ds-nav__link[href=\"#work\"] {\n border-left-color: var(--color-accent);\n}\n.ds-page:has(#case:target) .ds-nav__link[href=\"#work\"] {\n border-left-color: var(--color-accent);\n}\n.ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n border-left-color: var(--color-accent);\n}\n.ds-nav__note {\n margin: 0;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n line-height: 1.5;\n opacity: 0.65;\n}\n\n/* hero: the studio's statement in very large type, alone at the top of the home view */\n.ds-hero {\n padding: var(--space-7) 0 var(--space-6);\n}\n.ds-hero__title {\n margin: var(--space-4) 0 var(--space-5);\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__foot {\n display: grid;\n grid-template-columns: var(--size-note) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n max-width: var(--size-measure);\n font-size: var(--text-large);\n line-height: 1.45;\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n}\n\n/* page header: the head of an inner page; a large title and one line, the action at the right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-4) 0 var(--space-6);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-3);\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: var(--size-measure);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n line-height: 1.45;\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n padding-bottom: var(--space-1);\n}\n\n/* typography: the account of a project, kept to a measure inside the wider column */\n.ds-prose {\n max-width: var(--size-measure);\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.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}\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-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\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.85);\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.45;\n}\n/* pull quote: the display face, large, with nothing around it but space */\n.ds-quote {\n margin: var(--space-5) 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: 1.25;\n letter-spacing: var(--heading-tracking);\n}\n.ds-quote__text {\n margin: 0;\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 index of projects. A number, the name in the display face, the kind of work, the year at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--space-5) 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__no {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n letter-spacing: calc(var(--text-small) * 0.1);\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-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.9);\n line-height: 1.5;\n}\n.ds-list__meta {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n letter-spacing: calc(var(--text-small) * 0.1);\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 of a page, a sheet for an offer */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n padding: var(--space-5);\n}\n.ds-panel__title {\n margin: var(--space-2) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-panel__body p {\n margin: 0;\n}\n.ds-panel__split {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n}\n.ds-panel__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex: 0 0 auto;\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-2);\n}\n\n/* stats: figures in the display face, each hanging under its own rule */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n min-width: 0;\n padding-top: var(--space-2);\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-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 tabular-nums;\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n\n/* grid: selected work, two across. Each a picture tone with the project's initial set large, its name and year underneath */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, 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 flex-direction: column;\n justify-content: space-between;\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}\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__no {\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-grid__initial {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n}\n.ds-grid__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__year {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n letter-spacing: calc(var(--text-small) * 0.1);\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.9);\n line-height: 1.5;\n}\n\n/* figure: a plate of the case study, drawn on a picture tone; its caption stands in the note column */\n.ds-figure {\n margin: 0;\n padding: 0 0 var(--space-6);\n}\n.ds-figure__art {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n aspect-ratio: 2 / 1;\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-figure__art--3 {\n aspect-ratio: 4 / 3;\n background: var(--color-fill-3);\n}\n.ds-figure__art--4 {\n aspect-ratio: 4 / 3;\n background: var(--color-fill-4);\n}\n/* a sheet of the drawing: a leaf of the book in the tone's own text colour; what is printed on it takes the tone */\n.ds-figure__sheet {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: var(--space-2);\n width: 27%;\n aspect-ratio: 3 / 4;\n padding: var(--space-4);\n background: currentColor;\n}\n.ds-figure__sheet--cover {\n justify-content: space-between;\n}\n.ds-figure__word {\n color: var(--color-fill-1);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n}\n.ds-figure__word--small {\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-figure__line {\n display: block;\n height: var(--space-1);\n background: var(--color-fill-1);\n opacity: 0.35;\n}\n.ds-figure__line--short {\n width: 60%;\n}\n.ds-figure__line--head {\n width: 45%;\n height: var(--space-2);\n margin-bottom: var(--space-2);\n opacity: 1;\n}\n.ds-figure__letter {\n font-family: var(--font-heading);\n font-size: calc(var(--text-display) * 1.5);\n font-weight: var(--weight-display);\n line-height: 1;\n}\n.ds-figure__caption {\n display: grid;\n grid-template-columns: var(--size-note) minmax(0, 1fr);\n column-gap: var(--space-5);\n margin-top: var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: 1.5;\n}\n.ds-figure__pair {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n margin: var(--space-5) 0;\n}\n\n/* tabs: a row of words without a rule; the current one is underlined in the accent */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0 0 var(--space-4);\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) 0;\n color: var(--color-text-muted);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent);\n}\n.ds-tabs__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n\n/* sidebar: the facts of a project, a short list in the note column */\n.ds-sidebar {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: 1.5;\n}\n.ds-sidebar + .ds-sidebar {\n margin-top: var(--space-5);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\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 border-top: 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\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: \"\\2192\";\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/* empty state: a sentence set at the left, where the list would be */\n.ds-empty {\n padding: var(--space-5) 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-muted);\n}\n.ds-empty__icon {\n display: block;\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-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-empty__text {\n margin: 0 0 var(--space-4);\n max-width: var(--size-measure);\n color: var(--color-text-muted);\n}\n\n/* band: the inverted block that closes the home view with the studio's letter */\n.ds-band {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: end;\n margin-bottom: var(--space-6);\n padding: var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-band__title {\n margin: var(--space-3) 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-band__text {\n margin: 0;\n opacity: 0.75;\n}\n.ds-band .ds-label {\n color: inherit;\n opacity: 0.65;\n}\n\n/* footer: one quiet strip under the main column */\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-6) + var(--space-6));\n padding: var(--space-4) var(--space-6);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-decoration: var(--link-decoration-quiet);\n text-transform: uppercase;\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* a window too narrow for the rail: it becomes a bar across the top and the note columns fold over their content */\n@media (max-width: 960px) {\n .ds-frame {\n display: block;\n min-height: 0;\n }\n .ds-nav {\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-nav__inner {\n position: static;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__links {\n flex-direction: row;\n gap: var(--space-4);\n }\n .ds-nav__link {\n margin-left: 0;\n padding: var(--space-1) 0;\n border-left: 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\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 .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(#work:target) .ds-nav__link[href=\"#work\"],\n .ds-page:has(#case:target) .ds-nav__link[href=\"#work\"],\n .ds-page:has(#contact:target) .ds-nav__link[href=\"#contact\"] {\n border-bottom-color: var(--color-accent);\n }\n .ds-nav__note {\n display: none;\n }\n .ds-wrap,\n .ds-footer__inner {\n max-width: none;\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n .ds-hero {\n padding: var(--space-6) 0 var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n}\n\n/* narrow windows: one column; names stand over their sections, a wide table scrolls inside its own box */\n@media (max-width: 640px) {\n .ds-wrap,\n .ds-footer__inner,\n .ds-nav__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav__links {\n flex: 0 0 100%;\n }\n .ds-hero {\n padding: var(--space-5) 0;\n }\n .ds-hero__title {\n margin: var(--space-3) 0 var(--space-4);\n font-size: calc(var(--text-h1) * 0.75);\n }\n .ds-hero__foot,\n .ds-section,\n .ds-figure__caption {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-3);\n }\n .ds-hero__foot > .ds-label {\n display: none;\n }\n .ds-section {\n padding: var(--space-4) 0 var(--space-5);\n }\n .ds-section--last {\n padding-bottom: var(--space-5);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n padding-bottom: var(--space-5);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: calc(var(--text-h1) * 0.75);\n }\n .ds-prose h1 {\n margin-top: var(--space-5);\n }\n .ds-prose h2,\n .ds-list__title,\n .ds-quote,\n .ds-empty__title {\n font-size: calc(var(--text-h2) * 0.8);\n }\n .ds-list__item {\n grid-template-columns: var(--space-4) minmax(0, 1fr) auto;\n column-gap: var(--space-2);\n }\n .ds-grid {\n gap: var(--space-4) var(--space-3);\n }\n .ds-grid__tile {\n padding: var(--space-2) var(--space-3);\n }\n .ds-grid__initial {\n font-size: var(--text-h1);\n }\n .ds-grid__head {\n display: block;\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat__figure {\n font-size: calc(var(--text-h1) * 0.75);\n }\n .ds-panel {\n padding: var(--space-4);\n }\n .ds-panel__split {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-band {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n margin-bottom: var(--space-5);\n padding: var(--space-4);\n }\n .ds-figure {\n padding-bottom: var(--space-5);\n }\n .ds-figure__art {\n aspect-ratio: 4 / 3;\n }\n .ds-figure__sheet {\n width: 38%;\n padding: var(--space-2);\n gap: var(--space-1);\n }\n .ds-figure__word {\n font-size: var(--text-h3);\n letter-spacing: var(--heading-tracking);\n }\n .ds-figure__word--small {\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n }\n .ds-figure__letter {\n font-size: var(--text-display);\n }\n .ds-figure__pair {\n gap: var(--space-3);\n margin: var(--space-4) 0;\n }\n .ds-table {\n min-width: 62ch;\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/* 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--1 {\n background: var(--color-fill-1);\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__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\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/* 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: 960px) {\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: 960px) {\n .ds-tooltip__tip {\n right: auto;\n max-width: 28ch;\n }\n}\n\n/* switch: a preference that is on or off, drawn over a checkbox */\n.ds-switch {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n width: var(--border-width);\n height: var(--border-width);\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2);\n height: var(--space-4);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n left: var(--border-width-strong);\n width: calc(var(--space-4) - var(--border-width-strong) * 2);\n height: calc(var(--space-4) - var(--border-width-strong) * 2);\n background: var(--color-surface);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n transform: translateX(var(--space-4));\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--border-width-strong) var(--border-style) var(--color-focus);\n outline-offset: var(--border-width-strong);\n}\n\n/* phones: the links spread across the bar */\n@media (max-width: 640px) {\n .ds-nav__links {\n justify-content: space-between;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, studio portfolio specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n

Four people in two rooms above a bindery. Taking on new work from September 2016.

\n
\n
\n\n
\n
\n\n
\n
\n
\n Design studio · Books, identities, websites\n

We design books, identities and quiet websites for people who make things.

\n
\n Since 2009\n
\n

chronoskin is a studio of four. We take six projects a year, set every page ourselves and stay until the thing is printed, bound or live.

\n
\n See the work\n Start a project\n
\n
\n
\n
\n\n
\n
\n

Selected work

\n

Four of forty-eight projects. The rest are in the index below.

\n
\n
\n
\n \n
No. 48Tt
\n

Tide Tables

2016
\n

A book of essays in two colours.

\n \n \n
No. 46Nf
\n

Northfield Dairy

2015
\n

Identity and packaging for a farm of ninety cows.

\n \n \n
No. 43Ha
\n

Halden Archive

2015
\n

A website for eleven thousand letters.

\n \n \n
No. 39Sq
\n

Small Quarterly

2014
\n

Art direction for a magazine, eight issues.

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

Index

\n

Newest first. Every project has a number; we have not skipped one yet.

\n
\n
\n \n

All forty-eight projects

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

Studio

\n
IBTROMPL
\n

Ilse Brandt, Tomas Reve, Oren Malik and Petra Lund.

\n
\n
\n
\n

We began with one book for a friend. Most of what we do is still made of paragraphs, and we still read every one of them before we set it.

\n
\n
    \n
  • 48Projects
    • \n
  • 7Years
    • \n
  • 31Books in print
    • \n
  • 4People
    • \n
\n
\n
\n
\n Availability\n

Two places open from September

\n
\n

A book takes us about fourteen weeks, an identity ten. Tell us what you are making and when it has to exist.

\n
\n
\n
\n Start a project\n How we work\n
\n
\n
\n
\n
\n\n
\n
\n Studio notes\n

Four letters a year about paper, type and deadlines

\n

One page each. Nothing to buy.

\n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Studio
    2. \n
  2. Work
    3. \n
\n
\n
\n

Work

\n

Everything the studio has finished since 2009, with its number, its year and how long it took.

\n
\n
\n Start a project\n
\n
\n\n
\n
\n

All projects

\n

Weeks are counted from the first meeting to the day of delivery.

\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 48 projects.
No.ProjectForKindYearWeeks
48Tide TablesMarrow PressBook201614
47A Grammar of FencesHalden MuseumBook201619
46Northfield DairyNorthfield FarmIdentity201510
45Lund and DaughtersLund JoineryWebsite20158
44The Ferry TimetableSound FerriesIdentity201522
43Halden ArchiveHalden MuseumWebsite201526
42Bread, MostlyMarrow PressBook201412
41Forty BridgesOland and VossBook201416
\n
\n
\n \n
\n New\n Award\n 48\n In print\n At the printer\n Out of print\n
\n
\n
\n
\n\n
\n
\n

Self-initiated

\n

Work nobody asked us for.

\n
\n
\n
\n \n

Nothing here yet

\n

Seven years of deadlines have left no room for a project of our own. If you have a book that nobody will pay for, we would like to hear about it.

\n Propose one\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Studio
    2. \n
  2. Work
    3. \n
  3. No. 48, Tide Tables
    4. \n
\n
\n
\n

Tide Tables

\n

Twelve essays about one estuary, set in two colours and bound so that it lies flat on a boat.

\n
\n
\n Next project\n
\n
\n\n
\n
\n
\n Marrow Press\n Tide Tables\n
\n
\n \n \n \n \n \n \n \n
\n
\n
\n Plate 1\n The half title and the opening of the first essay. The text block sits low on the page, leaving the head margin for the times of high water.\n
\n
\n\n
\n \n
\n
\n

The brief

\n

The author wanted a book that could be read in a small boat, in wind, with one hand.

\n

That sentence did most of our work for us. It ruled out a dust jacket, a tight spine and anything smaller than ten point. It also gave us the format: as wide as a chart folder, so the book travels where the charts do.

\n

The page

\n

Each essay opens on a right-hand page under the tide times for the day it describes. We set the text in Source Serif at 10.5 / 14.5 on a measure of twenty-four picasA pica is a sixth of an inch: about 102 mm in all., and kept three rules for every spread:

\n
    \n
  • nothing in the head margin but the tide;
    • \n
  • no line of text closer than a thumb to the fore edge;
    • \n
  • the second colour for water, never for emphasis.
    • \n
\n
\n

A book for a boat has one job before all the others: to stay open at the page you left it.

\n
\n

Binding

\n

The sections are sewn and the spine is left open under a cloth strip, so every spread lies flat. The cover is a single board, printed in one pass.

\n
\n\n
\n
Tt
\n
12
\n
\n
\n
\n\n
\n
\n

More books

\n

Plates 2 and 3, above: the title lettering and a chapter numeral.

\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Studio
    2. \n
  2. Contact
    3. \n
\n
\n
\n

Contact

\n

Tell us what you are making. One of the four of us answers every message within three working days.

\n
\n
\n See the work first\n
\n
\n\n
\n
\n

Write to us

\n

chronoskin
14 Bindery Lane, second floor
Open Monday to Thursday, nine to five.

\n

We take six projects a year and say so early when a year is full.

\n
How long does a book take?

About fourteen weeks from the first meeting to the printer.

Do you work at a distance?

Yes. Half of our clients have never seen the studio.

What does it cost?

We name one price after the first conversation and keep to it.

\n
\n
\n
\n

The studio is closed from 18 July to 5 August. Messages sent then are answered in the second week of August.

\n

Your message 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 a draft\n Discard\n \n
\n
\n
\n
\n\n
\n
\n

Before you leave

\n

Shown when a message has been started and not sent.

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

Discard this message?

\n \n
\n
\n

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

\n
\n
\n Keep writing\n Discard\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n\n
\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.landing.s04.p06.t05.u04.dc\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"editorial-minimal\",\n \"years\": [\n 2012,\n 2018\n ]\n },\n \"archetype\": \"landing\",\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-4654-dc\",\n \"short\": \"v1-em-4654-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #22201d;\n --color-canvas: #22201d;\n --color-surface: #2b2926;\n --color-surface-alt: #33302c;\n --color-surface-strong: #474440;\n --color-bar: #22201d;\n --color-bar-text: #ece5d6;\n --color-bar-alt: #1a1917;\n --color-bar-alt-text: #a39c8e;\n --color-inverse: #ece5d6;\n --color-inverse-text: #22201d;\n --color-text: #d9d2c3;\n --color-text-muted: #9a9385;\n --color-heading: #f4eee0;\n --color-heading-alt: #e0a54a;\n --color-link: #e0a54a;\n --color-link-quiet: #b5ad9e;\n --color-link-visited: #b89a6a;\n --color-link-hover: #f2bf6c;\n --color-link-active: #f7d08e;\n --color-border: #403d38;\n --color-border-strong: #d9d2c3;\n --color-border-muted: #302e2a;\n --color-accent: #e0a54a;\n --color-accent-text: #22201d;\n --color-accent-alt: #7fb5a8;\n --color-fill-1: #c9a063;\n --color-fill-2: #8fa39a;\n --color-fill-3: #b3a58c;\n --color-fill-4: #a88474;\n --color-button: #22201d;\n --color-button-text: #f4eee0;\n --color-button-hover-text: #22201d;\n --color-button-secondary: #2b2926;\n --color-button-secondary-text: #ece5d6;\n --color-input: #1a1917;\n --color-input-text: #f4eee0;\n --color-input-border: #5a564f;\n --color-disabled: #33302c;\n --color-disabled-text: #6f6a60;\n --color-danger: #ef8a7c;\n --color-danger-surface: #3d2522;\n --color-success: #8fc49a;\n --color-warning: #e6c067;\n --color-notice: #322c20;\n --color-notice-text: #f2cf8f;\n --color-focus: #e0a54a;\n --color-shadow: rgb(0 0 0 / 0.5);\n --color-overlay: rgb(10 9 8 / 0.7);\n}\n\n/* @part type */\n:root {\n --font-body: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n --font-heading: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n --font-ui: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n --font-mono: \"IBM Plex Mono\", Menlo, Monaco, \"DejaVu Sans Mono\", Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 40px;\n --text-h1: 28px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.3;\n --line-display: 1.2;\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: -1px;\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: 1px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 999px;\n --radius-page: 0;\n --shadow-panel: 0 1px 3px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: 0 0 0 1px var(--color-border-strong);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 16px 40px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-accent);\n --fill-button-secondary: transparent;\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }