{ "id": "v1-po-4344-dr", "long_id": "v1.portals-2000s.portal.s04.p03.t04.u04.dr", "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 }, "density": "roomy", "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-4344-dr", "preview_url": "https://chrono.skin/s/v1-po-4344-dr/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`, `--font-heading` and `--font-ui` are all Arial, Helvetica, sans-serif; `--font-mono` is Courier New for code. One family carries the whole page.\n- `--text-base` 13px is body text, links, title strips, table text and section labels. `--text-small` 10px is sub-links of the directory, meta lines, the utility line, captions, hints, stat labels and the copyright line. `--text-ui` 13px is buttons, inputs and tabs. `--text-large` 14px is defined for lead paragraphs in other layouts; this layout sets its lead in bold 13px and does not use it. `--text-h3` 13px, `--text-h2` 16px (header buttons, the search prompt, promo title, stat figures, prose h2), `--text-h1` and `--text-display` 18px (the wordmark, the page title, prose h1): 18px bold is the largest text.\n- Line heights are `normal`. Headings are bold, never uppercased, never tracked. `--weight-ui` 700: button and tab labels are bold; the secondary button is regular.\n- `--color-page`, `--color-canvas` and `--color-surface` are white: the sheet is not visible as a box in this palette, only its centring is. `--color-surface-alt` #ffffcc fills the sidebar box, the form, the stat strip, alternate table rows and the foot line of a panel. `--color-surface-strong` #ffff99 is sidebar title strips and inactive tabs.\n- `--color-bar` #336699 with white `--color-bar-text` is panel and dialog title strips, table heads, the current header button and the current tab. `--color-bar-alt` #ffcc00 with black `--color-bar-alt-text` is the search band and the title strip of `.ds-panel--alt`; links on it take the bar text colour. `--color-inverse` #000066 with white text is the promo strip, where links take `--color-accent`.\n- `--color-text` and `--color-heading` black; `--color-text-muted` #666666 for meta lines and captions; `--color-heading-alt` #003366 for h3.\n- `--color-link` #0000ee, underlined, for every link; `--color-link-quiet` is the same blue and `--link-decoration-quiet` is also underline, because the era underlined its navigation too. Visited #333366, hover #cc0000, active #ff0020.\n- `--color-border` #ffcc00 outlines every box and rules the section strips and the footer; `--color-border-strong` #336699 outlines header buttons, tabs, the dialog and the page header rule; `--color-border-muted` #eeeeee is row rules and the bevel of buttons.\n- `--color-accent` #ffcc00 with black text is the badge and the current page number; `--color-accent-alt` #cc0000 is the \"New!\" label, promoted links and bare red marks.\n- `--color-fill-1` pale lavender, `--color-fill-2` pale green, `--color-fill-3` pale orange and `--color-fill-4` pale grey fill the four grid cells; `--color-fill-3` is also every section strip.\n- Surface: heavy and ruled. `--border-width` is 1px and `--border-width-strong` 3px; `--border-style` is double, which a 1px line shows as a plain line and a 3px line as two hairlines with a gap, so the header rule, the page header rule, the tab rule, the footer rule and the dialog outline are double rules while box outlines stay single. Boxes cast a hard 2px block shadow in `--color-border-muted` (`--shadow-panel`), the dialog a 3px one in `--color-shadow` (`--shadow-dialog`); a hovered button gains a 1px block shadow and the alternate surface, a pressed one a 2px inset. No shadow is blurred. `--fill-page` lays a faint vertical pinstripe over the page colour; all other fills are flat. `--focus-ring` is 2px dotted. Radii are 0 and `--transition` none.\n- Buttons are the browser button of the period: `--fill-button` #eeeeee with a `--border-width-strong` (3px) outset bevel; the secondary one is white and regular weight. Inputs are white with a 3px inset border in `--color-input-border`. `--color-danger` #cc0000 is error text, the border of an invalid field, the label of a destructive button and the failed badge; `--color-success` #339900 and `--color-warning` #ffcc00 are badge fills only. `--color-notice` and `--color-danger-surface` are the two pale notice backgrounds.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons, the brand tile and inputs (the vocabulary has one `--border-style`); `calc()` sums of two layout tokens for the form action offset and the small input; `text-decoration: underline` on links inside the search band.\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\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page` on ``: page 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 <= 10px`: table and list rows touch.\n- `block-gap <= 25px`: 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 <= 18px`: the largest text measured is 18px bold.\n- `font-size >= 10px`: the small print is 10px and nothing is smaller.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Arial for everything and a monospace for code.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: nothing is uppercased by CSS.\n- `underlined-links >= 90%`: links are underlined everywhere, navigation included.\n- `border-radius <= 0px`: no reference has a rounded box in CSS; every block is a square rectangle.\n- `box-shadow-blur <= 0px`: shadows are hard-edged offset blocks; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: bands, strips and cells are flat colour.\n- `border-width <= 3px`: 1px outlines and rules, 3px bevels and double rules.\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: 3px;\n --space-3: 5px;\n --space-4: 10px;\n --space-5: 15px;\n --space-6: 25px;\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.t04.u04.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"portals-2000s\",\n \"years\": [\n 2000,\n 2004\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-po-4344-dr\",\n \"short\": \"v1-po-4344-dr\",\n \"density\": \"roomy\"\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, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 10px;\n --text-ui: 13px;\n --text-large: 14px;\n --text-display: 18px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: double;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 2px 2px 0 var(--color-border-muted);\n --shadow-control: none;\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.09'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white' fill-opacity='.12'/%3E%3C/svg%3E\");\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-alt);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }