:root { --paper: #f4efe6; --deep: #ebe3d6; --ink: #1d1916; --soft: #4a423b; --muted: #6b6158; --rule: #d8cebf; --accent: #a4482a; --gutter: clamp(16px, 4vw, 56px); }
* { box-sizing: border-box; margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.6 "Albert Sans", "Avenir Next", sans-serif; -webkit-font-smoothing: antialiased; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gutter); border-bottom: 1px solid var(--rule); }
.wordmark { font: 600 26px/1 "Bodoni Moda", Georgia, serif; font-variation-settings: "opsz" 6; }
.wordmark span { color: var(--accent); }
.meta { font: italic 400 15px/1 "Bodoni Moda", Georgia, serif; color: var(--muted); }
main { max-width: 1360px; margin: 0 auto; padding: clamp(36px, 6vw, 88px) var(--gutter); }
.eyebrow { font: 600 11px/1.4 "Albert Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
h1 { font: 600 clamp(48px, 8vw, 120px)/.92 "Bodoni Moda", Georgia, serif; font-variation-settings: "opsz" 6; letter-spacing: -.03em; margin: 14px 0 20px; }
h1 em { font-weight: 500; }
.lede { max-width: 56ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--soft); text-wrap: pretty; }
.roster { list-style: none; padding: 0; margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2.5vw, 36px); border-top: 1px solid var(--ink); padding-top: 28px; }
.card { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.card figure { overflow: hidden; background: var(--deep); margin-bottom: 10px; }
.card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.card:hover img { transform: scale(1.035); }
.no { font: 600 11px/1 "Albert Sans", sans-serif; letter-spacing: .16em; color: var(--muted); }
.card h2 { font: 600 clamp(34px, 3.4vw, 48px)/1 "Bodoni Moda", Georgia, serif; font-variation-settings: "opsz" 6; }
.tagline { color: var(--soft); }
.count { font-weight: 600; font-size: 14px; color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: calc(1360px - 2 * var(--gutter)); margin: 0 auto; padding: 22px 0 34px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .masthead { flex-direction: column; gap: 6px; } footer { padding-inline: var(--gutter); } }