/* Crisp ornamental frame and real text, within the unchanged CTA box. */
.spirit-header .header-contact,
.spirit-header .header-contact:hover,
.spirit-header .header-contact.active{background:transparent url('../assets/contact-frame.svg?v=5b14773f28292d04') center/100% 100% no-repeat!important;border-color:transparent!important;clip-path:none;box-shadow:none;filter:drop-shadow(0 0 3px #86baff22);transition:filter .25s ease,color .25s ease}
.spirit-header .header-contact>svg{display:none!important}
.spirit-header .header-contact .contact-label{position:relative;color:#d2edf9!important;text-shadow:0 0 9px #88caff22!important;letter-spacing:.08em}
.spirit-header .header-contact .contact-label>span{color:#aeeeff!important;text-shadow:none!important}
.spirit-header .header-contact:hover,.spirit-header .header-contact:focus-visible{filter:drop-shadow(0 0 5px #89dcff66)}
.spirit-header .header-contact:focus-visible{outline:1px solid #b8ecff;outline-offset:4px}
.project-action-label{display:inline-flex;align-items:center;gap:8px}
.project-action-label .pixel-action-icon{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;flex:none}
/* Proximity snapping leaves tall sections and deliberate scrolling accessible. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
 html.scroll-snap-ready:has(body:not(.project-page)){scroll-snap-type:y proximity;scroll-behavior:smooth}
 body:not(.project-page) main>section[id]{scroll-snap-align:start;scroll-snap-stop:normal}
}
.hero.intro-prepared:not(.intro-playing) .hero-entrance{opacity:0}
.hero.intro-playing .hero-entrance{animation:hero-entrance .85s cubic-bezier(.22,.7,.2,1) both;animation-delay:var(--entrance-delay,0ms)}
@keyframes hero-entrance{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hero .hero-entrance{animation:none!important;opacity:1!important}}

/* This entire layout branch is restricted to ultrawide monitors. Normal
   16:9 desktops and laptops retain their existing sizes and positioning. */
@media(min-width:2100px) and (min-aspect-ratio:21/10){
 :root{--wide-unit:clamp(1px,calc((100svh - 110px)/850),1.5px)}
 #skills{min-height:calc(100svh - 110px);display:grid;align-content:center;padding-block:calc(16 * var(--wide-unit))}
 #skills .blueprint-inner{width:min(88vw,calc(1500 * var(--wide-unit)))}
 #skills .section-heading,#skills .workshop-top,#skills .skills-columns,#skills .blueprint-bottom{max-width:calc(1180 * var(--wide-unit))}
 #skills .section-heading{margin-bottom:calc(16 * var(--wide-unit))}
 #skills .section-heading h2{font-size:calc(60 * var(--wide-unit))}
 #skills .section-heading>p{font-size:calc(14 * var(--wide-unit));max-width:calc(330 * var(--wide-unit))}
 #skills .section-heading .eyebrow{font-size:calc(12 * var(--wide-unit));margin-bottom:calc(8 * var(--wide-unit))}
 #skills .workshop-top{padding-block:calc(7 * var(--wide-unit))}
 #skills .workshop-top .mono,#skills .blueprint-bottom .mono{font-size:calc(12 * var(--wide-unit))}
 #skills .skills-columns{gap:calc(50 * var(--wide-unit));margin-top:calc(14 * var(--wide-unit))}
 #skills .technical-heading{margin-bottom:calc(10 * var(--wide-unit))}
 #skills .technical-heading h3{font-size:calc(21 * var(--wide-unit))}
 #skills .technical-heading>span{width:calc(36 * var(--wide-unit));height:calc(36 * var(--wide-unit));font-size:calc(20 * var(--wide-unit))}
 #skills .skill-matrix{gap:calc(7 * var(--wide-unit));grid-auto-rows:calc(85 * var(--wide-unit))}
 #skills .skill-tile{padding:calc(6 * var(--wide-unit)) calc(8 * var(--wide-unit));gap:calc(6 * var(--wide-unit))}
 #skills .skill-tile .skill-name{font-size:calc(13 * var(--wide-unit))}
 #skills .skill-icon{font-size:calc(27 * var(--wide-unit))}
 #skills .skill-tile img{width:calc(28 * var(--wide-unit));height:calc(28 * var(--wide-unit))}
 #skills .workshop-decoration{margin-top:calc(14 * var(--wide-unit));gap:calc(20 * var(--wide-unit))}
 #skills .iteration-art{max-width:calc(140 * var(--wide-unit));max-height:calc(100 * var(--wide-unit))}
 #skills .forge-composition{grid-template-columns:minmax(0,1fr) calc(76 * var(--wide-unit));gap:calc(8 * var(--wide-unit))}
 #skills .lever-note{font-size:calc(11 * var(--wide-unit));max-width:calc(76 * var(--wide-unit))}
 #skills .lever-note svg{width:calc(48 * var(--wide-unit));height:calc(24 * var(--wide-unit))}
 #skills .skills-software .blacksmith-art img{height:calc(132 * var(--wide-unit))}
 #skills .blueprint-bottom{padding-block:calc(10 * var(--wide-unit))}
 #projects{width:min(88vw,calc(1500 * var(--wide-unit)));min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:center;padding-block:calc(8 * var(--wide-unit)) calc(30 * var(--wide-unit));--project-stage-height:clamp(calc(365 * var(--wide-unit)),calc(100svh - 110px - 300 * var(--wide-unit)),calc(520 * var(--wide-unit)))}
 #projects .section-heading{margin-bottom:calc(20 * var(--wide-unit))}
 #projects .section-heading h2{font-size:calc(60 * var(--wide-unit))}
 #projects .section-heading>p{font-size:calc(14 * var(--wide-unit));max-width:calc(330 * var(--wide-unit))}
 #projects .eyebrow{font-size:calc(12 * var(--wide-unit))}
 #projects .selector-copy{padding:calc(24 * var(--wide-unit)) calc(44 * var(--wide-unit))}
 #projects .selector-copy h3{font-size:calc(52 * var(--wide-unit))}
 #projects .selector-copy h3 small{font-size:calc(14 * var(--wide-unit))}
 #projects .selector-description{font-size:calc(15 * var(--wide-unit));max-width:calc(470 * var(--wide-unit))}
 #projects .selector-kicker,#projects .selector-facts dt{font-size:calc(11 * var(--wide-unit))}
 #projects .selector-facts{gap:calc(20 * var(--wide-unit));margin-block:calc(18 * var(--wide-unit))}
 #projects .selector-facts dd,#projects .project-actions a,#projects .archive-link{font-size:calc(14 * var(--wide-unit))}
 #projects .flight-choices button{font-size:calc(12 * var(--wide-unit));padding:calc(12 * var(--wide-unit))}
 #projects .archive-link{align-self:flex-start}
 #about{width:min(88vw,calc(1500 * var(--wide-unit)));min-height:calc(100svh - 94px);align-content:center;padding-block:calc(60 * var(--wide-unit));gap:calc(95 * var(--wide-unit))}
 #about .about-copy h2{font-size:calc(52 * var(--wide-unit))}
 #about .about-copy p{font-size:calc(16 * var(--wide-unit))}
 #about blockquote{font-size:calc(27 * var(--wide-unit))}
 #about .portrait-frame{width:min(100%,calc(345 * var(--wide-unit)))}
 #about .portrait-frame .designer-mark{height:calc(310 * var(--wide-unit))}
 #about .about-stats span,#about .about-marker>.mono{font-size:calc(12 * var(--wide-unit))}
 #home{min-height:100svh}
 #home .hero-inner{width:min(88vw,calc(1280 * var(--wide-unit)));max-width:none;padding-top:calc(220 * var(--wide-unit));padding-bottom:calc(115 * var(--wide-unit))}
 #home h1.designer-name{font-size:calc(123 * var(--wide-unit));max-width:calc(1050 * var(--wide-unit))}
 #home .hero-role{font-size:calc(52 * var(--wide-unit))}
 #home .hero-description{font-size:calc(17 * var(--wide-unit))}
 #home .hero-specialty{font-size:calc(16 * var(--wide-unit));max-width:calc(490 * var(--wide-unit))}
 #home .world-machine{width:calc(560 * var(--wide-unit));right:calc((100vw - min(100vw,1920 * var(--wide-unit)))/2 + 38 * var(--wide-unit));top:calc(140 * var(--wide-unit))}
 #home .world-machine-caption{font-size:calc(10 * var(--wide-unit))}
}
/* Start with the cabinet, boot its CRT, then reveal the surrounding galaxy. */
.hero.boot-prepared .world-machine,.hero.boot-prepared .cosmos,.hero.boot-prepared .hero-entrance{opacity:0}
.hero.boot-prepared .world-machine-screen{background:#020609!important;filter:none}
.hero.boot-prepared .world-machine-screen canvas{opacity:0}
.hero.boot-prepared .world-machine-screen:before{content:'';position:absolute;inset:0;z-index:2;background:#d4f8ff;opacity:0;transform-origin:center;pointer-events:none}
.hero.boot-running .world-machine{animation:arcade-arrive .65s cubic-bezier(.22,.7,.2,1) both}
.hero.boot-running .world-machine-screen:before{animation:crt-boot .65s ease-out .7s both}
.hero.boot-running .world-machine-screen canvas{animation:screen-galaxy .65s ease-out 1.05s both}
.hero.boot-running .cosmos{animation:cosmos-arrive .95s ease-out 1.75s both}
.arcade-boot-pending .dust-layer{opacity:0}
@keyframes arcade-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes crt-boot{0%{opacity:0;transform:scale(.04,.008)}20%{opacity:.9;transform:scale(.85,.012)}48%{opacity:.7;transform:scale(1,.035)}75%{opacity:.25;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
@keyframes screen-galaxy{from{opacity:0}to{opacity:1}}
@keyframes cosmos-arrive{from{opacity:0}to{opacity:var(--boot-cosmos-opacity,.38)}}

html.scroll-initializing{scroll-snap-type:none!important;scroll-behavior:auto!important;overflow-anchor:none}