h1{font-size:clamp(50px,8.6vw,132px)}.visual{height:570px;background:#100003}.projects{background:#deded8}.demo-note{font:12px/1.6 monospace;color:#666}.field{height:650px;position:relative;overflow:hidden;background-image:radial-gradient(#aaa 1px,transparent 1px);background-size:18px 18px;margin-top:30px}.project{position:absolute;width:260px;padding:0;border:1px solid #444;background:#e8e8e2;box-shadow:8px 14px 25px #0002;text-align:left;cursor:pointer;will-change:transform;transition:box-shadow .2s}.project:hover,.project:focus-visible{z-index:10;box-shadow:0 0 0 2px #b51c24,10px 20px 35px #0004;outline:none}.bar{font:10px monospace;display:flex;justify-content:space-between;padding:12px}.art{height:150px;overflow:hidden;background:#160007;position:relative}.art:after,.modal-art:after{content:'';position:absolute;inset:0;background:radial-gradient(transparent 1px,#0006 1.4px);background-size:4px 4px;pointer-events:none}.art:before,.modal-art:before{content:'';position:absolute;width:65%;height:150%;left:20%;top:-25%;border-radius:50%;background:repeating-radial-gradient(ellipse,#fd3b41 0 3px,#60001d 4px 14px,#130009 17px 24px);transform:rotate(-35deg);filter:blur(1px)}.art2:before{border-radius:0;transform:rotate(35deg);background:repeating-linear-gradient(90deg,#160009 0 10px,#ff6255 12px 17px,#82000e 20px 28px)}.art3:before{filter:blur(10px);background:conic-gradient(#170008,#ff3642,#4e0000,#e38779,#170008)}.art4:before{background:repeating-radial-gradient(circle,#d9ceca 0 2px,#292522 3px 12px)}.project strong{display:block;padding:15px;font-size:18px;font-weight:400}dialog{padding:0;border:1px solid #888;background:#eaeae5;width:min(850px,92vw);max-height:90vh;overflow:auto;color:#191919}dialog::backdrop{background:#100006c9;backdrop-filter:blur(15px)}.close{position:absolute;right:14px;top:14px;z-index:2;width:44px;height:44px;background:#ecece9;border:0;font-size:30px;cursor:pointer}.modal-art{height:330px;background:#160007;position:relative;overflow:hidden}.modal-copy{padding:35px}.modal-copy small{font:11px monospace}.modal-copy h2{font-size:44px;margin-top:20px}.modal-copy p{line-height:1.7}.modal-copy p:last-child{font:12px/1.6 monospace;color:#777}@media(max-width:650px){.field{height:820px}.project{width:200px}.art{height:115px}.sectionhead{gap:15px;line-height:1.5}.visual{height:420px}.modal-art{height:220px}.modal-copy{padding:24px}}
/* Matrix lettering uses native Cyrillic glyphs as a mask: no remote font dependency. */
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:400;letter-spacing:-.055em}
.logo{font-family:'Courier New',monospace;font-weight:700;font-size:32px;letter-spacing:-1.8px}
.sectionhead{font-family:'Courier New',monospace;font-size:14px;font-weight:700;letter-spacing:.4px}
.meta,nav aside,.bar,.caption,footer,.pill,.pause{font-family:'Courier New',monospace;letter-spacing:.6px}
.project strong{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.5px}
.stats b{font-family:'Courier New',monospace;font-weight:700;letter-spacing:-5px}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
.logo,.sectionhead>span:first-child,.stats b{background-image:radial-gradient(circle,currentColor 1px,transparent 1.15px);background-size:3px 3px;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo .dot{background:#c72a22;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
@media(max-width:650px){.logo{font-size:27px}.sectionhead{font-size:13px}.sectionhead>span:last-child{font-size:10px;max-width:45%;text-align:right}nav aside{font-size:10px;gap:13px}}
@media(forced-colors:active){.logo,.sectionhead>span:first-child,.stats b{-webkit-text-fill-color:currentColor;background:none}}
@font-face{font-family:Osbourne;src:url('fonts/OsbournePro-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Osbourne;src:url('fonts/OsbournePro-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Doto Rounded';src:url('fonts/Doto_Rounded-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
.logo,.logo .dot,.sectionhead>span:first-child,.stats b{background:none;-webkit-text-fill-color:currentColor}
.logo{font-family:'Doto Rounded','Courier New',monospace;font-weight:400;font-size:34px;letter-spacing:-1px;font-synthesis:none}
h1,h2{font-family:Osbourne,Georgia,serif;font-weight:300;letter-spacing:-.035em;line-height:1.06}
h1{font-size:clamp(52px,8.6vw,132px)}
h3,.project strong{font-family:Osbourne,Georgia,serif;font-weight:500;letter-spacing:0}
h3{font-size:36px}.project strong{font-size:23px;line-height:1.15}
.stats b{font-family:'Doto Rounded','Courier New',monospace;font-weight:400;letter-spacing:-3px;font-synthesis:none}
.bar,.caption,footer{font-family:'Doto Rounded','Courier New',monospace;font-synthesis:none}
.sectionhead{font-weight:400}.modal-copy h2{font-weight:500}.contact h2{font-weight:500;line-height:1.1}
@media(max-width:650px){.logo{font-size:28px}.project strong{font-size:21px}.modal-copy h2{font-size:36px}}

/* Final type hierarchy: Light for practice/projects; Medium for intro/about/contact. */
.logo,.stats b{font-weight:800}
.bar,.caption,footer{font-weight:800}
h1{font-weight:500}
#services h3,#practice .project strong{font-weight:300}
#services .rows p{font-family:Osbourne,Georgia,serif;font-weight:300;font-size:22px;line-height:1.45}
#services .sectionhead>span:first-child,#practice .sectionhead>span:first-child{font-family:Osbourne,Georgia,serif;font-weight:300;font-size:20px}
#about h2,#contact h2{font-weight:500}
#about .sectionhead>span:first-child,#contact .sectionhead>span:first-child{font-family:Osbourne,Georgia,serif;font-weight:500;font-size:20px}
.contact{background:#540c18;color:#f4eee8}
.modal-copy h2{font-weight:300}

@font-face{font-family:Sexsmith;src:url('fonts/Sexsmith.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
h1,h2,h3,#services h3,#about h2,#contact h2,.project strong,#practice .project strong,.modal-copy h2,#services .sectionhead>span:first-child,#practice .sectionhead>span:first-child,#about .sectionhead>span:first-child,#contact .sectionhead>span:first-child{font-family:Sexsmith,Georgia,serif;font-weight:400;font-synthesis:none;letter-spacing:0}
h1{font-size:clamp(44px,7.7vw,118px);line-height:1.12}
.field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding:40px;height:auto;min-height:0;align-items:start}
.project{position:relative;width:100%;will-change:auto;transform:none;transition:none}
.project:nth-child(even){margin-top:35px}.project .art{height:210px}
.visual{height:480px;background:#160006;position:relative}
.static-sculpture{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#6a081b,transparent 65%),#100003}
.static-sculpture:before{content:'';position:absolute;width:65%;height:130%;left:18%;top:-12%;border-radius:50%;transform:rotate(-28deg);background:repeating-radial-gradient(ellipse at center,#fb7764 0 2px,#b81e35 3px 7px,#370012 9px 23px);box-shadow:0 0 80px #b51b33;opacity:.9}
.static-sculpture:after{content:'';position:absolute;inset:0;background:radial-gradient(#10000399 1.5px,transparent 2px);background-size:10px 10px}
html{scroll-behavior:auto}
@media(max-width:650px){.field{gap:22px;padding:20px;grid-template-columns:1fr}.project:nth-child(even){margin-top:0}.project .art{height:180px}.visual{height:340px}.static-sculpture:before{width:100%;left:0}}
/* Body typography matches the reference's technical caption. */
body{font-family:'Courier New',Courier,monospace;font-weight:400}
p,#services .rows p,.intro p,.about p,.contact p,.modal-copy p,.demo-note{font-family:'Courier New',Courier,monospace;font-weight:400;font-size:16px;line-height:1.65;letter-spacing:.025em}
.about p{font-size:18px;line-height:1.6}
.bar,.caption,footer,.modal-copy small,.contact small,.stats small{font-family:'Courier New',Courier,monospace;font-weight:400;letter-spacing:.6px}
@media(max-width:650px){p,#services .rows p,.intro p,.about p,.contact p,.modal-copy p{font-size:15px;line-height:1.65}}

.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.video-toggle{position:absolute;top:24px;right:4%;z-index:2;padding:12px 18px;border:1px solid #ffffff80;background:#160006bd;color:#fff;font:12px 'Courier New',monospace;cursor:pointer}.video-toggle:focus-visible{outline:2px solid white;outline-offset:4px}.visual .caption{color:#fff;text-shadow:0 1px 4px #000;background:#0006;padding:8px;pointer-events:none}
.modal-art.has-video{height:auto;aspect-ratio:16/9;background:#000}.modal-art.has-video:before,.modal-art.has-video:after{display:none}.has-video iframe{width:100%;height:100%;border:0;display:block}.modal-copy a{text-decoration:underline;text-underline-offset:4px}

.bitmap-cover{background:#000 url('media/bitmap-poster.jpg') center/cover}.bitmap-cover:before,.bitmap-cover:after{display:none}

.hero-kinescope{display:block;width:100%;height:100%;border:0;background:#000}.visual .caption{bottom:55px;font-size:10px}

.visual .caption{display:none}
/* Keep the 16:9 player fitted to the stage; unused space belongs to the page. */
.visual{background:#ecece8;display:grid;place-items:center;container-type:size}
.hero-kinescope{width:min(100cqw,177.777778cqh);height:min(100cqh,56.25cqw);background:#ecece8;flex:none}

.project{border-radius:18px;overflow:hidden;background:#ecece8;border:1px solid #b8b8b0;box-shadow:0 6px 20px #0000000d}
.project .bar{padding:14px 18px;font-size:12px;letter-spacing:1px}
.project img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#171717}
.project:nth-child(even){margin-top:0}
dialog{border-radius:18px;overflow:auto;border:1px solid #aaa}
.project-modal-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#ecece8}
.project-modal-bar h2{font:14px 'Courier New',monospace;letter-spacing:1px;margin:0}
.project-modal-bar .close{position:static;width:34px;height:34px;background:transparent;font-size:28px}
.contact-link{display:inline-block;font:18px/1.5 'Courier New',monospace;margin-top:18px;border-bottom:1px solid currentColor;padding-bottom:6px}
.contact-link:hover{opacity:.75}
@media(max-width:650px){.project{border-radius:14px}.contact-link{font-size:16px}}

.field{display:block;position:relative;padding:0;overflow:hidden}
.drift-slot{position:absolute;transition:translate .7s cubic-bezier(.2,.7,.2,1);translate:var(--push-x,0px) var(--push-y,0px)}
.drift-slot .project{width:100%;transform:rotate(var(--tilt));animation:gentle-drift var(--period) ease-in-out var(--delay) infinite alternate;animation-play-state:paused;box-shadow:4px 12px 28px #00000014}
.field.is-visible .project{animation-play-state:running}
.drift-slot:hover,.drift-slot:focus-within{z-index:5}
.field .drift-slot:hover .project,.field .drift-slot:focus-within .project{animation-play-state:paused}
@keyframes gentle-drift{from{transform:translate(-4px,-6px) rotate(var(--tilt))}to{transform:translate(5px,7px) rotate(calc(var(--tilt) + 1deg))}}
@media(max-width:599px){.field{padding:18px 15px;display:grid;grid-template-columns:1fr;gap:28px;height:auto!important}.drift-slot{position:relative!important;left:auto!important;top:auto!important;width:100%!important;translate:none}.drift-slot .project{animation:none;transform:rotate(var(--tilt));max-width:430px}}
@media(prefers-reduced-motion:reduce){.drift-slot{transition:none;translate:none!important}.drift-slot .project{animation:none!important}}
.contact{background:#9C0C00}

nav aside{align-items:center}.language-switch{display:flex;align-items:center;gap:5px;white-space:nowrap;font:12px 'Courier New',monospace}
.language-switch button{font:inherit;padding:8px 4px;border:0;background:none;color:#777;cursor:pointer}.language-switch button[aria-pressed="true"]{color:#191919;text-decoration:underline;text-underline-offset:5px}.language-switch button:focus-visible{outline:1px solid #9C0C00;outline-offset:2px}
@media(max-width:650px){nav{height:auto;min-height:88px;flex-wrap:wrap;gap:10px;padding-top:14px;padding-bottom:14px}nav aside{width:100%;justify-content:space-between;gap:8px}.language-switch{font-size:11px}}

/* Preserve the fitted header frame and expose a manual autoplay fallback. */
.hero-video{object-fit:contain}
.video-fallback{position:absolute;top:24px;right:4%;padding:12px 18px;background:#160006bd;border:1px solid #ffffff80;color:#fff;font:12px 'Courier New',monospace;z-index:2}
.video-toggle[hidden],.video-fallback[hidden]{display:none}