/* Catalog style "demo21" — "Almanac": the album as a printed almanac on warm dotted paper, Fraunces numerals and italic tabs, hairline rules; a left rail of styles and categories, the posts as the cells of a ruled month grid. Mirrors /demo21/. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Instrument+Sans:wght@400;500;600&display=swap");

:root {
    --paper: #f3efe6;
    --paper-2: #ebe5d8;
    --ink: #1d1b17;
    --muted: #645d50;
    --green: #1f4d3a;
    --green-2: #163a2b;
    --red: #a3222c;
    --line: rgb(29 27 23 / 0.16);
    --line-2: rgb(29 27 23 / 0.28);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Instrument Sans", system-ui, sans-serif;
    --rail: 19rem;
    --edge: clamp(16px, 2.4vw, 32px);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; overflow-x: hidden; color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
    background: var(--paper) radial-gradient(rgb(29 27 23 / 0.035) 1px, transparent 1px) 0 0 / 3px 3px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
code { font: 500 0.86em/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 30; padding: 10px 18px; border-radius: 999px; background: var(--green); color: var(--paper); font-weight: 600; }
.skip:focus { left: 16px; }
.deco { display: none; }

/* ── the sheet: masthead across, a rail on the left, the month on the right ──────────────── */
.page {
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto;
    max-width: 1680px; min-height: 100vh; margin: 0 auto;
}
.masthead { grid-column: 1 / -1; grid-row: 1; }
.stylebar { grid-column: 1; grid-row: 2; }
.categories { grid-column: 1; grid-row: 3; }
.tagcloud { grid-column: 1; grid-row: 4; }
.content { grid-column: 2; grid-row: 2 / 6; }
.colophon { grid-column: 1 / -1; grid-row: 6; }
.deco--1 { display: block; grid-column: 1; grid-row: 2 / 6; border-right: 1px solid var(--ink); pointer-events: none; }

/* masthead: the almanac's top rule — DEPO spaced, the issue in italic, a green count pill */
.masthead { border-bottom: 1px solid var(--ink); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px var(--edge); }
.brand { display: flex; align-items: baseline; gap: 18px; text-decoration: none; }
.brand__mark { font: 700 1.5rem/1 var(--serif); letter-spacing: 0.16em; }
.brand__name { font: italic 400 1.1rem/1 var(--serif); color: var(--muted); }
.brand:hover .brand__name { color: var(--green); }
.masthead__tagline { flex: 1 1 320px; margin: 0; padding-left: 24px; border-left: 1px solid var(--line-2); font: italic 400 0.98rem/1.35 var(--serif); color: var(--muted); }
.masthead__count {
    display: inline-flex; align-items: baseline; gap: 6px; margin: 0 0 0 auto; padding: 10px 18px; border-radius: 999px; background: var(--green); color: var(--paper);
    font: 600 0.8rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
}
.masthead__num { font: 600 1rem/1 var(--serif); letter-spacing: 0; }

/* rail blocks: small spaced labels with a hairline running out to the right */
.stylebar, .categories, .tagcloud { min-width: 0; padding: 0 24px; }
.stylebar { padding-top: 26px; }
.stylebar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stylebar__label, .tagcloud__title {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0;
    font: 600 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.stylebar__label::after, .tagcloud__title::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: 0.25; }
.stylebar__value {
    flex: 1 1 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.55);
    font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-all; color: var(--ink);
}
.stylebar__copy {
    min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--green); color: var(--paper);
    font: 600 0.82rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s;
}
.stylebar__copy:hover { background: var(--green-2); }
.stylebar__copy.is-done { background: var(--ink); }
.stylebar__copy.is-done::after { content: " ✓"; }
.stylebar__list { display: flex; flex-wrap: wrap; gap: 2px 14px; width: 100%; margin-top: 4px; }
.stylebar__item { padding: 3px 0; border-bottom: 1px solid transparent; font: italic 400 1rem/1.25 var(--serif); color: var(--muted); text-decoration: none; }
.stylebar__item:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.stylebar__item.is-active { font-style: normal; font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.stylebar__tools { margin-top: 6px; padding-top: 12px; border-top: 1px dotted var(--line-2); color: var(--ink); }

/* categories: the legend of the almanac — a swatch, the name, an italic count */
.categories { padding-top: 26px; }
.categories::before {
    content: "Categories"; display: flex; margin-bottom: 8px;
    font: 600 0.7rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.categories__list { display: grid; margin: 0; padding: 0; list-style: none; }
.categories__item { --c: var(--ink); }
.categories__item:nth-child(2) { --c: #1f4d3a; }
.categories__item:nth-child(3) { --c: #6b3f7a; }
.categories__item:nth-child(4) { --c: #2b5784; }
.categories__item:nth-child(5) { --c: #b0582a; }
.categories__item:nth-child(6) { --c: #a3222c; }
.categories__item:nth-child(7) { --c: #8a6c12; }
.categories__item:nth-child(8) { --c: #3f6b5c; }
.categories__link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; font-size: 0.95rem; text-decoration: none; }
.categories__link::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.categories__link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.categories__link.is-active { font-weight: 600; }
.categories__link.is-active::before { background: var(--c); box-shadow: none; }
.categories__count { margin-left: auto; font: italic 400 1rem/1 var(--serif); color: var(--muted); }

/* ── content: the month ─────────────────────────────────────────────────────────────── */
.content { min-width: 0; padding: 30px var(--edge) 64px; }
.listing__header { margin-bottom: 0; }
.listing__title { margin: 0; font: 300 clamp(44px, 5.4vw, 84px)/0.95 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.025em; }
.listing__intro { max-width: 58ch; margin: 12px 0 0; font: italic 400 1.1rem/1.45 var(--serif); color: var(--muted); }
.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding: 12px 0;
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2);
}
.toolbar p { margin: 0; }
.toolbar__range { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.toolbar__view { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.toolbar__label { font: italic 400 1.05rem/1 var(--serif); color: var(--muted); }
.toolbar__opt { padding: 6px 0; border-bottom: 1px solid transparent; font: italic 400 1.1rem/1 var(--serif); color: var(--muted); text-decoration: none; }
.toolbar__opt:hover { color: var(--ink); }
.toolbar__opt.is-active { font-style: normal; font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }

/* the grid: ruled cells without gaps; the empty cells at the end are hatched like days outside the month */
.listing {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); margin-top: 22px;
    border-top: 1px solid var(--ink); border-left: 1px solid var(--line);
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(29 27 23 / 0.045) 6px 7px);
    box-shadow: inset -1px -1px 0 var(--line);
}
.post--card {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 18px;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper) radial-gradient(rgb(29 27 23 / 0.035) 1px, transparent 1px) 0 0 / 3px 3px;
    transition: background-color 0.2s;
}
.post--card:hover { background-color: #f8f5ee; }
.post--card .post__body { display: contents; }
.post--card .post__meta { order: 1; }
.post--card .post__media { order: 2; }
.post--card .post__title { order: 3; }
.post--card .post__excerpt { order: 4; }
.post--card .post__actions { order: 9; }

.post__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 12px; }
.post__num { font: 300 2.6rem/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.03em; transition: color 0.2s; }
.post--card:hover .post__num { color: var(--green); }
.post__date { font: italic 400 0.92rem/1 var(--serif); color: var(--green); }
.post__cat {
    width: 100%; font: 600 0.7rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.post__cat::before { content: "◦ "; color: var(--green); }
.post__cat:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.post--card .post__date { order: 1; margin-left: auto; }
.post--card .post__cat { order: 2; margin-top: 2px; }

.post__media { display: block; margin: 0 0 14px; padding: 5px; border: 1px solid var(--line-2); background: #fbf9f4; }
.post__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; filter: sepia(0.08) saturate(0.92); transition: filter 0.4s; }
.post--card:hover .post__thumb { filter: none; }
.post__title { margin: 0 0 8px; font: 400 1.5rem/1.12 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.post__title a { text-decoration: none; }
.post__title a:hover { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post--card .post__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0 0 14px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: auto 0 0; padding-top: 12px; border-top: 1px dotted var(--line-2); }
.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: italic 500 1rem/1.2 var(--serif); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--ink); }
.btn:hover { color: var(--green); }
.btn--primary {
    padding: 0 16px; border: 0; border-radius: 999px; background: var(--green); color: var(--paper); text-decoration: none;
    font: 600 0.78rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s;
}
.btn--primary:hover { background: var(--green-2); color: var(--paper); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--ink); }
.pager__link {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px;
    font: 300 1.35rem/1 var(--serif); font-variation-settings: "opsz" 144; text-decoration: none;
}
.pager__link:hover { background: var(--paper-2); }
.pager__link.is-active { background: var(--green); color: var(--paper); font-weight: 600; }
.pager__link--prev, .pager__link--next { padding: 0 14px; white-space: nowrap; font: italic 400 1.05rem/1 var(--serif); text-decoration: underline; text-underline-offset: 4px; }
.pager__link--prev::before { content: "← "; }
.pager__link--next::after { content: " →"; }
.pager__link--next { margin-left: auto; }

/* ── one post: the day view — a huge light numeral beside the entry ─────────────────── */
.post--full { max-width: 980px; }
.post--full .post__header {
    display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); grid-template-areas: "num cat" "num title" "num excerpt" "num actions" "num date";
    column-gap: clamp(20px, 3vw, 44px); align-items: start; padding: 10px 0 34px; border-bottom: 1px solid var(--ink);
}
.post--full .post__meta { display: contents; }
.post--full .post__num { grid-area: num; align-self: start; margin: -0.06em 0 0 -0.04em; font-size: clamp(5rem, 9vw, 9rem); line-height: 0.9; letter-spacing: -0.05em; }
.post--full.guide .post__num { font-size: clamp(2.6rem, 4.4vw, 4.4rem); font-style: italic; letter-spacing: -0.02em; }
.post--full .post__cat { grid-area: cat; margin-bottom: 10px; }
.post--full .post__date { grid-area: date; margin-top: 18px; font-size: 1rem; }
.post--full .post__title { grid-area: title; margin: 0 0 14px; font-size: clamp(42px, 5.6vw, 84px); font-weight: 400; font-variation-settings: "opsz" 144; line-height: 0.98; letter-spacing: -0.025em; }
.post--full .post__excerpt { grid-area: excerpt; max-width: 52ch; margin: 0 0 20px; font: italic 400 1.2rem/1.45 var(--serif); color: var(--muted); }
.post--full .post__actions { grid-area: actions; margin: 0; padding-top: 0; border-top: 0; }
.post--full .btn--primary { min-height: 44px; padding: 0 22px; }

.post__shot { margin: 32px 0 40px; }
.post__zoom { display: block; max-height: 720px; overflow: hidden; padding: 8px; border: 1px solid var(--ink); background: #fbf9f4; cursor: zoom-in; }
.post__zoom img { width: 100%; }
.post__caption { margin-top: 10px; font: italic 400 0.95rem/1.4 var(--serif); color: var(--muted); }

.doc { max-width: 720px; font-size: 1.04rem; line-height: 1.68; counter-reset: sec; }
.doc > :first-child { margin-top: 0; }
.doc h2 {
    counter-increment: sec; display: flex; align-items: baseline; gap: 14px; margin: 52px 0 14px; padding-top: 12px; border-top: 1px solid var(--ink);
    font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -0.015em;
}
.doc h2::before { content: counter(sec, decimal-leading-zero); font: italic 400 1rem/1 var(--serif); color: var(--green); }
.doc h3 { margin: 32px 0 8px; font: italic 500 1.35rem/1.25 var(--serif); }
.doc h4, .doc h5, .doc h6 { margin: 24px 0 6px; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc li { margin-bottom: 4px; }
.doc li::marker { color: var(--green); }
.doc strong { font-weight: 600; }
.doc a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }
.doc code { padding: 1px 5px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.5); }
.doc pre { margin: 0 0 18px; padding: 16px 18px; overflow-x: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper-2); color: var(--ink); font-size: 0.92rem; }
.doc pre code { padding: 0; border: 0; background: none; }
.doc blockquote { margin: 0 0 18px; padding: 4px 0 4px 20px; border-left: 2px solid var(--green); font: italic 400 1.1rem/1.55 var(--serif); color: #3f3a31; }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc hr { margin: 36px 0; border: 0; border-top: 1px dotted var(--line-2); }
.doc-table { margin: 0 0 20px; overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.5; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.doc th, .doc td { padding: 9px 12px 9px 0; text-align: left; vertical-align: top; }
.doc th { border-bottom: 1px solid var(--ink); font: 600 0.7rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.doc td { border-bottom: 1px dotted var(--line-2); }
.doc tr:last-child td { border-bottom: 0; }
.doc td:first-child { font-family: var(--serif); font-style: italic; }

.tags { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 36px 0 0; padding: 14px 0 0; border-top: 1px dotted var(--line-2); list-style: none; }
.tags__item { font: italic 400 1rem/1.4 var(--serif); color: var(--muted); }
.tags__item::before { content: "◦ "; color: var(--green); }

.post__nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.post__nav-link { padding: 16px 0; font: 400 1.5rem/1.15 var(--serif); text-decoration: none; }
.post__nav-link:hover { color: var(--green); }
.post__nav-link--newer { padding-right: 16px; }
.post__nav-link--older { grid-column: 2; padding-left: 16px; border-left: 1px solid var(--line-2); text-align: right; }
.post__nav-label { display: block; margin-bottom: 6px; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.post__nav-link--newer .post__nav-label::before { content: "← "; }
.post__nav-link--older .post__nav-label::after { content: " →"; }

.notice { max-width: 720px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: italic 400 1.3rem/1.4 var(--serif); }
.notice p { margin: 0; }
.notice a { color: var(--green); text-underline-offset: 3px; }
.notice--error { border-top: 3px solid var(--red); color: #7e1a22; }

.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px var(--edge) 32px; border-top: 1px solid var(--ink); color: var(--muted); font-size: 0.85rem; }
.colophon p { margin: 0; }
.colophon__text { font: italic 400 0.98rem/1.4 var(--serif); }
.colophon a { color: var(--ink); text-underline-offset: 3px; }

/* ── screenshot dialog: a sheet of paper with a ruled top ───────────────────────────── */
.zoom { width: min(1480px, 96vw); max-width: none; height: 94vh; max-height: none; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgb(29 27 23 / 0.5); }
.zoom::backdrop { background: rgb(29 27 23 / 0.72); }
.zoom__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 10px 14px; border-bottom: 1px solid var(--ink); background: var(--paper); }
.zoom__close { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--green); color: var(--paper); font: 600 0.8rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.zoom__close:hover { background: var(--green-2); }
.zoom__scroll { height: calc(94vh - 62px); overflow: auto; }
.zoom__img { width: 100%; }

/* ── narrower: the rail folds above the month ───────────────────────────────────────── */
@media (max-width: 1000px) {
    .page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .masthead, .stylebar, .categories, .tagcloud, .content, .colophon { grid-column: 1; grid-row: auto; }
    .deco--1 { display: none; }
    .stylebar, .categories, .tagcloud { padding-left: var(--edge); padding-right: var(--edge); }
    .categories__list { display: flex; flex-wrap: wrap; gap: 0 22px; }
    .categories__count { margin-left: 0; }
    .tagcloud { padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
    .content { padding-top: 26px; }
}
@media (max-width: 640px) {
    body { font-size: 15px; }
    .masthead__tagline { flex-basis: 100%; padding-left: 0; border-left: 0; }
    .masthead__count { margin-left: 0; }
    .post--full .post__header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "cat" "title" "excerpt" "actions" "date"; }
    .post--full .post__num { margin-bottom: 8px; font-size: 5.4rem; }
    .post__nav { grid-template-columns: 1fr; }
    .post__nav-link--older { grid-column: auto; padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); text-align: left; }
    .pager__link--next { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* long words and URLs in the doc and comments wrap instead of widening the page */
.doc p, .doc li, .doc blockquote, .doc td, .doc th, .comment__body { overflow-wrap: anywhere; }
.doc pre, .doc-table { max-width: 100%; }