/* 2026-10-07 the card's action = the site's fluid plasma button (James: "update the contact card as well, with the new
   button"). Lifted verbatim from /site-20261007c.css (the .btn-gold block); the tokens it needs are scoped to the button
   so the card's own palette is untouched. */
.btn-gold{--film:#f1f5f8;--gold-hi:#ffb02e;--gold:#f59e0b;--mark:'Droid Sans Mono','Cousine',monospace;--ease:cubic-bezier(.25,1,.5,1);--out:cubic-bezier(.16,1,.3,1)}
.btn-gold{
  --mx:50%;--my:50%;--lit:0;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:16px;min-height:42px;padding:0 14px 0 18px;
  border:0;border-radius:7px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,rgba(27,44,61,.38) 0%,rgba(13,24,35,.56) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  color:var(--film);font:400 13px/1 var(--mark);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.22),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 -14px 22px -14px rgba(0,0,0,.85),0 20px 44px -18px rgba(0,0,0,.95),0 0 24px -10px rgba(245,158,11,.14);
  transition:transform .18s var(--out),box-shadow .5s var(--ease)}
/* the mesh: lobes of light drifting inside the slab, clipped to its shape */
.btn-pl{position:absolute;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:.92;transform:translateZ(0);transition:opacity .5s var(--ease);-webkit-mask-image:-webkit-radial-gradient(#fff,#000);clip-path:inset(0 round 7px)}
.btn-lg .btn-pl{clip-path:inset(0 round 9px)}
.bar .btn-pl{clip-path:inset(0 round 6px)}
/* round 8 FLUID PLASMA: when WebGL is up (site js adds .is-gl) a canvas in .btn-pl runs the shader and the CSS lobes step aside */
.btn-pl canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.btn-gold.is-gl .btn-pl{opacity:.96}
.btn-gold.is-gl .btn-pl i{display:none}
.btn-gold.is-gl{background:rgba(13,24,35,.9)}
.btn-pl i{position:absolute;display:block;width:170px;height:170px;border-radius:50%;filter:blur(16px) saturate(1.15);mix-blend-mode:plus-lighter;will-change:transform;transform-origin:50% 50%}
.btn-pl i:nth-child(1){left:-18%;top:-80px;background:radial-gradient(circle,rgba(255,186,70,.78) 0%,rgba(245,158,11,.42) 36%,rgba(245,158,11,0) 70%);animation:lobe-a 16s ease-in-out infinite alternate}
.btn-pl i:nth-child(2){left:44%;top:-40px;background:radial-gradient(circle,rgba(246,138,56,.68) 0%,rgba(236,118,40,.36) 36%,rgba(236,118,40,0) 70%);animation:lobe-b 21s ease-in-out infinite alternate -7s}
.btn-pl i:nth-child(3){left:66%;top:-30px;width:150px;height:150px;background:radial-gradient(circle,rgba(160,204,245,.92) 0%,rgba(111,163,214,.5) 36%,rgba(111,163,214,0) 70%);animation:lobe-c 25s ease-in-out infinite alternate -12s}
/* the deep cool lobe: the mesh's shadow colour, where gold and steel meet */
.btn-pl i:nth-child(4){left:28%;top:-20px;width:180px;height:180px;background:radial-gradient(circle,rgba(96,124,210,.82) 0%,rgba(60,84,160,.42) 36%,rgba(52,74,140,0) 70%);animation:lobe-d 19s ease-in-out infinite alternate -3s}
/* the small warm highlight: the hottest point of the volume */
.btn-pl i:nth-child(5){left:10%;top:-30px;width:90px;height:90px;filter:blur(13px) saturate(1);background:radial-gradient(circle,rgba(255,222,150,.7) 0%,rgba(255,186,70,.3) 40%,rgba(255,186,70,0) 70%);animation:lobe-e 13s ease-in-out infinite alternate -5s}
/* the dark lobe: carves a shadow through the light so the body reads as a volume */
.btn-pl i:nth-child(6){left:30%;top:14px;width:190px;height:150px;mix-blend-mode:normal;filter:blur(20px);background:radial-gradient(ellipse,rgba(8,14,22,.5) 0%,rgba(8,14,22,.24) 40%,rgba(8,14,22,0) 70%);animation:lobe-f 23s ease-in-out infinite alternate -9s}
/* the seventh lobe wakes under the pointer and trails it */
.btn-pl i:nth-child(7){left:var(--mx);top:var(--my);width:130px;height:130px;margin:-65px 0 0 -65px;opacity:0;filter:blur(18px);background:radial-gradient(circle,rgba(255,186,80,.22) 0%,rgba(255,176,46,.1) 36%,rgba(255,176,46,0) 70%);animation:none;transition:left .6s var(--out),top .6s var(--out),opacity .45s var(--ease)}
@keyframes lobe-a{0%{transform:translate(0,0) scale(1)}35%{transform:translate(70px,34px) scale(1.18)}70%{transform:translate(150px,-6px) scale(.9)}100%{transform:translate(40px,46px) scale(1.1)}}
@keyframes lobe-b{0%{transform:translate(0,0) scale(1.05)}40%{transform:translate(-110px,30px) scale(.86)}75%{transform:translate(-40px,52px) scale(1.2)}100%{transform:translate(60px,8px) scale(.95)}}
@keyframes lobe-c{0%{transform:translate(0,30px) scale(.9)}50%{transform:translate(-120px,0) scale(1.15)}100%{transform:translate(-30px,38px) scale(1)}}
@keyframes lobe-d{0%{transform:translate(-40px,10px) scale(1)}45%{transform:translate(60px,40px) scale(1.2)}100%{transform:translate(-80px,30px) scale(.9)}}
@keyframes lobe-e{0%{transform:translate(0,20px) scale(1)}50%{transform:translate(140px,40px) scale(1.3)}100%{transform:translate(60px,0) scale(.85)}}
@keyframes lobe-f{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,10px) scale(1.2)}100%{transform:translate(70px,6px) scale(.95)}}
/* the edge: barely there; a faint gold when the gel lights */
.btn-gold::before{content:"";position:absolute;inset:0;z-index:1;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,176,46,calc(.08 + .2*var(--lit))) 0%,rgba(241,245,248,.09) 40%,rgba(241,245,248,.05) 60%,rgba(111,163,214,calc(.08 + .18*var(--lit))) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:background .45s var(--ease)}
/* the gel surface: a cool specular pooled at the top, a rim light along the foot, and one sweep on hover */
.btn-gold::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(110% 55% at 50% -12%,rgba(241,245,248,.26) 0%,rgba(241,245,248,.07) 34%,rgba(241,245,248,0) 58%),
    radial-gradient(90% 40% at 50% 118%,rgba(241,245,248,.12) 0%,rgba(241,245,248,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.22) 100%),
    linear-gradient(105deg,transparent 38%,rgba(241,245,248,.12) 50%,transparent 62%) -160% 0/220% 100% no-repeat}
.btn-gold:hover::after{animation:sheen 1.1s var(--out) .08s both}
@keyframes sheen{from{background-position:0 0,0 0,0 0,-160% 0}to{background-position:0 0,0 0,0 0,260% 0}}
.btn-t{position:relative;z-index:2;font-variant-ligatures:none;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.45)}
.btn-ar{position:relative;z-index:2;flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--gold-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,176,46,.5));transition:transform .22s var(--out)}
.btn-gold:hover,.btn-gold:focus-visible{--lit:1;
  box-shadow:inset 0 1px 0 rgba(241,245,248,.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 -14px 22px -14px rgba(0,0,0,.7),0 22px 48px -18px rgba(245,158,11,.22),0 0 26px -8px rgba(245,158,11,.18)}
.btn-gold:hover .btn-pl,.btn-gold:focus-visible .btn-pl{opacity:1}
.btn-gold:hover .btn-pl i:nth-child(7){opacity:1}
.btn-gold:hover .btn-pl i:nth-child(-n+6){animation-duration:10s}
@supports not (mix-blend-mode:plus-lighter){.btn-pl i{mix-blend-mode:screen}}
.btn-gold:hover .btn-ar{transform:translateX(-2px)}
.btn-gold:active{transform:translateY(1px) scale(.985)}
.btn-gold:active .btn-pl{opacity:1}
.btn-gold:focus-visible{outline:none}
.btn-gold:disabled{cursor:progress}
.btn-gold:disabled .btn-pl{opacity:1}
.btn-gold:disabled .btn-pl i:nth-child(-n+6){animation-duration:4s}
.btn-lg{min-height:54px;padding:0 20px 0 24px;gap:22px;border-radius:9px;font-size:14px}
.btn-lg .btn-ar{width:17px;height:17px}