@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; src: url('assets/fonts/cormorant-garamond-regular.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; src: url('assets/fonts/dm-sans-regular.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; src: url('assets/fonts/dm-sans-medium.ttf') format('truetype'); }

:root { --cream: #f4efe5; --gold: #c1a16f; --ink: #10231d; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { background: var(--ink); color: var(--cream); font-family: var(--sans); margin: 0; }
a { color: inherit; }
.taplink { margin: 0 auto; max-width: 608px; min-height: 100svh; padding: clamp(24px, 6vw, 48px) clamp(20px, 5vw, 32px) 28px; }
.header { align-items: flex-start; display: flex; justify-content: space-between; }
.brand { display: block; line-height: 1; text-decoration: none; }
.brand-logo { display: block; height: auto; width: 72px; }
.header > p { color: var(--gold); font-size: 9px; letter-spacing: .14em; line-height: 1.35; margin: 4px 0 0; text-align: right; }
.intro { border-bottom: 1px solid rgba(244, 239, 229, .3); padding: clamp(72px, 13vw, 104px) 0 clamp(44px, 9vw, 68px); }
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .16em; margin: 0 0 20px; text-transform: uppercase; }
h1 { font-family: var(--serif); font-size: clamp(58px, 15vw, 90px); font-weight: 400; letter-spacing: -.05em; line-height: .76; margin: 0; }
h1 em { color: var(--gold); }
.description { color: rgba(244, 239, 229, .74); font-size: 14px; line-height: 1.55; margin: 32px 0 0; max-width: 370px; }
.section { padding-top: 38px; }
.section-title { align-items: baseline; display: flex; gap: 14px; margin-bottom: 14px; }
.section-title span { color: var(--gold); font-size: 10px; letter-spacing: .12em; }
h2 { font-size: 10px; font-weight: 500; letter-spacing: .15em; margin: 0; text-transform: uppercase; }
.link-list { display: grid; gap: 9px; }
.link-card { align-items: center; border: 1px solid rgba(244, 239, 229, .38); display: grid; gap: 16px; grid-template-columns: 46px 1fr 22px; min-height: 84px; padding: 14px 18px; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.link-card:hover { background: rgba(244, 239, 229, .08); transform: translateY(-2px); }
.link-card--accent { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.link-card--accent:hover { background: #d4b984; }
.link-card strong, .link-card small { display: block; }
.link-card strong { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: .85; }
.link-card small { font-size: 9px; letter-spacing: .08em; margin-top: 8px; opacity: .7; text-transform: uppercase; }
.arrow { font-size: 24px; font-weight: 400; justify-self: end; }
.icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; height: 42px; justify-content: center; width: 42px; }
.brand-icon { display: block; height: 21px; width: 21px; }
.link-card:not(.link-card--accent) .brand-icon { filter: invert(94%) sepia(11%) saturate(424%) hue-rotate(359deg) brightness(107%) contrast(91%); }
.icon--website { font-family: var(--serif); font-size: 15px; letter-spacing: .04em; }
.footer { align-items: center; border-top: 1px solid rgba(244, 239, 229, .3); display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; margin-top: 52px; padding-top: 22px; }
.footer a { color: rgba(244, 239, 229, .75); font-size: 10px; letter-spacing: .08em; text-decoration: none; }
.footer a:last-child { color: var(--gold); text-transform: uppercase; }
.footer a:hover { color: var(--cream); }
@media (max-width: 360px) { .brand-logo { width: 62px; } .header > p { font-size: 8px; } .link-card { grid-template-columns: 42px 1fr 18px; min-height: 78px; padding: 12px 14px; } .icon { height: 38px; width: 38px; } .footer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } }