{ "id": "v1-yk-8212", "long_id": "v1.y2k-futurism.blog.s08.p02.t01.u02", "name": "Y2K futurism news sheet, 1999 to 2003", "era": { "slug": "y2k-futurism", "code": "yk", "name": "Y2K futurism", "years": [ 1999, 2003 ], "description": "The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The daily technology news sheet of the turn of the millennium, as hardware sites, music channels and software houses ran their front pages: a 780px sheet of gunmetal on a gridded black screen, with a dateline strip, a centred masthead between two small boxes, and a body cut into three equal columns like a newspaper. Bars and buttons are brushed ice-blue capsules and strips, panels have a double hairline, headlines are a bold serif over small sans-serif text, and labels are 9px and 10px capitals. The metal and glass were drawn as images at the time and are rebuilt here with gradients, 1px lines and radii; the look gave way to wide weblog layouts from about 2004.", "url": "https://chrono.skin/s/v1-yk-8212", "preview_url": "https://chrono.skin/s/v1-yk-8212/specimen.html", "files": { "STYLE.md": "# Y2K futurism news sheet, 1999 to 2003\n\n## Summary\n\nThe daily technology news sheet of the turn of the millennium, as hardware sites, music channels and software houses ran their front pages: a 780px sheet of gunmetal on a gridded black screen, with a dateline strip, a centred masthead between two small boxes, and a body cut into three equal columns like a newspaper. Bars and buttons are brushed ice-blue capsules and strips, panels have a double hairline, headlines are a bold serif over small sans-serif text, and labels are 9px and 10px capitals. The metal and glass were drawn as images at the time and are rebuilt here with gradients, 1px lines and radii; the look gave way to wide weblog layouts from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 780px; `.ds-page__frame` is one sheet of that width centred horizontally (`margin: 0 auto`) with a 1px outline and `--radius-page` corners, and `--fill-page` shows around it. All text sits on the sheet; nothing is written on the page background.\n- Order from the top: `.ds-nav` (dateline strip, the masthead with the brand centred between two `.ds-nav__ear` boxes, then the centred row of desks between two rules), the view, `.ds-footer`. The brand is centred, not at the left, and there is no link column.\n- The body of every view is `.ds-page__grid`: three equal columns (246px at this width) with `--space-5` (10px) gutters and padding. A block takes one column, or spans two (`.ds-page__span2`) or all three (`.ds-page__span3`). On the home view blocks in one row are stretched to the same height.\n- The home view reads in rows: the lead story `.ds-hero` across two columns beside the wire panel; three desks, each a `.ds-block` of `.ds-section` strip and `.ds-list`, one per column; the bench `.ds-table` across two columns beside the one `.ds-panel--inverse`; and `.ds-grid`, four cells across all three columns. Fill each row; do not leave a column empty.\n- Inner pages (every view below the home view) keep the sheet, header and footer and have no hero. `.ds-breadcrumb` sits directly under the row of desks across the full sheet. Below it the grid is `.ds-page__grid--inner` (blocks keep their own height): `.ds-page-header` across all three columns in place of the hero, an optional `.ds-stat` row across all three, then `.ds-page__main` across two columns (notices, `.ds-tabs` over the `.ds-table` or the form under its `.ds-section` strip, buttons, dialog) beside `.ds-page__side` in the third column: the `.ds-sidebar` block first, then small `.ds-panel` modules, so that both end near each other.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs, tabs and navigation capsules; `--space-2` 2px is the vertical padding of strips, panel titles and table heads; `--space-3` 4px is the padding of table rows, wire rows and notices and the gap between tabs; `--space-4` 6px is the side padding of cells, lists and panels and the gap between stat cells and grid cells; `--space-5` 10px is the grid gutter, the gap between stacked blocks, the side padding of buttons and the gap between paragraphs; `--space-6` 14px is list indent, the side padding of navigation capsules and the padding of the dialog backdrop. There is no step above 14px.\n- Fixed sizes: `--size-figure` 110px is the drawing in the lead story; `--size-mark` 30px the tile of the brand mark; `--size-ear` 150px a box beside the masthead; `--size-time` 38px the time gutter of the wire; `--size-search` 92px a short input; `--size-label` 100px the label column of a form; `--size-field` 200px a text input; `--size-area` 64px a textarea; `--size-dialog` 300px a dialog; `--size-led` 6px a status lamp.\n- Blocks are separated by the 10px gutter and marked by an outline, a strip or a strong top rule. Rows inside a block touch and are divided by dotted hairlines.\n- Views. The specimen is one example site, a technology news sheet, in five views. `home` is the front page: lead story and wire, three desks of three stories, the bench table with the reader poll, and four special reports. `news` is the archive: page header, a filtered table of headlines with pagination, and the desks and months in the third column. `story` is an article: the prose with a row of further links, and a contents panel, the wire and a talk-back panel in the third column. `desk` is the reader's own page: page header, stats, notices, the tabbed table of tips with status badges and the button row, the remove dialog it opens, and in the third column the desk links, the empty state of kept stories and two panels. `tip` is the form page for sending a tip.\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. `--font-ui` is Verdana, used for navigation, tabs, buttons, inputs, table heads and all 9px text. `--font-mono` is Courier New for code and for numeric table columns. Several references set their small text in Geneva and drew bar labels in commercial extended faces; Verdana bold uppercase is the stand-in.\n- `--text-base` 11px is body text and links. `--text-small` 9px (Verdana) is meta lines, the utility strip, breadcrumb, footer, table heads, badges, hints and pagination. `--text-ui` 10px bold uppercase (`--ui-transform`, `--weight-ui` 700) is the navigation bar, tabs and buttons. `--text-large` 13px is lead paragraphs. `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px: 18px bold is the largest text and is used for the wordmark and the hero title only.\n- Line heights are `normal`. Headings are bold, not uppercased, not tracked.\n- `--color-page` #000030 is outside the sheet. `--color-canvas` and `--color-surface` #003399 are the sheet and panel bodies. `--color-surface-alt` #1048b8 fills the link column, forms, stat cells, alternate table rows and the breadcrumb strip. `--color-surface-strong` #000030 is darker than the sheet and is used for title strips inside the link column.\n- `--color-bar` #000000 with `--color-bar-text` white, filled by `--fill-bar` (a two-band glass gradient), is the navigation bar, panel and dialog titles, table heads and the current tab. `--color-bar-alt` #1850c8 with white text, filled by `--fill-bar-alt`, is the utility strip, section tabs, inactive tabs, `.ds-panel--alt` titles and the footer strip. `--shadow-text`, a hard 1px offset, is applied to text on these two bars only, not to buttons.\n- `--color-inverse` #c0c0d0 with `--color-inverse-text` #000030 is the silver block: one `.ds-panel--inverse` per page and the closing band of the footer. Links inside it take the inverse text colour.\n- `--color-text` #e0e0e8; `--color-text-muted` #a8a8b8 for dates, counts and captions; `--color-heading` white; `--color-heading-alt` #ffcc00 for h3.\n- `--color-link` white, underlined (`--link-decoration`): links in running text, list titles, table cells. `--color-link-quiet` #d0d0d0 without underline: link column, breadcrumb, grid sub-links, tool links in tables, pagination. Links on bars take the bar text colour without underline. Hover #ffcc00, active #98ff00, visited #a8a8b8.\n- `--color-accent` #ffcc00 with `--color-accent-text` black, filled by `--fill-accent`, is the current navigation capsule, the badge, the hero kicker and the current page number. `--color-accent-alt` #98ff00 is a lamp colour only.\n- `--color-fill-1` to `--color-fill-4` are four blues of the sheet's family (#0840a8, #1048b8, #1850c8, #0038a0) for the hero and grid cells.\n- The primary button is `--color-button` #d0d0d0 with black text under the capsule gloss of `--fill-button`; the secondary is `--color-button-secondary` #1048b8 with white text. Inputs are white with black text and a `--color-input-border` line, with the same capsule radius.\n- Each text colour is used only on its own fill: bar text on the bar, accent text on the accent, button text on the button, inverse text on the inverse block, notice text on the notice. `--color-danger` #cc6633 is text only on `--color-danger-surface` #000000 (error notice, field error chip) and otherwise a rim or lamp colour. `--color-success` #98ff00 and `--color-warning` #ffcc00 are lamp and rim colours and never carry or colour text.\n- One-off values built in `components.css` without a token: `dotted` on the empty-state outline, `radial-gradient()` dot patterns sized by `--size-dot`, and `calc()` of two layout tokens for 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 fill and base type. Wrap everything in `.ds-page__frame`. `.ds-page__grid` is the three-column body; `.ds-page__grid--inner` is the same grid for inner views. `.ds-page__span2` and `.ds-page__span3` widen a block. `.ds-page__main` (two columns) and `.ds-page__side` (one) are the stacks of an inner view. `.ds-block` joins a `.ds-section` strip or tab row to the block it heads. `.ds-view` wraps one screen; `.ds-view--home` marks the first.\n- `.ds-nav`: site header. `.ds-nav__dateline` is the dark strip with `.ds-nav__date` and `.ds-nav__utility-links` (`.ds-nav__utility-link`). `.ds-nav__masthead` holds two `.ds-nav__ear` boxes (the left one with a `.ds-nav__ear-value` read-out, the right one a search form with `.ds-nav__search`) around `.ds-nav__brand`, the centred `.ds-brand` over a 9px `.ds-nav__tagline`. `.ds-nav__links` is the centred bar of `.ds-nav__link` entries; `is-current` turns the entry into an accent capsule. One rule per view lights the entry whose `href` names the view that is showing; in a real multi-page site set `is-current` instead.\n- `.ds-brand`: the site's mark and name, centred in the masthead, linking home. `.ds-brand__mark` is a 30px tile dressed like the primary button (`--fill-button`, `--color-button-text`, 1px `--color-border-strong` rim, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px serif wordmark. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-breadcrumb`: inner views only. 9px trail on a strip under the row of desks, quiet links, `.ds-breadcrumb__sep` (`>`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the lead story, home view only, across two columns. `.ds-hero__body` is the text beside `.ds-hero__figure`, an inline SVG line drawing. The text is `.ds-hero__kicker` (accent capsule), `.ds-hero__title` (18px serif), `.ds-hero__text` (12px), `.ds-hero__meta` (9px byline) and `.ds-hero__actions` with one `.ds-button` and one link. A 2px rule in `--color-border-strong` runs along its top. No photograph.\n- `.ds-section`: the strip that heads a column or block: `.ds-section__title` in 10px capitals and an optional `.ds-section__more` link at the right, both in the strip's text colour. The list, table or form under it touches it.\n- `.ds-page-header`: head of an inner view, across all three columns: `.ds-page-header__kicker` (the section in 9px capitals), `.ds-page-header__title` (17px serif, the view's only h1), one line of `.ds-page-header__text`, and `.ds-page-header__action` at the right with one `.ds-button`; a hairline above and a 2px rule below.\n- `.ds-stat`: the row of three to five figures under the page header. `.ds-stat` is the row; each figure is a `.ds-stat__item` cell under a 2px rule, holding a 17px serif `.ds-stat__value` over a 9px `.ds-stat__label`.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__byline` is the 9px credit and `.ds-prose__lead` the 12px first paragraph.\n- `.ds-link`: underlined link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text-coloured, not underlined link for navigation inside content. `.ds-links` lays a row of links out.\n- `.ds-button`: brushed capsule in 10px bold capitals. `.ds-button--secondary` is the grey capsule. `.ds-button--danger` is the secondary capsule with a rim and a lamp in `--color-danger`; the label keeps the secondary text colour. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` brightens it. Group with `.ds-buttons`.\n- `.ds-form`: outlined block under a `.ds-section` strip, of `.ds-form__row` pairs: 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` chip marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row under the controls.\n- `.ds-table`: outlined data table: brushed `th` in 9px capitals, rows alternating the two surfaces without rules, `.ds-table__num` right-aligned in the monospace. `.ds-table__caption` is the 9px line under it.\n- `.ds-tabs`: a row of `.ds-tabs__tab` capsules on a 2px rule; `is-current` takes the bar fill. Use it directly above the table it filters.\n- `.ds-list`: stories under a `.ds-section` strip, outlined at the sides and foot. Each `.ds-list__item` has a serif `.ds-list__title`, a `.ds-list__text` summary and a 9px `.ds-list__meta` line; rows are divided by dotted hairlines. `.ds-list--wire` is the wire: one line per item with a `.ds-list__time` in the 38px gutter. `.ds-list--compact` is the one-line variant for panels, with an inline count. Both go inside a `.ds-panel` and have no outline of their own.\n- `.ds-panel`: a one-column module: outlined with a second inner hairline, `.ds-panel__title` brushed bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list` (a numbered list), `.ds-panel__small`, `.ds-panel__option` (poll choice), `.ds-panel__field` (input with button), `.ds-panel__actions`. `.ds-panel--alt` has the dark title; `.ds-panel--inverse` is the pale block with a 14px serif title, at most one per view.\n- `.ds-sidebar`: the block of section links at the top of the third column of an inner view: `.ds-sidebar__title` strips over `.ds-sidebar__list` of `.ds-sidebar__item` rows holding `.ds-link--quiet` links, with an optional `.ds-badge--count` after the link.\n- `.ds-grid`: four `.ds-grid__cell` blocks across the sheet, each under a 2px rule, tinted with `--1`, `--2`, `--3` or the base fill; each has a `.ds-grid__kicker` in 9px capitals, a 14px serif `.ds-grid__title` link and a 9px `.ds-grid__text` line.\n- `.ds-badge`: 9px bold accent capsule (\"NEW\"). `.ds-badge--count` is a bare muted count. Status labels are a plain outlined capsule with a round lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral \"on\" marker; lamp and rim take the status colour, the word stays in `--color-text`.\n- `.ds-notice`: one-line message in an outlined box, starting with a `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rim on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small capsules: `.ds-pagination__link` on quiet links, the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 300px, 2px outline, brushed `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat dark area it sits on. No blur, no floating.\n- `.ds-empty`: dotted-outline block with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: a 2px rule, then `.ds-footer__bar`, the inverse strip of centred `.ds-footer__link` entries, then `.ds-footer__band`, the dark closing line with the copyright.\n- `.ds-menu` (`.ds-menu__list`, `.ds-menu__link`): a nav item with a drop-down list on hover or focus.\n- `.ds-meter` (`.ds-meter__label`) with `.ds-progress` (`--30`, `--50`, `--70`, `--90`, `.ds-progress__bar`): a segmented loading or signal bar with its label.\n- `.ds-accordion` (`__summary`, `__body`): a `
` panel for specifications.\n- `.ds-tooltip` (`__tip`): a small label shown on hover or focus of a word.\n- `.ds-carousel` (`__track`, `__slide`, `__title`, `__text`, `__bar`, `__arrow`): a scroll-snap featured viewer with a counter such as 01/03.\n- `.ds-avatar`: initials in a round badge beside a name.\n\n## Never\n\n- `row-gap <= 2px`: rows of lists and tables touch.\n- `block-gap <= 14px`: neighbouring blocks sit 10px apart.\n- `content-width <= 780px`: text stays inside the fixed sheet.\n- `palette-colours <= 18`: greys, two khakis, one aqua, two blues, white and black, plus three status lamps.\n- `font-size <= 18px`: the wordmark and the hero title are the largest text.\n- `font-size >= 9px`: small text is 9px and nothing is smaller.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 3`: Arial, Verdana for small and interface text, a monospace for code and figures.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 20%`: only interface labels are uppercased: navigation, tabs, buttons, table heads, badges.\n- `border-radius <= 18px`: 3px on controls, 18px on the largest containers, nothing in between.\n- `border-width <= 2px`: 1px lines, a 2px dialog frame and plate edge.\n- `box-shadow-blur <= 0px`: shadows are hard bevels and hard offsets.\n- `gradient-fills <= 15%`: gradients are for the housing, strips, capsule keys, title bars and buttons.\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 one-column module copies `.ds-panel` (1px outline, brushed title in `--fill-bar` or `--fill-bar-alt`, body padded `--space-4` and `--space-5`); a new block of stories or a new table starts with a `.ds-section` strip and puts flat content touching it; a new inner view copies one of the specimen's (breadcrumb, `.ds-page-header` across the sheet, two columns of work, one of modules); a new control copies `.ds-button` or `.ds-form__input` with its capsule radius; a new status mark copies the lamp capsule of `.ds-badge--success`. Place every block on the three-column grid: one, two or three columns wide, never a fourth width. 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. Pair every text token with its own fill and with no other, and never use a status colour as a text colour. Keep the serif for headlines and the capitals for labels, keep text between 9px and 12px apart from 14px to 18px headlines, and separate things with an outline, a strip or a rule, never with whitespace, soft shadows or large cards.\n", "components.css": "/* Layout tokens (structure part). A news sheet cut into three equal\n columns under a centred masthead. */\n:root {\n --size-page: 780px;\n --size-figure: 110px;\n --size-mark: 30px;\n --size-ear: 150px;\n --size-time: 38px;\n --size-search: 92px;\n --size-label: 100px;\n --size-field: 200px;\n --size-area: 64px;\n --size-dialog: 300px;\n --size-led: 6px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 14px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5) var(--space-3) var(--space-6);\n background: var(--fill-page);\n background-color: var(--color-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.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* The sheet's grid: three equal columns. A block takes one column, or\n spans two or all three. Blocks in a row are as tall as each other. */\n.ds-page__grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n padding: var(--space-5);\n}\n.ds-page__grid--inner {\n align-items: start;\n}\n.ds-page__span2 { grid-column: span 2; }\n.ds-page__span3 { grid-column: span 3; }\n.ds-page__main,\n.ds-page__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-page__main { grid-column: span 2; }\n.ds-block {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n/* ---------- views ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n}\n\n/* ---------- brand ---------- */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-5);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 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 text-transform: var(--heading-transform);\n}\n\n/* ---------- nav ---------- */\n/* Dateline strip, a centred masthead between two small boxes, then the\n row of desks between rules. */\n.ds-nav {\n display: block;\n}\n.ds-nav__dateline {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__date {\n margin: 0;\n}\n.ds-nav__utility-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__utility-link,\n.ds-nav__utility-link:visited {\n color: var(--color-bar-alt-text);\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__masthead {\n display: grid;\n grid-template-columns: var(--size-ear) minmax(0, 1fr) var(--size-ear);\n gap: var(--space-5);\n align-items: center;\n padding: var(--space-5);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-2);\n text-align: center;\n}\n.ds-nav__tagline {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* The two small boxes beside the title: the day's count and the search. */\n.ds-nav__ear {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__ear-value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-2) 0 0;\n}\n.ds-nav__links {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0;\n padding: var(--space-2) var(--space-5);\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-6);\n color: var(--color-bar-text);\n border-radius: var(--radius-control);\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=\"#story\"],\n.ds-page:has(#desk:target) .ds-nav__link[href=\"#desk\"],\n.ds-page:has(#tip:target) .ds-nav__link[href=\"#tip\"] {\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-2) var(--space-5);\n list-style: none;\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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 color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- section head ---------- */\n/* The strip that heads a column: a label in capitals and a link. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-shadow: var(--shadow-text);\n}\n.ds-section__title {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n}\n.ds-section__more,\n.ds-section__more:visited {\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration);\n}\n\n/* ---------- hero: the lead story ---------- */\n.ds-hero {\n box-sizing: border-box;\n overflow: hidden;\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n.ds-hero__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-figure);\n gap: var(--space-5);\n align-items: start;\n padding: var(--space-5);\n}\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-3);\n padding: 0 var(--space-4);\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 text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\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 text-transform: var(--heading-transform);\n}\n.ds-hero__text {\n margin: var(--space-3) 0;\n font-size: var(--text-large);\n}\n.ds-hero__meta {\n margin: 0 0 var(--space-5);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-hero__figure {\n display: block;\n width: var(--size-figure);\n height: var(--size-figure);\n color: var(--color-border-strong);\n}\n\n/* ---------- page header ---------- */\n/* Title between rules, as the head of a newspaper page. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-3) 0 var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__kicker {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\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/* Figures as separate cells, each under a strong rule. */\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-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n display: block;\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}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n padding: var(--space-2) var(--space-3);\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.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 white-space: nowrap;\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 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}\n/* Destructive action: the secondary capsule with a danger rim and a\n lamp. The label keeps the secondary text colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-danger);\n}\n.ds-button--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n background: var(--color-danger);\n border-radius: var(--radius-pill);\n vertical-align: middle;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\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) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-2) 0;\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-weight: var(--weight-bold);\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-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: inline-block;\n margin: var(--space-2) 0 0;\n padding: 0 var(--space-4);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n border-radius: var(--radius-pill);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-5) 0 var(--space-2) calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- tabs ---------- */\n/* Capsules on a rule; the current one is filled like the bar. */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0 0 var(--space-3);\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\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 border-color: var(--color-border-strong);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\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-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\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 color: var(--color-text);\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.ds-table__num {\n font-family: var(--font-mono);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- list ---------- */\n/* Stories under a column head, divided by dotted rules. */\n.ds-list {\n flex: 1 1 auto;\n margin: 0;\n padding: 0;\n list-style: none;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-list__item {\n padding: var(--space-4) var(--space-4);\n border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__title {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-list__text {\n display: block;\n margin-top: var(--space-2);\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* The wire: one line per item, the time in a gutter at the left. */\n.ds-list--wire,\n.ds-list--compact {\n border: 0;\n}\n.ds-list--wire .ds-list__item {\n display: grid;\n grid-template-columns: var(--size-time) minmax(0, 1fr);\n column-gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__time {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list--wire .ds-list__title,\n.ds-list--compact .ds-list__title {\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.ds-list--compact .ds-list__item {\n padding: var(--space-3) var(--space-4);\n}\n.ds-list--compact .ds-list__meta {\n display: inline;\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n box-sizing: border-box;\n overflow: hidden;\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-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\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 0 0 var(--space-6);\n}\n.ds-panel__small {\n margin: var(--space-4) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__option {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-panel__field {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-4);\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 block in the opposite tone. Everything in it,\n links included, takes the inverse text colour. */\n.ds-panel--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-panel__title {\n padding-top: var(--space-4);\n background: transparent;\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n text-transform: var(--heading-transform);\n text-shadow: none;\n}\n.ds-panel--inverse .ds-panel__small,\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited,\n.ds-panel--inverse .ds-link:hover,\n.ds-panel--inverse .ds-link.is-hover {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-link {\n text-decoration: underline;\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n overflow: hidden;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\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-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) 0 var(--space-3);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) var(--space-4);\n}\n\n/* ---------- grid ---------- */\n/* Four cells across the sheet, each under a strong rule. */\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-4) var(--space-5) var(--space-5);\n background: var(--color-fill-4);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-page) 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__kicker {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n.ds-grid__title {\n margin: var(--space-2) 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 text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__title .ds-link,\n.ds-grid__title .ds-link:visited {\n color: var(--color-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 text-transform: var(--ui-transform);\n vertical-align: baseline;\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/* Status labels: a lamp in the status colour on a plain chip. The\n lamp has a rim in the text colour so that it shows on any chip, and the\n status colour never carries text. */\n.ds-badge--alt,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n}\n.ds-badge--alt::before,\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: var(--radius-pill);\n vertical-align: middle;\n}\n.ds-badge--alt { border-color: var(--color-accent-alt); }\n.ds-badge--success { border-color: var(--color-success); }\n.ds-badge--warning { border-color: var(--color-warning); }\n.ds-badge--danger { border-color: var(--color-danger); }\n.ds-badge--alt::before { background: var(--color-accent-alt); }\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\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-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-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 align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4) 0 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow, on a flat backdrop. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n background: var(--fill-panel);\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-5);\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-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\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: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-5) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) dotted var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: block;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-footer__bar {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-2) var(--space-6);\n margin: 0;\n padding: var(--space-3) var(--space-5);\n list-style: none;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-footer__link,\n.ds-footer__link:visited {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__band {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n\n/* current item also carries a marker that no token set can remove */\n.ds-nav__link.is-current::before,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#news:target) .ds-nav__link[href=\"#news\"]::before,\n.ds-page:has(#story:target) .ds-nav__link[href=\"#story\"]::before,\n.ds-page:has(#desk:target) .ds-nav__link[href=\"#desk\"]::before,\n.ds-page:has(#tip:target) .ds-nav__link[href=\"#tip\"]::before {\n content: \">\";\n margin-right: var(--space-1);\n}\n\n/* ---------- period components: menu, progress, accordion, tooltip, carousel, avatar ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus-visible {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-meter {\n margin: 0 0 var(--space-3);\n}\n.ds-meter__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-progress {\n display: block;\n height: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-progress__bar {\n display: block;\n height: 100%;\n background-color: var(--color-accent);\n background-image: repeating-linear-gradient(90deg, transparent 0, transparent var(--size-seg), var(--color-surface-strong) var(--size-seg), var(--color-surface-strong) var(--size-seg-gap));\n}\n.ds-progress--70 .ds-progress__bar { width: 70%; }\n.ds-accordion {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-tooltip {\n position: relative;\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n text-transform: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n display: block;\n}\n.ds-carousel {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin-right: var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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 text-shadow: none;\n vertical-align: middle;\n}\n\n:root {\n --size-tip: 220px;\n --size-menu: 150px;\n --size-avatar: 24px;\n --size-seg: 6px;\n --size-seg-gap: 8px;\n}\n", "specimen.html": "\n\n\n\n\nY2K futurism news sheet, 1999 to 2003: specimen\n\n\n\n\n
\n\n
\n
\n

Thursday 31 May 2001 | issue 214 | updated 14:20

\n \n
\n
\n

Today on the wire 14 stories, 3 reviews

\n
\n \n \n chronoskin\n \n hardware, software and the wire, every weekday\n
\n
\n \n
\n \n \n
\n
\n
\n \n
\n\n \n
\n
\n\n
\n
\n
\n Lead story\n

One gigahertz in a shirt pocket: the first handhelds that do not wait

\n

Three makers showed pocket machines this week that start in a second and run a day on two cells. We had all three on the bench.

\n

By the hardware desk | 31 May, 09:40 | 86 comments

\n
\n Read the story\n More from hardware\n
\n
\n \n \n \n \n \n \n \n
\n
\n\n
\n

The wire

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

Hardware

\n more\n
\n \n
\n\n
\n
\n

Software

\n more\n
\n \n
\n\n
\n
\n

Networks

\n more\n
\n \n
\n\n
\n
\n

On the bench this week

\n all results\n
\n \n \n \n \n \n \n \n \n \n \n \n
BoardChipFrames per secondPriceScore
Vector 64 proV3118.43299.1
Halo 32 dualH2104.92498.8
Prism twinP40097.21998.4
Vector 32V281.01497.9
Ember valueE162.7996.5
\n
\n\n
\n

Reader poll

\n
\n

Wire load72%

\n

EmbargoHeld until 06:00 local time

\n\n

What do you upgrade first?

\n \n \n \n
\n \n Results\n
\n
\n
\n\n
\n
\n Special report\n

The year of the pocket machine

\n

Six parts, part four today

\n
\n
\n Buyer's guide\n

A whole system for 900

\n

Updated monthly, past builds

\n
\n
\n Column\n

Notes from the server room

\n

Every Friday, all columns

\n
\n
\n Readers\n

Seen something? Tell the desk

\n

Tips are read daily, your tips

\n
\n
\n\n
\n
\n\n \n
\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Archive
    4. \n
  4. >
    5. \n
  5. May 2001
    6. \n
\n
\n
\n
\n Archive\n

Every story since issue 1

\n

2,140 stories, reviews and columns, newest first.

\n
\n
\n Send a tip\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
HeadlineDeskDateComments
One gigahertz in a shirt pocket NewHardware31 May86
The player that fits on a floppySoftware31 May33
Graphics cards: six boards, one winnerHardware30 May54
Wireless at home for under a hundredNetworks30 May27
Ten utilities we install firstSoftware29 May72
A quiet case for a loud processorHardware29 May19
The last mile is still copperNetworks28 May16
Why your second monitor flickersHardware28 May41
Skins are not a featureSoftware27 May118
Sharing one line between four machinesNetworks25 May38
\n \n
\n\n
\n \n
\n

Most read this week

\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Hardware
    4. \n
  4. >
    5. \n
  5. One gigahertz in a shirt pocket
    6. \n
\n
\n
\n
\n

One gigahertz in a shirt pocket: the first handhelds that do not wait

\n

By the hardware desk | 31 May 2001, 09:40 | 86 comments

\n

Three makers showed pocket machines this week that start in a second and run a day on two cells. We had all three on the bench.

\n

What changed

\n

Until this spring a handheld was a patient thing. The new chips draw a tenth of the power at rest, so the makers can spend the rest on speed.

\n
    \n
  • Start-up in under one second
    • \n
  • A full day on two ordinary cells
    • \n
  • A screen you can read in daylight
    • \n
\n

On the bench

\n

We ran the same address book, the same map and the same long document on all three. The differences are small and the prices are not.

\n

Running the test yourself

\n

The bench script is in the archive. Copy it to the machine and start it with bench --all --quiet; it writes one line per test.

\n
\n
\n
\n

Read next

\n archive\n
\n

\n Six boards, one winner\n A quiet case\n Wireless at home\n Send a tip\n Front page\n

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

In this story

\n
\n
    \n
  1. What changed
    2. \n
  2. On the bench
    3. \n
  3. Running the test yourself
    4. \n
\n

Part four of the special report on pocket machines.

\n
\n
\n
\n

From the wire

\n \n
\n
\n

Talk back

\n
\n

86 readers have had their say.

\n Join in\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Readers
    4. \n
  4. >
    5. \n
  5. My desk
    6. \n
\n
\n
\n
\n Readers\n

My desk

\n

Tips you sent in, what became of them, and the stories you kept.

\n
\n
\n Send a tip\n
\n
\n\n
    \n
  • 12Tips sent
    • \n
  • 5Became stories
    • \n
  • 214Comments posted
    • \n
  • 26Issues read
    • \n
\n\n
\n
\n

Note: The comment boards are read-only on Sunday between 02:00 and 04:00.

\n

Error: The picture sent with your last tip could not be read. Send it again as a smaller file.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
TipDeskSentStatus 
Price cut on the Vector boardsHardware29.05PublishedRead
Cable trial in the north endNetworks28.05In reviewEdit
Browser beta screenshotsSoftware27.05RejectedRemove
Quiet fan from a parts binHardware21.05PublishedRead
Free mail service closingNetworks17.05In reviewEdit
\n
\n \n \n \n \n
\n
\n\n
\n
\n

Remove tip

\n
\n

Take \"Browser beta screenshots\" off your desk? The news desk keeps its own copy.

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

Kept stories

\n
\n
\n

You have not kept a story yet.

\n Browse the archive\n
\n
\n
\n

Your last comments

\n \n
\n
\n

Desk rules

\n
\n

Tips stay on your desk for 90 days. Rejected tips can be sent again once.

\n

How tips are handled

\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Front page
    2. \n
  2. >
    3. \n
  3. Readers
    4. \n
  4. >
    5. \n
  5. Send a tip
    6. \n
\n
\n
\n
\n Readers\n

Send a tip

\n

Seen a price cut, a leak or a launch? The news desk reads every tip.

\n
\n
\n Back to my desk\n
\n
\n\n
\n

Error: One field needs another look before the tip can be sent.

\n
\n
\n

Your tip

\n how tips are handled\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Enter a complete address.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n\n
\n
\n

Before you send

\n
\n
    \n
  1. Say where you saw it.
    2. \n
  2. One tip per form.
    3. \n
  3. No press releases.
    4. \n
\n

The desk answers within two days.

\n
\n
\n
\n

Tips that ran this week

\n \n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.blog.s08.p02.t01.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-8212\",\n \"short\": \"v1-yk-8212\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000000;\n --color-canvas: #cccc99;\n --color-surface: #cccc99;\n --color-surface-alt: #c0c090;\n --color-surface-strong: #999999;\n --color-bar: #666666;\n --color-bar-text: #ffffff;\n --color-bar-alt: #999999;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #484848;\n --color-heading: #000000;\n --color-heading-alt: #000099;\n --color-link: #000099;\n --color-link-quiet: #000000;\n --color-link-visited: #505050;\n --color-link-hover: #000000;\n --color-link-active: #282828;\n --color-border: #999999;\n --color-border-strong: #666666;\n --color-border-muted: #a0a0a0;\n --color-accent: #99cccc;\n --color-accent-text: #000000;\n --color-accent-alt: #3366cc;\n --color-fill-1: #c8c898;\n --color-fill-2: #c0c090;\n --color-fill-3: #99cccc;\n --color-fill-4: #a0a0a0;\n --color-button: #3366cc;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #999999;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #666666;\n --color-disabled: #a0a0a0;\n --color-disabled-text: #585858;\n --color-danger: #800000;\n --color-danger-surface: #c8c898;\n --color-success: #709000;\n --color-warning: #ffcc00;\n --color-notice: #99cccc;\n --color-notice-text: #000000;\n --color-focus: #000099;\n --color-shadow: #282828;\n --color-overlay: #505050;\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, Geneva, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 9px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: uppercase;\n --link-decoration: 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: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 0;\n --radius-pill: 3px;\n --radius-page: 18px;\n --shadow-panel: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-control: inset 1px 1px 0 color-mix(in srgb, white 45%, transparent), inset -1px -1px 0 color-mix(in srgb, black 35%, transparent);\n --shadow-control-hover: inset 1px 1px 0 color-mix(in srgb, white 60%, transparent), inset -1px -1px 0 color-mix(in srgb, black 35%, transparent);\n --shadow-control-pressed: inset 1px 1px 0 color-mix(in srgb, black 35%, transparent), inset -1px -1px 0 color-mix(in srgb, white 45%, transparent);\n --shadow-dialog: 2px 2px 0 color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-text: 1px 1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar) 70%, white) 0, var(--color-bar) 30%, var(--color-bar) 65%, color-mix(in srgb, var(--color-bar) 68%, black) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt) 75%, white) 0, var(--color-bar-alt) 35%, var(--color-bar-alt) 70%, color-mix(in srgb, var(--color-bar-alt) 80%, black) 100%);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 78%, white) 0, color-mix(in srgb, var(--color-button) 85%, black) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 68%, white) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary) 78%, white) 0, color-mix(in srgb, var(--color-button-secondary) 88%, black) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }