/* douglaspenick.com — one stylesheet. Mobile first (390 px), then wider.
   Reference: a well-made hardback and a museum catalogue. Paper, ink, one accent, a gold thread.
   Tokens first; the same names are listed in DESIGN-AND-OPS.md. */

/* ---------------------------------------------------------------- tokens */
:root {
  --paper: #f6f2ea;
  --paper-2: #efe9dd;          /* cover plates, chips */
  --ink: #1b1b1f;
  --ink-muted: #5a5a66;
  --rule: #d9d2c5;
  --accent: #146c78;           /* deep teal: chosen against the covers (see DESIGN-AND-OPS.md) */
  --accent-ink: #ffffff;
  --gold: #b8862b;             /* the thread: timeline rail, small ornaments only */
  --shadow: 0 1px 2px rgba(27, 27, 31, .08), 0 12px 28px -14px rgba(27, 27, 31, .28);
  --grain-opacity: .028;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* modular scale, fluid: body 17 px at 390 -> 19 px at 1280 */
  --fs-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs--1: clamp(.9rem, .86rem + .2vw, 1rem);
  --fs--2: .8125rem;
  --fs-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --fs-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-3: clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --fs-4: clamp(2.4rem, 1.7rem + 3.6vw, 4.4rem);

  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 3.5rem; --space-7: 6rem; --space-8: 8rem;
  --section: clamp(3.5rem, 2rem + 6vw, 8rem);
  --wrap: 1200px;
  --prose: 60ch;               /* review 2026-10-22: 68ch measured ~85 characters on the privacy page */
  --rule-strong: #8a8578;      /* 3.3:1 on paper: form fields, quiet buttons, the menu button (WCAG 1.4.11) */
  --gold-deep: #9a6f1f;        /* 4.0:1 on paper: the gold where it carries meaning (current-page underline) */
  --grain-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  --header-h: 64px;
  --radius: 2px;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-hover: 150ms;
  --t-move: 260ms;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  /* Light only: Rutger decided 2026-10-22 ("do not use darkmode"); the site declares itself light so no
     browser or OS setting repaints it. */
  color-scheme: only light;
}

/* ---------------------------------------------------------------- fonts (self-hosted, variable, subset) */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-0); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; position: relative; min-height: 100dvh;
}
/* paper grain: an SVG noise at 2–3 % opacity, no network. It lies ABOVE the page (z-index 60, no blend mode) so
   every solid background (header, year labels, the tinted band, cover plates) keeps the same grain; dialogs draw above it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--grain-opacity);
  background-image: var(--grain-image);
  background-size: 180px 180px;
}
a, button { -webkit-tap-highlight-color: transparent; }
main, .site-header, .site-footer { position: relative; z-index: 1; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: color var(--t-hover) var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); transition: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; font-variation-settings: "opsz" 96, "SOFT" 20; text-wrap: balance; }
h1 { font-size: var(--fs-3); }
h2 { font-size: var(--fs-2); }
h3 { font-size: var(--fs-1); }
p { margin: 0 0 1em; }
em { font-style: italic; }
.plain { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 5rem, var(--wrap)); } }   /* Rutger 2026-10-22: room at the sides, the covers must never touch the edge */
[hidden] { display: none !important; }   /* the filter hides cards with the hidden attribute; .card's own display must not win */
/* a text column anchored on the same left line as the wordmark (review 2026-10-22, row 9); the 404 page and the epigraph stay centred */
.narrow { max-width: none; }
.narrow > * { max-width: var(--prose); }
.notfound .narrow > *, .epigraph .narrow > * { margin-inline: auto; }
.epigraph .narrow > .epigraph-quote { max-width: 34ch; }   /* two balanced lines, not one long one */
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--ink); color: var(--paper); padding: .5rem .9rem; z-index: 100; border-radius: var(--radius); }
.skip:focus { top: .6rem; }
.eyebrow { font-family: var(--font-body); font-size: var(--fs--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .75rem; font-weight: 600; }
.meta { color: var(--ink-muted); font-size: var(--fs--1); margin: 0 0 .5rem; }
.strand { font-variant: all-small-caps; letter-spacing: .06em; font-size: 1.05em; }
hr, .brush-rule { color: var(--gold); margin: .25rem 0 1.5rem; }
.brush-rule { width: 160px; height: 8px; }
.notice { border-left: 2px solid var(--gold); padding-left: 1rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; height: var(--header-h); background: var(--paper); border-bottom: 1px solid var(--rule); z-index: 50;
  transition: transform var(--t-move) var(--ease);
  view-transition-name: header;
}
.header-hidden { transform: translateY(-100%); }
/* pinned things (year numerals, the book cover) ride up with the header when it hides, so no 64 px gap opens (review row 18) */
.book-cover { transition: transform var(--t-move) var(--ease); }
html:has(.site-header.header-hidden) .book-cover { transform: translateY(calc(-1 * var(--header-h))); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; min-height: 44px; white-space: nowrap; }
.wordmark .enso { width: 26px; height: 26px; color: var(--ink); flex: none; }
.wordmark:hover { color: var(--accent); }
.site-nav { display: flex; align-items: center; }
.menu { display: flex; gap: .25rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--ink); text-decoration: none; font-size: var(--fs--1); letter-spacing: .02em; border-radius: var(--radius); background: none; border: 0; cursor: pointer; }
.menu a:hover { color: var(--accent); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: .35em; text-decoration-thickness: 1.5px; }
.menu-toggle { display: none; min-height: 44px; min-width: 44px; padding: 0 .75rem; background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
@media (max-width: 699px) {
  .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .js .menu { display: none; }
  /* both classes sit on <html>, so they are written joined (.js.menu-open), never as a descendant pair:
     reviewer B 2026-10-22 found the sheet could never open */
  .js.menu-open .menu {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem;
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); z-index: 40; padding: 2rem;
    animation: sheet-in 220ms var(--ease) both;
  }
  .js.menu-open .menu a { font-family: var(--font-display); font-size: var(--fs-2); min-height: 56px; }
  html.js.menu-open { overflow: hidden; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } }
  html:not(.js) .menu { gap: 0; }
}

/* ---------------------------------------------------------------- buttons, chips, filters */
.actions { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: center; margin: 1rem 0 0; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.15rem;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; border-radius: var(--radius); border: 1px solid var(--accent);
  font-weight: 600; font-size: var(--fs--1); letter-spacing: .02em; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.button-quiet:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
/* on cards the buy button is an outline, so seventeen of them read as a library, not a shop shelf (review 2026-10-22, row 4) */
.card .button:not(.button-quiet) { background: transparent; color: var(--accent); border-color: rgba(20, 108, 120, .45); }
.card .button:not(.button-quiet):hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs--1); color: var(--ink-muted); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--rule-strong); }
.link-quiet:hover { color: var(--accent); text-decoration-color: currentColor; }
.button:active, .filter:active, .link-quiet:active { transform: translateY(1px); }
.out-of-print { color: var(--ink-muted); font-size: var(--fs--1); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.chips li { font-size: var(--fs--2); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }   /* plain text with gold dots, not false buttons (review row 22) */
.chips li + li::before { content: "·"; color: var(--gold); margin: 0 .5rem 0 .1rem; }
.filter-row, .view-toggle { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.filter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); text-decoration: none; font-size: var(--fs--1); cursor: pointer; transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- covers */
.cover-plate {
  display: block; aspect-ratio: 2 / 3; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6%; box-shadow: var(--shadow); transition: transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease);
}
.cover-plate picture, .cover-plate img { width: 100%; height: 100%; object-fit: contain; object-position: center; }   /* centred in the plate (Rutger 2026-10-22: bottom-aligned odd shapes looked off) */
.cover-img { opacity: 1; transition: opacity var(--t-move) var(--ease); }
.js .cover-img[loading="lazy"]:not(.loaded) { opacity: .85; }
.cover-link { display: block; text-decoration: none; color: inherit; }
@media (hover: hover) { .cover-link:hover .cover-plate { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(27, 27, 31, .08), 0 20px 36px -16px rgba(27, 27, 31, .35); } }
.cover-link:active .cover-plate { transform: translateY(1px) scale(.985); transition-duration: 80ms; }
.cover-link:focus-visible { box-shadow: none; }
.cover-link:focus-visible .cover-plate { box-shadow: var(--focus); }
.cover-plate-large { padding: 5%; }

