/* ============================================================
   Yo.Soy.Giuseppe — LinkStack skeleton
   Editorial luxury: deep navy canvas, cream link cards,
   gold hairlines, Cormorant Garamond display + Archivo sans.
   ============================================================ */
:root{
  --navy-900:#05101e; --navy-800:#0a1a2e; --navy-700:#122741; --navy-600:#1c3a5c;
  --cream-50:#faf8f2; --cream-100:#f5f1e8; --cream-200:#ece5d6; --cream-300:#ddd3bd;
  --gold-600:#a07d45; --gold-500:#b8935a; --gold-400:#c9a877; --gold-200:#e4d3b3;
  --charcoal:#2a2a2a; --grey-500:#8a8a8a;
  --muted:#9fb0c4;
  --rule-navy:rgba(184,147,90,0.38);
  --font-display:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --font-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}

/* ---------- Canvas ---------- */
html,body{
  background:var(--navy-900) !important;
  font-family:var(--font-sans) !important;
  color:var(--cream-100) !important;
  min-height:100%;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(184,147,90,0.16) 0%, rgba(184,147,90,0) 60%),
    var(--navy-900);
}

/* ---------- Container / column ---------- */
.container,#container,main{
  max-width:496px !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-top:6vh;
}
.column{margin-left:auto !important;margin-right:auto !important;}

/* ---------- Avatar ---------- */
img.rounded-avatar,.rounded-avatar,#profile-picture,.avatar,.avatar img,.profile-img{
  display:block !important;margin:0 auto !important;
  width:128px !important;height:128px !important;
  border-radius:50% !important;
  object-fit:cover !important;object-position:center 18% !important;
  background:#2a3547 !important;
  box-shadow:0 0 0 1px var(--rule-navy), 0 24px 60px -30px rgba(0,0,0,.8) !important;
  border:none !important;
}

/* ---------- Name / wordmark ---------- */
h1,h1.fadein{
  font-family:var(--font-display) !important;
  font-weight:500 !important;font-style:normal !important;
  letter-spacing:-0.005em !important;
  font-size:38px !important;line-height:1.1 !important;
  color:var(--cream-100) !important;
  text-align:center !important;width:100% !important;display:block !important;
  margin:18px auto 0 !important;
}
.ysg-dot{color:var(--gold-500) !important;}

/* ---------- Description block: handle + langs + bio ---------- */
.description-parent{padding-bottom:22px !important;}
.description-parent *{margin-bottom:0 !important;}
.description-parent p{margin:0 auto !important;}
.ysg-handle{
  display:block;margin-top:6px;
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.ysg-langs{
  display:block;margin-top:16px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-400);
}
.ysg-bio{
  display:block;margin:14px auto 0;max-width:340px;
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:21px;line-height:1.4;color:var(--cream-200);
}
.ysg-rule{
  display:block;width:160px;height:0;margin:24px auto 4px;
  border-top:1px solid var(--rule-navy);
}
/* strip LinkStack's dark contrast box around text */
.dynamic-contrast{background:transparent !important;box-shadow:none !important;
  padding:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}

/* ---------- Link cards ---------- */
.button-entrance{width:100%;}
.button,a.button{
  position:relative;
  display:flex !important;align-items:center;justify-content:flex-start;gap:14px;
  width:100% !important;max-width:440px;
  margin:12px auto !important;padding:17px 20px !important;
  background:var(--cream-100) !important;color:var(--navy-800) !important;
  border:1px solid var(--cream-300) !important;border-radius:4px !important;
  font-family:var(--font-display) !important;font-weight:500 !important;
  font-size:20px !important;letter-spacing:0 !important;
  text-align:left !important;text-decoration:none !important;
  box-shadow:none !important;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             background .28s var(--ease),border-color .28s var(--ease) !important;
}
/* trailing arrow */
.button::after,a.button::after{
  content:"\2192";margin-left:auto;
  font-family:var(--font-display);font-size:22px;color:var(--grey-500);
  transition:transform .28s var(--ease),color .28s var(--ease);
}
.button:hover,a.button:hover{
  background:var(--cream-50) !important;border-color:var(--gold-500) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.7) !important;
}
.button:hover::after,a.button:hover::after{color:var(--gold-500);transform:translateX(3px);}
.button:active,a.button:active{transform:translateY(0) scale(.99) !important;}

/* button icons — navy, uniform size */
.button img,a.button img{
  width:26px !important;height:26px !important;
  max-width:26px !important;max-height:26px !important;
  margin:0 !important;object-fit:contain !important;flex:0 0 auto;
  filter:brightness(0) saturate(100%) invert(11%) sepia(29%) saturate(1600%) hue-rotate(191deg) brightness(94%) contrast(95%) !important;
}
/* reset for font-awesome icons (share/social) broken by generic rules */
i.icon,i.hvr-icon,.fa,.fa-solid,.fas,.fa-brands,.share-icon,.sharebutton-img,.social-icon{
  width:auto !important;height:auto !important;max-width:none !important;max-height:none !important;
  margin:0 !important;filter:none !important;display:inline-block !important;
}

/* ---------- Headings between links ---------- */
h2{
  font-family:var(--font-sans) !important;font-size:12px !important;font-weight:600 !important;
  letter-spacing:.22em !important;text-transform:uppercase !important;
  color:var(--gold-400) !important;text-align:center !important;margin:26px 0 6px !important;
}

/* ---------- Social icon row ---------- */
.social-icon-div,.row.social-icon-div{
  display:flex !important;justify-content:center !important;align-items:center !important;
  gap:30px !important;width:100% !important;margin:32px auto 4px !important;
  text-align:center !important;
}
.social-link,.social-hover{display:inline-flex !important;align-items:center;justify-content:center;
  line-height:1 !important;}
.social-icon-div .social-icon,.social-link .social-icon,i.social-icon{
  color:var(--muted) !important;font-size:30px !important;
  width:auto !important;height:auto !important;
  transition:color .16s var(--ease),transform .16s var(--ease) !important;
}
.social-link:hover .social-icon{color:var(--gold-400) !important;transform:translateY(-2px) !important;}

/* ---------- Footer ---------- */
#footer,.footer,footer,.footer.fadein{text-align:center !important;width:100% !important;
  color:var(--muted) !important;}
#footer a,.footer a,footer a{color:var(--gold-400) !important;}

/* ---------- Misc ---------- */
a{color:var(--gold-400);}
a:hover{color:var(--gold-500);}
::selection{background:rgba(184,147,90,0.35);color:#fff;}
