{ "id": "v1-po-1113", "long_id": "v1.portals-2000s.portal.s01.p01.t01.u03", "name": "Web portal, 2000 to 2004", "era": { "slug": "portals-2000s", "code": "po", "name": "Early-2000s portals", "years": [ 2000, 2004 ], "description": "Start pages and news portals, 2000 to 2004: dense fixed-width sheets cut into columns of small boxes, solid colour bars with bold white titles, 10 to 13px Arial and Verdana, and almost no empty space." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A dense, fixed-width start page of the kind general and special-interest portals ran between 2000 and 2004: a 770px white sheet centred on a 1024px screen, cut into a link-list column, a story column and a right rail of small boxes. Blocks are flat rectangles of colour that touch or sit 5px apart, headed by solid colour bars with bold white text, set in 10px to 13px Arial and Verdana with one 19px headline. It was the default shape of a home page until wider, gradient-and-rounded-corner layouts replaced it from about 2005.", "url": "https://chrono.skin/s/v1-po-1113", "preview_url": "https://chrono.skin/s/v1-po-1113/specimen.html", "files": { "STYLE.md": "# Web portal, 2000 to 2004\n\n## Summary\n\nA dense, fixed-width start page of the kind general and special-interest portals ran between 2000 and 2004: a 770px white sheet centred on a 1024px screen, cut into a link-list column, a story column and a right rail of small boxes. Blocks are flat rectangles of colour that touch or sit 5px apart, headed by solid colour bars with bold white text, set in 10px to 13px Arial and Verdana with one 19px headline. It was the default shape of a home page until wider, gradient-and-rounded-corner layouts replaced it from about 2005.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 770px; `.ds-page__frame` is a white sheet of that width centred horizontally in the viewport (`margin: 0 auto`), and `--color-page` shows on both sides and below. Do not pin it to the left edge and do not stretch it.\n- `.ds-page` pads the viewport by `--space-4` (5px). Order from the top: `.ds-nav` (grey utility strip with search, masthead with wordmark and date, teal link bar), then `.ds-page__columns`, then `.ds-footer`. The home page has no breadcrumb.\n- `.ds-page__columns` is three columns: `--size-sidebar` 140px (`.ds-sidebar`, tinted, full height), a fluid main column (`.ds-page__main`, 455px at this width) and `--size-rail` 165px (`.ds-page__rail`, a stack of `.ds-panel`). Column gutters and the gap between stacked blocks are both `--space-4` (5px).\n- Inner pages (every page below the home page) keep the same sheet, header and footer but have no hero and no rail. `.ds-breadcrumb` sits directly under the teal link bar, touching it, across the full 770px. Below it `.ds-page__columns--inner` has two columns: the 140px `.ds-sidebar`, now holding the links of the current section, and a 625px main column. The main column opens with `.ds-page-header` in place of the hero, then an optional `.ds-stat` row, then the working blocks stacked `--space-4` (5px) apart: `.ds-tabs` touching the `.ds-table` or list they switch, and each form or further block under its own `.ds-section` strip.\n- Views. The specimen is one example site of five screens, one showing at a time; the header and footer are written once around them. `home` is the three-column start page (hero, top stories, markets, directory, rail). `news` is the story list: page header, tabs on the list, pagination. `story` is one article: a section strip, the article text, related links and reader comments, with no page header because the article's own headline heads the page. `newsletters` is the signed-in mail page: page header, stat row, tabs on the table, the button row, the cancel message box and the empty saved-issues block. `signup` is the form page: page header, notices, the form and a table of what each mailing sends. Each inner view is `.ds-view` holding its breadcrumb and one `.ds-page__columns--inner`; the link bar marks News for `news` and `story` and Mail for `newsletters` and `signup`.\n- Spacing scale: `--space-1` 1px is the vertical padding inside buttons and inputs; `--space-2` 2px is the vertical padding of every bar, title strip and table cell; `--space-3` 3px is the vertical padding of link rows, section strips and notices; `--space-4` 5px is the side padding of every bar and cell, the gutter between columns and the gap between blocks; `--space-5` 10px is the gap between paragraphs and between story items and the padding of a dialog; `--space-6` 15px is list indent only. There is no step above 15px.\n- Fixed sizes: `--size-figure` 110px by `--size-figure-height` 84px is the lead picture slot; `--size-mark` 26px the brand tile; `--size-search` 150px a search or postcode input; `--size-field` 180px a form text input; `--size-label` 100px the label column of a form; `--size-area` the height of a textarea; `--size-dialog` 300px a message box.\n- Things are separated by a change of background colour, a title bar or a 5px white gutter. Only notices, the dialog, the lead figure and the hero head rule carry a 1px line.\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` and `--font-heading` are Arial, Helvetica, sans-serif. `--font-ui` is Verdana, used for navigation bars, tabs, buttons, inputs, table heads and all 10px text. `--font-mono` is Courier New for code. One reference set its small text in a commercial bitmap system face (MS Sans Serif); Verdana at 10px is the stand-in.\n- `--text-base` 12px is body text, sidebar links, panel text and bar titles. `--text-small` 10px (Verdana) is meta lines, the utility strip, breadcrumb, footer, hints and directory sub-links. `--text-ui` 11px is the navigation bar, tabs, buttons, inputs and table heads. `--text-large` 13px is lead paragraphs. `--text-h3` 13px, `--text-h2` 16px, `--text-h1` and `--text-display` 19px: 19px bold is the largest text on the page and is used once or twice (lead headline, article title, wordmark).\n- `--line-body` is `normal`; `--line-heading` and `--line-display` are 1.15, so a headline that wraps stays tight. Never open the leading. Headings are bold, not uppercased, not tracked.\n- `--color-page` #e5e5e5 is outside the sheet; `--color-canvas` and `--color-surface` are white. `--color-surface-alt` #eeeeee fills the sidebar column, rail panels, forms, alternate table rows, the breadcrumb and pagination strips. `--color-surface-strong` #cccccc is sidebar title strips and inactive tabs.\n- `--color-bar` #006666 with `--color-bar-text` white is the navigation bar, panel and dialog titles, table heads and the current tab; fills are flat (`--fill-bar` is the plain colour). `--color-bar-alt` #999999 with white text is the utility strip, the footer strip and the titles of `.ds-panel--alt`.\n- `--color-inverse` #4b4b4b with `--color-inverse-text` #eeeeee is used for one block per page (`.ds-panel--inverse`); links inside it take `--color-accent`.\n- `--color-text` black; `--color-text-muted` #666666 for dates, counts and captions. `--color-heading` black; `--color-heading-alt` #006666 for section strip titles and h3.\n- `--color-link` #000099, underlined (`--link-decoration`): every link in the main column, including headlines. `--color-link-quiet` black with `--link-decoration-quiet` none: sidebar, rail channel lists, breadcrumb and \"more...\" links. Links on bars are the bar text colour without underline. `--color-link-hover` #cc0000, `--color-link-active` #ff0000, `--color-link-visited` #666699.\n- `--color-accent` #ffcc00 with black text is the badge and the current navigation item's text; `--color-accent-alt` #cc0000 is promoted sidebar entries and \"updated\" marks.\n- `--color-fill-1` pale green, `--color-fill-2` pale cream, `--color-fill-3` pale lilac, `--color-fill-4` pale grey tint section strips and directory cells; each section of the main column keeps one tint.\n- Buttons are the browser button of the period: `--fill-button` #dddddd, bold, with a `--border-width-strong` outset border in `--color-border-muted`; secondary is #efefef in normal weight. Inputs are white with a 2px 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 fill of a failed-status badge. `--color-success` #009933 (the flat green of one reference's section markers) fills the positive status badge and colours rising figures in tables (`is-up`); `--color-warning` #e8c26b (the dull amber one reference used for its promotional buttons) is a badge fill only. `--color-danger-surface` and `--color-notice` are the two pale notice backgrounds.\n- One-off values built in `components.css` without a token: `border-style: outset` and `inset` on buttons and inputs (the vocabulary has a single `--border-style`), and `calc()` sums of two spacing steps for bullet indents and the form action offset.\n- Visited, hover, active and focus colours cannot be measured on a static capture; they are colours measured elsewhere in the references assigned to those roles.\n\n## Components\n\n- `.ds-page` on ``: page colour, 5px margin and base type. Wrap everything in `.ds-page__frame`. `.ds-page__columns` holds `.ds-sidebar`, `.ds-page__main` and `.ds-page__rail`. `.ds-page__legal` is the 10px copyright line. `.ds-block` groups a section strip with the block it heads so they touch.\n- `.ds-brand`: the site's mark and name, at the left of the masthead and a link to the home page, once per page. `.ds-brand__mark` is a `--size-mark` (26px) tile dressed like the primary button: `--fill-button` with the mark drawn in `--color-button-text`, the 2px 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 19px bold wordmark in `--font-heading` with the heading tracking and transform, in `--color-heading` because the masthead sits on the sheet. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: site header. `.ds-nav__utility` is the grey strip with `.ds-nav__utility-links` (`.ds-nav__utility-link`) and the `.ds-nav__search` form (`.ds-nav__search-label`, a small input, a button). `.ds-nav__masthead` holds `.ds-nav__brand` (the `.ds-brand` over a 10px `.ds-nav__tagline`) and `.ds-nav__date`. `.ds-nav__links` is the teal bar of `.ds-nav__item` entries divided by 1px bars; `.ds-nav__link` with `is-current` turns the text yellow; in the specimen the open view marks its link through `:has()` rules, one per view.\n- `.ds-view`: one screen of the specimen (`.ds-view--home` is the start 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. 10px trail on a grey strip under the link bar, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-sidebar`: the left column. Repeats `.ds-sidebar__title` (grey strip, bold 12px) over a `.ds-sidebar__list` of `.ds-sidebar__item` links, with no gap between groups. Use `.ds-link--quiet` for entries and `.ds-link--hot` for the one or two promoted ones.\n- `.ds-section`: tinted heading strip that opens a block in the main column, with `.ds-section__title` and an optional right-hand `.ds-section__more` link. `--1`, `--2`, `--3` choose the tint; the base is the grey tint.\n- `.ds-hero`: the lead story. `.ds-hero__head` (italic `.ds-hero__kicker`, `.ds-hero__date`, a 1px rule), `.ds-hero__lead` with the `.ds-hero__figure` picture slot beside `.ds-hero__title` (19px underlined link), `.ds-hero__text` and the bold `.ds-hero__action` link, then `.ds-hero__more`, a two-column square-bullet list of further headlines. No background, no button, no banner.\n- `.ds-page-header`: head of an inner page, first thing in the main column, once per page. A block holding `.ds-page-header__title` (19px bold, the page's only h1) and one line of `.ds-page-header__text` (12px), with `.ds-page-header__action` at the right end holding one `.ds-button`; a 1px rule closes it, as under the hero head. No background, no kicker, no picture. An article page leaves it out and opens with a `.ds-section` strip and the article's own h1.\n- `.ds-stat`: a row of three to five summary figures under the page header. Each `.ds-stat__item` is a grey cell holding a 16px bold `.ds-stat__value` over a 10px Verdana `.ds-stat__label`; cells share the width equally and sit 5px apart like directory cells. No borders, no icons, no trend arrows; do not enlarge the figure beyond 16px.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__lead` for the 13px first paragraph and `.ds-prose__byline` for the 10px credit.\n- `.ds-link`: underlined blue link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is black and not underlined until hover; `.ds-link--hot` is the red promoted entry. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled grey button, bold, for the main action. `.ds-button--secondary` is lighter and normal weight. `.ds-button--danger` is the same grey bevel with the label in `--color-danger`, for delete, remove and unsubscribe; never fill a button red. `disabled` or `is-disabled` greys the label; `is-active` presses the bevel in. Hover does not change it. 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`: grey block of `.ds-form__row` pairs: bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small` 150px, `--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 and radios; `.ds-form__actions` is the button row aligned under the controls.\n- `.ds-table`: data table without cell borders: teal `th`, rows alternating white and grey, `.ds-table__num` right-aligned for figures, `is-up` (in `--color-success`) and `is-down` (in `--color-danger`) to colour a change. `.ds-table__caption` is the 10px tinted line under it.\n- `.ds-tabs`: row of square `.ds-tabs__tab` links on a 2px teal rule; `is-current` is teal with white text and 3px taller. Use it directly above the list or panel it switches.\n- `.ds-list`: story list. Each `.ds-list__item` has a bold underlined `.ds-list__title`, a `.ds-list__text` summary and a 10px `.ds-list__meta` line; items are 10px apart with no rules. `.ds-list--bullets` is the one-line square-bullet variant for rails and headline lists.\n- `.ds-panel`: rail box: `.ds-panel__title` bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__actions`. `.ds-panel--alt` is grey with a grey title; `.ds-panel--inverse` is the dark block with a 16px title, at most one per page. Panels have no border.\n- `.ds-grid`: two-column directory of `.ds-grid__cell` blocks 5px apart, tinted with `--1`, `--2`, `--3` or the base grey; each has a 16px `.ds-grid__title` link and a 10px `.ds-grid__text` line of sub-links.\n- `.ds-badge`: square yellow 10px bold label (\"NEW\"). `.ds-badge--alt` is bare red text; `.ds-badge--count` is a grey count in parentheses. Status labels keep the square block and change the fill: `.ds-badge--success` green with white text (active, paid, delivered), `.ds-badge--warning` amber with black text (pending, due soon), `.ds-badge--danger` red with white text (failed, overdue). Use them in a table's status column or after a list title, one word each.\n- `.ds-notice`: one-line message with a 1px border on pale cream, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and border. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred line on a grey strip: `.ds-pagination__item` entries divided by 1px bars, underlined links, the current page as bold `.ds-pagination__current`. No boxes around numbers.\n- `.ds-dialog`: the era's message box, in the page flow: 300px grey box with a 1px dark outline, teal `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and centred `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat grey area it sits on. No shadow, no rounding, no floating.\n- `.ds-empty`: grey block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: `.ds-footer__bar`, a grey strip of `.ds-footer__item` entries with `.ds-footer__link`, followed by `.ds-page__legal`.\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-progress`: a poll result, quota or elapsed-time bar: `.ds-progress__label` above, `.ds-progress__track` holding `.ds-progress__fill` (width by a `--NN` percent class), `.ds-progress__value` at the right.\n- `.ds-accordion`: a list of questions or help topics as `
` with `.ds-accordion__summary` (a plus or minus box before it) and `.ds-accordion__body`. Use it for FAQs and help, not for navigation.\n\n## Never\n\n- `row-gap <= 10px`: list and table rows touch; story items are at most 10px apart.\n- `block-gap <= 10px`: neighbouring blocks touch or sit 5px apart.\n- `content-width <= 776px`: the sheet is fixed near 770px on a 1024px screen and does not stretch.\n- `font-size <= 19px`: the largest text measured is a 19px bold headline.\n- `font-size >= 10px`: the smallest text measured is 10px.\n- `font-weight <= 700`: only regular and bold are used.\n- `font-families <= 3`: Arial, Verdana for small and interface text, and a monospace for code.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: no reference uses text-transform.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 1px`: every rule, outline and bevel is a hairline.\n- `box-shadow-blur <= 0px`: the only shadows are 1px outline rings around panels, controls and the dialog; nothing is soft.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: fills are flat colour.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail box copies `.ds-panel` (flat title bar in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4`, no border); a new main-column block starts with a `.ds-section` strip and puts flat content under it; a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, blocks); a new link row copies `.ds-nav__links` or `.ds-pagination` with 1px bar dividers; 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 between 10px and 13px apart from one 19px headline, keep corners square and fills flat, and separate things with a colour change, a bar or a 5px gutter, never with whitespace, cards, shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). Taken from the references' column widths,\n gutters and cell paddings. */\n:root {\n --size-page: 770px;\n --size-sidebar: 140px;\n --size-rail: 165px;\n --size-figure: 110px;\n --size-figure-height: 84px;\n --size-mark: 26px;\n --size-search: 150px;\n --size-label: 100px;\n --size-field: 180px;\n --size-area: 5.5em;\n --size-dialog: 300px;\n --size-bullet: 16px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 3px;\n --space-4: 5px;\n --space-5: 10px;\n --space-6: 15px;\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 fixed white sheet, centred in the window; the page colour shows on\n both sides. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr) var(--size-rail);\n gap: var(--space-4);\n align-items: stretch;\n padding: var(--space-4) 0;\n}\n.ds-page__main,\n.ds-page__rail {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n/* Inner page: the link column stays, the rail goes and the main column\n takes its width. */\n.ds-page__columns--inner {\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-5);\n font-size: var(--text-small);\n color: var(--color-text);\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/* Navigation, sidebar and tool links: text colour, no underline. */\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 quiet list. */\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-3) var(--space-4);\n}\n\n/* ---------- nav ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__utility {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__utility-links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__utility-link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__utility-link:hover,\n.ds-nav__utility-link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-nav__search-label {\n font-weight: var(--weight-bold);\n}\n.ds-nav__masthead {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-4) var(--space-4);\n}\n.ds-nav__brand {\n display: block;\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n text-decoration: none;\n}\n/* The mark sits on a small tile dressed like the primary button. */\n.ds-brand__mark {\n display: inline-flex;\n flex: none;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-heading);\n line-height: var(--line-display);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__tagline {\n display: block;\n margin-top: var(--space-2);\n font-size: var(--text-small);\n font-family: var(--font-ui);\n color: var(--color-text-muted);\n}\n.ds-nav__date {\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n/* Items in every link row are divided by a 1px bar, as typed pipes were. */\n.ds-nav__item,\n.ds-footer__item,\n.ds-pagination__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) currentColor;\n}\n.ds-nav__item:first-child,\n.ds-footer__item:first-child,\n.ds-pagination__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#story:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#newsletters:target) .ds-nav__link[href=\"#newsletters\"],\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#newsletters\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar ---------- */\n/* A tinted column that runs the full height of the content, link lists\n stacked without gaps. */\n.ds-sidebar {\n background: var(--color-surface-alt);\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-4) var(--space-4) var(--space-5);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: 0;\n}\n\n/* ---------- section strip ---------- */\n/* A tinted heading strip that opens a block of the main column. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-4);\n}\n.ds-section--1 { background: var(--color-fill-1); }\n.ds-section--2 { background: var(--color-fill-2); }\n.ds-section--3 { background: var(--color-fill-3); }\n.ds-section__title {\n margin: 0;\n color: var(--color-heading-alt);\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__more {\n font-size: var(--text-base);\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- hero ---------- */\n.ds-hero {\n padding: 0 var(--space-4);\n border-radius: var(--radius-page);\n}\n.ds-hero__head {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin: 0 0 var(--space-4);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-hero__kicker {\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n font-style: italic;\n color: var(--color-text-muted);\n}\n.ds-hero__date {\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-hero__lead {\n display: flex;\n gap: var(--space-4);\n align-items: flex-start;\n}\n.ds-hero__figure {\n flex: none;\n box-sizing: border-box;\n width: var(--size-figure);\n height: var(--size-figure-height);\n background: var(--color-surface-strong);\n color: var(--color-border-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__text {\n margin: var(--space-2) 0 var(--space-3);\n font-size: var(--text-large);\n}\n.ds-hero__action {\n font-weight: var(--weight-bold);\n}\n.ds-hero__more {\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: calc(var(--space-6) + var(--space-4));\n margin: var(--space-4) 0 0;\n padding: 0 0 0 var(--space-6);\n list-style: square;\n}\n\n/* ---------- page header ---------- */\n/* Head of an inner page: the headline size of the lead story over the same\n 1px rule, with the page's one button at the right end of the rule. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0 var(--space-4);\n padding: var(--space-2) 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n font-size: var(--text-base);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* Summary figures as a row of tinted cells with white gutters, like the\n directory cells: a 16px bold figure over a 10px label. */\n.ds-stat {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n}\n.ds-stat__value {\n display: block;\n margin: 0;\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 margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: 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 ul {\n list-style: square;\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n}\n.ds-prose__byline {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons ---------- */\n/* The browser's own bevelled button of the period: a 2px outset border. */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n/* Destructive action: the same grey bevel, the label in the error red. */\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-3) var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface-alt);\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-2) 0;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width-strong) inset var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n font-size: var(--text-small);\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 font-weight: var(--weight-bold);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n}\n\n/* ---------- table ---------- */\n/* No cell borders: rows touch and alternate the two surfaces. */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th {\n 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-ui);\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-2) var(--space-4);\n background: var(--color-surface);\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 td.is-up {\n color: var(--color-success);\n}\n.ds-table td.is-down {\n color: var(--color-danger);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-fill-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0 var(--space-4);\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-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n padding-top: var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- list ---------- */\n.ds-list {\n margin: 0;\n padding: var(--space-4);\n list-style: none;\n}\n.ds-list__item {\n padding: 0 0 var(--space-5);\n}\n.ds-list__item:last-child {\n padding-bottom: 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-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Plain square-bulleted headline list, one line per item. */\n.ds-list--bullets {\n padding-left: calc(var(--space-6) + var(--space-4));\n list-style: square;\n}\n.ds-list--bullets .ds-list__item {\n padding-bottom: 0;\n}\n.ds-list--bullets .ds-list__title {\n display: inline;\n font-weight: var(--weight-body);\n}\n.ds-list--bullets .ds-list__meta {\n display: inline;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\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__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__small {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* Rail panel: grey title strip on the grey surface. */\n.ds-panel--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Inverted panel: the one dark block of a page (poll, latest stories). */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-panel__title {\n background: transparent;\n color: var(--color-inverse-text);\n font-size: var(--text-h2);\n padding-top: var(--space-4);\n}\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited {\n color: var(--color-accent);\n}\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-4);\n}\n.ds-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n\n/* ---------- grid ---------- */\n/* Directory cells: blocks of tint separated by white gutters. */\n.ds-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-4);\n background: var(--color-fill-4);\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;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-accent-alt);\n padding: 0;\n}\n.ds-badge--count {\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n padding: 0;\n}\n/* Status labels: the same square block, filled with the status colour. */\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-4);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-pagination__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A message box in the page flow: square, flat, outlined. */\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-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\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.ds-footer {\n display: block;\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\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/* ---------- progress ---------- */\n/* A result or quota bar: label above, an outlined track with the fill in\n the bar colour, the figure at its right end. */\n.ds-progress {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-4);\n align-items: center;\n margin: 0;\n padding: var(--space-1) 0 var(--space-3);\n}\n.ds-progress__label {\n grid-column: 1 / -1;\n}\n.ds-progress__track {\n display: block;\n box-sizing: border-box;\n height: var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-progress__fill {\n display: block;\n height: 100%;\n background: var(--fill-bar);\n}\n.ds-progress__fill--12 { width: 12%; }\n.ds-progress__fill--26 { width: 26%; }\n.ds-progress__fill--62 { width: 62%; }\n.ds-progress__value {\n min-width: 4ch;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- accordion ---------- */\n/* Questions that open and close, each with a plus or minus box. */\n.ds-accordion {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n list-style: none;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: calc(var(--text-small) + 2 * var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-2) calc(var(--space-2) * 3) no-repeat,\n var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n height: calc(var(--text-small) + 2 * var(--border-width));\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n var(--color-surface);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3) calc(2ch + var(--space-4));\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: web portal, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n \n
\n \n \n \n
\n
\n
\n
\n \n \n chronoskin\n \n Your start page for news, money and the Web\n
\n Tuesday, March 11\n
\n \n
\n\n
\n
\n\n \n\n
\n\n
\n
\n Today on chronoskin\n Updated 9:40 a.m.\n
\n
\n \n \n \n \n
\n

Is your home network ready for broadband?

\n

Cable and DSL prices are falling again. Our guide walks through routers, wiring and the settings worth changing on day one.

\n Read the full guide\n
\n
\n \n
\n\n
\n
\n

News: Top stories

\n all news...\n
\n \n
\n\n
\n
\n

Money: Markets

\n more...\n
\n \n \n \n \n \n \n \n \n \n \n
IndexLastChange% Chg
Harbor 1005,214.60-21.95-0.42%
Tech Composite1,578.12+15.56+1.00%
Small Cap 6001,040.69+0.01+0.00%
Northern Bonds112.30-0.18-0.16%
\n

Quotes delayed 20 minutes. Update

\n
\n\n
\n
\n

Directory

\n all categories...\n
\n
\n
\n
\n

Computers & Internet

\n

Desktops, Notebooks, Web hosting...

\n
\n
\n

Home & Garden

\n

Recipes, Gardening, Repairs...

\n
\n
\n

Travel

\n

Flights, City guides, Rail times...

\n
\n
\n

Science & Nature

\n

Space, Birds, Weather...

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

Mail: Newsletters

\n my newsletters...\n
\n \n
\n\n
\n\n
\n\n
\n

My page

\n
\n

Sign in to see your mail, stock quotes and local weather here.

\n Sign in\n
\n
\n\n
\n

Channels

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

Daily poll

\n
\n

How do you connect to the Internet at home?

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

Older stories

\n \n
\n\n
\n

Yesterday's poll

\n
\n

Do you shop on the Web?

\n
Now and then62%
\n
Every week26%
\n
Never12%
\n

4,812 votes

\n
\n
\n\n
\n

Local

\n
\n

Enter your postcode for news, weather and listings near you.

\n \n \n

e.g. 40210 or a town name

\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. News
    4. \n
  4. >
    5. \n
  5. Top stories
    6. \n
\n
\n\n \n\n
\n\n
\n
\n

News

\n

The day's stories from the chronoskin news desks, newest first.

\n
\n
\n Get news by e-mail\n
\n
\n\n
\n \n
    \n
  • \n Setting up a home network NEW\n Two computers and one fast connection is now an ordinary household. Sharing that connection takes an afternoon.\n Posted 9:40 a.m. by the technology desk | 26 comments\n
    • \n
  • \n Council approves new harbour ferry route\n Service between the east pier and the old town is due to start in June, with six crossings a day.\n Posted 8:15 a.m. by the city desk | 42 comments\n
    • \n
  • \n Chip makers forecast a slow second quarter\n Two of the largest suppliers trimmed their outlook, blaming weak demand for desktop machines.\n Posted 7:50 a.m. by the business desk | 17 comments\n
    • \n
  • \n Rovers name unchanged side for cup replay\n The manager keeps faith with the eleven who drew on Saturday.\n Posted 7:02 a.m. by the sport desk | 8 comments\n
    • \n
  • \n Schools trial laptop loans for older pupils\n Three hundred machines go out this term; families keep them over the summer.\n Posted yesterday, 6:30 p.m. by the city desk | 377 comments\n
    • \n
  • \n Museum extends late opening to Thursdays\n The transport gallery and the cafe will stay open until 9 p.m. from next month.\n Posted yesterday, 4:05 p.m. by the entertainment desk | 194 comments\n
    • \n
\n \n
\n\n
\n
\n

Earlier this week

\n archive...\n
\n \n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. News
    4. \n
  4. >
    5. \n
  5. Setting up a home network
    6. \n
\n
\n\n \n\n
\n\n
\n
\n

Technology: Feature

\n back to news...\n
\n
\n

Setting up a home network

\n

By the technology desk, March 11 | 26 comments

\n

Two computers and one fast connection is now an ordinary household. Sharing that connection takes an afternoon.

\n

What you need

\n

A router sits between the modem and your machines and hands each one an address. Most will work as shipped, but change the administrator password before anything else.

\n
    \n
  • A cable or DSL modem from your provider
    • \n
  • A four-port router
    • \n
  • One network cable per computer
    • \n
\n

Where to put it

\n

Keep the router near the modem and off the floor. Run the longest cable first: it decides where everything else has to sit. Do not staple cable to the skirting board; clips cost little and do not cut the wires inside.

\n

Checking the connection

\n

Open a command prompt and type ping 192.168.0.1. Four replies mean the router is answering.

\n

Sharing a printer

\n

Plug the printer into the machine that is switched on most often, then share it from that computer's printer settings.

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

Related on chronoskin

\n
\n

\n Choosing a router\n Broadband prices compared\n Ten settings worth changing\n Ask the technology desk\n More technology stories...\n

\n
\n\n
\n
\n

Reader comments

\n all 26...\n
\n
    \n
  • \n Worth saying that the cable from the modem goes in the socket marked WAN. It took me an evening to find that out.\n Posted 10:12 a.m. by a reader in Northgate\n
    • \n
  • \n We share one printer between three machines this way and it has not gone wrong since Christmas.\n Posted 10:40 a.m. by a reader in Eastfield\n
    • \n
\n

Get stories like this every Thursday. Add Technology weekly

\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Mail
    4. \n
  4. >
    5. \n
  5. Newsletters
    6. \n
\n
\n\n \n\n
\n\n
\n
\n

Newsletters

\n

Choose which chronoskin mailings are sent to your address.

\n
\n
\n Add a newsletter\n
\n
\n\n
    \n
  • 5Newsletters
    • \n
  • 31Issues this month
    • \n
  • 7Unread issues
    • \n
  • 1,204Issues archived
    • \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
NewsletterEditionIssuesStatus 
Technology weeklyWeekly112ActiveChange
Money and marketsDaily864ActiveChange
Weekend travel dealsWeekly0PendingConfirm
Garden notesMonthly14BouncedCheck address
Sport resultsDaily214ActiveChange
\n

Pending newsletters start once you answer the confirmation message. Send it again

\n
\n Add a newsletter\n \n \n \n
\n
\n\n
\n
\n

Cancel newsletter

\n
\n

Stop sending Garden notes to this address? Back issues will be kept.

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

Saved issues

\n archive...\n
\n
\n

You have not saved any issues yet. Saved issues stay here after the archive is cleared.

\n Browse all newsletters\n
\n
\n\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Newsletters
    4. \n
  4. >
    5. \n
  5. Add a newsletter
    6. \n
\n
\n\n \n\n
\n\n
\n
\n

Add a newsletter

\n

Free, and you can cancel any mailing with one click.

\n
\n
\n Back to my newsletters\n
\n
\n\n
\n

Error: Your request was not sent. Check the field marked below and try again.

\n

Note: We send one confirmation message first. The newsletter starts once you answer it.

\n
\n\n
\n
\n

Your details

\n help...\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Please enter a complete e-mail address.\n
\n
\n
\n \n
\n \n
\n
\n
\n Topics\n
\n \n \n \n \n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n
\n
Is it really free?

Yes. Every chronoskin newsletter is free and carries no more than one sponsor line.

\n
How do I stop a newsletter?

Each issue ends with a cancel link, and the Newsletters page lists everything you receive.

\n
Who sees my address?

Nobody outside chronoskin. It is used only to send the newsletters you chose.

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

What each one sends

\n my newsletters...\n
\n \n \n \n \n \n \n \n \n \n \n
NewsletterSentReaders
Technology weeklyThursdays41,200
Money and marketsWeekdays, 7 a.m.63,850
Weekend travel deals NEWFridays9,470
Sport resultsDaily, 10 p.m.28,115
\n
\n\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s01.p01.t01.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-1113\",\n \"short\": \"v1-po-1113\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #cccccc;\n --color-bar: #006666;\n --color-bar-text: #ffffff;\n --color-bar-alt: #999999;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #4b4b4b;\n --color-inverse-text: #eeeeee;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #006666;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #666699;\n --color-link-hover: #cc0000;\n --color-link-active: #ff0000;\n --color-border: #cccccc;\n --color-border-strong: #666666;\n --color-border-muted: #dddddd;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #cc0000;\n --color-fill-1: #e4f7e4;\n --color-fill-2: #fffbee;\n --color-fill-3: #f1f0ff;\n --color-fill-4: #f0f0f0;\n --color-button: #dddddd;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #eeeeee;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #fffbee;\n --color-success: #009933;\n --color-warning: #e8c26b;\n --color-notice: #feffef;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #e5e5e5;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Verdana, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 19px;\n --text-h1: 19px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: normal;\n --line-heading: 1.15;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\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: 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" } }