{
  "id": "v1-te-8423",
  "long_id": "v1.table-era-90s.docs.s08.p04.t02.u03",
  "name": "Table-era department site, 1997",
  "era": {
    "slug": "table-era-90s",
    "code": "te",
    "name": "Table-era web",
    "years": [
      1996,
      2000
    ],
    "description": "The first commercial web, 1996 to 2000: narrow fixed pages built from tables, blue underlined links on white or grey, Times and Arial at their default sizes, bevelled form buttons, and flat colour strips where a designer wanted emphasis."
  },
  "archetype": "docs",
  "mode": "mix",
  "viewport": {
    "width": 800,
    "fluid": false
  },
  "summary": "The pages of a university department, a library or a public institution as built between 1996 and 2000: a 700px sheet centred in an 800px window, a serif letterhead over one filled line of links, and a front page that is a table of contents, each row a coloured label cell with a sentence and its links beside it. Text is 13px Arial with 11px small print under bold Palatino titles; links are underlined navy, on a cream sheet with a peach bar, khaki title strips, pale yellow cells and one maroon block. It was how institutions first put their prospectus, handbook and forms on the web, written by hand in an office, until content systems and wide stylesheet layouts replaced it after 2000.",
  "url": "https://chrono.skin/s/v1-te-8423",
  "preview_url": "https://chrono.skin/s/v1-te-8423/specimen.html",
  "files": {
    "STYLE.md": "# Table-era department site, 1997\n\n## Summary\n\nThe pages of a university department, a library or a public institution as built between 1996 and 2000: a 700px sheet centred in an 800px window, a serif letterhead over one filled line of links, and a front page that is a table of contents, each row a coloured label cell with a sentence and its links beside it. Text is 13px Arial with 11px small print under bold Palatino titles; links are underlined navy, on a cream sheet with a peach bar, khaki title strips, pale yellow cells and one maroon block. It was how institutions first put their prospectus, handbook and forms on the web, written by hand in an office, until content systems and wide stylesheet layouts replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid, and centred: `--size-page` is 700px. `.ds-page__frame` is the sheet, with `--space-3` (8px) of padding above and `--space-4` (12px) at the sides and foot; nothing is wider than it and nothing stretches with the window.\n- The specimen is one example site, a school of clock and watch making, of four views. `.ds-nav` and `.ds-footer` are written once, outside the views; each view is a `.ds-view` section and one shows at a time.\n- Order from the top: `.ds-nav`, then the view, then the `.ds-footer` under a heavy rule. The `.ds-nav` is two rows: `.ds-nav__top` (the `.ds-brand` at the left; at the right, right-aligned, the department's name and one small line) and `.ds-nav__bar`, one filled line under a heavy rule with the text links at the left, separated by upright bars, and the small search form at the right. There is no rail, no row of tabs or keys and no second strip.\n- One label column, `--size-label` (140px), runs down the left of the home view: the session label of the welcome band and the coloured label cells of the contents ledger stand in it, and the narrow column at the foot starts on it. The home view, `.ds-page__main`, is a stack of full-width blocks with `--space-5` (18px) between them: the `.ds-hero` welcome band, the `.ds-grid` contents ledger of five rows, the `.ds-stat` line of figures between two rules, and `.ds-page__columns`, a 176px `.ds-page__side` of small `.ds-panel` boxes at the left and the dated `.ds-list` under a `.ds-heading` at the right.\n- Inner pages (a course list, a handbook section, a form) keep the `.ds-nav` and the `.ds-footer` and drop the welcome band, the ledger and the figures. `.ds-page__inner` opens with `.ds-page__head` across the full sheet, which stacks with `--space-2` between them the small `.ds-breadcrumb`, the `.ds-page-header` (serif title and one italic line at the left, one button at the right, closed by its own heavy rule in the bar colour) and, when the page has parts, the `.ds-tabs` line. Below it `.ds-page__split` sets the page itself, `.ds-page__block`, at the left and a `--size-side` (180px) `.ds-sidebar` at the right after a `--space-5` gutter: the links of that section, then one or two short notes. Blocks in `.ds-page__block` are `--space-5` apart: the `.ds-table` with its key and `.ds-pagination`, or `.ds-prose`, or `.ds-notices`, the `.ds-form` and what it opens.\n- Views: `home` is the front page (welcome band, contents ledger, figures, term dates, news). `courses` is the course list: the kinds of course as a line of choices, the table of courses with its status key, the page links and the empty state of a list not yet announced. `handbook` is one section of the student handbook as running text, including the line that shows the link states, with the contents in the sidebar and links to the sections before and after. `apply` is the application form with its notices and the boxed question that withdrawing an application opens. The link of the view that is showing is cut out of the bar in the sheet's colour, bold and not underlined; the home link is marked when the address names no view.\n- Blocks are separated by hairlines, heavy rules and outlines, never by cards with shadows or wide gutters. Everything is left-aligned except the label cells and the letterhead lines, which are right-aligned, and the session label, which is centred.\n- Spacing scale: `--space-1` 2px is the padding of strips and bars, the gap between ledger rows and the padding of controls; `--space-2` 5px is cell padding above and below, the gap between the lines of the inner-page head and between a title and its text; `--space-3` 8px is the side padding of cells and strips, box padding, paragraph spacing and the gap between buttons; `--space-4` 12px is the side margin of the sheet, the gap between boxes in a column and between choices in the `.ds-tabs` line; `--space-5` 18px is the gap between neighbouring blocks and between columns; `--space-6` 36px is the list indent and the width of a short input.\n- Fixed sizes: `--size-date` 64px date column of the news list, `--size-search` 110px search field, `--size-field` 230px text input, `--size-area` 320px textarea, `--size-check` 13px checkbox, `--size-dialog` 330px boxed question.\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- Family: lavender, slate and three greys on white, with dark green for positive status.\n- `--color-page`, `--color-canvas`, `--color-surface` are white `#ffffff`; `--color-surface-alt` `#eeeeee` is alternate table rows and the empty state; `--color-surface-strong` `#dddddd` is the strongest grey and carries no text.\n- `--color-bar` `#ccccff` (lavender, black text, blue links) is the navigation rail, the table head and the 2px rules of the page header and the footer. `--color-bar-alt` `#cccccc` (grey, black text) is every title strip (rail labels, panel titles, `.ds-heading`), the current item of the rail, the footer link strip and the notice border.\n- `--color-inverse` `#666666` with white text is the dialog title bar only.\n- Links are the browser's default blue `--color-link` `#0000ee`, visited slate `--color-link-visited` `#666699`, active `#cc0000`; hover equals the link colour.\n- `--color-heading-alt` `#303068` (dark slate) is the wordmark, tagline, h3 and positive figures. `--color-accent` and `--color-accent-alt` `#cc0000` are the solid badge, the flag of a notice, the \"New!\" word and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#dddddd`, `#ccccff`, `#cccccc`, `#eeeeee`: grey and lavender slabs for the four cells of the band, no warm colour. They carry black text and blue links.\n- `--color-warning` `#ff6600` (the one orange of the family) is a fill only and carries black text; `--color-success` `#006600` and `--color-danger` `#cc0000` carry white. Notices are `#eeeeee`; the error notice is red text on white.\n- Borders: `--color-border` `#666666`, `--color-border-strong` `#000000` (dialog outline), `--color-border-muted` and `--color-input-border` `#cccccc` for bevels.\n- One serif for text and headings: `--font-body` and `--font-heading` are Georgia, the screen serif of the 1996 core web fonts, falling back to Times New Roman. `--font-ui` (Arial) sets the rail, the search form, forms, buttons, strips, notices, cell band and small print; `--font-mono` is Courier New.\n- `--text-base` 16px, the browser default the era left untouched; `--text-small` and `--text-ui` 13px; nothing is smaller than 13px.\n- Headings stay close to the text: `--text-h2`, `--text-h3` and `--text-large` 16px bold, `--text-h1` 19px for the lead headline and a page title, `--text-display` 24px bold (`--weight-display` 700) for the wordmark only.\n- Line height is set, as the first stylesheets of 1999 set it: `--line-body` 1.25 and `--line-heading` 1.1. No transform, no tracking; capitals in the rail are typed. All three link decorations are `underline`.\n- `--border-style` is `inset`: table cells, the figure line, panels, the cell band and rules are drawn as the browser drew `border=2` tables and `<hr>`, dark on top and left, light on bottom and right. `--border-width` 2px for cells, outlines and thin rules; `--border-width-strong` 3px for the header and footer rules and the deep bevel of controls.\n- The surface is the chrome of the 1999 desktop. Controls carry a second bevel line inside their border (`--shadow-control`, a hard 1px light edge and a 1px dark edge with no blur, reversed in `--shadow-control-pressed`); the message box stands off the page by a hard 2px edge (`--shadow-dialog`); `--shadow-panel` and `--shadow-text` are `none`. Title strips fade to the right like a window title bar: `--fill-bar-alt` and `--fill-inverse` are horizontal gradients from the palette colour to a lighter mix of it. `--fill-input` shades the top 4px of a field so it reads as sunk. Every other fill is the flat palette colour (`--fill-panel` is `--color-surface`). Radius 0; `--focus-ring` is `1px dotted` in `--color-focus`; `--transition` is `none`.\n- Not expressible by a token, written literally in `components.css`: the bevel of buttons and selects is `border-style: outset` and of inputs, checkboxes and pressed buttons `inset`, drawn in `--color-border-muted` and `--color-input-border`.\n\n## Components\n\n- `.ds-page`: on `<body>`; the squared ground, body type. `.ds-page__frame` is the 700px sheet in `--color-canvas`. `.ds-page__main` is the home stack; `.ds-page__columns` its two columns at the foot and `.ds-page__side` the narrow left one. On inner pages `.ds-page__inner` holds `.ds-page__head` (path, page header, choices) and `.ds-page__split`, which sets `.ds-page__block` beside the sidebar.\n- `.ds-nav`: header. `.ds-nav__top` holds the `.ds-brand` and the right-aligned `.ds-nav__tagline`, whose first line is `.ds-nav__dept`; `.ds-nav__bar` is the filled line with `.ds-nav__links` (`.ds-nav__item` / `.ds-nav__link`, bar separated) and the `.ds-nav__search` form with its `.ds-nav__field`. The link of the view that is showing is cut out of the bar (`components.css` has one selector per view for this, and `is-current` does the same by hand).\n- `.ds-brand`: the site's mark and name, at the left of `.ds-nav__top`. `.ds-brand__mark` is a square tile dressed like the button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the `outset` bevel in `--color-border-muted`, `--radius-control`, `--shadow-control`), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`, drawn with flat line caps. `.ds-brand__name` is the name in the heading family at `--text-display` in `--color-heading`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the welcome band, the era's page introduction: an outlined box whose left cell, `.ds-hero__label` on `--fill-inverse`, names the session (`.ds-hero__year` is its large line) and whose `.ds-hero__body` holds `.ds-hero__title` (22px serif), `.ds-hero__lead` (15px) and `.ds-hero__action`, a large button, a secondary one and a `.ds-hero__hint`. Never a tall banner or a picture.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__text` holds `.ds-page-header__title` (22px serif) and `.ds-page-header__lead` (one italic line); `.ds-page-header__action` holds one button, bottom-aligned at the right. A heavy rule in the bar colour closes it.\n- `.ds-prose`: running text on handbook pages; styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 15px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for notes, `.ds-link--strong` for bold links. `.ds-links` wraps a line of links.\n- `.ds-button`: grey bevelled button with an 11px label, on a `<button>` or, when it leads to another page, on a link. `.ds-button--secondary` is khaki for the lesser action, `.ds-button--danger` is the destructive action (withdraw, delete): the same bevel on `--color-surface` with a bold label in `--color-danger`, never a red button. `.ds-button--large` uses 15px. States `is-hover`, `is-pressed` (bevel inverts), `is-focus`, `is-disabled`. `.ds-buttons` lays out a row.\n- `.ds-form`: two-column form: bold left-aligned `.ds-form__label` in the label column and `.ds-form__field`. Controls: `.ds-form__input` (`--short` for 36px fields), `.ds-form__select`, `.ds-form__textarea` (fixed-width face), `.ds-form__check`. `.ds-form__hint` for small help, `.ds-form__error` for a bold message in the danger colour under the field (the control itself does not change), `.ds-form__actions` for the button row.\n- `.ds-table`: ruled rows with no upright lines. `.ds-table__head` (`--fill-bar`, 11px bold, `--num` right-aligned), `.ds-table__cell` with `--num` and `--code` (fixed-width face), `.ds-table__row--alt` for rows on `--color-surface-alt`, `.ds-table__caption` for the 11px line beneath.\n- `.ds-stat`: summary figures as one line between two hairlines. `.ds-stat` is the row; each `.ds-stat__item` holds a `.ds-stat__value` (22px serif in `--color-heading-alt`) over a `.ds-stat__label` (11px), with a faint rule between items. Three to five items; never coloured cells or separate cards.\n- `.ds-list`: dated entries, each `.ds-list__item` a `.ds-list__meta` date in its own 64px column and beside it a linked title over a `.ds-list__text` line, closed by a hairline; `.ds-list__more` is the small right-aligned link under the list.\n- `.ds-panel`: an outlined box: `.ds-panel__title` strip on `--fill-bar-alt`, then `.ds-panel__body`; `.ds-panel__row` is a ruled line with a label at the left and a value at the right, `.ds-panel__note` an 11px line.\n- `.ds-grid`: the contents ledger, the centrepiece of the front page: a stack of outlined rows `.ds-grid__cell` (and `--2`, `--3`, `--4` for the four fills), each a right-aligned serif `.ds-grid__title` in the coloured label cell and a `.ds-grid__text` sentence with its `.ds-grid__subs` line of small links.\n- `.ds-tabs`: the era's tabs, a line of text links over a hairline: `.ds-tabs__item` / `.ds-tabs__tab`; the current one, `is-current`, is bold on a small outlined `--color-fill-1` block.\n- `.ds-badge`: small solid maroon label. `.ds-badge--text` is a bold coloured word beside a link; `.ds-badge--count` is a grey count. Status labels are the same solid block with the word typed in capitals: `.ds-badge--success` (places open), `.ds-badge--warning` (few left), `.ds-badge--danger` (full). `.ds-badges` is the key line under a table.\n- `.ds-sidebar`: the outlined column on `--color-surface-alt` at the right of an inner page: sections of `.ds-sidebar__title` (strip on `--fill-bar-alt`) over `.ds-sidebar__list` / `.ds-sidebar__item` (ruled links; `is-current` bold) or `.ds-sidebar__text` lines.\n- `.ds-notice`: box on `--color-notice` bordered in the `--color-bar-alt` colour; `.ds-notice__label` bold lead words, `.ds-notice--error` in the danger colour. `.ds-notices` stacks several.\n- `.ds-pagination`: one line: `.ds-pagination__label` (grey, \"1 to 6 of 24\") at the left, then previous, numbered `.ds-pagination__link` and next at the right; current `is-current`, `is-disabled`.\n- `.ds-breadcrumb`: 11px path: `.ds-breadcrumb__label` (\"You are here:\"), then `.ds-breadcrumb__item` separated by \">\"; the last one `is-current`.\n- `.ds-dialog`: a 330px boxed question in the page flow: border in `--color-border-strong`, serif `.ds-dialog__title` on `--fill-inverse`, `.ds-dialog__body` and right-aligned `.ds-dialog__actions`. No backdrop.\n- `.ds-empty`: block on `--color-surface-alt` between two hairlines with `.ds-empty__title`, `.ds-empty__text` and a button, left-aligned.\n- `.ds-footer`: under a heavy rule, `.ds-footer__address` at the left, `.ds-footer__links` (bar-separated `.ds-footer__item`) at the right, and the grey `.ds-footer__legal` line across.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, and `.ds-view--home` shows when none is named. It has no box of its own.\n- `.ds-heading`: serif section title over a hairline in `--color-border-strong`.\n\n## Never\n\n- `row-gap <= 8px`: ledger rows, table rows and list entries sit close.\n- `block-gap <= 18px`: neighbouring blocks are at most 18px apart.\n- `content-width <= 700px`: the page is a fixed 700px sheet.\n- `font-size >= 13px`: this type set has no 10px small print; the smallest text is 13px.\n- `font-size <= 24px`: the wordmark is the largest text; headings stop at 19px.\n- `font-families <= 3`: Georgia, Arial for controls and small print, Courier for code.\n- `font-weight >= 400`: only regular, bold and black weights were measured.\n- `underlined-links >= 95%`: every reference underlines 100% of its link text.\n- `letter-spacing = 0`: no reference tracks its text.\n- `uppercase-text <= 0%`: no reference uses text-transform; capitals are typed.\n- `border-radius <= 0px`: no reference has a rounded corner.\n- `box-shadow-blur <= 0px`: shadows are hard offset edges; nothing is blurred.\n- `text-shadow = none`: no reference has a text shadow.\n- `gradient-fills <= 8%`: only the pinstriped bars and title strips carry a pattern; every other fill is flat.\n- `border-width <= 2px`: the widest border measured in any reference is the 2px bevel of a form control.\n- `transition = none`: nothing in the references changes on hover.\n- `animation = none`: no reference has a CSS animation.\n- `border-width >= 2px`: this surface has no 1px lines; every border is 2px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new entry on the front page is one more `.ds-grid__cell` row of the ledger; a new set of links for a section is a `.ds-sidebar` section; a new box is a `.ds-panel` with a khaki title strip; anything tabular is a `.ds-table` of ruled rows under a `--fill-bar` head; a new page starts with path, `.ds-page-header` and its heavy rule. Keep text at 13px Arial with 11px small print and bold serif titles, keep links underlined, keep labels in the 140px column at the left and a section's links in the 180px column at the right, and never add radius, blur, hover effects, a navigation rail, pictures or more whitespace than `--space-5`.\n",
    "components.css": "/* Layout tokens (structure part). A department's pages of 1997: a 700px\n   sheet centred in an 800px window, a 140px label column that the welcome\n   band, the contents ledger and the forms all share, hairlines 5px above and\n   below a row, 18px between blocks and a 180px column for a section's links. */\n:root {\n  --size-page: 700px;\n  --size-side: 180px;\n  --size-label: 140px;\n  --size-date: 64px;\n  --size-search: 110px;\n  --size-field: 230px;\n  --size-area: 320px;\n  --size-check: 13px;\n  --size-dialog: 330px;\n  --space-1: 2px;\n  --space-2: 5px;\n  --space-3: 8px;\n  --space-4: 12px;\n  --space-5: 18px;\n  --space-6: 36px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n  margin: 0;\n  padding: var(--space-3) 0 var(--space-5);\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-3) var(--space-4) var(--space-4);\n  background: var(--color-canvas);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-panel);\n}\n/* Home: full-width blocks that share one label column at the left. */\n.ds-page__main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding: var(--space-4) 0 var(--space-5);\n}\n/* The foot of the home page: a narrow box at the left, the dated list at the right. */\n.ds-page__columns {\n  display: grid;\n  grid-template-columns: calc(var(--size-label) + var(--space-6)) minmax(0, 1fr);\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.ds-page__side {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n/* Inner page: the head across the sheet, then the page beside its section's links. */\n.ds-page__inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-3) 0 var(--space-5);\n}\n.ds-page__head {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n.ds-page__split {\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__block {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\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/* ---------- section heading: serif title on a rule ---------- */\n.ds-heading {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n\n/* ---------- nav: letterhead, then one filled line of links ---------- */\n.ds-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n.ds-nav__top {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n/* brand: the mark on a tile dressed like the button, then the name */\n.ds-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\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: calc(var(--text-display) + var(--space-3));\n  height: calc(var(--text-display) + var(--space-3));\n  background: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) outset var(--color-border-muted);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  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-nav__tagline {\n  margin: 0;\n  text-align: right;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-nav__dept {\n  display: block;\n  color: var(--color-heading-alt);\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}\n.ds-nav__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-1) var(--space-4);\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__links {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-base);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-nav__item + .ds-nav__item::before {\n  content: \"|\";\n  padding: 0 var(--space-2);\n}\n.ds-nav__link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:visited,\n.ds-nav__link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  color: var(--color-link-hover);\n}\n/* The current page: its link is cut out of the bar in the sheet's colour.\n   One selector per view, and the home link when the address names no view. */\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(#courses:target) .ds-nav__link[href=\"#courses\"],\n.ds-page:has(#handbook:target) .ds-nav__link[href=\"#handbook\"],\n.ds-page:has(#apply:target) .ds-nav__link[href=\"#apply\"] {\n  padding: 0 var(--space-2);\n  background: var(--color-canvas);\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-nav__search {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-nav__search .ds-nav__field {\n  width: var(--size-search);\n}\n\n/* ---------- hero: the welcome band, a session label in the label column ---------- */\n.ds-hero {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\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-page);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-hero__label {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0;\n  padding: var(--space-3);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-align: center;\n  text-shadow: var(--shadow-text);\n}\n.ds-hero__year {\n  display: block;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-hero__body {\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\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}\n.ds-hero__lead {\n  margin: var(--space-2) 0 var(--space-3);\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  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- page header: serif title and one line, closed by a heavy rule ---------- */\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-2);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\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}\n.ds-page-header__lead {\n  margin: var(--space-1) 0 0;\n  font-size: var(--text-base);\n  font-style: italic;\n}\n.ds-page-header__action {\n  flex: none;\n}\n\n/* ---------- grid: the contents ledger, a coloured label cell and a line of text ---------- */\n.ds-grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n.ds-grid__cell {\n  display: grid;\n  grid-template-columns: var(--size-label) minmax(0, 1fr);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-page);\n}\n.ds-grid__title {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-fill-1);\n  color: var(--color-text);\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  text-align: right;\n}\n.ds-grid__cell--2 .ds-grid__title {\n  background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__title {\n  background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__title {\n  background: var(--color-fill-4);\n}\n.ds-grid__text {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  font-size: var(--text-base);\n}\n.ds-grid__subs {\n  display: block;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- stats: figures between two rules, number over label ---------- */\n.ds-stat {\n  display: flex;\n  margin: 0;\n  padding: var(--space-2) 0;\n  list-style: none;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item {\n  flex: 1;\n  padding: 0 var(--space-3);\n}\n.ds-stat__item + .ds-stat__item {\n  border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__value {\n  display: block;\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-stat__label {\n  display: block;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- list: dated entries, the date in a column of its own ---------- */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-base);\n}\n.ds-list__item {\n  display: grid;\n  grid-template-columns: var(--size-date) minmax(0, 1fr);\n  column-gap: var(--space-3);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__meta {\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-list__text {\n  display: block;\n}\n.ds-list__more {\n  margin: var(--space-2) 0 0;\n  text-align: right;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- panel: outlined box under a title strip ---------- */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-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-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-panel__body {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  font-size: var(--text-base);\n}\n.ds-panel__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-panel__note {\n  margin: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- table: ruled rows, no upright lines ---------- */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  background: var(--fill-panel);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n}\n.ds-table__head {\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-small);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n}\n.ds-table__head--num {\n  text-align: right;\n}\n.ds-table__cell {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-align: left;\n  vertical-align: top;\n}\n.ds-table__cell--num {\n  text-align: right;\n}\n.ds-table__cell--code {\n  font-family: var(--font-mono);\n  white-space: nowrap;\n}\n.ds-table__row--alt .ds-table__cell {\n  background: var(--color-surface-alt);\n}\n.ds-table__caption {\n  caption-side: bottom;\n  padding: var(--space-2) 0 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-align: left;\n}\n\n/* ---------- tabs: a line of choices between two rules ---------- */\n.ds-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: var(--space-4);\n  margin: 0;\n  padding: var(--space-1) 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-base);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__item {\n  padding: 0;\n}\n.ds-tabs__tab {\n  color: var(--color-link);\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  padding: 0 var(--space-2);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n\n/* ---------- sidebar: a section's links in an outlined column at the right ---------- */\n.ds-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: 0 0 var(--space-2);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\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-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: var(--space-1) var(--space-3) 0;\n  list-style: none;\n  font-size: var(--text-base);\n}\n.ds-sidebar__item {\n  padding: var(--space-1) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-current {\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__text {\n  margin: 0;\n  padding: var(--space-2) var(--space-3) 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n.ds-notice {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) var(--color-bar-alt);\n  border-radius: var(--radius-panel);\n  font-size: var(--text-base);\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/* ---------- pagination: \"page 1 of 3\" at the left, the pages at the right ---------- */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-base);\n}\n.ds-pagination__label {\n  flex: 1;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\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  color: var(--color-text);\n  font-weight: var(--weight-bold);\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 ---------- */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-breadcrumb__label {\n  padding: 0 var(--space-2) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \">\";\n  padding: 0 var(--space-2);\n  color: var(--color-text-muted);\n}\n.ds-breadcrumb__item.is-current {\n  color: var(--color-text);\n}\n\n/* ---------- dialog: a boxed question in the page flow ---------- */\n.ds-dialog {\n  position: static;\n  box-sizing: border-box;\n  width: var(--size-dialog);\n  margin: 0;\n  padding: 0;\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-dialog);\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-inverse);\n  color: var(--color-inverse-text);\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  text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n  margin: 0;\n  padding: var(--space-3);\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-3);\n  padding: 0 var(--space-3) var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n  padding: var(--space-4) var(--space-3);\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-size: var(--text-base);\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n}\n\n/* ---------- footer: address at the left, links at the right, under a heavy rule ---------- */\n.ds-footer {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  column-gap: var(--space-5);\n  padding: var(--space-2) 0 0;\n  border-top: var(--border-width-strong) var(--border-style) var(--color-bar);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n}\n.ds-footer__address {\n  margin: 0;\n  font-style: normal;\n}\n.ds-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-content: flex-start;\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-2);\n}\n.ds-footer__legal {\n  grid-column: 1 / -1;\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\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-family: var(--font-ui);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--strong {\n  font-weight: var(--weight-bold);\n}\n.ds-links {\n  margin: 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}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-3) 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  font-size: var(--text-h2);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n  color: var(--color-heading-alt);\n}\n.ds-prose p {\n  margin: 0 0 var(--space-3);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  font-family: var(--font-mono);\n  font-size: var(--text-base);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n}\n\n/* ---------- buttons ---------- */\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  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width-strong) outset var(--color-border-muted);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  transition: var(--transition);\n  white-space: nowrap;\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}\n.ds-button--large {\n  font-size: var(--text-large);\n}\n/* Destructive action: the same bevel on the surface colour, the label in the\n   bold danger colour, which every palette keeps legible on its surface. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-surface);\n  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  box-shadow: none;\n}\n\n/* ---------- form ---------- */\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-2);\n  align-items: baseline;\n  margin: 0;\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form__label {\n  text-align: left;\n  font-weight: var(--weight-bold);\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);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width-strong) inset var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  transition: var(--transition);\n}\n.ds-form__input {\n  width: var(--size-field);\n}\n.ds-form__input--short {\n  width: var(--space-6);\n}\n.ds-form__select {\n  border-style: outset;\n  background: var(--fill-button);\n  color: var(--color-button-text);\n}\n.ds-form__textarea {\n  display: block;\n  width: var(--size-area);\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: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\n   fill, so it reads the same on a light and on a dark page. */\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  font-size: var(--text-small);\n  color: var(--color-text-muted);\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-1);\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-heading);\n  white-space: nowrap;\n}\n/* The usual form: a coloured word next to a link, no box. */\n.ds-badge--text {\n  padding: 0;\n  background: transparent;\n  color: var(--color-accent-alt);\n  font-size: var(--text-base);\n}\n.ds-badge--count {\n  background: transparent;\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n/* Status labels: the same small solid block in a flat status colour. */\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-accent-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-bar-alt-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-accent-text);\n}\n/* A key line that explains the labels. */\n.ds-badges {\n  display: block;\n  padding: 0 0 var(--space-1);\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin School of Horology: table-era department site, 1996 to 2000: specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<div class=\"ds-page__frame\">\n\n  <header class=\"ds-nav\" data-component=\"nav\">\n    <div class=\"ds-nav__top\">\n      <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n        <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9.2\"/><ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9.2\"/><line x1=\"2.8\" y1=\"12\" x2=\"21.2\" y2=\"12\"/></svg></span>\n        <span class=\"ds-brand__name\">chronoskin</span>\n      </a>\n      <p class=\"ds-nav__tagline\"><span class=\"ds-nav__dept\">School of Horology</span>Faculty of Applied Science. Teaching the making and mending of clocks and watches.</p>\n    </div>\n    <div class=\"ds-nav__bar\">\n      <ul class=\"ds-nav__links\">\n        <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#home\">Home</a></li>\n        <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#courses\">Courses</a></li>\n        <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#handbook\">Student Handbook</a></li>\n        <li class=\"ds-nav__item\"><a class=\"ds-nav__link\" href=\"#apply\">How to Apply</a></li>\n      </ul>\n      <form class=\"ds-nav__search\" action=\"#courses\">\n        <label for=\"n-find\">Search:</label>\n        <input class=\"ds-form__input ds-nav__field\" id=\"n-find\" type=\"text\">\n        <button class=\"ds-button\" type=\"button\">Find</button>\n      </form>\n    </div>\n  </header>\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n    <div class=\"ds-page__main\">\n\n      <div class=\"ds-hero\" data-component=\"hero\">\n        <p class=\"ds-hero__label\">Session<span class=\"ds-hero__year\">1997/98</span>Michaelmas term</p>\n        <div class=\"ds-hero__body\">\n          <h1 class=\"ds-hero__title\">Welcome to the School of Horology</h1>\n          <p class=\"ds-hero__lead\">Forty students a year learn here to design, make and restore timekeepers, at the bench and at the drawing board. These pages hold the course lists, the handbook and the forms.</p>\n          <div class=\"ds-hero__action\">\n            <a class=\"ds-button ds-button--large\" href=\"#apply\">Apply for 1998 Entry</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#courses\">Course List</a>\n            <span class=\"ds-hero__hint\">Applications close on 15 January.</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <div class=\"ds-grid__cell\">\n          <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#courses\">Teaching</a></p>\n          <p class=\"ds-grid__text\">Three-year diploma, one-year certificate and evening classes.\n            <span class=\"ds-grid__subs\"><a class=\"ds-link\" href=\"#courses\">Course list</a> | <a class=\"ds-link\" href=\"#courses\">Timetable</a> | <a class=\"ds-link\" href=\"#courses\">Examination papers</a> <span class=\"ds-badge\">NEW</span></span></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--2\">\n          <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#handbook\">Students</a></p>\n          <p class=\"ds-grid__text\">What every student is given on the first morning, and where to find it again.\n            <span class=\"ds-grid__subs\"><a class=\"ds-link\" href=\"#handbook\">Handbook</a> | <a class=\"ds-link\" href=\"#handbook\">Workshop rules</a> | <a class=\"ds-link\" href=\"#handbook\">Tool list</a></span></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--3\">\n          <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#apply\">Admissions</a></p>\n          <p class=\"ds-grid__text\">Entry requirements, fees and the bench test.\n            <span class=\"ds-grid__subs\"><a class=\"ds-link\" href=\"#apply\">Application form</a> | <a class=\"ds-link\" href=\"#apply\">Open days</a> | <a class=\"ds-link\" href=\"#apply\">Bursaries</a></span></p>\n        </div>\n        <div class=\"ds-grid__cell ds-grid__cell--4\">\n          <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#handbook\">Workshops</a></p>\n          <p class=\"ds-grid__text\">Two bench rooms, the turning shop and the timing laboratory.\n            <span class=\"ds-grid__subs\"><a class=\"ds-link\" href=\"#handbook\">Opening hours</a> | <a class=\"ds-link\" href=\"#handbook\">Booking a lathe</a> | <a class=\"ds-link\" href=\"#handbook\">Safety</a></span></p>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <p class=\"ds-grid__title\"><a class=\"ds-link\" href=\"#home\">People</a></p>\n          <p class=\"ds-grid__text\">Nine teaching staff, four technicians and the school office.\n            <span class=\"ds-grid__subs\"><a class=\"ds-link\" href=\"#home\">Staff list</a> | <a class=\"ds-link\" href=\"#home\">Office hours</a> | <a class=\"ds-link\" href=\"#home\">Former students</a></span></p>\n        </div>\n      </div>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">118</span><span class=\"ds-stat__label\">students this session</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">24</span><span class=\"ds-stat__label\">courses taught</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">62</span><span class=\"ds-stat__label\">benches in two rooms</span></li>\n        <li class=\"ds-stat__item\"><span class=\"ds-stat__value\">1,430</span><span class=\"ds-stat__label\">books in the school library</span></li>\n      </ul>\n\n      <div class=\"ds-page__columns\">\n        <div class=\"ds-page__side\">\n          <section class=\"ds-panel\" data-component=\"panel\">\n            <h2 class=\"ds-panel__title\">Term dates</h2>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-panel__row\"><span>Michaelmas</span><span>29 Sep to 12 Dec</span></div>\n              <div class=\"ds-panel__row\"><span>Lent</span><span>12 Jan to 27 Mar</span></div>\n              <div class=\"ds-panel__row\"><span>Summer</span><span>20 Apr to 26 Jun</span></div>\n              <p class=\"ds-panel__note\">Workshops close at noon on the last day of term. <a class=\"ds-link\" href=\"#handbook\">Full calendar</a></p>\n            </div>\n          </section>\n          <section class=\"ds-panel\">\n            <h2 class=\"ds-panel__title\">School office</h2>\n            <div class=\"ds-panel__body\">\n              <div class=\"ds-panel__row\"><span>Room 2</span><span>9.30am to 12.30pm</span></div>\n              <div class=\"ds-panel__row\"><span>Library</span><span>9am to 5pm</span></div>\n            </div>\n          </section>\n        </div>\n        <section>\n          <h2 class=\"ds-heading\">News and seminars</h2>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\"><span class=\"ds-list__meta\">24 Nov</span><span><a class=\"ds-link\" href=\"#handbook\">Seminar: the compensated pendulum</a><span class=\"ds-list__text\">Room 12 at 4.15pm. Tea from 4. All students welcome.</span></span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__meta\">19 Nov</span><span><a class=\"ds-link\" href=\"#courses\">Lent term options: choose by 5 December</a><span class=\"ds-list__text\">Second-year students hand their option forms to the school office.</span></span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__meta\">12 Nov</span><span><a class=\"ds-link is-visited\" href=\"#handbook\">New timing machine in the laboratory</a><span class=\"ds-list__text\">Book a half-hour introduction with the technicians before using it.</span></span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-list__meta\">3 Nov</span><span><a class=\"ds-link\" href=\"#apply\">Open day for 1998 applicants</a><span class=\"ds-list__text\">Saturday 6 December, 10am to 3pm. Bench rooms open throughout.</span></span></li>\n          </ul>\n          <p class=\"ds-list__more\"><a class=\"ds-link\" href=\"#home\">Older news</a></p>\n        </section>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"courses\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n            <li class=\"ds-breadcrumb__label\">You are here:</li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">School of Horology</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#courses\">Teaching</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Courses 1997/98</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\" data-component=\"page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Courses 1997/98</h1>\n            <p class=\"ds-page-header__lead\">Every course the school teaches this session, with the places still open for Lent term.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button\" href=\"#apply\">Apply for a Place</a>\n          </div>\n        </header>\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab is-current\" href=\"#courses\">Diploma</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#courses\">Certificate</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#courses\">Evening classes</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#courses\">Summer school</a></li>\n        </ul>\n      </div>\n\n      <div class=\"ds-page__split\">\n        <div class=\"ds-page__block\">\n          <table class=\"ds-table\" data-component=\"table\">\n            <caption class=\"ds-table__caption\"><span class=\"ds-badges\" data-component=\"badge\">Key: <span class=\"ds-badge ds-badge--success\">OPEN</span> places free <span class=\"ds-badge ds-badge--warning\">FEW LEFT</span> under five places <span class=\"ds-badge ds-badge--danger\">FULL</span> waiting list only <span class=\"ds-badge\">NEW</span> first taught this session</span></caption>\n            <thead>\n              <tr>\n                <th class=\"ds-table__head\" scope=\"col\">Code</th>\n                <th class=\"ds-table__head\" scope=\"col\">Course</th>\n                <th class=\"ds-table__head\" scope=\"col\">Term</th>\n                <th class=\"ds-table__head ds-table__head--num\" scope=\"col\">Hours</th>\n                <th class=\"ds-table__head\" scope=\"col\">Places</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td class=\"ds-table__cell ds-table__cell--code\">HR101</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link\" href=\"#handbook\">Bench Practice I: filing, turning and fitting</a></td>\n                <td class=\"ds-table__cell\">All year</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">180</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">FULL</span></td>\n              </tr>\n              <tr class=\"ds-table__row--alt\">\n                <td class=\"ds-table__cell ds-table__cell--code\">HR104</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link\" href=\"#handbook\">Theory of the Escapement</a></td>\n                <td class=\"ds-table__cell\">Michaelmas</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">40</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n              </tr>\n              <tr>\n                <td class=\"ds-table__cell ds-table__cell--code\">HR110</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link is-visited\" href=\"#handbook\">Technical Drawing for Clockmakers</a></td>\n                <td class=\"ds-table__cell\">Lent</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">36</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n              </tr>\n              <tr class=\"ds-table__row--alt\">\n                <td class=\"ds-table__cell ds-table__cell--code\">HR205</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link\" href=\"#handbook\">Wheel Cutting and Gear Trains</a></td>\n                <td class=\"ds-table__cell\">Lent</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">60</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">FEW LEFT</span></td>\n              </tr>\n              <tr>\n                <td class=\"ds-table__cell ds-table__cell--code\">HR212</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link\" href=\"#handbook\">Quartz and Electronic Movements</a> <span class=\"ds-badge\">NEW</span></td>\n                <td class=\"ds-table__cell\">Lent</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">30</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">OPEN</span></td>\n              </tr>\n              <tr class=\"ds-table__row--alt\">\n                <td class=\"ds-table__cell ds-table__cell--code\">HR301</td>\n                <td class=\"ds-table__cell\"><a class=\"ds-link\" href=\"#handbook\">Restoration of Antique Movements</a></td>\n                <td class=\"ds-table__cell\">Summer</td>\n                <td class=\"ds-table__cell ds-table__cell--num\">90</td>\n                <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">FEW LEFT</span></td>\n              </tr>\n            </tbody>\n          </table>\n\n          <ol class=\"ds-pagination\" data-component=\"pagination\">\n            <li class=\"ds-pagination__label\">Courses 1 to 6 of 24</li>\n            <li><span class=\"ds-pagination__link is-disabled\">Previous</span></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#courses\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#courses\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#courses\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#courses\">4</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#courses\">Next</a></li>\n          </ol>\n\n          <section>\n            <h2 class=\"ds-heading\">Summer school 1998</h2>\n            <div class=\"ds-empty\" data-component=\"empty\">\n              <h3 class=\"ds-empty__title\">No summer courses have been announced yet.</h3>\n              <p class=\"ds-empty__text\">The list is settled in February. Leave your address and the school office will post it to you.</p>\n              <a class=\"ds-button\" href=\"#apply\">Ask for the List</a>\n            </div>\n          </section>\n        </div>\n\n        <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n          <section>\n            <h2 class=\"ds-sidebar__title\">Teaching</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item is-current\">Courses 1997/98</li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#courses\">Timetable</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#courses\">Examination papers</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#handbook\">Reading lists</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apply\">Fees</a></li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">Course tutor</h2>\n            <p class=\"ds-sidebar__text\">Room 4, bench room corridor. Office hours Tuesday and Thursday, 2pm to 4pm.</p>\n            <p class=\"ds-sidebar__text\"><a class=\"ds-link\" href=\"#apply\">Write to the tutor</a></p>\n          </section>\n        </aside>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"handbook\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__label\">You are here:</li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">School of Horology</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#handbook\">Student Handbook</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">3. Workshop rules</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Student Handbook</h1>\n            <p class=\"ds-page-header__lead\">Section 3 of 7. Revised September 1997 by the school office.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#handbook\">Whole Handbook on One Page</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-page__split\">\n        <div class=\"ds-page__block\">\n          <article class=\"ds-prose\" data-component=\"typography\">\n            <h1>3. Workshop rules</h1>\n            <p class=\"ds-prose__lead\">The bench rooms are shared by three year groups. These rules keep work, tools and fingers safe.</p>\n            <h2>3.1 Your bench</h2>\n            <p>Each student is given a numbered bench and a drawer key in the first week. The number is also your locker number and the first part of your computer name, for example <code>bench27</code>.</p>\n            <ul>\n              <li>Clear the bench top at the end of every session.</li>\n              <li>Work left in a vice overnight must carry a ticket with your name.</li>\n              <li>Report a lost key to the technicians the same day.</li>\n            </ul>\n            <h2>3.2 Machines</h2>\n            <h3>Lathes and the wheel-cutting engine</h3>\n            <p>No student uses a powered machine before the technicians have signed the induction sheet. <strong>Eye protection is worn at every machine</strong>, including by anyone watching.</p>\n            <h3>How links are shown in this handbook</h3>\n            <p class=\"ds-links\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#handbook\">A section you have not read</a>,\n              <a class=\"ds-link is-visited\" href=\"#handbook\">a section you have read</a>,\n              <a class=\"ds-link is-hover\" href=\"#handbook\">a link under the pointer</a>,\n              <a class=\"ds-link is-active\" href=\"#handbook\">a link as you click it</a>,\n              <a class=\"ds-link ds-link--quiet\" href=\"#handbook\">a note or a footnote</a> and\n              <a class=\"ds-link ds-link--strong\" href=\"#handbook\">a rule you must know</a>.\n            </p>\n          </article>\n\n          <ol class=\"ds-pagination\">\n            <li class=\"ds-pagination__label\">Section 3 of 7</li>\n            <li><a class=\"ds-pagination__link\" href=\"#handbook\">Previous: 2. The school day</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#handbook\">Next: 4. Assessment</a></li>\n          </ol>\n        </div>\n\n        <aside class=\"ds-sidebar\">\n          <section>\n            <h2 class=\"ds-sidebar__title\">Contents</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link is-visited\" href=\"#handbook\">1. Who is who</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link is-visited\" href=\"#handbook\">2. The school day</a></li>\n              <li class=\"ds-sidebar__item is-current\">3. Workshop rules</li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#handbook\">4. Assessment</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#handbook\">5. The library</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#handbook\">6. Tool list</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#handbook\">7. If things go wrong</a></li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">In print</h2>\n            <p class=\"ds-sidebar__text\">Paper copies are kept at the school office and in the library, shelf mark H 0.1.</p>\n          </section>\n        </aside>\n      </div>\n\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"apply\">\n    <div class=\"ds-page__inner\">\n\n      <div class=\"ds-page__head\">\n        <nav aria-label=\"Path\">\n          <ol class=\"ds-breadcrumb\">\n            <li class=\"ds-breadcrumb__label\">You are here:</li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">School of Horology</a></li>\n            <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#apply\">Admissions</a></li>\n            <li class=\"ds-breadcrumb__item is-current\">Application form</li>\n          </ol>\n        </nav>\n        <header class=\"ds-page-header\">\n          <div class=\"ds-page-header__text\">\n            <h1 class=\"ds-page-header__title\">Application for 1998 entry</h1>\n            <p class=\"ds-page-header__lead\">The form reaches the admissions tutor directly. A printed copy is posted to you as a receipt.</p>\n          </div>\n          <div class=\"ds-page-header__action\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#courses\">See the Courses First</a>\n          </div>\n        </header>\n      </div>\n\n      <div class=\"ds-page__split\">\n        <div class=\"ds-page__block\">\n          <div class=\"ds-notices\" data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__label\">Closing date:</span> forms sent after 15 January are held for the following session.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__label\">The form was not sent:</span> the e-mail address is incomplete. Your other answers have been kept.</p>\n          </div>\n\n          <form class=\"ds-form\" data-component=\"form\" action=\"#apply\">\n            <label class=\"ds-form__label\" for=\"a-name\">Full name:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input\" id=\"a-name\" type=\"text\" value=\"R. Okafor\">\n            </div>\n            <label class=\"ds-form__label\" for=\"a-mail\">E-mail address:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input\" id=\"a-mail\" type=\"text\" value=\"r.okafor@\">\n              <span class=\"ds-form__error\">An address needs a name, an @ sign and a host.</span>\n            </div>\n            <label class=\"ds-form__label\" for=\"a-course\">Course applied for:</label>\n            <div class=\"ds-form__field\">\n              <select class=\"ds-form__select\" id=\"a-course\">\n                <option>Diploma (three years)</option>\n                <option>Certificate (one year)</option>\n                <option>Evening classes</option>\n              </select>\n            </div>\n            <label class=\"ds-form__label\" for=\"a-age\">Age on 1 October:</label>\n            <div class=\"ds-form__field\">\n              <input class=\"ds-form__input ds-form__input--short\" id=\"a-age\" type=\"text\" value=\"19\">\n              <span class=\"ds-form__hint\">applicants must be 17 or over</span>\n            </div>\n            <label class=\"ds-form__label\" for=\"a-why\">Bench experience:</label>\n            <div class=\"ds-form__field\">\n              <textarea class=\"ds-form__textarea\" id=\"a-why\" rows=\"5\">Two years of Saturday work in a repair shop.\nCleaned and re-bushed three longcase movements.</textarea>\n            </div>\n            <span class=\"ds-form__label\">Please send me:</span>\n            <div class=\"ds-form__field\">\n              <label><input class=\"ds-form__check\" type=\"checkbox\" checked>The printed prospectus</label><br>\n              <label><input class=\"ds-form__check\" type=\"checkbox\">Details of bursaries</label>\n            </div>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"button\">Send Application</button>\n              <button class=\"ds-button ds-button--secondary\" type=\"button\">Clear the Form</button>\n              <button class=\"ds-button\" type=\"button\" disabled>Attach a Reference</button>\n              <a class=\"ds-button ds-button--danger\" href=\"#apply\">Withdraw</a>\n            </div>\n          </form>\n\n          <section class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"d-title\">\n            <h2 class=\"ds-dialog__title\" id=\"d-title\">Withdraw your application?</h2>\n            <p class=\"ds-dialog__body\">Your form of 3 November will be removed from the admissions list. You may <a class=\"ds-link\" href=\"#apply\">apply again</a> before the closing date.</p>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger\" href=\"#home\">Withdraw</a>\n              <a class=\"ds-button ds-button--secondary\" href=\"#apply\">Keep It</a>\n            </div>\n          </section>\n        </div>\n\n        <aside class=\"ds-sidebar\">\n          <section>\n            <h2 class=\"ds-sidebar__title\">Admissions</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apply\">Entry requirements</a></li>\n              <li class=\"ds-sidebar__item is-current\">Application form</li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apply\">The bench test</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apply\">Fees and bursaries</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link\" href=\"#apply\">Open days</a></li>\n            </ul>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">What happens next</h2>\n            <p class=\"ds-sidebar__text\">1. A receipt by post within a week.</p>\n            <p class=\"ds-sidebar__text\">2. An invitation to the bench test in February.</p>\n            <p class=\"ds-sidebar__text\">3. A decision by the end of March.</p>\n          </section>\n          <section>\n            <h2 class=\"ds-sidebar__title\">Admissions tutor</h2>\n            <p class=\"ds-sidebar__text\">School office, Room 2. Weekdays 9.30am to 12.30pm.</p>\n          </section>\n        </aside>\n      </div>\n\n    </div>\n  </section>\n\n  <footer class=\"ds-footer\" data-component=\"footer\">\n    <address class=\"ds-footer__address\">chronoskin School of Horology, Faculty of Applied Science.<br>School office: Room 2, weekdays 9.30am to 12.30pm.</address>\n    <ul class=\"ds-footer__links\">\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#home\">Home</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#courses\">Courses</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#handbook\">Handbook</a></li>\n      <li class=\"ds-footer__item\"><a class=\"ds-link\" href=\"#apply\">Apply</a></li>\n    </ul>\n    <p class=\"ds-footer__legal\">Pages kept by the school office for chronoskin. Last changed 24 November 1997. Comments to the webmaster.</p>\n  </footer>\n\n</div>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.table-era-90s.docs.s08.p04.t02.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"table-era-90s\",\n    \"years\": [\n      1996,\n      2000\n    ]\n  },\n  \"archetype\": \"docs\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 800,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-te-8423\",\n  \"short\": \"v1-te-8423\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #efefef;\n  --color-surface-strong: #e0e0e0;\n  --color-bar: #ffe888;\n  --color-bar-text: #000000;\n  --color-bar-alt: #e0e0e0;\n  --color-bar-alt-text: #000000;\n  --color-inverse: #003098;\n  --color-inverse-text: #ffffff;\n  --color-text: #000000;\n  --color-text-muted: #686868;\n  --color-heading: #000000;\n  --color-heading-alt: #003098;\n  --color-link: #ff0000;\n  --color-link-quiet: #ff0000;\n  --color-link-visited: #900000;\n  --color-link-hover: #ff0000;\n  --color-link-active: #003098;\n  --color-border: #989898;\n  --color-border-strong: #000000;\n  --color-border-muted: #c0c0c0;\n  --color-accent: #003098;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #900000;\n  --color-fill-1: #efefef;\n  --color-fill-2: #e0e0e0;\n  --color-fill-3: #ffe888;\n  --color-fill-4: #ffffff;\n  --color-button: #efefef;\n  --color-button-text: #000000;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #c0c0c0;\n  --color-button-secondary-text: #000000;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #c0c0c0;\n  --color-disabled: #efefef;\n  --color-disabled-text: #989898;\n  --color-danger: #900000;\n  --color-danger-surface: #ffffff;\n  --color-success: #006600;\n  --color-warning: #ff5000;\n  --color-notice: #efefef;\n  --color-notice-text: #000000;\n  --color-focus: #000000;\n  --color-shadow: #000000;\n  --color-overlay: #ffffff;\n}\n\n/* @part type */\n:root {\n  --font-body: Georgia, \"Times New Roman\", Times, serif;\n  --font-heading: Georgia, \"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: 16px;\n  --text-display: 24px;\n  --text-h1: 19px;\n  --text-h2: 16px;\n  --text-h3: 16px;\n  --line-body: 1.25;\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.1em;\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: 2px;\n  --border-width-strong: 2px;\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 1px var(--color-border-strong), 4px 4px 0 1px var(--color-shadow);\n  --shadow-control: 1px 1px 0 var(--color-shadow);\n  --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n  --shadow-control-pressed: none;\n  --shadow-dialog: 4px 4px 0 var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: repeating-linear-gradient(0deg, var(--color-bar) 0 2px, color-mix(in srgb, var(--color-bar) 55%, white) 2px 3px);\n  --fill-bar-alt: repeating-linear-gradient(0deg, var(--color-bar-alt) 0 2px, color-mix(in srgb, var(--color-bar-alt) 55%, white) 2px 3px);\n  --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse) 55%, white) 2px 3px);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px solid var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}