@font-face{font-family:Diatype;src:url('/assets/redesign/ABCDiatype-Regular-Trial.otf');font-weight:400;font-display:swap}
@font-face{font-family:Diatype;src:url('/assets/redesign/ABCDiatype-Medium-Trial.otf');font-weight:500;font-display:swap}
@font-face{font-family:Systemia;src:url('/assets/redesign/SystemiaTest-Regular.otf');font-weight:400;font-display:swap}
@font-face{font-family:Systemia;src:url('/assets/oct29/SystemiaTest-Medium.otf');font-weight:500;font-display:swap}
@font-face{font-family:Systemia;src:url('/assets/oct29/SystemiaTest-Light.otf');font-weight:300;font-display:swap}
@font-face{font-family:Colant;src:url('/assets/oct29/HALColantText-RegularItalic.ttf');font-style:italic;font-weight:400;font-display:swap}
:root{--paper:#fff;--ink:#000;--cover-ink:#fff;--stroke:#efefef;--gap:32px;--edge-y:16px;--duration:800ms;--spring:cubic-bezier(.22,.85,.3,1.04);--cover-size:calc(50vw - 64px);--legal-height:240px;color:var(--ink);background:var(--paper);font-family:Diatype,Arial,sans-serif;font-size:12px;color-scheme:light}
:root[data-theme=dark]{--paper:#111010;--ink:#EAE27C;--cover-ink:#EAE27C;--stroke:#EAE27C;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--paper);color:var(--ink);transition:background-color var(--duration),color var(--duration)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.corners{position:fixed;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;z-index:3;font-family:Diatype,Arial,sans-serif;font-weight:400;transition:transform var(--duration) var(--spring);will-change:transform}
.top-corners{top:24px}.bottom-corners{bottom:16px}.wordmark{text-decoration:none}.wordmark span{font-family:Systemia,Arial,sans-serif;font-weight:400}.theme-toggle{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px}.theme-toggle svg{display:block}
.home-stage{position:fixed;inset:0;transition:transform var(--duration) var(--spring);will-change:transform}
.cover{position:absolute;width:var(--cover-size);height:var(--cover-size);left:calc(50% - var(--cover-size)/2);top:calc(50% - var(--cover-size)/2);color:var(--cover-ink);transition:transform var(--duration) var(--spring);will-change:transform}
.cover>img{display:block;width:100%;height:100%;object-fit:cover}.cover h1{position:absolute;left:24px;top:24px;right:24px;margin:0;font:400 24px/1.25 Diatype,Arial,sans-serif;letter-spacing:.02em}.cover h1 em{font-family:Colant,Georgia,serif;font-weight:400;font-style:italic;font-size:1.1em}.projects-link{position:absolute;bottom:24px;right:24px;white-space:nowrap;text-decoration:none;font-weight:500}
.studio-info{position:absolute;left:calc(var(--cover-size) + 64px);right:32px;top:50%;transform:translate(calc(50vw - var(--cover-size)/2 - 32px),-50%);opacity:0;transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s var(--duration);visibility:hidden;will-change:transform,opacity}
.info-content{display:flex;flex-direction:column;gap:16px}.info-content h2,.imprint-copy h2{font:400 12px/1.3 Diatype,Arial,sans-serif;margin:0}.info-content p{margin:0;text-align:justify;text-align-last:left}.large-copy{font:300 24px/1.18 Systemia,Arial,sans-serif;letter-spacing:-.4px}.large-copy strong,.contact strong{font-weight:400}.small-copy{font:400 12px/1.3 Diatype,Arial,sans-serif}.contact{margin-top:24px;display:flex;flex-direction:column;gap:8px}.contact a{font:300 24px/1.2 Systemia,Arial,sans-serif;text-decoration:none}
.info-open .cover{transform:translateX(calc(-50vw + var(--cover-size)/2 + 32px))}.info-open .studio-info{transform:translate(0,-50%);opacity:1;visibility:visible;transition-delay:0s}.info-open .corners{transform:translateX(-25vw)}
.studio-imprint{position:fixed;left:0;right:0;bottom:32px;transform:translateY(var(--legal-height));opacity:0;visibility:hidden;transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s var(--duration);will-change:transform,opacity}.imprint-copy{width:var(--cover-size);margin-left:calc(50% - var(--cover-size)/2);transition:transform var(--duration) var(--spring);font:400 12px/1.3 Diatype,Arial,sans-serif}.imprint-copy h2{margin-bottom:16px}.imprint-copy p{margin:0;text-align:justify;text-align-last:left}.imprint-open .home-stage{transform:translateY(calc(-1*var(--legal-height)))}.imprint-open .top-corners{transform:translateY(calc(-1*var(--legal-height)))}.imprint-open .bottom-corners{transform:translateY(calc(-1*var(--imprint-footer-travel,var(--legal-height))))}.imprint-open .studio-imprint{transform:translateY(0);opacity:1;visibility:visible;transition-delay:0s}.info-open .imprint-copy{transform:translateX(calc(-50vw + var(--cover-size)/2 + 32px))}.info-open.imprint-open .top-corners{transform:translate(-25vw,calc(-1*var(--legal-height)))}.info-open.imprint-open .bottom-corners{transform:translate(-25vw,calc(-1*var(--imprint-footer-travel,var(--legal-height))))}
@media(min-width:1800px){:root{font-size:16px}.info-content h2,.imprint-copy h2,.small-copy,.imprint-copy{font-size:16px}.large-copy,.contact a,.cover h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){:root{--duration:0ms}}
/* Keep the desktop composition usable on smaller windows; mobile art direction follows. */
@media(max-width:900px){:root{--cover-size:min(calc(100vw - 64px),calc(100svh - 160px))}.info-open .cover{transform:translateX(calc(-100vw - 32px))}.studio-info{left:32px;right:32px;max-height:calc(100svh - 128px);overflow:auto}.info-open .corners{transform:none}.info-open .wordmark{visibility:hidden}.info-open .imprint-copy{transform:none}.info-open.imprint-open .top-corners{transform:translateY(calc(-1*var(--legal-height)))}.info-open.imprint-open .bottom-corners{transform:translateY(calc(-1*var(--imprint-footer-travel,var(--legal-height))))}.large-copy,.contact a{font-size:22px}.imprint-copy{max-height:45svh;overflow:auto}}

@supports(transition-timing-function:linear(0,1)){:root{--spring:linear(0.00000 0.000%,0.00830 1.667%,0.03104 3.333%,0.06523 5.000%,0.10825 6.667%,0.15780 8.333%,0.21190 10.000%,0.26886 11.667%,0.32724 13.333%,0.38585 15.000%,0.44370 16.667%,0.49999 18.333%,0.55411 20.000%,0.60558 21.667%,0.65405 23.333%,0.69928 25.000%,0.74114 26.667%,0.77955 28.333%,0.81454 30.000%,0.84615 31.667%,0.87449 33.333%,0.89969 35.000%,0.92193 36.667%,0.94137 38.333%,0.95822 40.000%,0.97267 41.667%,0.98492 43.333%,0.99518 45.000%,1.00364 46.667%,1.01049 48.333%,1.01592 50.000%,1.02009 51.667%,1.02317 53.333%,1.02529 55.000%,1.02661 56.667%,1.02725 58.333%,1.02732 60.000%,1.02692 61.667%,1.02614 63.333%,1.02507 65.000%,1.02377 66.667%,1.02231 68.333%,1.02074 70.000%,1.01910 71.667%,1.01744 73.333%,1.01578 75.000%,1.01415 76.667%,1.01258 78.333%,1.01107 80.000%,1.00964 81.667%,1.00830 83.333%,1.00705 85.000%,1.00590 86.667%,1.00485 88.333%,1.00389 90.000%,1.00303 91.667%,1.00226 93.333%,1.00158 95.000%,1.00097 96.667%,1.00045 98.333%,1.00000 100.000%)}}

/* Frame the cover without changing its dimensions or layout. */
.cover::after{content:"";position:absolute;inset:0;border:1px solid var(--stroke);pointer-events:none}

/* Animate the viewport canvas as well as the page content when changing theme. */
html{transition:background-color var(--duration) cubic-bezier(.4,0,.2,1),color var(--duration) var(--spring)}
body{min-height:100svh;transition:background-color var(--duration) cubic-bezier(.4,0,.2,1)}

/* Navigation enters after a brief pause; the title is visible immediately. */
.home-entering .cover h1{animation:none}
.home-entering .projects-link{animation:enter-projects var(--duration) var(--spring) 400ms both}
.home-entering .corners>a,.home-entering .corners>button{animation-duration:var(--duration);animation-timing-function:var(--spring);animation-delay:400ms;animation-fill-mode:both}
.home-entering .wordmark{animation-name:enter-top-left}
.home-entering .info-toggle{animation-name:enter-top-right}
.home-entering .theme-toggle{animation-name:enter-bottom-left}
.home-entering .imprint-toggle{animation-name:enter-bottom-right}
@keyframes enter-projects{from{translate:0 calc(100% + 24px)}to{translate:0 0}}
@keyframes enter-top-left{from{translate:calc(-100% - 32px) calc(-100% - 16px)}to{translate:0 0}}
@keyframes enter-top-right{from{translate:calc(100% + 32px) calc(-100% - 16px)}to{translate:0 0}}
@keyframes enter-bottom-left{from{translate:calc(-100% - 32px) calc(100% + 16px)}to{translate:0 0}}
@keyframes enter-bottom-right{from{translate:calc(100% + 32px) calc(100% + 16px)}to{translate:0 0}}
@media(prefers-reduced-motion:reduce){.home-entering .cover h1,.home-entering .projects-link,.home-entering .corners>a,.home-entering .corners>button{animation:none}}

/* Dense, fine grey grain clipped to the white title lettering. */
.cover h1{color:transparent;background-color:var(--cover-ink);background-blend-mode:multiply;transition:background-color var(--duration) cubic-bezier(.4,0,.2,1);background-image:url('/assets/oct29/title-grain.svg');background-size:64px 64px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Projects sit directly below the home view. */
.projects-view-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:10;background:var(--paper);opacity:0;transform:translate(0,100svh);transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring);will-change:transform,opacity}
body>.corners,body>.home-stage{translate:0 0;transition:transform var(--duration) var(--spring),translate var(--duration) var(--spring)}
body>.studio-imprint{translate:0 0;transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),translate var(--duration) var(--spring),visibility 0s var(--duration)}
.viewing-projects body>.corners,.viewing-projects body>.home-stage,.viewing-projects body>.studio-imprint{translate:0 -100svh}
.viewing-projects .projects-view-frame{transform:translate(0,0);opacity:1}

/* Let the project link enter just behind the picture edge, with a small spring settle. */
.home-stage>.cover:not(.project-focus){overflow:hidden}

/* Enlarge individual corner controls without making their empty rows clickable. */
.corners,.single-project-header,.single-project-footer{pointer-events:none}
.corners>a,.corners>button,.single-project-header>a,.single-project-footer>button{position:relative;pointer-events:auto}
.corners>a::after,.corners>button::after,.single-project-header>a::after,.single-project-footer>button::after{content:"";position:absolute;inset:-32px;pointer-events:auto}

.imprint-copy .imprint-updated{margin-top:16px;text-align:left}

:root[data-theme=dark] .home-page .cover h1{background-image:url('/assets/oct29/title-grain-yellow.svg');background-blend-mode:normal}

/* Dark yellow belongs to home; project surfaces use neutral white. */
@property --ink{syntax:'<color>';inherits:true;initial-value:#000}
@property --stroke{syntax:'<color>';inherits:true;initial-value:#efefef}
:root[data-theme=dark].project-surface,:root[data-theme=dark].viewing-projects{--ink:#fff;--stroke:#fff}
:root[data-theme=dark].project-surface{--cover-ink:#fff}