/* ===== links page (replaces Linktree): the site's design language on one narrow column ===== */
.links-page{background:var(--ink)}
.links{min-height:100svh;display:flex;flex-direction:column}

.wordmark{width:auto;aspect-ratio:923/154;display:block}

/* dark opening: same glows and arc as the site's hero */
.lk-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);text-align:center;padding:clamp(2rem,6vw,3rem) var(--gutter) calc(clamp(.5rem,3vw,1rem) + var(--arch))}
.lk-hero .glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--glow-c) 0%,color-mix(in srgb,var(--glow-c) 55%,transparent) 30%,transparent 68%)}
/* offsets are clamped at the same breakpoint as width/height (760px/700px caps) so the glow keeps the same position
   relative to its own size at any viewport - otherwise (raw vw offsets) it drifts off-screen on wide/desktop views
   and the hero reads far dimmer there than on mobile */
.lk-hero .glow-a{--glow-c:var(--accent);width:120vw;height:120vw;max-width:760px;max-height:760px;top:clamp(-348px,-55vw,-20px);inset-inline-start:clamp(-285px,-45vw,-10px);opacity:.42}
.lk-hero .glow-b{--glow-c:var(--wine);width:110vw;height:110vw;max-width:700px;max-height:700px;bottom:clamp(-286px,-45vw,-20px);inset-inline-end:clamp(-254px,-40vw,-10px);opacity:.85}
.lk-hero-in{position:relative;max-width:520px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.lk-hero .wordmark{height:28px;color:var(--cream);margin-bottom:1.25rem}
.lk-portrait{width:clamp(140px,37vw,178px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--wine),var(--lavender));box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 6px color-mix(in srgb,var(--cream) 10%,transparent);margin-bottom:.75rem}
.lk-portrait img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 0%}
.lk-hello{font-family:var(--font-note);font-size:clamp(1.5rem,6vw,2.1rem);color:var(--accent);line-height:1.1}
.lk-name{font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,8vw,2.8rem);line-height:1.05;letter-spacing:-.01em}
.lk-tag{color:color-mix(in srgb,var(--cream) 78%,transparent);font-size:clamp(.95rem,3.4vw,1.05rem);max-width:34ch;line-height:1.5}
.lk-social{display:flex;gap:.6rem;margin-top:1rem}
.lk-social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--cream) 32%,transparent);color:var(--cream);transition:background-color .25s,border-color .25s,transform .35s var(--ease)}
.lk-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.lk-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* light body rises into the dark opening with the site's wide, shallow arc (mask on the light block, hero untouched) */
.lk-body{--arch:clamp(20px,6vw,40px);position:relative;z-index:2;margin-top:calc(-1 * var(--arch));padding:calc(var(--arch) + clamp(.25rem,1.5vw,.6rem)) var(--gutter) clamp(2.5rem,7vw,4rem);flex:1;background:radial-gradient(55% 260px at 88% 0%,color-mix(in srgb,var(--accent-light) 38%,transparent),transparent 62%),radial-gradient(45% 300px at 6% 100%,color-mix(in srgb,var(--lavender) 30%,transparent),transparent 60%),var(--cream);--arc:radial-gradient(100% calc(var(--arch) * 7.46) at 50% calc(var(--arch) * -6.46),transparent calc(100% - 1px),#000 100%);-webkit-mask-image:var(--arc);mask-image:var(--arc)}
.lk-hero{--arch:clamp(20px,6vw,40px)}
.lk-group{max-width:520px;margin-inline:auto;display:flex;flex-direction:column;gap:.75rem}
.lk-group+.lk-group{margin-top:clamp(1.75rem,5vw,2.5rem)}
.lk-eyebrow{font-family:var(--font-note);font-size:1.55rem;color:var(--accent);letter-spacing:.01em;margin:0 .35rem .15rem}

/* link card: cream card on cream ground (border + soft shadow), icon in an accent circle, arrow that slides on hover */
.lk{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem .85rem .9rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;box-shadow:0 22px 44px -32px rgba(28,15,31,.45);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.lk:hover{transform:translateY(-3px);box-shadow:0 30px 56px -30px rgba(28,15,31,.55);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.lk-icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.lk-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lk-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.lk-title{font-family:var(--font-head);font-weight:800;font-size:1.4rem;line-height:1.25}
.lk-desc{font-size:.9rem;color:var(--ink-soft);line-height:1.35}
.lk-arrow{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.lk:hover .lk-arrow{transform:translateX(-4px)}
/* the two main services: dark cards, like the site's featured cards */
.lk.is-primary{background:var(--ink);color:var(--cream);border-color:transparent;box-shadow:0 34px 60px -34px rgba(28,15,31,.7)}
.lk.is-primary .lk-desc{color:color-mix(in srgb,var(--cream) 72%,transparent)}
/* gifts: 3-up grid of cards, icon on top (instead of the row-style link) */
.lk-gifts{position:relative}
.lk-gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.lk-gift{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;padding:1.3rem .4rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;text-align:center;box-shadow:0 22px 44px -32px rgba(28,15,31,.45);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.lk-gift:hover{transform:translateY(-3px);box-shadow:0 30px 56px -30px rgba(28,15,31,.55);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.lk-gift-icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent-light);color:var(--ink);display:grid;place-items:center}
.lk-gift-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* min-height reserves 2 lines even for a 1-line title, so the content block (icon+gap+title) is the same total
   height in every card - centered, that keeps the icon on the same row across all 3 cards without forcing them
   into oversized squares (aspect-ratio) that leave empty space under short titles on wide/desktop columns */
.lk-gift-title{font-family:var(--font-head);font-weight:800;font-size:.88rem;line-height:1.22;min-height:2.44em;display:flex;align-items:center}
@media (max-width:360px){.lk-gift-title{font-size:.8rem}}

/* footer: dark ground with the site's glass pill */
.lk-footer{background:var(--ink);color:var(--cream);padding:clamp(1.5rem,4vw,2rem) var(--gutter) calc(clamp(1.5rem,4vw,2rem) + env(safe-area-inset-bottom,0px))}
.lk-footer-pill{max-width:520px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.9rem 1.25rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);background:color-mix(in srgb,var(--cream) 7%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cream) 18%,transparent)}
.lk-footer .wordmark{height:18px;color:var(--cream)}
.lk-footer p{font-size:var(--fs-small);opacity:.85;margin:0}
.lk-footer p a{color:inherit;margin-inline-start:.6em}
@media (max-width:480px){.lk-footer-pill{justify-content:center;text-align:center;border-radius:24px}}