/* ---------------------------------------------------------------- cards */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; } }
@media (min-width: 1500px) { .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; min-width: 0; }
.card .cover-link { margin-bottom: .9rem; }
.card-title { font-size: var(--fs-1); margin: 0 0 .3rem; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-role { font-size: var(--fs--2); color: var(--ink-muted); margin: 0 0 .25rem; letter-spacing: .06em; text-transform: uppercase; }
.descriptor { font-size: var(--fs--1); margin: 0 0 .5rem; color: var(--ink); flex: 1; }
.card .actions { margin-top: auto; }
.card .button { padding: .4rem .9rem; }
@media (max-width: 699px) {
  .card .descriptor { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card .button { min-height: 44px; width: 100%; }
}

/* ---------------------------------------------------------------- sections */
section { padding-block: var(--section); }
.section-title { font-size: var(--fs-2); margin-bottom: 1rem; position: relative; padding-top: .85rem; }
.section-title::before { content: ""; position: absolute; top: 0; left: 0; width: 2.25rem; height: 2px; background: var(--gold); border-radius: 1px; }   /* the gold thread marks every section */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.5rem; }
.section-sub { color: var(--ink-muted); margin: 0; }
.page-head { padding-block: var(--space-5) var(--space-3); }
.page-title { font-size: var(--fs-4); margin-bottom: .5rem; }
/* a marked page head: the ensō drawn faintly in gold behind the title (Rutger 2026-10-22: the books title felt bland) */
.page-head-marked .wrap { position: relative; }
.page-mark { position: absolute; left: -2.5rem; top: -2.75rem; width: clamp(160px, 22vw, 240px); color: var(--gold); opacity: .16; pointer-events: none; }
.page-mark svg { width: 100%; height: auto; display: block; }
.page-head-marked .eyebrow, .page-head-marked .page-title, .page-head-marked .brush-rule, .page-head-marked .page-lede, .page-head-marked .view-toggle { position: relative; }
.page-head-marked .eyebrow { margin-bottom: .5rem; }
@media (min-width: 900px) { .page-mark { left: -3.5rem; top: -3rem; } }
.page-lede { font-size: var(--fs-1); font-family: var(--font-display); font-weight: 400; color: var(--ink-muted); max-width: var(--prose); line-height: 1.35; }
.prose { max-width: var(--prose); }
.prose p, .prose li { font-size: var(--fs-0); line-height: 1.6; }
.prose h2 { margin-top: 2.2em; font-size: var(--fs-2); }
.prose blockquote { margin: 2rem 0; padding: 0; border: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); line-height: 1.35; font-variation-settings: "opsz" 72, "SOFT" 40; }
.prose blockquote p { font-size: inherit; }
.prose blockquote footer { font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--ink-muted); margin-top: .5rem; }
.link-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.link-row a { display: inline-flex; min-height: 44px; align-items: center; }

/* reveal: never from invisible */
.reveal { opacity: .9; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.reveal.is-in, html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- home: hero = the writer (portrait first, then who he is).
   No viewport-height hero: the page reads top-down (Rutger, 2026-10-22), so the hero is as tall as its content. */
.hero { padding-block: var(--space-4) var(--space-5); }
.hero-grid { display: grid; gap: 1.75rem; align-items: center; }
.hero-portrait { margin: 0; position: relative; }
.hero-portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); border-radius: var(--radius); opacity: .7; pointer-events: none; }   /* offset gold frame */
.hero-portrait .portrait-img { position: relative; z-index: 1; box-shadow: var(--shadow); }
.hero-text { text-align: left; }
.hero-title { font-size: var(--fs-4); margin: 0 0 .9rem; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 30; line-height: 1.02; }
.hero-descriptor { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 24, "SOFT" 50; font-size: var(--fs-1); line-height: 1.42; max-width: 44ch; }   /* the book typeface under his name (review row 6) */
.hero-blurb { color: var(--ink-muted); max-width: 52ch; }
@media (min-width: 900px) {
  .hero { padding-block: var(--space-5) var(--space-5); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

/* home: the new book (one compact band after the epigraph) */
.feature { padding-block: var(--space-5); background: var(--paper-2); border-block: 1px solid var(--rule); }   /* a tinted band for the new book */
.feature-grid { display: grid; gap: 2rem; align-items: center; }
.feature-cover { width: min(60vw, 260px); margin-inline: auto; }
.feature-text { max-width: 60ch; }
.feature-title { font-size: var(--fs-3); margin: 0 0 .25rem; font-weight: 500; font-variation-settings: "opsz" 120, "SOFT" 30; }
.feature-subtitle { font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); color: var(--ink-muted); margin: 0 0 1rem; line-height: 1.3; }
.feature-descriptor { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 24, "SOFT" 50; font-size: var(--fs-1); line-height: 1.42; max-width: 44ch; }
.feature-blurb { color: var(--ink-muted); max-width: 60ch; }
/* wide: the same half-and-half split as the hero above it, so the band's text starts on the hero text's line (Rutger 2026-10-22) */
@media (min-width: 700px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .feature-cover { width: min(100%, 300px); margin-inline: auto; }
}

/* epigraph */
.epigraph { padding-block: var(--space-5) var(--space-5); border-top: 1px solid var(--rule); }
.epigraph-quote { margin: 0; text-align: center; position: relative; padding-top: 2.4rem; }
.epigraph-quote::before { content: "“"; position: absolute; top: -.35rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--gold); font-variation-settings: "opsz" 144, "SOFT" 100; }   /* one gold opening mark */
.epigraph-quote { margin: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); line-height: 1.3; font-variation-settings: "opsz" 120, "SOFT" 50; text-wrap: balance; }
.epigraph-quote p { margin: 0 0 .75rem; }
.epigraph-quote p + p { margin-top: 1.1rem; }   /* stanza gap in a verse epigraph */
/* verse: the lines keep their own left edge and the block sits centred; the source sits under its right edge */
.epigraph-wrap { text-align: center; position: relative; }
/* the composition: a faint gold ensō behind, the source book's cover beside the lines (Rutger 2026-10-22) */
.epigraph-mark { position: absolute; left: 50%; top: 50%; width: clamp(220px, 34vw, 340px); transform: translate(-82%, -52%); color: var(--gold); opacity: .11; pointer-events: none; }
.epigraph-mark svg { width: 100%; height: auto; display: block; }
.epigraph-inner { position: relative; display: inline-flex; align-items: center; gap: 2.25rem; text-align: left; }
.epigraph-cover { width: 104px; flex: none; }
.epigraph-cover .cover-plate { padding: 5%; }
@media (max-width: 599px) { .epigraph-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .epigraph-cover { width: 84px; } }
.epigraph-quote.verse { display: block; text-align: left; max-width: none; font-size: var(--fs-1); line-height: 1.5; padding-top: 1.4rem; text-wrap: wrap; }
/* no quotation mark on verse (Douglas 2026-10-22: "take out the one big tan quotation mark"); a short gold hairline instead, as on section titles */
.epigraph-quote.verse::before { content: ""; left: 0; top: 0; transform: none; width: 2.25rem; height: 2px; background: var(--gold); border-radius: 1px; font-size: 0; }
.epigraph-quote.verse p { margin: 0; }
.epigraph-quote.verse p + p { margin-top: 1.5rem; }   /* a full line between stanzas; must outrank the verse reset above */
.epigraph-quote.verse footer { text-align: right; margin-top: .9rem; }
.epigraph-quote footer { font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--ink-muted); }
.epigraph-quote cite { font-style: italic; }

/* the writer's own sentence (empty until he supplies one) */
.own-voice { font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); }

/* praise */
/* Readers and critics: a tinted band; each quote opens with a gold mark and closes with the cover it praises (Rutger 2026-10-22) */
.praise { background: var(--paper-2); border-block: 1px solid var(--rule); }
.praise-list { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .praise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem; } }
.praise-item blockquote { margin: 0; position: relative; padding-top: 2rem; height: 100%; display: flex; flex-direction: column; font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); line-height: 1.35; font-variation-settings: "opsz" 72, "SOFT" 40; }
.praise-item blockquote::before { content: "“"; position: absolute; top: -.6rem; left: -.1rem; font-size: 3.6rem; line-height: 1; color: var(--gold); font-variation-settings: "opsz" 144, "SOFT" 100; }
.praise-item blockquote p { margin: 0 0 1.1rem; text-wrap: pretty; }
.praise-item footer { margin-top: auto; font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--ink-muted); }
.praise-book { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; min-height: 44px; }
.praise-book:hover .praise-on cite { color: var(--accent); }
.praise-cover { width: 44px; flex: none; padding: 0; background: none; border: 0; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }   /* the cover itself, no plate (Rutger 2026-10-22) */
.praise-cover picture, .praise-cover img { object-fit: cover; object-position: center; aspect-ratio: 2 / 3; display: block; }
.praise-by { display: flex; flex-direction: column; gap: .1rem; }
.praise-who { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.praise-on cite { font-style: italic; color: var(--ink); }
.elsewhere-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .elsewhere-grid { grid-template-columns: 1fr 1fr; } }
.elsewhere, .praise { border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- books: timeline (the gold thread) */
.js .view:not(.view-active) { display: none; }
.view { padding-block: var(--space-3) var(--section); }   /* no dead gap between the toggle and the first year (review row 7) */
html:not(.js) .view-strand:not(:target) { display: none; }
html:not(.js) .view-timeline:has(~ .view-strand:target) { display: none; }
/* The thread: newest work at the top. Phone: the thread runs down the left, the year numeral pins beside it
   while that year's works scroll past. Wide: the thread runs down the middle, works alternate sides, the year
   sits on the thread. The gold thread fills in as the reader scrolls (scroll-driven animation, CSS only;
   browsers without it show the full thread). */
.timeline { --tl-x: 1.1rem; position: relative; padding-left: calc(var(--tl-x) + 1.6rem); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: var(--tl-x); top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; }
.timeline::before { background: var(--rule); }
.timeline::after { background: var(--gold); transform-origin: top; }
@supports (animation-timeline: view()) {
  /* the tip of the gold thread arrives with the reader: progress is measured from the viewport's middle (review row 17) */
  .timeline { view-timeline: --thread block; }
  .timeline::after { animation: tl-draw linear both; animation-timeline: --thread; animation-range: cover 50dvh cover calc(100% - 50dvh); }
  @keyframes tl-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
.tl-group { position: relative; padding-bottom: var(--space-4); }
.tl-group:last-child { padding-bottom: var(--space-3); }
/* the year scrolls with its works (no pinning, no background: Rutger 2026-10-22, the box overlaid the covers) */
.tl-year { position: relative; margin: 0 0 1rem calc(-1 * (var(--tl-x) + 1.6rem)); display: flex; align-items: center; gap: .9rem; pointer-events: none; }
.tl-marker { flex: none; width: 11px; height: 11px; margin-left: calc(var(--tl-x) - 5.5px); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--gold); }
.tl-year-label { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 400; font-variant-numeric: tabular-nums lining-nums; }
.tl-items { display: grid; gap: 1.75rem; }
/* the end of the thread: the seal on the line, one factual sentence, two quiet buttons */
.tl-end { position: relative; z-index: 1; background: var(--paper); padding-top: var(--space-3); margin-left: calc(-1 * (var(--tl-x) + 1.6rem)); padding-left: calc(var(--tl-x) + 1.6rem); }   /* its paper covers the thread below the seal */
.tl-end-seal { position: absolute; left: calc(var(--tl-x) - 20px); top: var(--space-3); width: 40px; height: 40px; color: var(--gold); background: var(--paper); border-radius: 50%; box-shadow: 0 0 0 6px var(--paper); }
.tl-end-seal svg { width: 100%; height: 100%; display: block; }
.tl-end-line { margin: .6rem 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); color: var(--ink-muted); max-width: 30ch; }
@media (min-width: 900px) {
  .tl-end { margin-left: 0; padding-left: 0; padding-top: var(--space-5); text-align: center; }
  .tl-end-seal { left: calc(50% - 20px); top: var(--space-3); }
  .tl-end .actions { justify-content: center; margin-top: 3rem; }   /* room under the seal now that the sentence is gone */
}
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; top: 1.1rem; left: -1.6rem; width: 1.6rem; height: 1px; background: var(--gold); opacity: .55; }
.tl-item .card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .5rem 1.1rem; align-items: start; }
.tl-item .card .cover-link { margin: 0; grid-row: 1 / 6; }
.tl-item .card .descriptor { display: block; -webkit-line-clamp: unset; }
@media (min-width: 900px) {
  .timeline { --tl-x: 50%; padding-left: 0; }
  /* wide: the numeral sits just left of the thread, its marker on the thread; nothing covers the line */
  .tl-year { width: calc(50% + 5.5px); margin: 0 0 1.5rem; flex-direction: row-reverse; justify-content: flex-start; gap: 1rem; }
  .tl-year.tl-year-right { flex-direction: row; margin-left: calc(50% - 5.5px); }   /* years alternate sides with their first work (Rutger 2026-10-22) */
  .tl-marker { margin-left: 0; }
  .tl-year-label { font-size: var(--fs-4); }
  .tl-items { gap: 2.25rem; }
  .tl-item { width: calc(50% - 3.25rem); }
  .tl-item.tl-left { margin-right: auto; }
  .tl-item.tl-right { margin-left: auto; }
  .tl-item.tl-left::before { left: auto; right: -3.25rem; width: 3.25rem; }
  .tl-item.tl-right::before { left: -3.25rem; width: 3.25rem; }
  .tl-item.tl-left .card { grid-template-columns: minmax(0, 1fr) 150px; }
  .tl-item.tl-left .card .cover-link { grid-column: 2; }
  .tl-item.tl-left .card > :not(.cover-link) { grid-column: 1; text-align: right; }
  .tl-item.tl-left .card .actions { justify-content: flex-end; }
  .tl-item.tl-right .card { grid-template-columns: 150px minmax(0, 1fr); }
  .tl-item .card .descriptor { max-width: 40ch; }
  .tl-item.tl-left .card .descriptor { margin-left: auto; }
}
.strand-section { padding-block: 0 var(--space-6); }
.strand-title { font-size: var(--fs-2); margin-bottom: 1.5rem; }
.strand-note { color: var(--ink-muted); max-width: var(--prose); }
.editions-title { font-size: var(--fs-1); margin: 2.5rem 0 1rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- book page */
.book { padding-block: var(--space-3) var(--section); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--fs--1); color: var(--ink-muted); margin-bottom: 1.5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--rule); }
.breadcrumb a { color: var(--ink-muted); }
.book-grid { display: grid; gap: 2rem; }
.book-cover { width: min(70vw, 360px); margin-inline: auto; }
.book-title { font-size: var(--fs-3); margin-bottom: .25rem; }
.book-subtitle { font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); color: var(--ink-muted); margin: 0 0 1rem; line-height: 1.3; }
.book-meta { margin-bottom: 1rem; }
.book-description { margin-top: 2rem; }
.readers-guide { font-size: var(--fs--1); }
.book-praise { padding-block: 1rem 0; }
.book-praise blockquote { margin: 0 0 1.5rem; padding: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); line-height: 1.35; font-variation-settings: "opsz" 72, "SOFT" 40; }
.book-praise footer { font-family: var(--font-body); font-style: normal; font-size: var(--fs--1); color: var(--ink-muted); margin-top: .4rem; }
/* online pieces (On the Seawall): the list of pieces with dates */
.book-links { padding-block: 1rem 0; }
.book-links li { margin: 0 0 .8rem; }
.book-links a { color: var(--ink); text-decoration: none; }
.book-links a:hover cite { color: var(--accent); }
.book-links cite { font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); }
.book-links .meta { display: block; margin: .1rem 0 0; }
.edition-of { color: var(--ink-muted); }
.also, .book-editions { padding-block: var(--space-6) 0; border-top: 1px solid var(--rule); margin-top: var(--space-6); }
.also .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .also .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* four "Also by" cards, no empty slot (review row 11) */
/* Earlier / Later with the covers (Rutger 2026-10-22) */
.book-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: var(--space-6); border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.book-nav p { margin: 0; }
.book-nav a { text-decoration: none; color: var(--ink); display: flex; gap: .9rem; align-items: center; min-height: 44px; }
.book-nav a:hover { color: var(--accent); }
/* a real thumbnail of the cover (no paper plate around it), Rutger 2026-10-22 */
.book-nav-cover { width: 72px; flex: none; padding: 0; background: none; border: 0; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.book-nav-cover picture, .book-nav-cover img { object-fit: cover; object-position: center; aspect-ratio: 2 / 3; display: block; }
.book-nav-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.book-nav-text .eyebrow { margin: 0; }
.book-nav-title { font-family: var(--font-display); font-size: var(--fs-1); line-height: 1.2; }
.book-nav-text .meta { margin: 0; }
.book-nav p:last-child a { flex-direction: row-reverse; text-align: right; }
.book-nav p:last-child .book-nav-text { align-items: flex-end; }
@media (max-width: 499px) { .book-nav { grid-template-columns: 1fr; } .book-nav p:last-child a { flex-direction: row; text-align: left; } .book-nav p:last-child .book-nav-text { align-items: flex-start; } }
@media (min-width: 900px) {
  .book-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 4rem; align-items: start; }
  .book-cover { position: sticky; top: calc(var(--header-h) + 1.5rem); width: 100%; margin: 0; }
}

/* ---------------------------------------------------------------- about */
.about { padding-block: var(--space-3) var(--section); }
.about-portrait { margin: 0 0 var(--space-5); }
.portrait-wide { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 1px solid var(--rule); }
.about-portrait figcaption { font-size: var(--fs--2); color: var(--ink-muted); margin-top: .6rem; }
.page-head-inline { margin-bottom: 1.5rem; }
/* a text page with the ensō drawn large to the right of the text (privacy) */
.page-with-mark { display: grid; gap: 2.5rem; align-items: center; }
.page-enso { display: block; width: min(60vw, 260px); margin: 0 auto; color: var(--gold); opacity: .9; }
.page-enso svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  .page-with-mark { grid-template-columns: minmax(0, 60ch) minmax(0, 1fr); gap: 4rem; }
  .page-enso { width: min(100%, 360px); }
}
.about-prose { position: relative; }
/* margin covers: one group per paragraph, one or two covers (Rutger 2026-10-22: the margin felt empty with three) */
.margin-group { display: flex; gap: .9rem; float: right; margin: .25rem 0 1rem 1.5rem; }
.margin-cover { display: block; width: 88px; text-decoration: none; color: var(--ink-muted); font-size: var(--fs--2); }
.margin-cover .cover-plate { padding: 4%; margin-bottom: .35rem; }
.margin-cover-title { display: block; line-height: 1.25; }
@media (min-width: 1100px) {
  .about-prose { max-width: var(--prose); }
  .margin-group { float: none; position: absolute; right: -300px; width: 270px; margin: 0; }
  .margin-cover { width: 125px; }
}

/* ---------------------------------------------------------------- contact */
.contact { padding-top: 0; }
.contact-form { max-width: 40rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.25rem; }
.field label { font-size: var(--fs--1); color: var(--ink-muted); letter-spacing: .02em; }
.field input, .field textarea { font: inherit; padding: .7rem .8rem; min-height: 48px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus); }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note, .response-note, .form-status { font-size: var(--fs--1); color: var(--ink-muted); }

/* ---------------------------------------------------------------- 404 */
.notfound { text-align: center; padding-block: var(--space-7); }
.notfound-mark { width: 160px; margin: 0 auto 1.5rem; color: var(--gold); }
.notfound .actions { justify-content: center; }
.notfound .brush-rule, .notfound .prose { margin-inline: auto; }

/* ---------------------------------------------------------------- lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(100vw - 2rem, 960px); width: 100%; max-height: 100dvh; margin: auto; color: var(--ink); }
.lightbox::backdrop { background: rgba(18, 18, 22, .78); }
.lightbox-inner { display: grid; gap: 1.5rem; background: var(--paper); padding: 1.25rem; border-radius: var(--radius); position: relative; max-height: calc(100dvh - 2rem); overflow: auto; }
.lightbox-figure img { max-height: 55dvh; width: auto; margin-inline: auto; box-shadow: var(--shadow); object-fit: contain; }
.lightbox-close { position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; border: 1px solid var(--rule); background: var(--paper); border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox-title { font-size: var(--fs-2); margin: 0 0 .25rem; }
.lightbox-hint { font-size: var(--fs--2); color: var(--ink-muted); margin: 1rem 0 0; }
@media (min-width: 700px) { .lightbox-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 2rem; align-items: center; } .lightbox-figure img { max-height: 70dvh; } .lightbox-hint { display: block; } }
/* lightbox motion (opacity + transform only; the global reduced-motion rule switches it off), room for the close button on phones, no scroll behind */
@keyframes lb-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes lb-fade { from { opacity: 0; } }
.lightbox[open] .lightbox-inner { animation: lb-in 200ms var(--ease) both; }
.lightbox[open]::backdrop { animation: lb-fade 200ms var(--ease) both; }
@media (max-width: 699px) { .lightbox-inner { padding-top: 3.75rem; } }
.lightbox-figure img { transition: opacity var(--t-hover) var(--ease); }
html:has(.lightbox[open]) { overflow: hidden; }
/* visible arrows at the far left and right of the dialog (Rutger 2026-10-22); the count replaces the old hint line */
.lightbox { overflow: visible; }
.lightbox-step { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.lightbox-prev { left: -1.75rem; }
.lightbox-next { right: -1.75rem; }
.lightbox-step:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.lightbox-step:active { transform: translateY(-50%) scale(.96); }
.lightbox-step:focus-visible { box-shadow: var(--focus); outline: 0; }
.lightbox-count { margin: 1rem 0 0; font-size: var(--fs--2); color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 699px) { .lightbox-prev { left: .25rem; } .lightbox-next { right: .25rem; } .lightbox-step { top: 30%; width: 44px; height: 44px; } }
@media (max-width: 699px) { .lightbox-hint { display: none; } }

/* ---------------------------------------------------------------- footer */
/* An ink band closes every page (the only dark surface on the site): gold thread on top, his own sentence,
   a large ensō drawn in the margin, then the columns. */
/* The colophon (design review 2026-10-22): the closing page of a well-made book. Gold thread on top, the gold seal
   (the same ensō as the 404 page, 64 px) over his own sentence, the brush rule, then the columns and one base line.
   Only opacity and transform move; the global reduced-motion rule leaves the finished state. */
.site-footer { --fg: #ecebe6; --fg-muted: #b3b2ad; --line: #34343b; position: relative; overflow: hidden; margin-top: var(--space-6);
  background: var(--ink); color: var(--fg-muted); border-top: 2px solid var(--gold); padding-block: var(--space-7) var(--space-3); font-size: var(--fs--1); }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; background-image: var(--grain-image); background-size: 180px 180px; }
.site-footer > * { position: relative; }
.footer-colophon { text-align: center; margin-bottom: var(--space-6); }
.footer-seal { display: block; width: 64px; margin: 0 auto var(--space-3); color: var(--gold); }
.footer-seal svg { width: 100%; height: auto; display: block; transform-origin: 50% 50%; }
.footer-quote { margin: 0; }
.footer-quote-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-3); line-height: 1.22; color: var(--fg); max-width: 22ch; margin: 0 auto .9rem; font-variation-settings: "opsz" 144, "SOFT" 60; text-wrap: balance; }
.footer-quote-by { margin: 0; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: var(--fs--2); font-weight: 600; }
.footer-rule { display: block; width: 120px; height: 6px; margin: var(--space-3) auto 0; color: var(--gold); transform-origin: 50% 50%; }
@supports (animation-timeline: view()) {
  .footer-seal svg { animation: seal-in linear both; animation-timeline: view(); animation-range: cover 0% cover 40%; }
  .footer-rule { animation: rule-in linear both; animation-timeline: view(); animation-range: cover 0% cover 35%; }
  @keyframes seal-in { from { opacity: .15; transform: rotate(-32deg) scale(.9); } }
  @keyframes rule-in { from { opacity: 0; transform: scaleX(.3); } }
}
.footer-grid { display: grid; gap: 2rem; padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; } }
.footer-name { font-family: var(--font-display); font-size: var(--fs-2); color: var(--fg); margin-bottom: .25rem; }
.footer-line { max-width: 30ch; }
.footer-head { color: var(--fg); margin-bottom: .5rem; font-weight: 600; letter-spacing: .08em; font-size: var(--fs--2); text-transform: uppercase; }
.site-footer a { color: var(--fg-muted); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.site-footer a:hover { color: var(--gold); }
.site-footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: none; }
.footer-essays a { flex-wrap: wrap; gap: 0 .5rem; }
.footer-essay-title { font-family: var(--font-display); font-style: italic; color: var(--fg); font-size: var(--fs-0); }
.footer-essay-when { font-size: var(--fs--2); }
.footer-base { margin-top: var(--space-5); padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; font-size: var(--fs--2); }
.footer-pages { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.footer-pages a { padding: 0 .35rem; }
.footer-pages li + li::before { content: "·"; color: var(--gold); }
.footer-legal { margin: 0; }
.credit { opacity: .8; }
.page-home .site-footer { margin-top: 0; }

/* ---------------------------------------------------------------- style guide only */
.swatches { display: flex; flex-wrap: wrap; gap: 1rem; }
.swatch { display: inline-block; width: 44px; height: 44px; border: 1px solid var(--rule); vertical-align: middle; margin-right: .5rem; border-radius: var(--radius); }
.swatch[data-token="paper"] { background: var(--paper); } .swatch[data-token="ink"] { background: var(--ink); } .swatch[data-token="ink-muted"] { background: var(--ink-muted); }
.swatch[data-token="rule"] { background: var(--rule); } .swatch[data-token="accent"] { background: var(--accent); } .swatch[data-token="gold"] { background: var(--gold); }
.display-sample { font-family: var(--font-display); font-size: var(--fs-2); }

/* ---------------------------------------------------------------- view transitions (same-origin navigation) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------------------------------------------------------------- print */
@media print {
  :root { --paper: #fff; --ink: #000; --ink-muted: #333; --grain-opacity: 0; }
  body::before, .site-header, .site-footer, .skip, .lightbox, .actions, .filter-row, .view-toggle, .menu, .book-nav, .also, .library .section-sub { display: none !important; }
  body { font-size: 11pt; }
  .reveal { opacity: 1; transform: none; }
  .cover-plate { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .about-prose { max-width: none; }
  .margin-cover { float: right; position: static; width: 90px; }
  a { color: #000; text-decoration: none; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .card-title { font-size: 11pt; }
}