{ "id": "v1-bb-3333", "long_id": "v1.bulletin-board-forums.forum.s03.p03.t03.u03", "name": "Bulletin board forum, community front page, 2002 to 2007", "era": { "slug": "bulletin-board-forums", "code": "bb", "name": "Bulletin-board forums", "years": [ 2002, 2007 ], "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana." }, "archetype": "forum", "mode": "pure", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the forum as the community section of a larger site, common from about 2003 to 2006: a white masthead with the wordmark and a row of icons over labels, a section title with a few member links, and then a front page that leads with the latest discussions rather than the list of boards. The discussions run down a wide main column under date strips, each with an excerpt and a right-aligned byline, and a wide column of titled boxes on the right carries the forum tree and recent articles; inner pages go back to one full-width column, or keep the right column for a menu of their own. One petrol blue with orange bar titles on cool grey cells, flat fills, hairline borders, no underlines until hover.", "url": "https://chrono.skin/s/v1-bb-3333", "preview_url": "https://chrono.skin/s/v1-bb-3333/specimen.html", "files": { "STYLE.md": "# Bulletin board forum, community front page, 2002 to 2007\n\n## Summary\n\nThis is the forum as the community section of a larger site, common from about 2003 to 2006: a white masthead with the wordmark and a row of icons over labels, a section title with a few member links, and then a front page that leads with the latest discussions rather than the list of boards. The discussions run down a wide main column under date strips, each with an excerpt and a right-aligned byline, and a wide column of titled boxes on the right carries the forum tree and recent articles; inner pages go back to one full-width column, or keep the right column for a menu of their own. One petrol blue with orange bar titles on cool grey cells, flat fills, hairline borders, no underlines until hover.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (10px) of padding, so the outlined sheet `.ds-page__frame` takes about 98% of the viewport. Designed at 1024px. Never centre a narrow column.\n- Order from the top: a thin utility strip `.ds-nav__top` in the inverse fill with three right-aligned links; the masthead `.ds-nav__head` on the canvas, wordmark left and the icon navigation right, each item `--size-navitem` (78px) wide with a `--size-navicon` (26px) icon over its label, the current one an outlined pale cell; a 1px strong rule; then `.ds-page__body`; then the pale footer band and one closing line `.ds-page__legal`, both inside the sheet. No text sits on the page colour.\n- The front page: `.ds-hero` across the full width (display-size section title and lead on the left, two rows of member links and the main action on the right, a ruled foot line with visit times and shortcuts), an optional `.ds-notice`, then `.ds-layout`: the main column first and a `--size-sidebar` (27%) sidebar on the right. The main column holds the `.ds-list` of latest discussions, the `.ds-stat` line and the `.ds-grid` of section boxes. A full-width `.ds-panel` closes the page.\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 6px, `--space-5` 10px, `--space-6` 16px.\n - `--space-1`: the ruled gap between cells of a table, form or dialog; vertical padding of buttons and inputs.\n - `--space-2`: vertical padding of bars and strips, gap between stacked small lines.\n - `--space-3`: vertical padding of table cells, gap between inline items and between navigation items.\n - `--space-4`: padding of list items and strips, the gap between grid boxes and between buttons.\n - `--space-5`: page padding, the gap between neighbouring blocks and between the two columns, padding of panel bodies. This is the only block gap.\n - `--space-6`: horizontal padding of the masthead and the body, sub-item indent, padding of dialog and empty-state bodies.\n- Bars and title strips are `--size-bar` (24px) tall. Topic table columns: status `--size-status` (28px), topic (fluid), replies, author and views `--size-count` (60px) each, last post `--size-last` (150px, centred); rows are at least `--size-row` (32px).\n- Each screen is a `.ds-view` inside `.ds-page__body`; its `.ds-view__body` stacks the blocks `--space-5` apart. The utility strip, the masthead and the footer are written once, outside the views.\n- Inner pages (a forum, a discussion, the posting form) keep the utility strip, the masthead and the footer and drop the hero and the sidebar: one full-width column. From the top: `.ds-breadcrumb` as a secondary strip, then `.ds-page-header` in place of the hero (an open title at the heading size with one line of description, the main action bottom-right, closed by a strong rule), then the working blocks. A forum has `.ds-tabs` as folder tabs on a rule, the `.ds-table`, a `.ds-pagination` text line under it and the `.ds-legend`. A discussion is a run of `.ds-post` boxes, each with a `--size-last` (150px) author cell on the left, closed by a `.ds-toolbar` with the topic buttons on the left and the page numbers on the right; a confirmation `.ds-dialog` sits in the flow between the posts and the toolbar. The posting page has any `.ds-notice--error` first, then `.ds-form` at full width. All are `--space-5` apart.\n- Inner pages with a menu of their own (the member's desk, help) keep the breadcrumb and page header at full width and then use `.ds-layout` as the front page does: working blocks in the main column, the menu and one more box in the `--size-sidebar` column on the right. Fill both columns so they end near each other.\n- Views. The specimen is a six-screen example community; the icon navigation has one item per view and marks the current one. `index` (home) is the community front page: section title with the main action, an announcement, the latest discussions beside the forum tree and recent articles, the figures line, the desks grid and who is online. `board` is one forum: tabs, the topic table, page numbers and the icon legend. `topic` is a discussion: three posts, the delete confirmation that a post's Delete link opens, and the topic buttons with page numbers. `post` is the new topic form with its error notice and a short box of posting notes. `desk` is the member's own page: watched topics and an empty private message inbox beside the account menu and the critique ledger. `rules` is the help page: the house rules as long text and related links beside the help contents and the moderator list.\n- Form rows are a right-aligned `--size-label` (32%) label cell and a field cell; text inputs are `--size-field` (220px) unless `--wide`. A dialog is `--size-dialog` (48%) wide, centred in the flow.\n\n## Typography and colour roles\n\n- `--color-page` is the grey #e5e5e5 and `--color-canvas` the white sheet. Cells are cool greys: `--color-surface` #efefef for list items, sidebar and panel bodies and the main table cell, `--color-surface-alt` #dee3e7 for status, count and last-post cells, form fields, idle tabs and the footer band, `--color-surface-strong` #d1d7dc for group rows, plain panel titles, the form action row and the current page number.\n- One saturated colour, the petrol blue #006699: it is `--color-bar`, `--color-inverse`, `--color-heading`, `--color-link`, `--color-link-quiet`, `--color-border-strong`, `--color-accent` and `--color-button`.\n- `--color-bar-text` is the light orange #ffa34f, bold, on the petrol bar only (list, sidebar, panel, form and dialog titles, table heads); never put it on a pale surface. `--color-bar-alt` is the grey-blue #98aab1 with black `--color-bar-alt-text`: date strips, sidebar sub-strips and foot strips, the breadcrumb strip, and the colour of navigation and read-status icons. The utility strip is `--color-inverse` with `--color-inverse-text`.\n- Text is `--color-text` #000000, secondary text `--color-text-muted` #444444, `--color-heading-alt` #333333 for second-level headings in prose. A hovered link turns `--color-link-hover` #333333; visited is the lighter #4691b6. Only `--color-text-muted` is ever set directly on the page colour.\n- `--color-border` (#98aab1) outlines blocks and inputs; `--color-border-muted` (#d1d7dc) divides inside a box; `--color-border-strong` rules off the masthead, the page header and the footer and outlines the dialog.\n- Markers: `--color-accent-alt` is the dark green #006600 for emphasised remarks, shared with `--color-success`. Orange #ffa34f returns as `--color-warning`. `--color-danger` #c60202 on `--color-danger-surface` #fddbcc. `--color-notice` is the pale #e8eef2. Text on the accent is `--color-accent-text`. Status badges are a `color-mix()` of 30% of the status colour (`--color-success`, `--color-warning`, `--color-danger`) over `--color-surface`, with `--color-text` and a 1px outline in the status colour, so they read under every palette. The destructive button is the error pair: `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline.\n- `--color-fill-1` to `--color-fill-4` are the four pale greys #efefef, #d1d7dc, #dee3e7, #e8eef2; they fill the section boxes of `.ds-grid`, with `--color-link-quiet` names and `--color-text-muted` meta.\n- `--font-body` and `--font-heading` are Verdana with Helvetica. `--font-ui` is Tahoma: navigation labels, tabs and buttons, at `--text-ui` 10px, bold (`--weight-ui` 700) and uppercase (`--ui-transform`). Inputs use `--font-body` at `--text-small`.\n- Two sizes do most of the work: `--text-small` 10px for excerpts, bylines, descriptions, table cells and strips, and `--text-base` / `--text-large` / `--text-h2` 13px for running text, discussion and topic titles and bar titles. `--text-h3` is 12px. `--text-h1` and `--text-display` are 18px for the page heading, the section title of the hero and the wordmark; nothing is larger.\n- Line height is `normal`; headings are bold with no tracking and no transform.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are `none`, and `--link-decoration-hover` adds the underline. Links are told apart by colour, so link text must never share the body text colour.\n- Completely flat: `--fill-bar`, `--fill-bar-alt`, `--fill-button`, `--fill-inverse` and `--fill-accent` are the plain colours. No gradient anywhere.\n- `--fill-panel` is `--color-border-strong`: the one-pixel gaps between cells of a table, form or dialog are drawn in the strong border colour. Never set text directly on it. Lists, panels and sidebar boxes are not gapped; their rows touch or are divided by a `--color-border-muted` rule.\n- Hairlines only: `--border-width` and `--border-width-strong` are both 1px solid. All `--radius-*` are 0 and every `--shadow-*` is `none`. `--focus-ring` is a 1px dotted line; `--transition` is `none`.\n- One-off choices outside the token set: the idle navigation item has a `transparent` border so the current item's outline does not shift it; the current tab is moved down by `--space-1` to cover the rule.\n\n## Components\n\n- `.ds-page`: on ``. Wrap everything in `.ds-page__frame`; put blocks in `.ds-page__body`. In the specimen each screen is a `.ds-view` (the first also `.ds-view--home`), shown one at a time by its id in the address, with a `.ds-view__body` column inside; a real page needs neither. `.ds-page__legal` is the closing line at the foot of the sheet. `.ds-layout` with `.ds-layout__main` first and `.ds-sidebar` second makes the two-column area. `.ds-icon` sizes a small inline SVG icon, `.ds-sprite` hides the symbol sheet, `.ds-block` puts a span on its own line.\n- `.ds-nav`: the site header. `.ds-nav__top` is the utility strip of `.ds-nav__toplink` items. `.ds-nav__head` holds `.ds-nav__brand` (the `.ds-brand` with a `.ds-nav__tagline` line under it) and `.ds-nav__menu`, whose `.ds-nav__link` items are a `.ds-nav__icon` over a label; the current one takes `is-current` and becomes an outlined pale cell (the specimen marks it from the view in the address instead).\n- `.ds-brand`: the site's mark and name at the left of the masthead, linking to the index; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, a `--border-width` outline in `--color-border-strong`, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.5 times `--text-display`, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` and `--weight-display`, with `--display-tracking` and `--heading-transform`, coloured `--color-heading` for the canvas masthead it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: a secondary strip with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` (`::`) and `.ds-breadcrumb__current`.\n- `.ds-hero`: the section head of the front page. `.ds-hero__title` at the display size, `.ds-hero__lead` one small line; `.ds-hero__aside` holds `.ds-hero__links` (rows of `.ds-hero__linkitem`, a small icon and a link) and the main action `.ds-hero__action`; `.ds-hero__foot` is the ruled line of times and shortcuts with a right-aligned `.ds-hero__side`. No fill, no box.\n- `.ds-page-header`: the head of an inner page. `.ds-page-header__title`, `.ds-page-header__desc`, and `.ds-page-header__action` with one primary button at the right; a strong rule closes it.\n- `.ds-prose`: long text on the canvas in a hairline box: h1, h2, h3, p, ul, strong, code, hr.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` and `.ds-link--strong`.\n- `.ds-button`: primary action, flat, bold uppercase. `.ds-button--secondary` is the pale button, `.ds-button--danger` the destructive one, error text on the error surface with an error outline. `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: a ruled block. `.ds-form__title` (centred primary bar), `.ds-form__row` with a right-aligned `.ds-form__label` (plus `.ds-form__hint`) and a `.ds-form__field`; controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons centred in `.ds-form__actions`.\n- `.ds-table`: the topic index of an inner page and any data table. `th` is the primary bar (`.ds-table__head--left` for the text column); `.ds-table__group` is a pale group row; cells `.ds-table__status` (`is-read`), `.ds-table__num`, `.ds-table__last`; inside the main cell `.ds-table__title` and `.ds-table__meta`. It is not used on the front page.\n- `.ds-list`: the latest discussions. `.ds-list__head` (centred primary bar), `.ds-list__date` strips between days, `.ds-list__item` (`is-alt`) with an icon and a `.ds-list__body` holding `.ds-list__title`, a quoted `.ds-list__excerpt` and a right-aligned `.ds-list__meta` byline.\n- `.ds-post`: one message of a discussion, a hairline box on `--color-surface`. `.ds-post__head` is a secondary strip with the date left and the post number right; `.ds-post__author` is the centred `--color-surface-alt` cell with `.ds-post__name` (a quiet bold link at `--text-large`) and `.ds-post__meta` lines; `.ds-post__body` holds `.ds-post__text` paragraphs, an outlined `.ds-post__quote` with its `.ds-post__cite`, inline `.ds-post__code` and an italic ruled `.ds-post__sig`; `.ds-post__foot` is a `--color-surface-strong` strip of small links, profile left and post tools right.\n- `.ds-toolbar`: the row under a discussion: `.ds-buttons` on the left, `.ds-pagination` on the right.\n- `.ds-panel`: a full-width titled box. `.ds-panel__title` (`--bar` for the primary bar), `.ds-panel__sub` strip, `.ds-panel__row` for an icon beside a `.ds-panel__body` (`--alt`), `.ds-panel__line` paragraphs.\n- `.ds-grid`: section boxes two across with a `--space-4` gap, each `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills) outlined, with `.ds-grid__name` and `.ds-grid__meta`; `.ds-grid__title` is an open heading on a faint rule.\n- `.ds-stat`: `.ds-stat` is the row: one centred line of text on the canvas. Each figure is a `.ds-stat__item` made of a `.ds-stat__label` and a bold `.ds-stat__value`. Never boxes.\n- `.ds-tabs`: folder tabs on a hairline; `.ds-tabs__tab` is a pale outlined tab, `is-current` is the canvas colour and joins the page below.\n- `.ds-badge`: a small square label. `.ds-badge--quiet`, The status variants `.ds-badge--success` (solved, online, approved), `.ds-badge--warning` (pending, awaiting) and `.ds-badge--danger` (locked, banned, overdue) are a pale tint of the status colour with body text and a 1px outline in that colour. `.ds-new` is bold text for a remark. `.ds-legend` with `.ds-legend__item` (`is-read`) and `.ds-legend__label` explains the status icons.\n- `.ds-sidebar`: the right column of `.ds-sidebar__block` boxes, each with a centred `.ds-sidebar__title` bar, an optional `.ds-sidebar__sub` strip, a `.ds-sidebar__list` of `.ds-sidebar__item` (`--head` for a section, `--sub` for an indented forum, `.ds-sidebar__byline` for an author) and an optional `.ds-sidebar__foot` with a `.ds-sidebar__footlink`.\n- `.ds-notice`: a centred pale line in a hairline box with a `.ds-notice__title`. `.ds-notice--error` is the error box, title on its own line.\n- `.ds-pagination`: a line of text under a table or at the right of a `.ds-toolbar`: `.ds-pagination__label` on the left, then bold `.ds-pagination__link` items separated by `.ds-pagination__sep` commas; `is-current` is a pale chip.\n- `.ds-dialog`: a centred information box in the page flow: `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and `.ds-dialog__actions`. `.ds-dialog__backdrop` is a flat band. It never floats over the page.\n- `.ds-empty`: a pale box for a list with nothing in it: an optional centred `.ds-empty__title` in the primary bar, then `.ds-empty__body` with one centred bold `.ds-empty__text` and one button.\n- `.ds-footer`: the pale band closing the sheet under a strong rule: a `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` bars, then `.ds-footer__note`.\n\n## Never\n\n- `row-gap <= 1px`: rows touch or are divided by a hairline.\n- `block-gap <= 20px`: neighbouring blocks are 10px apart.\n- `content-width >= 90%`: the two columns together fill the viewport.\n- `font-size <= 18px`: the wordmark and page heading are the largest text.\n- `font-size >= 10px`: 10px is the smallest size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Verdana, Tahoma for controls, a monospace for code.\n- `letter-spacing <= 0px`: no tracking.\n- `uppercase-text <= 15%`: only navigation, tabs and buttons are uppercase.\n- `underlined-links <= 10%`: links are underlined on hover only.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: no shadow in any reference.\n- `text-shadow = none`: no text shadow in any reference.\n- `gradient-fills <= 0%`: bars and buttons are flat colour.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 1px`: hairlines only.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new right-column box from `.ds-sidebar__block`, a new feed from `.ds-list`, a new full-width box from `.ds-panel`, a new data view from `.ds-table`. Give it a 1px `--color-border` outline, a title in `--fill-bar` (centred) or a strip in `--fill-bar-alt`, and a body in `--color-surface`; divide rows with `--color-border-muted` rather than gaps, except in tables and forms, which use `--space-1` gaps over `--fill-panel`. Keep text on the fills it already sits on in the specimen. Use tokens only: no raw colours or lengths, no new radius, shadow, gradient or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block. On the front page, new boxes go into the right column or below the discussions; inner pages stay one column unless they have a menu of their own, which goes in the right column.\n", "components.css": "/* Layout tokens (structure part). A community front page: icon navigation in\n the masthead, a latest-discussions column and a wide column of boxes on the\n right. Widths, paddings and gaps measured on a portal-style forum front\n page and two board indexes captured 2004 to 2006. */\n:root {\n --size-page: 100%;\n --size-sidebar: 27%;\n --size-navitem: 78px;\n --size-navicon: 26px;\n --size-icon: 16px;\n --size-bar: 24px;\n --size-status: 28px;\n --size-count: 60px;\n --size-last: 150px;\n --size-row: 32px;\n --size-label: 32%;\n --size-field: 220px;\n --size-dialog: 48%;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 16px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5);\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}\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-6) var(--space-6);\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/* The column of blocks inside a view, one block gap apart. */\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- nav: utility strip, wordmark, icons over labels ---------- */\n.ds-nav {\n display: block;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__top {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n list-style: none;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__toplink {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__toplink:hover,\n.ds-nav__toplink.is-hover {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n flex: none;\n}\n/* The site's mark and name. The tile is dressed like the primary button, so\n every palette and surface set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.5);\n height: calc(var(--text-display) * 1.5);\n box-sizing: border-box;\n background: 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: 76%;\n height: 76%;\n}\n.ds-brand__name {\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-nav__tagline {\n display: block;\n font-size: var(--text-small);\n font-style: italic;\n color: var(--color-text-muted);\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\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 font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n width: var(--size-navitem);\n box-sizing: border-box;\n padding: var(--space-3) var(--space-2);\n border: var(--border-width) var(--border-style) transparent;\n color: var(--color-link-quiet);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__icon {\n width: var(--size-navicon);\n height: var(--size-navicon);\n color: var(--color-bar-alt);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n/* The current view's item, and the first item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#index\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#post:target) .ds-nav__link[href=\"#post\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#desk:target) .ds-nav__link[href=\"#desk\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n.ds-page:has(#rules:target) .ds-nav__link[href=\"#rules\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n color: var(--color-heading);\n}\n\n/* ---------- breadcrumb: a secondary strip ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n font-weight: var(--weight-body);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-body);\n}\n\n/* ---------- hero: section title with two rows of member links ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-3) var(--space-6);\n align-items: center;\n border-radius: var(--radius-page);\n}\n.ds-hero__title {\n margin: 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}\n.ds-hero__lead {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n.ds-hero__aside {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-hero__linkitem {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-alt);\n}\n.ds-hero__action {\n margin: 0;\n}\n.ds-hero__foot {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-hero__side {\n text-align: right;\n}\n\n/* ---------- page header: an open title on a rule ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding: var(--space-3) 0 var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: 0;\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__desc {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- two columns: discussions, then the wide column of boxes ---------- */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-sidebar);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-layout__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-sidebar__block {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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-shadow: var(--shadow-text);\n}\n.ds-sidebar__sub {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-4) var(--space-5) var(--space-5);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__item--head {\n padding-top: var(--space-4);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__item--sub {\n padding-left: var(--space-6);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__byline {\n display: block;\n font-style: italic;\n color: var(--color-text-muted);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__footlink {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__footlink:hover,\n.ds-sidebar__footlink.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- list: latest discussions under date strips ---------- */\n.ds-list {\n margin: 0;\n padding: 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-panel);\n}\n.ds-list__head {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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 letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-list__date {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-icon) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-3);\n background: var(--color-surface);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-bar-alt);\n}\n.ds-list__item.is-alt {\n background: var(--color-fill-3);\n}\n.ds-list__body {\n color: var(--color-text);\n}\n.ds-list__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-list__excerpt {\n display: block;\n padding: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n.ds-list__meta {\n display: block;\n padding: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n\n/* ---------- table: the topic index of an inner page ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: separate;\n border-spacing: var(--space-1);\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}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n text-align: left;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n vertical-align: middle;\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__last,\n.ds-table .ds-table__status {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n font-size: var(--text-small);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__last {\n width: var(--size-last);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__status {\n width: var(--size-status);\n padding: var(--space-3);\n text-align: center;\n color: var(--color-accent);\n}\n.ds-table .ds-table__status.is-read {\n color: var(--color-bar-alt);\n}\n.ds-table .ds-table__group td {\n height: auto;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-table__title {\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-table__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- post: one message of a discussion ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-last) minmax(0, 1fr);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-post__head {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-post__author {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-post__name {\n display: block;\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__name:hover,\n.ds-post__name.is-hover {\n color: var(--color-link-hover);\n}\n.ds-post__meta {\n display: block;\n color: var(--color-text-muted);\n}\n.ds-post__body {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-post__text {\n margin: 0 0 var(--space-4);\n}\n.ds-post__code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-post__quote {\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-post__cite {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-post__sig {\n margin: 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-style: italic;\n}\n.ds-post__foot {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n/* Topic buttons on the left, page numbers on the right. */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__title--bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__sub {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-panel__row {\n display: grid;\n grid-template-columns: var(--size-navicon) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: center;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n color: var(--color-bar-alt);\n}\n.ds-panel__body {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-panel__row .ds-panel__body {\n padding: 0;\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-2);\n}\n\n/* ---------- grid: section boxes side by side ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__title {\n grid-column: 1 / -1;\n margin: 0;\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__name {\n display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n}\n.ds-grid__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- stats: one centred line of figures ---------- */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n font-size: var(--text-small);\n}\n.ds-stat__item {\n white-space: nowrap;\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n}\n.ds-stat__value {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- tabs: folder tabs on a rule ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-3);\n margin: 0;\n padding: 0 var(--space-4);\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 font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n position: relative;\n top: var(--space-1);\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-4);\n background: var(--color-canvas);\n border-bottom-color: var(--color-canvas);\n color: var(--color-text);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-form__title {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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 letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-form__label {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\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: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n font-size: var(--text-small);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-color: var(--color-danger);\n}\n.ds-notice--error .ds-notice__title {\n display: block;\n color: var(--color-danger);\n}\n\n/* ---------- pagination: a line of text ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n margin-right: auto;\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n padding: 0 var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n text-decoration: none;\n}\n.ds-pagination__sep {\n color: var(--color-text-muted);\n}\n\n/* ---------- dialog: an information box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n box-sizing: border-box;\n margin: 0 auto;\n padding: var(--space-1);\n background: var(--fill-panel);\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__title {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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 letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-6);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-6) var(--space-5);\n background: var(--color-overlay);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-empty__title {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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-shadow: var(--shadow-text);\n}\n.ds-empty__body {\n padding: var(--space-6) var(--space-5);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- footer: link lines on a pale band ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__sep {\n color: var(--color-text-muted);\n}\n.ds-footer__note {\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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.ds-link--quiet.is-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-hover);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n padding: var(--space-5) var(--space-6);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\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 color: var(--color-heading);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-text);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose hr {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n padding: var(--space-1) 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 text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n transition: var(--transition);\n cursor: pointer;\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 box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\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: var(--color-input-border);\n font-weight: var(--weight-body);\n}\n/* Destructive action: the error pair, error text on the error surface with\n an error outline. It does not depend on the primary button's colours. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- badge and legend ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-badge--quiet {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n text and the status colour as the outline, so they read under any palette. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n border-color: var(--color-danger);\n}\n.ds-new {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-legend {\n display: flex;\n justify-content: center;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-legend__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-accent);\n}\n.ds-legend__item.is-read {\n color: var(--color-bar-alt);\n}\n.ds-legend__label {\n color: var(--color-text);\n}\n\n", "specimen.html": "\n\n\n\n\nchronoskin: community front page specimen\n\n\n\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n
\n\n
\n \n
\n
\n \n \n chronoskin\n \n Drafts, critique and shop talk\n
\n \n
\n
\n\n
\n\n
\n
\n\n
\n
\n

Community

\n

Share a chapter, ask for a critique or argue about semicolons. Reading is open to all; posting needs a free account.

\n
\n
\n \n

Start a discussion

\n
\n
\n The time now is 12 Jun 2005 16:40 You last visited on 11 Jun 2005 22:05\n View posts since last visit View unanswered posts\n
\n
\n\n

Summer flash fiction round is open. Entries of up to 500 words close on 30 June. Read the brief.

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

\n Members: 6,431\n Threads: 27,908\n Posts: 214,366\n Online now: 87\n

\n\n
\n

Browse by desk

\n
\n Fiction\n Novels in progress, short stories, plot and structure\n 11,204 threads\n
\n
\n Poetry and script\n Poetry desk, stage and screen, song lyrics\n 5,718 threads\n
\n
\n The craft\n Style and grammar, research, tools of the trade\n 6,340 threads\n
\n
\n Getting published\n Submissions, agents, small presses, contracts\n 4,646 threads\n
\n
\n\n
\n\n \n\n
\n\n
\n

What's going on?

\n

Currently active users: 87 (31 members and 56 guests)

\n
\n \n
\n

Most users ever online was 342, on 14 Feb 2005 at 20:17.

\n

calloway, fenwick_j, inkwell_ada, juniper_m, marlow_p, oldharbour, redpencil, tessellate, verity_s. Welcome to our newest member, juniper_m.

\n
\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. ::
    3. \n
  3. Community
    4. \n
  4. ::
    5. \n
  5. Plot and structure
    6. \n
\n\n
\n
\n

Plot and structure

\n

Outlines, pacing, point of view and endings that land. Moderators: oldharbour, verity_s

\n
\n
New topic
\n
\n\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \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
TopicsRepliesAuthorViewsLast post
Announcements
How to ask for a critique in this forum Locked0verity_s9,12003 Jan 2005 09:00 verity_s
Topics
Keeping a timeline straight across four narrators New63tessellate2,41712 Jun 2005 15:52 redpencil
Two timelines that meet in the last chapter New12marlow_p43112 Jun 2005 11:08 calloway
Where should the midpoint reversal fall? Answered21calloway90611 Jun 2005 21:14 oldharbour
Outline for a heist in three acts Critique wanted4juniper_m18810 Jun 2005 18:30 juniper_m
Is a flashback inside a flashback ever forgivable?37fenwick_j1,36208 Jun 2005 11:47 inkwell_ada
Killing the subplot you like best58redpencil2,04407 Jun 2005 19:26 tessellate
An unreliable narrator who does not know it Answered16inkwell_ada74205 Jun 2005 08:13 verity_s
\n\n
    \n
  • Page 2 of 19. All times are GMT.
    • \n
  • Go to page
    • \n
  • Previous
    • \n
  • 1,
    • \n
  • 2,
    • \n
  • 3,
    • \n
  • 4
    • \n
  • Next
    • \n
\n\n
    \n
  • New posts
    • \n
  • No new posts
    • \n
  • Topic is locked
    • \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. ::
    3. \n
  3. Community
    4. \n
  4. ::
    5. \n
  5. Plot and structure
    6. \n
  6. ::
    7. \n
  7. Keeping a timeline straight across four narrators
    8. \n
\n\n
\n
\n

Keeping a timeline straight across four narrators

\n

Started by tessellate on 11 Jun 2005. 63 replies, 2,417 views. New

\n
\n
Post reply
\n
\n\n
\n
Posted 11 Jun 2005 09:14Post 1 of 64
\n
\n tessellate\n Workshop host\n Posts: 2,318\n Joined: Mar 2003\n
\n
\n

The novel has four narrators and covers eleven days. Each of them tells some of the same hours, and by the third draft I had two people eating breakfast in different towns on the same morning.

\n

I have tried index cards, a wall chart and a spreadsheet. The cards get shuffled, the chart does not travel, and the spreadsheet tells me day 6, 14:00 without telling me who knows what by then. What do the rest of you actually use?

\n

Draft four. Do not ask.

\n
\n
\n Profile | Private message\n Quote | Edit | Delete | Report\n
\n
\n\n
\n
Posted 11 Jun 2005 10:02Post 2 of 64
\n
\n oldharbour\n Moderator\n Posts: 7,540\n Joined: Jan 2002\n
\n
\n
tessellate wrote: The spreadsheet tells me day 6, 14:00 without telling me who knows what by then.
\n

Then the clock is not your problem; knowledge is. Keep the spreadsheet for the hours, and add one column per narrator that holds a single sentence: what this person believes at this moment. Read down a column and you have that narrator's whole arc.

\n

It is tedious for a week. After that you will catch every contradiction before a reader does.

\n

Critique the writing, never the writer.

\n
\n
\n Profile | Private message\n Quote | Edit | Delete | Report\n
\n
\n\n
\n
Posted 12 Jun 2005 15:52Post 64 of 64
\n
\n redpencil\n Member\n Posts: 204\n Joined: Nov 2004\n
\n
\n

Late to this, but the one thing that worked for me was drawing the eleven days as a single line on a roll of lining paper and giving each narrator a coloured pencil. Where two colours cross, both of them were in the room.

\n

It fits in a drawer, which a wall chart does not. Number the days in pen before you start.

\n
\n
\n Profile | Private message\n Quote | Edit | Delete | Report\n
\n
\n\n
\n
\n

Confirm

\n
\n

Are you sure you want to delete post 64 by redpencil? This cannot be undone.

\n
\n Yes\n No\n
\n
\n
\n
\n\n
\n
\n Post reply\n Watch this topic\n \n Delete topic\n
\n \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. ::
    3. \n
  3. Community
    4. \n
  4. ::
    5. \n
  5. Plot and structure
    6. \n
  6. ::
    7. \n
  7. Post a new topic
    8. \n
\n\n
\n
\n

Post a new topic

\n

In the forum Plot and structure. Posting as calloway.

\n
\n
House rules
\n
\n\n
\n Your topic was not posted. You cannot make another post so soon after your last; please try again in a short while.\n
\n\n
\n

Post a new topic

\n
\n \n
\n
\n
\n \n
\n \n Enter the word count as a number.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n Preview\n \n Cancel\n
\n
\n\n
\n

Before you submit

\n
\n

Say what stage the piece is at and what kind of reading you want. The house rules for critique ask for two critiques given for every one requested; your ledger is on your desk.

\n

A similar topic may already be open: Keeping a timeline straight across four narrators, Where should the midpoint reversal fall?

\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. ::
    3. \n
  3. Community
    4. \n
  4. ::
    5. \n
  5. My desk
    6. \n
\n\n
\n
\n

My desk

\n

Signed in as calloway. Member since April 2004. You last visited on 11 Jun 2005 22:05.

\n
\n
New private message
\n
\n\n
\n\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Topics you watchRepliesLast post
Keeping a timeline straight across four narrators New\n in Plot and structure6312 Jun 2005 15:52 redpencil
Critique swap: three short poems Pinned\n in Poetry desk1712 Jun 2005 13:20 marlow_p
Where should the midpoint reversal fall? Answered\n in Plot and structure2111 Jun 2005 21:14 oldharbour
First rejection letter, and what I learned from it\n in Submissions2911 Jun 2005 17:41 fenwick_j
Dialogue tags: said, and nothing but said?\n in Style and grammar11209 Jun 2005 23:05 verity_s
\n\n
\n

Private messages

\n
\n

Your inbox is empty. Messages from other members will be listed here.

\n Write a message\n
\n
\n\n
\n\n \n\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. ::
    3. \n
  3. Help
    4. \n
  4. ::
    5. \n
  5. House rules for critique
    6. \n
\n\n
\n
\n

Help and house rules

\n

How the circle works and what the moderators expect. Last revised 03 Jan 2005.

\n
\n
Ask a moderator
\n
\n\n
\n\n
\n\n
\n

House rules for critique

\n

The circle works because people give as much as they ask for. Critique the writing, never the writer. Everything else follows from that.

\n

Before you post an excerpt

\n

Say what stage the piece is at and what kind of reading you want. A first draft and a final proof need very different eyes.

\n
    \n
  • Give two critiques for every one you ask for.
    • \n
  • Keep excerpts under 2,000 words; link to the rest.
    • \n
  • Mark quoted passages with [quote] so replies stay readable.
    • \n
\n

When you give a critique

\n

Start with what the piece is trying to do, then say where it does and does not get there. Point at lines. A critique the writer can act on is worth ten that only say whether you liked it.

\n
\n

Copyright

\n

Whatever you post remains yours. Do not post work that is not.

\n

Moderation

\n

Moderators may move a topic to the right forum or lock one that has run its course. Disagree by private message, not in the topic.

\n
\n\n
\n

See also

\n
\n

Board code reference | A plain guide to manuscript format | Setting your signature | Critique groups | Back to the community

\n

Still unsure? Ask in the forums and a moderator will answer.

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

This data is based on users active over the past five minutes. All times are GMT.

\n\n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.forum.s03.p03.t03.u03\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-3333\",\n \"short\": \"v1-bb-3333\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #efefef;\n --color-surface-alt: #dee3e7;\n --color-surface-strong: #d1d7dc;\n --color-bar: #006699;\n --color-bar-text: #ffa34f;\n --color-bar-alt: #98aab1;\n --color-bar-alt-text: #000000;\n --color-inverse: #006699;\n --color-inverse-text: #e8eef2;\n --color-text: #000000;\n --color-text-muted: #444444;\n --color-heading: #006699;\n --color-heading-alt: #333333;\n --color-link: #006699;\n --color-link-quiet: #006699;\n --color-link-visited: #4691b6;\n --color-link-hover: #333333;\n --color-link-active: #000000;\n --color-border: #98aab1;\n --color-border-strong: #006699;\n --color-border-muted: #d1d7dc;\n --color-accent: #006699;\n --color-accent-text: #ffffff;\n --color-accent-alt: #006600;\n --color-fill-1: #efefef;\n --color-fill-2: #d1d7dc;\n --color-fill-3: #dee3e7;\n --color-fill-4: #e8eef2;\n --color-button: #006699;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffa34f;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #98aab1;\n --color-disabled: #e5e5e5;\n --color-disabled-text: #98aab1;\n --color-danger: #c60202;\n --color-danger-surface: #fddbcc;\n --color-success: #006600;\n --color-warning: #ffa34f;\n --color-notice: #e8eef2;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #d1d7dc;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Helvetica, sans-serif;\n --font-heading: Verdana, Helvetica, sans-serif;\n --font-ui: Tahoma, Verdana, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 18px;\n --text-h1: 18px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: uppercase;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\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: 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-border-strong);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 18%);\n --fill-button-secondary: color-mix(in srgb, var(--color-button-secondary), var(--color-surface-strong) 50%);\n --fill-input: color-mix(in srgb, var(--color-input), var(--color-surface) 50%);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }