@font-face { font-family: "Raleway"; font-weight: 400; src: url(fonts/Raleway-400.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Raleway"; font-weight: 600; src: url(fonts/Raleway-600.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Raleway"; font-weight: 300; src: url(fonts/Raleway-300.woff) format("woff"); font-display: swap; }
:root { --ink: #1c2430; --paper: #f4f1ec; --brass: #b08d57; --muted: #6e6e6e; --rule: #ddd6cb; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 "Raleway", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.head { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 56px 16px 64px; text-align: center; }
.head::after { content: ""; position: absolute; right: -40px; top: -30px; width: 260px; height: 380px; background: url(clare-tie-white.png) no-repeat center / contain; opacity: .05; }
.logo { height: 64px; }
.head h1 { margin: 30px 0 12px; font: 300 30px/1 "Raleway", sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.head p { margin: 0 auto; max-width: 540px; color: #b5b5b5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 36px 28px; max-width: 1100px; margin: 0 auto; padding: 48px 16px 64px; }
.card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.cover { display: block; margin-bottom: 10px; }
.cover img { display: block; width: 100%; height: auto; background: #e7e2da; box-shadow: 0 10px 30px rgba(28, 36, 48, .18); transition: transform .25s, box-shadow .25s; }
.card:hover .cover img { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.name { font: 600 13px/1.3 "Raleway", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.meta { color: var(--muted); font-size: 13px; }
.foot { border-top: 1px solid var(--rule); padding: 28px 16px 40px; text-align: center; }
.foot p { margin: 0 0 4px; }
.small { color: var(--muted); font-size: 13px; }