body{min-height:100vh;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 42%, rgb(39 64 75 / 42%), transparent 34rem), #171716}
a{color:inherit}
.card-page{display:grid;place-content:center;min-height:100vh;min-height:100svh;padding:2rem}
.card-stage{width:min(48rem, calc(100vw - 3rem));perspective:1100px}
.business-card{--rotate-x:0deg;--rotate-y:0deg;position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;aspect-ratio:1.75 / 1;width:100%;overflow:hidden;padding:clamp(1.5rem, 4vw, 3rem);border-radius:0.38rem;color:#faf9f6;background:#171716;box-shadow:0 2.5rem 5rem rgb(0 0 0 / 42%), 0 0.5rem 1.5rem rgb(0 0 0 / 24%);transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y));transform-style:preserve-3d;transition:transform 550ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 550ms ease;will-change:transform}
.card-stage:hover .business-card{box-shadow:0 3.5rem 6rem rgb(0 0 0 / 48%), 0 1rem 2rem rgb(0 0 0 / 28%);transition-duration:120ms}
.business-card__texture{position:absolute;inset:0;opacity:0.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");pointer-events:none}
.business-card__brand{position:relative;z-index:1;transform:translateZ(1.5rem)}
.business-card__identity{position:relative;z-index:1;transform:translateZ(1.5rem)}
.business-card__details{position:relative;z-index:1;transform:translateZ(1.5rem)}
.business-card__brand{display:flex;grid-column:1 / -1;align-items:center;gap:0.8rem}
.brand-mark{display:grid;grid-template-columns:repeat(3, 0.35rem);grid-template-rows:repeat(3, 0.35rem);width:1.05rem;height:1.05rem}
.brand-mark i{display:block;background:currentColor}
.brand-mark i:nth-child(1){grid-area:1 / 1}
.brand-mark i:nth-child(2){grid-area:1 / 2}
.brand-mark i:nth-child(3){grid-area:2 / 2}
.brand-mark i:nth-child(4){grid-area:3 / 2}
.brand-name{font-size:0.76rem;font-weight:540;letter-spacing:-0.01em}
.business-card__identity{align-self:end}
.business-card h1{max-width:9ch;margin:0;font-size:clamp(2rem, 5.8vw, 4.25rem);font-weight:390;letter-spacing:-0.065em;line-height:0.89}
.business-card__role{margin:1rem 0 0;color:rgb(251 253 255 / 68%);font-size:clamp(0.72rem, 1.4vw, 0.88rem)}
.business-card__details{display:flex;align-self:end;align-items:flex-end;flex-direction:column;gap:0.45rem;font-size:clamp(0.62rem, 1.25vw, 0.78rem);font-style:normal;letter-spacing:-0.015em;text-align:right}
.business-card__details a{text-decoration-color:transparent;text-underline-offset:0.2em;transition:text-decoration-color 160ms ease}
.business-card__details a:hover{text-decoration-color:currentColor}
.business-card__details a:focus-visible{text-decoration-color:currentColor}
.business-card__details span{color:rgb(251 253 255 / 55%)}
.interaction-hint{margin:1.5rem 0 0;color:rgb(251 253 255 / 38%);font-size:0.65rem;letter-spacing:0.09em;text-align:center;text-transform:uppercase}
@media(max-width: 600px){
.card-page{padding:1rem}
.card-stage{width:min(100%, 25rem)}
.business-card{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;aspect-ratio:1 / 1.28;padding:1.5rem}
.business-card__identity{align-self:center}
.business-card__details{align-items:flex-start;text-align:left}
}
@media(hover: none), (prefers-reduced-motion: reduce){
.business-card{transform:none !important;transition:none}
.interaction-hint{display:none}
}