* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--weight-body); line-height: var(--lh-body); }
header, main, footer { width: var(--container); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-bottom: var(--hair); }
.logo { display: block; height: 28px; width: auto; }
main { padding-block: var(--space-8); }
h1, h2 { overflow-wrap: normal; word-break: keep-all; line-break: strict; text-wrap: balance; }
h1 { max-width: var(--measure-narrow); margin: 0 0 var(--space-4); font-size: var(--fs-display); line-height: var(--lh-head); font-weight: var(--weight-display); letter-spacing: var(--tracking-head); }
h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: var(--weight-head); }
a { color: var(--ink); text-underline-offset: .25em; }
a:hover, a:active { color: var(--accent); }
a:focus-visible { outline: var(--border-w-strong) solid var(--accent); outline-offset: var(--space-1); }
p, li, a, dd, figcaption { overflow-wrap: anywhere; }
p { max-width: var(--measure); }
.eyebrow { margin: 0 0 var(--space-3); font-size: var(--fs-label); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.lead { color: var(--ink-soft); margin-bottom: var(--space-4); }
.index-intro { margin-bottom: var(--section-gap); }
.cta { display: inline-flex; justify-content: center; align-items: center; padding: var(--space-3) var(--space-4); background: var(--accent-fill); color: var(--on-accent); border: var(--border-w-strong) solid var(--accent-fill); border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--weight-strong); }
.cta:hover, .cta:active { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent); }
.grid { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--section-gap) var(--gap); }
.card { min-width: 0; border-bottom: var(--hair); padding-bottom: var(--space-4); }
.card h2 { margin-bottom: var(--space-2); }
.card .eyebrow { color: var(--ink-mute); margin-top: var(--space-4); margin-bottom: var(--space-2); }
.card-period { margin-top: 0; color: var(--ink-mute); font-size: var(--fs-label); }
.plain-panel { min-height: calc(2 * var(--space-8)); background: var(--surface); display: grid; place-items: center; padding: var(--space-4); }
figure { margin: 0; min-width: 0; }
.shot { display: block; width: 100%; height: auto; background: var(--surface); background-image: var(--shot-placeholder); border: 0; }
figcaption { margin-top: var(--space-2); color: var(--ink-mute); font-size: var(--fs-label); }
.card .shot { aspect-ratio: 8 / 5; object-fit: contain; }
.case-title { font-size: calc((var(--fs-display) + var(--fs-h1)) / 2); max-width: var(--measure); }
.subtitle { display: block; margin-top: var(--space-3); color: var(--ink-soft); font-size: var(--fs-h2); font-weight: var(--weight-body); }
.case-intro > a { display: inline-block; margin-bottom: var(--space-6); font-size: var(--fs-label); color: var(--ink-mute); }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.case-hero { margin-top: var(--space-6); padding: 0; border: 0; }
.showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.showcase-pair { grid-template-columns: 2fr 1fr; }
section { margin-top: var(--section-gap); padding-top: var(--space-4); border-top: var(--hair); }
.case-section { padding: var(--space-4); }
.case-section:nth-child(even) { background: var(--surface); }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); padding-block: var(--space-3); border-bottom: var(--hair); }
dt { font-size: var(--fs-label); color: var(--ink-mute); }
dd { min-width: 0; margin: 0; font-size: var(--fs-body); font-weight: var(--weight-strong); }
.badge, .chip { display: inline-block; padding: var(--space-1) var(--space-2); border: var(--border-w) solid var(--ui-border); font-size: var(--fs-label); border-radius: var(--radius-sm); }
.badge { color: var(--ink-soft); }
.badge-primary { color: var(--accent); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { font-weight: var(--weight-body); }
.citation { color: var(--ink-mute); font-size: var(--fs-label); margin-top: var(--space-4); }
ul { list-style: none; padding: 0; margin-block: var(--space-4); }
li { border-top: var(--hair); padding-block: var(--space-3); }
.card li a { display: block; }
.editions li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-2) var(--gap); }
.edition-year { color: var(--ink-mute); font-size: var(--fs-label); }
.edition-title { font-weight: var(--weight-strong); }
.editions a { grid-column: 2; font-size: var(--fs-label); color: var(--ink-soft); }
footer { border-top: var(--hair); padding-block: var(--space-6); color: var(--ink-soft); }
.skip { position: absolute; z-index: var(--z-overlay); left: var(--space-3); top: var(--space-3); transform: translateY(-200%); background: var(--surface); padding: var(--space-2); }
.skip:focus { transform: translateY(0); }
@media (max-width: 600px) {
  .grid, .showcase-pair { grid-template-columns: minmax(0, 1fr); }
  .showcase-pair figure:last-child { width: 66.666%; justify-self: end; }
  header { flex-wrap: wrap; }
  main { padding-block: var(--space-6); }
  .case-section { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }