{ "id": "v1-fa-8232-dc", "long_id": "v1.frutiger-aero.blog.s08.p02.t03.u02.dc", "name": "Frutiger Aero travel journal", "era": { "slug": "frutiger-aero", "code": "fa", "name": "Frutiger Aero", "years": [ 2004, 2010 ], "description": "The glossy optimism of 2004 to 2010: sky blue and grass green, glass panels with a bright top highlight, bubbles and soft glows, rounded corners, humanist sans type and reflections under everything." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "density": "compact", "summary": "A fixed-width travel journal in the meadow variety of the Frutiger Aero look: a grass-green page crossed by sunbeams, with the name on a deep green plate, a row of separate glass keys for navigation, and every block of the page a crisp white card afloat on the green. Personal journals and photo diaries of this kind were common from about 2005 to 2010, when a trip was told day by day in words and digital photos and friends answered in a guestbook. The band of sky at the top carries three photo prints tossed at an angle, cards are opaque with a white inner rim and a contact shadow, corners are nearly square (2 to 4px), and the type pairs an Arial body with regular Georgia headings and small bold Verdana controls.", "url": "https://chrono.skin/s/v1-fa-8232-dc", "preview_url": "https://chrono.skin/s/v1-fa-8232-dc/specimen.html", "files": { "STYLE.md": "# Frutiger Aero travel journal\n\n## Summary\n\nA fixed-width travel journal in the meadow variety of the Frutiger Aero look: a grass-green page crossed by sunbeams, with the name on a deep green plate, a row of separate glass keys for navigation, and every block of the page a crisp white card afloat on the green. Personal journals and photo diaries of this kind were common from about 2005 to 2010, when a trip was told day by day in words and digital photos and friends answered in a guestbook. The band of sky at the top carries three photo prints tossed at an angle, cards are opaque with a white inner rim and a contact shadow, corners are nearly square (2 to 4px), and the type pairs an Arial body with regular Georgia headings and small bold Verdana controls.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 920px, centred in a 1024px window. It does not stretch and does not reflow for phones.\n- There is no sheet. `.ds-page__wrap` (920px) is a stack of separate cards on the page fill, `--space-5` (20px) apart: the header row, the cards of the showing view, the footer card. No text sits on the page itself.\n- The header row is three loose pieces: the name plate `.ds-nav__plate` at the left, the navigation keys `.ds-nav__links` pushed to the right (each `--size-nav` 30px tall), and the search field (`--size-search` 140px).\n- The home page runs: the hero band across the full width; then `.ds-page__columns`, a main column (610px) holding one `.ds-page__card` with the entries, and a right column `.ds-page__aside` of `--size-side` (290px) holding the figures, a panel and a link card; then one full-width card with the four albums.\n- Spacing scale: `--space-1` 3px (picture frames, gaps under titles), `--space-2` 5px (inside controls, between keys, fact rows), `--space-3` 9px (gaps between buttons, table cells, comment rows), `--space-4` 14px (panel padding, list rows, gaps between album cells), `--space-5` 20px (card padding, gutter, gap between cards), `--space-6` 30px (hero padding, the dimmed strip; the largest gap).\n- Fixed sizes: controls `--size-control` 26px tall, hero buttons `--size-control-large` 38px, the brand gel `--size-mark` 30px, list pictures `--size-thumb` 112px, hero prints `--size-print` 172px in a block of `--size-prints` 330px, comment tiles `--size-avatar` 32px, form labels `--size-label` 120px, the dialog `--size-dialog` 420px.\n- Inner pages drop the hero. Top to bottom: one head card (`.ds-page__card--head`) with the `.ds-breadcrumb` and under it the `.ds-page-header` (title and one line on the left, one or two buttons on the right); then `.ds-page__columns` with the same two columns: cards in the main column, panels, link cards and at most one empty state at the side. `.ds-tabs` sit at the top of a card directly above the text or table they switch; pagination closes the card of its table; notices sit above the form inside its card; a dialog follows the columns across the full width on its dimmed strip.\n- Views: the specimen is one journal of four screens, each a `.ds-view` between the header row and the footer card, which are written once. `home` is the journal front (hero with prints, latest entries, the trip in figures, where we are, where we have been, albums). `entry` is one entry (tabs, the text with a strip of pictures, comments, the leg of the trip, more entries, the day's photos, onward links). `archive` lists a part of the trip (tabs, table with status labels, pagination, the key to the labels, an empty state for the part not yet begun). `guestbook` is the signing form (notices, the form with its buttons, latest messages, ways to follow, the clearing dialog). Links are plain `href=\"#name\"`; the key of the showing view takes the primary button's fill by a `.ds-page:has(#name:target)` rule, the Journal key also when no view is named.\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- Three families: `--font-body` Verdana, Geneva, \"DejaVu Sans\"; `--font-heading` \"Trebuchet MS\", \"Lucida Sans\", Tahoma; `--font-ui` Tahoma, Verdana, Geneva. All are system fonts. `--font-mono` (\"Courier New\") is for inline code.\n- `--text-base` 11px at `--line-body` 1.4. `--text-small` 10px for meta lines, labels, hints and the status bar. `--text-ui` 11px bold (`--weight-ui` 700) for buttons, tabs and steps.\n- Headings are bold (`--weight-heading`, `--weight-display` 700): `--text-display` 24px the welcome title and gauge figures; `--text-h1` 20px page titles; `--text-h2` 15px section and tile titles, the brand name and the section name in the strip; `--text-h3` 12px panel captions, pane headings, the large tabs. `--text-large` 13px the hero lead and large button. Nothing is uppercased or tracked.\n- Links in text, lists and the pane are underlined (`--link-decoration` underline); titles (`.ds-link--title`), tabs and bar links are not.\n- `--color-page` #dfe5e8 with `--fill-page`: brushed silver, fine vertical lines, lighter at the top.\n- `--color-bar` #c4cace with `--fill-bar` (brushed metal: fine lines over a light-dark-light sheen) and dark `--color-bar-text` #25323a with a light `--shadow-text` under it: the top strip, the status bar, the dialog frame.\n- `--color-bar-alt` #e4f5bd (pale lime) with `--fill-bar-alt`: panel captions, the table head, the steps strip; text `--color-bar-alt-text` #3a5200.\n- `--color-inverse` #0e8f9e (aqua) with `--fill-inverse` (lighter at the top, a soft light rising from the lower left): the welcome band, white text.\n- `--color-heading` #0a7a86 (aqua) titles and figures; `--color-heading-alt` #5a8a00 (lime, darkened for text) pane headings, prose h2, breadcrumb marks. `--color-text` #444444, `--color-text-muted` #686868. Surfaces: `--color-surface-alt` #f1f8f6 alternate rows and the pane, `--color-surface-strong` #dcefe9 meter tracks and the dialog's action strip.\n- `--color-link` #00768c, `--color-link-quiet` #555555, visited #7a5fa8, hover #00a5ba, active #5a8a00.\n- `--color-button` #12a0b5 with `--fill-button` (aqua, a hard break at 50%): the primary button, the brand tile, arrow buttons, the current step and page number. `--color-button-secondary` #d9dfe2 with `--fill-button-secondary` (silver): every other button, the large tabs at rest, the segmented tabs.\n- `--color-accent` #9bd61a (lime) with dark `--color-accent-text`: pill badges, meter bars, the current segmented tab, the edge of the current large tab, the rule under the page header, pane arrows. `--color-accent-alt` #ff7a1a: the New marker.\n- `--color-fill-1` to `--color-fill-4` (aqua tint, lime tint, silver, mint): the left end of each task tile's fade.\n- Borders are 1px solid: `--color-border` #c5d3d6 for boxes, `--color-border-muted` #e3ebec between rows, `--color-border-strong` #8fa3a8 for the sheet and the dialog, `--color-input-border` #9fb3b8.\n- `--color-notice` #f3fbd9; `--color-danger` #c8321f on `--color-danger-surface` #fdebe6; `--color-success` #5c9a08 and `--color-warning` #f2a100 fill status badges and the dots of the activity list.\n- Surface: `--radius-control` 3px, `--radius-panel` 5px, `--radius-page` 6px, `--radius-pill` 9px. Shadows are short: `--shadow-panel` a 3px drop, `--shadow-control` a white inner top edge and a 1px drop, `--shadow-dialog` 12px. `--fill-panel` is opaque white ending in a faint tint; `--backdrop-blur` is 0px: nothing is translucent. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills (the fill's colour mixed with `--color-shadow`), the sheet (92% `--color-canvas`), bubbles (`--color-inverse-text` with transparent), gloss on status fills (mixed with `--color-button-text`).\n- The era's conventions for which text sits on which fill, kept by every layout and every token set of the era:\n - `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours sit on `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong`, `--fill-panel` and the four `--color-fill-*` tints. A palette keeps page, canvas, surfaces and fills on one side (all light or all dark) so that these stay readable on every one of them.\n - `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`. Links on a bar take the bar's text colour, never `--color-link`.\n - `--color-button-text` on `--fill-button` and on any fill made from `--color-danger`, `--color-success` or `--color-accent-alt`; it is always the light colour and also supplies the gloss on those fills (mixed in with `color-mix()`).\n - `--color-accent-text` on `--fill-accent` and on `--color-warning`; `--color-button-secondary-text` on `--fill-button-secondary`; `--color-notice-text` on `--color-notice`; `--color-danger` as text on `--color-danger-surface` and on the surfaces.\n - Nothing but decoration sits on `--fill-page`: no text is set directly on the page.\n - `--color-focus` is the glow colour: the focus ring, the halo of the search field and of a hovered button. `--color-inverse-text` draws the bubbles on the sky band. `--color-shadow` tints every shadow and darkens the outline of every glossy fill.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__wrap` is the 920px column; `.ds-page__card` a white card (`--head` for the head card of an inner page, `is-last` on the last card of a column); `.ds-page__columns` holds `.ds-page__main` and `.ds-page__aside`. `.ds-section__title` (20px over a hairline) heads a card, `.ds-section__more` closes one with a link. `.ds-view` is one screen (`.ds-view--home` the first).\n- `.ds-nav`: the header row. `.ds-nav__plate` holds the `.ds-brand`; `.ds-nav__links` is the row of `.ds-nav__link` keys (current: `is-current`, the primary button's fill; hover: `is-hover`); `.ds-nav__search` holds `.ds-nav__input`. Three to five keys.\n- `.ds-brand`: the site's mark and name on the plate, linking home; one per page. `.ds-brand__mark` is a round gel dressed like the primary button; `.ds-brand__name` is the name at `--text-h1` in `--color-bar-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the gel.\n- `.ds-hero`: the journal's opening band of sky, home page only. `.ds-hero__main` holds a small `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__action` (a `.ds-button--large` and a secondary one). `.ds-hero__prints` on the right holds three `.ds-print` frames (`--1` to `--3` place and turn them), each a `.ds-picture` over a `.ds-print__caption`.\n- `.ds-picture`: a 4 to 3 drawing that stands in for a photograph: `--hills`, `--sea`, `--peak`, `--town`. Used in prints, `.ds-list__thumb`, album cells and `.ds-strip`.\n- `.ds-page-header`: the head of an inner page instead of the hero, inside the head card under the breadcrumb: `.ds-page-header__main` with `.ds-page-header__title` (27px) and one grey `.ds-page-header__text` line; `.ds-page-header__actions` at the right. One per inner page.\n- `.ds-stat`: one figure, a 27px `.ds-stat__number` over an 11px `.ds-stat__label`; four sit two by two in `.ds-stats`, a pale card at the top of the side column, divided by hairlines.\n- `.ds-grid`: four album cells in a row, 14px apart. `.ds-grid__cell` (`--1` to `--4` choose the tint it fades into) frames a `.ds-picture` over a `.ds-grid__title` and a grey `.ds-grid__text` line.\n- `.ds-prose`: long text: h1, h2 (sky blue), h3, p, ul, ol, code, strong and links inside it are styled. `.ds-strip` sets three framed pictures (`.ds-strip__frame`) in a row inside it; `.ds-strip--pair` sets them two to a row in a panel.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` bold and not underlined, `.ds-link--quiet` for minor links. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: sky glass, white bold 11px, 26px tall, 2px corners; may end with a `.ds-button__icon`. Variants: `.ds-button--secondary` (pale green glass, the usual button), `.ds-button--danger` (red glass, only for an action that removes or clears), `.ds-button--large` (38px, the hero). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row. One primary button per card or dialog.\n- `.ds-form`: label-left form: `.ds-form__row` with a bold `.ds-form__label` and a `.ds-form__field` holding `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea`; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` for the buttons, under a hairline and aligned with the fields.\n- `.ds-table`: data table in a 1px border: `.ds-table__head` cells form a pale strip; `.ds-table__row` with `is-alt` on alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns, `is-date` is small and grey; `.ds-table__note` is a second grey line.\n- `.ds-list`: the list of entries. Each `.ds-list__item` is a framed `.ds-list__thumb` picture beside `.ds-list__body`: a 20px `.ds-list__title`, a grey `.ds-list__meta` line and a `.ds-list__text`. Rows are divided by hairlines.\n- `.ds-panel`: a card in the side column (`is-last` on the last block): sky-blue `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text`, a `.ds-panel__facts` list of `.ds-panel__fact` rows (name in `.ds-panel__fact-name`, value at the right) and `.ds-panel__actions`.\n- `.ds-tabs`: words on a hairline; `.ds-tabs__tab`, the current one `is-current` on a 3px stroke in `--color-accent`. Two to five tabs at the top of a card.\n- `.ds-badge`: a small glass label, poppy by default. `.ds-badge--count` (flat pale), `.ds-badge--new` (violet). Status variants: `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`. `.ds-badges` lays several out in a row.\n- `.ds-sidebar`: a link card in the side column (`is-last` on the last): `.ds-sidebar__title` on a pale strip, `.ds-sidebar__list` of `.ds-sidebar__item` rows divided by hairlines (current: `is-current`), with an optional right-aligned `.ds-sidebar__count`.\n- `.ds-comment`: one comment or guestbook message: a `.ds-comment__avatar` tile with an initial, then `.ds-comment__body` with a bold `.ds-comment__name`, a grey `.ds-comment__date` and the `.ds-comment__text`.\n- `.ds-notice`: a slip with a 3px stroke at its left: `.ds-notice__text` and a bold `.ds-notice__title`. Variant `.ds-notice--error`.\n- `.ds-pagination`: separate small keys: `.ds-pagination__link`, `is-current` (sky glass), `is-disabled`, `.ds-pagination__gap` for an ellipsis. Newer to the left, older to the right.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with sky-blue `.ds-breadcrumb__sep` guillemets and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a card with a 3px rim: `.ds-dialog__title` on a pale strip (with a small red `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons at the right. It casts `--shadow-dialog` and sits on `.ds-dialog__backdrop`, a dimmed strip in the page flow.\n- `.ds-empty`: a pale card with a blank, tilted `.ds-empty__print`, `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the last card, a band of sky: the `.ds-footer__legal` line on the left and a `.ds-footer__list` of `.ds-footer__link` items on the right.\n- `.ds-menu`: a glass drop-down under a navigation item (`.ds-menu__list` of `.ds-menu__link`), opened on hover or focus, never forced open.\n- `.ds-progress`: the glossy accent progress bar, a native `` in a `.ds-progress__row` with label and value; for downloads, installs and storage.\n- `.ds-carousel`: a picture viewer with previous and next orbs and dots (`.ds-carousel__stage`, `__track`, `__slide`, `__dots`); static, dots are not links.\n- `.ds-avatar`: the framed account picture drawn as initials, beside a name in `.ds-person`; `--small` for tight places.\n\n## Never\n\n- `row-gap <= 30px`: rows are divided by a hairline, not by space.\n- `block-gap <= 30px`: cards are 20px apart.\n- `content-width <= 920px`: text stays inside the cards.\n- `palette-colours <= 46`: night blues, cyan, violet, a green, amber, red and greys.\n- `font-size <= 24px`: the welcome title and the gauge figures are the largest text.\n- `font-size >= 10px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 4`: a body sans, a heading sans, a control sans, a monospace for inline code.\n- `line-height <= 1.4`: body text is 11px on about 15px.\n- `underlined-links >= 40%`: links in text, lists and the pane are underlined; only titles and tabs are not.\n- `letter-spacing = 0px`: no tracking.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 16px`: corners are 10, 13 or 16px; only orbs, bullets and pills are rounder.\n- `border-width <= 2px`: hairlines everywhere, 2px only around the dialog.\n- `box-shadow-blur <= 40px`: glows and drops are soft, the dialog's 40px is the deepest.\n- `gradient-fills <= 28%`: gloss belongs to bars, gadget heads, buttons, orbs, pills and tiles; text areas stay plain.\n- `transition = none`: states change at once.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block of content is a `.ds-page__card` in the main column or a `.ds-panel` or `.ds-sidebar` at the side, never text on the page; a dark plate is `--fill-bar`, a pale strip `--fill-bar-alt`, a band of sky `--fill-inverse`; anything pressable is dressed like `.ds-nav__link` or `.ds-button`. Keep to the conventions above for which text token sits on which fill, give glass fills an outline mixed from their colour and `--color-shadow`, frame every picture in a white border with the panel shadow, and make any extra shade with `color-mix()` over existing tokens.\n", "components.css": ":root {\n --size-page: 920px;\n --size-side: 290px;\n --size-nav: 30px;\n --size-search: 140px;\n --size-mark: 30px;\n --size-control: 26px;\n --size-control-large: 38px;\n --size-icon: 16px;\n --size-thumb: 112px;\n --size-prints: 330px;\n --size-print: 172px;\n --size-avatar: 32px;\n --size-glow: 6px;\n --size-label: 120px;\n --size-textarea: 96px;\n --size-dialog: 420px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 7px;\n --space-4: 11px;\n --space-5: 16px;\n --space-6: 24px;\n}\n\n/* shell: no sheet; the name plate, the keys and every block are separate cards afloat on the page */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-page__card {\n margin: 0 0 var(--space-5);\n padding: var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-border-strong) 60%, transparent);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-canvas) 92%, transparent);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n backdrop-filter: blur(calc(var(--backdrop-blur) * 2));\n box-shadow: var(--shadow-panel);\n}\n.ds-page__card.is-last { margin-bottom: 0; }\n.ds-page__card--head { padding-bottom: var(--space-4); }\n.ds-page__columns {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin: 0 0 var(--space-5);\n}\n.ds-page__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page__aside {\n flex: 0 0 var(--size-side);\n width: var(--size-side);\n}\n.ds-section__title {\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\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.ds-section__more {\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\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/* nav: a name plate at the left, then one key for each part of the journal and a search field */\n.ds-nav {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n}\n.ds-nav__plate {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-bar);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n}\n.ds-nav__links {\n display: flex;\n flex: 1 1 0;\n justify-content: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n height: var(--size-nav);\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\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: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { box-shadow: var(--shadow-control-hover); }\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(#entry:target) .ds-nav__link[href=\"#entry\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#guestbook:target) .ds-nav__link[href=\"#guestbook\"] {\n border-color: color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__search {\n flex: 0 0 auto;\n margin: 0;\n}\n.ds-nav__input {\n display: block;\n width: var(--size-search);\n height: var(--size-nav);\n margin: 0;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n background: var(--fill-input);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus {\n outline: var(--focus-ring);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n\n/* brand: the mark on a round gel, the name large on the plate */\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-mark);\n height: var(--size-mark);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: 50%;\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 66%;\n height: 66%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: 1;\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n\n/* pictures: small landscapes drawn from the palette, used in prints, thumbnails and albums */\n.ds-picture {\n display: block;\n width: 100%;\n aspect-ratio: 4 / 3;\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-shadow) 30%, transparent);\n background: linear-gradient(to bottom, var(--color-inverse) 0, var(--color-fill-2) 100%);\n overflow: hidden;\n}\n.ds-picture--hills {\n background: radial-gradient(ellipse 70% 48% at 28% 112%, var(--color-success) 0, var(--color-success) 98%, transparent 100%), radial-gradient(ellipse 80% 44% at 86% 116%, color-mix(in srgb, var(--color-success), var(--color-shadow) 30%) 0, color-mix(in srgb, var(--color-success), var(--color-shadow) 30%) 98%, transparent 100%), radial-gradient(circle at 76% 26%, var(--color-warning) 0, var(--color-warning) 9%, transparent 10%), linear-gradient(to bottom, var(--color-inverse) 0, var(--color-fill-2) 100%);\n}\n.ds-picture--sea {\n background: radial-gradient(ellipse 60% 30% at 12% 108%, var(--color-fill-3) 0, var(--color-fill-3) 98%, transparent 100%), linear-gradient(to bottom, transparent 0, transparent 58%, var(--color-inverse) 58%, color-mix(in srgb, var(--color-inverse), var(--color-shadow) 40%) 100%), radial-gradient(circle at 64% 56%, var(--color-warning) 0, var(--color-warning) 13%, transparent 14%), linear-gradient(to bottom, var(--color-fill-2) 0, var(--color-fill-4) 58%);\n}\n.ds-picture--peak {\n background: linear-gradient(to top left, color-mix(in srgb, var(--color-text-muted), var(--color-shadow) 35%) 0, color-mix(in srgb, var(--color-text-muted), var(--color-shadow) 35%) 50%, transparent 50%) 9.1% 100% / 45% 80% no-repeat, linear-gradient(to top right, var(--color-text-muted) 0, var(--color-text-muted) 50%, transparent 50%) 90.9% 100% / 45% 80% no-repeat, linear-gradient(to top left, var(--color-surface-strong) 0, var(--color-surface-strong) 50%, transparent 50%) 100% 100% / 40% 46% no-repeat, radial-gradient(circle at 20% 22%, var(--color-warning) 0, var(--color-warning) 8%, transparent 9%), linear-gradient(to bottom, var(--color-inverse) 0, var(--color-fill-1) 100%);\n}\n.ds-picture--town {\n background: linear-gradient(color-mix(in srgb, var(--color-shadow) 78%, var(--color-accent-alt)), color-mix(in srgb, var(--color-shadow) 78%, var(--color-accent-alt))) 8% 100% / 16% 52% no-repeat, linear-gradient(color-mix(in srgb, var(--color-shadow) 55%, var(--color-accent-alt)), color-mix(in srgb, var(--color-shadow) 55%, var(--color-accent-alt))) 34% 100% / 20% 36% no-repeat, linear-gradient(color-mix(in srgb, var(--color-shadow) 78%, var(--color-accent-alt)), color-mix(in srgb, var(--color-shadow) 78%, var(--color-accent-alt))) 62% 100% / 12% 66% no-repeat, linear-gradient(color-mix(in srgb, var(--color-shadow) 55%, var(--color-accent-alt)), color-mix(in srgb, var(--color-shadow) 55%, var(--color-accent-alt))) 92% 100% / 22% 44% no-repeat, radial-gradient(circle at 44% 46%, var(--color-warning) 0, var(--color-warning) 11%, transparent 12%), linear-gradient(to bottom, var(--color-accent-alt) 0, var(--color-fill-4) 100%);\n}\n\n/* hero: a band of sky with the newest entry on the left and three prints tossed on the right */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n padding: var(--space-6);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__kicker {\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 0 var(--space-3);\n color: var(--color-inverse-text);\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-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n margin: 0 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-hero__prints {\n position: relative;\n flex: 0 0 var(--size-prints);\n width: var(--size-prints);\n aspect-ratio: 4 / 3;\n}\n.ds-print {\n position: absolute;\n width: var(--size-print);\n margin: 0;\n padding: var(--space-2) var(--space-2) 0;\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-print--1 { top: 4%; left: 0; transform: rotate(-7deg); }\n.ds-print--2 { top: 0; right: 0; transform: rotate(5deg); }\n.ds-print--3 { top: 36%; left: 22%; transform: rotate(-2deg); }\n.ds-print__caption {\n display: block;\n padding: var(--space-1) 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n text-align: center;\n}\n\n/* page header: the head of an inner page, in a card of its own with the trail above it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n}\n.ds-page-header__main {\n flex: 1 1 0;\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__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: 0 0 auto;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* stats: the trip so far, four figures two by two on a pale card */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n margin: 0 0 var(--space-5);\n padding: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--fill-bar-alt);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-alt-text);\n list-style: none;\n overflow: hidden;\n}\n.ds-stat {\n min-width: 0;\n padding: var(--space-3) var(--space-2);\n text-align: center;\n}\n.ds-stat:nth-child(even) { border-left: var(--border-width) var(--border-style) var(--color-border); }\n.ds-stat:nth-child(n + 3) { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-stat__number {\n display: block;\n white-space: nowrap;\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-size: var(--text-small);\n}\n\n/* grid: four albums, each a framed picture over a tinted caption */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0;\n}\n.ds-grid__cell {\n min-width: 0;\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--1 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%); }\n.ds-grid__cell--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-grid__cell--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-grid__cell--4 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-4) 100%); }\n.ds-grid__title {\n margin: var(--space-3) var(--space-2) 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) var(--space-2) var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* tabs: words on a rule; the current one stands on a thick stroke */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n margin: 0 0 var(--space-4);\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0px - var(--border-width));\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n color: var(--color-link-quiet);\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-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { border-bottom-color: var(--color-border-strong); }\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-accent);\n color: var(--color-heading);\n}\n\n/* list: entries, each beside its picture */\n.ds-list {\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-4);\n padding: var(--space-4) 0;\n}\n.ds-list__item:first-child { padding-top: 0; }\n.ds-list__item:last-child { padding-bottom: 0; }\n.ds-list__item + .ds-list__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-list__thumb {\n flex: 0 0 var(--size-thumb);\n width: var(--size-thumb);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n}\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__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}\n.ds-list__meta {\n margin: var(--space-1) 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__text { margin: 0; }\n\n/* panel: a card in the side column */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background-color: color-mix(in srgb, var(--color-canvas) 92%, transparent);\n background-image: var(--fill-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n box-shadow: var(--shadow-panel);\n}\n.ds-panel.is-last { margin-bottom: 0; }\n.ds-panel__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-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}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__text.is-last { margin-bottom: 0; }\n.ds-panel__facts {\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n}\n.ds-panel__facts.is-last { margin-bottom: 0; }\n.ds-panel__fact {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__fact-name { color: var(--color-text-muted); }\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* sidebar: a card of links under a pale strip */\n.ds-sidebar {\n margin: 0 0 var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n overflow: hidden;\n}\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n}\n.ds-sidebar__item + .ds-sidebar__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* strip: three pictures in a row inside an entry */\n.ds-strip {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n}\n.ds-strip--pair {\n grid-template-columns: repeat(2, 1fr);\n margin-bottom: var(--space-3);\n}\n.ds-strip__frame {\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n box-shadow: var(--shadow-panel);\n}\n\n/* comments and guestbook messages */\n.ds-comment {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n}\n.ds-comment + .ds-comment { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-comment__avatar {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n line-height: 1;\n}\n.ds-comment__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-comment__name {\n margin: 0;\n font-weight: var(--weight-bold);\n}\n.ds-comment__date {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-comment__text { margin: var(--space-1) 0 0; }\n\n/* footer: a last card of sky */\n.ds-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n box-shadow: var(--shadow-panel);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__legal { margin: 0; }\n.ds-footer__list {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { text-decoration: var(--link-decoration-hover); }\n\n/* buttons: flat-topped glass keys */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button__icon {\n display: block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n font-size: var(--text-large);\n}\n.ds-button--secondary {\n border-color: color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 68%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 40%) 0, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 16%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 55%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 12%) 50%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: default;\n}\n\n/* form: labels to the left of their fields */\n.ds-form { margin: 0; }\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-4);\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: 0 0 var(--size-label);\n padding-top: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-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-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; padding: 0 var(--space-2); }\n.ds-form__textarea {\n height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n box-shadow: 0 0 var(--size-glow) color-mix(in srgb, var(--color-focus) 80%, transparent);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding-top: var(--space-1);\n}\n.ds-form__checkbox { margin: 0; accent-color: var(--color-button); }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: a pale head strip, hairlines between rows */\n.ds-table {\n width: 100%;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: separate;\n border-spacing: 0;\n border-radius: var(--radius-panel);\n font-size: var(--text-base);\n line-height: var(--line-body);\n overflow: hidden;\n}\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-align: left;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n}\n.ds-table__cell {\n padding: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: top;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ds-table__cell.is-date { color: var(--color-text-muted); font-size: var(--text-small); white-space: nowrap; }\n.ds-table__note {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* notice: a slip with a thick stroke at its left */\n.ds-notice {\n margin: 0 0 var(--space-4);\n padding: var(--space-3) var(--space-4);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 30%, var(--color-notice));\n border-left: var(--border-width-strong) var(--border-style) var(--color-notice-text);\n border-radius: var(--radius-control);\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-notice__text { margin: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination: separate keys, newer to the left and older to the right */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: 1;\n}\n.ds-pagination__link {\n display: 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 border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button-secondary) 60%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-pagination__link.is-current {\n border-color: color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n background: var(--fill-button);\n color: var(--color-button-text);\n text-shadow: var(--shadow-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* dialog: a thick-rimmed card with a pale strip for its title, shown in the page flow on a dimmed strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n margin: 0 0 var(--space-5);\n padding: var(--space-6) var(--space-5);\n border-radius: var(--radius-page);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: var(--radius-control);\n background: var(--color-danger);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-small) * 0.9);\n height: calc(var(--text-small) * 0.9);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) 0, calc(50% + var(--space-3) / 8) calc(50% - var(--space-3) / 8), 100% calc(50% - var(--space-3) / 8), 100% calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) calc(50% + var(--space-3) / 8), calc(50% + var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) 100%, calc(50% - var(--space-3) / 8) calc(50% + var(--space-3) / 8), 0 calc(50% + var(--space-3) / 8), 0 calc(50% - var(--space-3) / 8), calc(50% - var(--space-3) / 8) calc(50% - var(--space-3) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state: a quiet card with a blank print */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-empty__print {\n display: block;\n width: calc(var(--size-control-large) * 1.4);\n height: var(--size-control-large);\n margin: 0 auto var(--space-3);\n border: var(--border-width-strong) var(--border-style) var(--color-surface);\n background: var(--color-surface-strong);\n box-shadow: var(--shadow-panel);\n transform: rotate(-4deg);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-4); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose li { margin: 0 0 var(--space-2); }\n.ds-prose li::marker { color: var(--color-heading-alt); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) / 2);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link-hover); }\n\n/* badge: a small glass label */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-3));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-body);\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success), var(--color-button-text) 35%) 0, var(--color-success) 60%);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-warning), var(--color-button-text) 45%) 0, var(--color-warning) 60%);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 35%) 0, var(--color-danger) 60%);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-heading-alt); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* Components of the period: menu, progress, carousel, accordion, tooltip, avatar */\n:root {\n --size-progress: 14px;\n --size-orb: 24px;\n --size-slide: 96px;\n --size-avatar: 44px;\n --size-avatar-small: 28px;\n --size-menu: 200px;\n --size-tip: 220px;\n --size-dot: 8px;\n}\n.ds-nav:has(.ds-menu),\n.ds-nav:has(.ds-menu) .ds-nav__bar { overflow: visible; }\n.ds-menu { position: relative; }\n.ds-menu > .ds-nav__link::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-2) solid transparent;\n border-right: var(--space-2) solid transparent;\n border-top: var(--space-2) solid currentColor;\n vertical-align: calc(var(--space-2) / 2);\n margin-left: var(--space-2);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: var(--size-menu);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:focus-within > .ds-menu__list { display: block; }\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: none;\n text-transform: none;\n}\n.ds-menu__link:hover,\n.ds-menu__link:focus {\n background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-progress__row {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-progress__label { flex: 0 0 auto; color: var(--color-text); }\n.ds-progress__value { flex: 0 0 auto; color: var(--color-text-muted); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n display: block;\n flex: 1 1 0;\n width: 100%;\n height: var(--size-progress);\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--fill-accent); border-radius: var(--radius-pill); }\n.ds-progress::-moz-progress-bar { background: var(--fill-accent); border-radius: var(--radius-pill); }\n\n.ds-carousel { margin: 0 0 var(--space-3); }\n.ds-carousel__stage { display: flex; align-items: center; gap: var(--space-2); }\n.ds-carousel__orb {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: var(--size-orb);\n height: var(--size-orb);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 68%, var(--color-shadow));\n border-radius: var(--radius-pill);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-large);\n line-height: 1;\n}\n.ds-carousel__orb::before {\n content: \"\";\n flex: none;\n width: calc(var(--text-large) * 0.4);\n height: calc(var(--text-large) * 0.4);\n border-left: calc(var(--space-3) / 4) solid currentColor;\n border-bottom: calc(var(--space-3) / 4) solid currentColor;\n rotate: 45deg;\n translate: 25% 0;\n}\n.ds-carousel__orb ~ .ds-carousel__orb::before {\n rotate: -135deg;\n translate: -25% 0;\n}\n.ds-carousel__track {\n display: flex;\n flex: 1 1 0;\n min-width: 0;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n}\n.ds-carousel__slide {\n display: flex;\n flex: 0 0 100%;\n flex-direction: column;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: var(--size-slide);\n margin: 0;\n padding: var(--space-3);\n scroll-snap-align: start;\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-1) 100%);\n color: var(--color-text);\n font-size: var(--text-small);\n}\n.ds-carousel__slide--2 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-2) 100%); }\n.ds-carousel__slide--3 { background: linear-gradient(to bottom, var(--color-surface) 0, var(--color-fill-3) 100%); }\n.ds-carousel__title { margin: 0; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); }\n.ds-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }\n.ds-carousel__dot {\n display: block;\n width: var(--size-dot);\n height: var(--size-dot);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n background: var(--color-surface);\n}\n.ds-carousel__dot.is-current { background: var(--color-accent); }\n\n.ds-avatar {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width-strong) var(--border-style) var(--color-surface);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control), 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n text-transform: uppercase;\n}\n.ds-person { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }\n.ds-person__name { margin: 0; color: var(--color-heading); font-weight: var(--weight-bold); }\n.ds-person__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }\n", "specimen.html": "\n\n\n\nchronoskin: Frutiger Aero travel journal specimen\n\n\n\n\n
\n\n
\n
\n chronoskin\n
\n \n
\n \n
\n
\n\n
\n\n
\n
\n

Day 112, on the coast road

\n

Four months, one small car and the long way round

\n

The chronoskin journal is a diary of a slow trip from the mountains to the sea: a few words and a handful of pictures from wherever the day ends.

\n

\n Read the latest entry \n Start from day one\n

\n
\n
\n The pass, day 9\n Green valley, day 47\n First sight of the sea\n
\n
\n\n
\n
\n
\n

Latest entries

\n
    \n
  • \n \n
    \n

    The road meets the sea New

    \n

    Day 112, 18 June, from the lighthouse village. 24 photos, 3 comments

    \n

    After a week of hills the road drops through pines and there it is, wider than the map made it look.

    \n
    \n
    • \n
  • \n \n
    \n

    Market day in the old town

    \n

    Day 108, 14 June, from the square. 31 photos, 7 comments

    \n

    Cherries by the bucket, a brass band, and a man who mends umbrellas while you wait.

    \n
    \n
    • \n
  • \n \n
    \n

    Three days of doing nothing

    \n

    Day 101, 7 June, from a farm in the valley. 12 photos, 5 comments

    \n

    The car needed a part and we needed a rest. The valley supplied both, slowly.

    \n
    \n
    • \n
  • \n \n
    \n

    Snow in June

    \n

    Day 96, 2 June, from the second pass. 18 photos, 9 comments

    \n

    Nobody told the mountain what month it was. We crossed behind the plough.

    \n
    \n
    • \n
\n

All 64 entries in the archive

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

Albums

\n
\n
\n \n

Valleys and farms

\n

412 photos, updated 7 June

\n
\n
\n \n

The coast road

\n

96 photos, updated 18 June

\n
\n
\n \n

Towns at dusk

\n

238 photos, updated 14 June

\n
\n
\n \n

Passes and peaks

\n

530 photos, updated 2 June

\n
\n
\n
\n\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. The coast
    4. \n
  4. »
    5. \n
  5. The road meets the sea
    6. \n
\n
\n
\n

Day 112: the coast

\n

Written on 18 June from the lighthouse village. 24 photos, 3 comments.

\n
\n
\n Earlier entry\n Leave a comment\n
\n
\n
\n
\n
\n
\n \n
\n

The road meets the sea

\n

For a week the road had been all corners. Then, somewhere after the last village with a petrol pump, it straightened, dropped through a stand of pines, and the windscreen filled with blue. We stopped the car in the middle of the lane, which is allowed when there is nobody else for an hour in either direction.

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

Down through the pines

\n

The descent takes forty minutes and most of the brakes. Halfway down there is a spring with a tin cup on a chain, and a bench that somebody keeps painted. Stop there. The view is better than the one at the bottom, and the water is colder than anything in the shop.

\n

What we would tell a friend

\n
    \n
  • Fill the tank in the valley; the next pump is on the far side.
    • \n
  • The lighthouse keeper rents two rooms and does not answer letters. Just turn up.
    • \n
  • The whole route is in the file day-112.gpx, linked under the map.
    • \n
\n

Tomorrow we look for the ferry. The timetable in the harbour office is from last year, but the woman behind the desk says the boat goes when it is full, which sounds like a timetable to us.

\n
\n
\n
\n

3 comments

\n
\n M\n
\n

Marta 18 June, 21:40

\n

That bench was there when I was a child. Glad somebody still paints it.

\n
\n
\n
\n J\n
\n

Jonas 19 June, 08:12

\n

Take the early ferry if you can. The late one rolls.

\n
\n
\n

Write a comment in the guestbook

\n
\n
\n \n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Archive
    4. \n
  4. »
    5. \n
  5. The coast
    6. \n
\n
\n
\n

Archive

\n

Every entry since day one, newest first. 64 entries in four parts.

\n
\n
\n Follow by feed\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
DayEntryPhotosCommentsState
Day 114The ferry that goes when it is fullThe islands, appears on 20 June160Waiting
Day 112The road meets the seaThe lighthouse village243Published
Day 110A night at the harbourThe fishing port94Published
Day 109The wrong turningTaken down: the farmer asked us to611Withdrawn
Day 108Market day in the old townThe square317Published
\n \n
\n
\n \n
\n
\n\n
\n
\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Guestbook
    4. \n
  4. »
    5. \n
  5. Sign it
    6. \n
\n
\n
\n

Guestbook

\n

Tell us where you are reading from. 218 messages so far.

\n
\n
\n Read all messages\n
\n
\n
\n
\n
\n
\n

Sign the guestbook

\n
\n
\n

Messages appear after we have read them. On the road that can take a few days.

\n
\n
\n

Your message was not sent. The address below does not look like one we could answer.

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

Write the address with an @ sign, for example name@example.org.

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

Plain text, up to 600 letters.

\n
\n
\n
\n \n
\n
\n
\n \n \n \n Clear\n
\n
\n
\n
\n \n
\n
\n
\n

Clear what you wrote?

\n
\n

Your name, address and message will be emptied. Nothing has been sent yet, so there is nothing to take back.

\n
\n
\n Keep writing\n Clear the form\n
\n
\n
\n
\n\n\n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.frutiger-aero.blog.s08.p02.t03.u02.dc\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"frutiger-aero\",\n \"years\": [\n 2004,\n 2010\n ]\n },\n \"archetype\": \"blog\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-fa-8232-dc\",\n \"short\": \"v1-fa-8232-dc\",\n \"density\": \"compact\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #060c1a;\n --color-canvas: #0b1526;\n --color-surface: #101c33;\n --color-surface-alt: #162740;\n --color-surface-strong: #203552;\n --color-bar: #181818;\n --color-bar-text: #eef6ff;\n --color-bar-alt: #1b3d6b;\n --color-bar-alt-text: #d4e9ff;\n --color-inverse: #123c8f;\n --color-inverse-text: #ffffff;\n --color-text: #c9d6e6;\n --color-text-muted: #989898;\n --color-heading: #ffffff;\n --color-heading-alt: #62d8ff;\n --color-link: #62c8ff;\n --color-link-quiet: #a3b8cf;\n --color-link-visited: #b59cff;\n --color-link-hover: #a8ecff;\n --color-link-active: #ffffff;\n --color-border: #2a4466;\n --color-border-strong: #4d7fb3;\n --color-border-muted: #1c2f4a;\n --color-accent: #19c2f0;\n --color-accent-text: #03131f;\n --color-accent-alt: #c86bff;\n --color-fill-1: #10305e;\n --color-fill-2: #0d3a55;\n --color-fill-3: #2a1d5c;\n --color-fill-4: #123f3a;\n --color-button: #0f8fd0;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #26374f;\n --color-button-secondary-text: #dcecff;\n --color-input: #060d1a;\n --color-input-text: #e6f1ff;\n --color-input-border: #35557d;\n --color-disabled: #1a2434;\n --color-disabled-text: #5d6d82;\n --color-danger: #e0483c;\n --color-danger-surface: #3a1418;\n --color-success: #2fa84a;\n --color-warning: #f2b31c;\n --color-notice: #132c4a;\n --color-notice-text: #d4e9ff;\n --color-focus: #5fe6ff;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.6);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, \"DejaVu Sans\", sans-serif;\n --font-heading: \"Trebuchet MS\", \"Lucida Sans\", Tahoma, sans-serif;\n --font-ui: Tahoma, Verdana, Geneva, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 20px;\n --text-h2: 15px;\n --text-h3: 12px;\n --line-body: 1.4;\n --line-heading: 1.25;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 13px;\n --radius-panel: 10px;\n --radius-pill: 20px;\n --radius-page: 16px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 24%, transparent), inset 0 0 0 1px color-mix(in srgb, white 6%, transparent), 0 6px 18px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 0 8px color-mix(in srgb, var(--color-focus) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 60%, transparent), 0 0 14px color-mix(in srgb, var(--color-focus) 85%, transparent), 0 2px 4px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control-pressed: inset 0 2px 6px color-mix(in srgb, var(--color-shadow) 70%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, white 12%, transparent), 0 0 30px color-mix(in srgb, var(--color-focus) 35%, transparent), 0 16px 40px color-mix(in srgb, var(--color-shadow) 80%, transparent);\n --shadow-text: 0 0 6px color-mix(in srgb, var(--color-focus) 55%, transparent), 0 -1px 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --fill-page: radial-gradient(ellipse 70% 420px at 18% 0, color-mix(in srgb, var(--color-accent) 42%, transparent) 0, transparent 100%) 0 0 / 100% 420px no-repeat, radial-gradient(ellipse 55% 380px at 86% 40px, color-mix(in srgb, var(--color-accent-alt) 40%, transparent) 0, transparent 100%) 0 0 / 100% 420px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 35%) 0, var(--color-page) 640px) 0 0 / 100% 640px no-repeat, var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, white 30%, transparent) 0, color-mix(in srgb, white 8%, transparent) 50%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 14%) 0, color-mix(in srgb, var(--color-bar), black 35%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, white 20%, transparent) 0, transparent 60%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 10%) 0, color-mix(in srgb, var(--color-bar-alt), black 25%) 100%);\n --fill-inverse: radial-gradient(ellipse 50% 110% at 22% 100%, color-mix(in srgb, var(--color-accent) 55%, transparent) 0, transparent 100%), radial-gradient(ellipse 45% 120% at 80% 0, color-mix(in srgb, var(--color-accent-alt) 50%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 55%) 0, var(--color-inverse) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, white 55%, transparent) 0, transparent 55%), linear-gradient(to bottom, var(--color-accent) 0, color-mix(in srgb, var(--color-accent), black 22%) 100%);\n --fill-panel: linear-gradient(to bottom, color-mix(in srgb, white 10%, transparent) 0, transparent 34px), linear-gradient(to bottom, color-mix(in srgb, var(--color-surface-alt) 78%, transparent) 0, color-mix(in srgb, var(--color-surface) 72%, transparent) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, white 60%, transparent) 0, color-mix(in srgb, white 14%, transparent) 46%, transparent 50%, color-mix(in srgb, white 22%, transparent) 100%), var(--color-button);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, white 72%, transparent) 0, color-mix(in srgb, white 24%, transparent) 46%, color-mix(in srgb, white 8%, transparent) 50%, color-mix(in srgb, white 34%, transparent) 100%), var(--color-button);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, white 34%, transparent) 0, color-mix(in srgb, white 8%, transparent) 46%, transparent 50%, color-mix(in srgb, white 10%, transparent) 100%), var(--color-button-secondary);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 40%) 0, var(--color-input) 8px);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 10px;\n}\n" } }