{ "id": "v1-po-3a8a", "long_id": "v1.portals-2000s.portal.s03.p10.t08.u10", "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 }, "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-3a8a", "preview_url": "https://chrono.skin/s/v1-po-3a8a/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- `--font-heading` (a serif in this style's own type set) is the wordmark, tab labels, page and section titles, prices and figures. `--font-body` is running text and table cells. `--font-ui` is buttons, inputs, the step line, table heads and all 10px small print. `--font-mono` is fare codes. One reference set its headings in a commercial serif; Georgia, then Times New Roman, is the stand-in.\n- `--text-base` 12px is body text; `--text-small` and `--text-ui` 10px are meta lines, captions, buttons and table heads; `--text-large` 13px is the hero text, table prices and large buttons. `--text-h3` 12px is panel and legend titles, `--text-h2` 15px section titles, tab labels, grid titles and list prices, `--text-h1` 21px page titles, the hero title, stat figures, leg times and grid prices, `--text-display` 26px the wordmark and the hero price, set in `--weight-display`.\n- `--line-body` is 1.3; headings are 1.05. Headings are not uppercased and not tracked.\n- `--color-page` shows outside the sheet; `--color-canvas` is the sheet and `--color-surface` the table rows, panels and forms. `--color-surface-alt` fills the search desk, the tab strips, the sidebar, stat cells, alternate list rows and form action rows; `--color-surface-strong` fills resting navigation tabs, table heads, form legends, the dialog title and the current page number. Text on both is `--color-text`, `--color-heading` and `--color-link-quiet` or `--color-link`.\n- `--color-bar` (through `--fill-bar`) with `--color-bar-text` is the top band, the title of the search desk and of panels. `--color-bar-alt` with `--color-bar-alt-text` is the open navigation tab, the step line and the title of `.ds-panel--alt`. `--color-inverse` (through `--fill-inverse`) with `--color-inverse-text` is the price block of the hero and `.ds-panel--inverse`, where links take `--color-accent`.\n- `--color-accent` with `--color-accent-text` is the badge, the number of the current step and the small square markers before section titles and link rows. `--color-accent-alt` is bare emphasis text such as a price drop.\n- `--color-fill-2` tints the hero and the chosen row of a table; `--color-fill-1` the legs of a journey and the first grid cell; `--color-fill-2`, `--color-fill-3` and `--color-fill-4` the other grid cells. Text on a fill is `--color-text`, `--color-link`, `--color-heading` and `--color-heading-alt`.\n- `--color-link` underlined is every link in the work, the sort line included; `--color-link-quiet` is the breadcrumb, resting tab labels and footer links. `--color-heading` is page titles; `--color-heading-alt` is section titles, prices in lists and grid cells, and h2 in articles.\n- `--color-border` is outlines and the rules between table rows; `--color-border-strong` the heavy rules (under the page header and table head, over stat cells and the sidebar, the foot of the sheet) and the outline of buttons, the search desk and the dialog; `--color-border-muted` the rules between list rows.\n- The primary button is `--fill-button` with `--color-button-text`, outlined in `--color-border-strong` with a `--border-width-strong` foot, `--radius-control` and `--shadow-control`. The destructive button is filled with `--color-danger` and lettered in `--color-bar-text`. `--color-success` and `--color-warning` are badge fills only.\n- One-off values built in `components.css` without a token: the square markers are a `linear-gradient()` of `--color-accent` sized `--space-3` or `--space-4`; a transparent top border reserves the height of the current tab's edge; `calc()` sums of spacing steps set a few paddings.\n- Visited, hover, active and focus colours cannot be measured on a static capture; they are colours measured elsewhere in the references assigned to those roles.\n\n- Broadsheet blues on white with one red. `--color-page`, `--color-canvas` and `--color-surface` are #ffffff. `--color-surface-alt` #cfdfef (pale blue) fills sidebars, forms and alternate rows; `--color-surface-strong` #95b7e0 is sidebar title strips and inactive tabs.\n- `--color-bar` #006699 with white text is the link bar, panel titles, table heads and the current tab; `--color-bar-alt` #ff0000 with white text is the dateline strip: utility and footer strips and alternate panel titles. `--color-inverse` #003366 with white text is the one dark block.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #333333; `--color-heading-alt` #004371 for section titles and h3.\n- `--color-link` and `--color-link-quiet` #003366 (dark navy, close to text), visited #336699, hover #cc0000, active #ff0000. `--color-accent` #f6dd42 with black text is the badge, the current navigation item and links on the dark block; `--color-accent-alt` #cc0000 marks promoted entries.\n- Block fills are all cool: `--color-fill-1` #eaeff4, `--color-fill-2` #d0dbe8, `--color-fill-3` #cfdfef, `--color-fill-4` #eeeeee. Rules `--color-border` #6699cc, outlines `--color-border-strong` #003366, faint dividers #dddddd.\n- `--color-button` #dddddd, secondary #eeeeee. `--color-danger` #cc0000 on `--color-danger-surface` #eeeeee. The palette has no green: `--color-success` is the mid blue #336699; `--color-warning` is the yellow #f6dd42. Both are badge fills only.\n\n- Ruled like a broadsheet. `--border-style` is dotted: every 1px rule and outline is a row of dots. `--border-width-strong` 3px: heavy rules are thick dotted lines and controls have a 3px bevel. Every radius is 0 and nothing casts a shadow at rest; a pressed button gains a 1px inset line.\n- No gradients. `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the plain colour underscored along the bottom edge by a light hairline over a dark 2px line, drawn as a pattern; `--fill-page` lays a faint newsprint dither over the page colour; `--fill-panel` is `--color-surface-alt`, so boxes are tinted. A hovered button takes `--color-surface-strong`. `--focus-ring` is 2px solid; `--transition` none.\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 <= 10px`: table and menu rows touch; stories are 10px apart.\n- `block-gap <= 16px`: 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- `palette-colours <= 20`: blues, one red, one yellow and greys; no green, no warm tint.\n- `font-size <= 26px`: the largest text is the 26px wordmark and hero price.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 4`: a serif for titles, two sans-serifs, a monospace for codes.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: nothing is uppercased by CSS.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 3px`: 1px dotted rules, 3px heavy rules and bevels.\n- `box-shadow = none`: nothing casts a shadow.\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: 2px;\n --space-3: 3px;\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-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.p10.t08.u10\",\n \"library\": \"2026.10.09-1346\",\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-3a8a\",\n \"short\": \"v1-po-3a8a\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #cfdfef;\n --color-surface-strong: #95b7e0;\n --color-bar: #006699;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ff0000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #003366;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #333333;\n --color-heading: #000000;\n --color-heading-alt: #004371;\n --color-link: #003366;\n --color-link-quiet: #003366;\n --color-link-visited: #336699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #6699cc;\n --color-border-strong: #003366;\n --color-border-muted: #dddddd;\n --color-accent: #f6dd42;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #eaeff4;\n --color-fill-2: #d0dbe8;\n --color-fill-3: #cfdfef;\n --color-fill-4: #eeeeee;\n --color-button: #dddddd;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #003366;\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: #eeeeee;\n --color-success: #336699;\n --color-warning: #f6dd42;\n --color-notice: #eaeff4;\n --color-notice-text: #000000;\n --color-focus: #003366;\n --color-shadow: #000000;\n --color-overlay: #d0dbe8;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Geneva, Helvetica, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Geneva, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 26px;\n --text-h1: 21px;\n --text-h2: 15px;\n --text-h3: 12px;\n --line-body: 1.3;\n --line-heading: 1.05;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 0 0 1px var(--color-shadow);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.12'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white' fill-opacity='.14'/%3E%3C/svg%3E\");\n --fill-bar: var(--color-bar) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-bar-alt: var(--color-bar-alt) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-inverse: var(--color-inverse) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface-strong);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }