@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('./fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url('./fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url('./fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url('./fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
:root { --bg: #F2EEE9; --card: #FCFCFB; --ink: #111111; --muted: #5E6468; --line: #E3DED7; --accent: #B8175F; --accent-hover: #96125A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; }
main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; }
header { display: flex; gap: 16px; align-items: center; margin-bottom: 28px; }
header img { border-radius: 10px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 2px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; }
h2 { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tile { display: block; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 22px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(17,17,17,.06); outline: none; }
.tile .n { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .08em; }
.tile h3 { margin: 8px 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tile.accent { background: var(--accent); border-color: var(--accent); }
.tile.accent .n, .tile.accent h3, .tile.accent p { color: #fff; }
.tile.accent:hover { background: var(--accent-hover); }
@media (max-width: 520px) { main { padding: 20px 16px 32px; } .tile h3 { font-size: 22px; } }
.lede { color: var(--muted); }