{ "id": "v1-wl-5444", "long_id": "v1.weblogs-2000s.blog.s05.p04.t04.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-5444", "preview_url": "https://chrono.skin/s/v1-wl-5444/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-heading` are \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial; `--font-ui` is Verdana, used for the menu, tabs, buttons, inputs and the month on a date leaf; `--font-mono` (Courier New) is only for code. All are system fonts, so nothing was substituted.\n- `--text-base` 13px with `--line-body` 1.35 is entry text; `--text-small` 11px is the whole left column, meta lines, tables, notices, breadcrumb and footer; `--text-ui` 11px is the menu, tabs, buttons and inputs. `--text-large` equals the base size: the lead line of the hero is not enlarged.\n- Headings are small bold tracked capitals, barely larger than the text: `--text-h1` 14px for entry titles, the hero and page-header titles and stats figures, `--text-h2` 13px for sub-headings, grid and form titles, `--text-h3` 12px for sidebar titles and block labels, all `--weight-heading` 700 with `--heading-transform` uppercase and `--heading-tracking` 1px. `--text-display` 28px bold, tracked 2px, is the site name in the banner and the only large text on the page.\n- `--color-text` and `--color-heading` are #000000; `--color-heading-alt` #f15a00, a strong orange, is sub-headings, sidebar titles, block labels and code; `--color-text-muted` #717171 is dates, counts and meta lines.\n- `--color-link` #330099, a dark purple. Links are not underlined (`--link-decoration` none) and gain an underline on hover, where they turn `--color-link-hover` #f15a00; visited links are `--color-link-visited` #0000a5, active #a51410, and `--color-link-quiet` #666666 is for category, permalink and tool links. Footer links are underlined at rest because they sit on the dark strip.\n- `--color-bar` #ab3c00, a flat dark rust (the references set white on a paler terracotta, #de9468, which is too weak a contrast for small white text, so the bar takes their darker rust), with white `--color-bar-text` fills the banner, the current menu item and dialog titles (`--fill-bar` is the plain colour, no gradient). `--color-bar-alt` #8d8d8d with white text is only the month strip of a date leaf. `--color-inverse` #424142 with #d2d2d2 text is the footer.\n- `--color-page` #fcdecc is the peach page; the sheet and every surface are white; `--color-surface-alt` #f7f7f7 is the calendar, the breadcrumb, the form, the day half of a date leaf and alternate table rows; `--color-surface-strong` #f0f0f0 is table heads, panel titles and the current page number.\n- Borders: `--color-border` #d2d2d2 for every ordinary 1px line, around boxes, under titles and between entries, all in `--border-style`; `--color-border-muted` #e8e8e8 between linklog rows and under block labels; `--color-border-strong` #ab3c00, the rust of the banner, for the rule under a page header, the 2px rule over each stat, the underscore of the current tab and the outline of notices. `--border-width-strong` (4px) is not used by this layout; it is the heavy rule other layouts of the era draw on top of a sheet or beside a notice.\n- `--color-fill-1` #fff8f0, `--color-fill-2` #f7f7f7, `--color-fill-3` #ffe0d0 and `--color-fill-4` #fffff8 are the flat tints of grid cells; fill-1 is also the hero. `--color-accent` #f15a00 with white text is the count badge, today in the calendar and list bullets.\n- Status colours: `--color-danger` #a51410 and `--color-warning` #ab3c00 are measured reds and rusts of the references; `--color-success` #538620 is the green of the era's first set, because the peach references show no green. They are used only as the text and 1px outline of status labels and as the lettering of a destructive button, never as a fill.\n- Buttons and inputs look like the operating system's: buttons are `--color-button` #f0f0f0 with a 2px `outset` border of the same colour and black text; inputs are white with a 2px `inset` `--color-input-border` border. The 2px is `calc(var(--border-width) * 2)`, the 3px tab underscore `calc(var(--border-width) * 3)`; `outset` and `inset` are written as keywords in `components.css` because `--border-style` holds only `solid`. The brand tile is sized by `calc()` over `--text-display`, as the vocabulary has no token for it.\n- Hover, visited, active and focus colours were not measurable on static captures; they are taken from other measured colours of the same palette. Focus is a 1px dotted `--color-focus` outline.\n- Surface: corners are eased, not round: `--radius-control` 3px on buttons, inputs and the calendar, `--radius-panel` 5px on panels, the form and the dialog, `--radius-page` 8px on the sheet, the banner and grid cells, `--radius-pill` 9px on tags, as the rounded templates of 2005 did with corner images. The sheet, panels and grid cells cast `--shadow-panel` (1px down, 4px soft), the dialog `--shadow-dialog`. `--fill-page` darkens the top 240px of the page a little; every other fill is flat.\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 <= 28px`: the site name in the banner is the largest text; titles are 14px.\n- `font-size >= 10px`: the smallest text measured is 10px; the pack itself stops at 11px.\n- `font-weight <= 700`: bold is the heaviest weight in use.\n- `font-families <= 3`: Trebuchet MS, Verdana for controls and a monospace for code.\n- `line-height <= 1.6`: text is set close, at 1.35.\n- `line-height >= 1.2`: but never solid.\n- `letter-spacing <= 2px`: headings are tracked 1px, the site name 2px.\n- `uppercase-text <= 12%`: capitals are for headings, block labels and the site name, never for running text.\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.t04.u04\",\n \"library\": \"2026.10.09-1346\",\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-5444\",\n \"short\": \"v1-wl-5444\"\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: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", Trebuchet, Verdana, Geneva, Arial, sans-serif;\n --font-ui: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 28px;\n --text-h1: 14px;\n --text-h2: 13px;\n --text-h3: 12px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 1px;\n --display-tracking: 2px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 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" } }