/* GENERATED by generator/build.ts — do not edit. Tokens come from the design system. */


:root {
  
  --ds-taupe-50: oklch(98.6% 0.002 67.8);
  --ds-taupe-100: oklch(96% 0.002 17.2);
  --ds-taupe-200: oklch(92.2% 0.005 34.3);
  --ds-taupe-300: oklch(86.8% 0.007 39.5);
  --ds-taupe-400: oklch(71.4% 0.014 41.2);
  --ds-taupe-500: oklch(54.7% 0.021 43.1);
  --ds-taupe-600: oklch(43.8% 0.017 39.3);
  --ds-taupe-700: oklch(36.7% 0.016 35.7);
  --ds-taupe-800: oklch(26.8% 0.011 36.5);
  --ds-taupe-900: oklch(21.4% 0.009 43.1);
  --ds-taupe-950: oklch(14.7% 0.004 49.3);

  
  --ds-accent-50: oklch(97.1% 0.0089 28.27);
  --ds-accent-100: oklch(93.6% 0.0207 28.27);
  --ds-accent-200: oklch(88.5% 0.0443 28.27);
  --ds-accent-300: oklch(80.8% 0.0812 28.27);
  --ds-accent-400: oklch(70.4% 0.127 28.27);
  --ds-accent-500: oklch(63.7% 0.1477 28.27);
  --ds-accent-600: oklch(60.5% 0.1477 28.27);
  --ds-accent-700: oklch(50.5% 0.1359 28.27);
  --ds-accent-800: oklch(44.4% 0.1167 28.27);
  --ds-accent-900: oklch(39.6% 0.1034 28.27);
  --ds-accent-950: oklch(25.8% 0.0679 28.27);

  
  --ds-bg: var(--ds-taupe-50);
  --ds-bg-subtle: var(--ds-taupe-100);
  --ds-surface: #FFFFFF;
  --ds-fg: var(--ds-taupe-900);
  --ds-fg-muted: var(--ds-taupe-600);
  --ds-fg-subtle: var(--ds-taupe-500);
  --ds-code-bg: var(--ds-taupe-100);
  --ds-selection-bg: var(--ds-taupe-300);
  --ds-selection-fg: var(--ds-taupe-900);
  --ds-border: var(--ds-taupe-200);
  --ds-border-strong: var(--ds-taupe-500);
  --ds-accent: var(--ds-accent-600);
  --ds-accent-text: var(--ds-accent-700);
  --ds-accent-text-hover: var(--ds-accent-800);
  --ds-accent-solid: var(--ds-accent-700);
  --ds-accent-fg: #FFFFFF;
  --ds-accent-subtle: var(--ds-accent-50);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --ds-bg: var(--ds-taupe-950);
  --ds-bg-subtle: var(--ds-taupe-900);
  --ds-surface: var(--ds-taupe-900);
  --ds-fg: var(--ds-taupe-100);
  --ds-fg-muted: var(--ds-taupe-400);
  --ds-fg-subtle: var(--ds-taupe-500);
  --ds-code-bg: var(--ds-taupe-800);
  --ds-selection-bg: var(--ds-taupe-700);
  --ds-selection-fg: var(--ds-taupe-50);
  --ds-border: var(--ds-taupe-800);
  --ds-border-strong: var(--ds-taupe-500);
  --ds-accent: var(--ds-accent-400);
  --ds-accent-text: var(--ds-accent-400);
  --ds-accent-text-hover: var(--ds-accent-300);
  --ds-accent-solid: var(--ds-accent-400);
  --ds-accent-fg: var(--ds-taupe-950);
  --ds-accent-subtle: var(--ds-accent-950);

    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --ds-bg: var(--ds-taupe-950);
  --ds-bg-subtle: var(--ds-taupe-900);
  --ds-surface: var(--ds-taupe-900);
  --ds-fg: var(--ds-taupe-100);
  --ds-fg-muted: var(--ds-taupe-400);
  --ds-fg-subtle: var(--ds-taupe-500);
  --ds-code-bg: var(--ds-taupe-800);
  --ds-selection-bg: var(--ds-taupe-700);
  --ds-selection-fg: var(--ds-taupe-50);
  --ds-border: var(--ds-taupe-800);
  --ds-border-strong: var(--ds-taupe-500);
  --ds-accent: var(--ds-accent-400);
  --ds-accent-text: var(--ds-accent-400);
  --ds-accent-text-hover: var(--ds-accent-300);
  --ds-accent-solid: var(--ds-accent-400);
  --ds-accent-fg: var(--ds-taupe-950);
  --ds-accent-subtle: var(--ds-accent-950);

  color-scheme: dark;
}

[data-theme='light'] {
  --ds-bg: var(--ds-taupe-50);
  --ds-bg-subtle: var(--ds-taupe-100);
  --ds-surface: #FFFFFF;
  --ds-fg: var(--ds-taupe-900);
  --ds-fg-muted: var(--ds-taupe-600);
  --ds-fg-subtle: var(--ds-taupe-500);
  --ds-code-bg: var(--ds-taupe-100);
  --ds-selection-bg: var(--ds-taupe-300);
  --ds-selection-fg: var(--ds-taupe-900);
  --ds-border: var(--ds-taupe-200);
  --ds-border-strong: var(--ds-taupe-500);
  --ds-accent: var(--ds-accent-600);
  --ds-accent-text: var(--ds-accent-700);
  --ds-accent-text-hover: var(--ds-accent-800);
  --ds-accent-solid: var(--ds-accent-700);
  --ds-accent-fg: #FFFFFF;
  --ds-accent-subtle: var(--ds-accent-50);

  color-scheme: light;
}



@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambetta';
  src: url('/assets/fonts/gambetta/Gambetta-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Argon';
  src: url('/assets/fonts/monaspace-argon/MonaspaceArgon-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Argon';
  src: url('/assets/fonts/monaspace-argon/MonaspaceArgon-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ds-font-serif: 'Gambetta', ui-serif, Georgia, serif;
  --ds-font-mono: 'Monaspace Argon', ui-monospace, 'SF Mono', Menlo, monospace;

  
  --ds-mono-features: 'calt' 1, 'liga' 1, 'ss01' 1, 'ss02' 1, 'ss03' 1, 'ss04' 1, 'ss05' 1, 'ss06' 1, 'ss07' 1, 'ss08' 1;

  
  --ds-text-xs: 11px;
  --ds-text-sm: 14px;
  --ds-text-base: 17px;
  --ds-text-lg: 21px;
  --ds-text-xl: 26px;
  --ds-text-2xl: 33px;
  --ds-text-3xl: 40px;
  --ds-text-4xl: 50px;
  --ds-text-5xl: 62px;

  --ds-leading-tight: 1.18;
  --ds-leading-snug: 1.3;
  --ds-leading-heading: 1.35;
  --ds-leading-normal: 1.58;
  --ds-leading-code: 1.5;

  --ds-weight-light: 300;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  --ds-tracking-tight: -0.018em;
  --ds-tracking-heading: -0.005em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.02em;

  
  --ds-space-3xs: 2px;
  --ds-space-2xs: 4px;
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 64px;
  --ds-space-4xl: 96px;
  --ds-space-5xl: 128px;

  --ds-radius-none: 0;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 22px;
  --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --ds-shadow-md: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18);
  --ds-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.06), 0 18px 44px -20px rgb(0 0 0 / 0.24);

  
  --ds-logo-clear-space: 0.42;

  
  --ds-measure: 68ch;
}

::selection {
  background: var(--ds-selection-bg);
  color: var(--ds-selection-fg);
}

.ds-h1 {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-bold);
  font-style: normal;
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-heading);
}

.ds-h2 {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-regular);
  font-style: italic;
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-h3 {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-medium);
  font-style: normal;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-h4 {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  font-style: normal;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-body {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-regular);
  font-style: normal;
  line-height: var(--ds-leading-normal);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-strong {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-semibold);
  font-style: normal;
  line-height: var(--ds-leading-normal);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-lead {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-light);
  font-style: normal;
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-normal);
}

.ds-code {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-regular);
  font-style: normal;
  line-height: var(--ds-leading-code);
  letter-spacing: var(--ds-tracking-normal);
  font-feature-settings: var(--ds-mono-features);
}

.ds-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  font-style: normal;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-wide);
  font-feature-settings: var(--ds-mono-features);
}

.ds-caption {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-regular);
  font-style: normal;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-wide);
  font-feature-settings: var(--ds-mono-features);
}

