/* hub.css — THE LINK HUB's public page (Nov 5 2026).
   Everything a profile can change is a custom property or a data attribute
   written by hub.js from the profile's theme; this sheet never names a brand
   colour of its own. */
:root{
  --hub-bg:#4e2d2e; --hub-text:#fff8f8; --hub-heading:#fff8f8;
  --hub-font:'DM Sans',Inter,system-ui,sans-serif; --hub-hfont:'Playfair Display',serif;
  --hub-btn:#835d5d; --hub-btn-text:#ffffff; --hub-btn-radius:999px; --hub-shadow:#000000;
  --hub-social:#fff8f8; --hub-col:680px; --hub-pad:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;min-height:100%}
body{
  background:var(--hub-bg);color:var(--hub-text);font-family:var(--hub-font);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100svh;
}
body[data-bg="image"]{background:var(--hub-bg-image) center/cover fixed no-repeat,var(--hub-bg)}
body[data-bg="image"]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,var(--hub-overlay,.5));pointer-events:none;z-index:0}
@media(hover:none){body[data-bg="image"]{background-attachment:scroll}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

.hub{position:relative;z-index:1;width:100%;max-width:var(--hub-col);margin:0 auto;padding:40px var(--hub-pad) 48px;flex:1 0 auto;display:flex;flex-direction:column;opacity:0;transition:opacity .25s}
.hub.is-on{opacity:1}
.hub-head{text-align:center;position:relative;padding-top:12px}
.hub-share{position:absolute;top:-8px;right:-4px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(127,127,127,.18);display:grid;place-items:center;cursor:pointer;color:var(--hub-text)}
.hub-share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-share:hover{background:rgba(127,127,127,.3)}

/* avatar */
.hub-avatar{margin:0 auto 20px;overflow:hidden}
.hub-avatar img{width:100%;height:100%;object-fit:cover}
.hub-avatar--circle{width:96px;height:96px;border-radius:50%}
.hub-avatar--circle-lg{width:140px;height:140px;border-radius:50%}
.hub-avatar--square{width:120px;height:120px;border-radius:22px}
.hub-avatar--hero{width:100%;border-radius:26px;margin-top:-8px;max-height:72vh}
.hub-avatar--hero img{height:auto;object-fit:contain}
.hub-avatar--none{display:none}

.hub-title{font-family:var(--hub-hfont,var(--hub-font));color:var(--hub-heading);margin:0 0 8px;font-weight:700;letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
body[data-hsize="small"] .hub-title{font-size:18px}
body[data-hsize="normal"] .hub-title{font-size:22px}
body[data-hsize="large"] .hub-title{font-size:clamp(28px,6vw,36px)}
.hub-bio{margin:0 auto;max-width:52ch;font-size:15px;opacity:.92;white-space:pre-line}

/* social row */
.hub-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;margin:20px 0 8px}
.hub-socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--hub-social);transition:transform .15s,background .15s}
.hub-socials a:hover{transform:scale(1.12);background:rgba(127,127,127,.14)}
.hub-socials svg{width:24px;height:24px;fill:currentColor}
.hub-socials svg.ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-socials--bottom{margin:28px 0 0}

/* links */
.hub-links{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.hub-h{margin:14px 0 -4px;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.85}
.hub-btn{position:relative;display:block;width:100%;color:var(--hub-btn-text);border-radius:var(--hub-btn-radius);overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.2,1),background .18s,box-shadow .18s;will-change:transform}
.hub-btn:hover,.hub-btn:focus-visible{transform:translateY(-2px) scale(1.02)}
.hub-btn:active{transform:scale(.985)}
.hub-btn:focus-visible{outline:3px solid var(--hub-btn-text);outline-offset:3px}
.hub-btn-t{display:block;font-weight:600;font-size:16px;line-height:1.3;text-align:center}
.hub-btn-d{display:block;font-size:13px;opacity:.8;text-align:center;margin-top:2px;font-weight:400}

/* button styles */
body[data-btn="fill"] .hub-btn{background:var(--hub-btn)}
body[data-btn="soft"] .hub-btn{background:var(--hub-btn);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--hub-shadow) 55%,transparent),0 2px 6px -2px color-mix(in srgb,var(--hub-shadow) 35%,transparent)}
body[data-btn="hard"] .hub-btn{background:var(--hub-btn);box-shadow:5px 5px 0 0 var(--hub-shadow);border:2px solid var(--hub-shadow)}
body[data-btn="hard"] .hub-btn:hover{box-shadow:7px 7px 0 0 var(--hub-shadow)}
body[data-btn="outline"] .hub-btn{background:transparent;border:2px solid var(--hub-btn)}
body[data-btn="outline"] .hub-btn:hover{background:color-mix(in srgb,var(--hub-btn) 12%,transparent)}
body[data-btn="glass"] .hub-btn{background:rgba(255,255,255,.14);background:color-mix(in srgb,var(--hub-btn) 15%,transparent);border:1px solid color-mix(in srgb,var(--hub-btn) 28%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 3px color-mix(in srgb,var(--hub-shadow) 25%,transparent)}
body[data-btn="glass"] .hub-btn:hover{background:color-mix(in srgb,var(--hub-btn) 24%,transparent)}

/* classic: thumb left, title centred */
.hub-btn--classic{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;min-height:62px;padding:8px}
.hub-btn--classic .hub-thumb{width:46px;height:46px;border-radius:calc(var(--hub-btn-radius) - 6px);max-border-radius:12px;overflow:hidden;background:rgba(127,127,127,.15)}
body[data-corner="pill"] .hub-btn--classic .hub-thumb{border-radius:50%}
body[data-corner="rounded"] .hub-btn--classic .hub-thumb{border-radius:9px}
body[data-corner="square"] .hub-btn--classic .hub-thumb{border-radius:0}
.hub-btn--classic .hub-thumb img{width:100%;height:100%;object-fit:cover}
.hub-btn--classic .hub-btn-t{padding:0 6px}
.hub-btn--classic.no-thumb .hub-thumb{visibility:hidden}

/* featured: picture over the title. data-style picks how the ONE uploaded
   picture is presented (Nov 6 2026, the Linktree "Style" menu): default = the
   picture inset in the card; vinyl / photo / cd / book / film draw it as an
   object on the card's own ground. All CSS: nothing is re-uploaded. */
.hub-btn--featured{padding:8px 8px 0}
.hub-btn--featured .hub-feat{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:rgba(127,127,127,.15);border-radius:max(0px,calc(var(--hub-btn-radius) - 8px))}
body[data-corner="pill"] .hub-btn--featured .hub-feat{border-radius:20px}
.hub-btn--featured[data-ar="square"] .hub-feat{aspect-ratio:1}
.hub-btn--featured[data-ar="auto"] .hub-feat{aspect-ratio:auto;height:auto}
.hub-btn--featured .hub-btn-t{padding:14px 14px 14px}
body[data-corner="pill"] .hub-btn--featured{border-radius:28px}
.hub-obj{display:block}
.hub-btn--featured:not([data-style="default"]) .hub-obj{position:relative;margin:26px auto 6px}
.hub-btn--featured:not([data-style="default"]) .hub-feat{aspect-ratio:auto;border-radius:0}
/* vinyl: a square sleeve with the record slid half out to the right */
[data-style="vinyl"] .hub-obj{width:240px;height:196px}
[data-style="vinyl"] .hub-feat{position:absolute;left:0;top:0;width:196px;height:196px;border-radius:4px;box-shadow:0 10px 28px -8px rgba(0,0,0,.55);z-index:1}
[data-style="vinyl"] .hub-obj::after{content:"";position:absolute;right:0;top:4px;width:188px;height:188px;border-radius:50%;
  background:radial-gradient(circle,#0a0a0a 0 6px,var(--hub-btn) 6px 30px,#0d0d0d 30px 32px,transparent 32px),repeating-radial-gradient(circle,#121212 0 2px,#262626 2px 4px);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);animation:hubSpin 9s linear infinite}
/* photo: an instant print, a touch crooked */
[data-style="photo"] .hub-obj{width:214px;transform:rotate(-3deg)}
[data-style="photo"] .hub-feat{width:214px;height:250px;object-fit:cover;padding:10px 10px 44px;box-sizing:border-box;background:#fbfaf6;box-shadow:0 12px 30px -10px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.25);border-radius:2px}
/* cd: a jewel case with the disc peeking out */
[data-style="cd"] .hub-obj{width:236px;height:188px}
[data-style="cd"] .hub-feat{position:absolute;left:0;top:0;width:188px;height:188px;border-radius:3px;z-index:1;box-shadow:0 10px 26px -8px rgba(0,0,0,.55)}
[data-style="cd"] .hub-obj::before{content:"";position:absolute;left:0;top:0;width:188px;height:188px;border-radius:3px;z-index:2;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.42) 0,rgba(255,255,255,.08) 38%,transparent 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 12px 0 0 -8px rgba(0,0,0,.35)}
[data-style="cd"] .hub-obj::after{content:"";position:absolute;right:0;top:6px;width:176px;height:176px;border-radius:50%;
  background:radial-gradient(circle,#f3f3f3 0 8px,#2a2a2a 8px 10px,transparent 10px 26px,rgba(255,255,255,.55) 26px 28px,transparent 28px),conic-gradient(from 30deg,#e6e6e6,#fbfbfb,#cfd8ff,#ffd3e6,#d6ffe9,#fff4cf,#e6e6e6);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);animation:hubSpin 12s linear infinite}
/* book: a hardback turned a little toward the reader, pages showing */
[data-style="book"] .hub-obj{width:170px;height:228px;margin-right:auto;margin-left:auto;transform:perspective(800px) rotateY(-26deg);transform-style:preserve-3d}
[data-style="book"] .hub-feat{position:relative;width:100%;height:100%;object-fit:cover;border-radius:3px 9px 9px 3px;z-index:1;
  box-shadow:inset 12px 0 16px -10px rgba(0,0,0,.55),18px 14px 34px -12px rgba(0,0,0,.6)}
[data-style="book"] .hub-obj::after{content:"";position:absolute;left:8px;top:5px;right:-12px;bottom:5px;border-radius:0 6px 6px 0;transform:translateZ(-14px);
  background:repeating-linear-gradient(180deg,#f7f4ec 0 2px,#d8d3c6 2px 3px)}
/* film: one frame of a strip, sprockets top and bottom */
[data-style="film"] .hub-obj{width:min(100%,280px);padding:16px 0;background:#141414;border-radius:6px;transform:rotate(-2deg);box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
[data-style="film"] .hub-feat{width:calc(100% - 20px);margin:0 10px;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
[data-style="film"] .hub-obj::before,[data-style="film"] .hub-obj::after{content:"";position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,#ececec 9px 21px,transparent 21px 30px);background-position:5px 0;border-radius:2px}
[data-style="film"] .hub-obj::before{top:4px}
[data-style="film"] .hub-obj::after{bottom:4px}
@keyframes hubSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){[data-style] .hub-obj::after{animation:none}}

/* embed */
.hub-embed{display:flex;flex-direction:column;gap:10px}
.hub-player{position:relative;aspect-ratio:16/9;border-radius:min(var(--hub-btn-radius),22px);overflow:hidden;background:#000}
.hub-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* animations */
@media(prefers-reduced-motion:no-preference){
  .hub-anim-pulse{animation:hubPulse 2.2s ease-in-out infinite}
  .hub-anim-wobble{animation:hubWobble 3s ease-in-out infinite}
  .hub-anim-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:hubShine 3.4s ease-in-out infinite}
}
@keyframes hubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes hubWobble{0%,100%{transform:rotate(0)}6%{transform:rotate(-1.6deg)}12%{transform:rotate(1.6deg)}18%{transform:rotate(0)}}
@keyframes hubShine{0%{left:-60%}55%,100%{left:120%}}

/* footer */
.hub-foot{margin-top:auto;padding-top:40px;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.hub-foot a{text-decoration:underline;text-underline-offset:3px}
.hub-foot .edit{display:inline-block;margin-top:8px;opacity:.8}

.hub-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:#111;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:9}
.hub-toast.on{opacity:1;transform:translate(-50%,0)}
.hub-empty{text-align:center;opacity:.7;padding:60px 0}

@media(max-width:480px){
  .hub{padding:28px 16px 36px}
  .hub-avatar--hero{border-radius:20px}
  .hub-btn--featured .hub-btn-t{padding:12px 12px}
}
@media(prefers-reduced-motion:reduce){.hub{transition:none}.hub-btn,.hub-socials a{transition:none}.hub-btn:hover{transform:none}}