{ "id": "v1-po-2212", "long_id": "v1.portals-2000s.portal.s02.p02.t01.u02", "name": "Tile 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 start page built as a mosaic of flat tinted tiles, the form broadcasters and directory sites gave their home pages between 2000 and 2004: a 770px sheet centred on a 1024px screen, with no sidebar column and no rail, only blocks of tint of different sizes fitted together with 5px gutters. Each tile opens with a large bold title set straight on the tint, without a title bar, and holds a few lines of 10px to 11px text or links; navigation is one strip of cells across the top. It gave way from about 2005 to wider pages with gradients, rounded corners and photographs.", "url": "https://chrono.skin/s/v1-po-2212", "preview_url": "https://chrono.skin/s/v1-po-2212/specimen.html", "files": { "STYLE.md": "# Tile portal, 2000 to 2004\n\n## Summary\n\nA start page built as a mosaic of flat tinted tiles, the form broadcasters and directory sites gave their home pages between 2000 and 2004: a 770px sheet centred on a 1024px screen, with no sidebar column and no rail, only blocks of tint of different sizes fitted together with 5px gutters. Each tile opens with a large bold title set straight on the tint, without a title bar, and holds a few lines of 10px to 11px text or links; navigation is one strip of cells across the top. It gave way from about 2005 to wider pages with gradients, rounded corners and photographs.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 770px; `.ds-page__frame` is a sheet of that width centred in the window (`margin: 0 auto`) and `--color-page` shows on both sides. Do not pin it to the left and do not stretch it. `.ds-page` pads the window by `--space-4` (5px).\n- Navigation is at the top and is one strip, not a masthead plus a bar: `.ds-nav__strip` holds the wordmark cell on the left and the section cells pushed to the right, divided by 1px lines; the current section is a cell filled with the accent. Under it `.ds-nav__band` is a thinner strip with service links on the left and the date on the right. There is no search box in the header: search is a tile.\n- The home page has three stages, each `--space-4` below the last. First `.ds-page__top`, two tiles side by side: the search tile (`--size-col-a`, 275px) and the `.ds-hero` filling the rest. Then `.ds-page__mosaic`, three columns of stacked tiles: `--size-col-a` 275px, `--size-col-b` 200px and the remainder (285px); every column is a `.ds-page__col`, and the last tile of a column (a `.ds-sidebar` tile included) takes `.ds-tile--grow` so the three columns end level. Then `.ds-grid`, four equal tiles across the whole sheet. Two half-width tiles inside a column go in `.ds-page__pair`.\n- No column is a sidebar. `.ds-sidebar` is a tile like the others and sits wherever a group of links is needed.\n- Inner pages keep the strip and the footer and have no search tile and no hero. `.ds-breadcrumb` replaces the service band directly under the strip (the specimen hides the band whenever an inner view is open). Then `.ds-page__band` stacks full-width blocks 5px apart: `.ds-page-header` (a tile with the title, one line of text and the page's button on the right), and where the page has them the `.ds-stat` tile and a `.ds-block` in which `.ds-tabs` sits directly on the `.ds-table` it switches. Below that `.ds-page__mosaic--inner` has two columns: a wide working column (490px) of tiles holding the list, form or article text, and a `--size-col-a` (275px) column of tiles on the right holding the section's `.ds-sidebar`, notices and small panels; the last tile of each column takes `.ds-tile--grow` so the two columns end level. An article page has no band: its headline, in the first tile of the wide column, heads the page.\n- Views. The specimen is one example site of five screens, one showing at a time, with the strip and the footer written once around them. `home` is the mosaic start page. `news` is the story list: page header, then a tile of pictured list items with pagination beside a column of news tiles. `article` is one story: article text and a tile of related links beside the section's tiles. `events` is the signed-in listings page: page header, stat tile, tabs on the table, then the selected event with its buttons, the withdraw message box and the empty past-events tile. `submit` is the form page: page header, the form tile, and notices and advice in the narrow column. The strip marks News for `news` and `article` and Listings for `events` and `submit`.\n- Spacing scale: `--space-1` 1px is the grid line between table cells and between tabs; `--space-2` 2px is the gap between index and pagination cells and the padding inside controls; `--space-3` 4px is the vertical padding of strips, cells and table cells and the gap under a tile title; `--space-4` 5px is every gutter between tiles and the top padding of a tile; `--space-5` 10px is the side and bottom padding of every tile, bar and cell and the gap between paragraphs; `--space-6` 14px is list indent and the padding around a dialog. There is no larger step.\n- Fixed sizes: `--size-figure` 240px by `--size-figure-height` 170px is the hero picture slot; `--size-thumb` 64px by `--size-thumb-height` 48px a list picture; `--size-cell` 18px an index or page-number cell (the brand tile is this plus `--space-3`); `--size-search` 170px the search input; `--size-field` 220px a form input; `--size-area` a textarea; `--size-dialog` 320px a message box.\n- Things are separated by the 5px gutter and a change of tint. Inside a tile, parts are divided by a single 1px rule in `--border-style`. Tiles have no border and no title bar; only `.ds-panel`, the table head, the current tab and the dialog carry a bar.\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__top` is the search-plus-hero row; `.ds-page__mosaic` the three columns (`--inner` for the two-column inner page); `.ds-page__col` one column; `.ds-page__pair` two half tiles; `.ds-page__band` the full-width stack of an inner page; `.ds-page__legal` the centred copyright block with `.ds-page__legal-name`. `.ds-block` groups tabs, table and caption so they touch.\n- `.ds-brand`: the site's mark and name, the first cell of the navigation strip and a link to the home page, once per page. `.ds-brand__mark` is a 22px tile (`--size-cell` plus `--space-3`) 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 16px bold wordmark in `--font-heading` with the heading tracking and transform, in `--color-bar-text` because the strip is the primary bar. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: `.ds-nav__strip` with the `.ds-brand` (it also takes `.ds-nav__brand`, the padding of a strip cell) and `.ds-nav__links` of `.ds-nav__item` cells; `.ds-nav__link` with `is-current` is the accent cell; in the specimen the open view marks its cell through `:has()` rules, one per view. `.ds-nav__band` holds `.ds-nav__band-links` (`.ds-nav__band-item`, `.ds-nav__band-link`) and the date; home page only.\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, a 10px trail on a khaki strip under the navigation strip: quiet links, `.ds-breadcrumb__sep` (`>`), bold `.ds-breadcrumb__current`.\n- `.ds-tile`: the unit of the page. Plain is `--color-surface-alt`; `--1` to `--4` take the fills; `--grow` stretches the last tile of a column. `.ds-tile__title` is the 16px title (inside `.ds-tile__head` when it has `.ds-tile__tools` links on its right). Body helpers: `.ds-tile__text`, `.ds-tile__label` (a bold lead-in line), `.ds-tile__list` (indented link list), `.ds-tile__part` (a part below a ruled line), `.ds-tile__row`.\n- `.ds-search`: a tile that is a search form: title, `.ds-search__row` (input and button), `.ds-search__options` (radio choices), then popular searches. One per home page, top left.\n- `.ds-hero`: the top right tile of the home page. `.ds-hero__figure`, a picture slot that fills its left 240px edge to edge, and `.ds-hero__body` on a tint with the 19px `.ds-hero__title`, `.ds-hero__text` and `.ds-hero__actions`, a short list of bold links whose first is the main action (`.ds-hero__action`). No button, no banner, no overlay text.\n- `.ds-page-header`: head of an inner page, a full-width tile: `.ds-page-header__title` (19px, the only h1), one line of `.ds-page-header__text`, and `.ds-page-header__action` holding one `.ds-button` at the right.\n- `.ds-stat`: the row. One tile cut into three to five `.ds-stat__item` cells by ruled lines; each has a 19px bold `.ds-stat__value` with a 10px `.ds-stat__label` to its right. No icons and no trend arrows.\n- `.ds-prose`: article text inside a plain tile: 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`: blue link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text colour; `.ds-link--hot` the promoted entry; `.ds-link--strong` makes a link bold, which is how this style marks the important one. `.ds-links` lays a row of links out.\n- `.ds-button`: bevelled button, bold, for the main action. `.ds-button--secondary` is the lighter one. `.ds-button--danger` keeps the bevel and sets the label in `--color-danger`; never fill a button red. `disabled` or `is-disabled` greys it; `is-active` presses the bevel in. Group with `.ds-buttons`. A link that leads to another page and looks like a button is an `` with the same classes.\n- `.ds-form`: the body of a tile. Each `.ds-form__row` stacks a bold `.ds-form__label` (optional `.ds-form__hint`) above its control. Controls take `.ds-form__input` (`--small` 170px, `--auto` for selects, `--fill` beside a button in a narrow tile, `--area` for textareas); `is-invalid` plus `.ds-form__error` marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes and radios; `.ds-form__actions` is the button row above a ruled line.\n- `.ds-table`: every cell is a small khaki tile and the sheet shows between them as a 1px grid; dark `th`, `.ds-table__num` right-aligned, `is-up` (in `--color-success`) and `is-down` (in `--color-danger`) to colour a change. `.ds-table__caption` is the 10px tinted line under it.\n- `.ds-tabs`: a strip of equal-width `.ds-tabs__tab` cells inside `.ds-tabs__item`, 1px apart, across the full width of what they switch; `is-current` is the bar colour with white text.\n- `.ds-list`: items with a 64px `.ds-list__thumb` picture slot on the left, a bold `.ds-list__title` link and a 10px `.ds-list__meta` line (optional `.ds-list__text`), divided by ruled lines. `.ds-list--plain` is the one-line variant without pictures.\n- `.ds-panel`: the one box with a title bar, for things the visitor fills in: `.ds-panel__title` over an outlined `.ds-panel__body`, with `.ds-panel__text`, `.ds-panel__row` (input and button) and `.ds-panel__small`. `.ds-panel--alt` has the grey title; `.ds-panel--inverse` is the dark block, at most one per page.\n- `.ds-index` and `.ds-directory`: inside a tile, a row of 18px `.ds-index__cell` letter cells in the sheet colour, and a two-column list of categories, each a bold `.ds-directory__title` over a 10px `.ds-directory__text` line of sub-links.\n- `.ds-grid`: the closing row of the home page, four `.ds-grid__cell` tiles across the sheet tinted `--1`, `--2`, `--3` or the base fill; each has a `.ds-grid__mark` picture slot, a 13px `.ds-grid__title` link and a 10px `.ds-grid__text` line.\n- `.ds-sidebar`: a tile of grouped links: 16px `.ds-sidebar__title` over a two-column `.ds-sidebar__list` (`--single` for one column) of `.ds-sidebar__item` quiet links; `is-current` makes the open page bold.\n- `.ds-badge`: square 10px bold label on the accent. `.ds-badge--alt` is bare text in the second accent; `.ds-badge--count` a muted count in parentheses. Status labels change the fill: `.ds-badge--success` green with white text, `.ds-badge--warning` yellow with dark text, `.ds-badge--danger` red with white text. One word each, in a table's status column or after a link.\n- `.ds-notice`: outlined message with a bold `.ds-notice__title` on its own line. `.ds-notice--error` uses the danger colour for text and border. Stack several in `.ds-notices`.\n- `.ds-pagination`: a row of cells 2px apart under a list: `.ds-pagination__link` cells in the strong surface, the current page as `.ds-pagination__current` in the bar colour.\n- `.ds-dialog`: the era's message box, in the page flow: 320px box with a 1px outline, bar-coloured `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and left-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat area it sits on.\n- `.ds-empty`: a plain tile with a centred muted `.ds-empty__text` and one button; it may sit inside a titled tile of the same tint.\n- `.ds-footer`: `.ds-footer__bar`, a grey strip of `.ds-footer__item` entries with `.ds-footer__link`, then the centred `.ds-page__legal`.\n\n## Never\n\n- `row-gap <= 10px`: list and table rows touch or are a 1px line apart.\n- `block-gap <= 10px`: neighbouring tiles sit 5px apart, never further.\n- `content-width <= 776px`: the sheet is fixed at 770px on a 1024px screen and does not stretch.\n- `palette-colours <= 18`: two olives, four khakis, two greys and one blue; no further hue.\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 tile and cell is square.\n- `border-width <= 2px`: 1px dashed rules, 2px bevels on controls.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 0%`: fills are flat colour.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Almost anything new is a `.ds-tile`: pick a tint, open with a `.ds-tile__title`, and put a short link list, a few lines of text or a small form under it; divide parts with `.ds-tile__part`, not with nested boxes. Give it a place in the mosaic by adding it to a `.ds-page__col` and let the last tile of the column grow. Something the visitor fills in copies `.ds-panel`; a row of small choices copies `.ds-index` or `.ds-pagination` cells; a new inner page copies one of the specimen's inner views (breadcrumb, `.ds-page-header`, stat tile, tabs on a table, then two columns of tiles). 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 tiles 5px apart, corners square and fills flat; never add a sidebar column, a title bar on a tile, a border around a tile, whitespace between sections, cards, shadows or rounded containers.\n", "components.css": "/* Layout tokens (structure part). A mosaic of tiles: three fixed columns\n inside a 770px sheet, 5px gutters, 10px tile padding. */\n:root {\n --size-page: 770px;\n --size-col-a: 275px;\n --size-col-b: 200px;\n --size-figure: 240px;\n --size-figure-height: 170px;\n --size-thumb: 64px;\n --size-thumb-height: 48px;\n --size-cell: 18px;\n --size-search: 170px;\n --size-field: 220px;\n --size-area: 6em;\n --size-dialog: 320px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 5px;\n --space-5: 10px;\n --space-6: 14px;\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 sheet, centred in the window. Its colour is what shows in the\n gutters between tiles. */\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/* Top row of the home page: the search tile beside the hero. */\n.ds-page__top {\n display: grid;\n grid-template-columns: var(--size-col-a) minmax(0, 1fr);\n gap: var(--space-4);\n padding: var(--space-4) 0 0;\n}\n/* The mosaic: three columns of stacked tiles. */\n.ds-page__mosaic {\n display: grid;\n grid-template-columns: var(--size-col-a) var(--size-col-b) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: stretch;\n padding: var(--space-4) 0;\n}\n/* Inner page: one wide working column and one column of tiles. */\n.ds-page__mosaic--inner {\n grid-template-columns: minmax(0, 1fr) var(--size-col-a);\n}\n.ds-page__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n/* A full-width band of the inner page, above the columns. */\n.ds-page__band {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-4) 0 0;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n}\n.ds-page__legal {\n margin: 0;\n padding: var(--space-5) var(--space-5) var(--space-6);\n font-size: var(--text-small);\n color: var(--color-text);\n text-align: center;\n}\n.ds-page__legal-name {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n\n/* ---------- views ---------- */\n/* The specimen is one site of several screens; one view shows at a time. */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link--hot,\n.ds-link--hot:visited,\n.ds-link--hot.is-visited {\n color: var(--color-accent-alt);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: 0 0 var(--space-5);\n}\n\n/* ---------- nav ---------- */\n/* One strip of cells: the wordmark cell, then one cell per section, divided\n by 1px lines. Under it a thinner band of service links and the date. */\n.ds-nav {\n display: block;\n}\n.ds-nav__strip {\n display: flex;\n align-items: stretch;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__brand {\n padding: var(--space-3) var(--space-5);\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: calc(var(--size-cell) + var(--space-3));\n height: calc(var(--size-cell) + var(--space-3));\n padding: var(--space-1);\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-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\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__links {\n display: flex;\n flex: 1 1 auto;\n justify-content: flex-end;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__item {\n display: flex;\n border-left: var(--border-width) solid var(--color-bar-text);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n padding: var(--space-3) var(--space-5);\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(#article:target) .ds-nav__link[href=\"#news\"],\n.ds-page:has(#events:target) .ds-nav__link[href=\"#events\"],\n.ds-page:has(#submit:target) .ds-nav__link[href=\"#events\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n.ds-nav__band {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar-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/* The service band belongs to the home page: an inner page shows its\n breadcrumb in that place. */\n.ds-page:has(.ds-view:not(.ds-view--home):target) .ds-nav__band {\n display: none;\n}\n.ds-nav__band-links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__band-item,\n.ds-footer__item {\n padding: 0 var(--space-4);\n border-left: var(--border-width) solid currentColor;\n}\n.ds-nav__band-item:first-child,\n.ds-footer__item:first-child {\n padding-left: 0;\n border-left: 0;\n}\n.ds-nav__band-link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__band-link:hover,\n.ds-nav__band-link.is-hover {\n text-decoration: var(--link-decoration-hover);\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-5);\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/* ---------- tile ---------- */\n/* The unit of the page: a flat block of tint with a large title and no\n title bar. Tiles never touch; the sheet shows between them. */\n.ds-tile {\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-surface-alt);\n border-radius: var(--radius-page);\n}\n.ds-tile--1 { background: var(--color-fill-1); }\n.ds-tile--2 { background: var(--color-fill-2); }\n.ds-tile--3 { background: var(--color-fill-3); }\n.ds-tile--4 { background: var(--color-fill-4); }\n.ds-tile--grow {\n flex: 1 1 auto;\n}\n.ds-tile__head {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-tile__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-tile__head .ds-tile__title {\n margin: 0;\n}\n.ds-tile__tools {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-tile__text {\n margin: 0 0 var(--space-3);\n}\n.ds-tile__text:last-child {\n margin-bottom: 0;\n}\n.ds-tile__label {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-tile__list {\n margin: 0;\n padding: 0 0 0 var(--space-5);\n list-style: none;\n}\n/* A part of a tile set off by a ruled line. */\n.ds-tile__part {\n margin: var(--space-5) 0 0;\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tile__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n\n/* ---------- search tile ---------- */\n.ds-search {\n margin: 0;\n}\n.ds-search__row {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0 var(--space-4);\n}\n.ds-search__options {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n padding: 0 0 var(--space-5);\n}\n\n/* ---------- hero ---------- */\n/* A picture slot filling the left of the tile, the feature text on a tint\n to its right. */\n.ds-hero {\n display: grid;\n grid-template-columns: var(--size-figure) minmax(0, 1fr);\n min-height: var(--size-figure-height);\n background: var(--color-fill-2);\n border-radius: var(--radius-page);\n}\n.ds-hero__figure {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n min-height: var(--size-figure-height);\n background: var(--color-surface-strong);\n color: var(--color-border-strong);\n}\n.ds-hero__body {\n padding: var(--space-4) var(--space-5) var(--space-5);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-5);\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}\n.ds-hero__text {\n margin: 0 0 var(--space-5);\n}\n.ds-hero__actions {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-hero__action {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header ---------- */\n/* Head of an inner page: one full-width tile. */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-page-header__text {\n margin: 0;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- stats ---------- */\n/* One tile cut into cells by ruled lines: the figure on the left of its\n label. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: var(--space-4) 0;\n list-style: none;\n background: var(--color-surface-alt);\n border-radius: var(--radius-page);\n}\n.ds-stat__item {\n display: flex;\n flex: 1 1 0;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n margin: 0;\n padding: 0 var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\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 color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); color: var(--color-heading-alt); }\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 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-2) var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width-strong) outset var(--color-border-muted);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\n/* Labels sit above their fields; the form is the body of a tile. */\n.ds-form {\n margin: 0;\n}\n.ds-form__row {\n padding: 0 0 var(--space-5);\n}\n.ds-form__label {\n display: block;\n padding: 0 0 var(--space-2);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width-strong) inset var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n/* Takes whatever its row leaves beside a button. */\n.ds-form__input--fill {\n flex: 1 1 0;\n width: 100%;\n min-width: 0;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-4) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- table ---------- */\n/* Every cell is its own small tile: the sheet shows as a 1px grid. */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: var(--space-1);\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-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-3) var(--space-5);\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-3) var(--space-5);\n background: var(--color-fill-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs ---------- */\n/* A strip of equal cells, 1px apart, directly on top of what it switches. */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0 0 var(--space-1);\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n flex: 1 1 0;\n}\n.ds-tabs__tab {\n display: block;\n flex: 1 1 auto;\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n text-align: center;\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 background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- list ---------- */\n/* Items with a small picture slot on the left, divided by ruled lines. */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: var(--size-thumb) minmax(0, 1fr);\n column-gap: var(--space-5);\n padding: var(--space-4) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n border-top: 0;\n padding-top: 0;\n}\n.ds-list__thumb {\n box-sizing: border-box;\n width: var(--size-thumb);\n height: var(--size-thumb-height);\n background: var(--color-surface-strong);\n color: var(--color-border-strong);\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/* One-line variant without pictures. */\n.ds-list--plain .ds-list__item {\n display: block;\n padding: var(--space-2) 0;\n border-top: 0;\n}\n.ds-list--plain .ds-list__meta {\n display: inline;\n}\n\n/* ---------- panel ---------- */\n/* The one box with a title bar, for things the visitor fills in. */\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-3) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-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) var(--space-5) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: 0;\n}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__small {\n margin: var(--space-3) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n gap: 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.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 padding-bottom: 0;\n}\n.ds-panel--inverse .ds-panel__body {\n border-color: transparent;\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\n/* ---------- index ---------- */\n/* A row of small letter cells. */\n.ds-index {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-index__cell {\n display: block;\n box-sizing: border-box;\n width: var(--size-cell);\n padding: var(--space-2) 0;\n background: var(--color-canvas);\n color: var(--color-link-quiet);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-index__cell:hover,\n.ds-index__cell.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-directory {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-directory__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-directory__text {\n display: block;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- grid ---------- */\n/* The closing row of the home page: four equal tiles across the sheet. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n padding: 0 0 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 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__mark {\n display: block;\n width: var(--size-thumb-height);\n height: var(--size-thumb-height);\n margin: 0 0 var(--space-3);\n background: var(--color-canvas);\n color: var(--color-border-strong);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- sidebar ---------- */\n/* A tile of grouped links. */\n.ds-sidebar {\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-surface-alt);\n border-radius: var(--radius-page);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\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-sidebar__list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: var(--space-5);\n margin: 0;\n padding: 0 0 0 var(--space-5);\n list-style: none;\n}\n.ds-sidebar__list--single {\n grid-template-columns: 1fr;\n}\n.ds-sidebar__item {\n padding: 0;\n}\n.ds-sidebar__item.is-current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n vertical-align: baseline;\n}\n.ds-badge--alt {\n background: transparent;\n color: var(--color-accent-alt);\n padding: 0;\n}\n.ds-badge--count {\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n padding: 0;\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-bar-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-bar-text);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* ---------- pagination ---------- */\n/* A row of number cells, 2px apart. */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\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 font-weight: var(--weight-bold);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n box-sizing: border-box;\n min-width: var(--size-cell);\n padding: var(--space-2) var(--space-3);\n text-align: center;\n}\n.ds-pagination__link {\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- dialog ---------- */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-6);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\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 gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface-alt);\n border-radius: var(--radius-page);\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-5);\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/* ---------- block ---------- */\n/* Groups a tab strip, a table and its caption so they touch. */\n.ds-block {\n display: block;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tile portal, 2000 to 2004: specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n \n Thursday 16th October\n
\n
\n\n
\n
\n
\n

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

Popular searches right now:

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

Autumn on the allotment

\n

From leaf mould to late leeks, our growers explain what to dig, what to sow and what to leave well alone before the first frost.

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

News

\n Listen | Watch\n
\n \n
\n More news...\n
\n
\n\n
\n
\n

Sport

\n \n
\n
\n

Listings

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

Where you live

\n
\n

For local news and listings, enter your postcode or town.

\n
\n \n \n
\n

e.g. MB4 2QT or Ashby NEW

\n
\n
\n\n
\n

Weather

\n

Bright spells, showers by evening.
Min 6°C, max 13°C

\n

Five-day forecast

\n
\n

What's on locally:

\n \n
\n
\n

Schools:

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

Your say

\n

\"The new bus station has a roof but nowhere to sit.\" Join the message boards.

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

chronoskin directory

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

Shop

\n

Books, maps and recordings

\n
\n
\n \n

Learning

\n

Courses for every age

\n
\n
\n \n

Young chronoskin

\n

Stories, puzzles and painting

\n
\n
\n \n

On your phone

\n

Headlines by text message

\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. News
    4. \n
  4. >
    5. \n
  5. Front page
    6. \n
\n\n
\n
\n
\n

News

\n

Today's stories from the chronoskin newsroom, newest first.

\n
\n
\n Send us a story\n
\n
\n
\n\n
\n
\n
\n
\n

Front page

\n Listen | Watch\n
\n \n \n
\n
\n\n
\n \n\n
\n

News where you live

\n
\n

Enter your postcode or town for stories from your area.

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

Most read

\n \n
\n\n
\n

Listen again

\n
\n

The breakfast news programme is kept for seven days.

\n Hear this morning's edition\n
\n
\n\n
\n

Your say

\n

\"The new bus station has a roof but nowhere to sit.\" Join the message boards.

\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. News
    4. \n
  4. >
    5. \n
  5. Viaduct to reopen
    6. \n
\n\n
\n
\n
\n
\n

Viaduct to reopen after two-year repair

\n

By the newsroom, 16 October, 9.20am | 31 comments

\n

Trains will cross the valley again from Monday week, two years after storm water undermined the third pier.

\n

Engineers finished the last of the stonework on Tuesday. A test train ran in both directions yesterday and the line was handed back to the operator in the afternoon.

\n

What changes for passengers

\n

The replacement buses stop running on the Sunday night. From Monday the journey to the junction takes eleven minutes again, not forty.

\n
    \n
  • First train at 6.12am, last at 11.40pm
    • \n
  • Two trains an hour on weekdays
    • \n
  • Season tickets bought for the bus stay valid
    • \n
\n

Checking your train

\n

Times are on the station boards and by text message: send TRAIN ASHBY to the chronoskin travel line.

\n
\n
\n\n
\n

More on this story

\n

\n The repair in pictures\n How the storm closed the line\n New timetable in full\n Send us your photographs\n Back to the front page\n

\n
\n

Your comments:

\n

\"Two years of the bus has taught me the name of every pothole on the valley road.\" Read all 31

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

Also in the news

\n \n
\n\n
\n

Reopening day

\n
\n

A brass band plays the first train out. It is in the listings.

\n See what's on\n
\n
\n\n
\n

Weather

\n

Bright spells, showers by evening.
Min 6°C, max 13°C

\n

Five-day forecast

\n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Listings
    4. \n
  4. >
    5. \n
  5. My events
    6. \n
\n\n
\n
\n
\n

My events

\n

Events you have sent to the chronoskin listings pages.

\n
\n
\n Add an event\n
\n
\n\n
    \n
  • 6Events listed
    • \n
  • 2Awaiting approval
    • \n
  • 418Views this week
    • \n
  • 27Reminders set
    • \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
EventVenueDatePlacesStatus 
Beginners' beekeepingAshby village hall18 Oct24ListedEdit
Canal towpath walkLock 14 car park19 Oct40ListedEdit
Brass band open rehearsalMill Lane chapel23 Oct120AwaitingEdit
Apple pressing dayCommunity orchard26 Oct0FullEdit
Lantern-making workshopCentral library1 Nov15ListedEdit
\n

Events awaiting approval appear within one working day. How listings are checked

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

Apple pressing day

\n

Community orchard, 26 October. All 30 places are taken and 11 people have set a reminder.

\n
\n Edit event\n \n \n \n
\n
\n\n
\n
\n

Withdraw event

\n
\n

Take \"Apple pressing day\" off the listings pages? People with reminders will be told.

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

Past events

\n
\n

You have no past events yet. They move here the day after they happen.

\n Add an event\n
\n
\n
\n\n
\n \n\n

Please note Listings will be read-only on Sunday morning from 2am to 4am.

\n\n
\n

Reminders

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

This weekend

\n \n
\n
\n
\n
\n\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. My events
    4. \n
  4. >
    5. \n
  5. Add an event
    6. \n
\n\n
\n
\n
\n

Add an event

\n

Listings are free. We check each one before it appears.

\n
\n
\n Back to my events\n
\n
\n
\n\n
\n
\n
\n

About the event

\n
\n
\n \n \n
\n
\n \n \n Please give the day, month and year.\n
\n
\n \n \n
\n
\n Suitable for\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n
\n
\n

Not saved We could not read the date. Correct it and send the event again.

\n

Please note Events sent after 4pm on Friday are checked on Monday.

\n
\n\n
\n

Writing a good listing

\n

A listing has about two lines to persuade someone to leave the house. Say what happens, where, and what it costs.

\n

Always include:

\n
    \n
  • The day, date and start time
    • \n
  • The price, or the word \"free\"
    • \n
  • A telephone number for questions
    • \n
\n
\n\n \n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s02.p02.t01.u02\",\n \"library\": \"2026.10.07-2111\",\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-2212\",\n \"short\": \"v1-po-2212\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #faf8e3;\n --color-surface: #f5f4db;\n --color-surface-alt: #ebebb4;\n --color-surface-strong: #b0b249;\n --color-bar: #666633;\n --color-bar-text: #ffffff;\n --color-bar-alt: #999999;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #333333;\n --color-inverse-text: #f5f4db;\n --color-text: #333333;\n --color-text-muted: #666666;\n --color-heading: #333333;\n --color-heading-alt: #666633;\n --color-link: #083090;\n --color-link-quiet: #333333;\n --color-link-visited: #666666;\n --color-link-hover: #000000;\n --color-link-active: #cc0000;\n --color-border: #b0b249;\n --color-border-strong: #666666;\n --color-border-muted: #edebc6;\n --color-accent: #ebebb4;\n --color-accent-text: #333333;\n --color-accent-alt: #083090;\n --color-fill-1: #ebebb4;\n --color-fill-2: #edebc6;\n --color-fill-3: #f1eed1;\n --color-fill-4: #f5f4db;\n --color-button: #ffffff;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #f5f4db;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #edebc6;\n --color-disabled-text: #999999;\n --color-danger: #cc0000;\n --color-danger-surface: #f8e0d8;\n --color-success: #009933;\n --color-warning: #ffcc00;\n --color-notice: #ffffff;\n --color-notice-text: #333333;\n --color-focus: #333333;\n --color-shadow: #333333;\n --color-overlay: #edebc6;\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 --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: 2px;\n --border-style: dashed;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: var(--color-page) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.3'/%3E%3Crect x='2' y='2' width='1' height='1' fill='white' fill-opacity='.3'/%3E%3C/svg%3E\");\n --fill-bar: var(--color-bar) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.1'/%3E%3Crect x='0' y='2' width='1' height='1' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\");\n --fill-bar-alt: var(--color-bar-alt) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.1'/%3E%3Crect x='0' y='2' width='1' height='1' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\");\n --fill-inverse: var(--color-inverse) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.1'/%3E%3Crect x='0' y='2' width='1' height='1' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\");\n --fill-accent: var(--color-accent) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.1'/%3E%3Crect x='0' y='2' width='1' height='1' fill='black' fill-opacity='.1'/%3E%3C/svg%3E\");\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button-secondary);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }