{ "id": "v1-po-4353", "long_id": "v1.portals-2000s.portal.s04.p03.t05.u03", "name": "Directory hub, 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": false }, "summary": "A search and directory front page of the kind search engines, auction sites and Internet providers ran between 2000 and 2004: a narrow sheet centred in the window, with a row of outlined buttons for navigation, one full-width band of colour holding the search box, and below it a stack of symmetrical bands cut into equal columns of links. There is no sidebar and no rail on the home page; boxes are outlined in the accent colour under solid title strips, links are underlined default blue and text is 13px Arial with 10px small print. It gave way from about 2005 to wider pages with gradients, rounded corners and large photographs.", "url": "https://chrono.skin/s/v1-po-4353", "preview_url": "https://chrono.skin/s/v1-po-4353/specimen.html", "files": { "STYLE.md": "# Directory hub, 2000 to 2004\n\n## Summary\n\nA search and directory front page of the kind search engines, auction sites and Internet providers ran between 2000 and 2004: a narrow sheet centred in the window, with a row of outlined buttons for navigation, one full-width band of colour holding the search box, and below it a stack of symmetrical bands cut into equal columns of links. There is no sidebar and no rail on the home page; boxes are outlined in the accent colour under solid title strips, links are underlined default blue and text is 13px Arial with 10px small print. It gave way from about 2005 to wider pages with gradients, rounded corners and large photographs.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 760px; `.ds-page__frame` is a sheet of that width centred in the window (`margin: 0 auto`), padded `--space-4` (8px), and `--color-page` shows equally on both sides. Never pin it to the left edge and never stretch it. `.ds-page` pads the window by `--space-4`.\n- Order from the top on the home page: `.ds-nav`, the `.ds-hero` search band, a split band, the `.ds-promo` strip, the directory band, a band of two halves, the `.ds-grid` band, a `.ds-page__divider` rule, `.ds-footer`. Every band is a `.ds-page__band` and sits `--space-5` (12px) below the last.\n- Navigation is at the top and has no coloured bar. `.ds-nav` puts the `.ds-brand` at the left and `.ds-nav__side` at the right: a line of small `.ds-nav__utility` links over `.ds-nav__links`, a row of outlined buttons, the current one filled with `--fill-bar`.\n- Bands are cut into equal or near-equal columns, never into a main column and a side column that run the height of the page. `.ds-page__band--split` is the services matrix beside one `--size-side` (230px) box; `.ds-directory` is three equal columns; `.ds-page__band--halves` is two equal boxes that end level; `.ds-grid` is four equal cells. Headings of bands are `.ds-section` strips across the full sheet.\n- Text in the search band, the stat strip, the grid titles, the pagination and the footer is centred on the sheet's axis; everything else is set left.\n- Inner pages keep the sheet, the header (closed by a double rule in place of the search band; `.ds-nav--inner` gives a header that rule) and the footer, and have no search band and no bands of equal columns. `.ds-breadcrumb` is a plain line under the header rule. Below it `.ds-page__columns` has two columns: `--size-sidebar` (180px) holding the `.ds-sidebar` link box on the left, and `.ds-page__main` on the right, whose blocks are `--space-5` apart. The main column opens with `.ds-page-header` in place of the hero, then the `.ds-stat` strip, then `.ds-tabs` standing on the `.ds-table` they switch with its caption and `.ds-pagination`, then the `.ds-form` under a `.ds-section` strip and any `.ds-notice`. The left column may stack a small `.ds-panel` under the `.ds-sidebar` (wrap both in `.ds-page__main`) so it does not end far above the work. A list of items stands under its tabs as `.ds-list--boxed`. An item or article page puts a `.ds-section` strip and the `.ds-prose` text, 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 search and directory front page of stacked bands. `browse` is a category: page header, tabs on a boxed list of items, pagination. `item` is one item: its description as article text, the bid row with its links, and the table of latest bids. `listings` is the seller's page: page header, stat strip, tabs on the table, the buttons for one listing, the message box that ends it and the empty unsold block. `sell` is the form page: page header, notices, the form and a line of selling tips. Every inner view is a breadcrumb over one `.ds-page__columns`. The header buttons mark Browse for `browse` and `item` and Sell for `listings` and `sell`.\n- Spacing scale: `--space-1` 1px is the vertical padding inside buttons, inputs and sidebar rows; `--space-2` 2px is the vertical padding of title strips, header buttons, tabs and table heads and the gap between header buttons; `--space-3` 4px is the vertical padding of section strips, table cells, list items, notices and stat cells; `--space-4` 8px is the side padding of every strip, cell and box, the sheet padding and the gap between grid cells and between buttons; `--space-5` 12px is the gap between bands, between columns and between paragraphs; `--space-6` 20px is the gutter of the directory columns, list indent and the space above the footer rule and the inner header. There is no larger step.\n- Fixed sizes: `--size-logo` 28px the brand tile; `--size-search` 300px the search input; `--size-label` 110px the label column of the services matrix and of forms; `--size-field` 220px a form input; `--size-area` a textarea; `--size-dialog` 320px a message box.\n- Boxes are separated by a 1px outline in `--color-border` and a solid title strip; rows inside a box by a 1px rule in `--color-border-muted`. Colour blocks are few: the search band, the promo strip, the section strips and the four grid cells.\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-body` is Arial for text, the hero headline, article h1 and stat figures. `--font-heading` is Verdana for the wordmark, page titles and every strip and box title, which are set in capitals (`--heading-transform: uppercase`). `--font-ui` is Tahoma for the menu, bars, tabs, buttons, inputs, table heads and figures, and all 10px text. `--font-mono` is Courier for code.\n- `--text-base` 11px is body text, table cells and rail text. `--text-small` and `--text-ui` are 10px: strips, titles of boxes, menu rows, tabs, buttons, meta lines, captions, breadcrumb and footer. `--text-large` 13px is the hero text and an article's lead paragraph. `--text-h3` 11px, `--text-h2` 13px (grid cell titles, the title of the dark box, article h2), `--text-h1` 20px (page title, stat figures), `--text-display` 24px (wordmark, hero headline, article h1). The hero headline and the article h1 are not capitalised: they take `--font-body` and `--display-tracking` and ignore `--heading-transform`.\n- `--line-body` 1.45 (16px lines for 11px text); `--line-heading` 1.2; `--line-display` 1.05. Buttons and bar labels are bold (`--weight-ui` 700). Nothing is tracked.\n- Links in text are underlined (`--link-decoration`) and lose the underline when hovered (`--link-decoration-hover: none`); menu, sidebar, breadcrumb and table team links are quiet (`--link-decoration-quiet` none).\n- `--color-page` #d0d0d0 (grey) shows on both sides of the sheet; `--color-canvas` and `--color-surface` are #ffffff. `--color-surface-alt` #f0f0e8 (stone) fills the scoreboard cells, breadcrumb, alternate table rows, form label column, button row, sidebar box and empty state. `--color-surface-strong` #d3d3d3 is the tab strip, sidebar and quiet panel titles and picture slots, whose placeholder drawing is `--color-text-muted`.\n- `--color-bar` #cc0000 with `--color-bar-text` white is the masthead, panel and dialog titles, the rule under a page header and above the open tab. `--color-bar-alt` #636363 with `--color-bar-alt-text` #dddebf (khaki) is the strip under the masthead, menu group titles, section strips, table heads and the footer strip. Text on a bar is always that bar's text token, links included.\n- `--color-inverse` #000000 with `--color-inverse-text` #dddebf is the menu column and the one dark rail box (`.ds-panel--inverse`); a link or title on the dark box takes `--color-accent`, and the open menu row is filled with `--fill-accent` and set in `--color-accent-text`.\n- `--color-text` and `--color-heading` #000000; `--color-text-muted` #636363 for meta lines, captions and labels of figures; `--color-heading-alt` #990000 for article h3.\n- `--color-link` #000099, `--color-link-quiet` #000000, visited #7d7d7d, hover #cc0000, active #990000. `--color-accent` #edc508 with black text is the badge, the section marker, the open menu row and the current page number; `--color-accent-alt` #cc0000 is the status line of a score cell, promoted links and bare \"updated\" marks.\n- `--color-fill-1` #dddebf, `--color-fill-2` #f0f0e8, `--color-fill-3` #e8e8e8, `--color-fill-4` #d3d3d3 tint the four grid cells; `--color-fill-1` is also the stat band. Text on a fill is `--color-text`, `--color-heading` or a link colour.\n- `--color-border` #b0b090 outlines boxes and rules the scoreboard; `--color-border-strong` #000000 outlines pictures, the dialog and the current page number and is the left edge of a notice; `--color-border-muted` #e8e8e8 rules rows.\n- `--color-button` #d3d3d3 with black label, `--color-button-hover-text` #990000; secondary #f0f0e8. `--color-danger` #cc0000 on `--color-danger-surface` #ffffe8; `--color-success` #336633 and `--color-warning` #edc508 fill status labels and `--color-success` and `--color-danger` colour rising and falling figures. `--color-notice` #f0f0e8.\n- Surface: `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the bar colour crossed by 1px scan lines (every second pixel row slightly darker, or lighter on the dark block), the look of broadcast graphics of the period; `--fill-button` is two flat bands, the upper half lighter, reversed on hover. `--shadow-text` is a hard 1px offset under text on the primary bar; `--shadow-dialog` is a hard 4px offset block; a pressed button has a 1px inner edge. No blur anywhere, no rounding, `--border-width` 1px and `--border-width-strong` 2px, solid.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs, italic for the wordmark, `underline` on hovered bar links, `color-mix()` of `--color-inverse-text` with `transparent` for the rules between menu rows and of `--color-overlay` with `transparent` for the band behind a dialog, and `calc()` sums of spacing steps for bullet indents and the form action offset.\n- Capitals in the references were typed or drawn; here they come from `--heading-transform`. Verdana and Tahoma stand in for the references' lettered images.\n\n## Components\n\n- `.ds-page` on ``: page fill, 8px margin and base type. Wrap everything in `.ds-page__frame`. `.ds-page__band` is one band of the home page, with `--split` and `--halves` for its column cuts. `.ds-page__columns` is the inner page's two columns; `.ds-page__main` is a stack of blocks `--space-5` apart, used for each of them and for a half of a band. `.ds-page__divider` is the 2px rule above the footer and `.ds-page__legal` the centred 10px small print. `.ds-block` groups a section strip with what it heads.\n- `.ds-brand`: the site's mark and name, at the left of the header and a link to the home page; one carries the marker, the inner header repeats it. `.ds-brand__mark` is a `--size-logo` (28px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, the 3px 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 18px bold wordmark in `--font-heading` with the heading tracking and transform, in `--color-heading` because the header sits on the sheet. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-brand` on the left; `.ds-nav__side` on the right holds `.ds-nav__utility` (10px bold links in `.ds-nav__utility-item`, divided by 1px bars) and `.ds-nav__links`, a row of `.ds-nav__link` buttons: 16px bold, outlined in `--color-border-strong`, the one with `is-current` filled with `--fill-bar` (in the specimen `:has()` rules, one per view, fill the button of the open view). `.ds-nav--inner` is the header of an inner page with a rule under it.\n- `.ds-hero`: the search band, once, on the home page only. `.ds-hero__form` centres the `.ds-hero__title` prompt (16px bold, wrapping the input's label), a `.ds-form__input` with `.ds-hero__input` and one `.ds-button`; `.ds-hero__text` is the line of lead text under it with `.ds-hero__link` links. No picture, no headline larger than 16px.\n- `.ds-services`: the matrix of `.ds-services__row` entries: a bold `.ds-services__label` (`--new` turns it red) and a `.ds-services__links` list of `.ds-services__item` links divided by 1px bars.\n- `.ds-promo`: the inverted welcome strip, at most one per page: `.ds-promo__title`, `.ds-promo__text` and `.ds-promo__actions` with links and one button.\n- `.ds-section`: the tinted strip that heads a band or a block: `.ds-section__title` (13px bold, with an optional regular-weight `.ds-section__note`) and a small `.ds-section__more` link at the right.\n- `.ds-directory`: three equal columns of categories; each item is a bold `.ds-directory__title` link over a 10px `.ds-directory__subs` line of sub-links. No fills, no boxes.\n- `.ds-page-header`: head of an inner page, first in the main column: `.ds-page-header__title` (18px bold, the page's h1), one line of `.ds-page-header__text`, and `.ds-page-header__action` at the right with one button, closed by a double rule in `--color-border-strong`.\n- `.ds-stat`: the row of summary figures, one outlined strip on `--color-surface-alt`; each `.ds-stat__item` is a centred cell with a 16px bold `.ds-stat__value` over a 10px `.ds-stat__label`, divided from the next by a 1px rule.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` is the bold first paragraph and `.ds-prose__byline` the 10px credit.\n- `.ds-link`: underlined blue link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` takes the quiet link tokens; `.ds-link--hot` is a promoted entry in `--color-accent-alt`. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled button, bold, for the main action. `.ds-button--secondary` is regular weight on the secondary fill. `.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`: outlined tinted box of `.ds-form__row` pairs: a right-aligned bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small`, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` line marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` is the button row under the controls.\n- `.ds-table`: `th` on `--fill-bar`, rows alternating the two surfaces and ruled in `--color-border-muted`, `.ds-table__num` right-aligned for figures. `.ds-table__caption` is the 10px line under it.\n- `.ds-tabs`: outlined `.ds-tabs__tab` links standing on a 2px rule in the bar colour; `is-current` is filled with `--fill-bar`. Place directly on the table or list it switches.\n- `.ds-list`: story list: each `.ds-list__item` has a bold `.ds-list__title` link, a `.ds-list__text` line and a 10px `.ds-list__meta` line, with a 1px rule between items.\n- `.ds-panel`: outlined box: `.ds-panel__title` strip over `.ds-panel__body` (helpers `.ds-panel__text`, `.ds-panel__small`) and an optional centred `.ds-panel__foot` line of links pinned to the bottom. `.ds-panel--alt` takes the secondary bar for its title. A table may sit in a panel in place of the body.\n- `.ds-grid`: four equal `.ds-grid__cell` blocks across the sheet, tinted with `--1`, `--2`, `--3` or the base fill; each has a centred bold `.ds-grid__title` over a bulleted `.ds-grid__list` of links.\n- `.ds-badge`: square 10px bold label on the accent (\"NEW\"). `.ds-badge--alt` is bare red text; `.ds-badge--count` a grey count. Status labels keep the block and change the fill: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`.\n- `.ds-sidebar`: inner pages only. One outlined tinted box in the left column repeating `.ds-sidebar__title` strips over `.ds-sidebar__list`; a `.ds-sidebar__item` is a bold link and `.ds-sidebar__item--sub` a 10px line of sub-links under it.\n- `.ds-notice`: outlined one-line message beginning with a bold `.ds-notice__title`; `.ds-notice--error` uses the danger colour for text and border. Stack in `.ds-notices`.\n- `.ds-pagination`: centred line of bold links; the current page is a `.ds-pagination__current` block on the accent.\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 thing in the view: a plain 13px line of links with `.ds-breadcrumb__sep` (`>`) ending in bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: the era's message box in the page flow: a `--size-dialog` box with a double outline in `--color-border-strong`, a `.ds-dialog__title` strip, `.ds-dialog__body` with `.ds-dialog__text` and centred `.ds-dialog__actions`, standing on the flat `.ds-dialog__backdrop` with its hard block shadow. No blur, no rounding.\n- `.ds-empty`: outlined box with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: centred `.ds-footer__bar` rows of `.ds-footer__item` links divided by 1px bars, then `.ds-page__legal`. No fill.\n- `.ds-menu`: a jump menu, the period's drop-down: a `.ds-menu__label`, a select (`.ds-form__input ds-menu__select`) of destinations and a Go button. Use it where a long list of sections would not fit as links.\n- `.ds-tooltip`: a help hint beside a field: `.ds-tooltip__trigger` is a boxed question mark, `.ds-tooltip__text` shows under it on hover or focus. Everywhere else use the browser's own `title`.\n- `.ds-avatar`: a member's small square picture, drawn as initials; use it beside a member name, sparingly.\n\n## Never\n\n- `row-gap <= 8px`: table and list rows touch.\n- `block-gap <= 20px`: bands sit 12px apart; only the footer rule stands 20px off.\n- `content-width <= 760px`: the sheet is fixed at 760px on a 1024px screen and does not stretch.\n- `palette-colours <= 16`: navy, periwinkle, mid blue, stone and four pale tints; no further hue.\n- `font-size <= 24px`: the largest text is one 24px headline.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 4`: Arial, Verdana for titles, Tahoma for the interface and a monospace for code.\n- `line-height <= 1.6`: text runs on 16px lines; it is never opened further.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 15%`: capitals are for strip, box and page titles only, never for body text or links.\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 home page band is a `.ds-page__band` headed by a `.ds-section` strip and cut into two, three or four equal columns; do not add a column that runs beside several bands. A new box copies `.ds-panel` (1px outline in `--color-border`, solid title strip, body padded `--space-4`); a new row of links copies `.ds-services__links` or `.ds-footer__bar` with 1px bar dividers; a new inner page copies one of the specimen's inner views (rule under the header, breadcrumb, `.ds-sidebar` box, `.ds-page-header`, blocks under section strips); a new control copies `.ds-button` or `.ds-form__input` with its 2px bevel. 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 text at 10px, 13px, 16px or 18px, corners square and fills flat, links underlined, and the sheet centred.\n", "components.css": "/* Layout tokens (structure part). A narrow sheet centred in the window and\n built as a stack of full-width bands cut into equal columns; widths and\n gaps are the references' own. */\n:root {\n --size-page: 760px;\n --size-side: 230px;\n --size-sidebar: 180px;\n --size-logo: 28px;\n --size-search: 300px;\n --size-label: 110px;\n --size-field: 220px;\n --size-area: 6em;\n --size-dialog: 320px;\n --size-thumb: 48px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 8px;\n --space-5: 12px;\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: fixed width, centred in the window on both sides. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n max-width: 100%;\n margin: 0 auto;\n padding: var(--space-4);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n/* Bands are stacked with one gap; a band is cut into equal columns. */\n.ds-page__band {\n margin: var(--space-5) 0 0;\n}\n.ds-page__band--split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-page__band--halves {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n/* Inner page: a boxed link column on the left, the work on the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n margin: var(--space-4) 0 0;\n}\n.ds-page__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__divider {\n height: 0;\n margin: var(--space-6) 0 0;\n border: 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-page__legal {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text);\n text-align: center;\n}\n.ds-block {\n display: block;\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/* A promoted entry inside a list of links. */\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-5);\n margin: 0;\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- brand ---------- */\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-logo);\n height: var(--size-logo);\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\n/* ---------- nav ---------- */\n/* Brand on the left; on the right a line of small links over a row of\n outlined buttons. No coloured bar: the search band below is the colour. */\n.ds-nav {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n}\n/* The header of an inner page is closed by a rule; on the home page the\n search band closes it. */\n.ds-nav--inner,\n.ds-page:has(.ds-view:not(.ds-view--home):target) .ds-nav {\n padding-bottom: var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n.ds-nav__side {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-nav__utility {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__utility-item,\n.ds-footer__item,\n.ds-services__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-text);\n}\n.ds-nav__utility-item:first-child,\n.ds-footer__item:first-child,\n.ds-services__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__utility-item:last-child {\n padding-right: 0;\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n text-decoration: none;\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(#browse:target) .ds-nav__link[href=\"#browse\"],\n.ds-page:has(#item:target) .ds-nav__link[href=\"#browse\"],\n.ds-page:has(#listings:target) .ds-nav__link[href=\"#listings\"],\n.ds-page:has(#sell:target) .ds-nav__link[href=\"#listings\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- hero ---------- */\n/* The search band: the page's one full-width block of colour. */\n.ds-hero {\n margin: var(--space-4) 0 0;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-hero__form {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__input {\n width: var(--size-search);\n max-width: 100%;\n}\n.ds-hero__text {\n margin: var(--space-3) 0 0;\n font-size: var(--text-base);\n}\n.ds-hero__link,\n.ds-hero__link:visited {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* ---------- services ---------- */\n/* Rows of a bold label and a run of links, the matrix under the search. */\n.ds-services {\n margin: 0;\n padding: 0;\n}\n.ds-services__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-2) 0;\n}\n.ds-services__label {\n margin: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-services__label--new {\n color: var(--color-accent-alt);\n}\n.ds-services__links {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- promo ---------- */\n/* The inverted welcome strip, once per page. */\n.ds-promo {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n margin: var(--space-5) 0 0;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-promo__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-promo__text {\n margin: 0;\n}\n.ds-promo__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-promo .ds-link,\n.ds-promo .ds-link:visited,\n.ds-promo .ds-link.is-visited {\n color: var(--color-accent);\n}\n\n/* ---------- section ---------- */\n/* A tinted strip with a bold label that opens a band. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-section__title {\n margin: 0;\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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-section__note {\n font-weight: var(--weight-body);\n}\n.ds-section__more {\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- directory ---------- */\n/* Three equal columns of categories, each a bold link over a small line of\n sub-links. */\n.ds-directory {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n column-gap: var(--space-6);\n row-gap: var(--space-5);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n}\n.ds-directory__title {\n display: block;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-directory__subs {\n display: block;\n font-size: var(--text-small);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n 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/* One outlined strip cut into equal cells by rules. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: 0 var(--space-4);\n}\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 var(--space-6);\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-weight: var(--weight-bold);\n}\n.ds-prose__byline {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n/* The browser button of the period: a 2px outset bevel. */\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-ui);\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.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-body);\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 padding: var(--space-4) 0 0;\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-3) 0;\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-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 font-weight: var(--weight-body);\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: calc(var(--size-label) + var(--space-6));\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}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-3) 0 0 calc(var(--size-label) + var(--space-4));\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-align: left;\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n/* Outlined tabs standing on a rule, like the header buttons. */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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-2) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n text-decoration: none;\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 background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n}\n/* A list standing under tabs on an inner page: outlined like a box. */\n.ds-list--boxed {\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__text {\n display: block;\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n/* An outlined box under a solid title strip. */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n 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--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\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__small {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__foot {\n margin: auto 0 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n\n/* ---------- sidebar ---------- */\n/* The inner page's link box: outlined, tinted, with strong title strips. */\n.ds-sidebar {\n background: var(--color-surface-alt);\n color: var(--color-text);\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: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__item--sub {\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n\n/* ---------- grid ---------- */\n/* Four equal cells of tint across the sheet, each a centred bold title\n over a short list. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) var(--space-4);\n background: var(--color-fill-4);\n color: var(--color-text);\n border-radius: var(--radius-page);\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-3);\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 text-align: center;\n}\n.ds-grid__list {\n margin: 0;\n padding: 0 0 0 var(--space-6);\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}\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\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-4);\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-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-3) 0 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n.ds-pagination__current {\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\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/* ---------- dialog ---------- */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\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);\n color: var(--color-text);\n border: var(--border-width-strong) 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 text-shadow: var(--shadow-text);\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: center;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n/* Centred rows of links under a rule, then the small print. */\n.ds-footer {\n display: block;\n padding: var(--space-4) 0;\n text-align: center;\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n row-gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- menu ---------- */\n/* Jump menu: a select of destinations with its Go button. */\n.ds-menu {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-menu__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-menu__select {\n min-width: 0;\n max-width: 100%;\n}\n\n/* ---------- tooltip ---------- */\n/* A help hint behind a boxed question mark, shown on hover or focus. */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n}\n.ds-tooltip__trigger {\n display: inline-block;\n box-sizing: border-box;\n min-width: 2ch;\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 6;\n box-sizing: border-box;\n width: 30ch;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n\n/* ---------- avatar ---------- */\n/* A member's square picture: initials on the strong surface. */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: calc(var(--space-6) * 2);\n height: calc(var(--space-6) * 2);\n margin-right: var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n vertical-align: middle;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: directory hub, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n \n \n chronoskin\n \n
\n \n \n
\n
\n\n
\n
\n
\n

\n \n \n
\n

Search 2,140,000 listings and 310,000 Web sites, or try advanced search. Popular now: road bikes, ski reports, used cameras

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

New!

\n \n
\n
\n

Shop

\n \n
\n
\n

Find

\n \n
\n
\n

Connect

\n \n
\n
\n

Today

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

My chronoskin

\n
\n

Sign in to see your watch list, your mail and the weather where you live.

\n Sign in\n

New here? Register free

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

Welcome, new users

\n

Three short guides show how to browse, how to bid and how to list your first item.

\n
\n
\n Buying tips\n Selling tips\n List an item\n
\n
\n\n
\n
\n

Web directory - sites and listings sorted by subject

\n Suggest a site\n
\n \n
\n\n
\n
\n

In the news

\n
\n \n
\n

News - Photos - Weather - Scores

\n
\n\n
\n

Ending soon

\n \n \n \n \n \n \n \n \n \n \n \n
ItemBidsPrice
Folding road bike, 21 speed1482.00
Box of 1960s tram tickets36.50
35mm camera with two lenses Hot27119.00
Oak writing desk, collect only945.00
Ski boots, size 9, used once531.00
\n

All featured items - Sell yours

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

More chronoskin

\n Everything, A to Z\n
\n
\n
\n
\n

Guides

\n \n
\n
\n

Small business

\n \n
\n
\n

Money

\n \n
\n
\n

On the move

\n \n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Browse
    4. \n
  4. >
    5. \n
  5. Cameras
    6. \n
\n\n
\n\n
\n \n\n
\n

Sell a camera

\n
\n

Listing is free this weekend for items that start under 10.00.

\n List an item\n
\n
\n
\n\n
\n\n
\n
\n

Cameras

\n

1,284 items on sale, soonest to end first.

\n
\n
\n Sell yours\n
\n
\n\n
\n \n \n \n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Cameras
    4. \n
  4. >
    5. \n
  5. 35mm camera with two lenses
    6. \n
\n\n
\n\n
\n \n\n
\n

The seller

\n
\n

LGlensgrinder (112)

\n

Member since 1999. Feedback score 48, all of it positive.

\n Other items from this seller\n

Posts within two days

\n
\n
\n\n
\n

Safe trading

\n
\n

Read the seller's feedback before you bid, and never pay by a method you cannot trace.

\n Safe trading tips\n
\n
\n\n
\n

Also ending soon

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

Item 4471203 - ends December 5, 8:15pm

\n Back to Cameras\n
\n
\n\n
\n

35mm camera with two lenses

\n

Listed by the seller on November 28 | 27 bids | 1,204 page views

\n

A rangefinder from the late 1950s with its standard and portrait lenses. Everything works.

\n

Description

\n

The shutter was serviced last year and all speeds sound right. The viewfinder is bright, with a little dust in one corner. Current bid 119.00, and the reserve has been met.

\n
    \n
  • Body with 50mm f/2 lens and cap
    • \n
  • 90mm f/4 lens with hood
    • \n
  • Leather case, strap and the original manual
    • \n
\n

Postage and payment

\n

Posted insured for 6.50, or collect in person. Quote item number 4471203 when you pay.

\n
\n\n
\n
\n

Place a bid

\n How bidding works\n
\n
\n \n \n \n
\n

\n Ask the seller a question\n See the larger photographs\n Mail this to a friend\n Report this item\n More cameras\n

\n
\n\n
\n
\n

Latest bids

\n All 27\n
\n \n \n \n \n \n \n \n \n \n \n
BidderWhenBid
lensgrinder (112)Dec 2, 9:41pm119.00
halfframe (37)Dec 2, 9:38pm117.50
lensgrinder (112)Dec 1, 7:02pm105.00
boxbrownie (8)Nov 30, 1:15pm96.00
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Sell
    4. \n
  4. >
    5. \n
  5. My listings
    6. \n
\n\n
\n\n
\n \n\n
\n

Seller help

\n
\n

Stuck on fees, photos or postage? The help desk answers within a day.

\n Ask a question\n

Open 8am to 8pm, every day

\n
\n
\n\n
\n

Latest feedback

\n
\n
    \n
  • \"Well packed and quick to post.\"from halfframe, Dec 1
    • \n
  • \"Exactly as described. Thank you.\"from boxbrownie, Nov 27
    • \n
\n

All 48 comments

\n
\n
\n\n
\n

Fees this month

\n
\n

Six listings at 0.25 and two sales: 3.10 so far.

\n See the statement\n
\n
\n
\n\n
\n\n
\n
\n

My listings

\n

Items you have put up for sale on chronoskin.

\n
\n
\n List an item\n
\n
\n\n
    \n
  • 6Items on sale
    • \n
  • 58Bids this week
    • \n
  • 1,930Page views
    • \n
  • 48Feedback score
    • \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
ItemEndsBidsPriceStatus 
Folding road bike, 21 speedDec 41482.00LiveRevise
Brass desk lampDec 4012.00No bidsRevise
35mm camera with two lensesDec 527119.00Live HOTRevise
Set of six model tramsDec 6218.50RemovedWhy?
Oak writing desk, collect onlyDec 8945.00LiveRevise
\n

Prices and bid counts are refreshed every five minutes.

\n
\n\n
\n
\n

Brass desk lamp - no bids, ends December 4

\n
\n
\n Revise listing\n \n \n \n
\n
\n\n
\n
\n

End this listing?

\n
\n

Ending \"Brass desk lamp\" early removes it from search. The listing fee is not returned.

\n
\n \n Keep it\n
\n
\n
\n
\n\n
\n
\n

Unsold items

\n
\n
\n

You have no unsold items. Anything that ends without a bid waits here for thirty days.

\n List an item\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. My listings
    4. \n
  4. >
    5. \n
  5. List an item
    6. \n
\n\n
\n\n
\n \n\n
\n

Seller help

\n
\n

Stuck on fees, photos or postage? The help desk answers within a day.

\n Ask a question\n

Open 8am to 8pm, every day

\n
\n
\n\n
\n

Before you list

\n
\n
    \n
  • Weigh the parcel first, so the postage you quote is right.step 1
    • \n
  • Check what similar items sold for last month.step 2
    • \n
\n

See sold cameras

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

List an item

\n

Step 1 of 2: describe it. Nothing goes on sale until you confirm.

\n
\n
\n Back to my listings\n
\n
\n\n
\n

Error: Your listing was not saved. Check the starting price below.

\n

Note: Listing is free this weekend for items that start under 10.00.

\n
\n\n
\n
\n

About the item

\n Selling help\n
\n
\n
\n \n
\n
\n
\n \n
\n ?The lowest bid you will accept. Figures only, without a currency sign.\n Please enter the price in figures, such as 10.00.\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

Selling tips

\n
\n
\n

Buyers decide from the title and the first two lines. Say what the thing is, then its maker, size and condition, and leave out exclamation marks: nobody searches for them.

\n
\n
\n\n
\n
\n
\n\n
\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s04.p03.t05.u03\",\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\": false\n },\n \"source\": \"https://chrono.skin/s/v1-po-4353\",\n \"short\": \"v1-po-4353\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #003366;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeee3;\n --color-surface-strong: #989acd;\n --color-bar: #666699;\n --color-bar-text: #ffffff;\n --color-bar-alt: #4d86bc;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #003366;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #666699;\n --color-link: #003366;\n --color-link-quiet: #000000;\n --color-link-visited: #666699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #989acd;\n --color-border-strong: #003366;\n --color-border-muted: #eeeee3;\n --color-accent: #fdfe96;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #f1f0ff;\n --color-fill-2: #e4f7e4;\n --color-fill-3: #fff0e0;\n --color-fill-4: #eeeee3;\n --color-button: #eeeee3;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #003366;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808080;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #808080;\n --color-danger: #cc0000;\n --color-danger-surface: #fff0e0;\n --color-success: #3f8640;\n --color-warning: #fff8c0;\n --color-notice: #fffbee;\n --color-notice-text: #000000;\n --color-focus: #003366;\n --color-shadow: #000000;\n --color-overlay: #eeeee3;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, Geneva, sans-serif;\n --font-heading: Verdana, Arial, Helvetica, Geneva, sans-serif;\n --font-ui: Tahoma, Arial, sans-serif;\n --font-mono: Courier, \"Courier New\", monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: 1.45;\n --line-heading: 1.2;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 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" } }