{ "id": "v1-po-3123-dr", "long_id": "v1.portals-2000s.portal.s03.p01.t02.u03.dr", "name": "Fluid news portal, 2000 to 2004", "era": { "slug": "portals-2000s", "code": "po", "name": "Early-2000s portals", "years": [ 2000, 2004 ], "description": "Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "density": "roomy", "summary": "A full-window news and community front page of the kind technology, hobby and games sites ran between 2000 and 2004: the sheet stretches with the browser, folder tabs stand on a coloured bar for navigation, a dark feature band runs across the top, and below it a wide column of stories sits beside one fixed column of small boxes on the right. Every story opens with its headline on a solid bar, and everything else is a ruled or outlined rectangle set in 10px to 12px Arial with hairline borders. It was replaced from about 2005 by fixed, centred layouts with gradients and rounded corners.", "url": "https://chrono.skin/s/v1-po-3123-dr", "preview_url": "https://chrono.skin/s/v1-po-3123-dr/specimen.html", "files": { "STYLE.md": "# Fluid news portal, 2000 to 2004\n\n## Summary\n\nA full-window news and community front page of the kind technology, hobby and games sites ran between 2000 and 2004: the sheet stretches with the browser, folder tabs stand on a coloured bar for navigation, a dark feature band runs across the top, and below it a wide column of stories sits beside one fixed column of small boxes on the right. Every story opens with its headline on a solid bar, and everything else is a ruled or outlined rectangle set in 10px to 12px Arial with hairline borders. It was replaced from about 2005 by fixed, centred layouts with gradients and rounded corners.\n\n## Layout\n\n- The page is fluid. `.ds-page__frame` has no fixed width: it fills the window inside the `--space-4` (6px) padding of `.ds-page`, where `--color-page` shows as a thin frame, and it never gets narrower than `--size-page` (760px). Do not centre a fixed column and do not cap the width.\n- Order from the top: `.ds-nav`, the `.ds-hero` band, `.ds-page__columns`, `.ds-footer`. Navigation is at the top in three parts: `.ds-nav__masthead` (wordmark on the left, search on the right, on the sheet colour), `.ds-nav__links` (a row of folder tabs, the open one in the bar colour and 3px taller) and directly under it `.ds-nav__sub`, a full-width bar in the same colour carrying a short row of links (those of the open tab on a large site; in the specimen the site's shortcuts) and, at the right, the date.\n- `.ds-page__columns` is two columns: a fluid main column (`.ds-page__main`) on the left and `--size-rail` 200px (`.ds-page__rail`) on the right, `--space-5` (10px) apart and padded `--space-5` from the sheet edge. There is no left column. The rail is a stack of boxes: `.ds-panel` and the boxed menu `.ds-sidebar`.\n- In the main column each block is headed by a `.ds-section` (marker, title, rule), and blocks are `--space-5` apart. Stories are a `.ds-list`; a row of four categories is a `.ds-grid`; a short ruled `.ds-table` of forum topics or figures closes the column.\n- Inner pages keep the masthead, the tabs, the bar under them, both columns and the footer; they have no hero. The main column opens with `.ds-breadcrumb` as a plain line, then `.ds-page-header` (an outlined band with the title, one line of text and the page's button at the right) with the `.ds-stats` line attached under it, then `.ds-tabs` standing on the `.ds-table` it switches, then the `.ds-form` box and further blocks under `.ds-section` headings. The rail holds the section's `.ds-sidebar` menu first. An article page puts a `.ds-section` heading and the article, with its own h1, in place of the page header.\n- Views. The specimen is one example site of five screens, one showing at a time, with the header and footer written once around them. `home` is the front page: hero band, latest notes, the category strip, the forum table and the rail. `notes` is the story list: breadcrumb, page header, the stories and pagination. `note` is one story: the article, related links and comments set as list items. `submissions` is the logged-in page: page header with the stats line, tabs on the table, then the buttons for the returned note, the delete message box and the empty drafts band. `submit` is the form page: page header, notices, the form box and the guidelines. The tabs mark Workshop for `notes` and `note` and My chronoskin for `submissions` and `submit`; the bar under them marks the open view's own link.\n- Spacing scale: `--space-1` 1px is the vertical padding inside buttons and inputs; `--space-2` 2px is the vertical padding of bars, title strips, story headlines and menu rows; `--space-3` 3px is the vertical padding of tabs, table cells, form rows and notices; `--space-4` 6px is the page margin, the side padding of boxes and cells, and the gap between a section heading and its content; `--space-5` 10px is the column gap, the gap between blocks and between stories, and the side padding of bars; `--space-6` 16px is list indent and the padding around a dialog. There is no larger step.\n- Fixed sizes: `--size-figure` 120px by `--size-figure-height` 90px is the hero picture slot; `--size-mark` 26px the brand tile; `--size-search` 160px a search or nickname input; `--size-label` 130px the label column of a form; `--size-field` 240px a form input; `--size-area` a textarea; `--size-dialog` 340px a message box.\n- Things are separated by 1px lines: boxes are outlined, tables are fully ruled, form rows and menu rows are ruled, sections end in a rule. The only solid blocks are the bars, story headlines, the hero band and the tinted grid strip.\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- Olive and khaki on white. `--color-page` #ffffff is the window; `--color-canvas` #faf8e3 is the pale cream sheet that shows in the gutters; panel bodies are `--color-surface` #f5f4db; plain tiles, table cells, the breadcrumb, the stat tile, the sidebar tile and the empty state are `--color-surface-alt` #ebebb4; picture slots, inactive tabs and page-number cells are `--color-surface-strong` #b0b249 with `--color-link-quiet` #333333 text.\n- `--color-bar` #666633 (dark olive) with `--color-bar-text` #ffffff is the navigation strip, panel and dialog titles, table heads, the current tab and the current page number; `--color-bar-alt` #999999 with white text is the service band, the footer strip and alternate panel titles. `--color-inverse` #333333 with `--color-inverse-text` #f5f4db is the one dark block (`.ds-panel--inverse`); links inside it take `--color-accent`.\n- Text is dark grey, not black: `--color-text` and `--color-heading` #333333, `--color-text-muted` #666666 for meta lines and labels, `--color-heading-alt` #666633 for tile titles and h3.\n- `--color-link` #083090 is the only blue and marks links in running text, list titles and the hero's main action; `--color-link-quiet` #333333 is every link inside a tile's link list, the directory, the index and the sidebar; hover #000000, active #cc0000, visited #666666. `--color-accent` #ebebb4 with `--color-accent-text` #333333 is the badge and the current navigation cell; `--color-accent-alt` #083090 marks promoted entries.\n- `--color-fill-1` to `--color-fill-4` (#ebebb4, #edebc6, #f1eed1, #f5f4db) are four steps of the same khaki, not four hues; they tint the search tile and directory (1), the hero body (2), further tiles and the grid cells. Text on a fill is `--color-text`, `--color-heading`, `--color-heading-alt` or a link colour, never the muted colour. Rules are olive (`--color-border` #b0b249); the dialog outline is `--color-border-strong` #666666.\n- Buttons are white (`--color-button` #ffffff, black label) with a `--border-width-strong` outset bevel in `--color-border-muted`; the secondary button is cream #f5f4db. `--color-danger` #cc0000 on `--color-danger-surface` #f8e0d8 is error text, the border of an invalid field and the label of a destructive button; `--color-success` #009933 and `--color-warning` #ffcc00 are badge fills only.\n- `--font-body` and `--font-ui` are Verdana; `--font-heading` is Tahoma, a narrower face, so tile titles stay compact beside wide body text. `--font-mono` is Courier New. One reference set its titles in a commercial narrow grotesque; Tahoma is the stand-in.\n- `--text-base` 11px for body, `--text-small` and `--text-ui` 10px for meta lines, strips, tabs, cells and buttons; `--text-large` 13px for a lead paragraph; `--text-h3` 13px for panel titles and grid titles; `--text-h2` 16px for tile titles, the wordmark and the sidebar title; `--text-h1` and `--text-display` 19px, used once or twice per page (hero title, page title, stat figures).\n- `--ui-transform` is uppercase: the navigation cells, tabs and button labels are small bold capitals (`--weight-ui` 700). Tile titles and headings are not uppercased and nothing is tracked.\n- Links carry no underline (`--link-decoration` none, `--link-decoration-quiet` none) and are told apart by colour and weight; the underline appears on hover (`--link-decoration-hover`). All line heights are `normal`.\n- Fills are flat colour under a fine screen texture, drawn as a pattern and never as a gradient: `--fill-page` lays a 4px dot grid over the page colour, and `--fill-bar`, `--fill-bar-alt`, `--fill-inverse` and `--fill-accent` lay faint 1px scan lines over their colour, so strips, bar titles and the current navigation cell read as lined. Tiles, panels, buttons and inputs are plain colour; a hovered button takes the secondary button fill, and a pressed one gains a 1px inset line (`--shadow-control-pressed`). No radius, no resting shadow, no gradient. `--border-style` is dashed: the rules inside tiles and between list items, the dividers of the stat tile, the panel body outline, notice and dialog outlines are 1px dashed lines. `--focus-ring` is a 1px dashed line in `--color-focus`; `--transition` none.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, and `solid` for the 1px dividers between cells of the navigation strip and link strips (the vocabulary has a single `--border-style`).\n\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page colour, 6px margin and base type. Wrap everything in `.ds-page__frame`. `.ds-page__columns` holds `.ds-page__main` and `.ds-page__rail`. `.ds-page__legal` is the centred 10px copyright line. `.ds-block` groups a section heading with its content 6px apart; `.ds-block--tight` makes its children touch (page header with stats, tabs with table).\n- `.ds-brand`: the site's mark and name, at the left of the masthead and a link to the front page, once per page. `.ds-brand__mark` is a `--size-mark` (26px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, the outset bevel in `--color-border-muted`, `--radius-control` and `--shadow-control`, so every palette and surface set reskins it. The mark is inline SVG with square line caps and a 2.8 stroke. `.ds-brand__name` is the 16px bold wordmark in `--font-heading` with the heading tracking and transform, in `--color-heading` because the masthead sits on the sheet. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: `.ds-nav__masthead` holds `.ds-nav__brand` (the `.ds-brand` over a 10px `.ds-nav__tagline`) and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a button). `.ds-nav__links` is the row of `.ds-nav__link` tabs; `is-current` is the open one (in the specimen `:has()` rules, one per view, mark the tab and the bar link of the open view). `.ds-nav__sub` is the bar under them with `.ds-nav__sub-links` (`.ds-nav__sub-item`, `.ds-nav__sub-link`, `is-current` in the accent colour) and a note at the right.\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the front page); only the view named in the address shows. A real multi-page site does not need it.\n- `.ds-breadcrumb`: inner pages only, the first line of the main column: quiet links, `.ds-breadcrumb__sep` (`>`), bold `.ds-breadcrumb__current`. No strip behind it.\n- `.ds-hero`: the dark band across the sheet under the navigation, front page only. `.ds-hero__lead` holds the `.ds-hero__figure` picture slot, the 16px `.ds-hero__title`, `.ds-hero__text` and one `.ds-button`, the main action; then three `.ds-hero__cell` columns divided by 1px lines, each a bold `.ds-hero__subtitle` link and a `.ds-hero__note`. Links inside take the accent colour.\n- `.ds-section`: heading of a block in the main column: `.ds-section__marker` (a solid 6px block), `.ds-section__title` (13px) and an optional `.ds-section__more` link at the right, over a 1px rule.\n- `.ds-page-header`: head of an inner page: an outlined stone band with `.ds-page-header__title` (16px, the only h1), one line of `.ds-page-header__text`, and `.ds-page-header__action` holding one `.ds-button` at the right.\n- `.ds-stat`: one figure, written as a typed pair: `.ds-stat__label` then the bold `.ds-stat__value`. The row is `.ds-stats`, a tinted line attached under the page header in which figures are divided by 1px bars. Three to five figures; never enlarge the number.\n- `.ds-prose`: article text on the sheet: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the italic first paragraph and `.ds-prose__byline` for the 10px credit.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is black and not underlined until hover; `.ds-link--hot` is the promoted entry. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled button, bold, for the main action. `.ds-button--secondary` is the lighter one. `.ds-button--danger` keeps the bevel and sets the label in `--color-danger`; never fill a button red. `disabled` or `is-disabled` greys it; `is-active` presses the bevel in. Group with `.ds-buttons`. A link that leads to another page and looks like a button is an `` with the same classes.\n- `.ds-form`: an outlined box. `.ds-form__title` is its strip in the second bar colour; each `.ds-form__row` is a ruled row with a right-aligned bold `.ds-form__label` ending in a colon (optional `.ds-form__hint` under it) and a control. Controls take `.ds-form__input` (`--small` 160px, `--auto` for selects, `--area` for textareas); `is-invalid` plus `.ds-form__error` marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the stone button row aligned under the controls.\n- `.ds-table`: a fully ruled table: every cell has a 1px line, `th` in the bar colour, cells white, `.ds-table__num` right-aligned, `is-up` (in `--color-success`) and `is-down` (in `--color-danger`) to colour a change. `.ds-table__caption` is the 10px muted line under it.\n- `.ds-tabs`: outlined folder tabs on a 1px line, directly above the table or box they switch. `.ds-tabs__tab` is stone; `is-current` takes the sheet colour, is 3px taller and breaks the line.\n- `.ds-list`: the story list. Each `.ds-list__item` opens with `.ds-list__title`, the headline as a link on a full-width bar, then a 10px `.ds-list__meta` posting line, the `.ds-list__text` and a bold `.ds-list__tools` line of links in parentheses. Stories are 10px apart. `.ds-list--bullets` is the one-line square-bullet variant for rail boxes, with ordinary underlined links.\n- `.ds-panel`: a box of the rail: `.ds-panel__title` bar over an outlined `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__field` with `.ds-panel__label`, `.ds-panel__option` (poll choice), `.ds-panel__actions`, `.ds-panel__small`. `.ds-panel--alt` is stone with the second bar colour.\n- `.ds-grid`: one outlined strip cut into four `.ds-grid__cell` columns by 1px lines, tinted `--1`, `--2`, `--3` or the base fill; each has a 13px `.ds-grid__title` link and a 10px `.ds-grid__text` line of sub-links. Cells touch.\n- `.ds-sidebar`: the boxed menu of the rail: `.ds-sidebar__title` strip over a `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows, each a quiet link with an optional count or mark at the right; `is-current` makes the open page bold.\n- `.ds-badge`: square 10px bold label on the accent. `.ds-badge--alt` is bare red text; `.ds-badge--count` a muted count in parentheses. Status labels change the fill: `.ds-badge--success` green with white text, `.ds-badge--warning` pale yellow with black text, `.ds-badge--danger` red with white text. One or two words each, in a table's status column.\n- `.ds-notice`: one-line outlined message starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and border. Stack several in `.ds-notices`.\n- `.ds-pagination`: a right-aligned line under a rule at the end of a list: a muted `.ds-pagination__label`, underlined links, and the current page as `.ds-pagination__current` on the accent.\n- `.ds-dialog`: the era's message box, in the page flow: 340px stone box with a 1px dark outline, bar-coloured `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat area it sits on.\n- `.ds-empty`: an outlined stone band with the muted `.ds-empty__text` on the left and one button on the right.\n- `.ds-footer`: a rule across the sheet, then `.ds-footer__bar`, a centred line of `.ds-footer__item` entries holding `.ds-link` links and divided by 1px bars, then `.ds-page__legal`. No bar behind it.\n- `.ds-menu`: on a navigation item that has sub-pages; its `.ds-menu__list` of `.ds-menu__link` entries drops under the item on hover or keyboard focus (`.is-open` shows it statically).\n- `.ds-progress`: a poll result, quota or elapsed-time bar: `.ds-progress__label` above, `.ds-progress__track` holding `.ds-progress__fill` (width by a `--NN` percent class), `.ds-progress__value` at the right.\n- `.ds-accordion`: a list of questions or help topics as `
` with `.ds-accordion__summary` (a plus or minus box before it) and `.ds-accordion__body`. Use it for FAQs and help, not for navigation.\n\n## Never\n\n- `row-gap <= 13px`: table and menu rows touch; stories are 10px apart.\n- `block-gap <= 20px`: blocks sit 10px apart; there is no empty band between sections.\n- `content-width >= 90%`: the sheet fills the window; it is never a narrow centred column.\n- `font-size <= 19px`: the largest text is a 19px title.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 3`: Verdana, Tahoma for headings and a monospace for code.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 12%`: capitals are for navigation cells, tabs and button labels only, never for body text or tile titles.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 1px`: every rule, outline and bevel is a hairline.\n- `box-shadow-blur <= 0px`: the only shadows are 1px outline rings around panels, controls and the dialog; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: fills are flat colour.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail box copies `.ds-panel` (title bar, outlined body padded `--space-4`) or, for a menu, `.ds-sidebar`; a new block of the main column starts with a `.ds-section` heading and puts ruled or outlined content under it; a new kind of story copies a `.ds-list__item` with its headline bar; a new inner page copies the specimen's second page (breadcrumb line, `.ds-page-header` with `.ds-stats`, tabs on a table, a form box); a new link row copies `.ds-nav__sub-links` with 1px bar dividers. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Keep the sheet fluid with the 200px rail on the right, keep text between 10px and 13px apart from one 16px title, and separate things with a 1px line or a bar, never with whitespace, cards, soft shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). A fluid sheet: it fills the window and\n never gets narrower than --size-page. One wide story column, one fixed\n column of boxes on the right. */\n:root {\n --size-page: 760px;\n --size-rail: 200px;\n --size-figure: 120px;\n --size-figure-height: 90px;\n --size-mark: 26px;\n --size-search: 160px;\n --size-label: 130px;\n --size-field: 240px;\n --size-area: 6em;\n --size-dialog: 340px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 4px;\n --space-4: 8px;\n --space-5: 13px;\n --space-6: 20px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-4);\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/* The sheet stretches with the window. */\n.ds-page__frame {\n box-sizing: border-box;\n min-width: var(--size-page);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n}\n.ds-page__main,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-3) var(--space-5) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text);\n text-align: center;\n}\n\n/* ---------- views ---------- */\n/* The specimen is one site of several screens; one view 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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-link--hot,\n.ds-link--hot:visited,\n.ds-link--hot.is-visited {\n color: var(--color-accent-alt);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: var(--space-4) 0;\n}\n\n/* ---------- nav ---------- */\n/* Masthead with the search on its right, then a row of folder tabs standing\n on a bar that carries the links of the open tab. */\n.ds-nav {\n display: block;\n}\n.ds-nav__masthead {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-5);\n}\n.ds-nav__brand {\n display: block;\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n/* The mark sits on a small tile dressed like the primary button. */\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\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-heading);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n display: block;\n margin-top: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__search-label {\n font-weight: var(--weight-bold);\n}\n.ds-nav__links {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-5);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#notes:target) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#note:target) .ds-nav__link[href=\"#notes\"],\n.ds-page:has(#submissions:target) .ds-nav__link[href=\"#submissions\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#submissions\"] {\n padding-top: var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__sub {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__sub-links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n/* Items in a link row are divided by a 1px bar, as typed pipes were. */\n.ds-nav__sub-item,\n.ds-footer__item,\n.ds-stat {\n padding: 0 var(--space-4);\n border-left: var(--border-width) solid currentColor;\n}\n.ds-nav__sub-item:first-child,\n.ds-footer__item:first-child,\n.ds-stat:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__sub-link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__sub-link:hover,\n.ds-nav__sub-link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__sub-link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__sub-link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__sub-link[href=\"#home\"],\n.ds-page:has(#notes:target) .ds-nav__sub-link[href=\"#notes\"],\n.ds-page:has(#note:target) .ds-nav__sub-link[href=\"#note\"],\n.ds-page:has(#submissions:target) .ds-nav__sub-link[href=\"#submissions\"],\n.ds-page:has(#submit:target) .ds-nav__sub-link[href=\"#submit\"] {\n color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- breadcrumb ---------- */\n/* A plain line of text above the page header. */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\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-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero ---------- */\n/* The one inverted block: a band across the whole sheet, the lead feature\n with its picture slot first, then three shorter features in ruled\n columns. */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n margin: var(--space-5) var(--space-5) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__lead {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: var(--space-5);\n}\n.ds-hero__figure {\n flex: none;\n box-sizing: border-box;\n width: var(--size-figure);\n height: var(--size-figure-height);\n background: var(--color-surface-strong);\n color: var(--color-border-strong);\n}\n.ds-hero__title {\n margin: 0;\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__text {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-hero__cell {\n margin: var(--space-5) 0;\n padding: 0 var(--space-5);\n border-left: var(--border-width) solid currentColor;\n}\n.ds-hero__subtitle {\n margin: 0;\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}\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n}\n.ds-hero .ds-link,\n.ds-hero .ds-link:visited,\n.ds-hero .ds-link.is-visited {\n color: var(--color-accent);\n}\n\n/* ---------- section heading ---------- */\n/* A heading on the sheet with a solid marker block and a rule under it. */\n.ds-section {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0;\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section__marker {\n flex: none;\n align-self: stretch;\n width: var(--space-4);\n background: var(--fill-bar);\n}\n.ds-section__title {\n flex: 1 1 auto;\n margin: 0;\n color: var(--color-heading-alt);\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-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__more {\n font-size: var(--text-small);\n}\n.ds-block {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-block--tight {\n gap: 0;\n}\n\n/* ---------- page header ---------- */\n/* Head of an inner page: an outlined band on the alternate surface. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* A typed line of figures: label, then the number in bold, divided by 1px\n bars. */\n.ds-stats {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--color-fill-1);\n}\n.ds-stat__label {\n font-size: var(--text-base);\n}\n.ds-stat__value {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 calc(var(--space-6) + var(--space-4));\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n font-style: italic;\n}\n.ds-prose__byline {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\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-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\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 border-style: inset;\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 background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\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}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n 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/* ---------- form ---------- */\n/* An outlined box with a title strip; one ruled row per field, the label\n right-aligned against its control. */\n.ds-form {\n margin: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding-top: var(--space-2);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__hint {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\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-strong) inset var(--color-input-border);\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 line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\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__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--size-label) + var(--space-5) + var(--space-5));\n background: var(--color-surface-alt);\n}\n\n/* ---------- table ---------- */\n/* A ruled table: every cell carries a 1px line. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table th {\n background: var(--fill-bar);\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 text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n background: var(--color-surface);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.is-up {\n color: var(--color-success);\n}\n.ds-table td.is-down {\n color: var(--color-danger);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n/* Outlined folder tabs on a 1px line; the open tab takes the sheet colour\n and breaks the line. */\n.ds-tabs {\n display: flex;\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) solid var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link-quiet);\n border: var(--border-width) solid var(--color-border-strong);\n border-bottom: 0;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n margin-bottom: calc(-1 * var(--border-width));\n padding-top: var(--space-4);\n padding-bottom: calc(var(--space-3) + var(--border-width));\n background: var(--color-canvas);\n color: var(--color-text);\n}\n\n/* ---------- list ---------- */\n/* Stories: each one opens with its headline on a bar, then a posting line,\n the text and a line of tools. */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__title {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n padding: var(--space-2) 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__tools {\n display: block;\n padding: var(--space-3) 0 0;\n font-weight: var(--weight-bold);\n}\n/* One-line square-bulleted variant for the boxes of the right column. */\n.ds-list--bullets {\n display: block;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n}\n.ds-list--bullets .ds-list__title {\n display: inline;\n padding: 0;\n background: transparent;\n color: var(--color-link);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration);\n text-shadow: none;\n}\n.ds-list--bullets .ds-list__meta {\n display: inline;\n padding: 0;\n}\n\n/* ---------- panel ---------- */\n/* A box of the right column: title bar, outlined body. */\n.ds-panel {\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\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-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__label {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-panel__field {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-panel--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n\n/* ---------- grid ---------- */\n/* One outlined strip cut into four tinted cells by 1px lines. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-fill-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-grid__cell:first-child {\n border-left: 0;\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- sidebar ---------- */\n/* A boxed menu of the right column: title strip, one ruled row per link. */\n.ds-sidebar {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__title {\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-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item:first-child {\n border-top: 0;\n}\n.ds-sidebar__item.is-current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- badge ---------- */\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-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-accent-alt);\n padding: 0;\n}\n.ds-badge--count {\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n padding: 0;\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-bar-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-bar-text);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) 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}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* ---------- pagination ---------- */\n/* A right-aligned line under a rule; the current page sits on the accent. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-3) 0 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n}\n.ds-pagination__label {\n color: var(--color-text-muted);\n}\n.ds-pagination__current {\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface-alt);\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 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-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-empty__text {\n margin: 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n/* Centred link line under a rule; no bar. */\n.ds-footer {\n display: block;\n margin: 0 var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: var(--space-5) 0 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-list__item {\n margin: 0;\n}\n\n/* ---------- menu ---------- */\n/* Drop-down under a navigation item, shown on hover or keyboard focus. */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 5;\n min-width: 18ch;\n margin: 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n font-weight: var(--weight-body);\n text-align: left;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-5);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-hover {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- progress ---------- */\n/* A result or quota bar: label above, an outlined track with the fill in\n the bar colour, the figure at its right end. */\n.ds-progress {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: center;\n margin: 0;\n padding: var(--space-1) 0 var(--space-3);\n}\n.ds-progress__label {\n grid-column: 1 / -1;\n}\n.ds-progress__track {\n display: block;\n box-sizing: border-box;\n height: var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-progress__fill {\n display: block;\n height: 100%;\n background: var(--fill-bar);\n}\n.ds-progress__fill--12 { width: 12%; }\n.ds-progress__fill--26 { width: 26%; }\n.ds-progress__fill--62 { width: 62%; }\n.ds-progress__value {\n min-width: 4ch;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- accordion ---------- */\n/* Questions that open and close, each with a plus or minus box. */\n.ds-accordion {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n list-style: none;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: calc(var(--text-small) + 2 * var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-2) calc(var(--space-2) * 3) no-repeat,\n var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n height: calc(var(--text-small) + 2 * var(--border-width));\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n var(--color-surface);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3) calc(2ch + var(--space-4));\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: fluid news portal, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n Daily notes for people who build things\n
\n
\n \n \n \n
\n
\n \n
\n \n Monday, September 22\n
\n
\n\n
\n
\n
\n \n \n \n
\n

Build of the week: a bench that folds flat

\n

One sheet of plywood, eleven cuts and a pair of hinges. Reader Odile Brandt sends drawings and a cutting list.

\n See the drawings\n
\n
\n
\n

Soldering without tears

\n

Our electronics editor on tips, flux and the joint that will not take.

\n
\n
\n

Which cordless drill?

\n

Nine models drilled, dropped and run flat. Two are worth the money.

\n
\n
\n

The glue myth

\n

Does more clamp pressure make a stronger joint? We broke forty to find out.

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

Latest notes

\n all notes\n
\n \n
\n\n
\n
\n \n

Reader picks this week

\n all picks\n
\n
\n
\n

Hand tools

\n

Planes, Chisels, Saws...

\n
\n
\n

Electronics

\n

Kits, Meters, Components...

\n
\n
\n

Bicycles

\n

Wheels, Frames, Lighting...

\n
\n
\n

Models

\n

Boats, Gliders, Steam...

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

Busy in the forums

\n all forums\n
\n \n \n \n \n \n \n \n \n \n \n
TopicForumRepliesLast post
Bandsaw blade keeps wanderingWoodwork4811:02 by perrin
Show us your shedGeneral31710:47 by wren
Cheapest way to anodise at homeMetalwork2210:31 by hollis
Hub dynamo hums at speedBicycles909:58 by marek
\n
\n\n
\n\n
\n\n
\n

My chronoskin

\n
\n
\n \n \n
\n Log in\n

Create an account

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

chronoskin poll

\n
\n

Where is your workbench?

\n \n \n \n \n
\n \n Results\n
\n

Votes: 2,318

\n
\n
\n\n
\n

Last week's poll

\n
\n

Hand saw or power saw?

\n
Both, it depends62%
\n
Hand saw26%
\n
Power saw12%
\n

Votes: 3,104

\n
\n
\n\n
\n

Older notes

\n
\n \n
\n
\n\n
\n
\n
\n\n
\n
\n
\n\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Workshop
    4. \n
  4. >
    5. \n
  5. All notes
    6. \n
\n\n
\n
\n

Workshop

\n

Every note the editors have run, newest first.

\n
\n
\n Send a new note\n
\n
\n\n
\n \n \n
\n\n
\n\n
\n \n
\n

Older notes

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

Built something?

\n
\n

We run about one note in six. Drawings and a parts list help.

\n Send a note\n

Notes you have sent

\n
\n
\n
\n

This week in numbers

\n
\n

31 notes run, 2,904 comments posted, 118 notes still in the queue.

\n

Counted on Monday at noon

\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Workshop
    4. \n
  4. >
    5. \n
  5. A bench that folds flat
    6. \n
\n\n
\n
\n \n

Woodwork

\n all notes\n
\n
\n

Build of the week: a bench that folds flat

\n

Posted by tamsin on Monday September 22, 12:30 | from the flat-pack desk | 212 comments

\n

One sheet of plywood, eleven cuts and a pair of hinges. Reader Odile Brandt sends drawings and a cutting list.

\n

What you need

\n

The whole bench comes out of one 18mm sheet with a strip left over for the stop. Odile had the timber yard make the three long cuts, which leaves eight for a hand saw.

\n
    \n
  • One sheet of 18mm birch plywood
    • \n
  • Two 100mm steel butt hinges and a folding stay
    • \n
  • Sixteen 40mm screws and a bottle of glue
    • \n
\n

Cutting and hanging

\n

Mark every piece before cutting any of them. The top is hinged to a rail screwed into the wall studs, not into plaster, and the leg frame swings out underneath it.

\n

The drawings

\n

The cutting list is a plain text file; print it with lpr bench.txt or open it in any editor. Dimensions are in millimetres.

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

Related notes

\n
\n

\n Three bench vices under fifty\n Sharpening by numbers\n Which cordless drill?\n The glue myth\n More woodwork\n

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

Comments

\n all 212\n
\n
    \n
  • \n Hinge the leg frame the other way\n by perrin on Monday September 22, 12:58\n If the legs fold towards the wall the stay is not needed at all: the weight of the top holds them shut. I built mine that way in the spring.\n ( Reply to this | 14 replies )\n
    • \n
  • \n Re: plywood grade\n by wren on Monday September 22, 13:21\n Shuttering ply works and costs half as much, but fill the voids along the front edge before you hang it or the vice screws will find them.\n ( Reply to this | 3 replies )\n
    • \n
\n
\n\n
\n\n
\n \n
\n

About the author

\n
\n

Odile Brandt has sent nine notes since 2001. This is her second build of the week.

\n

Her submissions

\n
\n
\n
\n

Older notes

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

Built something?

\n
\n

We run about one note in six. Drawings and a parts list help.

\n Send a note\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. My chronoskin
    4. \n
  4. >
    5. \n
  5. Submissions
    6. \n
\n\n
\n
\n
\n

Submissions

\n

Notes and plans you have sent to the editors. Logged in as odile.

\n
\n
\n Send a new note\n
\n
\n
    \n
  • Sent: 14
    • \n
  • Published: 9
    • \n
  • In the queue: 2
    • \n
  • Comments received: 1,046
    • \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
TitleSectionSentCommentsStatus 
A bench that folds flatWoodworkSep 18212PublishedView
Rewiring a bakelite lampElectronicsSep 1287PublishedView
Truing a wheel with zip tiesBicyclesSep 200In the queueEdit
Is linseed oil worth it?Ask chronoskinSep 30ReturnedEdit
Crystal set in a tobacco tinRadioAug 27340Published PICKView
\n

Returned notes carry a remark from the editor. Notes in the queue are read within two days.

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

Returned: Is linseed oil worth it?

\n
\n
\n Edit and send again\n \n \n \n
\n
\n
\n

Delete submission

\n
\n

Delete \"Is linseed oil worth it?\" for good? The editor's remark will go with it.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n \n

Drafts

\n
\n
\n

You have no drafts. A note you preview but do not send is kept here for a month.

\n Start a note\n
\n
\n\n
\n\n
\n \n
\n

Editor's remark

\n
\n

\"A good question, but we ran one like it in June. Try the forums.\"

\n

On: Is linseed oil worth it?

\n
\n
\n
\n

Your best read

\n
\n

Crystal set in a tobacco tin has been read 18,400 times.

\n

Read the comments

\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Submissions
    4. \n
  4. >
    5. \n
  5. Send a new note
    6. \n
\n\n
\n
\n

Send a new note

\n

Tell the editors what you built. Preview it before it goes.

\n
\n
\n Back to submissions\n
\n
\n\n
\n

Error: Your note was not sent. Correct the link below and preview it again.

\n

Note: The submissions queue is closed on Saturday night while we move servers.

\n
\n\n
\n

Your note

\n
\n \n
\n
\n
\n \n
\n \n That does not look like a complete Web address.\n
\n
\n
\n \n
\n \n
\n
\n
\n Options:\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n\n
\n
\n \n

Guidelines

\n
\n
\n
Why was my note returned?

Usually because we ran the same thing lately. The editor's remark says which note to read.

\n
Can I send photographs?

Send a link to them; the note itself is plain text.

\n
Who owns what I send?

You do. We only ask to publish it here.

\n
\n
\n

We read every note, and we run about one in six. Open with the thing itself and what it does; leave how you came to build it for the second paragraph, or for the comments.

\n
    \n
  • One clear sentence on what it is
    • \n
  • A link to drawings, photographs or source
    • \n
  • What it cost and how long it took
    • \n
\n
\n
\n\n
\n\n
\n \n
\n

In the queue

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

Formatting

\n
\n

Plain text is best. Leave a blank line between paragraphs.

\n

Web addresses become links.

\n
\n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s03.p01.t02.u03.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"portals-2000s\",\n \"years\": [\n 2000,\n 2004\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-po-3123-dr\",\n \"short\": \"v1-po-3123-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #cccccc;\n --color-bar: #006666;\n --color-bar-text: #ffffff;\n --color-bar-alt: #999999;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #4b4b4b;\n --color-inverse-text: #eeeeee;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #006666;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #666699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #cccccc;\n --color-border-strong: #666666;\n --color-border-muted: #dddddd;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #e4f7e4;\n --color-fill-2: #fffbee;\n --color-fill-3: #f1f0ff;\n --color-fill-4: #f0f0f0;\n --color-button: #dddddd;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #eeeeee;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #fffbee;\n --color-success: #009933;\n --color-warning: #e8c26b;\n --color-notice: #feffef;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #e5e5e5;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Arial, Helvetica, sans-serif;\n --font-heading: Tahoma, Arial, Helvetica, sans-serif;\n --font-ui: Verdana, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 19px;\n --text-h1: 19px;\n --text-h2: 16px;\n --text-h3: 13px;\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 --figure-shift: 0em;\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: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 0 1px var(--color-border-strong);\n --shadow-control: 0 0 0 1px var(--color-border-strong);\n --shadow-control-hover: 0 0 0 1px var(--color-focus);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: 0 0 0 1px var(--color-border-strong);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface);\n --fill-button-secondary: var(--color-surface);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }