:root {
  /* Accent palettes for variants */
  --crimson-1: #8c1230; /* rich red */
  --crimson-2: #c0394c;

  --gold-1: #86661f; /* muted gold */
  --gold-2: #c49a38;

  --amethyst-1: #4e2a86; /* deep purple */
  --amethyst-2: #8053d1;

  --azure-1: #1f4f86; /* brightened azure */
  --azure-2: #3c8bd6;

  --text: #f4f1f8;
  --text-dim: #cfc8dc;
  --border: rgba(255, 255, 255, 0.16);
  --shadow: rgba(0, 0, 0, 0.45);
}

/* Background: layered gradients with classy reds, muted golds, and pop purples/azures */
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(139, 18, 48, 0.55), transparent 55%),
    radial-gradient(140% 120% at 100% 0%, rgba(196, 154, 56, 0.40), transparent 60%),
    radial-gradient(120% 120% at 0% 100%, rgba(80, 54, 156, 0.45), transparent 60%),
    linear-gradient(180deg, #120b1a 0%, #0a0a12 100%);
  background-attachment: fixed;
}
body{
    font-family:inter,sans-serif;
}
* { box-sizing: border-box; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 16px 28px;
}

/* Header */
.header { text-align: center; }

.portrait {
  width: min(92vw, 560px);
  aspect-ratio: 21 / 13; /* wide-ish rectangle */
  object-fit: cover;
  border-radius: 22px;
  box-shadow:
    0 10px 30px var(--shadow),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.name {
  margin: 14px 0 10px;
  font-weight: 750;
  letter-spacing: 0.2px;
  font-size: clamp(22px, 6.5vw, 40px);
}

/* Social row */
.socials {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
  max-width: 420px;
  margin: 10px auto 23px;
}

.social {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  -webkit-backdrop-filter: blur(4px);
  transition: transform 120ms ease, background 200ms ease, box-shadow 200ms ease;
}
.social:hover, .social:focus-visible {
  transform: translateY(-2px);

}
.social img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills square nicely */
  display: block;
}

/* Links grid */
.links { display: grid; gap: 14px; }

.link-btn {
  display: block;
  text-decoration: none;
}

.link-inner {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 120ms ease;
}

.link-btn:active .link-inner { transform: translateY(1px); }
.link-btn:hover .link-inner, .link-btn:focus-visible .link-inner { box-shadow: 0 12px 28px var(--shadow); }

.link-icon img { width: 26px; height: 26px; display: block; }

.link-text {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

.link-meta {
  display: block;
  font-size: 0.86rem;
  opacity: 0.86;
  margin-top: 2px;
}

/* Variants */
.variant-gradient .link-inner {
  background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

.variant-outline .link-inner {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.28);
}

.variant-glass .link-inner {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.variant-duotone .link-inner {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)) padding-box,
    linear-gradient(135deg, var(--acc-1), var(--acc-2)) border-box;
  border: 1px solid transparent;
}

.variant-ghost .link-inner {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.35);
}

/* Themes (sets the accent colors used by variants) */
.theme-crimson { --acc-1: var(--crimson-1); --acc-2: var(--crimson-2); }
.theme-gold    { --acc-1: var(--gold-1);    --acc-2: var(--gold-2); }
.theme-amethyst{ --acc-1: var(--amethyst-1);--acc-2: var(--amethyst-2); }
.theme-azure   { --acc-1: var(--azure-1);   --acc-2: var(--azure-2); }

/* Footer */
.footer { text-align: center; opacity: 0.75; margin-top: 22px; }
.footer small { font-size: 0.84rem; color: var(--text-dim); }
.footer small a:link, .footer small a:visited, .footer small a:hover, .footer small a:active{
    text-decoration:none;
    color:teal;
}

/* Desktop niceties */
@media (min-width: 720px) {
  .links { grid-template-columns: 1fr 1fr; }
  .link-inner { min-height: 72px; padding: 18px; }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .social, .link-inner { transition: none; }
}

:root{
  --bar-h: 84px;          /* total height of each bar (same for all) */
  --thumb: 56px;          /* image size (same for all) */
  --gap: 14px;            /* space between left edge and text block */
  --radius: 14px;         /* rounding for bar + image */
}

/* The tappable bar */
.linkbar{
  position: relative;
  display: flex;
  align-items: center;                /* vert centers the text block */
  height: var(--bar-h);
  border-radius: var(--radius);
  text-decoration: none;
  /* Your background style(s) go here; examples: */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  /* Crucial: equal left/right padding reserves room for the thumb
     so the text is centered in the FULL bar, not the remaining space. */
  /* FIXING RIGHT SIDE ERROR
  padding-left: calc(var(--thumb) + var(--gap));
  padding-right: calc(var(--thumb) + var(--gap));
  */
  padding-left: 22px;
  /* Optional visual polish */
  -webkit-tap-highlight-color: transparent;
}

/* The left image (fixed size, rounded, vertically centered) */
.linkbar .thumb{
  position: absolute;
  border: 1px solid rgba(255,255,255,.12);
  left: var(--gap);
  top: 50%;
  transform: translateY(-50%);
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 12px;
  object-fit: cover;      /* crops neatly if aspect ratios vary */
  display: block;
}

/* Center the text block as a unit */
.linkbar .text{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;     /* centers horizontally */
  justify-content: center; /* centers vertically as a unit */
  text-align: center;
  min-width: 0;            /* enables ellipsis to work */
}

.text{
    padding-left:16px;
    margin-right:-16px;
}

.linkbar .title{
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linkbar .subtitle{
  margin-top: 4px;
  font-size: .85rem;
  opacity: .85;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional: hover/focus treatment */
.linkbar:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
}
.linkbar:hover{
  background: rgba(255,255,255,.09);
}
/* Crimson: rich red gradient */
.linkbar.crimson {
  background: linear-gradient(135deg, #8c1230, #c0394c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Amethyst: deep purple to violet */
.linkbar.amethyst {
  background: linear-gradient(135deg, #4e2a86, #8053d1);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Azure: cool blue tones */
.linkbar.azure {
  background: linear-gradient(135deg, #1f4f86, #3c8bd6);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Gold: muted antique gold gradient */
.linkbar.gold {
  background: linear-gradient(135deg, #86661f, #c49a38);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Charcoal: dark sleek option */
.linkbar.charcoal {
  background: linear-gradient(135deg, #222, #444);
  color: #f7f7f7;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Dark Green: forest to deep teal */
.linkbar.darkgreen {
  background: linear-gradient(135deg, #0e4429, #166534);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Light Green: fresh springy tones */
.linkbar.lightgreen {
  background: linear-gradient(135deg, #3ba55d, #6dd79e);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Silver: pale grey metallic */
.linkbar.silver {
  background: linear-gradient(135deg, #d8d8d8, #f3f3f3);
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

/* Dark Orange: burnt to ember */
.linkbar.darkorange {
  background: linear-gradient(135deg, #a34100, #d35400);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Indigo: midnight blue-violet */
.linkbar.indigo {
  background: linear-gradient(135deg, #2a2f7f, #4a53b4);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Rose: soft romantic pinks */
.linkbar.rose {
  background: linear-gradient(135deg, #b03060, #ff6699);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Teal: ocean turquoise */
.linkbar.teal {
  background: linear-gradient(135deg, #008080, #20b2aa);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Steel: gunmetal to slate */
.linkbar.steel {
  background: linear-gradient(135deg, #434343, #6e7b8b);
  color: #f2f2f2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Sand: muted beige-gold */
.linkbar.sand {
  background: linear-gradient(135deg, #c2b280, #e0d6a3);
  color: #2b2b2b;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Wine: burgundy into plum */
.linkbar.wine {
  background: linear-gradient(135deg, #5c0a26, #872341);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Sepia / Brown-Grey: earthy, vintage paper tone */
.linkbar.sepia {
  background: linear-gradient(135deg, #5a4636, #8c7b65);
  color: #f7f5f2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Thunderstorm: brooding dark navy to storm blue */
.linkbar.thunder {
  background: linear-gradient(135deg, #0a1a33, #1f3a5c);
  color: #e2e9f5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}



/* Copper: warm metallic brown-orange */

.linkbar.copper {
  background: linear-gradient(135deg, #7a3e1d, #b66a3c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Bronze: dark antique metal */

.linkbar.bronze {
  background: linear-gradient(135deg, #5f451e, #9a7538);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Emerald: saturated jewel green */

.linkbar.emerald {
  background: linear-gradient(135deg, #0b5d3b, #15966a);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Jade: softer cool green */

.linkbar.jade {
  background: linear-gradient(135deg, #28765b, #52b788);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Moss: muted woodland green */

.linkbar.moss {
  background: linear-gradient(135deg, #4b5d2a, #758c45);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Olive: subdued military green */

.linkbar.olive {
  background: linear-gradient(135deg, #555d22, #858b3c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Mint: pale cool green */

.linkbar.mint {
  background: linear-gradient(135deg, #9bd8c2, #d4f2e5);
  color: #18372d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Pine: deep evergreen */

.linkbar.pine {
  background: linear-gradient(135deg, #12372a, #245c46);
  color: #f1f7f4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Sage: muted grey-green */

.linkbar.sage {
  background: linear-gradient(135deg, #71806b, #a3b18a);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Aqua: bright tropical blue-green */

.linkbar.aqua {
  background: linear-gradient(135deg, #087f8c, #23c7bd);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Cyan: vivid electric cyan-blue */

.linkbar.cyan {
  background: linear-gradient(135deg, #007a99, #00bcd4);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Lagoon: deep aquatic blue-green */

.linkbar.lagoon {
  background: linear-gradient(135deg, #005f73, #0a9396);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Ocean: deep blue to bright marine */

.linkbar.ocean {
  background: linear-gradient(135deg, #063970, #168aad);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Navy: classic dark blue */

.linkbar.navy {
  background: linear-gradient(135deg, #101f3d, #274c77);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Cobalt: intense royal blue */

.linkbar.cobalt {
  background: linear-gradient(135deg, #143d8c, #245bd6);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Sapphire: dark jewel blue */

.linkbar.sapphire {
  background: linear-gradient(135deg, #082567, #275dad);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Ice: pale frosty blue */

.linkbar.ice {
  background: linear-gradient(135deg, #b8d8e8, #edf7fb);
  color: #23404f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Glacier: cold blue-grey */

.linkbar.glacier {
  background: linear-gradient(135deg, #557a95, #8eb5c9);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Twilight: blue fading into violet */

.linkbar.twilight {
  background: linear-gradient(135deg, #283048, #7353ba);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Midnight: near-black blue */

.linkbar.midnight {
  background: linear-gradient(135deg, #080f1f, #182848);
  color: #eaf0ff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Lavender: soft muted purple */

.linkbar.lavender {
  background: linear-gradient(135deg, #8e7bb5, #c7b8ea);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Plum: rich dark purple */

.linkbar.plum {
  background: linear-gradient(135deg, #4b2142, #7b3f72);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Orchid: vivid pink-purple */

.linkbar.orchid {
  background: linear-gradient(135deg, #8b3a8f, #c05bc7);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Mauve: dusty purple-pink */

.linkbar.mauve {
  background: linear-gradient(135deg, #76506f, #a67c9d);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Magenta: bold saturated pink-purple */

.linkbar.magenta {
  background: linear-gradient(135deg, #8f165f, #d02f90);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Raspberry: bright deep pink-red */

.linkbar.raspberry {
  background: linear-gradient(135deg, #8a1538, #c92a5b);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Cherry: vivid deep red */

.linkbar.cherry {
  background: linear-gradient(135deg, #7d1027, #d7263d);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Brick: earthy muted red */

.linkbar.brick {
  background: linear-gradient(135deg, #7d2e2e, #b65345);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Rust: oxidized orange-red */

.linkbar.rust {
  background: linear-gradient(135deg, #843b1c, #b95d35);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Coral: warm red-orange */

.linkbar.coral {
  background: linear-gradient(135deg, #c64e45, #f07b68);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Peach: soft warm orange-pink */

.linkbar.peach {
  background: linear-gradient(135deg, #e7a26c, #ffd0a8);
  color: #553220;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Amber: deep golden orange */

.linkbar.amber {
  background: linear-gradient(135deg, #9d6200, #d99800);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Honey: warm muted yellow-gold */

.linkbar.honey {
  background: linear-gradient(135deg, #a87916, #d8ad45);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Mustard: earthy yellow */

.linkbar.mustard {
  background: linear-gradient(135deg, #91771b, #c6a634);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Espresso: very dark brown */

.linkbar.espresso {
  background: linear-gradient(135deg, #2a1c17, #4b3027);
  color: #f5eee9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Coffee: medium warm brown */

.linkbar.coffee {
  background: linear-gradient(135deg, #5b3a29, #8a6047);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Chocolate: deep rich brown */

.linkbar.chocolate {
  background: linear-gradient(135deg, #3d2117, #6f3c2b);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Taupe: understated brown-grey */

.linkbar.taupe {
  background: linear-gradient(135deg, #665a52, #95857a);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Stone: neutral grey-beige */

.linkbar.stone {
  background: linear-gradient(135deg, #76716a, #aaa49b);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Slate: cool dark grey-blue */

.linkbar.slate {
  background: linear-gradient(135deg, #35424d, #607080);
  color: #f5f7fa;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Graphite: almost-black neutral grey */

.linkbar.graphite {
  background: linear-gradient(135deg, #1c1f22, #353b40);
  color: #f4f4f4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Smoke: soft medium grey */

.linkbar.smoke {
  background: linear-gradient(135deg, #656d72, #92999d);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Pearl: warm off-white */

.linkbar.pearl {
  background: linear-gradient(135deg, #e6e1d8, #faf8f3);
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Dusk: muted mauve-blue */

.linkbar.dusk {
  background: linear-gradient(135deg, #4c506d, #806b83);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Sunset: warm orange into raspberry */

.linkbar.sunset {
  background: linear-gradient(135deg, #d25a35, #b83262);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Sunrise: gold into coral */

.linkbar.sunrise {
  background: linear-gradient(135deg, #d89b32, #e96f5a);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Aurora: teal into violet */

.linkbar.aurora {
  background: linear-gradient(135deg, #168c83, #6457a6);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Nebula: dark violet into magenta */

.linkbar.nebula {
  background: linear-gradient(135deg, #30204f, #883c78);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Galaxy: midnight blue into purple */

.linkbar.galaxy {
  background: linear-gradient(135deg, #111b3c, #4a3278);
  color: #eef0ff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Volcano: charcoal into ember red */

.linkbar.volcano {
  background: linear-gradient(135deg, #2b2727, #9c2f22);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Ember: dark red-orange glow */

.linkbar.ember {
  background: linear-gradient(135deg, #66251b, #c14f2d);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Arctic: pale blue into grey */

.linkbar.arctic {
  background: linear-gradient(135deg, #cadce5, #eef4f6);
  color: #30444d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Fog: muted silver-blue */

.linkbar.fog {
  background: linear-gradient(135deg, #8c9aa3, #bcc6cc);
  color: #263238;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* Rain: cool grey into blue */

.linkbar.rain {
  background: linear-gradient(135deg, #536976, #7fa4b8);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Storm: dark charcoal-blue */

.linkbar.storm {
  background: linear-gradient(135deg, #252d38, #45596d);
  color: #edf2f7;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Deep Sea: near-black teal */

.linkbar.deepsea {
  background: linear-gradient(135deg, #062f35, #075b63);
  color: #e9ffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Tropical: emerald into turquoise */

.linkbar.tropical {
  background: linear-gradient(135deg, #18785a, #1eb6a0);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Berry: blueberry-purple into raspberry */

.linkbar.berry {
  background: linear-gradient(135deg, #493267, #a03768);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Denim: muted medium blue */

.linkbar.denim {
  background: linear-gradient(135deg, #31577a, #5685ad);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Petrol: dark blue-green */

.linkbar.petrol {
  background: linear-gradient(135deg, #17444a, #286d70);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Aubergine: very dark purple */

.linkbar.aubergine {
  background: linear-gradient(135deg, #321a32, #593153);
  color: #f8eef8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Merlot: dark wine red */

.linkbar.merlot {
  background: linear-gradient(135deg, #461522, #712637);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Mahogany: reddish dark brown */

.linkbar.mahogany {
  background: linear-gradient(135deg, #4e241d, #793b2d);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Parchment: warm aged-paper tone */

.linkbar.parchment {
  background: linear-gradient(135deg, #c9b98d, #eee1b9);
  color: #413720;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Desert: sandy brown into clay */

.linkbar.desert {
  background: linear-gradient(135deg, #9a754c, #c89968);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Canyon: sandstone into rust */

.linkbar.canyon {
  background: linear-gradient(135deg, #8c4f32, #c2764f);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Black Cherry: nearly-black crimson */

.linkbar.blackcherry {
  background: linear-gradient(135deg, #301018, #651d32);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Nightshade: black-purple */

.linkbar.nightshade {
  background: linear-gradient(135deg, #18131f, #3c294d);
  color: #f1eafa;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}

/* Evergreen: dark classic green */

.linkbar.evergreen {
  background: linear-gradient(135deg, #173b2b, #2d6248);
  color: #f4faf6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Peacock: blue-green jewel tones */

.linkbar.peacock {
  background: linear-gradient(135deg, #075c68, #197f82);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Byzantine: purple-red jewel tone */

.linkbar.byzantine {
  background: linear-gradient(135deg, #6c245f, #9c3d82);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Electric Blue: vivid modern blue */

.linkbar.electricblue {
  background: linear-gradient(135deg, #0057b8, #168fff);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Electric Purple: bright saturated violet */

.linkbar.electricpurple {
  background: linear-gradient(135deg, #5923a8, #9c4dcc);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Neon Teal: vivid green-blue */

.linkbar.neonteal {
  background: linear-gradient(135deg, #00796f, #00bfa5);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Flamingo: punchy pink */

.linkbar.flamingo {
  background: linear-gradient(135deg, #c13f68, #ef6f91);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Dusty Rose: subdued antique pink */

.linkbar.dustyrose {
  background: linear-gradient(135deg, #98616d, #c18b94);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Blue Grey: quiet cool neutral */

.linkbar.bluegrey {
  background: linear-gradient(135deg, #526775, #8195a1);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Iron: dark industrial grey */

.linkbar.iron {
  background: linear-gradient(135deg, #292d30, #50575b);
  color: #f4f4f4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Obsidian: almost-black with cool undertone */

.linkbar.obsidian {
  background: linear-gradient(135deg, #0f1114, #282d35);
  color: #f5f7fa;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Onyx: almost-black warm neutral */

.linkbar.onyx {
  background: linear-gradient(135deg, #121212, #303030);
  color: #f7f7f7;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.nooutline{
    border:0px !important;
}
/*
.whiteoutline{

    border:1px solid white;
} */
/* Optional affiliate corner flag: add/remove "affiliate" on any .linkbar. */
.linkbar.affiliate::after {
  content: "AFFILIATE";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 9px;
  border-radius: 0 var(--radius) 0 8px;
  background: #ffffff;
  color: #4e4e4e;
  font: 700 9px/1.5 system-ui, sans-serif;
  letter-spacing: 0.9px;
  text-shadow: none;
  pointer-events: none;
  opacity: 0.4;
}


.linkbar.comingsoon::after {
  content: "COMING SOON";
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 9px;
  border-radius: 0 var(--radius) 0 8px;
  background: #ffffff;
  color: #4e4e4e;
  font: 700 9px/1.5 system-ui, sans-serif;
  letter-spacing: 0.9px;
  text-shadow: none;
  pointer-events: none;
  opacity: 0.4;
}


/* Subtle hover sheen and tactile press effects for clickable link cards. */
a.linkbar {
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 250ms ease, filter 220ms ease;
}

a.linkbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.17) 50%, transparent 75%);
  transform: translateX(-110%);
  transition: transform 620ms ease;
  pointer-events: none;
}

a.linkbar:hover,
a.linkbar:focus-visible {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 0 16px rgba(255,255,255,.10);
  filter: brightness(1.06);
}

a.linkbar:hover::before,
a.linkbar:focus-visible::before {
  transform: translateX(110%);
}

a.linkbar:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
  filter: brightness(.97);
}

/* Matching, restrained shine and movement for social icons. */
a.social {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 220ms ease, box-shadow 250ms ease, filter 220ms ease;
}

a.social::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 50%, transparent 75%);
  transform: translateX(-110%);
  transition: transform 580ms ease;
  pointer-events: none;
}

a.social:hover,
a.social:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 5px 16px rgba(255,255,255,.14);
  filter: brightness(1.08);
}

a.social:hover::before,
a.social:focus-visible::before {
  transform: translateX(110%);
}

a.social:active {
  transform: translateY(1px) scale(.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
  filter: brightness(.98);
}

@media (prefers-reduced-motion: reduce) {
  a.linkbar, a.linkbar::before, a.social, a.social::before {
    transition: none;
  }
  a.linkbar:hover, a.linkbar:focus-visible, a.linkbar:active,
  a.social:hover, a.social:focus-visible, a.social:active {
    transform: none;
  }
}