/* Hallmark · shape: kept from design/index.html, adapted to the post list · genre: editorial · theme: editorial (dealt 2/3, seed student-weekly-personal-journal-5852·122d8e38·2026-10-28·r0) · redesign: restyle
 * paper: oklch(94.8% 0.017 85) · accent: oklch(43% 0.09 158) · display: Bricolage Grotesque · body: Source Serif 4 · hero: the latest post, its first picture beside it · nav: wordmark left, two links, over a heavy ink rule · footer: the page's one ink band · signature: the latest week set as a cover line
 * axes: light/display-condensed/chromatic-green · posture: full palette (Bob's palette: racing green as the theme's green, sky on the mark, gold in the footer) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, the post list has only titles and dates; the latest post's own picture leads so the page is Bob's */

/* ---------- Tokens: Editorial set in Bob's palette (mirrors design/tokens.css) ---------- */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --container: 1240px; --gutter: max(var(--space-lg), env(safe-area-inset-left, 0px)); --gap-columns: 32px;
  --z-sticky-nav: 300; --z-toast: 500;

  --color-paper: oklch(94.8% 0.017 85); --color-paper-2: oklch(91.5% 0.02 85); --color-paper-3: oklch(88% 0.022 84);
  --color-ink: oklch(15.6% 0.011 276); --color-ink-2: oklch(27% 0.012 276); --color-muted: oklch(46% 0.014 276);
  --color-rule: oklch(84% 0.018 84); --color-rule-2: oklch(62% 0.016 80);
  --color-bright: oklch(98.5% 0.006 85); --color-night: oklch(15.6% 0.011 276); --color-night-rule: oklch(30% 0.019 276); --color-night-muted: oklch(79.2% 0.024 278);
  --color-accent: oklch(43% 0.09 158); --color-accent-ink: oklch(98.5% 0.006 85); --color-focus: oklch(46% 0.1 158);
  --color-gold: oklch(83.9% 0.171 83); --color-sky: oklch(51.9% 0.269 266);

  --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-body: "Source Serif 4", ui-serif, Georgia, serif;
  --font-code: ui-monospace, "Cascadia Code", Consolas, monospace;
  --radius-card: 0; --rule-hair: 1px; --rule-heavy: 4px;
  --tracking-display: -0.012em;
}
@media (max-width: 40rem) { :root { --gutter: max(var(--space-md), env(safe-area-inset-left, 0px)); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--space-3xl); scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-paper); color: var(--color-ink-2); font: 400 18px/1.55 var(--font-body); font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-color: var(--color-rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: var(--tracking-display); color: var(--color-ink); line-height: 1; font-synthesis: none; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.label, .dateline, nav, time, .btn, .tag, figcaption, .site-footer small { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-variant-numeric: lining-nums; }
.inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-xs); }
main { flex: 1; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.site-header .inner { min-height: var(--space-2xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.site-title { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font: 800 var(--text-xl)/1 var(--font-display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; text-transform: lowercase; }
.site-title svg { width: 26px; height: 26px; color: var(--color-sky); flex: none; }
.site-title:hover { color: var(--color-ink-2); }
.site-header nav { display: flex; gap: var(--space-lg); font-size: var(--text-sm); }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration-color: var(--color-accent); }

/* ---------- Home: the latest post ---------- */
.lead-post { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: min(72svh, 640px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lead-post.no-photo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.lead-photo { margin: 0; min-height: 320px; position: relative; overflow: hidden; }
.lead-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.lead-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-2xl) var(--gutter) var(--space-2xl) var(--space-xl); max-width: 680px; }
.lead-post.no-photo .lead-copy { max-width: var(--container); margin-inline: auto; width: 100%; padding-inline: var(--gutter); }
.lead-copy h1 { font-size: clamp(3.25rem, 6vw + 1rem, 6.5rem); line-height: .92; max-width: 14ch; }
.lead-copy h1 a { text-decoration: none; }
.lead-copy h1 a:hover { color: var(--color-ink-2); }
.dateline { padding-top: var(--space-sm); border-top: var(--rule-heavy) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-muted); }
.dateline time { color: var(--color-ink); }
.lead-copy .standfirst { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); max-width: 46ch; }

.btn { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; padding: 0 var(--space-lg); background: var(--color-ink); color: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Home: earlier posts as contents rows ---------- */
.archive { padding-block: var(--space-2xl) var(--space-3xl); }
.archive h2 { font-size: clamp(2rem, 1.6vw + 1.2rem, 2.75rem); padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
.post-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.post-list li { display: grid; grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xs) var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.post-list li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.post-list time { font-size: var(--text-sm); color: var(--color-muted); }
.post-list h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 2.25rem); line-height: 1.02; }
.post-list h3 a { text-decoration: none; }
.post-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.post-list p { color: var(--color-ink-2); max-width: 48ch; }
.empty { padding-block: var(--space-3xl); }
.empty h1 { font-size: var(--text-display); }
.empty p { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 46ch; }

/* ---------- A post ---------- */
.post { padding-block: var(--space-2xl) var(--space-3xl); }
.post-head { max-width: 980px; display: grid; gap: var(--space-lg); }
.post-head h1 { font-size: clamp(3rem, 5vw + 1rem, 6rem); line-height: .92; max-width: 16ch; }
.post-head .standfirst { font-size: var(--text-display-s); line-height: 1.15; color: var(--color-ink); max-width: 30ch; }
.tag { display: inline-block; vertical-align: middle; margin-left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); line-height: 1.3; letter-spacing: 0; }
.post-body { max-width: 68ch; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); line-height: 1.7; }
.post-body > * + * { margin-top: var(--space-md); }
.post-body p, .post-body li { max-width: 68ch; }
.post-body h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.05; }
.post-body h3 { margin-top: var(--space-xl); font-size: var(--text-xl); line-height: 1.1; }
.post-body h4 { margin-top: var(--space-lg); font-size: var(--text-lg); }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: var(--space-sm); }
.post-body a { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.post-body a:hover { color: var(--color-accent); }
.post-body img { margin-block: var(--space-lg); width: auto; max-height: 80svh; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.post-body p:has(> img:only-child) { max-width: none; }
.post-body blockquote { margin: var(--space-xl) 0; padding-left: var(--space-lg); border-left: var(--rule-heavy) solid var(--color-ink); font-style: italic; font-size: var(--text-lead); color: var(--color-ink); }
.post-body ul, .post-body ol { padding-left: var(--space-lg); }
.post-body li + li { margin-top: var(--space-2xs); }
.post-body hr { margin: var(--space-2xl) 0; border: 0; border-top: var(--rule-heavy) solid var(--color-ink); width: var(--space-2xl); }
.post-body code { font-family: var(--font-code); font-size: .88em; background: var(--color-paper-2); padding: 0 var(--space-2xs); }
.post-body pre { overflow-x: auto; padding: var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); line-height: 1.5; }
.post-body pre code { padding: 0; background: none; }
.post-body table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.post-body th { text-align: left; font: 500 var(--text-sm)/1.3 var(--font-display); font-variation-settings: "opsz" 12; border-bottom: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; white-space: nowrap; }
.post-body td { border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; }

/* ---------- Not found ---------- */
.not-found { padding-block: var(--space-3xl); }
.not-found h1 { font-size: var(--text-display); }
.not-found p { margin-top: var(--space-lg); font-size: var(--text-lead); }

/* ---------- Footer: the page's one ink band ---------- */
.site-footer { background: var(--color-night); color: var(--color-bright); --color-focus: var(--color-gold); }
.site-footer .inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-2xl) var(--space-lg); }
.site-footer .site-title { color: var(--color-bright); }
.site-footer .site-title svg { color: var(--color-gold); }
.site-footer .about p { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-md); line-height: 1.65; color: var(--color-night-muted); }
.site-footer nav { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-night-rule); }
.site-footer nav a { color: var(--color-bright); text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-footer nav a:hover { text-decoration-color: var(--color-gold); }
.site-footer small { grid-column: 1 / -1; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-night-rule); font-size: var(--text-sm); color: var(--color-night-muted); }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .lead-post { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lead-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .lead-copy { padding: var(--space-xl) var(--gutter); }
  .post-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .site-footer .inner { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  a, .btn { transition: none; }
  .btn:active { transform: none; }
}