@media (max-width:1300px){.c-cv{grid-template-columns:1fr}}
@media (max-width:900px){.c-cv{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.c-cv{grid-template-columns:1fr}}
@media (max-width:1300px){.btn-row .kb{grid-column:span 2}}
@media (max-width:1000px){.hdr{display:flex;justify-content:space-between;gap:24px}.navlinks{display:none !important}}
@media (max-width:900px){.cols,.btn-row{grid-template-columns:repeat(4,minmax(0,1fr))}.cols .kb,.btn-row .kb{grid-column:span 2}}
@media (max-width:520px){.cols .kb,.btn-row .kb{grid-column:1 / -1}}
.tw{display:inline-block;white-space:nowrap;padding-bottom:3px;background:linear-gradient(var(--signal-orange),var(--signal-orange)) 0 100% / 0 3px no-repeat;transition:background-size 300ms cubic-bezier(.2,.7,.2,1)}
.ol-card:hover .tw,.ol-card:focus-visible .tw,a:hover>.tw,a:focus-visible>.tw{background-size:100% 3px}
@media (prefers-reduced-motion:reduce){.tw{transition:none}}
@media (max-width:640px){.clock-label{display:none}}
@media (max-width:400px){.clock{display:none !important}}
@media (min-width:901px){.c-name{grid-row:1}.c-intro{grid-row:2;margin-top:88px}#about .g12:not(.cv-wrap){grid-template-rows:auto 1fr}.c-collage{grid-row:1 / span 2;align-self:stretch}}
.name{font-size:clamp(64px,10.2vw,150px)}@media (max-width:480px){.name{font-size:clamp(48px,17vw,64px)}}
.portrait{transform-origin:50% 50%;will-change:transform}
@property --dx{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --dy{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --spot{syntax:'<length>';inherits:true;initial-value:1px}
.hf{transition:--mx 300ms ease-out,--my 300ms ease-out,--dx 1400ms ease-out,--dy 1400ms ease-out,--spot 700ms ease-out}
.hf filter{color-interpolation-filters:sRGB}
.hf__bw{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;background:#000;isolation:isolate;filter:contrast(14)}
.hf__layer{position:absolute;left:-25%;top:-25%;width:150%;height:150%;opacity:.5}
.hf__layer--a{transform:translate(var(--dx),var(--dy))}
.hf__layer--b{mix-blend-mode:plus-lighter;transform:translate(calc(var(--dx) * -1),calc(var(--dy) * -0.6))}
.hf__drift{position:absolute;top:0;left:0;right:0;bottom:0;will-change:transform}
.hf__drift--a{animation:hfa 41s ease-in-out infinite alternate}
.hf__drift--b{animation:hfb 53s ease-in-out -20s infinite alternate}
.hf__drift svg{display:block;width:100%;height:100%}
@keyframes hfa{from{transform:translate(-5%,-3%)}to{transform:translate(5%,4%)}}
@keyframes hfb{from{transform:translate(6%,3%) scaleX(1)}to{transform:translate(-6%,-4%) scaleX(1.08)}}
.hf__spot{position:absolute;top:0;left:0;right:0;bottom:0;mix-blend-mode:multiply;background:radial-gradient(circle var(--spot) at var(--mx) var(--my),rgba(0,0,0,.6),rgba(0,0,0,0))}
.hf__dots{position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:rotate(45deg);opacity:.35;mix-blend-mode:plus-lighter;background:radial-gradient(circle closest-side,#000,#fff);background-size:var(--halftone-pitch) var(--halftone-pitch)}
.hf__ink{position:absolute;top:0;left:0;right:0;bottom:0;background:#1f5fd6;mix-blend-mode:lighten}
.hf__tint{position:absolute;top:0;left:0;right:0;bottom:0;background:#e4eefc;mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.hf{transition:none}.hf__drift{animation:none}}
.cv-wrap{margin-top:-8px}
@media (max-width:900px){.cv-wrap{margin-top:48px}}
@media (prefers-reduced-motion:reduce){.portrait{transform:none !important;transition:none !important}.portrait-glare{display:none}}
@media (max-width:900px){.wrap{padding:0 24px}.c-name,.c-collage,.c-intro,.c-facts{grid-column:1 / -1}.c-collage{height:auto !important;min-height:0 !important;margin-top:40px}.c-collage::before{content:"";display:block;padding-top:calc(92.2% + 64px)}.c-intro{margin-top:40px}.feat .ol-card__media{aspect-ratio:4 / 3}.work{grid-template-columns:1fr}.navlinks{display:none !important}.vlines{padding:0 24px;grid-template-columns:repeat(4,minmax(0,1fr))}.vlines i:nth-child(n+5){display:none}.vlines i:nth-child(4){border-right:1px dashed #12121233}.facts-grid{margin-top:40px}}
.ol-card:hover .ol-card__media,.ol-card:focus-visible .ol-card__media{transform:none;box-shadow:none}@media (max-width:900px){.c-collage::before{display:none}.c-collage .hf{display:none}.c-collage .portrait-hit{position:relative !important;left:auto !important;bottom:auto !important;width:100% !important;max-width:420px}}@media (min-width:901px){.cv-wrap{display:none}.c-cv--desk{position:absolute;left:0;top:calc(123.8cqw + 48px);width:74%;grid-column:auto;grid-template-columns:1fr;row-gap:16px;z-index:2}}@media (max-width:900px){.c-cv--desk{display:none}}@media (min-width:901px){.c-collage{container-type:inline-size;align-self:start;min-height:0 !important}.c-collage::before{content:"";display:block;padding-top:calc(123.8% + 144px)}.c-collage .hf{height:87.3cqw !important}.c-collage .portrait-hit{bottom:auto !important;top:31.6cqw !important}}

@media (max-width:900px){#about{padding-bottom:56px !important}#work{padding-top:24px !important}}

/* Mobile/tablet: keep the desktop collage (blue block behind the portrait) and scale it with the column width */
@media (max-width:900px){
.name{font-size:min(150px,calc((100vw - 48px) / 3.6)) !important}
.c-collage{container-type:inline-size;position:relative;height:auto !important;min-height:0 !important}
.c-collage::before{content:"";display:block !important;padding-top:123.8%}
.c-collage .hf{display:block !important;height:87.3cqw !important}
.c-collage .portrait-hit{position:absolute !important;left:0 !important;top:31.6cqw !important;bottom:auto !important;width:74% !important;max-width:none !important}
}

/* Touch screens: no hover effects. The portrait sways and the blue block drifts on a slow loop (cheap, css only). */
@keyframes portrait-sway{from{transform:rotateX(-1.2deg) rotateY(-2.2deg)}to{transform:rotateX(1.2deg) rotateY(2.2deg)}}
@media (hover:none){
.portrait{animation:portrait-sway 9s ease-in-out infinite alternate}
.hf__drift--a{animation-duration:24s}
.hf__drift--b{animation-duration:32s}
.name .ol-ht__l{pointer-events:none}
}
@media (hover:none) and (prefers-reduced-motion:reduce){.portrait{animation:none}}