@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root { --bg:#f3ece4; --surface:#fffdfb; --petrol:#153e40; --burgundy:#7a1839; --text:#222; --muted:#645f5a; --border:#d9cfc5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:'DM Sans',system-ui,sans-serif; }
.page-shell { position:relative; width:min(100%, 680px); margin:auto; padding:34px 28px 26px; overflow:hidden; }
.ambient { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0; }
.ambient-one { width:260px; height:260px; top:-120px; left:-130px; background:#e6d2d0; opacity:.65; }
.ambient-two { width:230px; height:230px; right:-120px; top:245px; background:#d1e0dc; opacity:.55; }
.profile, .links, footer { position:relative; z-index:1; }
.profile { text-align:center; padding:8px 0 28px; }
.share { position:absolute; top:0; right:0; border:1px solid var(--border); color:var(--petrol); background:rgba(255,253,251,.72); border-radius:999px; padding:9px 13px; font:600 12px 'DM Sans',sans-serif; cursor:pointer; transition:.2s ease; }
.share:hover { background:var(--petrol); color:#fff; transform:translateY(-1px); }
.share-icon { font-size:16px; margin-right:5px; vertical-align:-1px; }
.portrait-frame { width:112px; height:112px; margin:4px auto 18px; padding:5px; border:1px solid var(--burgundy); border-radius:50%; background:var(--surface); box-shadow:0 12px 28px rgba(21,62,64,.14); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center 25%; border-radius:50%; display:block; }
.eyebrow { margin:0 0 10px; color:var(--burgundy); text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700; }
h1 { margin:0; color:var(--petrol); font:600 clamp(29px,5vw,42px)/1.05 'Playfair Display',Georgia,serif; letter-spacing:-.035em; }
.intro { max-width:420px; margin:13px auto 0; color:var(--muted); font-size:14px; line-height:1.55; }
.links { display:grid; gap:12px; }
.link-card { display:flex; align-items:center; gap:14px; min-height:78px; padding:14px 18px 14px 14px; color:var(--text); text-decoration:none; background:rgba(255,253,251,.88); border:1px solid rgba(217,207,197,.95); border-radius:17px; box-shadow:0 9px 22px rgba(21,62,64,.07); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.link-card:hover { transform:translateY(-3px); border-color:#b7a89b; box-shadow:0 14px 28px rgba(21,62,64,.13); }
.link-card.featured { border-color:var(--petrol); box-shadow:0 11px 25px rgba(21,62,64,.14); }
.link-mark { flex:none; display:grid; place-items:center; width:39px; height:39px; border-radius:12px; background:#e7efeb; color:var(--petrol); font-size:11px; font-weight:700; letter-spacing:.06em; }
.featured .link-mark { background:var(--petrol); color:#fff; }
.link-copy { display:grid; gap:3px; flex:1; min-width:0; }
.link-copy strong { color:var(--petrol); font-size:15px; font-weight:700; }
.link-copy small { color:var(--muted); font-size:12px; line-height:1.35; }
.arrow { color:var(--burgundy); font-size:22px; transition:transform .2s ease; }
.link-card:hover .arrow { transform:translateX(3px); }
footer { display:flex; align-items:center; justify-content:center; gap:11px; padding-top:26px; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.footer-line { width:34px; height:1px; background:var(--burgundy); opacity:.55; }
@media (max-width:520px) { .page-shell { padding:24px 16px 22px; } .share { top:-2px; right:0; padding:8px 10px; } .share #shareLabel { display:none; } .portrait-frame { width:96px; height:96px; margin-top:10px; } .profile { padding-top:10px; padding-bottom:22px; } .eyebrow { font-size:9px; letter-spacing:.12em; } h1 { font-size:31px; } .intro { font-size:13px; max-width:320px; } .link-card { min-height:72px; padding:12px 13px 12px 11px; gap:11px; } .link-mark { width:35px; height:35px; border-radius:10px; } .link-copy strong { font-size:14px; } .link-copy small { font-size:11px; } footer { padding-top:22px; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }