/* The card shells share the original Thunder recording and a local orb. */
@font-face{font-family:"Inter Display";src:url('assets/inter-display-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
.sms-card{container-type:inline-size;overflow:hidden;background:#fff}
.sms-card-title{position:absolute;top:53%;left:5%;width:90%;margin:0;color:#000;text-align:center;font-family:var(--font-sans);font-size:6cqw;font-weight:400;line-height:1.15;letter-spacing:-.025em;pointer-events:none}
.sms-card-peek{position:absolute;top:66%;left:3%;width:94%;aspect-ratio:5/3;overflow:hidden;border:.5px solid #0000000d;border-radius:4cqw;background:#f7f7f7;transform:rotate(2deg);transform-origin:center bottom;pointer-events:none}
.sms-card:has(.card-open[data-project="shop-app"]) .sms-card-peek{--colors-borderBase:rgba(160,160,171,.24);border:0;outline:4px solid var(--colors-borderBase);outline-offset:0;}
.card .sms-card-peek img,.card .sms-card-peek video{width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none}
.has-project-orb .thunder-thumbnail{clip-path:inset(50% 0 0)}
.project-orb-slot{position:absolute;left:30.9783%;top:11.5037%;width:38.0435%;aspect-ratio:1;pointer-events:none}
.project-orb-slot .angelo-orb{animation:none}
.card .project-orb-preview{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;filter:drop-shadow(0 5px 8px #52456026)}
.card-art .project-orb-slot *{pointer-events:none!important}
.thunder-object-artwork{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:center}

.project-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:clip;background:transparent;color:var(--ink);font-family:var(--font-sans);letter-spacing:normal}
.project-dialog::backdrop{background:transparent}
.project-dialog>.site-header{position:absolute;top:0;left:0;right:0;z-index:50;animation:none}
.project-dialog:has(>.site-header) .project-close{top:calc(clamp(24px,2.74vw,56px) + 60px)}
.project-backdrop{position:absolute;inset:0;background:#fff;pointer-events:none}
.project-sheet{position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;z-index:10;outline:none;padding:0;background:transparent}
.project-sheet::-webkit-scrollbar{display:none}
.project-sheet:focus-visible{outline:2px solid #74618e;outline-offset:-6px}
.project-details[hidden]{display:none}
.project-dialog .project-sheet:has(.project-details--gallery:not([hidden])),.project-dialog .project-gallery{background:transparent}
/* Original popover typography; gallery styles retain its width and alignment. */
.project-description p{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:460;line-height:24px;letter-spacing:-.00563rem;color:#111;text-align:center}

/* All navigation stays above the content, with only circular targets catching clicks. */
.project-stage{position:absolute;inset:0;z-index:30;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.project-stage--returning{position:fixed;z-index:100}
.project-stage--returning,.project-stage--returning *{pointer-events:none!important}
.project-stage--returning .orb-label{display:none}
.focus-card{position:absolute;left:0;top:0;width:100px;height:100px;padding:0;border:0;border-radius:50%;background:transparent;transform-origin:50% 50%;pointer-events:none;-webkit-tap-highlight-color:transparent;outline:none;will-change:transform}
.focus-card-art{position:absolute;inset:0;display:block;pointer-events:none}
.focus-card .angelo-orb{animation:none;transform:none}
.focus-card .angelo-orb-under,.focus-card .angelo-orb-pool{display:none}
.focus-card .angelo-orb-face{inset:2.6%}
.focus-card .angelo-orb-face>.angelo-orb-fallback,.focus-card .angelo-orb-face>.angelo-orb-canvas{transform:scale(1.05485)}
.focus-card .angelo-orb-backing{background:transparent}
.orb-hit{position:absolute;inset:0;display:block;border-radius:50%;clip-path:circle(50%);pointer-events:auto;cursor:pointer;touch-action:pan-y}
/* Touch: a larger invisible tap circle; the orb is drawn at 100px and scaled, so 14px is about 10px on a phone. */
@media(pointer:coarse),(max-width:719px){.orb-hit{inset:-14px}}
.focus-card:focus-visible .orb-hit{outline:2px solid #74618e;outline-offset:-3px}
.orb-label{position:absolute;bottom:112%;left:50%;width:max-content;max-width:220px;padding:6px 10px;border-radius:20px;color:#41434b;background:#f5f7f8;font:12px/1.35 var(--font-sans);letter-spacing:.01em;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity 150ms ease}
.focus-card:focus-visible .orb-label{opacity:1}
@media(hover:hover) and (pointer:fine){.focus-card:hover .orb-label{opacity:1}}
.project-controls{position:absolute;inset:0;z-index:40;pointer-events:none}
.project-dialog .project-close{position:absolute;display:grid;place-items:center;left:auto;right:clamp(18px,1.74vw,30px);top:max(clamp(18px,1.56vw,27px),env(safe-area-inset-top));width:clamp(44px,3.18vw,55px);height:clamp(44px,3.18vw,55px);margin:0;padding:0;border:0;border-radius:50%;background:#f5f7f8;color:#050505;transform:none;pointer-events:auto;cursor:pointer}
.project-dialog .project-close svg{width:24px;height:24px}
.project-close:focus-visible{outline:2px solid #74618e;outline-offset:3px}
/* Narrow screens: the close button takes the role label's corner, above the header's hover area. */
@media(width < 900px){
 .project-controls{z-index:60}
 .project-dialog>.site-header :is(.header-role,.header-mobile-about){visibility:hidden}
 .project-dialog .project-close,.project-dialog:has(>.site-header) .project-close{top:calc(max(24px,env(safe-area-inset-top)) - 2px);right:max(16px,env(safe-area-inset-right))}
}
.project-exit-cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:10000;display:none}
.project-exit-cursor span{position:absolute;left:-23px;top:-23px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fffefa;color:#464646;box-shadow:0 2px 10px #23281e1a,0 0 0 1px #23281e06;opacity:0;transform:scale(.55) rotate(-35deg);transition:transform 200ms cubic-bezier(.2,1.5,.4,1),opacity 120ms ease}
.project-exit-cursor svg{width:24px;height:24px;display:block}
.project-exit-cursor.is-visible span{opacity:1;transform:scale(1) rotate(0)}
@media(width >= 900px) and (hover:hover) and (pointer:fine){
 .project-exit-cursor{display:block}
 .project-dialog .project-close{display:none}
 html[data-keyboard] .project-dialog .project-close{display:grid}
 .project-dialog:has(.project-exit-cursor.is-visible),.project-dialog:has(.project-exit-cursor.is-visible) *{cursor:none!important}
 .project-dialog:has(.project-exit-cursor.is-visible) .page-cursor{visibility:hidden}
}
.project-footer{position:absolute;left:24px;bottom:24px;margin:0;color:#a7adb8;font-size:13px;line-height:1.4}
.project-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(width < 720px){
 .project-footer{display:none}
 .orb-label{font-size:13px;max-width:160px}
}
@media(prefers-reduced-motion:reduce){
 .orb-label{transition:none}
 .project-exit-cursor span{transition:none}
 .focus-card{will-change:auto}
}
/* Opened from a homepage link: only the project dialog shows, never the old homepage behind it. */
html[data-project-link] body{visibility:hidden}
html[data-project-link] #project-dialog{visibility:visible}
/* Inside the homepage sheet: the gallery alone, the sheet supplies the close button. */
html[data-embed],html[data-embed] body{height:100%;max-height:100%;overflow:hidden;overscroll-behavior:none}
html[data-embed] body> :not(#project-dialog){display:none!important}
html[data-embed] .project-dialog{height:100%;max-height:100%}
html[data-embed] .project-dialog>.site-header,html[data-embed] .project-stage,html[data-embed] .project-controls,html[data-embed] .project-exit-cursor{display:none}
/* The gallery takes focus as the sheet opens, so arrow keys work at once; filling the sheet, its ring would only frame the page. */
html[data-embed] .project-gallery:focus-visible{outline:none}
/* Inside the sheet the project text takes the homepage intro's font, weight and colour, left-aligned, at its original size. */
html[data-embed] .project-description p{max-width:34.375rem;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:460;letter-spacing:-.00563rem;color:#111;text-align:center;-webkit-font-smoothing:antialiased}