{ "id": "v1-em-8121", "long_id": "v1.editorial-minimal.forum.s08.p01.t02.u01", "name": "Editorial minimalism discussion forum", "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": "forum", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "Editorial minimalism is the reading-first page of 2012 to 2018: carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its forum, the quiet discussion board that small communities of those years moved to when the boxed bulletin boards before them had come to feel heavy: topics as an open list with one avatar and one number each, a thread as a column of posts divided by hairlines, and the sections of the site as large words instead of a bar. A topic is read like an article, so the posts keep a comfortable measure and everything around them is small and grey.", "url": "https://chrono.skin/s/v1-em-8121", "preview_url": "https://chrono.skin/s/v1-em-8121/specimen.html", "files": { "STYLE.md": "# Editorial minimalism discussion forum\n\n## Summary\n\nEditorial minimalism is the reading-first page of 2012 to 2018: carefully set text on a plain page, hairline rules, a single accent colour and almost no boxes or decoration. This layout is its forum, the quiet discussion board that small communities of those years moved to when the boxed bulletin boards before them had come to feel heavy: topics as an open list with one avatar and one number each, a thread as a column of posts divided by hairlines, and the sections of the site as large words instead of a bar. A topic is read like an article, so the posts keep a comfortable measure and everything around them is small and grey.\n\n## Layout\n\n- The page is a fixed centred sheet of `--size-page` (1000px), designed for a 1280px viewport; `.ds-wrap` holds every row. Only the inverted `.ds-band` and the footer strip paint edge to edge.\n- Navigation is not a bar. On `--fill-bar`, inside the sheet, a thin line holds the brand at the left and the account's words at the right; `--space-5` under it the sections stand as large words (`--text-h2` in the heading face) on a `--border-width-strong` rule in `--color-border-strong`. The current section is at full strength with an accent piece of that rule under it; the others are dimmed to half.\n- The home view is the list of latest topics. The `.ds-hero` is a welcome in two columns, seven and five parts, closed by a hairline: label and title at the left, two lines and the action at the right, both standing on the same line. Then `.ds-board`: a column of `--size-side` (232px) at the left with the categories as a `.ds-sidebar`, the `.ds-panel` and a second short list, and beside it, `--space-6` away, the `.ds-tabs` directly over the `.ds-list` of topics and its pagination. The inverted `.ds-band`, one sentence and one button, closes the page.\n- Inner pages have no hero. They start with the `.ds-breadcrumb`, then the `.ds-page-header` (title at `--text-h1`, one grey line, one action at the right) closed by a hairline. A topic is `.ds-thread`: the posts in the wide column (about 76 characters) and a column of `--size-aside` (240px) at the right with the topic's figures and related topics. An overview page puts `.ds-stat` directly under the page header, then the `.ds-grid`, then sections that begin with a `.ds-rule`. A form page is `.ds-split`, three and two parts: notices and form at the left, similar topics, the dialog and advice at the right.\n- Views. The specimen is a forum for kitchen gardeners with four views. `home` is the welcome, the categories, the house rules, this week's jobs and six latest topics with their tabs and pagination. `topic` is one thread: breadcrumb, page header, the pinned first post with its headings, a list and a code sample, two replies (one quoting), the reply row, and the figures and related topics at the right. `groups` is the overview: the forum in figures, six categories, the table of members with the label legend, and the empty category. `new` is the form page: the notices, the topic form with its button row, and beside it similar topics, the open discard dialog and a short list of advice. Below 880px the side columns fall under the main one and the hero stacks; below 640px the large words drop to `--text-h3`, the categories go one across, the figures two by two, form rows stack and a wide table scrolls inside `.ds-table__wrap`, while the page itself never scrolls sideways.\n- Spacing scale (dense, as a forum is): `--space-1` 4px (between sidebar rows, under a title), `--space-2` 8px (between a label and its field, adjacent controls, under a rule's words), `--space-3` 12px (under a post's head, table cell padding, button row), `--space-4` 20px (topic row padding, panel padding, paragraph gap, the gutter beside an avatar, side padding of the sheet), `--space-5` 32px (post padding, between stacked blocks, above the large words, between tabs), `--space-6` 48px (between the columns, between sections, the hero's upper padding), `--space-7` 80px (with `--space-5` it sets the height of a text field).\n- Other sizes: `--size-avatar` 40px, `--size-dialog` 440px, `--size-icon` 40px.\n- On a phone (640px and below) there is no menu button: the `.ds-nav__top` row stays on one line, the account words at the right of the brand with `.ds-nav__long` hidden, and the large words of `.ds-nav__links` stay in one row spread over the full width, set at `--text-h3`, with `--space-4` above them; the current word keeps its accent stroke. At 600px and below a tooltip opens as a note fixed to the bottom of the window, `--space-3` from its edges.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- The type set decides the voice; the structure only assigns sizes. `--font-heading` sets the brand, headlines, list and grid titles, figures and pull quotes; `--font-body` the running text; `--font-ui` everything small: section names, labels, buttons, captions, footer. With this pack's own type set all three are one grotesque sans (Helvetica Neue, then Helvetica and Arial; the references used commercial grotesques), with headlines at weight 700 and tight tracking.\n- Body is `--text-base` 18px at `--line-body` 1.55 in `--color-text`. Lead lines (`--text-large` 22px) use a line height of 1.45.\n- Sizes: the lead headline is `--text-display` times 1.25 (80px), the largest type on any page; `--text-display` 64px is the page title of inner pages and the figures; `--text-h1` 44px the brand, a part heading in a story, the list numerals and panel prices; `--text-h2` 28px section headings, pull quotes, panel titles (grid titles use 85% and list titles 80% of it); `--text-h3` 19px small headings and the sidebar title; `--text-ui` 14px navigation, buttons, tabs; `--text-small` 12px labels, captions, meta. Tables, form fields, notices and side text use 85% of `--text-base`.\n- Labels are small capitals of the UI face with letter spacing of a tenth of their size; they are part of the structure and do not follow `--ui-transform`, which sets navigation, buttons, tabs and form labels. `.ds-label--accent` colours the label of a lead story with `--color-accent`.\n- The text and fill pairs are those of the era, set by its first layout: page, canvas and surface colours carry `--color-text`, `--color-heading`, `--color-heading-alt`, `--color-text-muted` and links; `--fill-bar` carries `--color-bar-text`; `--fill-bar-alt` carries `--color-bar-alt-text` (the topline); `--fill-inverse` carries `--color-inverse-text`, dimmed by opacity for quieter lines (the footer); `--fill-accent` carries `--color-accent-text`; `--color-fill-1` to `--color-fill-4` are picture tones that carry only a short label or a mark in `--color-inverse-text`; `--fill-button` carries `--color-button-text` inside a `--color-border-strong` border and `--fill-button-hover` carries `--color-button-hover-text`; `--fill-button-secondary` carries `--color-button-secondary-text` inside a `--color-border` hairline; buttons stand on page and surface colours only. Status colours are text and outline colours on the page.\n- `--color-accent` is the single accent: the current section, tab and page number, the lead label, the drop cap and the rule of a pull quote. It is used as text on the page, so it must be readable there.\n- Rules do the work of boxes. `--border-width-strong` in `--color-border-strong` closes the masthead and opens every section (`.ds-rule`), the figures and the byline column; hairlines of `--border-width` in `--color-border` divide columns; `--color-border-muted` divides rows inside a list, table or sidebar.\n- Pictures are drawn, not loaded: `.ds-art` is a flat composition of bars in the picture tones on `--color-fill-1` with a disc in `--color-inverse-text`. `--radius-page` and `--shadow-panel` dress pictures and grid tiles, `--radius-panel` panels, the dialog and the empty block, `--radius-control` buttons, fields and the brand tile, `--radius-pill` badges.\n- One-off values the vocabulary has no token for: the footer rule is `--color-inverse-text` at 30% (`color-mix()`); quiet footer text and the disc use opacity; bar heights and gaps inside `.ds-art` are percentages.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, the body face, size and line height. It has no width; `.ds-wrap` is the sheet.\n- `.ds-wrap`: the 1000px sheet with 20px side padding. `.ds-section` puts 48px above a row (`--first` 32px, directly under a page header; `--last` adds 48px below the last row of a view). `.ds-stack` stacks blocks 32px apart. `.ds-board` (`.ds-board__side`, `.ds-board__main`) is the front page's two columns; `.ds-thread` (`.ds-thread__main`, `.ds-thread__side`) the two columns of a topic; `.ds-split` (`.ds-split__main`, `.ds-split__side`) three and two parts for a form.\n- `.ds-label`: a small tracked capital line: a kicker above the welcome, a caption beside a legend. `.ds-rule` is the section head: the same lettering standing on a hairline.\n- `.ds-brand`: the site's mark and name at the left of the top line. `.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 UI face, bold, at `--text-ui`. Both are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the head of every page on `--fill-bar`. `.ds-nav__inner` is the sheet; `.ds-nav__top` holds the brand and `.ds-nav__account`, a row of `.ds-nav__word` links; `.ds-nav__links` holds the large `.ds-nav__link` words on the strong rule, the current one `is-current`. In the specimen the showing view marks its word with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the welcome on the home page: a `.ds-label` and `.ds-hero__title` at the left, `.ds-hero__lead` and `.ds-hero__actions` (one button, one `.ds-link--more`) at the right, a hairline below.\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` at the right with a single button, and a hairline below.\n- `.ds-avatar`: a member's initial in a 40px circle on `--color-surface-strong`; `--1` to `--4` put it on a picture tone.\n- `.ds-post`: one message: a `.ds-avatar` in the gutter, then `.ds-post__head` (`.ds-post__name`, an optional badge, `.ds-post__time` at the right), the text as `.ds-prose`, and `.ds-post__foot` with quiet links. `.ds-post__reply` is the row that closes a thread: a label and the reply button.\n- `.ds-prose`: the text of a post: `h1`, `h2`, `h3` (a label), paragraphs, lists, `strong`, `code`. `.ds-prose__lead` is a larger first paragraph. `.ds-quote` is words quoted from an earlier post, grey behind a strong rule: `.ds-quote__source` names the writer, `.ds-quote__text` is the text.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for names and meta; `--more` is a small capital link with a chevron. `.ds-linklist` with `.ds-linklist__item` sets links as rows on faint rules.\n- `.ds-button`: a short word on `--fill-button` inside a `--color-border-strong` border. Variants: `--secondary` (hairline border, its own text colour), `--danger` (outlined in `--color-danger`, filled on hover; destructive actions only), `--inverse` (on the inverted band), `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 12px apart.\n- `.ds-form`: vertical form, 20px 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 a legend.\n- `.ds-list`: the topics: each `.ds-list__item` is the starter's `.ds-avatar`, a block with the `.ds-list__title`, one `.ds-list__text` line and a `.ds-list__meta` line (category, member, time), and at the right `.ds-list__count`, the number of replies over its `.ds-list__unit`. `.ds-list__foot` is the row under the list with the pagination and one small button.\n- `.ds-panel`: the one bordered box of a page, on `--fill-panel` with 20px padding: `.ds-panel__title` and `.ds-panel__body`.\n- `.ds-stat`: the row of figures under a page header, closed by a hairline. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__figure` (`--text-h1`) with its `.ds-stat__label` beside it on the same line, divided from the next by a vertical hairline.\n- `.ds-grid`: the categories, two across on faint rules: each `.ds-grid__cell` is a square `.ds-grid__tile` in a picture tone (`--2`, `--3`, `--4` for the others) holding one letter, and beside it `.ds-grid__title`, `.ds-grid__text` and a `.ds-grid__meta` line.\n- `.ds-tabs`: words on a hairline, directly over the list they filter; `.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`. Status variants are outlines in their own colour: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a short list in a side column: `.ds-sidebar__title` over a hairline, `.ds-sidebar__list` of `.ds-sidebar__item`; the current row is `is-current`, bold and not a link. A row may begin with a `.ds-swatch` dot in a picture tone (`--2`, `--3`, `--4`) and end with a `.ds-sidebar__count`.\n- `.ds-notice`: a tinted line with a strong rule at its left; `--error` uses the danger colours. `.ds-notice__title` is the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: a row of small words and numbers, `.ds-pagination__link`; `is-current` is underlined in the accent, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small capital trail of `.ds-breadcrumb__item` separated by slashes; the last is `.ds-breadcrumb__current`.\n- `.ds-dialog`: a veil of `--color-overlay` centring a plain `.ds-dialog__box` with a strong hairline border: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, right-aligned `.ds-dialog__actions`.\n- `.ds-empty`: a centred message closed by a hairline, standing where a list would be: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-band`: the inverted line that closes the home page: `.ds-band__inner` holds `.ds-band__title` and one `.ds-button--inverse`.\n- `.ds-footer`: one pale strip on `--fill-bar-alt`: `.ds-footer__inner` holds a line of text and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-menu`: a `
` whose `.ds-menu__button` is a plain word (`--more` adds the plus sign) or the avatar, and whose `.ds-menu__list` of `.ds-menu__link` opens under it on a hairline sheet; `--end` aligns the list to the right edge. Use it for a few further places that do not earn a nav item.\n- `.ds-tooltip`: a word with a hairline under it and a `.ds-tooltip__tip` shown on hover or focus (`--plain` drops the hairline, for a badge). Use it for a definition or a footnote of one sentence; it is never forced open.\n- `.ds-accordion`: `
` rows on hairlines, each a `.ds-accordion__head` question and a `.ds-accordion__body` answer. Use it for a short list of questions or notes in a side column or panel.\n- `.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- `block-gap <= 48px`: sections are 48px apart.\n- `row-gap <= 0px`: topics, posts and table rows touch; a hairline divides them, not a gap.\n- `font-size <= 110px`: the lead headline is 80px; only the drop cap of a story is larger.\n- `font-size >= 12px`: labels and captions are the smallest text.\n- `font-weight <= 700`: headlines are bold, nothing is heavier.\n- `font-families <= 2`: one family for everything, plus monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `letter-spacing <= 2px`: small capitals are spaced out by 1.2px; the largest headline is tightened by 2px.\n- `box-shadow = none`: nothing is lifted off the page; blocks are separated by white space or a hairline.\n- `text-shadow = none`: text is flat.\n- `gradient-fills = 0%`: every fill is one solid colour.\n- `border-radius <= 3px`: only controls are eased; panels and pictures are square.\n- `border-width <= 2px`: rules are 1px hairlines; 2px marks the current item, a pull quote and a table head.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new row is a `.ds-section` in the `.ds-wrap` sheet that begins with a `.ds-rule`; a new kind of entry is a row on a `--color-border-muted` hairline with its figure at the right, as in `.ds-list`, never a card. Separate things with white space from the `--space-*` scale first, a hairline second, and a box only once per page (`.ds-panel`). Whatever stands for a person is a `.ds-avatar`; whatever stands for a category is a dot or square in a `--color-fill-*` tone carrying at most one letter. New small text is plain `--text-small` in the UI face, or a `.ds-label` when it names something; new titles take `--text-h3` in the heading face at `--weight-heading`. Keep to the fill and text pairs listed above so that the component works with every palette of the era: never put running text on a picture tone, and put only `.ds-button--inverse` on an inverted band.\n", "components.css": ":root {\n --size-page: 1000px;\n --size-side: 232px;\n --size-aside: 240px;\n --size-avatar: 40px;\n --size-dialog: 440px;\n --size-icon: 40px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 20px;\n --space-5: 32px;\n --space-6: 48px;\n --space-7: 80px;\n}\n\n/* shell: a quiet page; all content sits in one centred reading column */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-rendering: optimizeLegibility;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* label: the small tracked capitals of meta lines and section heads */\n.ds-label {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n\n/* typography: the text of a post */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin: var(--space-5) 0 var(--space-3);\n font-size: var(--text-h1);\n}\n.ds-prose h1:first-child {\n margin-top: 0;\n}\n.ds-prose h2 {\n margin: var(--space-5) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-4);\n}\n.ds-prose li {\n margin-bottom: var(--space-2);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: calc(var(--text-base) * 0.8);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose sup {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n text-underline-offset: calc(var(--text-small) * 0.25);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link);\n}\n.ds-link--more {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-link--more::after {\n content: \" \\203A\";\n}\n.ds-linklist {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-linklist__item {\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* buttons: outlined or flat, small tracked words; the palette decides which */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: calc(var(--text-ui) * 0.04);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: currentColor;\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--fill-button-secondary);\n color: var(--color-link-active);\n border-color: currentColor;\n}\n.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--color-danger);\n color: var(--color-accent-text);\n}\n\n/* inverse: the only button allowed on an inverted band */\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n border-color: var(--color-inverse-text);\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: transparent;\n color: var(--color-inverse-text);\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: calc(var(--text-base) * 0.85);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) + var(--space-5));\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding-top: var(--space-2);\n}\n\n/* inline: one field and its button on a line, for a subscription */\n\n/* table: members and their counts; text rows on hairlines */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-3) var(--space-3) 0;\n text-align: left;\n vertical-align: baseline;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table th:last-child,\n.ds-table td:last-child {\n padding-right: 0;\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding-top: var(--space-3);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-5);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: calc(var(--text-small) * 0.08);\n text-transform: uppercase;\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-heading);\n border-color: var(--color-accent-alt);\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success {\n background: transparent;\n color: var(--color-success);\n border-color: currentColor;\n}\n.ds-badge--warning {\n background: transparent;\n color: var(--color-warning);\n border-color: currentColor;\n}\n.ds-badge--danger {\n background: transparent;\n color: var(--color-danger);\n border-color: currentColor;\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* notice: a tinted line with a strong rule at its left */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-left: var(--border-width-strong) var(--border-style) currentColor;\n border-radius: var(--radius-panel);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-1);\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n letter-spacing: calc(var(--text-ui) * 0.04);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-5) 0 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n opacity: 0.4;\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* dialog: a plain sheet on a veil */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-large);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-large) * 0.75);\n height: calc(var(--text-large) * 0.75);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* empty state: a centred sentence between two hairlines */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-style: italic;\n}\n\n/* sheet: every row sits in one centred sheet */\n.ds-wrap {\n max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-section {\n padding-top: var(--space-6);\n}\n.ds-section--first {\n padding-top: var(--space-5);\n}\n.ds-section--last {\n padding-bottom: var(--space-6);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* rule: a section head; small capitals standing on a hairline */\n.ds-rule {\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n/* board: the front page; categories in a narrow column at the left, topics beside it */\n.ds-board {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr);\n column-gap: var(--space-6);\n align-items: start;\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-board__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-board__main {\n min-width: 0;\n}\n/* thread: posts in a wide column, a narrow column of notes at the right */\n.ds-thread {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n column-gap: var(--space-6);\n align-items: start;\n padding-bottom: var(--space-6);\n}\n.ds-thread__main {\n min-width: 0;\n}\n.ds-thread__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n padding-top: var(--space-5);\n}\n/* split: a form and what belongs beside it, three and two parts */\n.ds-split {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n column-gap: var(--space-6);\n align-items: start;\n}\n.ds-split__main,\n.ds-split__side {\n min-width: 0;\n}\n\n/* nav: no bar; a thin line with the brand and the account, then the sections as large words standing on 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-4) var(--space-4) 0;\n}\n.ds-nav__top {\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-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-2));\n height: calc(var(--space-4) + var(--space-2));\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-ui) * 0.04);\n}\n.ds-nav__account {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__word {\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n opacity: 0.7;\n transition: var(--transition);\n}\n.ds-nav__word:hover,\n.ds-nav__word.is-hover {\n opacity: 1;\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 0 var(--space-5);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\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: 0 0 var(--space-3);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--heading-transform);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n opacity: 0.5;\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n opacity: 0.8;\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n/* the current view marks its section; a topic marks Latest */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n.ds-page:has(#groups:target) .ds-nav__link[href=\"#groups\"] {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n.ds-page:has(#new:target) .ds-nav__link[href=\"#new\"] {\n border-bottom-color: var(--color-accent);\n opacity: 1;\n}\n\n/* hero: a welcome in two columns, closed by a hairline; the title at the left, what the place is and the way in at the right */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n column-gap: var(--space-6);\n align-items: end;\n padding: var(--space-6) 0 var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__title {\n margin: var(--space-3) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-4);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n}\n\n/* page header: the head of an inner page; title and one line, the action at the right, a hairline under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-3) 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: 0;\n color: var(--color-text-muted);\n}\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/* avatar: a member's initial in a circle; a picture tone, or the strongest surface */\n.ds-avatar {\n display: 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-surface-strong);\n color: var(--color-heading);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: uppercase;\n}\n.ds-avatar--1 {\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n color: var(--color-inverse-text);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n color: var(--color-inverse-text);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n color: var(--color-inverse-text);\n}\n\n/* post: one message of a topic; the avatar in a gutter, then who and when, the text, and the quiet actions */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-avatar) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-5) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-post__head {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: var(--space-1) var(--space-2);\n margin-bottom: var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-post__name {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-post__time {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__foot {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin-top: var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-post__reply {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding-top: var(--space-5);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n/* quote: words of an earlier post, set back behind a strong rule */\n.ds-quote {\n margin: 0 0 var(--space-4);\n padding: var(--space-1) 0 var(--space-1) var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n color: var(--color-text-muted);\n}\n.ds-quote__text {\n margin: 0;\n}\n.ds-quote__source {\n display: block;\n margin-bottom: var(--space-1);\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\n/* list: topics; who started it, the title with one line and a meta line, the number of replies at the right */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-avatar) minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__title {\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 text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: calc(var(--text-base) * 0.85);\n line-height: var(--line-body);\n}\n.ds-list__meta {\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}\n.ds-list__count {\n min-width: var(--space-6);\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 text-align: right;\n font-variant-numeric: tabular-nums lining-nums;\n}\n.ds-list__unit {\n display: block;\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 letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-list__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/* panel: the one box on a page */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n padding: var(--space-4);\n}\n.ds-panel__title {\n margin: 0 0 var(--space-2);\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-panel__body {\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n\n/* stats: the forum in figures; each number with its label beside it, between two hairlines */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: var(--space-4) 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\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 color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums lining-nums;\n}\n.ds-stat__label {\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: categories, two across; a square in a picture tone with the category's letter, its name, a line and the counts */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n column-gap: var(--space-6);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: var(--space-6) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n min-width: 0;\n padding: var(--space-4) 0;\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n text-decoration: none;\n}\n.ds-grid__tile {\n display: block;\n aspect-ratio: 1 / 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 font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: 1;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: calc(var(--text-base) * 0.85);\n}\n.ds-grid__meta {\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}\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;\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: 0 0 var(--space-3);\n color: var(--color-text-muted);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent);\n}\n\n/* sidebar: a short list in a side column; a category row has its colour at the left and its count at the right */\n.ds-sidebar {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-2);\n padding-bottom: var(--space-2);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.1);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-1) 0;\n color: var(--color-text-muted);\n}\n.ds-sidebar__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n.ds-swatch {\n flex: 0 0 auto;\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-fill-1);\n border-radius: var(--radius-pill);\n}\n.ds-swatch--2 {\n background: var(--color-fill-2);\n}\n.ds-swatch--3 {\n background: var(--color-fill-3);\n}\n.ds-swatch--4 {\n background: var(--color-fill-4);\n}\n\n/* band: the inverted line that closes the front page; one sentence and one button */\n.ds-band {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-band__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding-top: var(--space-5);\n padding-bottom: var(--space-5);\n}\n.ds-band__title {\n margin: 0;\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\n/* footer: one pale strip; a line of text at the left, links at the right */\n.ds-footer {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n max-width: calc(var(--size-page) + var(--space-4) + var(--space-4));\n margin: 0 auto;\n padding: var(--space-4);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-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\n/* a window too narrow for two columns: side columns fall under the main one, the hero stacks */\n@media (max-width: 880px) {\n .ds-board,\n .ds-thread,\n .ds-split {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-5);\n }\n .ds-board__main {\n order: -1;\n }\n .ds-thread__side {\n padding-top: 0;\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n row-gap: var(--space-4);\n align-items: start;\n }\n}\n\n/* narrow windows: one column; large words shrink, counts and figures fold, a wide table scrolls inside its own box */\n@media (max-width: 640px) {\n .ds-wrap,\n .ds-nav__inner,\n .ds-footer__inner {\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n }\n .ds-nav__inner {\n padding-top: var(--space-3);\n }\n .ds-nav__links {\n gap: 0 var(--space-4);\n margin-top: var(--space-4);\n }\n .ds-nav__link {\n padding-bottom: var(--space-2);\n font-size: var(--text-h3);\n }\n .ds-hero {\n padding: var(--space-5) 0 var(--space-4);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n letter-spacing: var(--heading-tracking);\n }\n .ds-section {\n padding-top: var(--space-5);\n }\n .ds-section--last,\n .ds-thread {\n padding-bottom: var(--space-5);\n }\n .ds-board {\n padding: var(--space-4) 0 var(--space-5);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-page-header__title,\n .ds-prose h1 {\n font-size: calc(var(--text-h1) * 0.8);\n }\n .ds-tabs {\n gap: var(--space-4);\n overflow-x: auto;\n }\n .ds-list__item,\n .ds-post {\n column-gap: var(--space-3);\n }\n .ds-list__count {\n min-width: 0;\n font-size: var(--text-h3);\n }\n .ds-post {\n padding: var(--space-4) 0;\n }\n .ds-stat {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-3) 0;\n }\n .ds-stat__item {\n padding: 0 var(--space-3);\n }\n .ds-stat__item:nth-child(odd) {\n padding-left: 0;\n border-left: 0;\n }\n .ds-stat__figure {\n font-size: calc(var(--text-h1) * 0.8);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-table {\n min-width: 56ch;\n }\n .ds-form__row {\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-empty {\n padding: var(--space-5) 0;\n }\n}\n\n/* menu: a plain word (or the reader's avatar) that opens a short list under it */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n list-style: none;\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button--more::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n margin-left: var(--space-1);\n color: var(--color-text-muted);\n}\n.ds-menu[open] .ds-menu__button--more::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu--end .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n color: var(--color-link-hover);\n}\n\n/* 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--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: max-content;\n max-width: 28ch;\n margin-bottom: var(--space-1);\n padding: var(--space-2) var(--space-3);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-ui);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n white-space: normal;\n visibility: hidden;\n opacity: 0;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n@media (max-width: 600px) {\n .ds-tooltip__tip {\n position: fixed;\n right: var(--space-3);\n bottom: var(--space-3);\n left: var(--space-3);\n width: auto;\n max-width: none;\n margin: 0;\n }\n}\n\n/* accordion: questions on hairlines; one opens at a time under its own line */\n.ds-accordion {\n margin: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::after {\n content: \"\";\n flex: none;\n align-self: center;\n display: inline-block;\n width: calc(var(--space-2) * 1.25);\n height: calc(var(--space-2) * 1.25);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] .ds-accordion__head::after {\n clip-path: inset(calc(50% - var(--space-2) / 8) 0);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3);\n color: var(--color-text);\n}\n\n/* 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\n/* ---------- phones: the account words stay on the brand's row, at the right ---------- */\n@media (max-width: 640px) {\n .ds-nav__top {\n flex-wrap: nowrap;\n gap: var(--space-3);\n }\n .ds-nav__account {\n flex: none;\n gap: var(--space-3);\n }\n .ds-nav__long {\n display: none;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: editorial minimalism, discussion forum specimen\n\n\n\n\n\n
\n
\n
\n \n \n chronoskin\n \n \n
\n \n
\n
\n\n
\n
\n
\n
\n A forum for kitchen gardeners\n

Grow food, ask anything, answer when you can

\n
\n
\n

chronoskin is a small, slow forum about growing vegetables in whatever space you have. No ranks and no advertising.

\n
\n Start a topic\n Browse the categories\n
\n
\n
\n\n
\n \n\n
\n \n
    \n
  • \n H\n
    No-dig beds: the collected method Pinned\n

    Everything the forum has worked out about starting a bed on grass without turning it.

    \n Soil and compost · Hattie Brook · 20 minutes ago
    \n 86 replies\n
    • \n
  • \n O\n
    Leeks gone soft at the base after the frost\n

    Planted in June, fine until last week. Is this rot or just the cold?

    \n Pests and trouble · Owen Pryce · 1 hour ago
    \n 4 replies\n
    • \n
  • \n S\n
    Which garlic for a wet northern plot? Solved\n

    Heavy clay, six hundred feet up, rain most days from October.

    \n Sowing and seed · Sunniva Dahl · 3 hours ago
    \n 12 replies\n
    • \n
  • \n T\n
    A cold frame from two old windows\n

    Drawings and a cutting list, with what I would do differently.

    \n Under glass · Teodor Lis · yesterday
    \n 31 replies\n
    • \n
  • \n B\n
    What do you do with forty courgettes?\n

    A serious question from someone who planted six of them.

    \n The kitchen · Bea Hollis · yesterday
    \n 58 replies\n
    • \n
  • \n I\n
    Leaf mould: one year or two? New\n

    Mine looks ready after twelve months, but the books all say to wait.

    \n Soil and compost · Idris Vane · 2 days ago
    \n 0 replies\n
    • \n
\n
\n \n Start a topic\n
\n
\n
\n
\n\n
\n
\n

New here? Tell us what you grow and where.

\n Introduce yourself\n
\n
\n
\n\n
\n
\n
    \n
  1. Latest
    2. \n
  2. Soil and compost
    3. \n
  3. No-dig beds
    4. \n
\n
\n
\n

No-dig beds: the collected method

\n

Pinned in Soil and compost. 86 replies, 31 people, last reply 20 minutes ago.

\n
\n
\n Reply\n
\n
\n\n
\n
\n
\n H\n
\n
Hattie Brook KeeperKeeps a pinned topic up to date. Chosen by the members each spring. 4 March 2015, edited 61 times
\n
\n

This first post is kept up to date by whoever has time. It gathers what four years of replies below have agreed on. Argue in the replies and we will fold the outcome in.

\n

Making the bed

\n

You do not turn the ground. You cover it, feed it from the top and let the worms do the digging. The whole method is patience and a great deal of cardboard.

\n

What you need

\n
    \n
  • plain brown cardboard, tape and staples removed;
    • \n
  • ten centimetres of finished compost for every square metre;
    • \n
  • a plank to stand on, so you never tread on the bed.
    • \n
\n

A note on timing

\n

Autumn is best: the card has rotted by spring. When you report results, put your plot in the title the way the forum does, for example [clay, north, 180m], so that others can compare like with like.

\n
\n
Reply Quote Thanked by 214
\n
\n
\n
\n O\n
\n
Owen Pryce yesterday at 18:40
\n
\n
\n Hattie Brook wrote\n

Ten centimetres of finished compost for every square metre.

\n
\n

Half that worked for me on sandy ground, provided the card went down double. I would not try it on couch grass.

\n
\n
Reply Quote Thanked by 9
\n
\n
\n
\n S\n
\n
Sunniva Dahl New member 20 minutes ago
\n
\n

First bed went down in October on rough pasture. Slugs found the card within a week, but the garlic is up through it and looks better than the row I dug. Thank you all.

\n
\n
Reply Quote Thanked by 2
\n
\n
\n
\n Showing 3 of 87 posts\n Reply to this topic\n
\n
\n\n \n
\n
\n
\n\n
\n
\n
    \n
  1. Latest
    2. \n
  2. Categories
    3. \n
\n
\n
\n

Categories and members

\n

Six shelves for topics, and the people who answer most of them.

\n
\n
\n Start a topic\n
\n
\n
    \n
  • 2,418Topics
    • \n
  • 31,060Replies
    • \n
  • 1,274Members
    • \n
  • 19Online now
    • \n
\n\n
\n
\n \n S\n

Soil and compost

\n

Heaps, leaf mould, manure and what is under your feet.

\n 612 topics · last reply 20 minutes ago
\n \n \n W\n

Sowing and seed

\n

Varieties, dates, saving your own and swapping the rest.

\n 540 topics · last reply 3 hours ago
\n \n \n P\n

Pests and trouble

\n

Slugs, blight, pigeons and the neighbour's cat.

\n 477 topics · last reply 1 hour ago
\n \n \n G\n

Under glass

\n

Greenhouses, cold frames, cloches and windowsills.

\n 301 topics · last reply yesterday
\n \n \n K\n

The kitchen

\n

Storing, pickling and eating what came up.

\n 488 topics · last reply yesterday
\n \n \n X\n

Seed swaps

\n

Offers and wants, by post. Opened this month.

\n 0 topics
\n \n
\n
\n\n
\n

Most thanked members this year

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
MemberGardens inJoinedTopicsRepliesThanks
Hattie Brook KeeperSomerset, loam2011482,1063,912
Teodor LisLublin, sand2012611,3402,077
Bea HollisFife, clay2012229871,455
Owen PryceGower, sand201317764902
Idris VaneLeeds, clay20149311420
\n
\n
\n Labels used on the forum\n
\n Pinned\n Keeper\n New\n Solved\n Needs detail\n Closed\n
\n
\n
\n\n
\n

Seed swaps

\n
\n \n

No swaps yet

\n

Nobody has offered or asked for seed so far. List what you have spare and someone will write.

\n Offer some seed\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Latest
    2. \n
  2. New topic
    3. \n
\n
\n
\n

Start a topic

\n

Ask a question or share what worked. Someone usually answers within a day.

\n
\n
\n Back to latest\n
\n
\n\n
\n
\n
\n

Three topics like yours exist. Have a look at the list on the right before you post.

\n

The topic was not posted. Give it a title of at least ten letters.

\n
\n
\n \n
\n \n \n
\n \n \n
\n \n Preview\n Save as draft\n Discard\n \n
\n
\n
\n\n \n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.editorial-minimal.forum.s08.p01.t02.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"editorial-minimal\",\n \"years\": [\n 2012,\n 2018\n ]\n },\n \"archetype\": \"forum\",\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-8121\",\n \"short\": \"v1-em-8121\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fdfcf8;\n --color-canvas: #fdfcf8;\n --color-surface: #fdfcf8;\n --color-surface-alt: #f5f3ec;\n --color-surface-strong: #ebe8de;\n --color-bar: #fdfcf8;\n --color-bar-text: #33332f;\n --color-bar-alt: #f5f3ec;\n --color-bar-alt-text: #6b6a62;\n --color-inverse: #26302b;\n --color-inverse-text: #f5f3ec;\n --color-text: #33332f;\n --color-text-muted: #7d7b72;\n --color-heading: #1c1c19;\n --color-heading-alt: #0a6058;\n --color-link: #0c776d;\n --color-link-quiet: #6b6a62;\n --color-link-visited: #56776f;\n --color-link-hover: #0a6058;\n --color-link-active: #063f3a;\n --color-border: #d9d6cb;\n --color-border-strong: #33332f;\n --color-border-muted: #ebe8de;\n --color-accent: #0c776d;\n --color-accent-text: #fdfcf8;\n --color-accent-alt: #b5651d;\n --color-fill-1: #7f9c8f;\n --color-fill-2: #c8a67e;\n --color-fill-3: #5c6b73;\n --color-fill-4: #a9a889;\n --color-button: #fdfcf8;\n --color-button-text: #1c1c19;\n --color-button-hover-text: #fdfcf8;\n --color-button-secondary: #fdfcf8;\n --color-button-secondary-text: #0c776d;\n --color-input: #ffffff;\n --color-input-text: #1c1c19;\n --color-input-border: #c0bdb1;\n --color-disabled: #ebe8de;\n --color-disabled-text: #a3a196;\n --color-danger: #9d120d;\n --color-danger-surface: #fbeeea;\n --color-success: #2e7d4f;\n --color-warning: #a8650f;\n --color-notice: #edf3ee;\n --color-notice-text: #0a6058;\n --color-focus: #0c776d;\n --color-shadow: rgb(40 36 20 / 0.12);\n --color-overlay: rgb(38 48 43 / 0.45);\n}\n\n/* @part type */\n:root {\n --font-body: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-heading: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-ui: \"Helvetica Neue\", Helvetica, \"Nimbus Sans\", \"Liberation Sans\", Arial, sans-serif;\n --font-mono: \"SFMono-Regular\", \"Roboto Mono\", Menlo, Consolas, monospace;\n --text-base: 18px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 22px;\n --text-display: 64px;\n --text-h1: 44px;\n --text-h2: 28px;\n --text-h3: 19px;\n --line-body: 1.55;\n --line-heading: 1.12;\n --line-display: 1.02;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.5px;\n --display-tracking: -2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 999px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-inverse);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;\n --backdrop-blur: 0px;\n}\n" } }