/* An evenly spaced text navigation, keeping the original centered card. */
.header{left:24px;right:24px;top:28px;display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto;align-items:start;gap:24px;font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.35px;color:#393d3b}
.header button{text-align:left;justify-self:start;white-space:nowrap}
.header button:last-child{justify-self:end}
.header button:hover{opacity:.7}
body[data-view=work] .header{visibility:hidden;pointer-events:none;opacity:0}
.intro-copy{top:101px}
.intro-copy p{color:#454a47;opacity:1}
@media(min-width:1600px){.header{font-size:24px;top:34px}}
@media(max-width:700px){.header{left:18px;right:18px;top:25px;grid-template-columns:auto 1fr 1fr auto;gap:14px;font-size:13px;letter-spacing:-.2px}.header button:nth-child(2),.header button:nth-child(3){justify-self:center}.intro-copy{top:95px}}
@media(max-width:360px){.header{left:14px;right:14px;gap:10px;font-size:12px}}
@media(max-height:600px) and (min-width:701px){.header{top:22px;font-size:18px}.intro-copy{top:80px}}

/* Continue the catalogue typography in the invitation below the card. */
.down-arrow{top:calc(50% + 185px);width:220px;height:59px;display:flex;flex-direction:column;align-items:center;gap:9px;color:#505a56;font:600 12px/1.5 var(--annotation-font);letter-spacing:0;transition:color .25s ease}
.down-arrow svg{width:24px;height:30px;stroke-width:1.5;animation:work-cue 2.2s ease-in-out 3}
.down-arrow:hover{transform:translateX(-50%);color:#222}
.down-arrow:hover svg{animation:none;transform:translateY(4px)}
.card-hint{font:400 10px/1.5 var(--annotation-font);color:#777}
@keyframes work-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:700px){.down-arrow{top:calc(48% + 242px);height:55px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.down-arrow svg{animation:none}}

/* A loose pencil portrait mounted within the original ID-card layout. */
.card-photo{position:relative;overflow:visible;border:0;background:#f8f4eb;transform:rotate(-1.2deg);box-shadow:0 1px 3px #343b3414}
.card-photo img{display:block;object-fit:contain;object-position:center}
.card-photo::after{content:"";position:absolute;inset:-3px -2px;border:1px solid #64665e70;border-radius:2% 1% 3% 0;transform:rotate(2deg);pointer-events:none}

/* Warm drawing paper and graphite details echo the portrait's surface. */
.card-face{background-color:#f4efe3;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22paper%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.68%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20opacity%3D%22.17%22%20filter%3D%22url%28%23paper%29%22/%3E%3C/svg%3E"),linear-gradient(120deg,#faf6ec,#eee7d9);background-size:180px 180px,100% 100%;background-blend-mode:multiply,normal;border-color:#d2c9b9;box-shadow:0 2px 5px #554d381a;color:#48473f}
.card-front::after,.card-back::after{background:none}
.card-heading{border-color:#aaa291}
.card-heading>b{color:#625e53;-webkit-text-stroke:0}
.card-photo{background:#f7f0e2;box-shadow:0 1px 3px #554d3810}
.card-photo::after{border-color:#77706480}
.card-footer{justify-content:flex-end}
.card-footer>span{border-color:#a69c89}

.card-personal-details{font-family:var(--annotation-font);gap:5px}
.card-personal-details strong{font-size:19px;font-weight:400;line-height:1.15}
.card-personal-details .card-columns{gap:25px;margin:8px 0 7px}
.card-personal-details .card-columns b{font-size:11px;line-height:1.4}
.card-personal-details .card-practice{font-size:11px;line-height:1.4}