{ "id": "v1-po-2b8a", "long_id": "v1.portals-2000s.portal.s02.p11.t08.u10", "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-2b8a", "preview_url": "https://chrono.skin/s/v1-po-2b8a/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-heading` (a serif in this style's own type set) is the wordmark, tab labels, page and section titles, prices and figures. `--font-body` is running text and table cells. `--font-ui` is buttons, inputs, the step line, table heads and all 10px small print. `--font-mono` is fare codes. One reference set its headings in a commercial serif; Georgia, then Times New Roman, is the stand-in.\n- `--text-base` 12px is body text; `--text-small` and `--text-ui` 10px are meta lines, captions, buttons and table heads; `--text-large` 13px is the hero text, table prices and large buttons. `--text-h3` 12px is panel and legend titles, `--text-h2` 15px section titles, tab labels, grid titles and list prices, `--text-h1` 21px page titles, the hero title, stat figures, leg times and grid prices, `--text-display` 26px the wordmark and the hero price, set in `--weight-display`.\n- `--line-body` is 1.3; headings are 1.05. Headings are not uppercased and not tracked.\n- `--color-page` shows outside the sheet; `--color-canvas` is the sheet and `--color-surface` the table rows, panels and forms. `--color-surface-alt` fills the search desk, the tab strips, the sidebar, stat cells, alternate list rows and form action rows; `--color-surface-strong` fills resting navigation tabs, table heads, form legends, the dialog title and the current page number. Text on both is `--color-text`, `--color-heading` and `--color-link-quiet` or `--color-link`.\n- `--color-bar` (through `--fill-bar`) with `--color-bar-text` is the top band, the title of the search desk and of panels. `--color-bar-alt` with `--color-bar-alt-text` is the open navigation tab, the step line and the title of `.ds-panel--alt`. `--color-inverse` (through `--fill-inverse`) with `--color-inverse-text` is the price block of the hero and `.ds-panel--inverse`, where links take `--color-accent`.\n- `--color-accent` with `--color-accent-text` is the badge, the number of the current step and the small square markers before section titles and link rows. `--color-accent-alt` is bare emphasis text such as a price drop.\n- `--color-fill-2` tints the hero and the chosen row of a table; `--color-fill-1` the legs of a journey and the first grid cell; `--color-fill-2`, `--color-fill-3` and `--color-fill-4` the other grid cells. Text on a fill is `--color-text`, `--color-link`, `--color-heading` and `--color-heading-alt`.\n- `--color-link` underlined is every link in the work, the sort line included; `--color-link-quiet` is the breadcrumb, resting tab labels and footer links. `--color-heading` is page titles; `--color-heading-alt` is section titles, prices in lists and grid cells, and h2 in articles.\n- `--color-border` is outlines and the rules between table rows; `--color-border-strong` the heavy rules (under the page header and table head, over stat cells and the sidebar, the foot of the sheet) and the outline of buttons, the search desk and the dialog; `--color-border-muted` the rules between list rows.\n- The primary button is `--fill-button` with `--color-button-text`, outlined in `--color-border-strong` with a `--border-width-strong` foot, `--radius-control` and `--shadow-control`. The destructive button is filled with `--color-danger` and lettered in `--color-bar-text`. `--color-success` and `--color-warning` are badge fills only.\n- One-off values built in `components.css` without a token: the square markers are a `linear-gradient()` of `--color-accent` sized `--space-3` or `--space-4`; a transparent top border reserves the height of the current tab's edge; `calc()` sums of spacing steps set a few paddings.\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- Black, orange and sand. `--color-page` #f7eac7 (sand) surrounds a white `--color-canvas` and white `--color-surface`. `--color-surface-alt` #f3f3f3 fills sidebars, forms and alternate rows; `--color-surface-strong` #cccc99 (khaki) is sidebar title strips and inactive tabs.\n- `--color-bar` #000000 with white text is the link bar, panel titles, table heads and the current tab; `--color-bar-alt` #ff6600 with white text is the utility strip, footer strip and alternate panel titles. `--color-inverse` #000066 with white text is the one dark block.\n- `--color-text` #000000; `--color-text-muted` #666666; `--color-heading` #333333; `--color-heading-alt` #cc3300 (burnt orange) for section titles and h3.\n- `--color-link` #0000cc, `--color-link-quiet` #000099, visited #333366, hover #ff6600, active #ff0000. `--color-accent` #ffcc00 with black text is the badge, the current navigation item and links on the dark block; `--color-accent-alt` #ff0000 marks promoted entries.\n- Block fills are warm and pale: `--color-fill-1` #f7eac7, `--color-fill-2` #f3f3f3, `--color-fill-3` #ffffcc, `--color-fill-4` #eeeeee. Rules `--color-border` #cccccc, outlines `--color-border-strong` #808080.\n- `--color-button` #cccccc, secondary #f3f3f3, black labels. `--color-danger` #cc0000 on `--color-danger-surface` #ffffcc. The palette has no green: `--color-success` is the olive #999966; `--color-warning` is #ffcc00. Both are badge fills only.\n\n- Ruled like a broadsheet. `--border-style` is dotted: every 1px rule and outline is a row of dots. `--border-width-strong` 3px: heavy rules are thick dotted lines and controls have a 3px bevel. Every radius is 0 and nothing casts a shadow at rest; a pressed button gains a 1px inset line.\n- No gradients. `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are the plain colour underscored along the bottom edge by a light hairline over a dark 2px line, drawn as a pattern; `--fill-page` lays a faint newsprint dither over the page colour; `--fill-panel` is `--color-surface-alt`, so boxes are tinted. A hovered button takes `--color-surface-strong`. `--focus-ring` is 2px solid; `--transition` none.\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- `.ds-carousel`: marks the lead block as a rotator; `.ds-carousel__dots` is its row of numbered `.ds-carousel__dot` buttons, the showing one `.is-current`. Static: one slide is in the page.\n- `.ds-accordion`: a list of questions or help topics as `
` with `.ds-accordion__summary` (a plus or minus box before it) and `.ds-accordion__body`. Use it for FAQs and help, not for navigation.\n\n## Never\n\n- `row-gap <= 10px`: list and table rows touch 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 <= 22`: black, orange, navy, sand, khaki, yellow and greys; no green, no violet.\n- `font-size <= 26px`: the largest text is the 26px wordmark and hero price.\n- `font-size >= 10px`: nothing is set below 10px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 4`: a serif for titles, two sans-serifs, a monospace for codes.\n- `letter-spacing <= 0px`: no text is tracked.\n- `uppercase-text <= 0%`: nothing is uppercased by CSS.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 3px`: 1px dotted rules, 3px heavy rules and bevels.\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\n/* ---------- carousel ---------- */\n/* The lead block as a rotator: numbered buttons name its slides, the one\n showing in the bar colours. Static; the buttons are not links. */\n.ds-carousel {\n position: relative;\n}\n.ds-carousel__dots {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n}\n.ds-carousel__dot {\n box-sizing: border-box;\n min-width: 3ch;\n padding: 0 var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- accordion ---------- */\n/* Questions that open and close, each with a plus or minus box. */\n.ds-accordion {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n list-style: none;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::before {\n content: \"\";\n flex: none;\n box-sizing: border-box;\n width: calc(var(--text-small) + 2 * var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n linear-gradient(currentColor, currentColor) center / var(--space-2) calc(var(--space-2) * 3) no-repeat,\n var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n height: calc(var(--text-small) + 2 * var(--border-width));\n}\n.ds-accordion__item[open] > .ds-accordion__summary::before {\n background: linear-gradient(currentColor, currentColor) center / calc(var(--space-2) * 3) var(--space-2) no-repeat,\n var(--color-surface);\n}\n.ds-accordion__summary:hover,\n.ds-accordion__summary.is-hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 0 var(--space-3) calc(2ch + var(--space-4));\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: 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
  1. 1
  2. 2
  3. 3
\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
How long until it appears?

Within one working day; events sent after 4pm on Friday are checked on Monday.

\n
Can I change it later?

Yes, from My events, until the day before it happens.

\n
\n
\n\n \n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.portals-2000s.portal.s02.p11.t08.u10\",\n \"library\": \"2026.10.09-1346\",\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-2b8a\",\n \"short\": \"v1-po-2b8a\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f7eac7;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f3f3f3;\n --color-surface-strong: #cccc99;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ff6600;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #000066;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #333333;\n --color-heading-alt: #cc3300;\n --color-link: #0000cc;\n --color-link-quiet: #000099;\n --color-link-visited: #333366;\n --color-link-hover: #ff6600;\n --color-link-active: #ff0000;\n --color-border: #cccccc;\n --color-border-strong: #808080;\n --color-border-muted: #eeeeee;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #ff0000;\n --color-fill-1: #f7eac7;\n --color-fill-2: #f3f3f3;\n --color-fill-3: #ffffcc;\n --color-fill-4: #eeeeee;\n --color-button: #cccccc;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #f3f3f3;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #eeeeee;\n --color-disabled-text: #aaaaaa;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffcc;\n --color-success: #999966;\n --color-warning: #ffcc00;\n --color-notice: #ffffcc;\n --color-notice-text: #000000;\n --color-focus: #000066;\n --color-shadow: #808080;\n --color-overlay: #f7eac7;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Geneva, Helvetica, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Geneva, Arial, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 10px;\n --text-large: 13px;\n --text-display: 26px;\n --text-h1: 21px;\n --text-h2: 15px;\n --text-h3: 12px;\n --line-body: 1.3;\n --line-heading: 1.05;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\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: 3px;\n --border-style: dotted;\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 0 0 0 1px 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='2' height='2'%3E%3Crect x='0' y='0' width='1' height='1' fill='black' fill-opacity='.12'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white' fill-opacity='.14'/%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='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-bar-alt: var(--color-bar-alt) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-inverse: var(--color-inverse) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='.4'/%3E%3Crect x='0' y='1' width='1' height='2' fill='black' fill-opacity='.45'/%3E%3C/svg%3E\") repeat-x bottom;\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface-alt);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-surface-strong);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }