{ "id": "v1-wk-6344", "long_id": "v1.wiki-2000s.docs.s06.p03.t04.u04", "name": "Travel guide wiki, banner and guide column, 2003 to 2010", "era": { "slug": "wiki-2000s", "code": "wk", "name": "Wiki", "years": [ 2003, 2010 ], "description": "Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the travel or city guide wiki of the later 2000s: a coloured banner with the name and a place search, a pale strip of sections with small icons, and one wide sheet. A destination guide keeps the same rhythm everywhere (understand, get in, see, do, eat, sleep, go next), with a column of contents and quick facts at the left and listings as small boxes with a round pin, an address line and a price. Text is a roomy 15px Trebuchet with teal links on white and sand, boxes are outlined with dashes, and nothing casts a shadow or moves.", "url": "https://chrono.skin/s/v1-wk-6344", "preview_url": "https://chrono.skin/s/v1-wk-6344/specimen.html", "files": { "STYLE.md": "# Travel guide wiki, banner and guide column, 2003 to 2010\n\n## Summary\n\nThis is the travel or city guide wiki of the later 2000s: a coloured banner with the name and a place search, a pale strip of sections with small icons, and one wide sheet. A destination guide keeps the same rhythm everywhere (understand, get in, see, do, eat, sleep, go next), with a column of contents and quick facts at the left and listings as small boxes with a round pin, an address line and a price. Text is a roomy 15px Trebuchet with teal links on white and sand, boxes are outlined with dashes, and nothing casts a shadow or moves.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page__frame` has `--space-4` (10px) above and `--space-6` (18px) at the sides. Designed at 1024px; it does not reflow for phones.\n- Order from the top: the header `.ds-nav` (the banner `.ds-nav__top` in the bar fill with the brand at the left and the search and account links at the right; the strip `.ds-nav__menu` in the secondary bar fill); the sheet `.ds-page__sheet`, joined to the strip, on the canvas; the footer, a separate band in the inverse fill with three columns. No text sits on the page colour.\n- Views. The specimen is a four-screen example travel guide; the strip has one item per view and the current one has a thick underline in `--color-accent-alt`. `home` is the welcome band with a drawn view, the figures as ticket stubs, three equal panels (`.ds-trio`) and the region cards. `destination` is one guide: trail, title, the row of page tabs, then the `--size-guide` (196px) column of contents and quick facts beside the text with its listings. `region` is a region as a table of places beside a `--size-aside` (260px) column. `add` is the listing form with two notices and the discard confirmation, beside a column of advice.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb` (the \"is in\" trail, parts joined by colons), then `.ds-page-header` in place of the welcome band (title and one muted line at the left, the action at the right, on a thick pale rule), then `.ds-tabs` when the page has several faces, then `.ds-layout`: the guide column at the left, or with `.ds-layout--aside` a help column at the right. `.ds-layout__col` stacks blocks `--space-5` apart.\n- Form labels sit above their fields; `.ds-form__pair` puts two rows side by side. Inputs are `--size-field` (340px) unless wide, the banner search `--size-search` (190px), a text area `--size-editor` (90px) tall. A pin is `--size-pin` (28px) round, an icon `--size-icon` (16px). The drawn view is `--size-scene` (230px) wide. A dialog is `--size-dialog` (430px) wide.\n- Spacing scale: `--space-1` 2px, `--space-2` 4px, `--space-3` 7px, `--space-4` 10px, `--space-5` 14px, `--space-6` 18px, `--space-7` 26px.\n - `--space-1`: vertical padding of buttons, tabs and fact rows.\n - `--space-2`: vertical padding of table cells, list rows and box titles.\n - `--space-3`: gap between an icon and its text, between buttons and between listings; vertical padding of strip items.\n - `--space-4`: horizontal padding of cells and boxes; gap between region cards.\n - `--space-5`: gap between blocks; padding of panels.\n - `--space-6`: padding of the sheet, the banner and the footer; gap between the columns; margin above a section heading.\n - `--space-7`: padding of the welcome band, list indent, gap between footer columns.\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- Text on fills follows the era's conventions (see the first layout of this era): no text on `--color-page`; body, muted, heading and link colours, `--color-danger` and `--color-success` on the canvas, the three surfaces, `--fill-panel` and the four fills; only `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-notice-text` on `--color-notice`, and `--color-text` on `--color-danger-surface`. Links on a bar take the bar's text colour and are told apart by underline.\n- `--color-page` is kraft brown with fine vertical lines from `--fill-page`; the sheet `--color-canvas` is cream. `--color-surface` fills margin boxes, tables and the calendar leaf; `--color-surface-alt` the letter strip, idle tabs, language headings and alternate rows; `--color-surface-strong` panel titles, translation bars and the current letter.\n- `--fill-bar` (dark brown) with `--color-bar-text` is the section bar, table heads and the dialog title. `--fill-bar-alt` (straw) with `--color-bar-alt-text` is the masthead and the titles of margin boxes. `--fill-inverse` is the footer band.\n- `--color-heading` is for titles and headwords; `--color-heading-alt` (rust) for part-of-speech headings, panel titles, figures and the drop capitals of the grid. Links are `--color-link` (ink blue) and underlined; a missing entry is `.ds-link--new`.\n- `--color-border-strong` frames the book and rules the page header (as a `double` line of `--border-width-strong`); `--color-border` outlines boxes; `--color-border-muted` rules rows.\n- `--color-accent` with `--color-accent-text` is the current bar item, the month strip of the calendar leaf, the current page number and badges; `--color-accent-alt` is the top rule of a notice.\n- `--color-fill-1` to `--color-fill-4` are the straw, sage, clay and stone of the shelf cells.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are all Georgia, headings at weight 400; italic marks parts of speech, labels and quotations. `--font-mono` is for respellings.\n- Sizes: `--text-base` 14px; `--text-ui` 12px for bar, tabs, buttons, tables and margin boxes; `--text-small` 11px for meta and the footer; `--text-large` 16px for the definition of the day, panel titles and shelf names; `--text-h3` 15px, `--text-h2` 20px, `--text-h1` 25px, `--text-display` 30px for the wordmark and the word of the day.\n- One-off choices outside the token set: `double` rules on the hero, page header and footer; `dotted` row rules in tables; the notice's top rule is `--border-width-strong`; status badges are tints made with `color-mix()`.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__frame` is the padded page, `.ds-page__sheet` the sheet. Views are `.ds-view` with a `.ds-view__body` column; `.ds-layout` (`--aside`) and `.ds-layout__col` make columns, `.ds-trio` three equal ones. `.ds-sprite` hides the SVG symbol sheet and `.ds-icon` sizes an inline icon.\n- `.ds-nav`: the header. `.ds-nav__top` holds the brand and `.ds-nav__side` (the `.ds-nav__search` form with its `.ds-nav__field`, and the `.ds-nav__personal` list of `.ds-nav__personal-link` items). `.ds-nav__menu` is the strip of `.ds-nav__link` items, each with an optional icon; the current one takes `is-current`.\n- `.ds-brand`: mark and name at the left of the banner. `.ds-brand__mark` is a round tile 1.5 times `--text-h1`, dressed like the primary button; `.ds-brand__text` stacks `.ds-brand__name` and `.ds-brand__tag` 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 tile.\n- `.ds-breadcrumb`: the \"is in\" trail: `.ds-breadcrumb__link`, `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome band in the first fill: `.ds-hero__title`, `.ds-hero__lead`, buttons in `.ds-hero__action`, and `.ds-hero__scene`, a framed inline drawing in `--color-heading-alt`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__desc`, `.ds-page-header__action`.\n- `.ds-tabs`: the faces of a guide as a row of lozenges; `.ds-tabs__tab`, `is-current` in the bar fill.\n- `.ds-stat`: the row; four `.ds-stat__item` ticket stubs divided by dashed rules, each a `.ds-stat__value` over a `.ds-stat__label`.\n- `.ds-section`: a plain heading between blocks.\n- `.ds-panel`: a box in `--fill-panel` with a `.ds-panel__title`, a `.ds-panel__body` of `.ds-panel__line` paragraphs and a bold `.ds-panel__more` link line.\n- `.ds-list`: short notes: `.ds-list__item` with a `.ds-list__meta` line, divided by rules.\n- `.ds-grid`: region cards three to a row: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a `.ds-pin`, a `.ds-grid__name` link and `.ds-grid__meta`. `.ds-pin` is the round accent tile that holds one icon, also used before each listing.\n- `.ds-sidebar`: the guide column. Each `.ds-sidebar__block` has a `.ds-sidebar__title` strip and a `.ds-sidebar__list` of `.ds-sidebar__item` rows (icon and link), or a `.ds-facts` list of `.ds-facts__row` pairs (`.ds-facts__term`, `.ds-facts__value`).\n- `.ds-prose`: guide text: h1, h2 (a section of the rhythm: icon, name and a `.ds-edit` link at the right, on a rule), h3 (a budget class or a way of travel), p, ul, strong, code.\n- `.ds-listing`: the places of a section. Each `.ds-listing__item` is a pin, then the text (a bold `.ds-listing__name`, address and description, and a `.ds-listing__meta` line of hours), then a `.ds-listing__price`.\n- `.ds-table`: a table with a bar-fill head and ruled rows; `.ds-table__num` right-aligns numbers, `.ds-table__row--alt` tints a row, `.ds-table__nowrap` keeps a cell on one line.\n- `.ds-notice`: a traveller's warning with a thick left edge in `--color-accent`; `.ds-notice--error` has it in `--color-danger` on `--color-danger-surface`. `.ds-notice__title` is the bold first phrase, `.ds-notice__link` an underlined link in the text colour.\n- `.ds-form`: `.ds-form__row` stacks a `.ds-form__label` over a `.ds-form__field` holding a `.ds-form__input` (`--wide`, `--auto`, `--text`; `is-invalid`, `is-disabled`) with `.ds-form__hint` or `.ds-form__error`; `.ds-form__pair` sets two rows side by side; `.ds-form__check` and `.ds-form__checkbox`; `.ds-form__actions` with `.ds-form__spacer` pushing the destructive button to the right.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--new` (in `--color-danger`) for a page nobody has written, `.ds-link--quiet` for tool and outside links, `.ds-link--strong` for bold.\n- `.ds-button`: primary action. `.ds-button--secondary` is the plain button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--small` a smaller one. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: a small label in the accent fill for counts and \"new\". `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are status labels: a 14 to 22% tint of the status colour over `--color-surface`, body text and a 1px outline in the status colour.\n- `.ds-pagination`: a line of small bordered `.ds-pagination__link` steps (`is-current` in the accent fill, `is-disabled` plain) with a muted `.ds-pagination__label`.\n- `.ds-dialog`: a box in the page flow, centred in the `.ds-dialog__backdrop` band (`--color-overlay`, no text on it): `.ds-dialog__title` in the bar fill, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dashed box on `--color-surface` with `.ds-empty__title`, `.ds-empty__text` and one secondary button.\n- `.ds-footer`: the inverted band: a wide first column with `.ds-footer__title` and `.ds-footer__text`, then columns of a `.ds-footer__title` over a `.ds-footer__row` of `.ds-footer__link` items.\n- `.ds-clear` ends floats.\n- `ds-accordion` (with `__summary`, `__body`): a collapsible box, a `
` section for contents, tips or rules.\n- `ds-menu` (with `__summary`, `__list`, `__item`): a page-actions or language drop-down, a `
` opened by click.\n- `ds-tooltip` (with `__tip`): a small hint box on a link, shown on hover or focus.\n- `ds-progress` (inside `ds-meter`): a native progress bar for completeness or a drive.\n\n## Never\n\n- `content-width >= 75%`: the sheet stretches with the window.\n- `font-size <= 30px`: the word of the day, 30px, is the largest text.\n- `font-size >= 11px`: meta text is 11px; nothing is smaller.\n- `font-families <= 2`: one serif for everything, monospace for respellings.\n- `letter-spacing <= 0px`: no reference tracks its text.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `border-radius <= 2px`: every box is square; only badges have 2px corners.\n- `box-shadow-blur <= 0px`: shadows are hard one-pixel offsets, never soft.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 3px`: rules are 1px; double rules and the notice edge are 3px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a box in the guide column from `.ds-sidebar__block`, a new kind of place from `.ds-listing__item` with its own icon in a `.ds-pin`, a boxed aside from `.ds-panel`, a warning from `.ds-notice`. Build it as a 1px `--color-border` outline in `--border-style` on `--color-surface`, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no shadow, gradient or transition of its own, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). A banner with the search box, a strip of\n sections, and one sheet whose guide pages keep a column of contents and\n quick facts at the left; measured on travel and city guide wikis of 2005\n to 2009. */\n:root {\n --size-page: 100%;\n --size-guide: 196px;\n --size-aside: 260px;\n --size-search: 190px;\n --size-label: 100%;\n --size-field: 340px;\n --size-editor: 90px;\n --size-dialog: 430px;\n --size-icon: 16px;\n --size-pin: 28px;\n --size-scene: 230px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 7px;\n --space-4: 10px;\n --space-5: 14px;\n --space-6: 18px;\n --space-7: 26px;\n}\n/* ---------- shell ---------- */\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-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\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.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-clear {\n clear: both;\n}\n\n/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* Tool, meta and outside links. */\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* A link to a page that does not exist yet. */\n.ds-link--new,\n.ds-link--new:visited,\n.ds-link--new.is-visited {\n color: var(--color-danger);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-decoration: none;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-border-strong);\n}\n\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--small {\n padding: 0 var(--space-3);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0,1fr);\n gap: var(--space-1) var(--space-5);\n align-items: baseline;\n}\n.ds-form__label {\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--text {\n display: block;\n width: 100%;\n height: var(--size-editor);\n resize: vertical;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__spacer {\n flex: 1 1 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n}\n\n/* Status labels: a tint of the status colour over the surface, body text,\n and the status colour as the outline. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n font-weight: var(--weight-body);\n border: var(--border-width) solid var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb,var(--color-success) 16%,var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb,var(--color-warning) 22%,var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb,var(--color-danger) 14%,var(--color-surface));\n border-color: var(--color-danger);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n display: flow-root;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__link {\n color: inherit;\n text-decoration: underline;\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-3);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-text-muted);\n text-decoration: none;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin: 0 0 var(--space-4);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n font-size: var(--text-h3);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-2) 0 var(--space-4);\n padding: 0 0 0 var(--space-7);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n border: var(--border-width) solid var(--color-border-muted);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-edit {\n float: right;\n margin: 0 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: collapse;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom-color: var(--color-border);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__nowrap {\n white-space: nowrap;\n}\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n\n/* ---------- dialog: a box in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) dashed var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\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-large);\n font-weight: var(--weight-bold);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n/* ---------- shell ---------- */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n padding: var(--space-4) var(--space-6) var(--space-6);\n}\n.ds-page__sheet {\n padding: var(--space-5) var(--space-6) var(--space-6);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-top: 0;\n border-radius: 0 0 var(--radius-page) var(--radius-page);\n}\n.ds-layout {\n display: grid;\n grid-template-columns: var(--size-guide) minmax(0,1fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-layout--aside {\n grid-template-columns: minmax(0,1fr) var(--size-aside);\n}\n.ds-layout__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-trio {\n display: grid;\n grid-template-columns: repeat(3,minmax(0,1fr));\n gap: var(--space-5);\n align-items: stretch;\n}\n\n/* ---------- nav: the banner and the strip of sections ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-page) var(--radius-page) 0 0;\n text-shadow: var(--shadow-text);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h1) * 1.5);\n height: calc(var(--text-h1) * 1.5);\n box-sizing: border-box;\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 66%;\n height: 66%;\n}\n.ds-brand__text {\n display: flex;\n flex-direction: column;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-brand__tag {\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-nav__side {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-2);\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-nav__field {\n width: var(--size-search);\n}\n.ds-nav__personal {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-nav__personal-link {\n color: var(--color-bar-text);\n text-decoration: underline;\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-5);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width-strong) solid transparent;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n.ds-nav__link.is-current {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* The current view's item, and the home item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#destination:target) .ds-nav__link[href=\"#destination\"] {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#region:target) .ds-nav__link[href=\"#region\"] {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"] {\n border-bottom-color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- breadcrumb: where the place lies ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-3);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the welcome band with a drawn view ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0,1fr) var(--size-scene);\n gap: var(--space-7);\n align-items: center;\n padding: var(--space-6) var(--space-7);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n}\n.ds-hero__scene {\n display: block;\n background: var(--color-canvas);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__scene svg {\n display: block;\n width: 100%;\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width-strong) solid var(--color-surface-strong);\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__desc {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- tabs: the faces of a guide, as a row of lozenges ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-1) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n border-color: var(--color-border-strong);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-style: solid;\n border-color: var(--color-bar);\n text-shadow: var(--shadow-text);\n}\n\n/* ---------- stats: a row of ticket stubs ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4,minmax(0,1fr));\n margin: 0;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n}\n.ds-stat__item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-3) var(--space-4);\n border-left: var(--border-width) dashed var(--color-border-strong);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__value {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- section heading ---------- */\n.ds-section {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-5) 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n flex: 1 1 auto;\n padding: var(--space-2) var(--space-5) var(--space-4);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__more {\n margin: 0;\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- list: dated notes for travellers ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- grid: regions, each a coloured card with a pin ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3,minmax(0,1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: auto minmax(0,1fr);\n column-gap: var(--space-4);\n align-items: center;\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__name {\n display: block;\n color: var(--color-link);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* A round pin with a small drawing: on cards and before each listing. */\n.ds-pin {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-pin);\n height: var(--size-pin);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n}\n\n/* ---------- sidebar: contents and tools of a guide, at the left ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-sidebar__block {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-3);\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n color: var(--color-text-muted);\n}\n\n/* Quick facts: label and value rows. */\n.ds-facts {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-3);\n font-size: var(--text-small);\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-1) 0;\n border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-facts__row:last-child {\n border-bottom: 0;\n}\n.ds-facts__term {\n color: var(--color-text-muted);\n}\n.ds-facts__value {\n margin: 0;\n font-weight: var(--weight-bold);\n text-align: right;\n}\n\n/* ---------- prose: the section rhythm of a guide ---------- */\n.ds-prose h2 {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-prose h2 .ds-edit {\n order: 2;\n margin: 0 0 0 auto;\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n}\n\n/* ---------- listings: places to see, eat and sleep ---------- */\n.ds-listing {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: var(--space-3) 0 var(--space-5);\n padding: 0;\n list-style: none;\n}\n.ds-prose .ds-listing {\n padding: 0;\n}\n.ds-listing__item {\n display: grid;\n grid-template-columns: auto minmax(0,1fr) auto;\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-listing__name {\n font-weight: var(--weight-bold);\n}\n.ds-listing__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-listing__price {\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n color: var(--color-heading-alt);\n white-space: nowrap;\n}\n\n/* ---------- notice: a traveller's warning ---------- */\n.ds-notice {\n border-left: var(--border-width-strong) solid var(--color-accent);\n}\n.ds-notice--error {\n border-left-color: var(--color-danger);\n}\n\n/* ---------- form: labels above the fields ---------- */\n.ds-form__row {\n grid-template-columns: minmax(0,1fr);\n}\n.ds-form__pair {\n display: grid;\n grid-template-columns: repeat(2,minmax(0,1fr));\n gap: var(--space-5);\n}\n.ds-form__label {\n color: var(--color-heading);\n}\n\n/* ---------- footer: an inverted band of link columns ---------- */\n.ds-footer {\n display: grid;\n grid-template-columns: minmax(0,2fr) repeat(2,minmax(0,1fr));\n gap: var(--space-7);\n margin: var(--space-5) 0 0;\n padding: var(--space-5) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__title {\n margin: 0 0 var(--space-1);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-footer__row {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n\n/* Components of the period: collapsible boxes, page-action menu, hint box, meter. */\n.ds-extras {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-4) var(--space-5);\n margin: var(--space-4) 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-extras > .ds-accordion { flex: 1 1 var(--size-fold); }\n.ds-accordion {\n box-sizing: border-box;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n cursor: pointer;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-accordion[open] > .ds-accordion__summary {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body { padding: var(--space-3) var(--space-4); }\n.ds-accordion__body p { margin: 0; }\n.ds-menu { position: relative; display: inline-block; }\n.ds-menu__summary {\n cursor: pointer;\n list-style: none;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-weight: var(--weight-ui);\n}\n.ds-menu__summary::-webkit-details-marker { display: none; }\n.ds-menu__summary::after { content: \"\"; display: inline-block; width: 0; height: 0; border: calc(var(--text-base) * 0.3) solid transparent; border-top: calc(var(--text-base) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: calc(var(--text-base) * 0.45); vertical-align: calc(var(--text-base) * 0.12); }\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n min-width: var(--size-menu);\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n white-space: nowrap;\n}\n.ds-menu__item:hover, .ds-menu__item:focus {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-tooltip { position: relative; display: inline-block; }\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: var(--size-tip);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip, .ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-meter { display: inline-flex; align-items: center; gap: var(--space-3); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n width: var(--size-meter);\n height: var(--size-meter-h);\n box-sizing: border-box;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n overflow: hidden;\n vertical-align: middle;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--color-accent); }\n.ds-progress::-moz-progress-bar { background: var(--color-accent); }\n\n/* The current item also carries a marker no token set can remove. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"]::before,\n.ds-page:has(#destination:target) .ds-nav__link[href=\"#destination\"]::before,\n.ds-page:has(#region:target) .ds-nav__link[href=\"#region\"]::before,\n.ds-page:has(#add:target) .ds-nav__link[href=\"#add\"]::before,\n.ds-nav__link.is-current::before { content: \"\\25B8\\00a0\"; }\n\n:root {\n --size-fold: 18em;\n --size-menu: 12em;\n --size-tip: 15em;\n --size-meter: 14em;\n --size-meter-h: 1em;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: travel guide wiki specimen\n\n\n\n\n\n\n \n \n \n \n \n \n \n \n\n\n
\n\n
\n
\n \n \n \n chronoskin\n the travel guide that travellers write\n \n \n
\n
\n \n \n
\n \n
\n
\n \n
\n\n
\n\n \n
\n
\n
\n
\n

Guides to everywhere, written by the people who went

\n

chronoskin is an open travel guide. Read how to get in, what to see and where to sleep, then fix what has changed since.

\n

\n Read this month's guide\n Add a place you know\n

\n
\n \n
\n\n
\n
9,640
destination guides
\n
58,300
listings
\n
41
phrasebooks
\n
3,120
travellers writing
\n
\n\n
\n
\n
\n

Destination of the month

\n
\n

Port Varen is a harbour town of slate roofs and fish smokers at the mouth of a tidal river. Come for the lighthouse walk and the Thursday market; stay for the ferry to the outer islands.

\n

Read the guide

\n
\n
\n
\n

Off the beaten path

\n
\n

The Hollow Dunes lie two hours on foot from the last bus stop. There is no shop and no shade, and on a clear evening no better view on the coast.

\n

More quiet places

\n
\n
\n
\n

Notes from the road

\n
\n
    \n
  • Island ferry runs a winter timetable from 1 October. Port Varen · noted 3 days ago
    • \n
  • Coast road is closed at the north bridge. Saltmarsh Coast · noted last week
    • \n
  • Kestrel Point hostel has reopened. no guide yet · new
    • \n
\n
\n
\n
\n\n

Where do you want to go?

\n \n
\n
\n\n \n
\n
    \n
  1. Northern Shores
    2. \n
  2. :
    3. \n
  3. Saltmarsh Coast
    4. \n
  4. :
    5. \n
  5. Port Varen
    6. \n
\n
\n
\n

Port Varen

\n

A harbour town at the mouth of the Varen, the gateway to the outer islands.

\n
Quay timeCheck ferry times at the quay. The last boat may leave early.
Language
\n
\n

Add a listing

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

Ferry timetable changes on 1 October. The last boat to the islands then leaves at 15:40. Update the times if you have a newer sheet.

\n

Understand[edit]

\n

Port Varen grew up around its fish quay and still lands a catch every morning. The old town is a tangle of lanes behind the harbour wall; everything a visitor wants is within fifteen minutes on foot of the clock tower. Timetables use the 24-hour clock, written like 15:40.

\n

Get in[edit]

\n

By train

\n

Trains from the Old Capital take about two hours and arrive at Varen Quay, right on the harbour. Buy a return; it costs little more than a single.

\n
    \n
  • Six trains a day, four on Sundays.
    • \n
  • Bicycles travel free outside the morning rush.
    • \n
\n

See[edit]

\n
    \n
  • Varen Light, end of the north mole. The white lighthouse; 96 steps to the gallery. Open 10:00 to 17:00, closed Mondays · allow an hour3.00
    • \n
  • Smokehouse Row, Quay Lane. Nine working fish smokers in tarred sheds, best before noon. Always open · the lane is cobbled and steepfree
    • \n
\n

Eat[edit]

\n

Budget

\n
    \n
  • The Net Loft, 4 Quay Lane. Smoked fish rolls and soup at a long shared table. 11:30 to 20:00 daily · cash only4 to 7
    • \n
\n

Splurge

\n
\n

No splurge listings yet

\n

Nobody has written up a fine restaurant in Port Varen. If you ate well here, tell the next traveller.

\n Add a listing\n
\n

Sleep[edit]

\n
    \n
  • Harbour Master's House, 1 Mole Street. Eight plain rooms over the old customs office; ask for one at the front. Check-in from 14:00 · breakfast included · prices from 200738 to 55
    • \n
\n

Go next[edit]

\n \n
\n
\n
\n\n \n
\n
    \n
  1. Northern Shores
    2. \n
  2. :
    3. \n
  3. Saltmarsh Coast
    4. \n
\n
\n
\n

Saltmarsh Coast

\n

Eighty kilometres of low shore, tidal creeks and harbour towns. 17 places have a guide.

\n
How guide status works [show]

Usable means a traveller can plan from it. Outline means it needs more listings.

\n
\n

Start a guide

\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
PlaceKindKnown forListingsGuide
Port Varentownlighthouse, fish smokers, island ferry46usable
Marrow Sandsvillagethe long beach, kite flying12usable
The Hollow Dunesparkdune walks, evening views5outline
Saltbytownsalt pans, the Friday auction21outline
Kestrel Pointheadlandseabird cliffs, a reopened hostel0missing
Eelmouthvillagecreek boats, smoked eel8usable
\n \n
\n
\n
\n

A week on the coast

\n
\n

Two days in Port Varen, the ferry out and back, then south by bus through Saltby to the long beach.

\n

See the itinerary

\n
\n
\n
\n

Getting around

\n \n
\n
\n
\n
\n\n \n
\n
    \n
  1. Saltmarsh Coast
    2. \n
  2. :
    3. \n
  3. Port Varen
    4. \n
  4. :
    5. \n
  5. Add a listing
    6. \n
\n
\n
\n

Add a listing to Port Varen

\n

One place to see, eat or sleep, written so that a stranger can find it and knows what it costs.

\n
\n
\n

Back to the guide

\n
\n
\n
\n
\n

Write what you saw yourself. Listings copied from a brochure or another guide are removed. Read why.

\n

The listing was not saved. Give an address or say how to find the place.

\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n Please say where the place is.\n
\n
\n \n Two or three plain sentences. Prices in local money, as a range.\n
\n
\n \n
\n
\n \n Preview\n \n \n Discard\n
\n
\n
\n
\n

Discard this listing?

\n
\n

What you have written about The Tide Table will be lost. Nothing has been added to the guide yet.

\n
\n Keep writing\n Discard listing\n
\n
\n
\n
\n
\n
\n
\n

How a listing reads

\n
\n

Name, then where it is, then what it is like, then hours and price.

\n

Be fair and be brief: \"plain rooms, good breakfast\" helps more than praise.

\n

Listing style guide

\n
\n
\n
\n

Sections of a guide

\n
    \n
  • See: sights and views
    • \n
  • Do: walks, boats, events
    • \n
  • Eat: by budget
    • \n
  • Sleep: by budget
    • \n
\n
\n
\n
\n
\n\n
\n\n \n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.docs.s06.p03.t04.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"wiki-2000s\",\n \"years\": [\n 2003,\n 2010\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wk-6344\",\n \"short\": \"v1-wk-6344\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f6f9ed;\n --color-canvas: #ffffff;\n --color-surface: #f8f8f8;\n --color-surface-alt: #eef3e2;\n --color-surface-strong: #e0e0c0;\n --color-bar: #5b8c2a;\n --color-bar-text: #ffffff;\n --color-bar-alt: #e7edff;\n --color-bar-alt-text: #1c3d5a;\n --color-inverse: #2f4a14;\n --color-inverse-text: #f6f9ed;\n --color-text: #111111;\n --color-text-muted: #6a6a6a;\n --color-heading: #1f1f1f;\n --color-heading-alt: #3f6a12;\n --color-link: #006398;\n --color-link-quiet: #3f6a12;\n --color-link-visited: #5b4a8c;\n --color-link-hover: #1068a0;\n --color-link-active: #802b28;\n --color-border: #dddddd;\n --color-border-strong: #bbbbbb;\n --color-border-muted: #eeeeee;\n --color-accent: #e8770e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #802b28;\n --color-fill-1: #e7edff;\n --color-fill-2: #eef3e2;\n --color-fill-3: #fff3d0;\n --color-fill-4: #f0f0f0;\n --color-button: #5b8c2a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #f6f9ed;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #111111;\n --color-input: #ffffff;\n --color-input-text: #111111;\n --color-input-border: #999999;\n --color-disabled: #e6e6e6;\n --color-disabled-text: #989898;\n --color-danger: #c0392b;\n --color-danger-surface: #fdecea;\n --color-success: #3f8a1f;\n --color-warning: #e8a200;\n --color-notice: #e8f0f8;\n --color-notice-text: #111111;\n --color-focus: #e8770e;\n --color-shadow: #333333;\n --color-overlay: #d8e8f0;\n}\n\n/* @part type */\n:root {\n --font-body: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-heading: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-ui: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-mono: \"Andale Mono\", \"Courier New\", Courier, monospace;\n --text-base: 14px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 30px;\n --text-h1: 25px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 2px;\n --radius-page: 0;\n --shadow-panel: 1px 1px 0 var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to right, var(--color-page) 0, var(--color-page) 3px, color-mix(in srgb, var(--color-page), black 4%) 3px, color-mix(in srgb, var(--color-page), black 4%) 4px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 10%), var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 22%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 5%), var(--color-input) 4px);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }