{ "id": "v1-my-8331", "long_id": "v1.material-you.blog.s08.p03.t03.u01", "name": "Tonal travel journal, 2025", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A journal or magazine in the tonal language of 2021 to 2026: a centre-aligned top bar with shaped lower corners and a row of pill destinations, and under it one centred column where the lead story is a wide tonal card in a carousel and the feed sits on a rounded sheet beside a column of cards. Every colour is a tint of one leaf-green key colour, with a blue-green tertiary for pictures, notices and the bar; corners run from 10 to 40px, buttons and indicators are full pills, and only the picture card, menus and dialogs cast a shadow. Headings are a heavy grotesque (Red Hat Display) up to 54px over a reading serif (Literata) at 18px, with underlined links in running text.", "url": "https://chrono.skin/s/v1-my-8331", "preview_url": "https://chrono.skin/s/v1-my-8331/specimen.html", "files": { "STYLE.md": "# Tonal travel journal, 2025\n\n## Summary\n\nA journal or magazine in the tonal language of 2021 to 2026: a centre-aligned top bar with shaped lower corners and a row of pill destinations, and under it one centred column where the lead story is a wide tonal card in a carousel and the feed sits on a rounded sheet beside a column of cards. Every colour is a tint of one leaf-green key colour, with a blue-green tertiary for pictures, notices and the bar; corners run from 10 to 40px, buttons and indicators are full pills, and only the picture card, menus and dialogs cast a shadow. Headings are a heavy grotesque (Red Hat Display) up to 54px over a reading serif (Literata) at 18px, with underlined links in running text.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px. The bar and the footer run the full width; everything else is one column capped at `--size-content` 1160px and centred, with `--space-5` at its sides.\n- `.ds-nav` is the top bar on `--fill-bar` with `--radius-page` on its two lower corners. `.ds-nav__inner` (`--size-bar` 64px) has three parts: `.ds-nav__start` with the `.ds-menu` of sections on the left, `.ds-brand` in the middle, `.ds-nav__tools` (search with a `.ds-tooltip`, a tonal button) on the right. Under it `.ds-nav__links`, a centred row of 40px pills; the current one is filled with the secondary container.\n- Home view, inside `.ds-main`: the `.ds-carousel` whose open slide is the `.ds-hero` (copy at 7 parts, artwork card at 5) with two narrow upright slides beside it and the dots under it; `.ds-stats`, one tonal strip, `--space-3` below; `.ds-feed`, the `.ds-sheet` with the story `.ds-list` at 2 parts and a `.ds-stack` (the `.ds-sidebar` of topics, a tonal card, an outlined card with a compact list, a `.ds-alert`) at 1 part; then a `.ds-section` with the `.ds-grid` of four series cards. `.ds-footer` is a tonal band with four columns and shaped upper corners.\n- Spacing: `--space-1` 4px (between navigation pills, label to field), `--space-2` 8px (between buttons, chips, carousel slides), `--space-3` 12px (between cards in a grid, carousel to stats), `--space-4` 16px (field gap, between cards in a stack), `--space-5` 24px (card padding, feed row padding, between columns, column sides), `--space-6` 32px (sheet top and bottom), `--space-7` 40px (sheet sides, hero padding, above a section), `--space-8` 56px (hero left padding).\n- Heights: buttons and avatars `--size-control` 40px; large buttons and fields `--size-field` 56px; chips and the switch `--size-chip` 32px; table rows, tabs and accordion rows `--size-row-dense` 48px; setting rows `--size-row` 64px; feed pictures `--size-thumbnail` 132px square; series cards at least `--size-tile` 228px; the side slides `--size-side-slide` 76px wide; the wavy progress `--size-wave` 16px. `--size-measure` 680px caps running text, `--size-dialog` is 400px, `--size-art` 260px.\n- Inner pages (every view but the home view) have no carousel, hero or stats. The bar and footer stay; `.ds-main` opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header` on the page tone, then `.ds-columns` (3 parts and 2) with the main block on a `.ds-sheet` and cards in a `.ds-stack`, or one full-width `.ds-sheet` with `.ds-tabs` and the table.\n- Views: `journal` (home) is the front page. `story` is one article: byline, a wavy reading progress and the text on a sheet, beside an accordion of practical notes, related links and the authors. `topics` is the index of topics as cards beside an empty topic and the writers. `archive` is the table of stories under tabs, with status badges and pagination. `subscribe` is the newsletter form with its notices, beside the confirmation dialog and questions.\n- Below 1000px the feed and columns become one column, the grid two, and the artwork and the side slides are dropped. Below 640px the menu shows only its icon and the tonal button leaves the bar, the `.ds-nav__links` row of navigation pills is not shown and the same destinations are `.ds-menu__view` rows at the top of the bar's menu list, the open view marked as a filled item, the stats put each label under its figure, feed pictures shrink to `--size-row`, the footer has two columns and `.ds-table__extra` cells are hidden. Nothing scrolls sideways at 390px.\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- Two families: `--font-heading` is Roboto Serif (then Noto Serif, Georgia) for every title, the brand name and the stat figures; `--font-body` and `--font-ui` are Noto Sans. `--font-mono` is Noto Sans Mono.\n- Sizes: `--text-base` 17px at `--line-body` 1.55; `--text-small` 13px; `--text-ui` 14px; `--text-large` 21px (leads); `--text-display` 52px at `--line-display` 1.15 with `--display-tracking` -0.5px; `--text-h1` 34px, `--text-h2` 26px, `--text-h3` 21px at `--line-heading` 1.3.\n- Weights: display 400, headings 500, `--weight-ui` 600, `--weight-bold` 700. `--ui-transform` is `none`.\n- Links are not underlined at rest, underlined on hover.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons and are `none` or one faint layer; `--shadow-control-hover` is on hovered buttons and on the search bar, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs and the floating action button. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n\n## Components\n\n- `.ds-page` on ``: the shell on `--fill-page`.\n- `.ds-nav`: the top bar on `--fill-bar`. `.ds-nav__inner` holds `.ds-nav__start`, the brand and `.ds-nav__tools`; `.ds-nav__links` is the row of `.ds-nav__link` pills. The current one (`is-current`, or the rule for the open view) is filled with `--fill-button-secondary`.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-menu`: a `
` drop-down. `.ds-menu__button` is its trigger (plain in the bar; `.ds-menu__label` is the text, hidden on a phone); `.ds-menu__list` is a `--color-surface-alt` sheet with `--radius-panel` and `--shadow-dialog` holding `.ds-menu__item` rows; `is-current` is on the secondary container.\n- `.ds-menu__view`: a menu row for a view of the site; hidden above 640px, where `.ds-nav__links` carries the views, and shown at the top of the list below it, the open view filled with the secondary container.\n- `.ds-tooltip`: wraps a trigger; `.ds-tooltip__text` is a small label on `--fill-inverse` shown under it on hover or focus (`is-hover` shows it statically).\n- `.ds-carousel`: `.ds-carousel__track` holds `.ds-carousel__slide` items; the `is-current` one is wide and holds the hero, the others are narrow upright pills in a fill (`--3`) with an icon and a vertical `.ds-carousel__name`. `.ds-carousel__nav` holds two icon buttons around `.ds-carousel__dots` (`.ds-carousel__dot`, the current one long).\n- `.ds-hero`: the lead story, a card in `--fill-accent`. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead`, a `.ds-byline` and a `.ds-buttons` group; an outlined button inside it takes the accent text colour. `.ds-hero__art` is the nested picture card on `--color-canvas` holding `.ds-shapes` with `.ds-shape--1` to `--4`, soft geometric figures used as artwork.\n- `.ds-avatar`: a disc with initials on `--color-fill-3`; `--2` and `--4` pick other fills, `--small` (28px) is for meta lines and `--large` (64px) for an article's author. `.ds-avatars` overlaps several. `.ds-byline` sets an avatar beside `.ds-byline__name` and `.ds-byline__meta`.\n- `.ds-stat`: one summary figure, `.ds-stat__value` beside `.ds-stat__label`. Four sit in `.ds-stats`, one strip on `--fill-bar-alt` divided by hairlines.\n- `.ds-feed`: the two columns of the front page. `.ds-sheet`: a block on `--color-canvas` with `--radius-page`; `.ds-sheet__head` is its title row and `.ds-sheet__foot` its ruled last row.\n- `.ds-list`: the feed. A `.ds-list__item` has a `.ds-list__icon` picture tile (`--1`, `--3`, `--4` pick the fill), and `.ds-list__body` with `.ds-list__title`, `.ds-list__text` and a `.ds-list__meta` line (small avatar, author, date, a badge). `--compact` is the short form for cards: a 40px disc or an avatar, a title and one line.\n- `.ds-sidebar`: the topics block, a filled card with `.ds-sidebar__title` and a `.ds-sidebar__list` of pill rows `.ds-sidebar__link`, each with a `.ds-sidebar__count`; `is-current` is on the secondary container.\n- `.ds-alert`: a short service message on `--fill-inverse` with an icon, `.ds-alert__text`, `.ds-alert__title` and an underlined `.ds-alert__link`.\n- `.ds-grid`: the series cards. A `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a `.ds-grid__head` with a large `.ds-grid__count` and an icon, then `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-progress`: reading progress, an inline SVG line that is wavy for the part read; its `.ds-progress__rest` path is the straight, fainter remainder. `.ds-progress__label` is the line above it.\n- `.ds-accordion`: ruled `
`; each `.ds-accordion__item` has a `.ds-accordion__summary` with a chevron and a `.ds-accordion__body`. Use it for questions and practical notes inside a card.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger with a tick on a `--fill-button` track when on.\n- `.ds-tabs`: a hairline-ruled row of `.ds-tabs__tab`; `is-current` is link-coloured with a short rounded indicator under the label.\n- `.ds-main`: the centred column of a view. `.ds-section` (`--tight` for less space above) with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side, `.ds-stack` piles cards and `.ds-cards` lays cards out two across.\n- `.ds-page-header`: the head of an inner view, on the page tone. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text`; `.ds-page-header__actions` sits at the right.\n- `.ds-prose`: the article text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out.\n- `.ds-button`: the filled pill button. `--secondary` is tonal, `--outlined` outlined with a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` a danger-coloured text button), `--large` is the 56px form, `--icon` a round icon button, `--fab` a floating action button, `--on-inverse` the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. `.ds-icon` (`--small`) is a stroked inline SVG. `.ds-chip` is an outlined 32px chip, `is-current` filled; group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a `.ds-form__label` above a `.ds-form__control` (`--area` for a textarea; inside `.ds-form__select` for a select); `.ds-form__row` puts two side by side. `is-invalid` plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined` is the outlined card, `--tonal` the stronger tint, `--accent` the primary container.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, `--success`, `--warning` and `--danger` are tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface`. Group with `.ds-notices`.\n- `.ds-pagination`: round `.ds-pagination__link` items; `is-current` is filled like the primary button, `is-disabled` is grey.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and text buttons in `.ds-dialog__actions`, on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the tonal band on `--fill-bar-alt`. `.ds-footer__inner` holds `.ds-footer__about` (with `.ds-footer__name`), three columns each with a `.ds-footer__title` and `.ds-footer__links` of `.ds-footer__link`, and `.ds-footer__legal`.\n\n## Never\n\n- `block-gap <= 40px`: blocks in the column are 12 to 40px apart.\n- `uppercase-text = 0%`: labels are sentence case.\n- `font-weight <= 700`: bold is for strong text only.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 13px`: the smallest labels are 13px.\n- `font-size <= 52px`: the hero title is the largest text.\n- `font-families <= 3`: a serif for headings, a sans for text and the mono.\n- `line-height <= 1.7`: body text is 17px on a 26px line.\n- `underlined-links <= 10%`: links are marked by colour.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 2px`: outlines are 1px; the tab indicator, checkbox and switch track are 2px.\n- `box-shadow-blur <= 8px`: the only shadows are the two small layers under floating things.\n- `border-radius <= 28px`: containers stop at 28px; anything rounder is a full pill.\n- `transition != none`: controls ease between states.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything to read at length goes on a `.ds-sheet`; anything beside it is a `.ds-panel`, filled with a container tone or outlined, with `--radius-panel`. A picture is a tonal tile in one of the `--color-fill-*` tones with an icon or shapes, never a photograph frame with a border. Anything pressed is a `.ds-button` variant and stays a full pill; a selected state is the secondary container on a pill. Keep running text in `--font-body` and everything a reader presses or scans in `--font-ui`. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-page: 1440px;\n --size-content: 1160px;\n --size-bar: 64px;\n --size-measure: 680px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 40px;\n --size-control: 40px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 22px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 64px;\n --size-row-dense: 48px;\n --size-area: 120px;\n --size-dialog: 400px;\n --size-empty: 96px;\n --size-art: 260px;\n --size-tile: 228px;\n --size-thumbnail: 132px;\n --size-side-slide: 76px;\n --size-avatar-small: 28px;\n --size-avatar-large: 64px;\n --size-wave: 16px;\n --size-menu: 248px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 40px;\n --space-8: 56px;\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.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\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-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-stack {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-3);\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 color: var(--color-heading);\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); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-heading);\n color: var(--color-text-muted);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-link--more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\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: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .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, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--large {\n min-height: var(--size-field);\n padding: 0 var(--space-6);\n font-size: var(--text-base);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\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/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 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 box-shadow: var(--shadow-control);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel--accent {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-panel--accent .ds-panel__title {\n color: var(--color-accent-text);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel--accent .ds-panel__body {\n color: var(--color-accent-text);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\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-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--border-width-strong);\n background: var(--color-link);\n border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n position: relative;\n flex: none;\n width: var(--size-art);\n height: var(--size-art);\n}\n.ds-shape {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-text);\n}\n.ds-shape--1 {\n inset: 0 40% 40% 0;\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: 50%;\n}\n.ds-shape--2 {\n inset: 12% 0 46% 52%;\n background: var(--color-fill-3);\n border-radius: var(--radius-page);\n}\n.ds-shape--3 {\n inset: 58% 30% 0 8%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n}\n.ds-shape--4 {\n inset: 62% 0 6% 74%;\n background: var(--color-canvas);\n border-radius: var(--radius-panel);\n}\n\n/* switch: the thumb grows and carries a tick when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 70%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:checked::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 70%;\n width: calc(var(--size-thumb) * 0.3);\n height: calc(var(--size-thumb) * 0.6);\n border-right: calc(var(--size-thumb) / 8) solid var(--color-button);\n border-bottom: calc(var(--size-thumb) / 8) solid var(--color-button);\n transform: translate(-50%, -60%) rotate(45deg);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* menu: a tonal sheet under its button */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-3) 0 var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button:hover, .ds-menu__button.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-menu[open] .ds-menu__button {\n border-radius: var(--radius-control);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n display: grid;\n gap: var(--space-1);\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-menu__item:hover, .ds-menu__item.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-menu__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* tooltip: a small inverted label under its trigger */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__text {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 10;\n margin-top: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-hover .ds-tooltip__text {\n opacity: 1;\n visibility: visible;\n}\n\n/* avatar: a tonal disc with initials, in three sizes */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--small {\n width: var(--size-avatar-small);\n height: var(--size-avatar-small);\n font-size: var(--text-small);\n}\n.ds-avatar--large {\n width: var(--size-avatar-large);\n height: var(--size-avatar-large);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-avatars {\n display: inline-flex;\n align-items: center;\n}\n.ds-avatars .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-surface-strong);\n}\n.ds-byline {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-byline__name {\n display: block;\n font-weight: var(--weight-ui);\n}\n.ds-byline__meta {\n display: block;\n font-size: var(--text-small);\n opacity: 0.8;\n}\n\n/* accordion: ruled questions that open */\n.ds-accordion {\n display: grid;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-text);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: var(--space-2) 0;\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: var(--space-2);\n height: var(--space-2);\n margin: 0 var(--space-2) 0 auto;\n border-right: var(--border-width-strong) solid var(--color-link);\n border-bottom: var(--border-width-strong) solid var(--color-link);\n transform: translateY(-25%) rotate(45deg);\n}\n.ds-accordion__item[open] .ds-accordion__summary::after {\n transform: translateY(25%) rotate(225deg);\n}\n.ds-accordion__summary:hover {\n color: var(--color-link-hover);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: 0 0 var(--space-4);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-accordion__body p {\n margin: 0;\n}\n\n/* progress: a wavy line for what is done, a straight one for the rest */\n.ds-progress {\n display: block;\n width: 100%;\n height: var(--size-wave);\n color: var(--color-link);\n}\n.ds-progress__rest {\n opacity: 0.3;\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* carousel: the lead story wide, the next ones as narrow upright slides */\n.ds-carousel {\n display: grid;\n gap: var(--space-3);\n min-width: 0;\n}\n.ds-carousel__track {\n display: flex;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 var(--size-side-slide);\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n min-width: 0;\n padding: var(--space-5) 0;\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: var(--radius-page);\n transition: var(--transition);\n}\n.ds-carousel__slide--3 { background: var(--color-fill-3); }\n.ds-carousel__slide.is-current {\n display: block;\n flex: 1;\n padding: 0;\n background: transparent;\n}\n.ds-carousel__name {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n writing-mode: vertical-rl;\n}\n.ds-carousel__nav {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-carousel__dots {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-carousel__dot {\n display: block;\n width: var(--space-2);\n height: var(--space-2);\n background: var(--color-border-strong);\n border-radius: var(--radius-pill);\n}\n.ds-carousel__dot.is-current {\n width: var(--space-6);\n background: var(--color-link);\n}\n\n/* stats: one tonal strip, the figures divided by hairlines */\n.ds-stats {\n display: flex;\n margin-top: var(--space-3);\n padding: var(--space-4) 0;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page);\n}\n.ds-stat {\n display: flex;\n flex: 1;\n align-items: baseline;\n justify-content: center;\n gap: var(--space-3);\n min-width: 0;\n padding: 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n}\n.ds-stat:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* list: the feed, a tonal picture tile beside each story */\n.ds-list {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n padding: var(--space-5) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-thumbnail);\n height: var(--size-thumbnail);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-heading);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__icon--4 { background: var(--color-fill-4); }\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: var(--space-1) 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list--compact .ds-list__item {\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-list--compact .ds-list__icon {\n width: var(--size-control);\n height: var(--size-control);\n border-radius: 50%;\n}\n.ds-list--compact .ds-list__title {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n letter-spacing: 0;\n}\n.ds-list--compact .ds-list__text {\n margin: 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n\n/* shell: a centred top bar with shaped lower corners, one centred column under it */\n.ds-page {\n max-width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n}\n.ds-nav__inner {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: center;\n gap: var(--space-4);\n max-width: var(--size-content);\n min-height: var(--size-bar);\n margin: 0 auto;\n padding: var(--space-3) var(--space-5) 0;\n}\n.ds-nav__start {\n display: flex;\n justify-content: flex-start;\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n.ds-nav .ds-menu__button {\n background: transparent;\n color: var(--color-bar-text);\n padding: 0 var(--space-3);\n}\n.ds-nav .ds-menu__button:hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__links {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n max-width: var(--size-content);\n margin: 0 auto;\n padding: var(--space-2) var(--space-5) var(--space-3);\n list-style: none;\n}\n.ds-nav__link {\n display: inline-flex;\n align-items: center;\n min-height: var(--size-control);\n padding: 0 var(--space-5);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\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-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#story:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#topics:target) .ds-nav__link[href=\"#topics\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-nav__link[href=\"#subscribe\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-main {\n max-width: var(--size-content);\n margin: 0 auto;\n padding: var(--space-5) var(--space-5) var(--space-7);\n}\n.ds-sheet {\n padding: var(--space-6) var(--space-7);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-sheet__head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n}\n.ds-sheet__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sheet__foot .ds-pagination {\n margin: 0;\n}\n\n/* hero: the lead story, a tonal card with the copy beside its artwork */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n height: 100%;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__copy {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n min-width: 0;\n padding: var(--space-7) var(--space-7) var(--space-7) var(--space-8);\n}\n.ds-hero__kicker {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 46ch;\n margin: var(--space-4) 0;\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero .ds-buttons {\n margin-top: var(--space-5);\n}\n.ds-hero .ds-button--outlined {\n color: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-hero .ds-button--outlined:hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, transparent);\n}\n.ds-hero__art {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: var(--space-3);\n padding: var(--space-5);\n background: var(--color-canvas);\n border-radius: calc(var(--radius-page) - var(--space-2));\n box-shadow: var(--shadow-dialog);\n}\n.ds-shape--4 {\n background: var(--color-accent-alt);\n border-radius: 50%;\n}\n\n/* feed and side column */\n.ds-feed {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n margin-top: var(--space-5);\n}\n.ds-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-alert__text {\n margin: 0;\n}\n.ds-alert__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-alert__link {\n color: var(--color-inverse-text);\n font-weight: var(--weight-ui);\n text-decoration: underline;\n}\n.ds-section--tight {\n margin-top: var(--space-4);\n}\n.ds-cards {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-panel .ds-list--compact .ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-panel .ds-list--compact .ds-list__item:last-child {\n padding-bottom: 0;\n}\n\n/* sidebar: the topics, a filled card of pill rows with counts */\n.ds-sidebar {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-3) var(--space-3);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: 0 var(--space-3) var(--space-2);\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 color: var(--color-heading);\n}\n.ds-sidebar__list {\n display: grid;\n gap: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-sidebar__count {\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n opacity: 0.75;\n}\n\n/* grid: the series, tall tonal cards with the count set large */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-width: 0;\n min-height: var(--size-tile);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-radius: var(--radius-panel);\n}\n.ds-grid__head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-2);\n}\n.ds-grid__count {\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 font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-grid__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* footer: a tonal band with shaped upper corners */\n.ds-footer {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-footer__inner {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n max-width: var(--size-content);\n margin: 0 auto;\n padding: var(--space-7) var(--space-5) var(--space-5);\n}\n.ds-footer__about {\n max-width: 36ch;\n margin: 0;\n}\n.ds-footer__name {\n display: block;\n margin-bottom: var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n opacity: 0.8;\n}\n.ds-footer__links {\n display: grid;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__legal {\n grid-column: 1 / -1;\n margin: 0;\n padding-top: var(--space-4);\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n font-size: var(--text-small);\n}\n\n@media (max-width: 1000px) {\n .ds-feed,\n .ds-columns,\n .ds-columns--even {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-hero__art,\n .ds-carousel__slide {\n display: none;\n }\n .ds-carousel__slide.is-current {\n display: block;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n padding: var(--space-2) var(--space-3) 0;\n gap: var(--space-2);\n }\n .ds-nav .ds-brand__name {\n font-size: var(--text-base);\n }\n .ds-nav .ds-brand {\n gap: var(--space-2);\n }\n .ds-menu__label,\n .ds-nav__tools .ds-button--secondary {\n display: none;\n }\n .ds-main {\n padding: var(--space-3) var(--space-3) var(--space-6);\n }\n .ds-sheet {\n padding: var(--space-5) var(--space-4);\n }\n .ds-hero__copy {\n padding: var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-stats {\n padding: var(--space-3) 0;\n }\n .ds-stat {\n flex-direction: column;\n align-items: center;\n gap: 0;\n padding: 0 var(--space-2);\n text-align: center;\n }\n .ds-stat__value {\n font-size: var(--text-h2);\n }\n .ds-stat__label {\n font-size: var(--text-small);\n }\n .ds-list__item {\n gap: var(--space-3);\n }\n .ds-list__icon {\n width: var(--size-row);\n height: var(--size-row);\n }\n .ds-cards,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid__cell {\n padding: var(--space-4);\n }\n .ds-grid__count {\n font-size: var(--text-h1);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-table__extra {\n display: none;\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n .ds-footer__inner {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-footer__about {\n grid-column: 1 / -1;\n }\n}\n.ds-menu__view {\n display: none;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__view [href=\"#journal\"],\n.ds-page:has(#journal:target) .ds-menu__view [href=\"#journal\"],\n.ds-page:has(#story:target) .ds-menu__view [href=\"#journal\"],\n.ds-page:has(#topics:target) .ds-menu__view [href=\"#topics\"],\n.ds-page:has(#archive:target) .ds-menu__view [href=\"#archive\"],\n.ds-page:has(#subscribe:target) .ds-menu__view [href=\"#subscribe\"] {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n@media (max-width: 640px) {\n .ds-menu__view {\n display: block;\n }\n .ds-menu__view + li:not(.ds-menu__view) {\n margin-top: var(--space-2);\n }\n .ds-nav .ds-nav__links {\n display: none;\n }\n .ds-nav .ds-nav__inner {\n padding-bottom: var(--space-2);\n }\n .ds-tooltip--start .ds-tooltip__text {\n right: auto;\n left: 0;\n }\n}\n\n/* ---------- phones: the table's first column keeps a readable width; the table scrolls in its wrap ---------- */\n@media (max-width: 640px) {\n .ds-table th:first-child,\n .ds-table td:first-child {\n min-width: calc(var(--space-7) * 4);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal travel journal specimen\n\n\n\n\n\n
\n
\n
\n
\n Sections\n \n
\n
\n \n \n chronoskin\n \n
\n Search the journal\n Sunday letter\n
\n
\n \n
\n\n
\n
\n
\n
    \n
  • \n
    \n
    \n

    Long read14 minutes

    \n

    The slow line over the pass

    \n

    Nine hours, forty tunnels and one dining car: the mountain route is still the best seat in the country.

    \n
    MOMara Oyelaran8 May, with photographs by Tomas Reyl
    \n
    \n Read the story\n More mountain lines\n
    \n
    \n
    \n
    \n \n \n \n \n
    \n
    \n
    \n
    • \n
  • Three ferries in a day
    • \n
  • A berth to the north
    • \n
\n
\n \n
\n \n
\n
\n\n
\n

412

Stories

\n

38

Routes

\n

9

Writers

\n

6

Years

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

Latest

\n \n
\n \n
Four of 412 storiesOpen the archive
\n
\n\n
\n \n
\n

The Sunday letter

\n

One story, one timetable change and one station worth a detour, every week.

\n
SubscribeRead the last one
\n
\n
\n

Most read

\n \n
\n

Summit section closed 12 to 14 MayBuses replace the trains for three days. What that means

\n
\n
\n\n
\n

Series

All topics
\n
\n 12

Every pass, east to west

Twelve parts, finished in March

\n 7

The buffet car, reviewed

Seven parts, one more to come

\n 5

Where the rails meet the boats

Five harbours, five timetables

\n 3

Lines that closed

Three walks along old trackbeds

\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. Mountain lines
    3. \n
  3. The slow line over the pass
    4. \n
\n
\n
\n

The slow line over the pass

\n

Nine hours, forty tunnels and one dining car

\n
\n
\n Save for later\n Share\n
\n
\n
\n
\n
\n
MOMara Oyelaran8 May, 14 minutes, 23 replies
\n Line running\n
\n
\n

You are a third of the way throughabout 9 minutes left

\n \n
\n
\n

Out of the valley before breakfast

\n

The first train leaves at 06:12, and by the second tunnel the town is a row of lights below the window.

\n

There is a faster way over, and almost nobody on this train has taken it by mistake. The timetable calls the service R 41; the people who work on it call it the long one. Our earlier piece has the fares.

\n

What you see, in order

\n

Sit on the left going up. Do not change sides at the summit, however tempting the other window looks.

\n
    \n
  • The gorge, for the first forty minutes
    • \n
  • The spiral, where the line crosses over itself
    • \n
  • The summit lake, frozen until late May
    • \n
\n

The dining car

\n

It joins at the third stop and leaves again before the border. Soup, bread, and a window of your own.

\n
\n
\n
\n
\n

Before you go

\n
\n
\n When to travel\n

Late May to October. In winter the summit section is often replaced by a bus.

\n
\n
\n What it costs\n

The regional pass covers the whole line.

\n
\n
\n Where to sit\n

On the left going up, in the second carriage.

\n
\n
\n
\n
\n

From the same line

\n \n
\n
\n

Written and photographed by

\n
MOTRMara Oyelaran and Tomas Reyl64 stories between them
\n
Their other routes
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Topics

\n

Everything in the journal, sorted by the kind of journey

\n
\n
\n Suggest a topic\n
\n
\n
\n
\n

Mountain lines

64

Passes, spirals and the slow trains that still climb them.

Read them
\n

Coast and ferries

51

Where the track ends at a quay and the ticket carries on.

Read them
\n

Night trains

37

Sleepers, couchettes and how to book them.

Read them
\n

Tickets and passes

29

Fares counted, passes tested, offices found.

Read them
\n

City hops

88

Two towns and one good lunch, there and back in a day.

Read them
\n

Stations

143

Buffets, waiting rooms, clocks and roofs.

Read them
\n
\n
\n
\n \n

Nothing on trams yet

\n

The topic is open and nobody has written for it. Tell us which line to ride first.

\n Suggest a ride\n
\n
\n

Who writes what

\n
    \n
  • MO
    Mara Oyelaran

    Mountain lines, stations

    • \n
  • TR
    Tomas Reyl

    Coast, city hops, photographs

    • \n
  • IV
    Ines Varga

    Night trains, tickets

    • \n
\n
\n
\n
\n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. Archive
    3. \n
  3. This year
    4. \n
\n
\n
\n

Archive

\n

412 stories since the first one, newest at the top

\n
\n
\n By topic\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
StoryTopicLineMinutesRepliesPublished
The slow line over the passMountain linesRunning14238 May
Three ferries in a day, and a bus we missedCoast and ferriesSummer only7115 May
A berth to the north, booked the old wayNight trainsRunning93129 April
The regional pass, counted properlyTickets and passesAll lines54622 April
Station buffets worth a longer changeCity hopsSix stations61815 April
A walk along the old quarry branchMountain linesClosed897 April
What to pack for a sleeperNight trainsRunning45231 March
\n
\n
\n
TopicRunningSeasonalClosed
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

The Sunday letter

\n

One story, one timetable change and one station, every week

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

The next letter goes out on Sunday at eightSubscribe before then and it will be your first.

\n

That address could not be usedCheck the part after the at sign and try again.

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

Check your inbox

\n

We sent a link to the address you gave. Open it within a day to confirm, or ask for another.

\n
Send againDone
\n
\n
\n
\n

Who writes it

\n
MOTRIVThree of the nine, in turn2,140 readers so far
\n

No advertising and no tracking. Leave with one click at the foot of any letter.

\n
\n
\n

Questions

\n
\n
\n Does it cost anything?\n

No. The journal is paid for by its readers, and the letter is free.

\n
\n
\n Can I read old letters?\n

All of them are in the archive.

\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.blog.s08.p03.t03.u01\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-my-8331\",\n \"short\": \"v1-my-8331\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f8ebe0;\n --color-canvas: #fff8f4;\n --color-surface: #fdf1e7;\n --color-surface-alt: #f4e5d8;\n --color-surface-strong: #ecdccd;\n --color-bar: #f8ebe0;\n --color-bar-text: #221a14;\n --color-bar-alt: #f6e0b0;\n --color-bar-alt-text: #241a04;\n --color-inverse: #382e28;\n --color-inverse-text: #ffede2;\n --color-text: #221a14;\n --color-text-muted: #52443b;\n --color-heading: #2e1508;\n --color-heading-alt: #8f4c1c;\n --color-link: #9a4a14;\n --color-link-quiet: #221a14;\n --color-link-visited: #5f6135;\n --color-link-hover: #733509;\n --color-link-active: #351000;\n --color-border: #d7c2b7;\n --color-border-strong: #85736a;\n --color-border-muted: #eeddd0;\n --color-accent: #ffdbc8;\n --color-accent-text: #351000;\n --color-accent-alt: #5f6135;\n --color-fill-1: #ffdbc8;\n --color-fill-2: #f6e0b0;\n --color-fill-3: #e5e6ad;\n --color-fill-4: #ecdccd;\n --color-button: #9a4a14;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f6e0b0;\n --color-button-secondary-text: #241a04;\n --color-input: #fff8f4;\n --color-input-text: #221a14;\n --color-input-border: #85736a;\n --color-disabled: #eadfd6;\n --color-disabled-text: #a3948a;\n --color-danger: #ba1a1a;\n --color-danger-surface: #ffdad6;\n --color-success: #4a6a1c;\n --color-warning: #a86400;\n --color-notice: #e5e6ad;\n --color-notice-text: #1c1d00;\n --color-focus: #9a4a14;\n --color-shadow: #3b1e0a;\n --color-overlay: rgb(34 26 20 / 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-heading: \"Roboto Serif\", \"Noto Serif\", \"Source Serif 4\", Georgia, serif;\n --font-ui: \"Noto Sans\", \"Open Sans\", \"Segoe UI\", Arial, sans-serif;\n --font-mono: \"Noto Sans Mono\", \"Source Code Pro\", Menlo, monospace;\n --text-base: 17px;\n --text-small: 13px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 52px;\n --text-h1: 34px;\n --text-h2: 26px;\n --text-h3: 21px;\n --line-body: 1.55;\n --line-heading: 1.3;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 400;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\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: 16px;\n --radius-pill: 9999px;\n --radius-page: 28px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--color-shadow) 15%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-surface-alt);\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) 90%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);\n --backdrop-blur: 0px;\n}\n" } }