@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Thin.woff2') format('woff2');font-style:normal;font-weight:100;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-ExtraLight.woff2') format('woff2');font-style:normal;font-weight:200;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'Bybre Sans';src:url('assets/fonts/bybre-sans-trial-10/BybreSansTrial10-Black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
:root{--desktop-frame-gap:28px;--profile-edge-gap:14px;--card-radius:24px;font-family:'Bybre Sans',sans-serif;color:#213b34;background:#d7e1da;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,input,textarea,select{font:inherit}button{color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}p,h1,h2{margin:0}img{display:block}body.locked{overflow:hidden}.profile{--portrait-size:100vw;max-width:580px;margin:auto;position:relative;min-height:100svh;padding:0 var(--profile-edge-gap) max(64px,env(safe-area-inset-bottom));isolation:isolate;overflow:hidden}.hero{position:absolute;z-index:-1;inset:0 0 auto;height:var(--portrait-size);overflow:hidden}.hero img{width:100%;height:var(--portrait-size);object-fit:cover;object-position:center top;mask-image:radial-gradient(110.26% 96% at 50% 0%,#000 50%,rgba(0,0,0,.99) 54.68%,rgba(0,0,0,.97) 58.79%,rgba(0,0,0,.94) 62.4%,rgba(0,0,0,.90) 65.61%,rgba(0,0,0,.85) 68.52%,rgba(0,0,0,.79) 71.2%,rgba(0,0,0,.72) 73.75%,rgba(0,0,0,.65) 76.25%,rgba(0,0,0,.57) 78.8%,rgba(0,0,0,.48) 81.48%,rgba(0,0,0,.39) 84.39%,rgba(0,0,0,.30) 87.6%,rgba(0,0,0,.20) 91.21%,rgba(0,0,0,.10) 95.32%,transparent 100%);-webkit-mask-image:radial-gradient(110.26% 96% at 50% 0%,#000 50%,rgba(0,0,0,.99) 54.68%,rgba(0,0,0,.97) 58.79%,rgba(0,0,0,.94) 62.4%,rgba(0,0,0,.90) 65.61%,rgba(0,0,0,.85) 68.52%,rgba(0,0,0,.79) 71.2%,rgba(0,0,0,.72) 73.75%,rgba(0,0,0,.65) 76.25%,rgba(0,0,0,.57) 78.8%,rgba(0,0,0,.48) 81.48%,rgba(0,0,0,.39) 84.39%,rgba(0,0,0,.30) 87.6%,rgba(0,0,0,.20) 91.21%,rgba(0,0,0,.10) 95.32%,transparent 100%)}.topbar{position:absolute;top:var(--profile-edge-gap);left:var(--profile-edge-gap);right:var(--profile-edge-gap);height:40px;display:flex;justify-content:space-between}.icon-button{width:40px;height:40px;display:grid;place-items:center}.glass{border:1px solid #ffffff80;border-radius:16px;background:linear-gradient(135deg,#ffffff75,#ffffff18 55%,#a9c5b52b),#ffffff1f;-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px 0 #ffffff90,inset 0 -1px 0 #ffffff28,0 8px 24px #213b340d}.identity{padding-top:calc(var(--portrait-size) - 80px);text-align:center}.identity h1{font-size:40px;font-weight:600;line-height:48px;letter-spacing:-1.2px}.agency{font-size:14px;font-weight:500;line-height:20px;letter-spacing:1.12px;margin-top:4px}.bio{font-size:16px;font-weight:500;line-height:24px;margin-top:4px}.socials{display:flex;justify-content:center;margin-top:8px;height:48px}.socials a{width:48px;height:48px;display:grid;place-items:center}.youtube{display:block;width:32px;height:22.404px;background:currentColor;mask:url('assets/501a9.png') -8.281px -9.596px/48.561px 41.596px no-repeat;-webkit-mask:url('assets/501a9.png') -8.281px -9.596px/48.561px 41.596px no-repeat}.followers{font-size:12px;line-height:18px;padding:8px 12px 0;min-height:26px}.links{display:flex;flex-direction:column;gap:14px;margin-top:32px}.link-row{position:relative;height:64px}.portfolio{height:64px}.main-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 52px;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-.2px;text-align:center;border-radius:16px}.main-link:active{transform:scale(.99)}.branded{position:absolute;left:17px;width:30px;height:30px;object-fit:contain}.more{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:50%}.listing-thumbs{position:absolute;display:flex;align-items:center;left:17px;top:50%;transform:translateY(-50%)}.listing-thumbs img{width:30px;height:30px;object-fit:cover;object-position:center 22%;border:2px solid #fffffff0;border-radius:12px;margin-left:-8px}.listing-thumbs img:first-child{margin-left:0}.featured{overflow:hidden}.featured-link>img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 15%}.featured-link>span{display:flex;align-items:center;justify-content:center;min-height:64px;font-size:14px;font-weight:500;padding:16px;text-align:center}footer{padding-top:48px;font-size:12px;line-height:18px;color:#213b34d9}footer>div{display:flex;justify-content:center;align-items:center;column-gap:5px;row-gap:8px;flex-wrap:wrap}footer button{padding:0;min-height:18px;font-size:12px;line-height:18px}.footer-dot{display:block;flex:0 0 3px;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateY(1.5px)}
dialog{padding:32px 24px max(32px,env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:#fff;color:#141414;width:100%;max-width:480px;max-height:90svh;margin:auto auto 0;overflow:auto;overscroll-behavior:contain;box-shadow:0 8px 64px #0002}dialog::backdrop{background:#0009}dialog[open]{animation:appear .22s ease-out}.close{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;z-index:1}dialog h2{font-size:20px;font-weight:500;line-height:28px;padding-right:24px}dialog p{font-size:14px;line-height:22px}dialog .muted{color:#777}dialog .avatar{width:80px;height:80px;object-fit:cover;border-radius:32px}.dialog-identity{display:flex;align-items:center;flex-direction:column;gap:16px;margin-bottom:24px;text-align:center}.dialog-identity h2{padding:0;line-height:24px}.channels{display:flex;flex-direction:column;gap:36px}.channel{display:flex;gap:12px;align-items:center;min-height:42px;font-size:14px}.channel-icon{width:32px;display:flex;justify-content:center}.channel-copy{flex:1;min-width:0;line-height:21px}.outline{border:1px solid #e0e2d9;border-radius:64px;padding:6px 12px;font-size:14px;font-weight:500;line-height:21px}.action{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;background:#153d36;color:#fff;border-radius:32px;padding:12px 20px;font-weight:500;margin-top:12px}.action.secondary{background:#f1f0ee;color:#141414}.body-copy{margin:16px 0}.detail-list{display:grid;gap:12px;margin-top:20px}.detail-list a{padding:16px;background:#f5f5f3;border-radius:12px;font-size:14px;overflow-wrap:anywhere}.properties{display:grid;gap:20px;margin-top:20px}.property{border:1px solid #e0e2d9;border-radius:16px;overflow:hidden}.property img{width:100%;aspect-ratio:16/10;object-fit:cover}.property .details{padding:16px}.property h3{margin:0 0 4px;font-size:18px}.property a{margin-top:12px}.url-field{display:block;width:100%;border:1px solid #ddd;border-radius:12px;padding:14px;font-size:16px;margin:20px 0 8px;color:#555;background:#fafafa}.fine{font-size:11px!important;line-height:17px!important;color:#777;margin-top:20px!important}#toast{position:fixed;z-index:10;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:50px;background:#153d36;color:#fff;text-align:center;font-size:14px;max-width:90%;box-shadow:0 4px 24px #0002}html{scroll-behavior:smooth}@keyframes appear{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@media(min-width:640px){body{padding:var(--desktop-frame-gap) 0}.profile{--portrait-size:580px;padding:0 28px 64px;border-radius:var(--card-radius);box-shadow:0 8px 80px #153d3610}.topbar{top:28px;left:28px;right:28px}dialog{margin:auto;border-radius:24px;padding-bottom:32px}}@media(max-width:370px){.identity h1{font-size:34px;letter-spacing:-1px}.main-link{padding-left:50px}.portfolio .listing-thumbs{left:14px}.portfolio .listing-thumbs img{width:28px;height:28px}.portfolio .main-link{padding-left:72px}.bio{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}dialog[open]{animation:none}.main-link:active{transform:none}}

/* Linktree-style repeating attention shake: ~0.75s motion followed by ~2.25s rest. */
.portfolio{transform-origin:center;will-change:transform;animation:listings-shake 3s linear 1s infinite}
@keyframes listings-shake{0%,25%,100%{transform:translateX(0) rotate(0)}3%{transform:translateX(-5px) rotate(-.55deg)}6%{transform:translateX(5px) rotate(.55deg)}9%{transform:translateX(-4px) rotate(-.45deg)}12%{transform:translateX(4px) rotate(.45deg)}15%{transform:translateX(-3px) rotate(-.3deg)}18%{transform:translateX(3px) rotate(.3deg)}21%{transform:translateX(-1px) rotate(-.12deg)}}
@media(prefers-reduced-motion:reduce){.portfolio{animation:none;will-change:auto}}

/* Linktree portrait/title anchor: profile width minus 80px; desktop starts 40px from viewport top. */

/* Spotify keeps the same independent 44px share target as the other links. */
.featured{position:relative}.featured-link{display:block}.featured .featured-more{top:auto;bottom:10px;transform:none}.featured-link:focus-visible{outline-offset:-4px}
/* Linktree: 360deg around Y over 2.5s, exact easing. Repeat every 5s. */
.topbar [data-panel="bybre"]>img{transform-origin:center;animation:bybre-logo-turn 5s linear 1s infinite}
@keyframes bybre-logo-turn{0%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.54,-.34,.33,1.14)}50%,100%{transform:rotateY(360deg)}}
body.locked .topbar [data-panel="bybre"]>img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.topbar [data-panel="bybre"]>img{animation:none}}

/* Linktree reference: 24px frame, 8px radius, 16px gold icon, 4px gap. */
.verified-row{display:flex;align-items:center;justify-content:center;margin-top:8px}
.verified-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:24px;padding:4px 8px 4px 4px;border:0;border-radius:8px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(0,0,0,.75);font-size:12px;font-weight:400;line-height:18px;white-space:nowrap}
.verified-badge img{width:16px;height:16px;flex:none}

/* Linktree desktop QR: 120px, fixed 32px from the bottom/right, visible from 1022px. */
.desktop-qr{display:none;position:fixed;right:var(--desktop-frame-gap);bottom:var(--desktop-frame-gap);z-index:10;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#000}
.desktop-qr p{font-size:14px;font-weight:500;line-height:21px;text-align:center}
.desktop-qr img{width:120px;height:120px}
@media(min-width:1022px){.desktop-qr{display:flex}}
body:has(#listing-viewer[open]) .desktop-qr{display:none}

/* Shared mobile/desktop icon metrics measured on linktr.ee/linktr.ee: header 20/40, social 32/48, more 3x11/24. */
 .topbar .icon-button img{width:20px;height:20px;object-fit:contain}
 .profile .socials a:first-child{--social-mask:url('assets/social-desktop-tiktok.svg')}
 .profile .socials a:last-child{--social-mask:url('assets/social-desktop-instagram.svg')}
 .socials .youtube{width:32px;height:32px;mask:url('assets/social-desktop-youtube.svg') center/32px 32px no-repeat;-webkit-mask:url('assets/social-desktop-youtube.svg') center/32px 32px no-repeat}
 .profile .more{width:24px;height:24px;right:12px}
 .profile .more img{width:3px;height:11px}
 .profile .main-link .branded,.profile .podcast-caption .branded{width:32px;height:32px}

/* Circular icon containers across profile controls. */
.topbar .icon-button,.socials a{border-radius:50%}

/* Keep iOS rotation from inflating text; size the portrait from the actual card. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.profile{--portrait-size:min(580px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)));width:var(--portrait-size)}
@media(min-width:640px){
 .profile{--portrait-size:min(580px,calc(100vw - 2 * var(--desktop-frame-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)))}
}

/* Match the reference profile's 68px rows and 14px link spacing. */
/* Larger Bybre title; keep the same size across mobile and desktop. */
.profile .identity h1{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:normal}
.profile .identity .bio{font-size:16px;font-weight:500;line-height:24px;letter-spacing:normal}
/* Match Linktree follower field: 8px after social targets, 24px field, then 32px to links. */
.profile .identity .followers{display:block;margin:8px auto 0;height:24px;min-height:24px;padding:3px 12px;font-size:12px;font-weight:400;line-height:18px}
 .profile .links{gap:14px}
 .profile .link-row{height:68px}
 .profile .featured .podcast-caption{min-height:68px}
 .profile .featured .featured-more{bottom:14px}
/* The reference's visible mobile frame is 2px narrower than its link slot. */
@media(max-width:639px){
 .profile .links>.glass{width:calc(100% - 2px)}
}
/* Linktree doubles its link inset at 576px; keep other profile layout intact. */
@media(min-width:576px) and (max-width:639px){
 .profile .links{margin-left:14px;margin-right:14px}
}