.ds-prose {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-fg);
  max-width: var(--ds-measure);
}
.ds-prose h1 { font: var(--ds-weight-bold) var(--ds-text-3xl)/var(--ds-leading-tight) var(--ds-font-serif); letter-spacing: var(--ds-tracking-heading); margin-block: var(--ds-space-2xl) var(--ds-space-md); }
.ds-prose h2 { font: italic var(--ds-weight-regular) var(--ds-text-xl)/var(--ds-leading-snug) var(--ds-font-serif); margin-block: var(--ds-space-xl) var(--ds-space-sm); }
.ds-prose h3 { font: var(--ds-weight-medium) var(--ds-text-lg)/var(--ds-leading-heading) var(--ds-font-serif); margin-block: var(--ds-space-lg) var(--ds-space-xs); }
.ds-prose h4 { font: var(--ds-weight-semibold) var(--ds-text-base)/var(--ds-leading-heading) var(--ds-font-serif); margin-block: var(--ds-space-md) var(--ds-space-2xs); }
.ds-prose p { margin-block: 0 var(--ds-space-md); }
.ds-prose strong { font-weight: var(--ds-weight-semibold); }
.ds-prose a { color: var(--ds-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
.ds-prose a:hover { color: var(--ds-accent-text-hover); }
.ds-prose code, .ds-prose pre {
  font-family: var(--ds-font-mono);
  font-feature-settings: var(--ds-mono-features);
  font-size: var(--ds-text-sm);
}
.ds-prose :not(pre) > code { background: var(--ds-code-bg); padding: 0.1em 0.34em; border-radius: var(--ds-radius-sm); }
.ds-prose pre { background: var(--ds-bg-subtle); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-sm) var(--ds-space-md); overflow-x: auto; line-height: var(--ds-leading-code); }
.ds-prose blockquote { margin-inline: 0; padding-inline-start: var(--ds-space-md); border-inline-start: 2px solid var(--ds-border-strong); font-style: italic; color: var(--ds-fg-muted); }



*, *::before, *::after { box-sizing: border-box; }

:root {
  --glow: color-mix(in oklab, var(--ds-taupe-400) 14%, transparent);
  --mark-opacity: 0.04;
  --grain-opacity: 0.035;
  
  --image-outline: oklch(0 0 0 / 0.1);

  
  --ds-text-xs: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --glow: color-mix(in oklab, var(--ds-accent-400) 17%, transparent);
    --mark-opacity: 0.05;
    --grain-opacity: 0.08;
    --image-outline: oklch(1 0 0 / 0.1);
  }
}
[data-theme='dark'] {
  --glow: color-mix(in oklab, var(--ds-accent-400) 17%, transparent);
  --mark-opacity: 0.05;
  --grain-opacity: 0.08;
  --image-outline: oklch(1 0 0 / 0.1);
}
[data-theme='light'] {
  --glow: color-mix(in oklab, var(--ds-taupe-400) 14%, transparent);
  --mark-opacity: 0.04;
  --grain-opacity: 0.035;
  --image-outline: oklch(0 0 0 / 0.1);
}

body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-fg);
  font-family: var(--ds-font-serif);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 42vh;
  background: radial-gradient(ellipse 85% 100% at 50% -18%, var(--glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/assets/noise.svg");
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: -1;
}

.bg-mark {
  position: fixed;
  top: 8vh;
  right: -12vw;
  height: 72vh;
  width: auto;
  color: var(--ds-accent);
  opacity: var(--mark-opacity);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 720px) {
  .bg-mark { height: 46vh; right: -30vw; }
}

.wrap {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--ds-space-xl) var(--ds-space-lg) var(--ds-space-4xl);
}

.skip-link {
  position: absolute; inset-inline-start: var(--ds-space-xs); top: var(--ds-space-xs);
  padding: var(--ds-space-2xs) var(--ds-space-sm);
  background: var(--ds-accent-solid); color: var(--ds-accent-fg);
  border-radius: var(--ds-radius-sm); transform: translateY(-200%);
  z-index: 10;
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

.theme-toggle, .filter-btn, .work-cta {
  transition-property: scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.theme-toggle:active, .filter-btn:active, .work-cta:active { scale: 0.96; }

.ds-h1, .chronicle-list :is(h2, h3), .work-card :is(h2, h3), section.home-block > h2 { text-wrap: balance; }
.ds-lead, .chronicle-list p, .work-card .subtitle, .empty-note { text-wrap: pretty; }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-space-md); flex-wrap: wrap;
  margin-bottom: var(--ds-space-3xl);
}
.masthead .logo { display: inline-flex; align-items: center; color: var(--ds-accent); }
.masthead .logo svg { height: 34px; width: auto; display: block; }

.masthead nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-md); }
.masthead nav a {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  letter-spacing: var(--ds-tracking-wide);
  text-decoration: none;
  color: var(--ds-fg-muted);
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ds-accent-text); }

.theme-toggle {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide);
  padding: var(--ds-space-2xs) var(--ds-space-sm);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-full);
  background: var(--ds-surface); color: var(--ds-fg); cursor: pointer;
  white-space: nowrap;
}
html:not(.js) .theme-toggle { display: none; }

.hero { margin-bottom: var(--ds-space-2xl); }
.hero h1 { margin: 0 0 var(--ds-space-sm); }
.hero .ds-lead { margin: 0; color: var(--ds-fg-muted); max-width: var(--ds-measure); }

.contact-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ds-space-xs) var(--ds-space-md);
  margin: var(--ds-space-lg) 0 0;
  padding: 0; list-style: none;
  font-family: var(--ds-font-mono); font-size: var(--ds-text-sm);
}
.contact-row .contact-sep { color: var(--ds-fg-subtle); user-select: none; }
.contact-row a { color: var(--ds-accent-text); text-decoration: none; }
.contact-row a:hover { color: var(--ds-accent-text-hover); text-decoration: underline; }

section.home-block { margin-block: var(--ds-space-3xl); }

section.home-block > h2 {
  font: italic var(--ds-weight-regular) var(--ds-text-xl)/var(--ds-leading-snug) var(--ds-font-serif);
  letter-spacing: var(--ds-tracking-normal);
  color: var(--ds-fg);
  margin: 0 0 var(--ds-space-md);
  padding-bottom: var(--ds-space-xs);
  border-bottom: 1px solid var(--ds-border);
}

.chronicle-list { list-style: none; margin: 0; padding: 0; }

.chronicle-list li { padding-block: var(--ds-space-lg); }
.chronicle-list li + li { border-top: 1px solid var(--ds-border); }

.chronicle-list :is(h2, h3) { margin: 0 0 var(--ds-space-3xs); font: var(--ds-weight-medium) var(--ds-text-lg)/var(--ds-leading-heading) var(--ds-font-serif); }
.chronicle-list :is(h2, h3) a { color: var(--ds-fg); text-decoration: none; }
.chronicle-list :is(h2, h3) a:hover { color: var(--ds-accent-text); }
.chronicle-list p { margin: 0 0 var(--ds-space-3xs); color: var(--ds-fg-muted); font-size: var(--ds-text-sm); max-width: var(--ds-measure); }

.chronicle-meta {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide); color: var(--ds-fg-muted);
}
.chronicle-meta a { color: inherit; }

.empty-note { color: var(--ds-fg-muted); max-width: var(--ds-measure); }

.filters { display: none; }
html.js .filters {
  display: flex; flex-direction: column; gap: var(--ds-space-md);
  margin-bottom: var(--ds-space-xl);
}

.filter-field { display: flex; flex-direction: column; gap: var(--ds-space-2xs); }
.filters input[type="search"] {
  font-family: var(--ds-font-serif); font-size: var(--ds-text-base);
  padding: var(--ds-space-xs) var(--ds-space-sm);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md);
  background: var(--ds-bg); color: var(--ds-fg);
  width: 100%;
}

.filters input::placeholder { color: var(--ds-fg-muted); opacity: 1; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-2xs); align-items: center; }

.filter-label {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide); color: var(--ds-fg-muted);
  text-transform: uppercase;
}
.filter-row .filter-label { margin-inline-end: var(--ds-space-2xs); }
#no-matches p + p { margin-top: var(--ds-space-sm); }
.filter-btn {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide);
  padding: 3px 10px; border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-surface); color: var(--ds-fg-muted); cursor: pointer;
}
.filter-btn[aria-pressed="true"] {
  background: var(--ds-accent-solid); color: var(--ds-accent-fg);
  border-color: transparent;
}

article.chronicle header { margin-bottom: var(--ds-space-lg); }
article.chronicle h1 { margin: 0 0 var(--ds-space-xs); }
article.chronicle .chronicle-meta { display: block; }

.divider {
  border: 0; margin: var(--ds-space-xl) auto;
  display: flex; justify-content: center;
  color: var(--ds-fg-subtle); opacity: 0.7;
}
.divider svg { width: 30px; height: auto; display: block; }

.work-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-xl) var(--ds-space-lg) var(--ds-space-lg);
  box-shadow: var(--ds-shadow-sm);
  margin-block: var(--ds-space-lg);
}

.work-media { margin: var(--ds-space-sm) 0 var(--ds-space-lg); }
.work-media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ds-radius-md);
  outline: 1px solid var(--image-outline); outline-offset: -1px;
}
@media (min-width: 720px) {
  .work-card.has-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: var(--ds-space-lg);
  }
  .work-card.has-media > :not(.work-media) { grid-column: 1; }
  .work-card.has-media > ul,
  .work-card.has-media > .work-cta { grid-column: 1 / -1; }
  
  .work-card.has-media > .work-cta { justify-self: start; }
  
  .work-card.has-media > .work-media { grid-column: 2; grid-row: 1 / 5; align-self: start; margin: 0; }
  
  .work-card.has-media > .work-media.is-fill { align-self: stretch; }
  .work-card.has-media > .work-media.is-fill img { height: 100%; object-fit: cover; object-position: left top; }
}

.work-card :is(h2, h3) { margin: 0 0 var(--ds-space-3xs); font: var(--ds-weight-medium) var(--ds-text-lg)/var(--ds-leading-heading) var(--ds-font-serif); }
.work-card .subtitle { margin: 0 0 var(--ds-space-sm); font-style: italic; color: var(--ds-fg-muted); }
.work-card p { max-width: var(--ds-measure); }
.work-card ul { margin: var(--ds-space-sm) 0 0; padding-inline-start: 1.2em; }
.work-card li { margin-block: var(--ds-space-3xs); }

.work-eyebrow {
  display: flex; align-items: center; gap: var(--ds-space-2xs);
  margin: 0 0 var(--ds-space-sm);
}
.work-category, .work-status {
  display: inline-block; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-wide);
  padding: 3px 8px; border-radius: var(--ds-radius-full);
  text-transform: uppercase;
}
.work-category {
  border: 1px solid var(--ds-border-strong); color: var(--ds-fg-muted);
}
.work-status {
  border: 1px dashed var(--ds-border-strong); color: var(--ds-fg-muted);
}
.work-cta {
  display: inline-block; margin-top: var(--ds-space-sm);
  font-family: var(--ds-font-serif); font-weight: var(--ds-weight-medium);
  padding: var(--ds-space-xs) var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent-solid); color: var(--ds-accent-fg);
  text-decoration: none;
}

.work-cta:hover { background: var(--ds-accent-text-hover); color: var(--ds-accent-fg); }

.work-page .work-media.is-cover { max-width: 240px; }

.work-offers { margin-block: var(--ds-space-lg) var(--ds-space-xl); }

.price-banner {
  margin: 0 0 var(--ds-space-md);
  padding: var(--ds-space-md) var(--ds-space-lg);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent-subtle);
}
.price-banner p { margin: 0; }
.price-banner .price-banner-heading { margin-bottom: var(--ds-space-3xs); font: var(--ds-weight-medium) var(--ds-text-lg)/var(--ds-leading-heading) var(--ds-font-serif); }
.offer-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--ds-space-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.offer {
  display: flex; flex-direction: column;
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-lg);
}
.work-page .offer-tier { margin: 0 0 var(--ds-space-2xs); font: var(--ds-weight-medium) var(--ds-text-lg)/var(--ds-leading-heading) var(--ds-font-serif); }
.offer-price { margin: 0 0 var(--ds-space-sm); }
.price-now { font: var(--ds-weight-medium) var(--ds-text-xl)/1 var(--ds-font-serif); }
.price-list { color: var(--ds-fg-muted); margin-inline-start: var(--ds-space-2xs); }
.price-tax { color: var(--ds-fg-muted); font-size: var(--ds-text-sm); margin-inline-start: var(--ds-space-2xs); }
.offer-summary { margin: 0 0 var(--ds-space-sm); color: var(--ds-fg-muted); }
.offer-features { margin: 0 0 var(--ds-space-lg); padding-inline-start: 1.2em; }
.offer-features li { margin-block: var(--ds-space-3xs); }

.offer .work-cta { margin-top: auto; align-self: start; }
.offers-note { margin: var(--ds-space-sm) 0 0; color: var(--ds-fg-muted); font-size: var(--ds-text-sm); }
.work-download { margin: 0 0 var(--ds-space-lg); }
.offers-pending { margin: 0 0 var(--ds-space-lg); color: var(--ds-fg-muted); }
.download-detail { color: var(--ds-fg-muted); font-size: var(--ds-text-sm); }

.ds-lead { font-weight: var(--ds-weight-medium); }

main a { color: var(--ds-accent-text); }
main a:hover { color: var(--ds-accent-text-hover); }

footer.site-footer {
  margin-top: var(--ds-space-4xl);
  padding-top: var(--ds-space-md);
  border-top: 1px solid var(--ds-border);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-fg-muted);
}
footer.site-footer p { margin: 0 0 var(--ds-space-3xs); }
footer.site-footer a { color: var(--ds-fg-muted); }
footer.site-footer a:hover { color: var(--ds-accent-text); }

.notfound { text-align: center; padding-block: var(--ds-space-4xl); }
.notfound .mark { color: var(--ds-accent); display: flex; justify-content: center; margin-bottom: var(--ds-space-lg); }
.notfound .mark svg { height: 72px; width: auto; }