:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #173d35; }
.link-page { min-height: 100svh; display: grid; place-items: center; isolation: isolate; overflow: hidden; position: relative; background: #173d35; color: #fff; font-family: "DM Sans", Arial, sans-serif; }
.link-backdrop { position: absolute; inset: -18px; z-index: -2; background: linear-gradient(180deg, rgba(8, 34, 29, .25), rgba(10, 37, 32, .9)), url("resin-bowl-background.jpg") center / cover no-repeat; filter: blur(6px) saturate(.82); transform: scale(1.07); }
.link-grain { position: absolute; inset: 0; z-index: -1; opacity: .38; background: radial-gradient(circle at 50% 0, rgba(237, 223, 193, .2), transparent 31%), linear-gradient(120deg, rgba(0, 0, 0, .18), transparent 45%, rgba(0, 0, 0, .22)); }
.link-card { width: min(100%, 440px); min-height: 100svh; padding: max(58px, env(safe-area-inset-top)) 31px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(180deg, rgba(20, 61, 52, .4), rgba(14, 47, 40, .78)); box-shadow: 0 0 70px rgba(0, 0, 0, .2); }
.profile-mark { width: 128px; height: 128px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(208, 180, 126, .95); box-shadow: 0 0 0 7px rgba(248, 244, 235, .16), 0 12px 35px rgba(0, 0, 0, .3); background: #f8f4eb; }
.profile-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.link-kicker { margin: 27px 0 11px; color: #e6d7bb; font-size: 9px; letter-spacing: .21em; font-weight: 600; }
h1 { margin: 0; font: 500 clamp(49px, 12vw, 65px) / .79 "Cormorant Garamond", Georgia, serif; letter-spacing: -.055em; text-shadow: 0 3px 22px rgba(0, 0, 0, .18); }
h1 em { font-weight: 400; }
.link-intro { margin: 22px 0 29px; max-width: 275px; color: #edf0e8; font-size: 12px; line-height: 1.65; }
.social-stack { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.social-stack a { min-height: 68px; display: flex; align-items: center; gap: 15px; padding: 9px 15px 9px 11px; border: 1px solid rgba(248, 244, 235, .58); border-radius: 4px; background: rgba(248, 244, 235, .92); color: #183e35; text-align: left; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transition: transform .2s ease, background .2s ease; }
.social-stack a:hover, .social-stack a:focus-visible { transform: translateY(-2px); background: #fffdf8; outline: 2px solid #e0bd80; outline-offset: 3px; }
.social-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #183e35; color: #f8f4eb; font: 500 23px "Cormorant Garamond", Georgia, serif; }
.instagram { font: 27px Arial, sans-serif; }
.pinterest { background: #ba9470; font-weight: 600; }
.etsy { background: #6d4b38; font: 600 20px "DM Sans", Arial, sans-serif; }
.social-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.social-copy strong { font: 500 19px "Cormorant Garamond", Georgia, serif; }
.social-copy small { color: #64716a; font-size: 10px; }
.link-arrow { color: #b99a62; font-size: 18px; }
.main-site-link { margin-top: 25px; padding-bottom: 6px; color: #fff; border-bottom: 1px solid #c6a46d; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.main-site-link span { margin-left: 7px; color: #e0bd80; }
.main-site-link:focus-visible { outline: 2px solid #e0bd80; outline-offset: 5px; }
.made-in { margin: 26px 0 0; color: #d2ddcf; font-size: 9px; letter-spacing: .08em; }
.made-in span { margin-left: 5px; color: #e0bd80; }
@media (min-width: 520px) { .link-page { padding: 28px; } .link-card { min-height: 760px; border-radius: 16px; } .link-backdrop { filter: blur(10px) saturate(.75); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }