{ "id": "v1-em-2115", "long_id": "v1.editorial-minimal.portal.s02.p01.t01.u05", "name": "Editorial minimalism magazine", "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: large, carefully set text on a white or near-white page, hairline and strong rules instead of boxes, a single accent colour and no gloss, gradient or decoration. This layout is its magazine form: a centred masthead over a ruled row of section names, a lead story in very large type, and stories set in columns divided by vertical hairlines, as small independent magazines and essay publications of the period laid out their front pages. Its quality lives in the type: headline size, line height, the measure of the article and the space between rules.", "url": "https://chrono.skin/s/v1-em-2115", "preview_url": "https://chrono.skin/s/v1-em-2115/specimen.html", "files": { "STYLE.md": "# Editorial minimalism magazine\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: large, carefully set text on a white or near-white page, hairline and strong rules instead of boxes, a single accent colour and no gloss, gradient or decoration. This layout is its magazine form: a centred masthead over a ruled row of section names, a lead story in very large type, and stories set in columns divided by vertical hairlines, as small independent magazines and essay publications of the period laid out their front pages. Its quality lives in the type: headline size, line height, the measure of the article and the space between rules.\n\n## Layout\n\n- The page is a fixed centred sheet of `--size-page` (1080px), designed for a 1280px viewport; `.ds-wrap` holds every row. Only the `.ds-topline` strip and the inverted footer paint edge to edge.\n- Navigation is a masthead, not a bar: the thin `.ds-topline` strip (issue at the left, offer at the right), then the brand centred and large, then the section names centred in one row between a hairline above and a strong rule below. The current section is marked by an accent piece of that strong rule.\n- The front page is three rows on the sheet. First the `.ds-hero`: lead story at the left over seven of twelve columns, its picture at the right over five. Then the `.ds-grid`: four stories in columns divided by vertical hairlines. Then the `.ds-trio`: three unequal columns (5, 3 and 4 parts) divided by vertical hairlines. Every row after the hero begins with a `.ds-rule`, a small capital label hanging under a strong rule. Rows are separated by `--space-6`.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (an optional accent label, the title at `--text-display`, one line of text, one action at the right). A story then shows a wide `.ds-figure` across the sheet and the `.ds-article`: the measure of `--size-measure` (640px) in the middle, the byline column of `--size-side` (180px) at its left and a `.ds-sidebar` of the same width at its right. A list page puts `.ds-stat` directly under the page header, then `.ds-tabs`, then the table. A form page uses `.ds-split`: the form in the wide column, panels and a sidebar in the `--size-aside` (320px) column.\n- Views. The specimen is a quarterly magazine about cities with four views. `home` is the front page: lead story with its drawing, the four stories of the issue, then the most read list, the contents of the issue and the subscription panel. `story` is one feature: breadcrumb, page header, wide figure, the text with its drop cap, part heading and pull quote between byline and related stories, then links to more. `issues` is the back issue list: the figures, year tabs, the table with pagination and the label legend, and the empty digital editions block. `subscribe` is the form page: notices, the address form, the button row and the open cancel dialog beside the two plans and the questions. Below 960px the hero stacks, the story grid goes to two columns and the side columns fall under the main one; below 600px everything is one column, the grid cells are divided by horizontal hairlines and a wide table scrolls inside `.ds-table__wrap` while the page itself never scrolls sideways.\n- Spacing scale: `--space-1` 4px (inside badges, under a title), `--space-2` 8px (above a rule's label, between a label and its field), `--space-3` 16px (cell padding, navigation padding, gaps in a button row), `--space-4` 24px (paragraph gap, grid cell padding, panel padding, sheet side padding), `--space-5` 40px (between stacked blocks, trio column padding, the brand tile), `--space-6` 56px (between rows, hero padding and column gap), `--space-7` 88px (reserved for the textarea height and larger gaps).\n- Other sizes: `--size-dialog` 440px, `--size-icon` 40px.\n- On a phone (600px and below) there is no menu button: the brand stays centred over `.ds-nav__links`, which is one row with a `--space-3` gap, spread over the width and scrolling sideways if the words do not fit; the current link keeps its accent piece of the rule. 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- Body and headings share one book serif (`--font-body`, `--font-heading`); the references used commercial text faces and open ones such as Cardo, so the stack is Iowan Old Style, Palatino, then EB Garamond and Georgia. `--font-ui` is a humanist sans used only small: navigation, buttons, labels, meta lines, table heads, footer. `--font-mono` is for inline code.\n- Body is `--text-base` 20px at `--line-body` 1.6 in `--color-text`. Headings are the same face at regular weight (`--weight-heading` 400): hierarchy comes from size and white space, not from bold or colour. `--weight-bold` 700 is for `strong` only; `--weight-ui` 600 for the small sans.\n- Sizes: `--text-display` 44px (hero title only), `--text-h1` 36px (page title, part titles in an essay, figures), `--text-h2` 26px (list titles, section headings, pull quotes, panel and dialog titles), `--text-h3` 20px (brand name, grid titles), `--text-large` 24px (hero lead, first paragraph, page header line), `--text-small` 13px (labels and meta), `--text-ui` 12px (navigation, buttons, tabs, form labels). Tables, form fields, notices and footnotes use the body face at 85% or 80% of `--text-base`, a one-off size made with `calc()`.\n- Labels and meta lines are always small capitals of the sans: `text-transform: uppercase` with letter spacing of a tenth of the size (`calc(var(--text-small) * 0.1)`). This is part of the structure and does not follow `--ui-transform`, which sets navigation, buttons, tabs and form labels; those carry a spacing of 4% of their size. An `h3` in running text is such a label, in `--color-heading-alt`.\n- The drop cap (`.ds-prose__dropcap`) is three lines deep: its size is computed from `--text-base` and `--line-body`, and it shares a baseline with an unseen strut in the text face set two lines down, so it stands on the third baseline with any type set. The pull quote is `--text-h2` at a line height of 1.35.\n- Links in text are `--color-link` with `--link-decoration`; hover changes to `--color-link-hover`. Quiet links (`--color-link-quiet`, `--link-decoration-quiet`) are for titles, breadcrumbs and margin lists.\n- Which text sits on which fill (the convention of this era, kept by every layout and token set):\n - `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and `--fill-panel` carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and the link colours. The surfaces are the page colour or a pale step from it.\n - `--fill-bar` carries `--color-bar-text` (navigation and table head); the brand name is `--color-bar-text`. `--fill-bar-alt` carries `--color-bar-alt-text` only.\n - `--fill-inverse` carries `--color-inverse-text`; quieter text on it is the same colour at an opacity of 0.65 to 0.75. The only button allowed on it is `.ds-button--inverse`.\n - `--fill-accent` carries `--color-accent-text`. `--color-danger` used as a fill also carries `--color-accent-text`.\n - `--color-fill-1` to `--color-fill-4` are picture tones: they stand where a photograph or cover would be. They carry nothing but a numeral, mark or short title in `--color-inverse-text`, never running text.\n - `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border; `--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.\n - `--fill-input` carries `--color-input-text` inside `--color-input-border`; `--color-notice` carries `--color-notice-text`; `--color-danger-surface` carries `--color-danger`; `--color-disabled` carries `--color-disabled-text`.\n - `--color-success`, `--color-warning` and `--color-danger` are text and outline colours on the page (status labels, the destructive button), so each must be readable on `--color-page`.\n- `--color-accent` is the single accent: the underline of the current navigation item, tab and page number, the checkbox, the default badge. `--color-accent-alt` only outlines the `--alt` badge.\n- Rules: hairlines are `--border-width` in `--color-border`; faint row dividers use `--color-border-muted`; `--border-width-strong` in `--color-border-strong` marks the top of a pull quote, the figures and the foot of a table head. `--radius-page` and `--shadow-panel` dress the picture tones, `--radius-panel` the panel and dialog, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: the slash of the breadcrumb is `--color-border-strong` at an opacity of 0.4; text on the inverted band is dimmed by opacity.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill and the body type. It has no width; `.ds-wrap` is the sheet.\n- `.ds-wrap`: the 1080px sheet with 24px side padding. `.ds-section` gives a row 56px above and below (`--first` 40px above, `--flush` none above). `.ds-stack` stacks blocks 40px apart. `.ds-split` is a wide column with a 320px column beside it. `.ds-trio` with `.ds-trio__col` is the row of three ruled columns.\n- `.ds-label`: a small capital line for a section name, byline or meta; `--accent` in the accent colour. `.ds-rule` is the section head: the same lettering under a strong rule, with an optional quiet link at its right.\n- `.ds-topline`: the strip on `--fill-bar-alt` above the masthead: `.ds-topline__inner` with `.ds-topline__note` and `.ds-topline__link`.\n- `.ds-brand`: the site's mark and name, centred in the masthead. `.ds-brand__mark` is a 40px tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-border-strong` border, `--radius-control`, `--shadow-control`); `.ds-brand__name` is the name at `--text-h1` in the display weight. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the masthead on `--fill-bar`. `.ds-nav__inner` centres the brand over `.ds-nav__links`; a `.ds-nav__link` that is current (`is-current`) turns its piece of the strong rule to the accent. In the specimen the showing view marks its item with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the lead story: `.ds-hero__copy` with a `.ds-label--accent`, `.ds-hero__title` in the largest type, `.ds-hero__lead` and `.ds-hero__actions` (one button and the byline), beside a `.ds-figure`.\n- `.ds-figure`: a picture with its `.ds-figure__caption` under a hairline. `.ds-art` is the drawn picture (`--wide` for the figure across an article): `.ds-art__bar` blocks with `--2` and `--4` for the other tones, `--tall`, `--mid`, `--low` for height and `--slim` for width, and one `.ds-art__sun` disc.\n- `.ds-page-header`: head of an inner page, after the breadcrumb: `.ds-page-header__copy` with an optional label, `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__actions` at the right with one button.\n- `.ds-article`: the three columns of a story: `.ds-article__meta` (labels and short lines under a strong rule), `.ds-article__main` and `.ds-article__side`.\n- `.ds-prose`: running text: `h1` (a part heading over a hairline), `h2`, `h3`, paragraphs, lists, `strong`, `code`. `.ds-prose__lead` is a larger paragraph; `.ds-prose__dropcap` is a span around the first letter of a paragraph that makes it a three-line initial in the accent colour. `.ds-quote` with `.ds-quote__text` is the pull quote on a strong accent rule at its left.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for titles and meta; `--more` is a small capital link with a chevron. `.ds-linkrow` sets links in a wrapping row.\n- `.ds-button`: a word in a box on `--fill-button` with a `--color-border-strong` border. 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 16px apart.\n- `.ds-form`: vertical form. `.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` holds the pagination and a legend.\n- `.ds-list`: the numbered list of most read stories: each `.ds-list__item` gets a large grey numeral from a counter, a `.ds-list__title` and a `.ds-list__meta` line.\n- `.ds-panel`: a ruled box on `--fill-panel` for an offer or a plan: a label, `.ds-panel__title`, `.ds-panel__body` and an optional `.ds-panel__figure` price.\n- `.ds-stat`: the row of figures under a strong rule. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` at `--text-display` over a `.ds-stat__label`, divided by vertical hairlines.\n- `.ds-grid`: four story columns divided by vertical hairlines. Each `.ds-grid__cell` holds a `.ds-grid__tile` in a picture tone (`--2`, `--3`, `--4`) carrying its section name, a `.ds-grid__title`, a `.ds-grid__text` line and a byline label.\n- `.ds-tabs`: words on a hairline; `.ds-tabs__tab` with `is-current` is underlined in the accent.\n- `.ds-badge`: a small capital label on `--fill-accent`. `--alt` is outlined in `--color-accent-alt`, `--quiet` sits on `--color-surface-strong` for counts. Status variants are outlines in their own colour: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a titled list on faint rules: `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item`, each with an optional `.ds-sidebar__count` (a page number) at the right; 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 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 chevrons; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a veil of `--color-overlay` centring a `.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 on `--color-surface-alt`, standing where a list would be: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the inverted block on `--fill-inverse`: `.ds-footer__cols` with the name (`.ds-footer__name`, `.ds-footer__text`) and three columns of `.ds-footer__title` and `.ds-footer__list` / `.ds-footer__item` / `.ds-footer__link`, then `.ds-footer__base`.\n- `.ds-avatar`: a person, as initials in a `--size-avatar` circle on a picture tone (`--1`, `--4` for the other tones). Use it beside a name, never alone as decoration. `.ds-credit`: the row that holds an avatar, a `.ds-credit__name` and one quiet line.\n- `.ds-progress`: a `--border-width-strong` line with a `.ds-progress__bar` in the accent (`--third`, `--most` set its length; a project sets the width itself) and a `.ds-progress__label` under it that says the same in words. Use it for how far a reader or a count has come, inside a margin, sidebar or panel.\n- `.ds-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 <= 1080px`: everything stays on the sheet.\n- `block-gap <= 88px`: rows are 56px apart.\n- `font-size <= 110px`: the three-line drop cap is the largest letter; the largest title is 44px.\n- `font-size >= 12px`: the small sans of navigation and buttons is the smallest text.\n- `font-weight <= 700`: headings are regular; bold is for emphasis in text.\n- `font-families <= 3`: one serif, one small sans, monospace for code.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `letter-spacing <= 1.3px`: only small capitals are tracked, by a tenth of their size.\n- `box-shadow-blur <= 0px`: nothing has a soft shadow; the dialog is framed by a second hard line.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 0px`: every corner is square.\n- `border-width <= 2px`: hairlines are 1px; 2px marks the current item, a part title and a table head.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new row is a `.ds-section` on the `.ds-wrap` sheet that begins with a `.ds-rule`; divide its columns with vertical hairlines as `.ds-grid` and `.ds-trio` do, and its rows with `--color-border-muted`. Use a box (`.ds-panel`) only for an offer. A new picture is a `.ds-art` or a tile in a picture tone, never an image. New headlines take the heading face at `--text-h2` or a `calc()` step of it; new small text is a `.ds-label`. Keep to the era's fill and text pairs so the component works with every palette: only labels and marks on picture tones, only `.ds-button--inverse` on an inverted block.\n", "components.css": ":root {\n --size-page: 1080px;\n --size-measure: 640px;\n --size-side: 180px;\n --size-aside: 320px;\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: 56px;\n --space-7: 88px;\n}\n\n/* shell: a quiet page; all content sits in one centred reading column */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-rendering: optimizeLegibility;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* column: the sheet; every row of the magazine sits in it */\n.ds-wrap {\n max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-section {\n padding-top: var(--space-6);\n padding-bottom: var(--space-6);\n}\n.ds-section--first {\n padding-top: var(--space-5);\n}\n.ds-section--flush {\n padding-top: 0;\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* split: working column and a narrow column of panels beside it */\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n gap: var(--space-6);\n align-items: start;\n}\n/* trio: three unequal columns divided by vertical hairlines */\n.ds-trio {\n display: grid;\n grid-template-columns: 5fr 3fr 4fr;\n}\n.ds-trio__col {\n min-width: 0;\n padding: 0 var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-trio__col:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-trio__col:last-child {\n padding-right: 0;\n}\n\n/* label: the small tracked capitals of section names, bylines and meta lines */\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.ds-label--accent {\n color: var(--color-accent);\n}\n/* rule: a section head, its label hanging under a strong rule */\n.ds-rule {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding-top: var(--space-2);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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\n/* topline: the strip above the masthead with the issue and the offer */\n.ds-topline {\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 letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-topline__inner {\n max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n margin: 0 auto;\n padding: var(--space-2) var(--space-4);\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-topline__note {\n white-space: nowrap;\n}\n.ds-topline__link {\n color: inherit;\n text-decoration: var(--link-decoration);\n}\n\n/* nav: a centred masthead, then the section names between a hairline and a strong rule */\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\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: var(--space-5) var(--space-4) 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--space-5);\n height: var(--space-5);\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: 70%;\n height: 70%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\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 text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n align-self: stretch;\n display: flex;\n justify-content: center;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n display: block;\n margin-bottom: calc(var(--border-width-strong) * -1);\n padding: var(--space-3) 0;\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n border-bottom-color: var(--color-accent);\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent);\n}\n/* the current view marks its section name with an accent piece of the strong rule */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#story:target) .ds-nav__link[href=\"#story\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#issues:target) .ds-nav__link[href=\"#issues\"] {\n border-bottom-color: var(--color-accent);\n}\n.ds-page:has(#subscribe:target) .ds-nav__link[href=\"#subscribe\"] {\n border-bottom-color: var(--color-accent);\n}\n\n/* hero: the lead story, its headline in the largest type on the page, its picture beside it */\n.ds-hero {\n display: grid;\n grid-template-columns: 7fr 5fr;\n gap: var(--space-6);\n align-items: end;\n padding: var(--space-6) 0;\n}\n.ds-hero__copy {\n min-width: 0;\n}\n.ds-hero__title {\n margin: var(--space-3) 0 var(--space-4);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: calc(var(--text-display) * 1.25);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n max-width: 46ch;\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/* figure: a picture drawn from the picture tones, with its caption under a hairline */\n.ds-figure {\n margin: 0;\n min-width: 0;\n}\n.ds-figure__caption {\n margin-top: var(--space-2);\n padding-top: var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-border);\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-art {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: 2%;\n aspect-ratio: 5 / 4;\n padding: 0 6%;\n overflow: hidden;\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n.ds-art--wide {\n aspect-ratio: 5 / 2;\n gap: 1.2%;\n padding: 0 4%;\n}\n.ds-art__bar {\n flex: 1 1 0;\n height: 34%;\n background: var(--color-fill-3);\n}\n.ds-art__bar--2 {\n background: var(--color-fill-2);\n}\n.ds-art__bar--4 {\n background: var(--color-fill-4);\n}\n.ds-art__bar--tall {\n height: 78%;\n}\n.ds-art__bar--mid {\n height: 56%;\n}\n.ds-art__bar--low {\n height: 18%;\n}\n.ds-art__bar--slim {\n flex: 0.5 1 0;\n}\n.ds-art__sun {\n position: absolute;\n top: 12%;\n right: 12%;\n width: 14%;\n aspect-ratio: 1 / 1;\n background: var(--color-inverse-text);\n border-radius: 50%;\n opacity: 0.9;\n}\n.ds-art--wide .ds-art__sun {\n width: 7%;\n right: 20%;\n}\n\n/* page header: the head of an inner page; a label, the title large, one line, the action at the right */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-6);\n padding: var(--space-4) 0 var(--space-5);\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-3);\n max-width: 20ch;\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-page-header__text {\n margin: 0;\n max-width: 54ch;\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/* article: the measure in the middle, the byline at its left, related stories at its right */\n.ds-article {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, var(--size-measure)) var(--size-side);\n justify-content: space-between;\n align-items: start;\n}\n.ds-article__meta {\n padding-top: var(--space-2);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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__meta p {\n margin: var(--space-2) 0 var(--space-4);\n}\n.ds-article__main {\n min-width: 0;\n}\n.ds-article__side {\n min-width: 0;\n}\n\n/* typography: the story */\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 padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-h1);\n}\n.ds-prose h1:first-child {\n margin-top: 0;\n padding-top: 0;\n border-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 font-size: var(--text-h3);\n color: var(--color-heading-alt);\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__lead {\n font-size: var(--text-large);\n line-height: 1.45;\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-accent);\n font-family: var(--font-heading);\n font-size: calc(var(--text-base) * (2 * var(--line-body) + 0.7) * 1.4);\n font-style: normal;\n font-weight: var(--weight-heading);\n line-height: 0;\n}\n.ds-prose__dropcap::before {\n content: \"\\200B\";\n padding-top: calc(var(--text-base) * var(--line-body) * 2);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* pull quote: the heading face, large, hung on a strong accent rule at its left */\n.ds-quote {\n margin: var(--space-5) 0;\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-accent);\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.3;\n letter-spacing: var(--heading-tracking);\n}\n.ds-quote__text {\n margin: 0;\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-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\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: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: text rows on hairlines; no box, no stripes */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-3) var(--space-3) 0;\n text-align: left;\n vertical-align: baseline;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n padding-right: 0;\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding-top: var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n\n/* list: the most read, numbered in large figures */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n counter-reset: ds-list;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--space-6) minmax(0, 1fr);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n counter-increment: ds-list;\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.ds-list__item::before {\n content: counter(ds-list);\n grid-row: 1 / span 2;\n color: var(--color-text-muted);\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-list__title {\n grid-column: 2;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: calc(var(--text-h2) * 0.8);\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__meta {\n grid-column: 2;\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/* panel: a ruled box for an offer or a summary */\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__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.ds-panel__figure {\n display: block;\n margin-bottom: 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-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n}\n\n/* stats: the issue in figures, four across under a strong rule */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: var(--space-3) 0 0;\n list-style: none;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: 1.1;\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n\n/* grid: stories in columns divided by vertical hairlines */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin: 0 calc(var(--space-4) * -1);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell:first-child {\n border-left: 0;\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-2) var(--space-3);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\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 display: block;\n margin: var(--space-2) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: calc(var(--text-h2) * 0.85);\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}\n.ds-grid__title:hover,\n.ds-grid__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-grid__text {\n margin: 0 0 var(--space-3);\n font-size: calc(var(--text-base) * 0.85);\n line-height: 1.45;\n}\n\n/* tabs: words on a hairline, the current one underlined in the accent */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) 0;\n color: var(--color-text-muted);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-heading);\n border-color: var(--color-accent-alt);\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: transparent;\n color: var(--color-success);\n border-color: currentColor;\n}\n.ds-badge--warning {\n background: transparent;\n color: var(--color-warning);\n border-color: currentColor;\n}\n.ds-badge--danger {\n background: transparent;\n color: var(--color-danger);\n border-color: currentColor;\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* sidebar: the contents of the issue, each line with its page */\n.ds-sidebar {\n font-size: calc(var(--text-base) * 0.85);\n line-height: var(--line-heading);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\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-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\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.ds-sidebar__count {\n float: right;\n margin-left: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\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-4) 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: \"\\203A\";\n margin-right: var(--space-2);\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 quiet tinted block where a list would be */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n background: var(--color-surface-alt);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 48ch;\n}\n\n/* footer: the inverted block that closes every page */\n.ds-footer {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\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-6) var(--space-4) var(--space-4);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: var(--space-5);\n}\n.ds-footer__name {\n display: block;\n margin-bottom: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-footer__text {\n margin: 0;\n max-width: 36ch;\n opacity: 0.7;\n line-height: var(--line-body);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\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 opacity: 0.7;\n}\n.ds-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__item {\n padding: var(--space-1) 0;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\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.ds-footer__base {\n margin-top: var(--space-5);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n font-size: var(--text-small);\n opacity: 0.7;\n}\n\n/* medium windows: the lead story stacks, the story grid goes to two columns, side columns fall under */\n@media (max-width: 960px) {\n .ds-hero {\n grid-template-columns: 1fr;\n gap: var(--space-5);\n padding: var(--space-5) 0;\n }\n .ds-hero__title {\n font-size: var(--text-display);\n }\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n row-gap: var(--space-5);\n }\n .ds-grid__cell:nth-child(odd) {\n border-left: 0;\n }\n .ds-trio {\n grid-template-columns: 1fr;\n row-gap: var(--space-5);\n }\n .ds-trio__col {\n padding: 0;\n border-left: 0;\n }\n .ds-split {\n grid-template-columns: 1fr;\n gap: var(--space-5);\n }\n .ds-article {\n display: block;\n }\n .ds-article__meta,\n .ds-article__side {\n margin: 0 0 var(--space-5);\n }\n .ds-article__side {\n margin-top: var(--space-5);\n }\n .ds-footer__cols {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n/* narrow windows: one column; section names wrap, a wide table scrolls inside its own box */\n@media (max-width: 600px) {\n .ds-wrap,\n .ds-nav__inner,\n .ds-topline__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav__inner {\n padding-top: var(--space-4);\n gap: var(--space-3);\n }\n .ds-brand__name {\n font-size: var(--text-h2);\n }\n .ds-brand__mark {\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n }\n .ds-nav__links {\n gap: var(--space-3);\n overflow-x: auto;\n justify-content: space-between;\n }\n .ds-topline__inner {\n justify-content: center;\n }\n .ds-topline__note {\n display: none;\n }\n .ds-section {\n padding-top: var(--space-5);\n padding-bottom: var(--space-5);\n }\n .ds-section--flush {\n padding-top: 0;\n }\n .ds-hero__title,\n .ds-page-header__title {\n font-size: calc(var(--text-h1) * 0.9);\n letter-spacing: var(--heading-tracking);\n line-height: var(--line-heading);\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-prose h1 {\n font-size: calc(var(--text-h1) * 0.8);\n }\n .ds-quote {\n font-size: var(--text-large);\n }\n .ds-art--wide {\n aspect-ratio: 5 / 3;\n }\n .ds-grid {\n grid-template-columns: 1fr;\n row-gap: var(--space-4);\n margin: 0;\n }\n .ds-grid__cell {\n padding: 0;\n border-left: 0;\n }\n .ds-grid__cell + .ds-grid__cell {\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-grid__tile {\n aspect-ratio: 5 / 2;\n }\n .ds-stat {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4) 0;\n }\n .ds-stat__item {\n padding: 0 var(--space-3);\n }\n .ds-stat__item:nth-child(odd) {\n padding-left: 0;\n border-left: 0;\n }\n .ds-stat__figure {\n font-size: calc(var(--text-h1) * 0.9);\n }\n .ds-tabs {\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-table {\n min-width: 62ch;\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-5) var(--space-3) var(--space-4);\n }\n .ds-footer__cols {\n gap: var(--space-4);\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/* credit: an avatar beside a name and one quiet line */\n.ds-credit {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-3) 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-credit__name {\n display: block;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* progress: a thin line that shows how far along; the words under it say the same */\n.ds-progress {\n display: block;\n height: var(--border-width-strong);\n margin: var(--space-3) 0 var(--space-1);\n background: var(--color-border-muted);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--color-accent);\n}\n.ds-progress--third .ds-progress__bar {\n width: 33%;\n}\n.ds-progress__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* 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: 600px) {\n .ds-tooltip__tip {\n position: fixed;\n right: var(--space-3);\n bottom: var(--space-3);\n left: var(--space-3);\n width: auto;\n max-width: none;\n margin: 0;\n }\n}\n\n/* switch: a preference that is on or off, drawn over a checkbox */\n.ds-switch {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n width: var(--border-width);\n height: var(--border-width);\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2);\n height: var(--space-4);\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n left: var(--border-width-strong);\n width: calc(var(--space-4) - var(--border-width-strong) * 2);\n height: calc(var(--space-4) - var(--border-width-strong) * 2);\n background: var(--color-surface);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n transform: translateX(var(--space-4));\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--border-width-strong) var(--border-style) var(--color-focus);\n outline-offset: var(--border-width-strong);\n}\n\n/* on a phone the links scroll in one strip, so the current mark stays inside it */\n@media (max-width: 600px) {\n .ds-nav__link {\n margin-bottom: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, magazine specimen\n\n\n\n\n\n
\n
\n Issue 14 · Spring 2016\n Four issues a year, from $36\n
\n
\n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n
\n
\n
\n
\n Feature · Housing\n

The city that decided to stop growing

\n

Ten years ago a port town of ninety thousand drew a line around itself. A report from inside the line.

\n
\n Read the story\n IBBy Ilse Brandt · 24 minutes\n
\n
\n
\n
\n \n \n \n \n \n \n \n
\n
The harbour quarter from the east. Drawing for chronoskin.
\n
\n
\n\n
\n

In this issueAll issues

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

Most read

\n
    \n
  1. \n The city that decided to stop growing\n Housing · 24 minutes\n
    2. \n
  2. \n Nine benches: a census of places to sit\n Streets · 7 minutes\n
    3. \n
  3. \n What a bus timetable knows about a town\n Transport · 11 minutes\n
    4. \n
  4. \n In praise of the corner shop\n Opinion · 5 minutes\n
    5. \n
\n
\n
\n

Contents

\n \n
\n
\n

Subscribe

\n
\n Print and web New rate\n

Four issues a year, by post

\n
\n $36\n

Ninety-six pages each season, no advertising, and every story in the archive.

\n
\n \n Start\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Front page
    2. \n
  2. Issue 14
    3. \n
  3. Housing
    4. \n
\n
\n
\n Feature\n

The city that decided to stop growing

\n

Ten years ago a port town of ninety thousand drew a line around itself. A report from inside the line.

\n
\n
\n Save story\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
The growth line follows the ring road for eleven kilometres. Nothing taller than six floors stands inside it.
\n
\n\n
\n \n\n
\n
\n

There is a painted line on the pavement outside the last bakery on Harbour Road. It is yellow, a hand wide, and it marks the edge of the city as exactly as a wall once did. Beyond it the same road runs on between the same hedges, but nothing may be built there, and for ten years nothing has been.

\n

The decision was taken at a council meetingThe port council, 12 March 2006. The minutes are public. that lasted until two in the morning. The minutes record eleven votes to nine and, in the margin, the single word adjourned.

\n

Inside the line

\n

What happens to a town that cannot spread? The planners expected three things, and wrote them down:

\n
    \n
  • empty upper floors would fill before new blocks were needed;
    • \n
  • the price of a garden would rise faster than the price of a flat;
    • \n
  • the bus would begin, at last, to pay for itself.
    • \n
\n
\n

We did not stop the city growing. We only told it which way to grow: inwards, and up one floor.

\n
\n

The upper floors

\n

Two of the three came true within five years. Above the shops on Harbour Road the curtains are back, and the bakery sells out by nine.

\n

A note on the figures

\n

Population counts are taken from the municipal register each January and exclude the two villages added to the district in 2011.

\n
\n

\n A tram line nobody asked for\n The last night market\n An architect who builds nothing\n Everything in issue 14\n Write to the editors\n

\n
\n\n
\n \n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Front page
    2. \n
  2. Back issues
    3. \n
\n
\n
\n

Back issues

\n

Every number of chronoskin since the first, with what is still in print.

\n
\n
\n Subscribe\n
\n
\n\n
    \n
  • 14Issues published
    • \n
  • 9Still in print
    • \n
  • 1,344Pages
    • \n
  • 212Contributors
    • \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
Prices in US dollars, postage included. Showing 6 of 14 issues.
IssueThemePublishedStockPagesPrice
No. 14LimitsSpring 2016In print9612.00
No. 13NightWinter 2015In print9612.00
No. 12WaterAutumn 2015Few left10412.00
No. 11MarketsSummer 2015Sold out9610.00
No. 10EdgesSpring 2015In print8810.00
No. 9RepairWinter 2014Few left8810.00
\n
\n
\n \n
\n New\n Reprint\n 14\n In print\n Few left\n Sold out\n
\n
\n
\n\n
\n

Digital editions

\n
\n \n

No digital editions yet

\n

Sold-out issues will be offered as files later this year. Subscribers will hear first.

\n Tell me when\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Front page
    2. \n
  2. Subscribe
    3. \n
\n
\n
\n

Subscribe

\n

Four issues a year, sent by post anywhere, with the whole archive to read on the web.

\n
\n
\n See back issues\n
\n
\n\n
\n
\n

Your details

\n
\n

Issue 14 is at the printer. Subscriptions taken this week begin with it.

\n

We could not start the subscription. Check the postcode and try again.

\n
\n
\n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n Send as a gift\n Not now\n Cancel renewal\n \n
\n
\n\n
\n
\n
\n

Cancel the renewal?

\n \n
\n
\n

The four issues already paid for will still arrive. Nothing will be charged next spring.

\n
\n
\n Keep it\n Cancel renewal\n
\n
\n
\n
\n\n
\n
\n

The plans

\n
\n
\n Print and web\n

One year

\n
\n $36\n

Four issues by post and the whole archive on the web.

\n
\n
\n
\n Web only\n

One year

\n
\n $18\n

Every story as it is published, and all fourteen back issues.

\n
\n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.portal.s02.p01.t01.u05\",\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-2115\",\n \"short\": \"v1-em-2115\"\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: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", \"EB Garamond\", Georgia, serif;\n --font-heading: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, \"Book Antiqua\", \"EB Garamond\", Georgia, serif;\n --font-ui: \"Avenir Next\", \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Menlo, Consolas, \"Liberation Mono\", monospace;\n --text-base: 20px;\n --text-small: 13px;\n --text-ui: 12px;\n --text-large: 24px;\n --text-display: 44px;\n --text-h1: 36px;\n --text-h2: 26px;\n --text-h3: 20px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: 0 0 0 3px var(--color-surface), 0 0 0 4px var(--color-border-strong);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-inverse);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-surface);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }