:root { --paper: #f6eee3; --brand: #8c1b18; --ink: #241815; --soft: #6a554c; --serif: 'Instrument Serif', Georgia, serif; --sans: 'Manrope', system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 4vw, 48px); }
.top img { width: 120px; }
.lang { display: inline-flex; border: 1px solid rgba(36, 24, 21, .2); border-radius: 999px; padding: 3px; }
.lang button { font: 800 .8rem var(--sans); background: none; border: 0; min-width: 46px; min-height: 40px; border-radius: 999px; color: var(--soft); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wrap { width: min(1240px, 100% - 32px); margin: 0 auto; padding: clamp(30px, 6vw, 70px) 0 60px; }
.kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 800; color: var(--brand); margin: 0 0 14px; }
h1 { font: 400 clamp(2.8rem, 7vw, 6rem)/1 var(--serif); margin: 0; letter-spacing: -.01em; }
h1 em { color: var(--brand); }
.lead { max-width: 60ch; color: var(--soft); margin: 22px 0 44px; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 20px 40px -24px rgba(90, 16, 14, .35); transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.status { position: absolute; top: 14px; right: 14px; background: #2f7a3e; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.name { font: 400 2rem/1.1 var(--serif); padding: 20px 22px 6px; }
.letter { color: var(--brand); font-style: italic; }
.desc { color: var(--soft); padding: 0 22px 24px; font-size: .98rem; }
.foot { color: var(--soft); font-size: .85rem; margin-top: 40px; }
@media (hover: hover) { .card:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 30px 50px -24px rgba(90, 16, 14, .45); } }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; max-width: 560px; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }