/* Business card component (same design as /rene), for embedding in site pages.
   All classes are prefixed bc- so they never clash with the site's own .card. */
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-display:swap;src:url(/rene/fonts/corm-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:300;font-display:swap;src:url(/rene/fonts/mont-300.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url(/rene/fonts/mont-400.woff2) format('woff2')}

.bc-wrap{margin:28px auto 4px;max-width:560px;perspective:1600px}
.bc-stage{width:100%;aspect-ratio:85/55;position:relative;perspective:1800px}
.bc-flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.2,.2,1)}
.bc-stage.bc-flipped .bc-flipper{transform:rotateY(180deg)}
.bc-face{position:absolute;inset:0;border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.bc-back{transform:rotateY(180deg)}
.bc-stage:not(.bc-flipped) .bc-back,.bc-stage.bc-flipped .bc-front{visibility:hidden;transition:visibility 0s .4s}
.bc-stage.bc-flipped .bc-back,.bc-stage:not(.bc-flipped) .bc-front{visibility:visible;transition:visibility 0s .4s}

/* Opening animation: the card swings open from its left edge like a cover, once, when it scrolls into view */
.bc-js .bc-stage{transform-origin:0 50%;transform:rotateY(-88deg);opacity:0}
.bc-js .bc-stage.bc-open{transform:rotateY(0);opacity:1;
  transition:transform 1.3s cubic-bezier(.2,.75,.25,1),opacity .5s ease}
@media (prefers-reduced-motion:reduce){
  .bc-js .bc-stage{transform:none;opacity:1}
  .bc-flipper,.bc-js .bc-stage.bc-open{transition:none}
}

.bc-card{width:935px;height:605px;position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s,.5));
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;color:#d9dfe5;font-size:13.5px;font-weight:400;letter-spacing:.08em;
  background:#33465a url(/rene/card-paper.jpg) 0 0/935px 605px no-repeat}
.bc-card a{color:inherit;text-decoration:none;border:0}
.bc-card a:focus-visible{outline:2px solid #e3e7eb;outline-offset:3px;border-radius:4px}
.bc-card p{margin:0;padding:0}
.bc-foil{background-image:linear-gradient(170deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,.10) 60%,rgba(255,255,255,.2) 100%),url(/rene/foil-silver.jpg);
  background-size:100% 100%,420px 420px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -.7px .3px rgba(0,0,0,.45)) drop-shadow(0 .7px 0 rgba(255,255,255,.14)) drop-shadow(0 1.4px 1.6px rgba(0,0,0,.18))}
.bc-fs{background-image:linear-gradient(175deg,#f2f4f7 0%,#d3d9df 50%,#e9edf1 100%);filter:drop-shadow(0 -.5px .2px rgba(0,0,0,.4)) drop-shadow(0 .5px 0 rgba(255,255,255,.12))}
.bc-di{display:block;flex-shrink:0;filter:drop-shadow(0 -.8px .5px rgba(0,0,0,.6)) drop-shadow(0 .6px 0 rgba(255,255,255,.2))}
.bc-band{background:radial-gradient(ellipse at 50% 0%,rgba(16,20,28,.5) 0%,rgba(16,20,28,0) 70%)}
.bc-wm{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:.35em;padding-left:.35em;text-transform:uppercase;white-space:nowrap;line-height:1}
.bc-lab{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.bc-head{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.bc-wmrow{display:flex;align-items:center}
.bc-name{position:absolute;left:120px;top:330px}
.bc-rule{width:70px;height:1px;margin-top:16px;background:linear-gradient(90deg,#c8cdd6,transparent)}
.bc-grid{position:absolute;left:110px;right:110px;bottom:50px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.bc-ic{display:flex;align-items:center;gap:14px;min-height:70px;padding:0 10px}
.bc-icons{position:absolute;left:96px;bottom:60px;display:flex;gap:44px;align-items:flex-end}
.bc-icons a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-width:72px;min-height:72px;padding:12px 10px 4px;margin:-12px -10px -4px}
.bc-qr{position:absolute;right:96px;bottom:64px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bc-qr div{width:120px;height:120px;padding:10px;border-radius:8px;background:#e6eaee;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.bc-qr img{width:100%;height:100%;display:block}

.bc-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}