/* kemalbrown.com · Every side of Kemal, 3D cards (contact page). CSS 3D only. contactcards1 · 2026-11-01 */
.s3 .s3-head{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(8px,2vw,24px)}
.s3 .s3-head .body{color:var(--c-mute-l)}
.s3-deck{grid-column:1/-1;position:relative;min-height:clamp(440px,44vw,600px);perspective:1600px;display:flex;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.s3-deck>li{display:contents}
.s3-card{position:absolute;width:clamp(190px,17vw,250px);aspect-ratio:3/4.3;transform-style:preserve-3d;transition:transform .9s var(--ease);text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;outline:none}
.s3-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.s3-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.s3-front{background:var(--c-ink);color:var(--c-cream);box-shadow:0 30px 60px -30px rgba(17,17,17,.55)}
.s3-mono{font-family:var(--display);font-size:clamp(130px,12vw,190px);line-height:.8;color:transparent;-webkit-text-stroke:1.2px var(--c-gold);align-self:flex-end;margin-right:-6px}
.s3-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,2.3vw,34px);line-height:.95}
.s3-back{background:var(--c-white);color:var(--c-ink);transform:rotateY(180deg);box-shadow:0 30px 60px -30px rgba(17,17,17,.4);border:1px solid var(--c-line-l)}
.s3-blurb{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.8vw,26px);line-height:1.25}
.s3-go{display:flex;justify-content:space-between;border-top:1px solid var(--c-line-l);padding-top:10px}
.s3-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.14),transparent 55%);mix-blend-mode:screen}
.s3-card.is-flipped .s3-flip{transform:rotateY(180deg)}
.s3-card:focus-visible .s3-face{outline:2px solid var(--c-gold);outline-offset:4px}
.s3-foot{grid-column:1/-1;margin-top:clamp(8px,2vw,20px)}
/* no-JS: a plain row of cards that flip on hover */
html:not(.js) .s3-deck{flex-wrap:wrap;gap:16px;min-height:0}
html:not(.js) .s3-card{position:relative}
html:not(.js) .s3-card:hover .s3-flip,html:not(.js) .s3-card:focus .s3-flip{transform:rotateY(180deg)}
@media (max-width:759px){
 .s3-deck{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:30px 18vw 40px;margin:0 calc(var(--m)*-1);min-height:0;perspective:900px;scrollbar-width:none}
 .s3-deck::-webkit-scrollbar{display:none}
 .s3-card{position:relative;flex:0 0 64vw;width:64vw;scroll-snap-align:center;transition:transform .35s var(--ease)}
 .s3-mono{font-size:46vw}
}
@media (prefers-reduced-motion:reduce){.s3-card,.s3-flip{transition:none!important}}
html.static .s3-card,html.static .s3-flip{transition:none!important}