/* Andrea Lugani portfolio. Styles carried over 1:1 from the Claude Design page. */
@font-face{font-family:Geist;font-style:normal;font-display:swap;font-weight:400;src:url(fonts/geist-400-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-display:swap;font-weight:400;src:url(fonts/geist-400-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--measure:38rem;--gutter:3rem;--space-page:2.5rem;--space-section:2.5rem;--space-paragraph:1rem;--font-size-body:1.0625rem;--font-size-hero:2.25rem;--font-size-subtitle:1.0625rem}
@media (min-width:641px){:root{--font-size-body:1.25rem;--font-size-hero:3rem;--font-size-subtitle:1.25rem}}
@media (max-width:640px){:root{--gutter:2rem;--space-page:2rem;--space-section:2rem}}
html{color-scheme:dark;scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:100%}
html,body,dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{margin:0;background:#111111;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*,:before,:after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
h1,h2{font-size:inherit;font-weight:inherit}
canvas{display:block;vertical-align:middle}
a{font-weight:400;text-underline-offset:.15em;text-decoration:underline;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.nav-btn{border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 1px 2px rgba(0,0,0,.45);transition:background-color .4s ease,color .4s ease,border-color .4s ease,text-shadow .4s ease,opacity .35s ease}
.nav-btn:not(.nav-btn-solid){background:transparent!important;border-color:rgba(255,255,255,.5)}
.nav-btn{position:relative}
.nav-btn:not(:disabled):active{opacity:var(--press-alpha,1);transition:background-color .4s ease,color .4s ease,border-color .4s ease,text-shadow .4s ease,opacity .08s ease-out}
.name-glow{opacity:calc(.9 + var(--glow,0) * .1);text-shadow:0 0 calc(var(--glow,0) * 10px) rgba(255,255,255,calc(var(--glow,0) * .3));transition:opacity .15s ease-out,text-shadow .15s ease-out}
.nav-btn::after{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:var(--glow,0);transition:opacity .15s ease-out;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nav-btn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));transition:filter .4s ease}
.nav-btn:hover svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0))}
.nav-btn:hover{background:#ffffff!important;color:#000000!important;border-color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,0)}
.nav-btn.nav-btn-solid{background:rgba(245,245,245,.7)!important;color:#0f131a!important;border-color:rgba(245,245,245,.7);text-shadow:none}
.nav-btn.nav-btn-solid svg{filter:none}
.nav-btn:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.nav-btn:disabled::after{display:none}
.nav-btn:disabled:hover{background:transparent!important;color:#f5f5f5!important;border-color:rgba(255,255,255,.5)}
.nav-btn:disabled:hover svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.nav-btn.nav-btn-solid:hover{background:#ffffff!important;border-color:#ffffff}
.carousel-arrow:disabled{opacity:.35;cursor:default!important;box-shadow:none!important}
.spot-hover{position:relative;isolation:isolate}
.spot-hover::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(var(--spot-rgb,255 255 255) / .2),transparent 65%)}
.spot-hover:hover::before{opacity:1}
.proj-card.spot-hover::after,.bring-card.spot-hover::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgb(var(--spot-rgb,255 255 255) / .85),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.proj-card.spot-hover:hover::after,.bring-card.spot-hover:hover::after{opacity:1}
.proj-card.spot-hover::before,.bring-card.spot-hover::before{background:radial-gradient(var(--spot-size,260px) circle at var(--mx,50%) var(--my,50%),rgb(var(--spot-rgb,255 255 255) / var(--spot-alpha,.2)),transparent 65%),linear-gradient(rgb(var(--overlay-rgb,255 255 255) / .08),rgb(var(--overlay-rgb,255 255 255) / .08))}
.hero-zone{min-height:min(40rem,70vh);padding-top:3.5rem}
.carousel{scrollbar-width:none;overscroll-behavior-x:contain;padding:1.25rem max(calc(var(--gutter) / 2),calc((100% - var(--measure)) / 2)) 2.5rem;scroll-padding-inline:max(calc(var(--gutter) / 2),calc((100% - var(--measure)) / 2))}
.carousel::-webkit-scrollbar{display:none}
.carousel>li{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.proj-card{box-shadow:0 18px 40px -18px rgba(0,0,0,.65);transition:box-shadow .35s ease,translate .25s cubic-bezier(.2,.8,.2,1);transform-origin:center;will-change:transform;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.proj-card.is-pressed{box-shadow:0 8px 18px -10px rgba(0,0,0,.65)}
.card-d{display:flex;flex-direction:row;min-height:0}
.card-d-stats{position:relative;z-index:1;display:flex;flex-direction:column;flex:0 0 30%;min-width:0;padding:0 18px;border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.card-d-stat{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3px;padding:14px 0}
.card-d-stat+.card-d-stat{position:relative;border-top:1px solid rgba(255,255,255,.08)}
.card-d-stats::after,.card-d-stat+.card-d-stat::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(200px circle at var(--lx,50%) var(--ly,50%),rgb(var(--spot-rgb,255 255 255) / .2125),transparent 70%)}
.card-d-stats::after{left:-1px;top:0;bottom:0;width:1px}
.card-d-stat+.card-d-stat::after{top:-1px;left:0;right:0;height:1px}
.proj-card.spot-hover:hover .card-d-stats::after,.proj-card.spot-hover:hover .card-d-stat+.card-d-stat::after{opacity:1}
.card-d-main span[style*="border-radius: 999px"]{position:relative}
.card-d-main span[style*="border-radius: 999px"]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgb(var(--spot-rgb,255 255 255) / .6),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.proj-card.spot-hover:hover .card-d-main span[style*="border-radius: 999px"]::after{opacity:1}
.card-d-num{font-size:26px}
.card-cue{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;line-height:1.3;color:rgba(245,245,245,.62);transition:color .35s ease}
.card-cue svg{flex:none;transition:transform .35s ease}
.proj-card:hover .card-cue,.proj-card:focus-visible .card-cue{color:rgba(245,245,245,.72);transition-delay:.15s}
.proj-card:hover .card-cue svg,.proj-card:focus-visible .card-cue svg{transform:translateX(4px)}
/* Card cue: body-grey at rest, 10% brighter on hover; after 3s of hovering, a full-white glint sweeps left to right ("slide to unlock") */
.card-cue-text{position:relative;display:inline-block;white-space:nowrap}
.card-cue-text::after{content:attr(data-text);position:absolute;inset:0;white-space:nowrap;color:transparent;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 38%,#ffffff 50%,transparent 62%) no-repeat;background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.proj-card:hover .card-cue-text::after{animation:cue-sweep 4s linear 3s infinite}
@keyframes cue-sweep{0%{opacity:1;background-position:100% 0}35%{opacity:1;background-position:0% 0}100%{opacity:1;background-position:0% 0}}
@media (prefers-reduced-motion:reduce){.proj-card:hover .card-cue-text::after{animation:none}}
@media (max-width:640px){.card-d{flex-direction:column;min-height:0}.card-d-stats{flex:0 0 auto;flex-direction:row;padding:0 28px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}.card-d-stat{padding:16px 0}.card-d-stat+.card-d-stat{border-top:0;border-left:1px solid rgba(255,255,255,.08);margin-left:14px;padding-left:14px}.card-d-num{font-size:22px}.card-d-stats::after{left:0;right:0;top:-1px;bottom:auto;width:auto;height:1px}.card-d-stat+.card-d-stat::after{left:-1px;right:auto;top:0;bottom:0;width:1px;height:auto}}
.proj-card:focus-visible,.carousel-arrow:focus-visible,.modal-close:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.proj-modal{margin:auto;max-height:min(86vh,900px);overscroll-behavior:contain;-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4)}
@media (max-width:640px){.proj-modal{width:100%!important;max-width:100%!important;height:100vh!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important}}
.proj-modal::backdrop{background:rgba(5,7,10,.35)}
.proj-modal{scrollbar-width:none;-ms-overflow-style:none}
.proj-modal::-webkit-scrollbar{display:none;width:0;height:0}
.modal-close.nav-btn{-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
/* Inside the modal (itself a blurred layer) browsers often skip the button's own blur, so it also gets a smoky glass fill */
.modal-close.nav-btn:not(:hover){background:rgba(15,19,26,.68)!important}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:9/19;overflow:hidden;border-radius:18px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:inherit;font-size:12px;line-height:1.3;text-align:center}
.shot svg{opacity:.7}
/* What I bring: an overlapping deck of open cards. The active card sits on top and the others peek out at the
   sides, showing less the deeper they sit (53px strip right under the top card, down to 40px at the bottom); hovering (or focusing) a peeking card brings it to the front. Phones get a plain stack. */
.bring-deck{display:grid}
.bring-card{grid-area:1/1;position:relative;z-index:1;width:calc(100% - 233px);display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:36px;border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px -12px rgba(0,0,0,.6);outline:none;transform-origin:center;transform:translateX(var(--dx,0px)) var(--press,) scale(calc(var(--ds,1) * var(--ps,1)));transition:transform var(--tt,.5s) cubic-bezier(.2,.8,.2,1),rotate .6s cubic-bezier(.2,.8,.2,1)}
.bring-card:focus-visible{outline:2px solid #f5f5f5;outline-offset:3px}
.bring-head{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.bring-icon{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.bring-desc{position:relative;z-index:1;padding-bottom:6px;text-wrap:pretty}
.bring-icon::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgb(var(--spot-rgb,255 255 255) / .6),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.bring-card.spot-hover:hover .bring-icon::after{opacity:1}
.bring-apps{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin:auto -28px -28px;padding:18px 28px 22px;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 35px 35px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.bring-apps::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(200px circle at var(--lx,50%) var(--ly,50%),rgb(var(--spot-rgb,255 255 255) / .2125),transparent 70%)}
.bring-card.spot-hover:hover .bring-apps::before{opacity:1}
.bring-stack{display:flex;align-items:center}
.bring-stack img{display:block;width:30px;height:30px;border-radius:22%;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.bring-stack img+img{margin-left:6px}
.bring-more{font-size:13px;font-weight:500;line-height:1}
.bring-any{display:inline-flex;align-items:center;min-height:30px;font-size:14px;font-weight:600;line-height:1}
.bring-shade{position:absolute;inset:-1px;z-index:3;border-radius:inherit;background:#07090d;opacity:0;pointer-events:none;transition:opacity .5s ease}
.bring-deck[data-active="0"] .bring-card[data-i="0"]{z-index:10;--ds:1;--dx:0.0px}.bring-deck[data-active="0"] .bring-card[data-i="0"] .bring-shade{opacity:0}
.bring-deck[data-active="0"] .bring-card[data-i="1"]{z-index:9;--ds:0.96;--dx:60.3px}.bring-deck[data-active="0"] .bring-card[data-i="1"] .bring-shade{opacity:0.38}
.bring-deck[data-active="0"] .bring-card[data-i="2"]{z-index:8;--ds:0.92;--dx:116.2px}.bring-deck[data-active="0"] .bring-card[data-i="2"] .bring-shade{opacity:0.55}
.bring-deck[data-active="0"] .bring-card[data-i="3"]{z-index:7;--ds:0.88;--dx:167.7px}.bring-deck[data-active="0"] .bring-card[data-i="3"] .bring-shade{opacity:0.68}
.bring-deck[data-active="0"] .bring-card[data-i="4"]{z-index:6;--ds:0.84;--dx:214.8px}.bring-deck[data-active="0"] .bring-card[data-i="4"] .bring-shade{opacity:0.76}
.bring-deck[data-active="1"] .bring-card[data-i="0"]{z-index:9;--ds:0.96;--dx:0.0px}.bring-deck[data-active="1"] .bring-card[data-i="0"] .bring-shade{opacity:0.38}
.bring-deck[data-active="1"] .bring-card[data-i="1"]{z-index:10;--ds:1;--dx:60.3px}.bring-deck[data-active="1"] .bring-card[data-i="1"] .bring-shade{opacity:0}
.bring-deck[data-active="1"] .bring-card[data-i="2"]{z-index:9;--ds:0.96;--dx:120.6px}.bring-deck[data-active="1"] .bring-card[data-i="2"] .bring-shade{opacity:0.38}
.bring-deck[data-active="1"] .bring-card[data-i="3"]{z-index:8;--ds:0.92;--dx:176.5px}.bring-deck[data-active="1"] .bring-card[data-i="3"] .bring-shade{opacity:0.55}
.bring-deck[data-active="1"] .bring-card[data-i="4"]{z-index:7;--ds:0.88;--dx:228.0px}.bring-deck[data-active="1"] .bring-card[data-i="4"] .bring-shade{opacity:0.68}
.bring-deck[data-active="2"] .bring-card[data-i="0"]{z-index:8;--ds:0.92;--dx:0.0px}.bring-deck[data-active="2"] .bring-card[data-i="0"] .bring-shade{opacity:0.55}
.bring-deck[data-active="2"] .bring-card[data-i="1"]{z-index:9;--ds:0.96;--dx:55.9px}.bring-deck[data-active="2"] .bring-card[data-i="1"] .bring-shade{opacity:0.38}
.bring-deck[data-active="2"] .bring-card[data-i="2"]{z-index:10;--ds:1;--dx:116.2px}.bring-deck[data-active="2"] .bring-card[data-i="2"] .bring-shade{opacity:0}
.bring-deck[data-active="2"] .bring-card[data-i="3"]{z-index:9;--ds:0.96;--dx:176.5px}.bring-deck[data-active="2"] .bring-card[data-i="3"] .bring-shade{opacity:0.38}
.bring-deck[data-active="2"] .bring-card[data-i="4"]{z-index:8;--ds:0.92;--dx:232.4px}.bring-deck[data-active="2"] .bring-card[data-i="4"] .bring-shade{opacity:0.55}
.bring-deck[data-active="3"] .bring-card[data-i="0"]{z-index:7;--ds:0.88;--dx:0.0px}.bring-deck[data-active="3"] .bring-card[data-i="0"] .bring-shade{opacity:0.68}
.bring-deck[data-active="3"] .bring-card[data-i="1"]{z-index:8;--ds:0.92;--dx:51.5px}.bring-deck[data-active="3"] .bring-card[data-i="1"] .bring-shade{opacity:0.55}
.bring-deck[data-active="3"] .bring-card[data-i="2"]{z-index:9;--ds:0.96;--dx:107.4px}.bring-deck[data-active="3"] .bring-card[data-i="2"] .bring-shade{opacity:0.38}
.bring-deck[data-active="3"] .bring-card[data-i="3"]{z-index:10;--ds:1;--dx:167.7px}.bring-deck[data-active="3"] .bring-card[data-i="3"] .bring-shade{opacity:0}
.bring-deck[data-active="3"] .bring-card[data-i="4"]{z-index:9;--ds:0.96;--dx:228.0px}.bring-deck[data-active="3"] .bring-card[data-i="4"] .bring-shade{opacity:0.38}
.bring-deck[data-active="4"] .bring-card[data-i="0"]{z-index:6;--ds:0.84;--dx:0.0px}.bring-deck[data-active="4"] .bring-card[data-i="0"] .bring-shade{opacity:0.76}
.bring-deck[data-active="4"] .bring-card[data-i="1"]{z-index:7;--ds:0.88;--dx:47.1px}.bring-deck[data-active="4"] .bring-card[data-i="1"] .bring-shade{opacity:0.68}
.bring-deck[data-active="4"] .bring-card[data-i="2"]{z-index:8;--ds:0.92;--dx:98.6px}.bring-deck[data-active="4"] .bring-card[data-i="2"] .bring-shade{opacity:0.55}
.bring-deck[data-active="4"] .bring-card[data-i="3"]{z-index:9;--ds:0.96;--dx:154.5px}.bring-deck[data-active="4"] .bring-card[data-i="3"] .bring-shade{opacity:0.38}
.bring-deck[data-active="4"] .bring-card[data-i="4"]{z-index:10;--ds:1;--dx:214.8px}.bring-deck[data-active="4"] .bring-card[data-i="4"] .bring-shade{opacity:0}
@media (max-width:640px){.bring-arrows{display:none!important}.bring-deck{gap:12px}.bring-card,.bring-card[data-i]{grid-area:auto;width:auto;transform:none!important;rotate:0deg!important}.bring-shade{display:none}}
@media (prefers-reduced-motion:reduce){.bring-card,.bring-shade{transition:none}}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.has-img{aspect-ratio:420/909;border:0;background:rgba(255,255,255,.03)}
.aurora-clip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora-bg{position:absolute;top:0;left:0;z-index:0;width:100%;height:min(max(110vh,62rem),100%);overflow:hidden;pointer-events:none;will-change:transform}
.skip-link{position:absolute;top:1rem;left:1rem;z-index:100;border-radius:2px;padding:.5rem .75rem;font-size:.875rem;text-decoration:none;transition:transform .15s;transform:translateY(-200%)}
.skip-link:focus-visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skip-link{transition:none}}
/* Fonts: self-hosted copies of the Google Fonts the page loads (Geist 400-700, Inter 400-900) */
@font-face{font-family:Geist;font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/geist-latin-ext-variable.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-display:swap;font-weight:400 700;src:url(fonts/geist-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400 900;src:url(fonts/inter-latin-ext-variable.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400 900;src:url(fonts/inter-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Static-site only: keeps the hero hidden for the instant before main.js starts its fade-in */
html.fade-pending [data-fade]{opacity:0}
/* Focus rings are for keyboard navigation only. Safari also shows them when the page moves focus
   after a click (the close button when a project opens, the card when it closes); main.js marks
   mouse and touch use on <html> so those rings stay hidden until the visitor presses Tab. */
html[data-input="pointer"] :focus-visible{outline:none!important}
/* Phones: the project modal fills the whole screen. iOS Safari paints the strips under the status bar
   and the toolbar with the page background, so while the modal is open the page background, and the
   modal itself, use the same solid colour: no seams. The spacer at the end lets the last lines scroll
   clear of the toolbar (it is 0 where the browser has no toolbar to clear). */
@media (max-width:640px){html:has(.proj-modal[open]),html:has(.proj-modal[open]) body{background:#0f131a}.proj-modal{background:#0f131a!important;-webkit-backdrop-filter:none;backdrop-filter:none}.proj-modal::after{content:"";display:block;height:max(0px,calc(100vh - 100dvh))}}