{ "id": "v1-wl-4222", "long_id": "v1.weblogs-2000s.blog.s04.p02.t02.u02", "name": "Date-gutter journal with a left column, 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-author journal as published between 2002 and 2007 with the publishing tools of the day: a white sheet standing clear of a tinted page, a flat banner drawn across its top with the site name in the middle, and under it a narrow left column that carries the menu, a month calendar and the link lists. The entries run down the wider right column, each hung on a small calendar leaf in a date gutter, and between them a linklog of one-line items keeps the same gutter for its dates. This token set makes it a peach and rust page in 13px Trebuchet with small tracked capitals for every heading, purple links without underlines, corners eased by a few pixels and one soft shadow under the sheet.", "url": "https://chrono.skin/s/v1-wl-4222", "preview_url": "https://chrono.skin/s/v1-wl-4222/specimen.html", "files": { "STYLE.md": "# Date-gutter journal with a left column, 2005\n\n## Summary\n\nA one-author journal as published between 2002 and 2007 with the publishing tools of the day: a white sheet standing clear of a tinted page, a flat banner drawn across its top with the site name in the middle, and under it a narrow left column that carries the menu, a month calendar and the link lists. The entries run down the wider right column, each hung on a small calendar leaf in a date gutter, and between them a linklog of one-line items keeps the same gutter for its dates. This token set makes it a peach and rust page in 13px Trebuchet with small tracked capitals for every heading, purple links without underlines, corners eased by a few pixels and one soft shadow under the sheet.\n\n## Layout\n\n- The page is fixed, not fluid: `.ds-page__frame` is `--size-page` (780px) wide and always centred, in `--color-canvas` on `--fill-page`, outlined on all four sides with a 1px `--color-border` line, with `--space-4` (10px) of padding inside the outline and `--space-6` of page showing above it. No text is ever placed on the page outside the sheet. Never widen the sheet, never let it stretch and never move it to one side.\n- `.ds-page__columns` holds the header and the page in a floated layout, as the period built it, `--size-side` (170px) for the left column and the rest (about 540px) for the right, `--space-6` apart. From the top: `.ds-nav__banner` across the sheet; then `.ds-nav__menu` floats at the head of the left column and `.ds-sidebar` floats under it (`clear: left`), while `.ds-page__main` keeps clear of both by its left margin and runs down the right. `.ds-nav` itself has no box (`display: contents`): it only groups the banner and the menu. The `.ds-footer` clears the floats and closes the sheet.\n- The banner is `--size-banner` (116px) high, filled with `--fill-bar`, with the `.ds-brand` and a one-line tagline centred in it. There is no horizontal navigation bar anywhere: the site navigation is the vertical `.ds-nav__menu` at the head of the left column, six to eight words one under the other between hairlines, the current one filled with `--fill-bar`.\n- The left column is always on the left and always narrow. Under the menu it carries, in this order when present: the `.ds-calendar`, the search box, category and archive lists, the list of other sites, a short colophon. Blocks are `--space-6` apart and have no boxes, only a title on a hairline.\n- `.ds-page__main` is ruled off from the left column by a 1px `--color-border` line with `--space-6` of padding inside it. It is a single stack. An entry (`.ds-post`) is a grid of the date gutter (`--size-gutter`, 46px) and the text, `--space-5` apart; the linklog (`.ds-list`) uses the same gutter for its dates, so leaves, dates and text line up down the page. Other blocks (`.ds-page__section`) take the full width of the column. Entries and blocks are closed by a 1px rule with `--space-6` above and below it; `.ds-page__label` is the small heading on a hairline above a block.\n- Inner pages (a single entry, a field list or archive, the about page, a listing or settings page of an application) keep the sheet, the left column with the menu, and the footer. The banner shrinks to one line, `.ds-nav__banner--slim` (`--size-banner-slim`, 44px), with the brand at the left and the tagline small at the right. The hero is not used: the right column opens with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one muted line, one button at the right, a 1px `--color-border-strong` rule below). Under it, in this order when present: the `.ds-stats` row, `.ds-tabs` with the table or list in `.ds-tabs__body`, `.ds-pagination`, and last the form. On an entry page the order is the entry on its date leaf, related links, the `.ds-comments` thread, and the comment form last. Tabs never go in the banner or the menu. The left column keeps the menu and swaps its blocks for lists that belong to the page. In the specimen the banner turns slim by a selector on every view but the home view; a real inner page puts `.ds-nav__banner--slim` on its banner.\n- Views: the specimen is one small journal with four views. `journal` is the front page: the pinned note, the newest entry on its date leaf, the linklog, the grid of field lists, and the left column with the calendar. `entry` is one entry with its comments: related links, the thread, the dialog that deletes your own comment, the notices that answer a posted comment, and the comment form. `lists` is one field list: figures, tabs over the table of months, pagination, and an empty list. `about` is the panel on the keeper, a short description and a form for notes. The menu links to all four; entries are also reached from titles, comment counts, the calendar and the left column.\n- Spacing scale: `--space-1` 1px is the vertical padding of buttons, inputs and sidebar rows; `--space-2` 3px is the padding of menu rows, table cells, tabs and badges, and the gap between a title and its hairline; `--space-3` 6px is the padding of linklog rows, the gap between buttons and the gap under a sidebar title; `--space-4` 10px is the padding of the sheet, panels, notices, the form and the hero, and the grid gap; `--space-5` 15px is the gap between paragraphs, between the gutter and the text, and between tabs; `--space-6` 20px is the gap between columns, between sidebar blocks and around the rules between blocks; `--space-7` 30px is list indent and the bottom of the page.\n- Fixed sizes: `--size-label` 100px is the label column of a form, `--size-field` 220px a text input, `--size-num` 70px a numeric table column, `--size-dialog` 340px a dialog.\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- `--color-page` #ddddbb is the khaki page; the sheet (`--color-canvas`, `--color-surface`) is cream #eeeedd, with `--color-surface-alt` #e8e8d0 for alternate rows, the empty state and the small labels, and `--color-surface-strong` #ddddbb for panel and form title strips and idle tabs.\n- `--color-bar` #777744 (olive) with `--color-bar-text` #ffffee is the day strip, the table head, the current tab and the dialog title, and the dialog's 2px frame; `--color-bar-alt` #bbcc99 (pale sage) with `--color-bar-alt-text` #182d04 is the utility strip on top of the sheet; `--color-inverse` #182d04 with #ccccaa text is the footer.\n- `--color-text` #777744 is body text, `--color-text-muted` #808050 meta lines, `--color-heading` #182d04 titles, side-column titles and the current navigation word, `--color-heading-alt` #99aa77 sub-headings and code.\n- `--color-link` #006d00, hover #182d04, visited and quiet #99aa77, active #cc6600.\n- Lines are `--color-border` #ccccaa, `--color-border-strong` #99aa77 (hero outline, notices, the 2px rules) and `--color-border-muted` #ddddbb. Block fills are #d0e0a8, #ddddbb, #cccc99 and #ffffee; fill-1 is also the hero band and the boxed side-column block. Buttons are sage #bbcc99 and khaki #ddddbb.\n- Status: `--color-success` #006d00, `--color-warning` #cc6600, `--color-danger` #cc0000, used only as the text and 1px outline of status labels on `--color-surface` and as the lettering of a destructive button; `--color-accent` is the olive #777744 with #ffffee text (count badge, current page number, list bullets).\n- `--font-body` and `--font-ui` are Verdana, Arial, sans-serif at `--text-base` 11px with `--line-body` 1.7; `--text-small` 10px is meta, both side columns and tables, `--text-ui` 11px buttons and navigation, `--text-large` 12px the hero lead and the figures of the stats line.\n- `--font-heading` is Tahoma, \"Trebuchet MS\", \"Lucida Grande\", Verdana, set regular (`--weight-heading` and `--weight-display` 400): `--text-display` and `--text-h1` 22px for the site name, entry titles and page titles, `--text-h2` 16px for sub-headings and the hero title, `--text-h3` 12px. Large light titles over very small text are the look.\n- `--weight-bold` 700 is kept for labels, strips, list titles and emphasis. Nothing is uppercased or tracked (`--ui-transform` none, `--heading-tracking` 0).\n- Links carry no underline (`--link-decoration` and `--link-decoration-quiet` none) and gain one on hover; the three footer links are the only ones underlined at rest, because they share the colour of the footer text.\n- Every box outline and rule is a `--border-width` 1px `--border-style` dotted line; 2px rules are `calc(var(--border-width) * 2)`. `--border-width-strong` is not used by this layout. The short strokes between navigation words, stats and footer links, the tab line and the dialog frame are written `solid`, and control bevels `outset` and `inset`, because `--border-style` holds one style only.\n- Bars, buttons and panels are flat: `--fill-bar`, `--fill-bar-alt`, `--fill-button` and `--fill-panel` are their plain palette colour. `--fill-page` lays a fine dot screen (one dot in a 3px tile) over `--color-page`, so the flat sheet stands out from it. All radii are 0 and all shadows `none`; `--focus-ring` is a 1px dashed outline; `--transition` is none.\n\n## Components\n\n- `.ds-page` on ``: page colour and base type. Everything goes in `.ds-page__frame`; `.ds-page__columns` holds `.ds-nav`, then `.ds-sidebar` and `.ds-page__main` (the breadcrumb is the first thing in the main column of an inner page). `.ds-page__section` is a block of the main column closed by a 1px rule (`--last` drops the rule); `.ds-page__label` is its small heading.\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, centred in the banner (at the left of the slim banner on inner pages); a link to the home page. `.ds-brand__mark` is a small square tile dressed like the primary button of this layout (`--fill-button` over `--color-button`, the 2px `outset` border in the button colour, `--color-button-text` for the drawing, `--radius-control`, `--shadow-control`), 1.2 times `--text-display` on a side and never less than twice `--text-base` (written with `max()` over the two tokens, so a set with a small display size still gets a legible mark), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`. `.ds-brand__name` is the name in `--font-heading` at `--text-display` with `--weight-display`, `--display-tracking` and `--heading-transform`, in `--color-bar-text` because it sits on the banner. In the slim banner both drop to `--text-h1`. 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 site header and navigation, a group without a box of its own, written once above the views. `.ds-nav__banner` is the drawn banner with the `.ds-brand` and a `.ds-nav__tagline` (`--slim` for inner pages); `.ds-nav__menu` is the vertical list of `.ds-nav__link` rows at the head of the left column, bold 11px between hairlines. The current item is filled with `--fill-bar` and lettered in `--color-bar-text`: `is-current` on a real page, and in the specimen one selector per view that picks the link by its `href`. Hover tints the row with `--color-surface-alt`.\n- `.ds-breadcrumb`: an 11px boxed strip in `--color-surface-alt` at the head of the right column of an inner page: `.ds-breadcrumb__link` items, `.ds-breadcrumb__sep` (`ยป`), ending in `.ds-breadcrumb__current`.\n- `.ds-hero`: the journal's introduction, once, at the top of the main column: a `--color-fill-1` box with a 1px outline and centred text: `.ds-hero__title` (`--text-h1`), `.ds-hero__lead` and `.ds-hero__actions` with one button and one text link. It is a note, not a banner: no large type, no full-width band.\n- `.ds-page-header`: the head of an inner page, used instead of the hero and never together with it: `.ds-page-header__main` holds the `.ds-page-header__title` and one `.ds-page-header__text` line (11px, muted); `.ds-page-header__action` at the right holds one button, aligned to the bottom of the text. A 1px `--color-border-strong` rule closes it. No box, no tint.\n- `.ds-stat`: one summary figure: a `.ds-stat__value` (`--text-h1`, bold) over a `.ds-stat__label` (11px, muted, lowercase), under a 2px `--color-border-strong` rule of its own. Three to five of them sit in a `.ds-stats` row, equal in width and `--space-4` apart. Do not box the figures and do not enlarge the numbers.\n- `.ds-post`: one entry: the `.ds-post__date` leaf in the gutter (a `.ds-post__month` strip in `--fill-bar-alt` over a `.ds-post__day` number on `--color-surface-alt`, 1px outline), and `.ds-post__body` with a `.ds-prose` text and a `.ds-post__meta` line (time, category, comment count, permalink separated by `|`).\n- `.ds-comment`: one comment in the thread under an entry, inside a `.ds-comments` list: a `.ds-comment__text` paragraph over a small `.ds-comment__meta` line (name, time, and the edit and delete links on your own). `.ds-comment--author` marks a reply by the site's writer: a `--color-surface-alt` tint. Comments are divided by 1px `--color-border-muted` rules.\n- `.ds-prose`: running text: h1, h2, h3, paragraphs, square-bulleted lists with `--color-accent` markers, `code`, `blockquote` with a 1px left rule. Use it for entry bodies and panel bodies.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is the quiet meta link; `.ds-link--strong` is bold. `.ds-links` lays links out in a wrapping row.\n- `.ds-button`: bevelled push button in `--color-button` with a 2px `outset` border, bold, for the main action. `.ds-button--secondary` is lighter with normal weight. `.ds-button--danger` is the destructive action (delete, discard): the same bevelled button with its bold label in `--color-danger`; the button itself is never filled with the danger colour. `disabled` or `is-disabled` greys it; `is-active` flips the bevel. Hover does not change the fill. Group with `.ds-buttons`.\n- `.ds-form`: the comment form: a `--color-surface-alt` box with a 1px outline with `.ds-form__title`, rows (`.ds-form__row`) of a bold `.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` aligns buttons with the fields.\n- `.ds-table`: data table (archives, field lists, statistics) at 11px: a `--color-surface-strong` head row with bold `--color-heading` text and a 1px `--color-border-strong` rule under it, no outer outline, rows divided by 1px `--color-border` lines, `.ds-table__row--alt` for alternate rows, `.ds-table__num` for right-aligned numeric columns, `.ds-table__group` for a group row.\n- `.ds-list`: the linklog, a list of short dated items. Each `.ds-list__item` has its date in `.ds-list__time` (11px, muted, centred in the gutter) and a `.ds-list__body` with one `.ds-list__excerpt` paragraph that opens with the bold `.ds-list__title` link and continues with a sentence of remark, and a `.ds-list__meta` line. Rows are divided by 1px `--color-border-muted` lines. Use it for any list of items that have a date or a short key; put the key in the gutter.\n- `.ds-panel`: 1px bordered box with a `--color-surface-strong` `.ds-panel__title` strip and a `.ds-panel__body`. Use it sparingly, for an author note or a boxed aside; most content is not boxed.\n- `.ds-grid`: two-column grid of `.ds-grid__cell` boxes with flat tints (`--2`, `--3`, `--4` select the other fills), each with `.ds-grid__title` and `.ds-grid__text`. For section indexes and link boxes.\n- `.ds-tabs`: a row of words standing on a 1px rule, `--space-5` apart; each `.ds-tabs__tab` is a link, and `is-current` is bold in `--color-heading` with a 3px `--color-border-strong` underscore that replaces the rule beneath it. The content goes in `.ds-tabs__body`. No boxes, no fills.\n- `.ds-badge`: small square count on `--fill-accent`. `.ds-badge--alt` is a bare coloured word (\"new\", \"updated\"); `.ds-badge--tag` is an outlined category tag. Status labels are `.ds-badge--success` (open, paid, online), `.ds-badge--warning` (pending, closing, due soon) and `.ds-badge--danger` (closed, failed, overdue): a square label on `--color-surface` with a 1px outline and bold small lowercase word, both in the status colour. Use them in table cells and meta lines; one or two words, no icon, no fill.\n- `.ds-sidebar`: the left column under the menu, at 11px. Each `.ds-sidebar__block` has a `.ds-sidebar__title` (`--text-h3`, `--color-heading-alt`, on a hairline) and a `.ds-sidebar__list` of `.ds-sidebar__item` rows with `.ds-sidebar__link` and optional `.ds-sidebar__count`; `.ds-sidebar__text` is a paragraph; `.ds-sidebar__search` is an input with a button. `.ds-calendar` is the month calendar: a `--color-surface-alt` box with a `.ds-calendar__caption` (previous month, month, next month) and a seven-column `.ds-calendar__grid` of `.ds-calendar__head` initials and `.ds-calendar__day` cells; `--link` marks a day with entries, `--off` a day that has not come, and `is-current` is today on `--fill-accent`.\n- `.ds-notice`: one-line message, `--color-notice` with a 1px `--color-border-strong` outline, starting with a bold `.ds-notice__title`. `.ds-notice--error` uses the danger colour for text and outline. Stack several in `.ds-notices`.\n- `.ds-pagination`: centred row of small 1px boxed `.ds-pagination__link` items: previous, numbers, next. `is-current` is `--color-surface-strong` and bold; `is-disabled` is faded.\n- `.ds-dialog`: a 1px bordered box with a `--fill-bar` `.ds-dialog__title` bar, `.ds-dialog__body`, `.ds-dialog__text` and right-aligned `.ds-dialog__actions`. It sits in the page flow, optionally on `.ds-dialog__backdrop` (the page colour), under the soft `--shadow-dialog`. No dimmed overlay.\n- `.ds-empty`: outlined box with a centred muted `.ds-empty__text` and one secondary button.\n- `.ds-footer`: a `--fill-inverse` strip closing the sheet, inset like the banner, with centred 11px text: one `.ds-footer__text` line and a row of underlined `.ds-footer__link` items in `.ds-footer__links`.\n- `ds-avatar`: a small square with initials beside a commenter name.\n- `ds-accordion`: a sidebar list that opens and closes, a details element whose summary holds the block title.\n- `ds-tooltip`: a hint shown on hover or focus of a link; the tip is a child with class ds-tooltip__tip.\n\n## Never\n\n- `block-gap <= 40px`: blocks sit one 1px rule apart, never further.\n- `content-width <= 780px`: a fixed centred sheet; the page does not stretch with the window.\n- `font-size <= 22px`: the largest text is a 22px regular title.\n- `font-size >= 10px`: meta text stops at 10px.\n- `font-families <= 3`: Verdana, Tahoma for titles and a monospace for code.\n- `line-height >= 1.6`: the small text is set open, at 1.7.\n- `line-height <= 1.8`: and never looser than the references' 1.8.\n- `letter-spacing <= 0px`: nothing is tracked in this layout.\n- `uppercase-text <= 0%`: navigation, titles and labels are lowercase or sentence case.\n- `underlined-links <= 15%`: links are told by colour; only footer links are underlined at rest.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: boxes are told apart by dotted lines and flat tints.\n- `text-shadow = none`: text is flat, also on strips.\n- `gradient-fills <= 0%`: strips and buttons are one flat colour.\n- `border-width <= 2px`: lines are 1px; control bevels and emphasis rules are 2px.\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: a new boxed block copies `.ds-panel` (1px `--color-border` outline, `--color-surface-strong` title strip, `--space-4` padding), a new row type copies `.ds-list__item` (the key in the `--size-gutter` column, a 1px rule below, `--space-3` padding), a new left-column block copies `.ds-sidebar__block` (a title on a hairline, then a plain list), a new tinted box copies `.ds-grid__cell`. Anything that has a date hangs it in the gutter rather than printing it inline. 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 rather than a new number. Keep corners square, fills flat, the left column narrow, and separate things with a 1px solid or dotted line before reaching for a box.\n", "components.css": "/* Layout tokens (structure part). A journal with a date gutter, 2002 to 2007:\n a drawn banner, the menu and a calendar in a left column, entries hung on date leaves. */\n:root {\n --size-page: 780px;\n --size-side: 170px;\n --size-banner: 116px;\n --size-banner-slim: 44px;\n --size-gutter: 46px;\n --size-label: 100px;\n --size-field: 220px;\n --size-dialog: 340px;\n --size-num: 70px;\n --space-1: 1px;\n --space-2: 3px;\n --space-3: 6px;\n --space-4: 10px;\n --space-5: 15px;\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 standing clear of the window, outlined all round. */\n.ds-page__frame {\n box-sizing: border-box;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n}\n/* The banner across, then a floated layout as the period built it: the menu and, in each view,\n the sidebar float down the narrow left column; the entries keep clear of it by their margin. */\n.ds-page__columns {\n display: flow-root;\n}\n.ds-page__main {\n box-sizing: border-box;\n min-width: 0;\n min-height: calc(var(--size-banner) * 2);\n margin: var(--space-5) var(--space-4) 0 calc(var(--size-side) + var(--space-6));\n padding: 0 0 var(--space-6) var(--space-6);\n border-left: var(--border-width) var(--border-style) var(--color-border);\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 heading on a hairline. */\n.ds-page__label {\n margin: 0 0 var(--space-4);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n}\n\n/* ---------- nav: a drawn banner across the sheet, the menu at the head of the left column ---------- */\n.ds-nav {\n display: contents;\n}\n.ds-nav__banner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--size-banner);\n padding: var(--space-4) var(--space-6);\n background: var(--fill-bar);\n border-radius: var(--radius-page);\n color: var(--color-bar-text);\n text-align: center;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__banner--slim,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n min-height: var(--size-banner-slim);\n padding-top: 0;\n padding-bottom: 0;\n}\n/* The site's mark and name, centred in the banner. The tile is dressed like the primary button. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: 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(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: calc(var(--border-width) * 2) outset var(--color-button);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-bar-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/* On the one-line banner of an inner page the brand drops to title size. */\n.ds-nav__banner--slim .ds-brand__mark,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-brand__mark {\n width: calc(var(--text-h1) * 1.6);\n height: calc(var(--text-h1) * 1.6);\n}\n.ds-nav__banner--slim .ds-brand__name,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-brand__name {\n font-size: var(--text-h1);\n}\n.ds-nav__tagline {\n margin: var(--space-2) 0 0;\n font-size: var(--text-base);\n color: var(--color-bar-text);\n}\n.ds-nav__banner--slim .ds-nav__tagline,\n.ds-page:has(.ds-view:target:not(.ds-view--home)) .ds-nav__banner .ds-nav__tagline {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-nav__menu {\n float: left;\n box-sizing: border-box;\n width: calc(var(--size-side) - var(--space-4));\n margin: var(--space-5) 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* The current item. One selector per view marks it; with no view named, the home item. */\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#journal:target) .ds-nav__link[href=\"#journal\"],\n.ds-page:has(#entry:target) .ds-nav__link[href=\"#entry\"],\n.ds-page:has(#lists:target) .ds-nav__link[href=\"#lists\"],\n.ds-page:has(#about:target) .ds-nav__link[href=\"#about\"] {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n\n/* ---------- breadcrumb: a boxed line at the head of the right column ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0 0 var(--space-5);\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\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/* ---------- hero: the note pinned above the first entry ---------- */\n.ds-hero {\n margin: 0 0 var(--space-6);\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\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 0 var(--space-4);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n justify-content: center;\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 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-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 its own short rule ---------- */\n.ds-stats {\n display: flex;\n gap: var(--space-4);\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-2) 0 0;\n border-top: calc(var(--border-width) * 2) var(--border-style) var(--color-border-strong);\n}\n.ds-stat__value {\n display: block;\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 color: var(--color-heading);\n}\n.ds-stat__label {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- post: an entry hung on its date leaf ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-gutter) minmax(0, 1fr);\n column-gap: var(--space-5);\n align-items: start;\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-post__date {\n margin: var(--space-2) 0 0;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n overflow: hidden;\n text-align: center;\n}\n.ds-post__month {\n display: block;\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 font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-post__day {\n display: block;\n padding: var(--space-2) 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 color: var(--color-heading);\n}\n.ds-post__body {\n min-width: 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 an entry ---------- */\n.ds-comments {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comment {\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-comment:last-child {\n border-bottom: 0;\n}\n/* The keeper's own reply is tinted. */\n.ds-comment--author {\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/* ---------- 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}\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-7);\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-alt);\n}\n.ds-prose blockquote {\n margin: 0 0 var(--space-5) var(--space-5);\n padding: 0 0 0 var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\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/* Meta, tool and footer links. */\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n/* Bold inline link, for the one link a paragraph is about. */\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/* ---------- buttons: the operating system's push button ---------- */\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-1) var(--space-4);\n border: calc(var(--border-width) * 2) outset var(--color-button);\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\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 border-style: inset;\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 border-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-weight: var(--weight-ui);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n/* Destructive action: the same push button, lettered in the error red. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n color: var(--color-danger);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-disabled);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* ---------- form: the comment form ---------- */\n.ds-form {\n margin: 0;\n padding: var(--space-4) 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 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 font-weight: var(--weight-bold);\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 margin: 0;\n padding: var(--space-1) var(--space-2);\n border: calc(var(--border-width) * 2) inset 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-body);\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-style: var(--border-style);\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.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: var(--space-4) 0 0;\n padding-left: var(--size-label);\n}\n\n/* ---------- table ---------- */\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-3);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n text-align: left;\n}\n.ds-table td {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n vertical-align: top;\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 font-weight: var(--weight-bold);\n}\n\n/* ---------- list: the linklog, short items with the time in the date gutter ---------- */\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: var(--size-gutter) minmax(0, 1fr);\n column-gap: var(--space-5);\n padding: var(--space-3) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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.ds-list__time {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-list__body {\n min-width: 0;\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\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: 0;\n}\n.ds-list__meta {\n margin: 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-2) var(--space-4);\n background: var(--color-surface-strong);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n\n/* ---------- grid: tinted link boxes ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4) 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-page);\n font-size: var(--text-small);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n border-color: var(--color-border-strong);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__title {\n margin: 0 0 var(--space-2);\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-grid__text {\n margin: 0;\n}\n\n/* ---------- tabs: words on a rule, the current one underscored ---------- */\n.ds-tabs {\n display: flex;\n gap: var(--space-5);\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-2) var(--space-1);\n border-bottom: calc(var(--border-width) * 3) var(--border-style) transparent;\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-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 font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-tabs__body {\n padding: var(--space-4) 0 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\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\" or \"updated\" word after a title. */\n.ds-badge--alt {\n padding: 0;\n background: transparent;\n color: var(--color-accent-alt);\n}\n/* A category 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 font-weight: var(--weight-bold);\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 left column under the menu ---------- */\n.ds-sidebar {\n float: left;\n clear: left;\n box-sizing: border-box;\n width: calc(var(--size-side) - var(--space-4));\n margin: 0 0 0 var(--space-4);\n padding: 0 0 var(--space-6);\n font-size: var(--text-small);\n}\n.ds-sidebar__block {\n margin: var(--space-6) 0 0;\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-1) 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/* The month calendar: days with entries are links, today is the accent square. */\n.ds-calendar {\n padding: var(--space-2);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-calendar__caption {\n display: flex;\n justify-content: space-between;\n margin: 0 0 var(--space-2);\n padding: 0 var(--space-2) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n color: var(--color-heading);\n}\n.ds-calendar__grid {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\n text-align: center;\n}\n.ds-calendar__head {\n color: var(--color-text-muted);\n}\n.ds-calendar__day {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n}\n.ds-calendar__day--link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-calendar__day--link:hover,\n.ds-calendar__day--link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-calendar__day.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-calendar__day--off {\n color: var(--color-text-muted);\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: var(--border-width) 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-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: 0 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(--color-surface-strong);\n border-color: var(--color-text-muted);\n color: var(--color-heading);\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 bordered box with a title bar, in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n.ds-dialog {\n box-sizing: border-box;\n width: var(--size-dialog);\n margin: 0 auto;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-text-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\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-5);\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-3);\n}\n\n/* ---------- footer: a centred strip closing the sheet ---------- */\n.ds-footer {\n clear: both;\n margin: var(--space-4) 0 0;\n padding: var(--space-4) var(--space-6);\n background: var(--fill-inverse);\n border-radius: var(--radius-page);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n margin: var(--space-2) 0 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-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n list-style: none;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-base) * 0.7);\n height: calc(var(--text-base) * 0.7);\n margin-left: var(--space-2);\n margin-bottom: calc(var(--space-2) + var(--border-width));\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-base) * 0.12)) 100% no-repeat;\n color: var(--color-link);\n}\n.ds-accordion[open] > .ds-accordion__summary::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-base) * 0.12)) no-repeat;\n}\n.ds-accordion__summary > .ds-sidebar__title {\n display: block;\n flex: 1 1 auto;\n margin: 0;\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--border-width) var(--border-style) var(--color-link);\n}\n.ds-tooltip {\n position: relative;\n display: inline-block;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 5;\n width: max-content;\n max-width: calc(var(--space-6) * 8);\n padding: var(--space-1) 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-ui);\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-progress::-moz-progress-bar {\n background: var(--fill-bar);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin, date-gutter journal specimen\n\n\n\n\n
\n\n
\n\n
\n
\n \n \n chronoskin\n \n

moths, owls and the sky after midnight, written up the morning after

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

A night journal from the edge of a small town

\n

One garden, one moth trap, one pair of owls in the church tower. Entries go up most mornings.

\n
\n Read last night’s entry\n or start with the field lists »\n
\n
\n\n
\n

May 17

\n
\n
\n

Forty-one moths and one very cross wren

\n

The warm spell finally filled the trap. I opened the lid at five to find three lime hawk moths asleep on the egg boxes and a wren on the fence telling me exactly what she thought of the whole business.

\n

Everything was counted, photographed on the same grey card and let go into the hedge before the sun reached it.

\n

If the lamp is on, somebody is counting. If it is off, somebody is asleep.

\n

What changed since April

\n

Twice the species and three times the numbers, which is what a week of mild nights will do.

\n
    \n
  • First hawk moths of the year, eleven days earlier than last spring.
    • \n
  • No frost damage on the box lid this time.
    • \n
  • The red torch is still the best thing I own.
    • \n
\n

Keeping the tally

\n

The counts live in one text file. Running tally --month may prints the table that goes into the field lists.

\n
\n

Posted at 7:12 am in Moth trap | 3 comments | PermalinkLink to this entry only

\n
\n
\n\n
\n

Linklog, this week

\n \n
\n\n
\n

Field lists

\n
\n
\n

Moth trap

\n

Every night the lamp was lit. 126 entries. Open

\n
\n
\n

Owls

\n

The tower pair and their pellets. 58 entries. Open

\n
\n
\n

Night sky

\n

Clear nights, plainly described. 91 entries. Open

\n
\n
\n

Garden

\n

What was planted to feed the rest. 73 entries. Open

\n
\n
\n
\n\n
\n
\n\n \n
\n\n \n\n
\n\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Moth trap
    4. \n
  4. »
    5. \n
  5. The first warm night
    6. \n
\n\n
\n
\n

The first warm night

\n

22 April 2006, filed under Moth trap. Three comments so far.

\n
\n
The whole list
\n
\n\n
\n

Apr 22

\n
\n
\n

Eleven degrees at midnight, no wind, and cloud like a lid. I lit the lamp at nine and by ten the sheet behind it was moving.

\n

The first warm night is not in the calendar. You find it by leaving the lamp on.

\n

Fifty-three moths of fourteen kinds by first light, which is more than the whole of March. The owls took no notice at all.

\n
\n

Posted at 6:48 am in Moth trap | PermalinkLink to this entry only

\n
\n
\n\n
\n

More from that week

\n \n
\n\n
\n

Three comments

\n
    \n
  1. \n

    Same night here, forty miles east. The hedge was loud with them.

    \n

    WHWren Hallam | 22 April, 8:15 am

    \n
    2. \n
  2. \n

    Then it was the whole county. I shall stop taking the credit.

    \n

    IVIdris Vane | 22 April, 8:40 am

    \n
    3. \n
  3. \n

    Which bulb do you run in the trap? Mine brings in nothing but gnats.

    \n

    ATAgnes Thorne | 23 April, 7:40 am | edit | delete

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

Delete your comment?

\n
\n

The comment you left at 7:40 am will be taken off this entry. This cannot be undone.

\n
\n \n Keep it\n
\n
\n
\n
\n
\n\n
\n
\n

Thank you. Your last comment is waiting to be read and will show up 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\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. Field lists
    4. \n
  4. »
    5. \n
  5. Moth trap, 2006
    6. \n
\n\n
\n
\n

Moth trap, 2006

\n

Every night the lamp was lit this year, newest month first.

\n
\n
Last night
\n
\n\n
    \n
  • 63 nights
    • \n
  • 1,204 moths
    • \n
  • 87 species
    • \n
  • 212 comments
    • \n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
MonthBest nightCommentsMoths
May 2006Forty-one moths and one very cross wrenopen318
April 2006The first warm nightopen402
March 2006Frost on the box lidclosing251
February 2006Two moths, both of them brownclosed96
January 2006A lamp in the snowclosed137
\n
\n
\n\n
\n \n
\n\n
\n

Newest list: Bats

\n
\n

Nothing is filed under “Bats” yet.

\n Back to the journal\n
\n
\n\n
\n
\n\n \n
\n\n \n\n
\n\n
    \n
  1. Journal
    2. \n
  2. »
    3. \n
  3. About
    4. \n
\n\n
\n
\n

About, and how to write

\n

Who keeps this journal, and where a note should go.

\n
\n
Read the journal
\n
\n\n
\n
\n

Who keeps this

\n
\n

Idris Vane teaches woodwork by day and counts moths before breakfast. 9 entries this month, mostly under moth trap owls. Comments are open for four weeks, closing in the last few days and closed after that.

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

What gets written down

\n

Whatever came to the lamp, what the owls left under the tower, and the sky when there was one. The counts end up in the field lists.

\n

What does not

\n

Where the owls roost, and anything that would bring a crowd to a small garden at midnight.

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

Write to me

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

Answered before breakfast, most days.

\n
\n
\n
\n \n Cancel\n
\n
\n
\n\n
\n
\n\n
\n\n \n\n
\n\n\n", "style.json": "{\n \"id\": \"v1.weblogs-2000s.blog.s04.p02.t02.u02\",\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-4222\",\n \"short\": \"v1-wl-4222\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ddddbb;\n --color-canvas: #eeeedd;\n --color-surface: #eeeedd;\n --color-surface-alt: #e8e8d0;\n --color-surface-strong: #ddddbb;\n --color-bar: #777744;\n --color-bar-text: #ffffee;\n --color-bar-alt: #bbcc99;\n --color-bar-alt-text: #182d04;\n --color-inverse: #182d04;\n --color-inverse-text: #ccccaa;\n --color-text: #777744;\n --color-text-muted: #808050;\n --color-heading: #182d04;\n --color-heading-alt: #99aa77;\n --color-link: #006d00;\n --color-link-quiet: #99aa77;\n --color-link-visited: #99aa77;\n --color-link-hover: #182d04;\n --color-link-active: #cc6600;\n --color-border: #ccccaa;\n --color-border-strong: #99aa77;\n --color-border-muted: #ddddbb;\n --color-accent: #777744;\n --color-accent-text: #ffffee;\n --color-accent-alt: #cc6600;\n --color-fill-1: #d0e0a8;\n --color-fill-2: #ddddbb;\n --color-fill-3: #cccc99;\n --color-fill-4: #ffffee;\n --color-button: #bbcc99;\n --color-button-text: #182d04;\n --color-button-hover-text: #182d04;\n --color-button-secondary: #ddddbb;\n --color-button-secondary-text: #333333;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #ddddbb;\n --color-disabled-text: #99aa77;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffee;\n --color-success: #006d00;\n --color-warning: #cc6600;\n --color-notice: #ffffee;\n --color-notice-text: #777744;\n --color-focus: #777744;\n --color-shadow: #777744;\n --color-overlay: #ddddbb;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Arial, sans-serif;\n --font-heading: Tahoma, \"Trebuchet MS\", \"Lucida Grande\", Verdana, Arial, sans-serif;\n --font-ui: Verdana, Arial, sans-serif;\n --font-mono: monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 12px;\n --text-display: 22px;\n --text-h1: 22px;\n --text-h2: 16px;\n --text-h3: 12px;\n --line-body: 1.7;\n --line-heading: 1.2;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 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: 2px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: none;\n --fill-page: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='black' fill-opacity='.14'/%3E%3C/svg%3E\") 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 dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }