/* A still metal identity plate, paired with a copper Tempero panel. */
.card-studio{padding:44px 28px;background:#0b1016;color:#f0f3f6;background-image:radial-gradient(ellipse at 10% 20%,#34506635,transparent 55%),radial-gradient(ellipse at 90% 85%,#99603f22,transparent 50%);min-height:100svh}
.card-studio .vcard{max-width:1000px;position:relative}
.card-studio .vcard-top{margin-bottom:28px;font-size:10px;letter-spacing:.12em;min-height:36px;color:#8d9dab}
.card-studio .vcard-top a{font-weight:700;color:#e9c6a7;letter-spacing:.13em;font-size:12px;padding-block:8px}
.card-studio .vcard-top a span{margin-left:10px}
.card-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;grid-template-areas:'identity tempero' 'contact tempero';align-items:start}
.identity-plate{grid-area:identity;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid #c7d3df38;border-radius:22px;background:linear-gradient(135deg,#28323d,#141c25 70%);box-shadow:0 24px 60px #0005,inset 0 1px 0 #ffffff17}
.identity-plate::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid transparent;background:linear-gradient(130deg,#edc39d55,transparent 35%,transparent 70%,#8cafd82b) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.identity-copy{position:relative;padding:0 30px 25px}
.identity-copy .vcard-kicker{font-size:9px;letter-spacing:.13em;color:#d0b195;margin-bottom:11px}
.identity-copy h1{font:800 clamp(42px,5.7vw,64px)/1 var(--display);letter-spacing:-.055em;color:#f5f4ef}
.identity-dot{color:#dba77c}
.identity-copy>p:last-child{font-size:12px;color:#b7c4cf;margin-top:15px}
.identity-bottom{padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #c0ccda24;font-size:10px;color:#9daeba;background:#10182080}
.identity-bottom a{color:#edc4a2;font-size:12px;font-weight:700;padding:5px 0}
.identity-bottom a span{margin-left:9px}
.card-studio .tempero-launch{grid-area:tempero;align-self:stretch;border:1px solid #e7b68f;border-radius:22px;padding:34px;background:radial-gradient(ellipse at 0 0,#f4d8bd,transparent 70%),linear-gradient(145deg,#e2b28b,#c68b5f);box-shadow:0 24px 60px #0004,inset 0 1px 0 #fff9;color:#241d19;display:flex;flex-direction:column}
.card-studio .tempero-launch::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.17;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#fff5 3px,transparent 4px)}
.card-studio .tempero-launch>*{position:relative}
.card-studio .tempero-topline{font-size:9px;letter-spacing:.09em;gap:13px;margin-bottom:32px}
.card-studio .tempero-icon{width:44px;height:44px;flex:none;border-radius:13px;color:#f1d0af;background:linear-gradient(145deg,#51443b,#251d19);border:1px solid #836247;box-shadow:0 5px 9px #52331d30,inset 0 1px 0 #ffffff42}
.tempero-icon svg{width:30px;height:30px}
.card-studio .tempero-launch h2{font-size:clamp(52px,6vw,78px);line-height:.95;letter-spacing:-.065em;white-space:nowrap}
.card-studio .tempero-launch h2>span{color:#815133}
.card-studio .tempero-launch .tempero-statement{font:800 28px/1.15 var(--display);letter-spacing:-.025em;color:#34271f;margin-top:25px}
.card-studio .tempero-launch .tempero-description{font-size:13px;color:#5c4331;line-height:1.7;margin-top:17px}
.tempero-workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:27px 0 4px}
.tempero-workflow>div{display:flex;align-items:center;flex-direction:column;gap:9px;padding:17px 5px 13px;border:1px solid #754d3033;border-radius:10px;background:linear-gradient(#fff3,#fff0);box-shadow:inset 0 1px 0 #fff4;font:10px var(--mono);color:#5e3f28}
.tempero-workflow svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card-studio .tempero-actions{margin-top:auto;padding-top:26px;border-top:0;gap:11px}
.card-studio .tempero-action{min-height:72px;border:1px solid #4a312155;border-radius:11px;padding:13px 17px;background:#f7dcc345;transition:background .2s,box-shadow .2s;transform:none}
.card-studio .tempero-action .tempero-action-copy{font:700 15px/1.3 var(--sans);display:block}
.tempero-action-copy small{font:9px/1.5 var(--mono);display:block;letter-spacing:.1em;margin-bottom:5px;opacity:.7}
.card-studio .tempero-arrow{font:24px var(--sans)}
.card-studio .tempero-action--login{background:#241e1b;color:#f5dcc7;border-color:#34271e;box-shadow:0 6px 12px #57351a21}
.card-studio .tempero-action:hover{background:#fce5d1;box-shadow:0 5px 15px #57351a24}
.card-studio .tempero-action--login:hover{background:#423127}
.personal-contact{grid-area:contact;min-width:0;padding:0 3px}
.contact-caption{display:flex;align-items:baseline;justify-content:space-between;margin:1px 0 17px;gap:8px}
.contact-caption h2{font:800 22px/1.2 var(--display);letter-spacing:-.02em}
.contact-caption>span{font:10px var(--mono);color:#8e9dab}
.card-studio .vc-grid{gap:10px}
.card-studio .vcard-btn{min-height:58px;border-radius:11px;border-color:#697f963b;background:linear-gradient(140deg,#25313f99,#16202b66);justify-content:flex-start;padding:12px 17px;font-size:12px;gap:12px}
.card-studio .vcard-btn svg{color:#d8ab85;width:18px;height:18px;stroke-width:1.5}
.card-studio .vcard-btn:hover{background:#293747;border-color:#d7b18c88}
.card-studio .vcard-foot{margin-top:26px;align-items:center;font-size:10px;min-height:40px;gap:20px;color:#8393a3}
.card-motion{font:10px var(--sans);color:#8393a3;background:transparent;border:0;padding:12px 0;min-height:44px;text-align:left}
.card-motion:hover{color:#edc4a2}
.card-motion[hidden]{display:none}
.card-studio .vcard-foot nav{margin-left:auto}
@media(min-width:761px){.card-studio{padding-top:max(44px,calc((100svh - 770px)/2))}}
@media(max-width:760px){.card-studio{padding:20px 20px 26px}.card-studio .vcard{max-width:480px}.card-studio .vcard-top{margin-bottom:17px;font-size:8px}.card-layout{grid-template-columns:1fr;grid-template-areas:'identity' 'tempero' 'contact';gap:22px}.identity-plate{}.identity-copy{}.identity-copy h1{font-size:55px}.identity-bottom{padding:17px 25px}.card-studio .tempero-launch{padding:28px}.card-studio .tempero-topline{margin-bottom:25px}.card-studio .tempero-launch h2{font-size:70px}.card-studio .tempero-launch .tempero-statement{font-size:28px;margin-top:22px}.tempero-workflow{margin-top:23px}.card-studio .tempero-actions{padding-top:23px}.contact-caption{margin-top:5px}.card-studio .vcard-foot{flex-direction:row;flex-wrap:wrap;margin-top:20px}}
@media(max-width:380px){.card-studio{padding-inline:14px}.identity-plate{border-radius:18px}.identity-copy{}.identity-copy h1{font-size:48px}.identity-copy>p:last-child{font-size:10px}.identity-copy .vcard-kicker{font-size:8px}.identity-bottom{padding:15px 22px;font-size:9px}.identity-bottom a{font-size:10px}.card-studio .tempero-launch{padding:24px;border-radius:18px}.card-studio .tempero-topline{font-size:8px;gap:10px}.card-studio .tempero-launch h2{font-size:61px}.contact-caption h2{font-size:20px}.contact-caption>span{font-size:8px}.card-studio .vcard-btn{padding-inline:13px}}
/* Keep the signet separate from the name, even on compact screens. */

@media(max-width:760px){.identity-plate{}.identity-copy{}.identity-copy h1{font-size:51px}.identity-copy>p:last-child{margin-top:10px}.card-studio .tempero-launch{padding:25px}.card-studio .tempero-topline{margin-bottom:21px}.card-studio .tempero-icon{width:36px;height:36px;border-radius:10px}.card-studio .tempero-launch h2{font-size:65px}.card-studio .tempero-launch .tempero-statement{font-size:24px;margin-top:18px}.card-studio .tempero-launch .tempero-description{font-size:12px;margin-top:12px}.tempero-workflow{margin-top:20px;gap:7px}.tempero-workflow>div{flex-direction:row;justify-content:center;gap:7px;padding:12px 5px;font-size:9px}.tempero-workflow svg{width:19px;height:19px}.card-studio .tempero-actions{padding-top:20px}.card-studio .tempero-action{min-height:66px}}
@media(max-width:380px){.identity-plate{}.identity-copy h1{font-size:45px}.identity-copy{}.card-studio .tempero-launch{padding:23px}.card-studio .tempero-launch h2{font-size:58px}.tempero-workflow>div{gap:5px;font-size:8px}}

.identity-art{position:relative;flex:none;max-width:300px;margin:12px auto; width:69%;aspect-ratio:3/2;pointer-events:none}
.card-signet{display:block;width:100%;height:auto;filter:drop-shadow(0 9px 10px #0007)}
.identity-art::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffe5c85c 48%,#ffffff73 50%,transparent 66%);background-size:300% 100%;mask:url('../img/logo-studio-cutout-v1.png') center/contain no-repeat;mix-blend-mode:screen;animation:card-metal-light 9s ease-in-out infinite}
@keyframes card-metal-light{0%,8%{background-position:150% 0}85%,100%{background-position:-50% 0}}
.card-light-paused .identity-art::after{animation-play-state:paused}
@media(max-width:760px){.identity-art{width:60%}}
@media(prefers-reduced-motion:reduce){.identity-art::after{display:none}}

@media(max-width:760px){.identity-art{max-width:250px;margin:12px auto}.identity-copy{padding-inline:25px;padding-bottom:22px}}
@media(max-width:380px){.identity-copy{padding-inline:22px}}