{ "id": "v1-yk-71bb", "long_id": "v1.y2k-futurism.landing.s07.p01.t11.u11", "name": "Y2K futurism studio window, 1999 to 2003", "era": { "slug": "y2k-futurism", "code": "yk", "name": "Y2K futurism", "years": [ 1999, 2003 ], "description": "The turn of the millennium, 1999 to 2003: techno blues and silvers, glassy aqua buttons, tiny pixel-sharp type, thin tech lines and rounded capsule shapes on dark or brushed backgrounds." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The small fixed window that design studios, record labels and film weeks used as their site around the turn of the millennium: a 700px pod centred on a dark hatched screen, with a stage on top, a filmstrip of numbered work under it, and the mark and the navigation docked at the foot as a control deck. It is set in small lowercase type on one loud sheet colour, with black keys, white strips, hairlines and corner ticks, and every section carries a two-digit number. Such windows were drawn as images or built as plug-in movies at the time and are rebuilt here with borders, two-tone fills and inline SVG; the look gave way to wide scrolling pages from about 2004.", "url": "https://chrono.skin/s/v1-yk-71bb", "preview_url": "https://chrono.skin/s/v1-yk-71bb/specimen.html", "files": { "STYLE.md": "# Y2K futurism studio window, 1999 to 2003\n\n## Summary\n\nThe small fixed window that design studios, record labels and film weeks used as their site around the turn of the millennium: a 700px pod centred on a dark hatched screen, with a stage on top, a filmstrip of numbered work under it, and the mark and the navigation docked at the foot as a control deck. It is set in small lowercase type on one loud sheet colour, with black keys, white strips, hairlines and corner ticks, and every section carries a two-digit number. Such windows were drawn as images or built as plug-in movies at the time and are rebuilt here with borders, two-tone fills and inline SVG; the look gave way to wide scrolling pages from about 2004.\n\n## Layout\n\n- The page is not fluid. `--size-page` is 700px; `.ds-page__frame` is one window of that width centred horizontally (`margin: 0 auto`), outlined by `--border-width-strong` and rounded by `--radius-page`, with `--fill-page` showing around it. All text sits in the window; nothing is written on the page background.\n- The navigation is at the foot, not at the top. `.ds-nav` is written first in the document and shown last: the frame is a flex column and the deck has `order: 2`, after the views and after `.ds-footer` (`order: 1`). The deck is `position: sticky; bottom: 0`, so on a view taller than the screen it stays docked at the foot of the screen, the way a frame or a movie console did. Never move the navigation to the top and never add a second one.\n- Every view opens with one thin strip in `--fill-bar-alt`: `.ds-topline` on the home view (tagline at the left, one note at the right) and `.ds-breadcrumb` on inner views. It is the window's title line.\n- The home view is a splash and has no columns at its top: `.ds-topline`, then `.ds-hero` (the stage) from edge to edge, then `.ds-grid` (the filmstrip of four numbered frames that touch) from edge to edge, then one `.ds-page__body` holding a `.ds-page__split`: the journal `.ds-list` at the left and `--size-side` 204px of small `.ds-panel` modules at the right.\n- Inner pages (every view below the home view) have no stage and no filmstrip. Under the `.ds-breadcrumb` strip comes one `.ds-page__body`, padded `--space-6` and stacking its blocks `--space-5` apart in a single column: `.ds-page-header` with the section's number in place of the hero, then an optional `.ds-stat` strip and `.ds-notices`, then the working block (`.ds-tabs` touching the `.ds-table` it switches, with `.ds-pagination` or `.ds-buttons` under it), and last a `.ds-page__row` of three equal modules (or `.ds-page__row--two` of two) for the sidebar block, panels, the dialog and the empty state. A page that needs a note column beside its work (an article, a form) uses `.ds-page__split` instead of the row: the work at the left, 204px of modules at the right. There is no permanent side column.\n- Spacing scale: `--space-1` 1px and `--space-2` 2px are the vertical padding of keys, inputs and small strips; `--space-3` 4px is the padding of table cells, tabs and the top line and the gap between notices; `--space-4` 6px is the gap between buttons and the padding of list rows; `--space-5` 10px is the gap between blocks, the side padding of panels and keys and the gap between paragraphs; `--space-6` 16px is the padding of a view's body and the gutter of a split; `--space-7` 24px is the padding of the stage and the space above the window. There is no step above 24px.\n- Fixed sizes: `--size-stage` 200px is the least height of the stage; `--size-figure` 190px its line drawing; `--size-thumb` 44px the drawing in a filmstrip frame; `--size-mark` 28px the tile of the brand mark; `--size-tick` 9px a corner tick; `--size-date` 52px the date margin of the journal; `--size-search` 110px a short input; `--size-label` 104px the label column of a form; `--size-field` 210px a text input; `--size-area` 64px a textarea; `--size-dialog` 300px a dialog; `--size-led` 6px a lamp or bullet square.\n- Views. The specimen is one example site, a design studio, in five views. `home` is the splash: top line, stage, filmstrip of four recent projects, the journal and two small panels. `work` is the index: page header, a tabbed table of projects with pagination, then a row with the disciplines, the work in hand and a call to brief. `project` is a case study: the prose beside a sheet of particulars, then a row of further links. `clients` is the client room: page header, stats, notices, the tabbed table of proofs with status badges and the button row, then the withdraw dialog beside the empty state of invoices. `brief` is the form page, with the next steps and the studio's block at the right.\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- Verdana for text, a monospace for headings and for the interface, like a terminal read-out. `--font-heading` is Courier New bold, uppercased by `--heading-transform`; `--font-ui` is Courier New too, so navigation, tabs, buttons, inputs and table heads are monospaced; `--font-body` is Verdana.\n- `--text-base` 10px, `--text-ui` 11px (the monospace runs small, so it is set one step up), `--text-small` 9px, `--text-large` 12px. `--text-h3` 11px, `--text-h2` 13px, `--text-h1` 16px, `--text-display` 18px.\n- Interface text is regular weight and not uppercased; nothing is tracked.\n- Links are not underlined (`--link-decoration` and `--link-decoration-quiet` are `none`); they are told from text by colour and underline on hover only.\n\n- Flat fills, capsule controls and a glow. Every `--fill-*` token is the plain colour except `--fill-page`, a grid of faint dots 8px apart.\n- `--radius-control` and `--radius-pill` 8px make buttons, inputs and badges capsules; `--radius-panel` 0 keeps panels and tabs square; `--radius-page` 14px rounds the sheet, the hero and grid cells.\n- `--border-width` 1px, `--border-width-strong` 2px, solid.\n- No resting shadow on panels or controls. `--shadow-control-hover` is a 4px glow in the button colour and `--shadow-dialog` a 4px glow in the strong border colour: the only blurred shadows. `--shadow-text` is `none`. `--focus-ring` is 1px solid; `--transition` none.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Wrap everything in `.ds-page__frame`. `.ds-page__body` is the padded column of a view; `.ds-page__split` puts a `.ds-page__main` or other block beside a `.ds-page__side` stack; `.ds-page__row` is three equal modules, `.ds-page__row--two` two. `.ds-block` groups a tab row or section head with the block it heads. `.ds-view` wraps one screen; `.ds-view--home` marks the first.\n- `.ds-nav`: the control deck at the foot. `.ds-nav__deck` holds the `.ds-brand` at the left and `.ds-nav__status`, a monospace read-out, at the right. `.ds-nav__links` is a row of equal keys: `.ds-nav__item` holding a `.ds-nav__link` that starts with its `.ds-nav__num` (\"01\"). `is-current` fills the key with the accent. One rule per view lights the key whose `href` names the view that is showing; in a real multi-page site set `is-current` instead.\n- `.ds-brand`: the site's mark and name, at the left of the deck, linking home. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text`, 1px `--color-border-strong` rim, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the 18px wordmark. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo, keeping the tile.\n- `.ds-topline`: the home view's opening strip, two `.ds-topline__text` lines.\n- `.ds-breadcrumb`: the opening strip of an inner view: `.ds-breadcrumb__link` entries, `.ds-breadcrumb__sep` (`/`), ending in bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the stage, home view only, one per site. `.ds-hero__body` is two columns: the text (`.ds-hero__kicker` accent chip, `.ds-hero__title` 18px, `.ds-hero__text` 13px, `.ds-hero__actions` with one primary button, one secondary and one link) and `.ds-hero__figure`, an inline SVG line drawing. `.ds-hero__tick--tl` and `.ds-hero__tick--tr` (with `.ds-hero__tick`) are the corner ticks; `.ds-hero__caption` is the read-out strip along its foot. No photograph.\n- `.ds-grid`: the filmstrip: four `.ds-grid__cell` frames that touch, tinted with `--1`, `--2`, `--3` or the base fill. Each has a `.ds-grid__num` (\"01 / web\"), a `.ds-grid__figure` line drawing, a 13px `.ds-grid__title` link and a `.ds-grid__text` line. Always four across.\n- `.ds-section`: the head of a block: `.ds-section__title` opened by an accent square, on a hairline, with an optional `.ds-section__more` link at the right.\n- `.ds-page-header`: head of an inner view, first thing in the body: `.ds-page-header__num` (the section's number), `.ds-page-header__title` (18px, the view's only h1), one line of `.ds-page-header__text`, and `.ds-page-header__action` at the right with one `.ds-button`; a 2px rule closes it.\n- `.ds-stat`: the read-out strip under the page header. `.ds-stat` is the strip; each figure is a `.ds-stat__item` cell holding an 18px `.ds-stat__value` over a 10px `.ds-stat__label`. Three to five cells, no icons.\n- `.ds-prose`: article text: h1, h2, h3, p, ul, ol, `code`, strong; `.ds-prose__byline` is the monospace line above the title and `.ds-prose__lead` the 13px first paragraph.\n- `.ds-link`: link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the text-coloured link for tools and navigation inside content. `.ds-link--go` draws a small arrow before a link that leads onward. `.ds-links` lays a row of links out.\n- `.ds-button`: the dark key. `.ds-button--secondary` is the white key. `.ds-button--danger` is the secondary key with a rim and a square lamp in `--color-danger`; the label keeps the secondary text colour. `disabled` or `is-disabled` flattens it to `--color-disabled`; `is-hover` lightens it. Group with `.ds-buttons`.\n- `.ds-form`: a pod of `.ds-form__row` pairs divided by hairlines: bold `.ds-form__label` (optional `.ds-form__hint`) and a control. Controls take `.ds-form__input` (`--small`, `--auto` for selects, `--area` for textareas); `is-invalid` plus a `.ds-form__error` chip marks a bad field. `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` is the button row under the controls.\n- `.ds-table`: data table: two-tone `th` in 10px lowercase, rows on alternating surfaces divided by faint hairlines, `.ds-table__num` right-aligned in the monospace. `.ds-table__caption` is a small line under it.\n- `.ds-tabs`: a row of `.ds-tabs__tab` keys standing on a 2px rule; `is-current` takes the bar fill. Use it directly above the table it switches.\n- `.ds-list`: the journal. Each `.ds-list__item` has a `.ds-list__date` in the 52px margin and, beside it, a bold `.ds-list__title`, a `.ds-list__text` line and a small `.ds-list__meta` line. `.ds-list--compact` is the one-line variant without the margin, for panels.\n- `.ds-panel`: a pod module: outlined, `.ds-panel__title` bar over `.ds-panel__body`. Body helpers: `.ds-panel__text`, `.ds-panel__list`, `.ds-panel__small`, `.ds-panel__field` (input with button), `.ds-panel__actions`, and `.ds-panel__spec` rows (`.ds-panel__spec-label` and a value) for a sheet of particulars. `.ds-panel--alt` has the white title; `.ds-panel--inverse` is the dark block, at most one per view.\n- `.ds-sidebar`: a block of section links in a module row or a side stack: `.ds-sidebar__title` strip over a `.ds-sidebar__list` of `.ds-sidebar__item` rows, each a `.ds-link--quiet` with an optional `.ds-badge--count` at the right.\n- `.ds-badge`: small accent chip (\"new\"). `.ds-badge--count` is a bare monospace count. Status labels are a plain outlined chip with a square lamp: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`, and `.ds-badge--alt` for a neutral marker; lamp and rim take the status colour, the word stays in `--color-text`.\n- `.ds-notice`: one-line message in a box with a 2px left edge, starting with a `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and rim on the danger surface. Stack several in `.ds-notices`.\n- `.ds-pagination`: right-aligned row of small boxes in the monospace: `.ds-pagination__link` on quiet links, the current page as accent-filled `.ds-pagination__current`.\n- `.ds-dialog`: a small window in the page flow: 300px, 2px outline, bar `.ds-dialog__title`, `.ds-dialog__body` with `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. `.ds-dialog__backdrop` is the flat pod it sits on. No blur, no floating.\n- `.ds-empty`: dotted-outline pod with a centred muted `.ds-empty__text` and one button.\n- `.ds-footer`: closes the views, above the deck: `.ds-footer__band`, the inverse band with `.ds-footer__text` (the copyright line) and `.ds-footer__links` of `.ds-footer__link` entries.\n- `.ds-menu` (`.ds-menu__list`, `.ds-menu__link`): a nav item with a drop-down list on hover or focus.\n- `.ds-meter` (`.ds-meter__label`) with `.ds-progress` (`--30`, `--50`, `--70`, `--90`, `.ds-progress__bar`): a segmented loading or signal bar with its label.\n- `.ds-accordion` (`__summary`, `__body`): a `
` panel for specifications.\n- `.ds-tooltip` (`__tip`): a small label shown on hover or focus of a word.\n- `.ds-carousel` (`__track`, `__slide`, `__title`, `__text`, `__bar`, `__arrow`): a scroll-snap featured viewer with a counter such as 01/03.\n- `.ds-avatar`: initials in a round badge beside a name.\n\n## Never\n\n- `row-gap <= 2px`: rows of lists and tables touch.\n- `block-gap <= 16px`: neighbouring blocks sit 10px apart.\n- `content-width <= 700px`: text stays inside the window.\n- `palette-colours <= 18`: navy, four blues, black, silver, white, one yellow, plus lime and orange lamps.\n- `font-size <= 18px`: the wordmark and hero title are the largest text.\n- `font-size >= 9px`: nothing is set below 9px.\n- `font-weight <= 700`: regular and bold only.\n- `font-families <= 2`: Verdana and one monospace, which also sets the headings and the interface.\n- `letter-spacing <= 0px`: no text is tracked.\n- `underlined-links <= 10%`: links are not underlined until hovered.\n- `border-radius <= 14px`: 8px capsules, 14px on the largest containers, panels square.\n- `border-width <= 2px`: hairlines, 2px for the dialog frame and tab rule.\n- `box-shadow-blur <= 4px`: the hover and dialog glows are the only blur.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 2%`: only the page's dot grid is a gradient.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new module copies `.ds-panel` (pod outline in `--color-border-strong`, bar title, body padded `--space-5`) and goes into a `.ds-page__row` or the side of a `.ds-page__split`; a new block in the body starts with a `.ds-section` head and puts flat content under it; a new inner view copies one of the specimen's (breadcrumb strip, numbered `.ds-page-header`, working block, module row) and gets the next two-digit number and a key in the deck; a new control copies `.ds-button` or `.ds-form__input`; a new status mark copies the lamp chip of `.ds-badge--success`. Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`, and take the nearest spacing step instead of a new number. Pair every text token with its own fill and with no other, and never use a status colour as a text colour. Keep the navigation in the deck at the foot, keep text between 10px and 13px apart from 15px article titles and 18px display text, number what can be numbered, and separate things with a hairline, a strip or a pod outline, never with soft shadows or large empty areas.\n", "components.css": "/* Layout tokens (structure part). A small fixed window with the stage on\n top and the control deck docked at its foot. */\n:root {\n --size-page: 700px;\n --size-side: 204px;\n --size-stage: 200px;\n --size-figure: 190px;\n --size-thumb: 44px;\n --size-mark: 28px;\n --size-tick: 9px;\n --size-date: 52px;\n --size-search: 110px;\n --size-label: 104px;\n --size-field: 210px;\n --size-area: 64px;\n --size-dialog: 300px;\n --size-led: 6px;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 16px;\n --space-7: 24px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-7) var(--space-3) var(--space-6);\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n/* The window. Its children are stacked as a column so that the header,\n written first, can dock at the foot as the control deck. */\n.ds-page__frame {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: clip;\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n}\n/* Body of a view: blocks stacked one gap apart. */\n.ds-page__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-6);\n}\n.ds-page__main,\n.ds-page__side {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* Two columns: the work and a narrow column of notes. */\n.ds-page__split {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n gap: var(--space-6);\n align-items: start;\n}\n/* A row of equal modules under the work of a view. */\n.ds-page__row {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n align-items: start;\n}\n.ds-page__row--two {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-block {\n display: block;\n}\n\n/* ---------- views ---------- */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* A link that points onward: an arrow drawn before it. */\n.ds-link--go::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: var(--space-3);\n border: var(--space-3) var(--border-style) transparent;\n border-right-width: 0;\n border-left-color: currentColor;\n vertical-align: middle;\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3) var(--space-6);\n margin: 0;\n padding: var(--space-4) 0;\n}\n\n/* ---------- brand ---------- */\n.ds-brand {\n display: inline-flex;\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 box-sizing: border-box;\n justify-content: center;\n align-items: center;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-3);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- top line ---------- */\n/* The thin strip that opens every view: the window's title line. On the\n home view it carries the tagline, on inner views the breadcrumb. */\n.ds-topline,\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-6);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-topline {\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-topline__text {\n margin: 0;\n}\n.ds-breadcrumb__link,\n.ds-breadcrumb__link:visited {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__sep {\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: the control deck ---------- */\n/* Written first in the page, shown last: it docks at the foot of the\n window and stays at the foot of the screen while a long view scrolls. */\n.ds-nav {\n position: sticky;\n bottom: 0;\n z-index: 1;\n order: 2;\n display: block;\n background: var(--color-canvas);\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-nav__deck {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-6);\n}\n/* Read-out at the right of the deck: label and value pairs. */\n.ds-nav__status {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-nav__links {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__item {\n flex: 1 1 0;\n min-width: 0;\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n}\n.ds-nav__item:first-child {\n border-left: 0;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-4) var(--space-5);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-nav__num {\n margin-right: var(--space-3);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n opacity: 0.7;\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(#work:target) .ds-nav__link[href=\"#work\"],\n.ds-page:has(#project:target) .ds-nav__link[href=\"#project\"],\n.ds-page:has(#clients:target) .ds-nav__link[href=\"#clients\"],\n.ds-page:has(#brief:target) .ds-nav__link[href=\"#brief\"] {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n text-shadow: none;\n}\n\n/* ---------- section head ---------- */\n/* A label on a rule, opened by a small square in the accent colour. */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0;\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-section__title {\n margin: 0;\n color: var(--color-heading);\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}\n.ds-section__title::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-4);\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-section__more {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* ---------- hero: the stage ---------- */\n/* One framed viewport across the window: the title at the left, a line\n drawing at the right, tick marks in its corners and a read-out strip\n along its foot. */\n.ds-hero {\n position: relative;\n background: var(--color-fill-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-hero__body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-figure);\n gap: var(--space-6);\n align-items: center;\n box-sizing: border-box;\n min-height: var(--size-stage);\n padding: var(--space-7) var(--space-7) var(--space-6);\n}\n.ds-hero__tick {\n position: absolute;\n width: var(--size-tick);\n height: var(--size-tick);\n border: 0 var(--border-style) var(--color-border-strong);\n}\n.ds-hero__tick--tl { top: var(--space-5); left: var(--space-5); border-top-width: var(--border-width); border-left-width: var(--border-width); }\n.ds-hero__tick--tr { top: var(--space-5); right: var(--space-5); border-top-width: var(--border-width); border-right-width: var(--border-width); }\n.ds-hero__kicker {\n display: inline-block;\n margin: 0 0 var(--space-4);\n padding: var(--space-1) var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__text {\n margin: var(--space-4) 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-5);\n}\n.ds-hero__figure {\n display: block;\n width: 100%;\n height: auto;\n color: var(--color-border-strong);\n}\n.ds-hero__caption {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- grid: the filmstrip ---------- */\n/* Four frames in a row that touch, each numbered. */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-grid__cell {\n padding: var(--space-4) var(--space-5) var(--space-5);\n background: var(--color-fill-4);\n color: var(--color-text);\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-grid__cell:first-child { border-left: 0; }\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__num {\n display: block;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-grid__figure {\n display: block;\n width: 100%;\n height: var(--size-thumb);\n margin: var(--space-3) 0 var(--space-4);\n color: var(--color-heading);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-transform: var(--heading-transform);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__title .ds-link,\n.ds-grid__title .ds-link:visited {\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding-bottom: var(--space-4);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__num {\n display: block;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\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-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n margin: var(--space-2) 0 0;\n}\n.ds-page-header__action {\n flex: none;\n padding-bottom: var(--space-2);\n}\n\n/* ---------- stats ---------- */\n/* One read-out strip: cells joined by hairlines. */\n.ds-stat {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n overflow: hidden;\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}\n.ds-stat__item {\n flex: 1 1 0;\n min-width: 0;\n margin: 0;\n padding: var(--space-4) 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 display: block;\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-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- prose ---------- */\n.ds-prose 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-small);\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-mono);\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) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n/* Destructive action: the secondary key with a danger rim and a square\n lamp. The label keeps the secondary text colour. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-danger);\n}\n.ds-button--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n background: var(--color-danger);\n vertical-align: middle;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-5) 0 var(--space-2);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-5) var(--space-6);\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}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding-top: var(--space-2);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input--small {\n width: var(--size-search);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--area {\n width: 100%;\n height: var(--size-area);\n resize: vertical;\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__error {\n display: inline-block;\n margin: var(--space-2) 0 0;\n padding: 0 var(--space-4);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-danger);\n border-radius: var(--radius-pill);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n gap: var(--space-4);\n padding: var(--space-5) 0 var(--space-2) calc(var(--size-label) + var(--space-5));\n}\n\n/* ---------- tabs ---------- */\n/* A row of joined keys that sits on the block it switches. */\n.ds-tabs {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n margin-right: var(--space-2);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-base);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n color: var(--color-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tr:nth-child(even) td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n text-align: right;\n}\n.ds-table td.ds-table__num {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-table__caption {\n margin: 0;\n padding: var(--space-3) 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* ---------- list: the journal ---------- */\n/* A date in the margin, the entry beside it. */\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-date) minmax(0, 1fr);\n column-gap: var(--space-5);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__date {\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\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-size: var(--text-small);\n color: var(--color-text-muted);\n}\n/* One line per item, without the date margin, for panels. */\n.ds-list--compact .ds-list__item {\n display: block;\n padding: var(--space-3) var(--space-5);\n}\n.ds-list--compact .ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list--compact .ds-list__title {\n font-weight: var(--weight-body);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) 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-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}\n.ds-panel__body > :first-child { margin-top: 0; }\n.ds-panel__body > :last-child { margin-bottom: 0; }\n.ds-panel__text {\n margin: 0 0 var(--space-4);\n}\n.ds-panel__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__small {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-panel__field {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n padding-top: var(--space-3);\n}\n/* A sheet of label and value lines, for a project's particulars. */\n.ds-panel__spec {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__spec-label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-panel--alt .ds-panel__title {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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 text-shadow: none;\n padding-bottom: 0;\n}\n.ds-panel--inverse .ds-panel__small,\n.ds-panel--inverse .ds-link,\n.ds-panel--inverse .ds-link:visited,\n.ds-panel--inverse .ds-link.is-visited,\n.ds-panel--inverse .ds-link:hover,\n.ds-panel--inverse .ds-link.is-hover {\n color: var(--color-inverse-text);\n}\n.ds-panel--inverse .ds-link {\n text-decoration: underline;\n}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n overflow: hidden;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) 0 var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-4);\n padding: var(--space-2) var(--space-5);\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n vertical-align: baseline;\n}\n.ds-badge--count {\n padding: 0;\n background: transparent;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-weight: var(--weight-body);\n}\n/* Status labels: a square lamp in the status colour on a plain chip. The\n lamp has a rim in the text colour so that it shows on any chip, and the\n status colour never carries text. */\n.ds-badge--alt,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-body);\n}\n.ds-badge--alt::before,\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n display: inline-block;\n width: var(--size-led);\n height: var(--size-led);\n margin-right: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-text);\n vertical-align: middle;\n}\n.ds-badge--alt { border-color: var(--color-accent-alt); }\n.ds-badge--success { border-color: var(--color-success); }\n.ds-badge--warning { border-color: var(--color-warning); }\n.ds-badge--danger { border-color: var(--color-danger); }\n.ds-badge--alt::before { background: var(--color-accent-alt); }\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* ---------- notice ---------- */\n.ds-notice {\n margin: 0;\n padding: var(--space-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-strong);\n border-left-width: var(--border-width-strong);\n border-radius: var(--radius-control);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-notice__title {\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) 0 0;\n list-style: none;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-pagination__link,\n.ds-pagination__current {\n display: block;\n padding: var(--space-1) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-pagination__current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- dialog ---------- */\n/* A small window in the page flow, on a flat backdrop. */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n overflow: hidden;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-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-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface-alt);\n border: var(--border-width) dotted var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer ---------- */\n/* Closes the views, above the deck. */\n.ds-footer {\n order: 1;\n display: block;\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-footer__band {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n margin: 0;\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link,\n.ds-footer__link:visited {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n.ds-footer__text {\n margin: 0;\n}\n\n/* current item also carries a marker that no token set can remove */\n.ds-nav__link.is-current::before,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#work:target) .ds-nav__link[href=\"#work\"]::before,\n.ds-page:has(#project:target) .ds-nav__link[href=\"#project\"]::before,\n.ds-page:has(#clients:target) .ds-nav__link[href=\"#clients\"]::before,\n.ds-page:has(#brief:target) .ds-nav__link[href=\"#brief\"]::before {\n content: \">\";\n margin-right: var(--space-1);\n}\n\n/* ---------- period components: menu, progress, accordion, tooltip, carousel, avatar ---------- */\n.ds-menu {\n position: relative;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n display: none;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n text-shadow: none;\n text-transform: none;\n}\n/* The deck is docked at the foot of the framed window: its menu opens upward, inside the frame. */\n.ds-nav .ds-menu__list {\n top: auto;\n bottom: 100%;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus-visible {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-meter {\n margin: 0 0 var(--space-3);\n}\n.ds-meter__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-progress {\n display: block;\n height: var(--space-3);\n overflow: hidden;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-progress__bar {\n display: block;\n height: 100%;\n background-color: var(--color-accent);\n background-image: repeating-linear-gradient(90deg, transparent 0, transparent var(--size-seg), var(--color-surface-strong) var(--size-seg), var(--color-surface-strong) var(--size-seg-gap));\n}\n.ds-accordion {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-accordion__summary {\n padding: var(--space-1) var(--space-3);\n cursor: pointer;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-accordion__body {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n.ds-tooltip {\n position: relative;\n border-bottom: var(--border-width) dotted var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n text-transform: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n display: block;\n}\n.ds-carousel {\n margin: 0 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n margin-right: var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: none;\n vertical-align: middle;\n}\n\n:root {\n --size-tip: 220px;\n --size-menu: 150px;\n --size-avatar: 24px;\n --size-seg: 6px;\n --size-seg-gap: 8px;\n}\n", "specimen.html": "\n\n\n\n\nY2K futurism studio window, 1999 to 2003: specimen\n\n\n\n\n
\n\n \n
\n
\n \n \n chronoskin\n \n

reel 200112 projects640 x 480

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

chronoskin studio: screens, marks and motion since 1998

\n

now booking for autumn

\n
\n\n
\n \n \n
\n
\n Reel 2001 is up\n

We build small windows people keep open.

\n

Sites, identities and moving pictures, made by nine people in one loft and sized for a modem.

\n
\n Enter the work\n Brief us\n Latest case study\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n

now showing: reel 2001frame 01 of 12148 kb

\n
\n\n
\n
\n 01 / web\n \n

Harbour radio

\n

Station site with a listening window.

\n
\n
\n 02 / identity\n \n

Orbit couriers

\n

Mark, vans and waybills.

\n
\n
\n 03 / motion\n \n

North ridge film week

\n

Titles and a 20 second ident.

\n
\n
\n 04 / handheld\n \n

Pocket timetable

\n

Train times on a four line screen.

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

Journal

\n all work\n
\n
    \n
  • \n 31.05\n
    \n Harbour radio goes live New\n Six weeks from first sketch to first broadcast, and the whole site weighs less than one song.\n web | posted by the screen desk\n
    \n
    • \n
  • \n 24.05\n
    \n Two silvers for the Orbit identity\n The courier mark was picked twice at the regional design show.\n identity | posted by the mark desk\n
    \n
    • \n
  • \n 11.05\n
    \n We are taking on two projects for autumn\n Send a brief before the end of June and we answer within three working days.\n studio | posted by the front desk\n
    \n
    • \n
\n
\n
\n
\n

Studio letter

\n
\n
What we do

Sites, sound and small hardware.

\n\n

New work by mail, four times a year.

\n
\n \n \n
\n

We never pass addresses on.

\n
\n
\n
\n

Clients

\n
\n

CrewFour people, one studio

\n

RKRowan K.

\n

MVMira V.

\n\n

Proofs, files and invoices wait in the client room.

\n
\n Sign in\n Not a client yet?\n
\n
\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Work
    4. \n
  4. /
    5. \n
  5. Index
    6. \n
\n
\n
\n
\n 01\n

Work

\n

Everything the studio has shipped since 1998, newest first.

\n
\n
\n Start a project\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
No.ProjectClientDisciplineYearScreens
12Harbour radio NewHarbour broadcastingWeb200134
11Orbit couriersOrbit freightIdentity20018
10North ridge film weekNorth ridge artsMotion200112
09Pocket timetableValley railHandheld20006
08Glasshouse recordsGlasshouseWeb200041
07Meridian bank kioskMeridian savingsWeb200027
06Tin robot toy shopTin robotIdentity19995
05Night bus mapCity transitMotion19999
\n \n
\n\n
\n \n
\n

On the desks now

\n \n
\n
\n

Want one like these?

\n
\n

Tell us what you need and when. A brief takes five minutes.

\n Brief us\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Work
    4. \n
  4. /
    5. \n
  5. Harbour radio
    6. \n
\n
\n
\n
\n

case study 12 / web / 2001

\n

Harbour radio: a station in one small window

\n

A local station wanted listeners to keep it open all day. We made the site the size of a radio.

\n

The brief

\n

Most visitors arrive on a shared line at work. The whole site had to load in under ten seconds and never need a second window.

\n
    \n
  • One window, 640 by 480, no scrolling on the front
    • \n
  • The programme guide readable at a glance
    • \n
  • Requests sent without leaving the page
    • \n
\n

What we built

\n

The schedule runs along the foot of the window like a dial. Every page is drawn from four colours and one typeface, so the pictures can be spent on the presenters.

\n

Keeping it light

\n

Each page is checked against a budget before it ships. The build stops when weigh --max 40k reports a page over the line.

\n
\n
\n
\n

Particulars

\n
\n
clientHarbour broadcasting
\n
shippedMay 2001
\n
team4 people
\n
screens34
\n
front page38 kb
\n

Shown with the client's permission.

\n
\n
\n
\n

Same client

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

More work

\n back to the index\n
\n

\n Orbit couriers\n Pocket timetable\n Glasshouse records\n Start a project\n Back to start\n

\n
\n
\n
\n\n \n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Client room
    4. \n
  4. /
    5. \n
  5. Harbour broadcasting
    6. \n
\n
\n
\n
\n 03\n

Client room

\n

Proofs and files for Harbour broadcasting, signed in as rowan.

\n
\n
\n Send a change\n
\n
\n\n
    \n
  • 14Proofs sent
    • \n
  • 3Waiting for you
    • \n
  • 62%Budget used
    • \n
  • 11 daysTo launch
    • \n
\n\n
\n

Note: The studio is closed on Friday. Proofs sent that day are answered on Monday.

\n

Error: The programme guide proof could not be opened. Fetch it again or ask the screen desk.

\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
ProofDeskSizeStatus 
Front page, round 3Screen38 kbApprovedOpen
Listening windowScreen22 kbWaitingReview
Programme guideScreen41 kbBrokenFetch again
Car sticker, two coloursMark96 kbWaitingReview
Roadshow ident, cut 2Motion812 kbApprovedOpen
\n
\n \n \n \n \n
\n
\n\n
\n
\n
\n

Withdraw proof

\n
\n

Take the programme guide proof out of the room? The desk is told and sends a new one.

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

Invoices

\n
\n
\n

No invoice has been raised for this project yet.

\n Ask the front desk\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. Studio
    4. \n
  4. /
    5. \n
  5. Brief us
    6. \n
\n
\n
\n
\n 04\n

Brief us

\n

Five minutes now saves a week of letters later.

\n
\n
\n See the work first\n
\n
\n\n

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

\n\n
\n
\n
\n \n
\n
\n
\n \n
\n \n Enter a complete address.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Also needed\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n Cancel\n
\n
\n
\n
\n

What happens next

\n
\n
    \n
  • 1. We read it the same day.
    • \n
  • 2. We call within three working days.
    • \n
  • 3. You get a plan and a price on one page.
    • \n
\n

Nothing is billed before you sign.

\n
\n
\n \n
\n
\n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.y2k-futurism.landing.s07.p01.t11.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"y2k-futurism\",\n \"years\": [\n 1999,\n 2003\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-yk-71bb\",\n \"short\": \"v1-yk-71bb\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #000030;\n --color-canvas: #003399;\n --color-surface: #003399;\n --color-surface-alt: #1048b8;\n --color-surface-strong: #000030;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #1850c8;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #c0c0d0;\n --color-inverse-text: #000030;\n --color-text: #e0e0e8;\n --color-text-muted: #a8a8b8;\n --color-heading: #ffffff;\n --color-heading-alt: #ffcc00;\n --color-link: #ffffff;\n --color-link-quiet: #d0d0d0;\n --color-link-visited: #a8a8b8;\n --color-link-hover: #ffcc00;\n --color-link-active: #98ff00;\n --color-border: #1850c8;\n --color-border-strong: #808098;\n --color-border-muted: #0840a8;\n --color-accent: #ffcc00;\n --color-accent-text: #000000;\n --color-accent-alt: #98ff00;\n --color-fill-1: #0840a8;\n --color-fill-2: #1048b8;\n --color-fill-3: #1850c8;\n --color-fill-4: #0038a0;\n --color-button: #d0d0d0;\n --color-button-text: #000000;\n --color-button-hover-text: #000030;\n --color-button-secondary: #1048b8;\n --color-button-secondary-text: #ffffff;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808098;\n --color-disabled: #404068;\n --color-disabled-text: #a8a8b8;\n --color-danger: #cc6633;\n --color-danger-surface: #000000;\n --color-success: #98ff00;\n --color-warning: #ffcc00;\n --color-notice: #000030;\n --color-notice-text: #e0e0e8;\n --color-focus: #ffcc00;\n --color-shadow: #000000;\n --color-overlay: #000030;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Courier New\", Courier, monospace;\n --font-ui: \"Courier New\", Courier, monospace;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 10px;\n --text-small: 9px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 18px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 0;\n --radius-pill: 8px;\n --radius-page: 14px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 0 4px color-mix(in srgb, var(--color-button) 70%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 0 4px color-mix(in srgb, var(--color-border-strong) 60%, transparent);\n --shadow-text: none;\n --fill-page: radial-gradient(circle, color-mix(in srgb, var(--color-page) 78%, white) 0, color-mix(in srgb, var(--color-page) 78%, white) 1px, var(--color-page) 1px) 0 0 / 8px 8px;\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 70%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }