{ "id": "v1-hp-7616", "long_id": "v1.home-pages-90s.landing.s07.p06.t01.u06", "name": "Personal home page: the band page, 1999", "era": { "slug": "home-pages-90s", "code": "hp", "name": "Personal home pages", "years": [ 1996, 2001 ], "description": "The amateur web of 1996 to 2001: tiled patterned backgrounds, bright text on black or deep colours, centred everything, big coloured headings, ruled dividers, link lists, visitor counters, guestbooks and web rings, all in the browser default fonts." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "The home page of a small band, as one of its members built it on free web space between 1996 and 2001: the name in wide engraved capitals on a dark harlequin tile, a menu bar with a list that drops from one of its cells, a poster box beside the next date, a strip of figures and three equal columns of news, a vote and songs to fetch. Text is small pale Helvetica on deep violet with mint and pink capitals for headings, periwinkle underlined links, flat 2px and 4px frames in cyan with a black line inside them and bars that glow in the middle. Gig tables, a one-at-a-time photo viewer, a web ring and a mailing list form are its furniture; the kind moved to hosted band profiles after 2001.", "url": "https://chrono.skin/s/v1-hp-7616", "preview_url": "https://chrono.skin/s/v1-hp-7616/specimen.html", "files": { "STYLE.md": "# Personal home page: the band page, 1999\n\n## Summary\n\nThe home page of a small band, as one of its members built it on free web space between 1996 and 2001: the name in wide engraved capitals on a dark harlequin tile, a menu bar with a list that drops from one of its cells, a poster box beside the next date, a strip of figures and three equal columns of news, a vote and songs to fetch. Text is small pale Helvetica on deep violet with mint and pink capitals for headings, periwinkle underlined links, flat 2px and 4px frames in cyan with a black line inside them and bars that glow in the middle. Gig tables, a one-at-a-time photo viewer, a web ring and a mailing list form are its furniture; the kind moved to hosted band profiles after 2001.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 760px, centred in an 800px window. `.ds-page__frame` has no fill and no border: every box stands on `--fill-page`, the tile. Text is left-aligned; nothing is centred but button rows inside message boxes and picture captions.\n- `.ds-nav` is written once at the top: `.ds-nav__top` (the `.ds-brand` at `--text-display` at the left, `.ds-nav__aside` with an italic tagline and one small line right-aligned at the foot of the name) and under it `.ds-nav__links`, one bar of five equal cells in a `--border-width-strong` frame. One cell is a `.ds-menu`: its list drops under it on hover or focus.\n- The specimen is one example site, a band's page, of five views.\n- Home view, `.ds-page__main`, is four rows `--space-5` apart: `.ds-page__poster` (the `.ds-hero` at three parts, a `.ds-panel` with the next date at two, equal in height); the `.ds-stat` strip of four figures; `.ds-page__trio`, three equal columns that end together, each a `.ds-heading` over one box (the `.ds-list` of dated news, a vote drawn with `.ds-progress`, a panel of songs with a one-field form and the web ring line); the `.ds-construction` strip; a heading over the `.ds-grid` of four prints.\n- Inner pages keep the header and footer and drop the poster, the figures and the three columns. `.ds-page__inner` opens with `.ds-page__head`: the `.ds-breadcrumb`, the `.ds-page-header` (title and one italic line at the left, a button at the right, a thick line under) and, on the dates page, the `.ds-tabs` row. Below it: the table, page numbers and a `.ds-page__pair` of two boxes; or `.ds-page__columns`, `.ds-prose` and a `--size-side` (190px) `.ds-sidebar` at the right; or `.ds-page__poster` again with the `.ds-carousel` at three parts and a panel at two, then the grid and the empty state; or notices, the form and the message box in one column.\n- Views: `home`; `gigs` (tabs, the table of dates with its badge key, page numbers, two boxes with a tooltip and a progress bar); `band` (running text, the sidebar, link states); `photos` (the carousel, a list of other nights, four prints, the empty state of a night with no photos); `join` (notices, the form, the message box for leaving the list).\n- Spacing: `--space-1` 2px between figures, digits and tabs; `--space-2` 5px cell and strip padding; `--space-3` 8px between a title and its block, between buttons and form rows; `--space-4` 12px box padding, paragraph spacing, between prints; `--space-5` 18px between blocks and columns, poster padding; `--space-6` 26px list indent and the space under the page.\n- Fixed sizes: `--size-menu` 170px drop-down list, `--size-label` 150px form labels, `--size-field` 240px inputs, `--size-area` 340px textarea, `--size-check` 15px, `--size-dialog` 380px, `--size-icon` 38px, `--size-thumb` 84px height of a print, `--size-day` 72px day block, `--size-slide` 210px height of the carousel picture, `--size-tip` 170px tooltip.\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\nThese are the conventions of the whole era; every layout and token set of it follows them.\n\n- The page and the sheet are of one lightness: `--color-page` and `--color-canvas` are both dark or both light, and `--fill-page` is a quiet tile built from palette tokens. `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt`, every link colour, `--color-accent-alt`, `--color-danger`, `--color-success` and `--color-warning` are legible on the page, the canvas, all three surfaces and all four `--color-fill-*` blocks, at 2:1 or better.\n- Fills that bring their own text: `--fill-bar` with `--color-bar-text` (the table of sections, table heads, the dialog title), `--fill-bar-alt` with `--color-bar-alt-text` (panel and sidebar title strips), `--fill-inverse` with `--color-inverse-text` (counter digits, awards, the current tab), `--fill-accent` with `--color-accent-text` (the current section, the \"NEW!\" badge, the current page number), `--color-notice` with `--color-notice-text` (notices and the two stripes of the construction strip), `--color-danger-surface` with `--color-danger`. A link on one of these takes the fill's text colour (`.ds-link--plain`).\n- Status colours double as fills: a status badge and the destructive button are filled with `--color-success`, `--color-warning` or `--color-danger` and lettered in `--color-canvas`.\n- `--color-surface-strong` is the ground that shows between the cells of a table; `--color-surface-alt` is alternate rows, inline code and the empty state.\n- Headings are coloured: `--color-heading` (yellow here) for the name, page titles, h1 and h3; `--color-heading-alt` (lime) for section titles, h2, taglines, dates and form labels. `--color-accent-alt` (magenta) is the italic \"Updated!\" word, bullets and list markers.\n- The rainbow bar is six hard steps: `--color-danger`, `--color-warning`, `--color-heading`, `--color-success`, `--color-link`, `--color-link-visited`.\n- Type here: `--font-body` and `--font-heading` are Times New Roman at 16px, the unchanged browser default; headings 19, 24 and 32px bold, the name 48px. `--font-ui` Arial 13px sets buttons, controls, table heads, the section cells and badges; `--font-mono` Courier New sets counter digits, news dates and the textarea. Links are always underlined. Italic is written literally for taglines, lead lines and the footer note.\n- Surface here: `--border-style` `ridge`, 4px for boxes and 6px (`--border-width-strong`) for the section table, the welcome box, tables, panels, pictures, awards and the dialog. No shadows, no radius, flat fills, no transitions. `--fill-page` is a starfield of 1px dots in the text, heading and link colours over `--color-page`.\n- Written literally in `components.css`: `outset` and `inset` bevels on buttons, the brand tile and form controls (drawn in the control's own colour), `dotted` rules inside lists, the 45 degree turn of a bullet, and the slow two-step `.ds-blink`, which only runs inside `prefers-reduced-motion: no-preference`.\n\n## Components\n\n- `.ds-page`: on ``; the tiled page and body type. `.ds-page__frame` the 760px column; `.ds-page__main` and `.ds-page__inner` stack blocks `--space-5` apart; `.ds-page__head` stacks path, page header and tabs; `.ds-page__poster` three parts to two; `.ds-page__trio` three equal columns; `.ds-page__columns` text plus sidebar; `.ds-page__pair` two equal boxes; `.ds-section` a heading with its block.\n- `.ds-nav`: the header. `.ds-nav__top` holds the brand and `.ds-nav__aside` (`.ds-nav__tagline`, `.ds-nav__note`); `.ds-nav__links` is the menu bar of `.ds-nav__item` cells with `.ds-nav__link` in `--fill-bar`; the cell of the view that shows takes `--fill-accent` (one selector per view, or `is-current`).\n- `.ds-menu`: a drop-down under a cell of the bar. Put it on the `.ds-nav__item`, give the cell's link `.ds-menu__label` (it adds the small triangle) and follow it with `.ds-menu__list` of `.ds-menu__link` lines; the list shows on hover, on focus inside it, or with `is-open`.\n- `.ds-brand`: mark and name. `.ds-brand__mark` is a tile dressed like the button (`--fill-button`, `--color-button-text`, outset bevel, `--radius-control`, `--shadow-control`) holding the mark with square caps; `.ds-brand__name` is the name at `--text-display` in `--color-heading`. Name and mark are placeholders for the installing project's own.\n- `.ds-hero`: the poster box on `--fill-panel` in a thick frame with `--shadow-dialog`: `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-button--large` and a secondary button), `.ds-hero__hint`.\n- `.ds-gig`: the next date inside a panel: `.ds-gig__date` (a block on `--fill-inverse` with `.ds-gig__day` and `.ds-gig__month`) beside `.ds-gig__text` with `.ds-gig__place`.\n- `.ds-page-header`: `.ds-page-header__text` with `.ds-page-header__title` and the italic `.ds-page-header__lead`, `.ds-page-header__action` at the right, a thick line under.\n- `.ds-heading`: a section title in capitals with a thick line under it.\n- `.ds-rule`: a plain rule; `.ds-rule--short` is 60% wide; `.ds-rule--rainbow` is a bar of six colours. `.ds-construction` with `.ds-construction__text` is the striped strip.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead`, `.ds-prose__code`.\n- `.ds-link`: every link; states `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--quiet` small, `.ds-link--strong` bold, `.ds-link--plain` on a coloured fill. `.ds-links` wraps a line of them. `.ds-icon` holds a small drawing.\n- `.ds-bullets`: a link list with small coloured squares, `.ds-bullets__item` holding a `.ds-bullets__text`.\n- `.ds-button`: a bevelled key; `.ds-button--secondary`, `.ds-button--danger`, `.ds-button--large`; states `is-hover`, `is-pressed`, `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two columns, right-aligned `.ds-form__label` and `.ds-form__field`; `.ds-form__input` (`--short`, `is-error`), `.ds-form__select`, `.ds-form__textarea`, `.ds-form__check`, `.ds-form__hint`, `.ds-form__error`, `.ds-form__actions`.\n- `.ds-table`: one thick frame, rows parted by dotted lines: `.ds-table__head` (`--num`), `.ds-table__cell` (`--num`, `--date`, `--group`), `.ds-table__row--alt`, `.ds-table__desc`, `.ds-table__caption`.\n- `.ds-stat`: the strip of four figures; each `.ds-stat__item` is a `.ds-stat__value` over a `.ds-stat__label`.\n- `.ds-list`: dated news in a framed box: `.ds-list__item` with a `.ds-list__meta` date over a `.ds-list__body`; `.ds-list__more` under it.\n- `.ds-panel`: a thick-framed box: `.ds-panel__title` strip, `.ds-panel__body`, `.ds-panel__text`, `.ds-panel__form` (one field and a button on a line). `.ds-ring` with `.ds-ring__item` is the bracketed line of a web ring.\n- `.ds-grid`: four prints to a row: `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) is a coloured card holding a sunken `.ds-grid__pic`, a `.ds-grid__title` link and a `.ds-grid__text` file size.\n- `.ds-carousel`: one picture at a time, as a slide show page was: `.ds-carousel__slide`, `.ds-carousel__caption`, and `.ds-carousel__nav` with two buttons, the `.ds-carousel__dots` squares (`.ds-carousel__dot`, the showing one `is-current`) and `.ds-carousel__count`. Static: the buttons are links to the next page.\n- `.ds-tabs`: a row of `.ds-tabs__item` / `.ds-tabs__tab` cells standing on a line, the current one (`is-current`) in `--fill-inverse`.\n- `.ds-badge`: a solid \"NEW!\" label; `.ds-badge--text` an italic coloured word, `.ds-badge--count` a muted count, `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger` status labels; `.ds-badges` the key line.\n- `.ds-tooltip`: a word with a dotted underline; its `.ds-tooltip__tip` child is a small box on `--color-notice` that shows above it on hover, on focus (give the trigger `tabindex=\"0\"`) or with `is-open`.\n- `.ds-progress`: `.ds-progress__label` (with `.ds-progress__value` at its right) over a sunken `.ds-progress__track` holding a `.ds-progress__bar` of blocks in `--fill-accent`; its length is `.ds-progress__bar--10` to `--100` in tenths. Use it for votes, funds and anything counted towards a total.\n- `.ds-counter`: the visitor counter, `.ds-counter__digit` boxes on `--fill-inverse`.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each a `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` lines.\n- `.ds-notice`: a line on `--color-notice`; `.ds-notice__label`; `.ds-notice--error`. `.ds-notices` stacks them.\n- `.ds-pagination`: a centred line: `.ds-pagination__label`, `.ds-pagination__link` with `is-current` and `is-disabled`.\n- `.ds-breadcrumb`: a small path, `.ds-breadcrumb__item` separated by a coloured mark, the last `is-current`.\n- `.ds-dialog`: a message box in the page flow: `.ds-dialog__title` bar, `.ds-dialog__body`, `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: `.ds-empty__title`, `.ds-empty__text` and a button on `--color-surface-alt`.\n- `.ds-footer`: a thick line, then `.ds-footer__row` (`.ds-footer__links` with `.ds-footer__item` at the left, `.ds-footer__count` with the counter at the right), the italic `.ds-footer__note` and `.ds-footer__legal`.\n- `.ds-view`: one screen of the example site; `.ds-view--home` shows when the address names none.\n- Left out as not of the period: `.ds-accordion`, `.ds-switch`, `.ds-avatar`.\n\n## Never\n\n- `content-width <= 760px`: everything fits a 760px column.\n- `font-size <= 48px`: the name is the largest text.\n- `font-size >= 13px`: small print is 13px.\n- `font-weight >= 400`: regular and bold only.\n- `font-families <= 3`: Times, Arial and Courier.\n- `uppercase-text <= 0%`: capitals are typed, never transformed.\n- `border-radius <= 0px`: every box and button is square.\n- `box-shadow-blur <= 0px`: the second frames are hard rings, never soft.\n- `text-shadow = none`: text is flat.\n- `border-width <= 3px`: the frame line is the thickest.\n- `transition = none`: nothing eases on hover.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new section is a `.ds-heading` over one framed box; a new box is a `.ds-panel`; a new figure joins the `.ds-stat` strip; anything counted towards a total is a `.ds-progress`. Keep text left-aligned on the tile, keep headings in tracked capitals with the hard drop under them, keep links underlined, and never add radius, soft shadows, hover transitions, a second menu bar or a pale page.\n", "components.css": "/* Layout tokens (structure part). A band's page of 1999: a 760px column set\n straight on the tile of an 800px window. The name and a menu bar with a\n drop-down, a poster box beside the next date, a strip of figures, three\n equal columns and a row of photographs. */\n:root {\n --size-page: 760px;\n --size-side: 190px;\n --size-menu: 170px;\n --size-label: 150px;\n --size-field: 240px;\n --size-area: 340px;\n --size-check: 15px;\n --size-dialog: 380px;\n --size-icon: 38px;\n --size-thumb: 84px;\n --size-day: 72px;\n --size-slide: 210px;\n --size-tip: 170px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 18px;\n --space-6: 26px;\n}\n\n/* ---------- shell: no sheet, the boxes stand on the tile ---------- */\n.ds-page {\n margin: 0;\n padding: 0;\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.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4) 0 var(--space-6);\n border-radius: var(--radius-page);\n}\n.ds-page__main,\n.ds-page__inner {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n padding: var(--space-5) 0 0;\n}\n.ds-page__head {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n/* The poster and the next date: three parts to two. */\n.ds-page__poster {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n/* Three equal columns that end together. */\n.ds-page__trio {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-page__trio .ds-section > :last-child {\n flex: 1;\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-5);\n align-items: start;\n}\n.ds-page__pair {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n min-width: 0;\n}\n\n/* Section title: a coloured line of capitals with a thick line under it. */\n.ds-heading {\n margin: 0;\n padding: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- nav: the name at the left, a line at the right, the menu bar under ---------- */\n.ds-nav {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-nav__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-brand {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-heading);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--text-display);\n height: var(--text-display);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__aside {\n min-width: 0;\n text-align: right;\n}\n.ds-nav__tagline {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n}\n.ds-nav__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n/* The menu bar: one row of equal cells with lines between them. */\n.ds-nav__links {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-bar);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n}\n.ds-nav__item {\n position: relative;\n display: flex;\n flex: 1;\n}\n.ds-nav__item + .ds-nav__item {\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__link {\n flex: 1;\n padding: var(--space-3) var(--space-1);\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: center;\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\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(#gigs:target) .ds-nav__link[href=\"#gigs\"],\n.ds-page:has(#band:target) .ds-nav__link[href=\"#band\"],\n.ds-page:has(#photos:target) .ds-nav__link[href=\"#photos\"],\n.ds-page:has(#join:target) .ds-nav__link[href=\"#join\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n\n/* ---------- menu: the list that drops from a cell of the bar ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__label::after {\n content: \" \\25BE\";\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 5;\n box-sizing: border-box;\n width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n\n/* ---------- hero: the poster ---------- */\n.ds-hero {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-hero__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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-hero__hint {\n margin: var(--space-4) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- the next date: a day block and the place beside it ---------- */\n.ds-gig {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n}\n.ds-gig__date {\n flex: none;\n box-sizing: border-box;\n width: var(--size-day);\n padding: var(--space-2) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-gig__day {\n display: block;\n font-family: var(--font-mono);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: var(--line-display);\n}\n.ds-gig__month {\n display: block;\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-gig__text {\n min-width: 0;\n}\n.ds-gig__place {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- page header: title at the left, action at the right, a thick line under ---------- */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- table: one frame, rows parted by dotted lines ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\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 text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) dotted var(--color-border-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-table__cell--num,\n.ds-table__head--num {\n text-align: right;\n}\n.ds-table__cell--date {\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-table__row--alt .ds-table__cell {\n background: var(--color-surface-alt);\n}\n.ds-table__cell--group {\n background: var(--color-fill-1);\n text-align: center;\n}\n.ds-table__desc {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n caption-side: bottom;\n padding: var(--space-3) 0 0;\n color: var(--color-text);\n font-size: var(--text-small);\n text-align: left;\n}\n\n/* ---------- stats: a strip of four figures ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-stat__item {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-mono);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- list: dated news, the date over each item ---------- */\n.ds-list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-base);\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) dotted var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__body {\n display: block;\n min-width: 0;\n}\n.ds-list__more {\n margin: 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n\n/* ---------- panel: a framed box with a title strip ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n flex: 1;\n padding: var(--space-3) var(--space-4);\n}\n.ds-panel__text {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__text:last-child {\n margin: 0;\n}\n.ds-panel__form {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-3);\n}\n.ds-panel__form .ds-form__input {\n flex: 1;\n width: 50%;\n min-width: 0;\n}\n.ds-panel__body .ds-bullets {\n margin: 0 0 var(--space-3);\n}\n/* The web ring line: previous, random, next. */\n.ds-ring {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-weight: var(--weight-bold);\n}\n.ds-ring__item::before {\n content: \"[ \";\n color: var(--color-text-muted);\n}\n.ds-ring__item::after {\n content: \" ]\";\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: four prints, each on its own coloured card ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n padding: var(--space-2);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-thumb);\n margin: 0 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n border: var(--border-width) inset var(--color-border);\n}\n.ds-grid__pic svg {\n display: block;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__title {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-grid__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- carousel: one print at a time, arrows and squares under it ---------- */\n.ds-carousel {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-carousel__slide {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-slide);\n background: var(--color-fill-2);\n color: var(--color-heading);\n}\n.ds-carousel__slide svg {\n display: block;\n width: calc(var(--size-icon) * 3);\n height: calc(var(--size-icon) * 3);\n}\n.ds-carousel__caption {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n font-style: italic;\n}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__dot {\n display: block;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-border);\n}\n.ds-carousel__dot.is-current {\n background: var(--fill-accent);\n}\n.ds-carousel__count {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- tabs: a row of cells standing on a line ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n display: flex;\n}\n.ds-tabs__tab {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n text-decoration: none;\n}\n\n/* ---------- sidebar: a column of small boxes ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-sidebar__block {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n.ds-sidebar__item + .ds-sidebar__item {\n border-top: var(--border-width) dotted var(--color-border-muted);\n}\n\n/* ---------- footer: a thick line, the links and the counter, the small print ---------- */\n.ds-footer {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin: var(--space-5) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__item + .ds-footer__item::before {\n content: \"|\";\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-footer__count {\n flex: none;\n margin: 0;\n color: var(--color-heading-alt);\n}\n.ds-footer__note {\n margin: 0;\n color: var(--color-heading-alt);\n font-style: italic;\n}\n.ds-footer__legal {\n margin: 0;\n color: var(--color-text-muted);\n}\n\n/* ---------- views: one screen of the example site 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/* ---------- rules: the plain one and the bar of six colours ---------- */\n.ds-rule {\n box-sizing: border-box;\n width: 100%;\n height: 0;\n margin: 0 auto;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-rule--short {\n width: 60%;\n}\n.ds-rule--rainbow {\n height: var(--space-2);\n border: 0;\n background: linear-gradient(90deg, var(--color-danger) 0 16.66%, var(--color-warning) 16.66% 33.33%, var(--color-heading) 33.33% 50%, var(--color-success) 50% 66.66%, var(--color-link) 66.66% 83.33%, var(--color-link-visited) 83.33%);\n}\n\n/* ---------- under construction: a strip of diagonal stripes ---------- */\n.ds-construction {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2);\n background: repeating-linear-gradient(-45deg, var(--color-notice) 0 var(--space-4), var(--color-notice-text) var(--space-4) calc(var(--space-4) * 2));\n border: var(--border-width) var(--border-style) var(--color-border);\n text-align: center;\n}\n.ds-construction__text {\n display: inline-block;\n padding: var(--space-1) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\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 font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n/* A link on a bar, a notice or another coloured fill takes that fill's text colour. */\n.ds-link--plain,\n.ds-link--plain:visited,\n.ds-link--plain:hover,\n.ds-link--plain.is-hover {\n color: inherit;\n text-decoration: underline;\n}\n.ds-links {\n margin: 0 0 var(--space-4);\n}\n.ds-icon {\n display: inline-block;\n width: var(--text-large);\n height: var(--text-large);\n vertical-align: middle;\n color: var(--color-accent-alt);\n}\n.ds-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* ---------- bullets: a link list with small coloured squares ---------- */\n.ds-bullets {\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: left;\n}\n.ds-bullets__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-bullets__item::before {\n content: \"\";\n flex: none;\n width: var(--space-3);\n height: var(--space-3);\n background: var(--color-accent-alt);\n}\n.ds-bullets__item:nth-child(3n+2)::before {\n background: var(--color-heading-alt);\n}\n.ds-bullets__item:nth-child(3n)::before {\n background: var(--color-warning);\n}\n.ds-bullets__text {\n min-width: 0;\n}\n\n/* ---------- prose ---------- */\n.ds-prose {\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n text-align: left;\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li::marker {\n color: var(--color-accent-alt);\n}\n.ds-prose strong {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose__lead {\n color: var(--color-heading-alt);\n font-size: var(--text-large);\n font-style: italic;\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: pre-wrap;\n}\n\n/* ---------- buttons: bevelled keys in their own colour ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n cursor: default;\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-pressed {\n border-style: inset;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-button-secondary);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-5);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n/* Destructive action: the danger colour as the fill, the sheet colour as the label. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-canvas);\n border-color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled);\n box-shadow: none;\n}\n\n/* ---------- form: labels at the left, fields at the right ---------- */\n.ds-form {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-3);\n row-gap: var(--space-3);\n align-items: baseline;\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\n}\n.ds-form__label {\n color: var(--color-heading-alt);\n font-weight: var(--weight-bold);\n text-align: right;\n}\n.ds-form__field {\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n transition: var(--transition);\n}\n.ds-form__input {\n width: var(--size-field);\n max-width: 100%;\n}\n.ds-form__input--short {\n width: calc(var(--size-field) / 2);\n}\n.ds-form__textarea {\n display: block;\n width: var(--size-area);\n max-width: 100%;\n font-family: var(--font-mono);\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\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__check {\n appearance: none;\n box-sizing: border-box;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0 var(--space-2) 0 0;\n padding: var(--space-1);\n vertical-align: middle;\n background-color: var(--color-input);\n border: var(--border-width) inset var(--color-input-border);\n border-radius: var(--radius-control);\n}\n/* The tick is a block of the field's text colour inside the field's own fill. */\n.ds-form__check:checked::before,\n.ds-form__check.is-checked::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-input-text);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__error {\n display: block;\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n.ds-form__actions {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n padding: var(--space-2) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n/* A loud italic word with no box. */\n.ds-badge--text {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n font-style: italic;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n text-transform: none;\n}\n/* Status labels: the status colour as the fill, the sheet colour as the word. */\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-canvas);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-canvas);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badges {\n display: block;\n padding: 0 0 var(--space-2);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-align: left;\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__label {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n position: static;\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-body);\n font-size: var(--text-base);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-1) var(--space-3);\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 text-transform: var(--ui-transform);\n}\n.ds-dialog__body {\n margin: 0;\n padding: var(--space-4) var(--space-4) var(--space-3);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-3) var(--space-4);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: baseline;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__label {\n color: var(--color-heading-alt);\n font-style: italic;\n font-weight: var(--weight-body);\n}\n.ds-pagination__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n}\n.ds-pagination__link.is-current {\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n text-decoration: none;\n}\n\n/* ---------- breadcrumb: \"you are here\", small ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \">\";\n padding: 0 var(--space-3);\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- tooltip: the small box a pointer brings up, as a title text did ---------- */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n color: var(--color-heading-alt);\n text-decoration: underline dotted;\n cursor: help;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n left: 0;\n bottom: 100%;\n z-index: 4;\n box-sizing: border-box;\n width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: 0;\n text-align: left;\n text-transform: none;\n}\n/* A tip whose word sits near the right edge opens leftward. */\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* ---------- progress: a sunken track filled with blocks, as an installer drew it ---------- */\n.ds-progress {\n display: block;\n margin: 0 0 var(--space-3);\n}\n.ds-progress:last-child {\n margin: 0;\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-progress__value {\n flex: none;\n color: var(--color-heading-alt);\n font-family: var(--font-mono);\n font-weight: var(--weight-bold);\n}\n.ds-progress__track {\n display: block;\n box-sizing: content-box;\n height: var(--space-4);\n padding: var(--space-1);\n background: var(--color-surface-strong);\n border: var(--border-width) inset var(--color-border);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: repeating-linear-gradient(90deg, transparent 0 var(--space-3), var(--color-surface-strong) var(--space-3) calc(var(--space-3) + var(--space-1))), var(--fill-accent);\n}\n.ds-progress__bar--10 { width: 10%; }\n.ds-progress__bar--30 { width: 30%; }\n.ds-progress__bar--60 { width: 60%; }\n.ds-progress__bar--70 { width: 70%; }\n\n/* ---------- counter: boxed digits ---------- */\n.ds-counter {\n display: inline-flex;\n gap: var(--space-1);\n padding: var(--space-1);\n vertical-align: middle;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-counter__digit {\n display: block;\n padding: 0 var(--space-1);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: a band's home page, 1996 to 2001: specimen\n\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n
\n Four people, three chords, one van.\n The official home page. Made by the drummer.\n
\n
\n \n
\n\n
\n
\n\n
\n
\n

The demo tape is out!

\n

Five songs, recorded in a garage in two days. Hear three of them here, then come and see chronoskin play them much too loud.

\n
\n See the Gig Dates\n Join the Mailing List\n
\n

Last updated: Tuesday 9 November 1999. Turn your speakers up.

\n
\n\n
\n

Next gig

\n
\n
\n
20Nov 1999
\n
\n The Railway Arms\n Station Road, upstairs room. Doors at 8, on stage at 9.30.\n
\n
\n

Three pounds on the door, AAAA means all ages: no bar in the room, so anybody can come in.. Two other bands play first. NEW!

\n

All the dates for the winter

\n
\n
\n
\n\n
    \n
  • 47 gigs played since 1997
    • \n
  • 212 names on the mailing list
    • \n
  • 5 songs on the demo tape
    • \n
  • 1 van, mostly working
    • \n
\n\n
\n
\n

News

\n \n
\n\n
\n

Your vote

\n
\n

Which song opens the next tape?

\n
\n
\n Late Bus Home 60%\n \n
\n
\n Paper Round 30%\n \n
\n
\n Seven Sisters 10%\n \n
\n

Cast your vote (83 so far)

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

Listen

\n
\n

From the demo tape

\n
\n \n

Dates by e-mail, once a month:

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

Site 9 of 27 in the garage bands web ring.

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

Under construction: the lyrics page is coming when the singer writes them down

\n\n
\n

From the last gig

\n
\n
\n \n

The singer

\n

sing1.jpg, 24 K

\n
\n
\n \n

Guitar, close up

\n

gtr2.jpg, 31 K

\n
\n
\n \n

Behind the drums

\n

drum.jpg, 19 K

\n
\n
\n \n

The van

\n

van.jpg, 27 K

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

Gig dates

\n

Where chronoskin plays this winter, and what it costs to get in.

\n
\n
\n Book Us for Your Party\n
\n
\n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Key: ON SALE tickets on the door FEW LEFT small room, come early OFF cancelled NEW! added this week\n Times are when we go on, not when the doors open. Ask us if you are not sure\n
DateWhereWithTicketsOn stagePrice
Sat 20 NovThe Railway Arms Upstairs room, all ages.two bands from the collegeON SALE9.303.00
Fri 26 NovThe Old Fire Station Youth club night. Holds eighty.a disco afterFEW LEFT8.002.00
Sat 04 DecStudents' Union, bar two NEW! Over eighteens, bring your card.nobody yetON SALE10.154.00
Sat 11 DecThe Boat House The roof came in. Sorry.was to be the big oneOFF0.000.00
Fri 31 DecThe Railway Arms NEW! New Year's Eve. We play at midnight.everybody we knowFEW LEFT11.455.00
Want chronoskin at your school, club or party? Write to us!
\n\n
    \n
  1. Dates, page:
    2. \n
  2. << Back
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. Next >>
    7. \n
\n\n
\n
\n

How to find the Railway Arms

\n
\n

Out of the station, turn left, and it is the pub with the green door. The room is up the stairs at the back. There is nowhere to park, so share a lift or take the N7The night bus. The last one leaves the station at ten to one..

\n
\n
\n
\n

Saving for a real studio

\n
\n
\n Door money put by so far 70%\n \n
\n

Every ticket goes towards one day in a studio with a proper desk.

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

The band

\n

Who plays what, and how it all began.

\n
\n
\n See the Photos\n
\n
\n
\n\n
\n
\n

Started in a shed, still in a shed

\n

The short story, for people who have never heard us.

\n

chronoskin began in the spring of 1997 when two of us were given guitars and nobody was given lessons. We play fast, short songs about buses, weather and Sunday jobs, and we have never played a song longer than three minutes.

\n

Who plays what

\n

There are four of us. The page you are reading is typed by the drummer, by hand, and saved as band.html on a free host. On stage you will see:

\n
    \n
  • one voice and one guitar, both a little out of tune;
    • \n
  • a second guitar that does the difficult parts;
    • \n
  • a bass, since September, and drums.
    • \n
\n

How the links look

\n

\n A link you have not followed,\n one you have visited,\n one under the pointer,\n one as you click it,\n a bold link and\n a small link.\n

\n

Come and say hello

\n

We stay behind after every gig to carry the amplifiers, so that is the time to find us. Or put your name on the mailing list and we will write to you first.

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

Gig photos

\n

One at a time, so they load on a slow modem.

\n
\n
\n Send Us Your Photos\n
\n
\n
\n\n
\n
\n
\n

The last song. Somebody's coat is on the amplifier.

\n
\n << Back\n
    \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
\n 3 of 6\n Next >>\n
\n
\n\n
\n

Other nights

\n
\n \n

Every picture is under 40 K. Click one of the small prints below to jump straight to it.

\n

Photographs by friends of the band. Ask before you use one on your own page.

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

1. The singer

\n

sing1.jpg, 24 K

\n
\n
\n \n

2. Guitar

\n

gtr2.jpg, 31 K

\n
\n
\n \n

3. The last song

\n

last.jpg, 29 K

\n
\n
\n \n

4. Drums

\n

drum.jpg, 19 K

\n
\n
\n\n
\n

The Railway Arms, October

\n
\n

No photos of this one yet

\n

Nobody in the band had a camera. If you took one, we would love to put it here with your name under it.

\n Send Us Your Photos\n
\n
\n\n
\n
\n\n
\n
\n\n
\n \n
\n
\n

Mailing list

\n

One letter a month: the dates, the news, nothing else.

\n
\n
\n Back to the Front Page\n
\n
\n
\n\n
\n

Please note: the tape is free to anybody on the list who comes to a gig and asks.

\n

Oops! Your name was not added. Please type an e-mail address and try again.

\n
\n\n
\n \n
\n \n
\n \n
\n \n We need an address to write to.\n
\n \n
\n \n (so we know where to play)\n
\n \n
\n \n
\n Also:\n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Leave the mailing list?

\n

We will stop writing to you at once. You can put your name down again whenever you like.

\n
\n \n \n
\n
\n\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.home-pages-90s.landing.s07.p06.t01.u06\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"home-pages-90s\",\n \"years\": [\n 1996,\n 2001\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-hp-7616\",\n \"short\": \"v1-hp-7616\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #140006;\n --color-canvas: #260010;\n --color-surface: #33000f;\n --color-surface-alt: #4d0a1c;\n --color-surface-strong: #661428;\n --color-bar: #990022;\n --color-bar-text: #ffffff;\n --color-bar-alt: #000000;\n --color-bar-alt-text: #ffd24d;\n --color-inverse: #e8d8d8;\n --color-inverse-text: #33000f;\n --color-text: #f0e0d0;\n --color-text-muted: #b89898;\n --color-heading: #ffd24d;\n --color-heading-alt: #ff6680;\n --color-link: #ff4d4d;\n --color-link-quiet: #c0c0c0;\n --color-link-visited: #cc8866;\n --color-link-hover: #ffffff;\n --color-link-active: #ffd24d;\n --color-border: #804050;\n --color-border-strong: #cc0033;\n --color-border-muted: #4d1a26;\n --color-accent: #ffd24d;\n --color-accent-text: #140006;\n --color-accent-alt: #b0c4de;\n --color-fill-1: #4d0013;\n --color-fill-2: #3d1f00;\n --color-fill-3: #2b1040;\n --color-fill-4: #1a1a2e;\n --color-button: #660018;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffd24d;\n --color-button-secondary: #2a2a2a;\n --color-button-secondary-text: #e8d8d8;\n --color-input: #000000;\n --color-input-text: #f0e0d0;\n --color-input-border: #804050;\n --color-disabled: #2e1a1e;\n --color-disabled-text: #7a5c62;\n --color-danger: #ff7733;\n --color-danger-surface: #401200;\n --color-success: #7acc52;\n --color-warning: #ffaa33;\n --color-notice: #3d2b00;\n --color-notice-text: #ffe9a6;\n --color-focus: #ffd24d;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.75);\n}\n\n/* @part type */\n:root {\n --font-body: \"Times New Roman\", Times, serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 13px;\n --text-ui: 13px;\n --text-large: 19px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.2;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: -0.08em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 0 2px var(--color-canvas), 0 0 0 3px var(--color-border);\n --shadow-control: none;\n --shadow-control-hover: 0 0 0 1px var(--color-focus);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 0 3px var(--color-canvas), 0 0 0 4px var(--color-border-strong);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-border-muted) 60%, transparent) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-border-muted) 60%, transparent) 0 1px, transparent 1px 14px), var(--color-page);\n --fill-bar: linear-gradient(var(--color-bar), color-mix(in srgb, var(--color-bar) 50%, black));\n --fill-bar-alt: linear-gradient(var(--color-bar-alt), color-mix(in srgb, var(--color-bar-alt) 78%, white));\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(color-mix(in srgb, var(--color-button) 70%, white) 0 1px, var(--color-button) 1px);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 82%, white);\n --fill-button-secondary: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 70%, white) 0 1px, var(--color-button-secondary) 1px);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }