{ "id": "v1-fa-8564", "long_id": "v1.frutiger-aero.blog.s08.p05.t06.u04", "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 }, "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-8564", "preview_url": "https://chrono.skin/s/v1-fa-8564/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, system and open faces only: `--font-body` is Tahoma, Geneva, \"DejaVu Sans\", Verdana; `--font-heading` is Candara, Optima, \"Gill Sans\", \"Trebuchet MS\", a flared humanist sans; `--font-ui` is \"Segoe UI\", Tahoma, Geneva. `--font-mono` (\"Andale Mono\") is for inline code.\n- `--text-base` 12px at `--line-body` 1.5. `--text-small` 11px for meta lines, counts, hints, the footer. `--text-ui` 12px for buttons, tabs and fields (`--weight-ui` 400); primary buttons, navigation and table heads are bold.\n- Headings are bold (`--weight-heading`, `--weight-display` 700): `--text-display` 30px the welcome title, `--text-h1` 23px page titles and the brand name, `--text-h2` 16px section and panel titles, figures and counts, `--text-h3` 13px question titles, navigation, sidebar titles. `--text-large` 15px the welcome lead, forum names and large buttons. Nothing is uppercased or tracked.\n- Links in running text and lists are underlined (`--link-decoration` underline) and lose the line on hover; titles (`.ds-link--title`), tools (`.ds-link--quiet`) and navigation are not underlined.\n- `--color-page` #0a5a5c with `--fill-page`: deep water, lit from above, darker towards the bottom, with three ring bubbles near the edges.\n- `--color-bar` #0d6e6a with `--fill-bar` (frosted teal glass, 86% opaque, lighter above) and `--color-bar-text` #f4fffb under `--shadow-text`: the navigation bar, the table head.\n- `--color-bar-alt` #bfe3da with `--fill-bar-alt` (pale frosted glass): the welcome band, sidebar titles.\n- `--color-inverse` #06383f with `--fill-inverse` (the deep: lit from above, darker below): the header band and the footer band, with `--color-inverse-text` #e8fbf6, which also draws the header's bubbles.\n- `--color-heading` #0a5e5a page, section and panel titles, figures and counts; `--color-heading-alt` #8a6800 (dark gold) prose h2, breadcrumb marks. `--color-text` #24403f, `--color-text-muted` #5a7775.\n- `--color-link` #08705c, `--color-link-quiet` #4d6f6c, visited #6a5a94, hover #0aa58a, active #8a6800.\n- `--color-button` #0f9d86 with `--fill-button` (jade pebble: light above, a glow rising from the foot): the primary button, the brand tile, the current tab and page number, the first round sign. `--color-button-secondary` #cfe6e0 with `--fill-button-secondary` (pale pebble): every other button, portraits, pagination keys.\n- `--color-accent` #ffd21f (yellow) with `--fill-accent` and dark `--color-accent-text` #3d2f00: the edge of the current navigation tab, the rule under panel titles, rank numbers, the default badge, the current sidebar mark. `--color-accent-alt` #ff7043 (coral): the New label.\n- `--color-success` #2e9e4f is the forum's signal: the frame and count of an answered question, the round check mark, the accepted answer. `--color-warning` #f0a800 marks a waiting question, `--color-danger` #c4342a on `--color-danger-surface` #fbe6e1 a closed one and errors. `--color-notice` #fdf6cf for notices.\n- `--color-fill-1` to `--color-fill-4` (mint, water, sand, kelp): the left end of each forum cell's fade; never text or borders.\n- Borders are 1px solid, 3px (`--border-width-strong`) for the yellow edge of the current tab, the rule under panel titles and the dialog's clear rim: `--color-border` #a9d3ca for boxes, `--color-border-muted` #d3e9e4 for rules inside a box, `--color-border-strong` #2f8f86 for the sheet and the sidebar rings, `--color-input-border` #7fbcb1 for fields.\n- Surface: `--radius-control` 5px, `--radius-panel` 9px, `--radius-pill` 16px, `--radius-page` 14px. `--shadow-panel` is a bright upper edge plus a deep 20px shadow that falls below the box; `--shadow-control` a short one; a hovered button gains a 2px ring in `--color-focus` (yellow); `--shadow-control-pressed` sinks the wells of the figures; `--shadow-dialog` is the 34px shadow of a floating window and of the question bubble. `--fill-panel` is frosted (about two thirds opaque) and `--backdrop-blur` 14px blurs what lies behind sheet, panels and posts. `--transition` none.\n- One-off shades are made with `color-mix()` over tokens: outlines of glossy fills, the frosted writer's column of a post (`--color-surface-strong` with transparent), the pale green of answered counts and of the accepted mark (`--color-success` in `--color-surface`), the header's bubbles and rules (`--color-inverse-text` with transparent), the dialog's rim.\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 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 or band take that 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` and `--color-success` as text on the surfaces and on their own pale mixes.\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 a focused field and of a hovered button. `--color-shadow` tints every shadow and darkens the outline of every glossy fill (the fill's colour mixed with `--color-shadow`).\n - A `--fill-*` token may end in a plain colour layer, so it is always the last layer of a `background`.\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 <= 60`: oranges, magenta, plum, one violet, cream and peach tints, green, amber and red for stock.\n- `font-size <= 30px`: the welcome title is the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta text.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 4`: body, heading and control faces, a monospace only for inline code.\n- `line-height <= 1.5`: body text is 12px on 18px.\n- `underlined-links <= 45%`: only links in running text and plain lists are underlined; titles, tools and navigation are not.\n- `letter-spacing = 0px`: no tracking.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `border-radius <= 12px`: corners are 3, 6, 8 or 12px; only round keys and capsules are rounder.\n- `border-width <= 1px`: every border and rule is a hairline.\n- `box-shadow-blur <= 30px`: shadows are short; only the floating window and the front cover reach 30px.\n- `gradient-fills <= 30%`: gloss belongs to bars, keys, labels, covers and cells; 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: 3px;\n --space-2: 5px;\n --space-3: 9px;\n --space-4: 14px;\n --space-5: 20px;\n --space-6: 30px;\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.p05.t06.u04\",\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-8564\",\n \"short\": \"v1-fa-8564\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f28c28;\n --color-canvas: #fffdfa;\n --color-surface: #fffdfa;\n --color-surface-alt: #fff2e0;\n --color-surface-strong: #ffe0bd;\n --color-bar: #c2185b;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ffd9a8;\n --color-bar-alt-text: #7a2a00;\n --color-inverse: #4a0f2e;\n --color-inverse-text: #fff3e0;\n --color-text: #3a2a2a;\n --color-text-muted: #7a6260;\n --color-heading: #8a1244;\n --color-heading-alt: #d95a00;\n --color-link: #b3124f;\n --color-link-quiet: #8a4a1a;\n --color-link-visited: #7a4a9a;\n --color-link-hover: #e86a00;\n --color-link-active: #8a1244;\n --color-border: #f2c9a0;\n --color-border-strong: #c96a3a;\n --color-border-muted: #f8e3cf;\n --color-accent: #e0407f;\n --color-accent-text: #ffffff;\n --color-accent-alt: #7b3fb5;\n --color-fill-1: #ffe9c9;\n --color-fill-2: #ffd9de;\n --color-fill-3: #fff3b8;\n --color-fill-4: #f0dcf5;\n --color-button: #f57c00;\n --color-button-text: #ffffff;\n --color-button-hover-text: #fffbe0;\n --color-button-secondary: #f3e0cf;\n --color-button-secondary-text: #6a2a10;\n --color-input: #ffffff;\n --color-input-text: #2a1a1a;\n --color-input-border: #e0a878;\n --color-disabled: #f0e8e2;\n --color-disabled-text: #b3a39a;\n --color-danger: #c21f1f;\n --color-danger-surface: #fde8e4;\n --color-success: #5a9a1a;\n --color-warning: #f2b000;\n --color-notice: #fff6c9;\n --color-notice-text: #6a4a00;\n --color-focus: #ffb74d;\n --color-shadow: #5a1030;\n --color-overlay: rgba(74, 15, 46, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Tahoma, Geneva, \"DejaVu Sans\", Verdana, sans-serif;\n --font-heading: Candara, Optima, \"Gill Sans\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Segoe UI\", Tahoma, Geneva, sans-serif;\n --font-mono: \"Andale Mono\", \"Courier New\", monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 15px;\n --text-display: 30px;\n --text-h1: 23px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 12px;\n --radius-panel: 6px;\n --radius-pill: 3px;\n --radius-page: 8px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), 0 12px 12px -10px color-mix(in srgb, var(--color-shadow) 38%, transparent);\n --shadow-control: inset 0 0 0 1px color-mix(in srgb, white 30%, transparent), 0 1px 0 color-mix(in srgb, white 60%, transparent);\n --shadow-control-hover: inset 0 0 0 1px color-mix(in srgb, white 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);\n --shadow-control-pressed: inset 0 3px 5px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 30%, transparent), 0 20px 30px -6px color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 55%, transparent);\n --fill-page: radial-gradient(ellipse 70% 320px at 50% 0, color-mix(in srgb, white 95%, transparent) 0, transparent 100%) 0 0 / 100% 320px no-repeat, linear-gradient(to bottom, color-mix(in srgb, var(--color-page), white 40%) 0, var(--color-page) 500px, color-mix(in srgb, var(--color-page), black 12%) 1100px) 0 0 / 100% 1100px no-repeat, color-mix(in srgb, var(--color-page), black 12%);\n --fill-bar: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 38%, transparent) 0, color-mix(in srgb, white 12%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 20%) 0, var(--color-bar) 55%, color-mix(in srgb, var(--color-bar), black 35%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 82%) 0, color-mix(in srgb, var(--color-bar-alt), white 30%) 60%, var(--color-bar-alt) 100%);\n --fill-inverse: radial-gradient(ellipse 65% 70% at 50% -8%, color-mix(in srgb, white 24%, transparent) 0, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 12%) 0, var(--color-inverse) 60%, color-mix(in srgb, var(--color-inverse), black 30%) 100%);\n --fill-accent: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 50%, transparent) 0, color-mix(in srgb, white 16%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 12%) 0, color-mix(in srgb, var(--color-accent), black 12%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n --fill-button: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 55%, transparent) 0, color-mix(in srgb, white 14%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n --fill-button-hover: radial-gradient(ellipse 130% 100% at 50% -52%, color-mix(in srgb, white 70%, transparent) 0, color-mix(in srgb, white 26%, transparent) 99.5%, transparent 100%), linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%) 0, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 88%) 0, color-mix(in srgb, var(--color-button-secondary), white 20%) 100%);\n --fill-input: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-input) 60%);\n --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 60%, transparent);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }