{ "id": "v1-wl-5454", "long_id": "v1.weblogs-2000s.blog.s05.p04.t05.u04", "name": "Photoblog, 2005", "era": { "slug": "weblogs-2000s", "code": "wl", "name": "Weblogs", "years": [ 2002, 2007 ], "description": "Hand-built personal weblogs, 2002 to 2007: a fixed reading column with a link sidebar, small Verdana or Georgia text on white, dotted rules between entries, and one or two muted colours of the author's own." }, "archetype": "blog", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "A one-picture-a-day photoblog as kept between 2003 and 2007 by people who also kept a weblog: a white sheet on a dark pinstriped page, a black band with the brand (mark and site name) and a lowercase menu standing on its lower edge, and under it one large picture on a pale mat with a caption plate. Below the picture come a strip of the week's earlier pictures, pale blue label strips with small tracked words, and a notebook beside a narrow column of serif-titled link lists. Text is 11px Verdana with unbolded Georgia titles in blue and gold; corners are square, lines are 1px, and frames carry a flat 3px mat instead of a shadow.", "url": "https://chrono.skin/s/v1-wl-5454", "preview_url": "https://chrono.skin/s/v1-wl-5454/specimen.html", "files": { "STYLE.md": "# Photoblog, 2005\n\n## Summary\n\nA one-picture-a-day photoblog as kept between 2003 and 2007 by people who also kept a weblog: a white sheet on a dark pinstriped page, a black band with the brand (mark and site name) and a lowercase menu standing on its lower edge, and under it one large picture on a pale mat with a caption plate. Below the picture come a strip of the week's earlier pictures, pale blue label strips with small tracked words, and a notebook beside a narrow column of serif-titled link lists. Text is 11px Verdana with unbolded Georgia titles in blue and gold; corners are square, lines are 1px, and frames carry a flat 3px mat instead of a shadow.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (800px) wide, centred, `--color-canvas` on the pinstriped `--fill-page`, standing `--space-6` clear of the top of the window, outlined in `--color-border-strong` and matted by `--shadow-panel`. It never stretches.\n- Order from the top: `.ds-nav` (the `--fill-inverse` band, `--size-band` 64px at least, the brand at its left and the menu at its lower right), then the view, then `.ds-footer`, the same dark band again. There is no navigation bar under the band: the menu's current item is a tab in the colour of the label strip below it.\n- The home view is a stack of full-width bands, each opened by a `.ds-page__strip` (the `--fill-bar-alt` label strip): the `.ds-hero` with today's picture across the whole sheet, the `.ds-grid` contact strip of four earlier pictures (`.ds-grid--band` gives it the sheet's side padding), then `.ds-page__columns`: the notebook (`.ds-page__main`) on the left and `.ds-sidebar` at `--size-side` (220px) on the right, `--space-7` apart. The strip uses the same two columns as the body, so its second label sits over the sidebar.\n- Blocks inside a column are `.ds-page__section`, closed by a 1px `--color-border` rule in `--border-style` with `--space-6` above and below; `.ds-page__label` is the small gold serif caption over a block.\n- Inner pages keep the sheet, the band and the footer. The hero is not used. A `.ds-breadcrumb` strip sits directly under the band, across the sheet. A page about one thing (a picture, the about page) keeps the two columns: the main column opens with `.ds-page-header` (19px serif title, one 10px grey line, one button at the right, a 1px `--color-border-strong` rule), then the picture in its `.ds-photo` frame, the text, related links, the `.ds-comments` thread and the form last; the sidebar carries the picture's details, its neighbours and small related pictures. A page that is a collection (the archive) drops the sidebar and uses `.ds-page__wide`: page header, `.ds-stats`, `.ds-tabs` with the contact sheet in `.ds-tabs__body`, `.ds-pagination`, then the table. Tabs stand on their own rule below the page header, never in the band.\n- Views: the specimen is one photoblog with four views. `today` is the front page: the newest picture, the week's strip, three notebook entries and the sidebar. `picture` is one picture: the frame, how it was taken, related links, comments, the delete dialog, the notices that answer a posted comment and the comment form. `archive` is a month as a contact sheet under tabs, with the figures, pagination, the table of months and an empty album. `about` is the photographer panel, a short description and the contact form. The menu links to today, archive and about; pictures are reached from frames, titles and sidebar lists.\n- Spacing scale: `--space-1` 1px is the padding of pagination boxes and the tracking of small labels (doubled on the label strip); `--space-2` 3px is the vertical padding of buttons, inputs, strips and sidebar rows and the mat of a small picture; `--space-3` 6px is the padding of table cells, plates, tabs and the gap between buttons; `--space-4` 10px is the mat of a large picture and the padding of rows, notices and dialogs; `--space-5` 14px is the gap between paragraphs, between contact-sheet cells and the padding of panels and forms; `--space-6` 20px is the side padding of the sheet and the gap between blocks; `--space-7` 30px is the gap between the two columns and the foot of a view.\n- Fixed sizes: `--size-label` 96px is the label column of a form, `--size-field` 230px a text input, `--size-num` 76px a numeric table column, `--size-dialog` 360px a dialog, `--size-thumb` 52px the small picture at the head of a table row (twice that beside a notebook entry).\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- `--font-body` and `--font-ui` are Verdana, Geneva, sans-serif; `--font-heading` is Georgia, used unbolded (`--weight-heading` 400) for the site name, titles, sidebar titles and figures. `--font-mono` (Monaco, then Courier New) is only for code. All are system fonts; nothing was substituted.\n- `--text-base` 11px with `--line-body` 1.6 is running text. `--text-small` 10px is the sidebar, meta lines, tables, plates, strips, notices and the footer; `--text-ui` 11px is the menu, tabs, buttons and inputs, bold (`--weight-ui` 700) and lowercase (`--ui-transform`). `--text-large` 13px is the hero's lead line and the title under a small picture.\n- `--text-display` 24px is the site name and a stat figure, `--text-h1` 19px a page or picture title, `--text-h2` 15px a sub-heading, list title or sidebar title, `--text-h3` 11px bold Verdana a minor heading. Headings are never uppercased or tracked. Small labels (the strip, form labels, table heads, stat labels) are lowercase and tracked 1px or 2px, written `var(--space-1)` and `calc(var(--space-1) * 2)` because the type part has no token for the tracking of labels.\n- `--color-text` #444444 is body text, `--color-text-muted` #777777 dates, counts and captions, and the silhouette of every drawn picture. `--color-heading` #335588 is titles; `--color-heading-alt` #bb9955, the gold, is sidebar titles, block captions and h2 in running text.\n- `--color-link` #335588, not underlined (`--link-decoration: none`), underlined on hover in `--color-link-hover` #447799; visited #6699aa; active #cc0000. `--color-link-quiet` #666666 is meta and tool links. Footer links are underlined at rest because they sit on the dark band.\n- `--color-inverse` #000000 with `--color-inverse-text` #a8b8d0 is the band and the footer; the site name on the band is `--color-inverse-text`. `--color-bar` #224466 with white text is the plate under a picture, table heads, dialog titles and the current page number. `--color-bar-alt` #b8d0e0 with `--color-bar-alt-text` #305878 is the label strip and the current menu tab.\n- Surfaces: `--color-surface` white; `--color-surface-alt` #f0f0f0 is the mat of a picture, forms, alternate rows, the breadcrumb strip and the empty state; `--color-surface-strong` #e8f0f0 is panel titles and group rows.\n- Text on fills follows the era's layouts: body and heading colours on the canvas, surfaces and `--color-fill-*` tints; `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`; `--color-accent-text` only on `--fill-accent`; `--color-button-text` on the button fill.\n- `--color-fill-1` to `--color-fill-4` (#e8f0f0, #f0f0f0, #b8d0e0, #f8f8f8) are the skies of the drawn pictures; fill-1 is also the boxed sidebar block. `--color-accent` #bb9955 is the count badge and list bullets; `--color-accent-alt` #cc0000 is the \"new\" word.\n- Borders: `--color-border` #ccccdd for ordinary 1px lines, `--color-border-muted` #d8d8d8 for the mat ring, the 6px rule over a stat and the left edge of a comment or a quotation, `--color-border-strong` #446699 for the sheet's outline, the rule under a page header, the current tab's underscore and the left edge of a notice. `--border-width-strong` is 6px.\n- Status colours are used only as the text and 1px outline of status labels and of a destructive button: `--color-success` #538620, `--color-warning` #cc6600, `--color-danger` #cc0000.\n- Surface: every line is drawn in `--border-style` (solid here), so a dotted or grooved set changes all of them. `--shadow-panel` is a flat 3px ring of `--color-border-muted` with no blur, the mat around the sheet, frames, panels and forms; `--shadow-dialog` is the same at 6px. `--fill-page`, `--fill-bar`, `--fill-bar-alt` and `--fill-inverse` are vertical pinstripes two pixels wide; buttons, inputs and panels are flat. Focus is a 2px dotted outline. Hover, visited, active and focus colours were not measurable on static captures and are taken from the same palette.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type. Everything goes in `.ds-page__frame`. `.ds-page__columns` holds `.ds-page__main` and `.ds-sidebar`; `.ds-page__wide` is the body of a view without a sidebar; `.ds-page__section` is a block closed by a rule (`--last` drops it); `.ds-page__label` is its caption; `.ds-page__strip` is the label strip with one or two `` labels and optional `.ds-page__strip-link` links.\n- `.ds-view`: one screen of the example site. The specimen holds its views side by side in the markup and shows one at a time: the view named in the address, or the `.ds-view--home` view when none is named. In a real project each view is a page of its own; drop the class there.\n- `.ds-brand`: the site's mark and name, at the left of the dark band; a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, a 1px `--color-input-border` outline, `--radius-control`, `--shadow-control`), 1.2 times `--text-display` on a side and never less than twice `--text-base`; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at `--text-display` in `--color-inverse-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo; keep the classes and swap the text and the drawing.\n- `.ds-nav`: the header, written once above the views. `.ds-nav__band` holds the `.ds-brand` and `.ds-nav__menu`, a row of `.ds-nav__link` items. The current item is a tab filled with `--fill-bar-alt`: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href` (a single picture counts as today).\n- `.ds-breadcrumb`: pale 10px strip under the band: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`ยป`), ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the front page's opening, once: a `.ds-photo` frame across the sheet, then `.ds-hero__body` with `.ds-hero__text` (`.ds-hero__title` at 19px and one `.ds-hero__lead` line at 13px) on the left and `.ds-hero__actions` (one text link, one button) on the right. No tinted box, no large type.\n- `.ds-photo`: a picture in its frame: a `--color-surface-alt` mat with a 1px outline and the mat ring, holding a `.ds-photo__image` and a `.ds-photo__plate` (the `--fill-bar` caption bar: `.ds-photo__title` on the left, details and `.ds-photo__link` links on the right). `.ds-photo__image` is the picture area, 16 to 9 (`--wide` is 5 to 2 for the front page): a flat `--color-fill-3` tint (`--2`, `--3`, `--4` select the other fills) under an inline SVG silhouette painted in `--color-text-muted`. In a real project put the photograph there instead. `.ds-photo__caption` is a small grey line under a picture.\n- `.ds-page-header`: the head of an inner page, never together with the hero: `.ds-page-header__main` holds the `.ds-page-header__title` and one `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A 1px `--color-border-strong` rule closes it.\n- `.ds-stat`: one summary figure: a `.ds-stat__value` (24px Georgia, blue) over a `.ds-stat__label` (10px grey, lowercase, tracked), under a 6px `--color-border-muted` rule. Three to five sit side by side in `.ds-stats`, equal in width, `--space-5` apart. Do not box them.\n- `.ds-prose`: running text: h1, h2 (gold), h3 (bold Verdana), paragraphs, square-bulleted lists with gold markers, `code`, and `blockquote` in grey with a 6px left rule. `.ds-post__meta` is the small grey line under it.\n- `.ds-comment`: one comment, inside a `.ds-comments` list: a `.ds-comment__text` paragraph over a `.ds-comment__meta` line, with a 6px `--color-border-muted` left edge and a 1px rule below. `.ds-comment--author` marks the photographer's reply: the edge turns `--color-border-strong` and the row is tinted.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the grey meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: a small flat button, bold lowercase, `--fill-button` with a 1px `--color-input-border` outline. `.ds-button--secondary` is paler with a `--color-border` outline. `.ds-button--danger` is the destructive action: the secondary button lettered and outlined in `--color-danger`, never filled red. `disabled` or `is-disabled` greys it. Group with `.ds-buttons`.\n- `.ds-form`: a `--color-surface-alt` box with the mat ring: `.ds-form__title`, rows (`.ds-form__row`) of a small lowercase `.ds-form__label` and a `.ds-form__field`. Controls take `.ds-form__input` (`--wide` full width, `--auto` for selects); `is-invalid` plus `.ds-form__error` marks a validation error; `.ds-form__hint` is help text; `.ds-form__check` with `.ds-form__checkbox` for checkboxes; `.ds-form__actions` starts the buttons under the fields and keeps them on one row.\n- `.ds-table`: data table at 10px with open sides: a `--fill-bar` head row in bold lowercase, rows divided by 1px rules, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row, `.ds-table__thumb` for a cell holding a small picture.\n- `.ds-list`: the notebook: each `.ds-list__item` is a small framed picture (`.ds-list__thumb`) beside a `.ds-list__body` with a serif `.ds-list__title` link, a `.ds-list__excerpt` and a `.ds-list__meta` line; items are divided by 1px rules. `.ds-list__thumb` is also the small frame used alone in the sidebar.\n- `.ds-panel`: a 1px outlined box with the mat ring, a `--color-surface-strong` `.ds-panel__title` in serif and a `.ds-panel__body`. Use it sparingly.\n- `.ds-grid`: the contact sheet: four `.ds-grid__cell` links across, each a small white frame with the mat ring holding a `.ds-photo__image`, a serif `.ds-grid__title` and a grey `.ds-grid__text` line. The pictures' tints are the `--color-fill-*` tokens. `.ds-grid--band` adds the sheet's padding when the grid is a band of its own.\n- `.ds-tabs`: a row of `.ds-tabs__tab` words on a 1px rule; `is-current` is blue with a 3px `--color-border-strong` underscore (`calc(var(--border-width) * 3)`). Content goes in `.ds-tabs__body`.\n- `.ds-badge`: small square gold count. `.ds-badge--alt` is a bare red word (\"new\"); `.ds-badge--tag` is a grey outlined album tag. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: a white square label with a 1px outline and bold word, both in the status colour.\n- `.ds-sidebar`: the right column at 10px. Each `.ds-sidebar__block` has a gold serif `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows on faint rules, with `.ds-sidebar__link` and optional `.ds-sidebar__count`; `.ds-sidebar__list--two` sets a link list in two columns; `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button. `.ds-sidebar__block--box` tints and outlines one block.\n- `.ds-notice`: one-line message on `--color-notice` with a 6px `--color-border-strong` left edge, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and edge. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small 1px boxed `.ds-pagination__link` items. `is-current` is filled with `--fill-bar`; `is-disabled` is faded.\n- `.ds-dialog`: a box outlined in `--color-border-strong` with the 6px mat ring, a `--fill-bar` `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. It sits in the page flow on `.ds-dialog__backdrop` (`--color-overlay`). No blurred shadow, no dimmed overlay.\n- `.ds-empty`: a pale outlined box with a centred grey `.ds-empty__text` and one secondary button.\n- `.ds-footer`: the dark band closing the sheet: one `.ds-footer__row` with a copyright line left and `.ds-footer__links` of underlined `.ds-footer__link` items right.\n- `ds-avatar`: a small square with initials beside a commenter name.\n- `ds-progress`: a native progress bar for a meter such as weeks left or frames used.\n\n## Never\n\n- `block-gap <= 40px`: bands and blocks sit one rule or one strip apart.\n- `content-width <= 820px`: a fixed centred sheet; the page does not stretch with the window.\n- `font-size <= 24px`: the largest text measured is a 24px serif title.\n- `font-size >= 9px`: the smallest text measured is 9px; the pack itself stops at 10px.\n- `font-weight <= 700`: bold is the heaviest weight; titles are not bold at all.\n- `font-families <= 3`: Verdana, Georgia for titles and a monospace for code.\n- `line-height <= 1.7`: body line height is 1.45 to 1.6 in the references.\n- `line-height >= 1.4`: small text is never set solid.\n- `letter-spacing <= 2px`: only small labels are tracked.\n- `uppercase-text <= 6%`: labels are lowercase or small capitals in the references, never whole passages.\n- `border-radius <= 9px`: corners are eased by 3px to 8px, as the rounded templates of 2005 did with corner images; nothing is a capsule except a tag.\n- `box-shadow-blur <= 12px`: the sheet and panels cast one soft, short shadow; nothing floats high above the page.\n- `text-shadow = none`: text is flat, including on the banner.\n- `gradient-fills <= 0%`: the banner and every tint are one flat colour.\n- `border-width <= 4px`: lines are 1px, control bevels and stat rules 2px, the tab underscore 3px; 4px is the heaviest rule of the set.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: anything that shows a picture copies `.ds-photo` (a `--color-surface-alt` mat, 1px outline, `--shadow-panel`, a `--fill-bar` plate), a new boxed block copies `.ds-panel`, a new row type copies `.ds-list__item` (a small frame beside the text, a 1px rule below), a new band of the front page opens with a `.ds-page__strip`, a new marked row copies `.ds-comment` (a heavy left edge). Use only the tokens in `tokens.css` and the `--size-*` and `--space-*` tokens in `components.css`; if a size is missing, take the nearest step of the scale. Keep text at 10px to 24px, corners square, titles in unbolded serif, labels small and lowercase, and reach for a mat or a rule before a shadow.\n", "components.css": "/* Layout tokens (structure part). A photoblog, 2003 to 2006: a dark band with the menu in it,\n one large matted picture across the sheet, a strip of earlier pictures, then notes and a narrow column. */\n:root {\n --size-page: 800px;\n --size-side: 220px;\n --size-band: 64px;\n --size-label: 96px;\n --size-field: 230px;\n --size-dialog: 360px;\n --size-num: 76px;\n --size-thumb: 52px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 14px;\n --space-6: 20px;\n --space-7: 30px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-6) 0 var(--space-7);\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/* The sheet: a fixed centred card, matted like the pictures on it. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n/* Full-width body of a view that has no side column. */\n.ds-page__wide {\n padding: var(--space-6) var(--space-6) var(--space-7);\n}\n/* Notes on the left, the narrow column on the right. */\n.ds-page__columns {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-7);\n align-items: start;\n padding: var(--space-6) var(--space-6) var(--space-7);\n}\n.ds-page__main {\n min-width: 0;\n}\n.ds-page__section {\n margin: 0 0 var(--space-6);\n padding: 0 0 var(--space-6);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page__section--last {\n margin-bottom: 0;\n padding-bottom: 0;\n border-bottom: 0;\n}\n/* Caption above a group of components: a small serif title. */\n.ds-page__label {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n}\n/* Label strip across the sheet: small tracked words on the secondary bar, one over each column. */\n.ds-page__strip {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n column-gap: var(--space-7);\n margin: 0;\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n line-height: var(--line-body);\n letter-spacing: calc(var(--space-1) * 2);\n text-transform: var(--ui-transform);\n}\n.ds-page__strip-link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-page__strip-link:hover,\n.ds-page__strip-link.is-hover {\n text-decoration: var(--link-decoration-hover);\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/* ---------- links ---------- */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n 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.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/* ---------- nav: the dark band, the menu standing on its lower edge ---------- */\n.ds-nav {\n margin: 0;\n}\n.ds-nav__band {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n box-sizing: border-box;\n min-height: var(--size-band);\n padding: var(--space-5) var(--space-6) 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so every token set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: max(calc(var(--text-display) * 1.2), calc(var(--text-base) * 2));\n height: max(calc(var(--text-display) * 1.2), calc(var(--text-base) * 2));\n background: var(--fill-button);\n color: var(--color-button-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}\n.ds-brand__mark svg {\n display: block;\n width: 70%;\n height: 70%;\n}\n.ds-brand__name {\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-transform: var(--heading-transform);\n}\n.ds-nav__menu {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item: a tab in the colour of the strip it stands on. One selector per view; a single picture belongs to today. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#today:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#picture:target) .ds-nav__link[href=\"#today\"],\n.ds-page:has(#archive:target) .ds-nav__link[href=\"#archive\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-6);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link);\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__sep {\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- photo: a drawn picture on a mat, a plate under it ---------- */\n.ds-photo {\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface-alt);\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/* The picture itself: a flat tint with a silhouette drawn over it in the muted text colour. */\n.ds-photo__image {\n display: block;\n aspect-ratio: 16 / 9;\n overflow: hidden;\n background: var(--color-fill-3);\n color: var(--color-text-muted);\n}\n.ds-photo__image--2 {\n background: var(--color-fill-1);\n}\n.ds-photo__image--3 {\n background: var(--color-fill-2);\n}\n.ds-photo__image--4 {\n background: var(--color-fill-4);\n}\n.ds-photo__image--wide {\n aspect-ratio: 5 / 2;\n}\n.ds-photo__image svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-photo__plate {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n}\n.ds-photo__title {\n font-weight: var(--weight-bold);\n}\n.ds-photo__link {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-photo__link:hover,\n.ds-photo__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-photo__caption {\n margin: var(--space-3) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- hero: today's picture, its title and one action ---------- */\n.ds-hero {\n padding: var(--space-6);\n}\n.ds-hero__body {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n margin: var(--space-5) 0 0;\n}\n.ds-hero__text {\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-4);\n font-size: var(--text-small);\n}\n\n/* ---------- page header: the title line of an inner page ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-5);\n padding: 0 0 var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n.ds-page-header__main {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-page-header__text {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-page-header__action {\n flex: none;\n font-size: var(--text-small);\n}\n\n/* ---------- stats: figures in a row, each under a heavy rule ---------- */\n.ds-stats {\n display: flex;\n gap: var(--space-5);\n margin: 0 0 var(--space-6);\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n flex: 1;\n min-width: 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__value {\n display: block;\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 color: var(--color-heading);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n color: var(--color-text-muted);\n}\n\n/* ---------- prose ---------- */\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n color: var(--color-heading-alt);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n font-family: var(--font-body);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n color: var(--color-text);\n}\n.ds-prose p {\n margin: 0 0 var(--space-5);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose ul {\n list-style: square;\n}\n.ds-prose li::marker {\n color: var(--color-accent);\n}\n.ds-prose code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n color: var(--color-heading);\n}\n.ds-prose blockquote {\n margin: 0 0 var(--space-5);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-post__meta {\n margin: var(--space-4) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- comments: the thread under a picture ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-3) 0 var(--space-3) var(--space-4);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-comment:last-child {\n border-bottom: 0;\n}\n/* The photographer's own reply. */\n.ds-comment--author {\n border-left-color: var(--color-border-strong);\n background: var(--color-surface-alt);\n}\n.ds-comment__text {\n margin: 0 0 var(--space-2);\n}\n.ds-comment__meta {\n margin: 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- buttons: small flat buttons with a hairline ---------- */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-input-border);\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-ui);\n line-height: var(--line-heading);\n text-transform: var(--ui-transform);\n text-decoration: none;\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 box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\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 border-color: var(--color-border);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n text-shadow: none;\n}\n/* Destructive action: the same button, lettered and ruled in the error red. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n border-color: var(--color-danger);\n background: var(--fill-button-secondary);\n color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border-muted);\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 ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-5);\n background: var(--color-surface-alt);\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-form__title {\n margin: 0 0 var(--space-4);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-form__row {\n display: flex;\n align-items: flex-start;\n margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n flex: none;\n width: var(--size-label);\n padding-top: var(--space-2);\n font-size: var(--text-small);\n letter-spacing: var(--space-1);\n text-transform: var(--ui-transform);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n flex: 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-2) 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 box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\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 margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-danger);\n}\n.ds-form__hint {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n/* The buttons start under the fields; the indent gives way before a button wraps. */\n.ds-form__actions {\n display: flex;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n}\n.ds-form__actions::before {\n content: \"\";\n flex: 0 1 calc(var(--size-label) - var(--space-3));\n}\n.ds-form__actions > .ds-button {\n flex: none;\n}\n\n/* ---------- table: open sides, a bar head, ruled rows ---------- */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--text-small);\n}\n.ds-table th {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n letter-spacing: var(--space-1);\n text-align: left;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: middle;\n}\n.ds-table tr.is-alt td,\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n width: var(--size-num);\n text-align: right;\n}\n.ds-table__group td {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n/* A small picture at the head of a row. */\n.ds-table__thumb {\n width: var(--size-thumb);\n}\n.ds-table__thumb .ds-photo__image {\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* ---------- list: notebook entries, the date set beside each ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: calc(var(--size-thumb) * 2) minmax(0, 1fr);\n column-gap: var(--space-5);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n/* The small picture a note belongs to. */\n.ds-list__thumb {\n display: block;\n padding: var(--space-2);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n align-self: start;\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-link);\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__excerpt {\n margin: var(--space-2) 0 0;\n}\n.ds-list__meta {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 0 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 color: var(--color-heading);\n}\n.ds-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- grid: the contact sheet, four small matted pictures across ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid--band {\n padding: var(--space-6);\n}\n.ds-grid__cell {\n display: block;\n padding: var(--space-3);\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 font-size: var(--text-small);\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-grid__title {\n display: block;\n margin: var(--space-3) 0 0;\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 color: var(--color-link);\n}\n.ds-grid__text {\n display: block;\n margin: 0;\n}\n\n/* ---------- tabs: words on a rule, the current one on a heavy underscore ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) 0;\n border-bottom: calc(var(--border-width) * 3) 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 text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-border-strong);\n color: var(--color-heading);\n}\n.ds-tabs__body {\n padding: var(--space-5) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\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: var(--line-heading);\n vertical-align: baseline;\n}\n/* Text-only marker, the \"new\" word after a title. */\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n/* An album tag: outlined, quiet. */\n.ds-badge--tag {\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n/* Status labels: the tag's outline, drawn and lettered in the status colour. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) currentColor;\n}\n.ds-badge--success {\n color: var(--color-success);\n}\n.ds-badge--warning {\n color: var(--color-warning);\n}\n.ds-badge--danger {\n color: var(--color-danger);\n}\n\n/* ---------- sidebar: the narrow right column ---------- */\n.ds-sidebar {\n min-width: 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: 0 0 var(--space-6);\n}\n.ds-sidebar__block:last-child {\n margin-bottom: 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__list--two {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n column-gap: var(--space-4);\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__list--two .ds-sidebar__item,\n.ds-sidebar__item:last-child {\n border-bottom: 0;\n}\n.ds-sidebar__link {\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:visited,\n.ds-sidebar__link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-sidebar__count {\n color: var(--color-text-muted);\n}\n.ds-sidebar__text {\n margin: 0;\n}\n.ds-sidebar__search {\n display: flex;\n gap: var(--space-2);\n}\n/* A tinted box for the one block that must stand out. */\n.ds-sidebar__block--box {\n padding: var(--space-4);\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-sidebar__block--box .ds-sidebar__title {\n color: var(--color-heading);\n}\n\n/* ---------- notice ---------- */\n.ds-notices {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border-left: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n color: var(--color-notice-text);\n font-size: var(--text-small);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-left-color: var(--color-danger);\n color: var(--color-danger);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n color: var(--color-link);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-bar);\n border-color: var(--color-bar);\n color: var(--color-bar-text);\n font-weight: var(--weight-bold);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n}\n\n/* ---------- dialog: a matted box with a title bar, in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n max-width: 100%;\n margin: 0 auto;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--fill-bar);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n color: var(--color-bar-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-4);\n font-size: var(--text-small);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-4);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty ---------- */\n.ds-empty {\n padding: var(--space-6);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n color: var(--color-text-muted);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- footer: the dark band again ---------- */\n.ds-footer {\n padding: var(--space-5) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\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.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* Period components: small picture beside a name, a list that opens, a hint, a meter. Tokens only. */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--space-4) * 2);\n height: calc(var(--space-4) * 2);\n margin-right: var(--space-2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\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: 1;\n vertical-align: middle;\n}\n.ds-progress {\n display: block;\n width: 100%;\n height: var(--space-3);\n margin-top: var(--space-1);\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\n}\n.ds-progress::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress::-webkit-progress-value {\n background: var(--fill-bar);\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, photoblog specimen\n\n\n\n\n
\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n\n \n
\n

Picture 412, Saturday 14 May 2005« Yesterday

\n\n
\n
\n \n
\n Low tide at the slipway\n 6:10 am, 50mm, one frame · 7 comments\n
\n
\n
\n
\n

One picture a day from a small harbour town

\n

Taken on the walk to work, posted the same evening, never cropped.

\n
\n
\n or browse the archive »\n See today's picture\n
\n
\n
\n\n

Earlier this weekAll of May »

\n
\n \n \n Chimneys, Quay Street\n Fri 13 May · 4 comments\n \n \n \n The coal pier, slack water\n Thu 12 May · 11 comments\n \n \n \n Fence into fog\n Wed 11 May · 9 comments\n \n \n \n Borrowed bicycle\n Tue 10 May · 2 comments\n \n
\n\n

From the notebookAround the site

\n
\n
\n
    \n
  • \n \n
    \n Why the lighthouse is always crooked new\n

    I stand on the same sloping rock every time. The tower is straight; the photographer is not.

    \n

    12 May 2005 · filed in Harbour · 14 comments

    \n
    \n
    • \n
  • \n \n
    \n Three mornings of fog and what I learned\n

    Expose for the nearest post and let the rest go. The meter is wrong and so, at first, was I.

    \n

    9 May 2005 · filed in Weather · 6 comments

    \n
    \n
    • \n
  • \n \n
    \n A roll I thought was lost\n

    Found in a coat pocket in April, shot the August before. Thirty-six frames of one hillside.

    \n

    2 May 2005 · filed in Film · 21 comments

    \n
    \n
    • \n
\n
\n\n \n
\n
\n\n \n
\n
    \n
  1. Today
    2. \n
  2. »
    3. \n
  3. May 2005
    4. \n
  4. »
    5. \n
  5. Low tide at the slipway
    6. \n
\n
\n
\n\n
\n
\n

Picture 412

\n

Saturday 14 May 2005, in the album Harbour. Seven comments so far.

\n
\n
All of May
\n
\n\n
\n
\n \n
\n Low tide at the slipway\n « Chimneys · newest »\n
\n
\n
\n\n
\n
\n

Low tide at the slipway

\n

The harbour empties twice a day and nobody watches. At ten past six the ramp runs straight into mud and the one boat left out sits on its keel, leaning like a tired dog. I took a single frame because the bus was coming.

\n

If the tide is out, the picture is of the ground. If it is in, the picture is of the sky.

\n

How it was taken

\n

Standing on the third step, camera level with the rail, with the same lens as yesterday's chimneys.

\n
    \n
  • Fixed 50mm lens, wide open.
    • \n
  • Metered off the wet concrete, not the sky.
    • \n
  • No tripod; the rail did the work.
    • \n
\n

About the file names

\n

Every picture is stored by date and place, so this one is 2005-05-14-slipway.jpg and the full size is one click away.

\n
\n

Posted at 7:48 pm in Harbour · Permanent link

\n
\n\n
\n

More like this

\n \n
\n\n
\n

Three of seven comments

\n
    \n
  1. \n

    That boat has not moved since I was at school. Glad somebody finally took its portrait.

    \n

    HDHalvar Dunn · 14 May 2005, 8:15 pm

    \n
    2. \n
  2. \n

    It moved once, in the storm of 2002, about a metre to the left.

    \n

    EREdda Rask · 14 May 2005, 8:40 pm

    \n
    3. \n
  3. \n

    Is the full size good enough for a print at postcard size? Asking for my mother.

    \n

    SVSigne Varga · 14 May 2005, 9:02 pm · edit · delete

    \n
    4. \n
\n
\n\n
\n
\n
\n

Delete your comment?

\n
\n

The comment you posted at 9:02 pm will be removed from this picture. This cannot be undone.

\n
\n \n Cancel\n
\n
\n
\n
\n
\n\n
\n
\n

Thank you. Your last comment is waiting for approval and will appear shortly.

\n

Not posted. One field below needs another look.

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

Leave a comment

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

That does not look like an e-mail address.

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

Plain text. Line breaks are kept; addresses become links.

\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
  1. Today
    2. \n
  2. »
    3. \n
  3. Archive
    4. \n
  4. »
    5. \n
  5. May 2005
    6. \n
\n
\n\n
\n
\n

Archive, May 2005

\n

Every picture of the month as a contact sheet, newest first.

\n
\n
Today's picture
\n
\n\n
    \n
  • 412 pictures
    • \n
  • 14 months
    • \n
  • 5 albums
    • \n
  • 1,930 comments
    • \n
\n\n
\n \n
\n
\n \n \n Low tide at the slipway\n Sat 14 May · 7 comments\n \n \n \n Chimneys, Quay Street\n Fri 13 May · 4 comments\n \n \n \n The coal pier, slack water\n Thu 12 May · 11 comments\n \n \n \n Fence into fog\n Wed 11 May · 9 comments\n \n \n \n Borrowed bicycle\n Tue 10 May · 2 comments\n \n \n \n The crooked lighthouse\n Mon 9 May · 14 comments\n \n \n \n Hillside, frame nine\n Sun 8 May · 5 comments\n \n \n \n Pier in the rain\n Sat 7 May · 3 comments\n \n
\n
\n
\n\n
\n \n
\n\n
\n

Month by month

\n \n \n \n \n \n \n \n \n \n \n \n
MonthMost discussedCommentsPictures
May 2005The crooked lighthouseopen14
April 2005A roll I thought was lostclosing30
March 2005First fog of the springclosed31
February 2005Snow on the fish marketclosed28
January 2005The pier at four o'clockclosed31
\n
\n\n
\n

Newest album: Night

\n
\n

No pictures are filed in “Night” yet. The first one is waiting for a clear evening.

\n Back to today\n
\n
\n\n
\n
\n\n \n
\n
    \n
  1. Today
    2. \n
  2. »
    3. \n
  3. About and contact
    4. \n
\n
\n
\n\n
\n
\n

About and contact

\n

Who takes these, with what, and how to ask for a print.

\n
\n
Today's picture
\n
\n\n
\n
\n

The photographer

\n
\n

Edda Rask works at the ferry office and walks there along the harbour wall. 14 pictures so far this month, mostly in harbour weather. Comments on a picture are open for thirty days, closing in the last week and closed after that.

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

What this is

\n

chronoskin began in March 2004 as a way to finish a roll of film. It is now fourteen months of mornings, one frame each, with a notebook entry when a picture needs explaining.

\n

What it is not

\n

A portfolio, a shop or a place for camera arguments. Prints are sent for the cost of the post, and nobody is paid.

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

Write to me

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

Replies take about a week; prints a little longer.

\n
\n
\n
\n \n Cancel\n
\n
\n
\n\n
\n\n \n
\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s05.p04.t05.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"weblogs-2000s\",\n \"years\": [\n 2002,\n 2007\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-wl-5454\",\n \"short\": \"v1-wl-5454\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #fcdecc;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f7f7f7;\n --color-surface-strong: #f0f0f0;\n --color-bar: #ab3c00;\n --color-bar-text: #ffffff;\n --color-bar-alt: #8d8d8d;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #424142;\n --color-inverse-text: #d2d2d2;\n --color-text: #000000;\n --color-text-muted: #717171;\n --color-heading: #000000;\n --color-heading-alt: #f15a00;\n --color-link: #330099;\n --color-link-quiet: #666666;\n --color-link-visited: #0000a5;\n --color-link-hover: #f15a00;\n --color-link-active: #a51410;\n --color-border: #d2d2d2;\n --color-border-strong: #ab3c00;\n --color-border-muted: #e8e8e8;\n --color-accent: #f15a00;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f15a00;\n --color-fill-1: #fff8f0;\n --color-fill-2: #f7f7f7;\n --color-fill-3: #ffe0d0;\n --color-fill-4: #fffff8;\n --color-button: #f0f0f0;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #f7f7f7;\n --color-button-secondary-text: #424142;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #8d8d8d;\n --color-disabled: #f0f0f0;\n --color-disabled-text: #909090;\n --color-danger: #a51410;\n --color-danger-surface: #fff8f0;\n --color-success: #538620;\n --color-warning: #ab3c00;\n --color-notice: #fffff8;\n --color-notice-text: #000000;\n --color-focus: #330099;\n --color-shadow: #8d8d8d;\n --color-overlay: #f0f0f0;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", serif;\n --font-ui: Verdana, Geneva, sans-serif;\n --font-mono: Monaco, \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 24px;\n --text-h1: 19px;\n --text-h2: 15px;\n --text-h3: 11px;\n --line-body: 1.6;\n --line-heading: 1.3;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: lowercase;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 4px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 5px;\n --radius-pill: 9px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 4px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: 0 3px 12px var(--color-shadow);\n --shadow-text: none;\n --fill-page: linear-gradient(to bottom, color-mix(in srgb, var(--color-page), black 14%), var(--color-page) 240px) no-repeat var(--color-page);\n --fill-bar: 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-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }