:root{--paper:#f5f4f1;--ink:#252525;--muted:#666562;--line:#28282626;--wash:#f5f4f1e8;--texture:url('assets/paper-light.svg');--head:128px;--foot:94px;--margin:clamp(28px,5.55vw,100px);--sheet:rgba(246,245,241,.57);color-scheme:light}
:root[data-theme=dark]{--paper:#262625;--ink:#f1f0ed;--muted:#bcbcb7;--line:#eeede92e;--wash:#262625eb;--texture:url('assets/paper-dark.svg');--sheet:rgba(237,236,232,.68);color-scheme:dark}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;color:var(--ink);font:400 1.25rem/1.55 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background-color:var(--paper);background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,1360px 660px;background-attachment:fixed}button,input,textarea{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer;padding:12px;border-radius:0}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,a:hover{color:var(--muted)}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2{font-size:clamp(2rem,3.5vw,3.6rem);line-height:1.07;letter-spacing:-.045em;font-weight:500;text-wrap:balance}h3{font-size:1.7rem;line-height:1.15;font-weight:400;letter-spacing:-.025em}em{font-style:normal}p{color:var(--muted);max-width:32em}img{display:block;max-width:100%}.kicker,.caption,.signature,.selected{display:block}.kicker{font-size:.875rem;letter-spacing:.12em;text-transform:var(--case-labels,uppercase);margin-bottom:24px}.caption{font-size:.8125rem;color:var(--muted);margin-top:20px}.cutout-filters{position:absolute;width:0;height:0;overflow:hidden}
header,#lane-position,#entrance{background-color:var(--paper);background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,1360px 660px;background-attachment:fixed}header{position:fixed;inset:0 0 auto;z-index:10;height:var(--head);display:flex;align-items:center;padding:0 var(--margin);gap:40px}.brand-wrap{position:relative;flex-shrink:0}.brand{display:block;line-height:0}.material-logo{display:block;width:150px;height:84px}.material-logo img{width:100%;height:100%;filter:url(#paper-cutout);object-fit:contain}/* The light/dark switch sits on the logo dash (84-98% across, about 26% down), with a little bleed. */
.theme-switch{position:absolute;left:82%;width:18%;top:calc(26% - 12px);height:24px;min-width:0;padding:0;background:none;border:0;cursor:pointer}.theme-switch:hover{outline:none}.theme-switch:focus{outline:none}.theme-switch:focus-visible{outline:1px solid currentColor;outline-offset:2px}.talk{margin-left:auto;padding:12px 0;font-size:1rem;letter-spacing:.12em;min-width:44px;text-align:right}header nav{display:flex;gap:36px;margin-left:auto}header nav a{font-size:.875rem;letter-spacing:.06em;text-transform:var(--case-labels,uppercase);padding:8px 0;border-bottom:1px solid transparent}header nav a.active{border-color:var(--ink)}body[data-lane=home] header nav{visibility:hidden}body[data-lane=home] header{box-shadow:0 10px 20px #0000000b}
#journey{height:100svh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:var(--head) 0 var(--foot);scroll-padding-top:var(--head);scroll-snap-type:y proximity}.screen{position:relative;min-height:calc(100svh - var(--head) - var(--foot));scroll-snap-align:start;padding:68px var(--margin) 86px;display:flex;flex-direction:column;justify-content:center}.home{min-height:calc(100svh - var(--head));padding:48px var(--margin) 64px}body[data-lane=home] #journey{padding-bottom:0}.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5%}.doors a{display:flex;flex-direction:column;gap:20px}.doors a>span{font-size:clamp(1.75rem,3vw,2.8rem);line-height:1.1;letter-spacing:.015em;font-weight:400}.doors img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(var(--image-saturation,1))}.home-next{display:none}.section-heading{margin-bottom:28px}.section-heading .kicker{margin-bottom:12px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5%}.project{padding:0;text-align:left}.project-image{display:block;overflow:hidden}.project img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(var(--image-saturation,1));transition:transform .4s}.project:hover img{transform:scale(1.02)}.project>span:last-child{display:flex;justify-content:space-between;margin-top:14px;font-size:1rem}.project b{font-size:.875rem;font-weight:400}.split{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.split .words{grid-column:1;grid-row:1}.split .picture{grid-column:2;grid-row:1}.picture{position:relative;width:100%;aspect-ratio:1;overflow:hidden}.picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(var(--image-saturation,1))}.picture>span{position:absolute;bottom:14px;left:14px;font-size:.75rem;background:#0007;color:#fff;padding:4px 8px}.words p,.ending p{margin-top:24px}.signature{font-size:1rem;margin-top:28px}.forward,.primary{display:block;text-align:left;width:fit-content;border-bottom:1px solid var(--line);padding:12px 0;margin-top:28px;font-size:1.25rem}.primary{font-size:1.5rem}.ending{align-items:flex-start}.ending h2{max-width:19ch}.choices{margin-top:26px;max-width:520px;width:100%}.choices button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 0;text-align:left;border-bottom:1px solid var(--line);font-size:1.5rem;gap:20px}.choices button[aria-pressed=true]{border-color:var(--ink)}.selected{font-size:.9375rem;margin-bottom:18px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:45px}.principles article{border-top:1px solid var(--line);padding-top:20px}.principles small{display:block;font-size:.9375rem;margin-bottom:18px}.principles p{font-size:1.125rem;margin-top:18px}.principles p br{display:none}
#lane-position{position:fixed;bottom:0;left:0;right:0;height:var(--foot);display:flex;align-items:center;padding:0 var(--margin);z-index:10}.position-label{display:flex;gap:18px;font-size:.8125rem;letter-spacing:.04em}.position-label strong{font-weight:400}.back-stage,#stage-nav{display:none}.review-link{margin-left:auto;font-size:.8125rem;padding-right:0}.direction{position:fixed;z-index:11;display:flex;align-items:center;gap:10px;min-width:44px;min-height:44px;color:var(--muted);font-size:.875rem}.direction i,.symbol{font-family:Arial,sans-serif;font-style:normal;font-weight:400}.direction i{font-size:23px}.side-left{left:12px;top:50%;transform:translateY(-50%);flex-direction:column;gap:3px}.side-right{right:12px;top:50%;transform:translateY(-50%);flex-direction:column-reverse;gap:3px}.side-left>span,.side-right>span{font-size:.75rem;letter-spacing:.05em}.vertical-up,.vertical-down{left:50%;transform:translateX(-50%);flex-direction:column;gap:2px;color:var(--ink);padding:8px 18px;background:transparent}.vertical-up{top:var(--head);font-size:.9375rem}.vertical-up i{font-size:26px;line-height:1}.vertical-down{bottom:15px;min-height:64px;font-size:1.0625rem}.vertical-down i{font-size:30px;line-height:1}.vertical-down>span{order:0}.vertical-down i{order:1}body[data-lane=home] .direction{display:none}.lane-enter{animation:lane-in .3s ease-out}@keyframes lane-in{from{opacity:.25;transform:translateX(var(--slide,20px))}to{opacity:1;transform:none}}
dialog{position:fixed;inset:0 0 0 auto;margin:0 0 0 auto;width:min(570px,44vw);max-width:100%;height:100%;max-height:100%;border:0;border-left:1px solid #fff5;background:var(--sheet);color:#222;padding:110px 48px 40px;overflow:auto;backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);-webkit-backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);box-shadow:-2px 0 7px #00000010;scrollbar-width:thin;isolation:isolate;color-scheme:light}dialog:before{content:'';position:fixed;inset:0;z-index:-1;background:url('assets/paper-grain.svg') repeat;opacity:.65;pointer-events:none}dialog::backdrop{background:transparent}dialog[open]{animation:sheet-in .4s ease-out}@keyframes sheet-in{from{transform:translateX(100%)}to{transform:none}}dialog h2{font-size:clamp(2rem,3vw,3rem)}dialog p{color:#444}dialog .kicker{display:none}.contact-nav{position:absolute;top:34px;left:48px;display:flex;gap:24px;font-size:.8125rem}.close{position:absolute;top:22px;right:20px;width:44px;height:44px;font-size:30px;line-height:1}.contact-intro{margin-top:16px}.direct{display:flex;gap:28px;margin-top:28px}.direct button,.direct a{display:flex;gap:18px;font-size:1.125rem;padding:8px 0;border-bottom:1px solid #2223}.direct small{display:none}.direct b{font-weight:400}.feedback{font-size:.875rem;margin-top:12px}.feedback:empty{display:none}form label{display:block;font-size:1rem;margin:25px 0 8px}textarea,input{display:block;width:100%;border:0;border-bottom:1px solid #2225;background:transparent;padding:10px 0;border-radius:0;font-size:1.125rem;color:#222}textarea{min-height:100px;resize:vertical}textarea:focus,input:focus{outline:1px solid #666;outline-offset:4px}textarea::placeholder,input::placeholder{color:#555}#context-row{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;margin-top:10px;gap:12px}#remove-context{width:36px;height:36px;font-size:22px}.demo{font-size:.8125rem;margin-top:18px}.receipt{border-block:1px solid #2223;margin-top:25px;padding:20px 0}.receipt small{font-size:.875rem;overflow-wrap:anywhere}.receipt p{white-space:pre-wrap;overflow-wrap:anywhere;margin:20px 0}dialog .primary{border-color:#2225;font-size:1.25rem}dialog .contact-nav a:hover{color:#555}
#entrance{position:fixed;inset:0;z-index:50}.entrance-identity{position:absolute;left:var(--margin);top:50%;transform:translateY(-50%)}.entrance-identity .material-logo{width:290px;height:164px}.identity-rule,.entrance-identity nav{display:none}.entrance-ask{position:absolute;right:var(--margin);top:45px;font-size:1rem;letter-spacing:.12em;padding-right:0}#enter{position:absolute;right:var(--margin);bottom:40px;font-size:.9375rem;padding-right:0}.entrance-leaving{animation:paper-lift 1s cubic-bezier(.65,0,.25,1) forwards;pointer-events:none}@keyframes paper-lift{to{transform:translateY(-100%)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link{position:fixed;left:20px;top:-80px;z-index:100;background:var(--paper);padding:12px}.skip-link:focus{top:12px}
@media(min-width:1100px){.split .picture{width:min(100%,calc(100svh - var(--head) - var(--foot) - 155px));max-width:100%;justify-self:end}}
@media(max-width:1100px) and (min-width:761px){.side-left,.side-right{top:auto;bottom:8px;transform:none;flex-direction:row}.side-left{left:var(--margin)}.side-right{right:var(--margin);flex-direction:row}.position-label{align-self:flex-start;margin-top:8px}.review-link{display:none}h1,h2{font-size:2.5rem}}
@media(max-width:760px){:root{--head:128px;--foot:120px;--margin:24px}body{font-size:1.125rem}header{padding-bottom:28px;gap:15px}.material-logo{width:110px;height:62px}header nav{position:absolute;left:var(--margin);bottom:12px;margin:0;gap:25px}header nav a{font-size:.875rem;padding:4px 0}.talk{font-size:.875rem}body[data-lane=home] header{height:100px;padding-bottom:0}body[data-lane=home] #journey{padding-top:100px}.home{padding:26px var(--margin) 40px;min-height:calc(100svh - 100px)}.doors{grid-template-columns:1fr;gap:20px}.doors a{position:relative}.doors a>span{position:absolute;left:18px;top:15px;z-index:1;color:white;font-size:1.875rem;text-shadow:0 1px 4px #0008}.doors a:after{content:'';position:absolute;inset:0;background:linear-gradient(#0004,transparent 40%);pointer-events:none}.screen:not(.home){padding:62px var(--margin) 42px}.split{display:flex;flex-direction:column;gap:28px}.words{width:100%;order:0}.picture{width:100%;order:1;flex-shrink:0}.you-first .picture{display:none}h1,h2{font-size:2.15rem}.kicker{font-size:.8125rem;margin-bottom:20px}.caption{font-size:.8125rem}.choices{margin-top:22px}.choices button{font-size:1.375rem;padding:18px 0}.primary{font-size:1.375rem}.project-grid{grid-template-columns:1fr;gap:30px}.project>span:last-child{font-size:1rem}.project b{font-size:.875rem}.principles{grid-template-columns:1fr;gap:28px;margin-top:30px}.principles h3{font-size:1.5rem}.principles p{font-size:1.125rem}.principles small{margin-bottom:12px}.ending{align-items:flex-start}.ending h2{max-width:16ch}.position-label{font-size:.75rem;gap:12px;align-self:flex-start;margin-top:8px}.review-link{display:none}.side-left,.side-right{top:auto;bottom:0;transform:none;min-height:40px;flex-direction:row;gap:6px;padding:8px 0}.side-left{left:var(--margin)}.side-right{right:var(--margin);flex-direction:row}.side-left>span,.side-right>span{font-size:.75rem}.side-left i,.side-right i{font-size:18px}.vertical-up{font-size:.875rem;gap:0;min-height:48px}.vertical-down{bottom:29px;font-size:1rem;min-height:62px;max-width:65%;text-align:center}.vertical-down i{font-size:27px}.vertical-up i{font-size:24px}dialog{width:94%;padding:96px 24px 35px}.contact-nav{left:24px;top:30px;gap:20px;font-size:.75rem}.close{right:12px;top:18px}dialog h2{font-size:2.2rem}.contact-intro{font-size:1.125rem}.entrance-identity .material-logo{width:225px;height:127px}.entrance-ask{top:32px}#enter{bottom:30px}.forward{font-size:1.125rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.ending.split{align-items:center}button:disabled{cursor:default;opacity:.6}dialog .demo:empty{display:none}

/* One thin cut sheet directly over the same paper: no bevel or raised rim. */
:root{--cut-tone:var(--paper);--cut-wash:var(--wash)}
:root[data-theme=dark]{--cut-tone:var(--paper);--cut-wash:var(--wash)}
.paper-run{font:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;color:inherit!important;text-shadow:none!important}
.paper-letter,.logo-aperture{background-color:var(--cut-tone);background-image:linear-gradient(var(--cut-wash),var(--cut-wash)),var(--texture);background-size:auto,1360px 660px;background-attachment:fixed;filter:url(#paper-cutout)}
.paper-letter{display:inline-block!important;position:static!important;font:inherit!important;letter-spacing:inherit!important;line-height:inherit!important;color:transparent!important;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;text-shadow:none!important}
.logo-aperture{display:block;width:100%;height:100%;mask:url('assets/logo-new.svg?v=29') center/contain no-repeat;-webkit-mask:url('assets/logo-new.svg?v=29') center/contain no-repeat}
.material-logo{filter:url(#paper-cutout)}.logo-aperture{filter:none}
dialog{--cut-tone:transparent;--cut-wash:transparent;box-shadow:-1px 0 1px #00000018}
body[data-lane=home] header{box-shadow:0 1px 1px #00000015}
.doors a>span{text-shadow:none}
input,textarea,input::placeholder,textarea::placeholder{color:var(--cut-tone);text-shadow:0 .35px .08px #0008}
@media(forced-colors:active){.paper-letter{background:none!important;-webkit-text-fill-color:CanvasText;color:CanvasText!important;filter:none}.logo-aperture{background:CanvasText}.material-logo{filter:none}}

/* The translucent Ask sheet reveals the page underneath its letter apertures. */
dialog .paper-letter{background:transparent;-webkit-text-fill-color:transparent;text-shadow:0 .35px .08px #0008!important;filter:none}

/* Neutral blind emboss: larger lettering rises only a fraction of a millimetre. */
:root{--paper:#f4f4f4;--ink:#252525;--muted:#666;--line:#28282826;--wash:#f4f4f4e8;--sheet:rgba(245,245,245,.57)}
:root[data-theme=dark]{--paper:#262626;--ink:#f1f1f1;--muted:#bcbcbc;--line:#eeeeee2e;--wash:#262626eb;--sheet:rgba(236,236,236,.68)}
.paper-raised .paper-letter,.material-logo{filter:url(#paper-emboss)}
dialog .paper-raised .paper-letter{background-color:#ededed;background-image:linear-gradient(#ededede8,#ededede8),var(--texture);background-clip:text;-webkit-background-clip:text;text-shadow:none!important;filter:url(#paper-emboss)}
@media(forced-colors:active){.paper-raised .paper-letter,.material-logo{filter:none}dialog .paper-raised .paper-letter{background:none}}

/* Grain taken directly from the approved logo photograph, with neutral light. */
:root{--wash:#f4f4f430}:root[data-theme=dark]{--wash:#26262630}
body,header,#lane-position,#entrance,.paper-letter,.logo-aperture{background-size:auto,272px 108px}

/* A translucent trace sheet with an actual logo-shaped aperture. */
#entrance{background:none;--cover-left:calc(50% - 145px);--cover-top:calc(50% - 81px);--cover-width:290px;--cover-height:162px}
#entrance:before,#entrance:after{content:'';position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000,#000),url('assets/logo-new.svg?v=29');mask-image:linear-gradient(#000,#000),url('assets/logo-new.svg?v=29');-webkit-mask-size:100% 100%,var(--cover-width) var(--cover-height);mask-size:100% 100%,var(--cover-width) var(--cover-height);-webkit-mask-position:0 0,var(--cover-left) var(--cover-top);mask-position:0 0,var(--cover-left) var(--cover-top);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude}
#entrance:before{background:var(--sheet);backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);-webkit-backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68)}
#entrance:after{background:url('assets/paper-grain.svg');opacity:.65}
#entrance .entrance-identity{left:var(--cover-left);top:var(--cover-top);transform:none;z-index:1}
#entrance .entrance-identity .material-logo{width:var(--cover-width);height:var(--cover-height);filter:url(#trace-cut-edge)}
#entrance .logo-aperture{background:#000;filter:none}
#entrance .entrance-ask,#entrance #enter{z-index:2}

/* The main view is one continuous sheet after the trace cover lifts. */
body[data-lane=home] header{background:transparent;box-shadow:none;border:0;backdrop-filter:none;pointer-events:none}
body[data-lane=home] header .brand-wrap,body[data-lane=home] header .talk{pointer-events:auto}

/* Use the approved cover's thin cut edge for the persistent logo and ASK. */
header .material-logo{filter:url(#trace-cut-edge)}
header .logo-aperture{background:#000;filter:none}
.talk .paper-letter,.entrance-ask .paper-letter{background:none;color:#000!important;-webkit-text-fill-color:#000;text-shadow:none!important;filter:url(#trace-cut-edge)}
@media(forced-colors:active){header .material-logo,.talk .paper-letter,.entrance-ask .paper-letter{filter:none}.talk .paper-letter,.entrance-ask .paper-letter{-webkit-text-fill-color:CanvasText;color:CanvasText!important}}

/* Base paper, translucent trace, cut titles, printed body text. */
:root{--print:#222;--print-muted:#444;--page-trace:rgba(245,245,245,.57)}
:root[data-theme=dark]{--print:#222;--print-muted:#444;--page-trace:rgba(236,236,236,.68)}
body{color:var(--print);background-image:linear-gradient(var(--page-trace),var(--page-trace)),linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,auto,272px 108px}
header,#lane-position{background-image:linear-gradient(var(--page-trace),var(--page-trace)),linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,auto,272px 108px}
p,.caption,.direction{color:var(--print-muted)}button,a,input,textarea{color:var(--print)}input,textarea,input::placeholder,textarea::placeholder{text-shadow:none;color:var(--print-muted)}
.talk,.entrance-ask,.contact-nav{color:var(--print)}
h1,h2,h3{background-color:var(--paper);background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,272px 108px;background-attachment:fixed;background-clip:text;-webkit-background-clip:text;color:transparent;filter:url(#paper-cutout)}
header .material-logo{filter:url(#paper-cutout)}header .logo-aperture{background-color:var(--paper);background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,272px 108px;background-attachment:fixed}
.doors a{position:relative;display:block;isolation:isolate;overflow:hidden}
.doors a:after{display:none}
.doors a>span{position:absolute;left:24px;top:24px;z-index:2;font-size:clamp(1.65rem,2.65vw,2.8rem);line-height:1.1;letter-spacing:.015em;color:#000;text-shadow:none;filter:url(#trace-cut-edge);pointer-events:none}
.lane-trace{position:absolute;inset:0;z-index:1;display:block;background:var(--sheet);backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);-webkit-backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;pointer-events:none}
.lane-trace:after{content:'';position:absolute;inset:0;background:url('assets/paper-grain.svg');opacity:.65;pointer-events:none}
.doors a:focus-visible{outline-offset:-3px}
dialog h2{background-color:#ededed;background-image:linear-gradient(#ededed30,#ededed30),var(--texture)}
@media(max-width:760px){.doors a>span{left:18px;top:18px;font-size:1.875rem}}
@media(forced-colors:active){h1,h2,h3{background:none;color:CanvasText;filter:none}.lane-trace{display:none}.doors a>span{color:CanvasText;filter:none}}


/* Stacked physical surfaces: only the trace owns opacity and blur. */
body{background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,272px 108px}
.layers-pending #journey,.layers-pending header{visibility:hidden}
.screen{isolation:isolate;overflow:hidden}
.surface-trace{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--sheet);backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);-webkit-backdrop-filter:blur(5px) saturate(var(--trace-saturation,1)) contrast(.68);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.surface-trace:after{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/paper-grain.svg');opacity:.65}
.next-preview{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8%;padding:68px var(--margin) 86px}
.next-copy{color:#333;align-self:center}.next-title{font-size:clamp(2rem,3.5vw,3.6rem);line-height:1.07;letter-spacing:-.045em;max-width:18ch}.next-copy p{font-size:1.25rem;margin-top:24px;max-width:30em}
.next-preview>img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(var(--image-saturation,1))}
.words,.section-heading,.principles,.screen>h1,.screen>h2,.screen>.kicker,.screen>.caption,.project-grid,.picture{position:relative;z-index:3}
/* Paper-backed headings are geometry only: the world mask supplies the cutout,
   so no independently painted glyph can obscure the live substrate below. */
#journey h1,#journey h2,#journey h3{background:none!important;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:none}
#journey h1,#journey h2{font-size:clamp(1rem,1.75vw,1.8rem)}
#journey h3{font-size:.85rem}
dialog h2{background:none!important;color:#000;-webkit-text-fill-color:#000;text-shadow:none;filter:url(#trace-cut-edge)}
.doors a{isolation:auto;overflow:visible}.doors img{position:relative;z-index:1}.doors a>span{z-index:3}.lane-trace{display:none!important}
header,body[data-lane=home] header{background:none;box-shadow:none;backdrop-filter:none}
header>.surface-trace{z-index:0}header>.brand-wrap,header>nav,header>.talk{position:relative;z-index:1}
header .material-logo{filter:url(#trace-cut-edge)}header .logo-aperture{background:#000;background-image:none}
#lane-position{background:var(--sheet);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
dialog{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
dialog:before{display:none}dialog>.surface-trace{z-index:0;bottom:auto;min-height:100%}
#contact-main,#contact-receipt{position:relative;z-index:1}dialog .contact-nav,dialog .close{z-index:2}
@media(max-width:760px){.next-preview{padding:62px var(--margin) 42px;display:flex;flex-direction:column;align-items:stretch;gap:28px}.next-title{font-size:2.15rem}.next-preview>img{max-height:342px}header>nav{position:absolute}}
@media(forced-colors:active){.surface-trace,.next-preview{display:none}h1,h2,h3,dialog h2{filter:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* Main navigation uses one uninterrupted sheet, including its logo aperture. */
.home>.surface-trace{display:none}
body[data-lane=home] header>.surface-trace{height:100svh}
@media(min-width:1100px){.next-preview>img{width:min(100%,calc(100svh - var(--head) - var(--foot) - 155px));justify-self:end}}
.lane-enter{animation:trace-lane-in .3s ease-out}
@keyframes trace-lane-in{from{transform:translateX(var(--slide,20px))}to{transform:none}}

/* Flat black brandmark on both the cover and persistent page header. */
.material-logo{filter:none!important}
.logo-aperture{background:#000!important;filter:none!important;box-shadow:none!important}
#entrance:before,#entrance:after{mask-image:none;-webkit-mask-image:none}

/* A single stationary trace sheet; only its apertures travel upward. */
#entrance:before,#entrance:after{display:none}
#entrance.entrance-leaving{animation:none;transform:none}
#entrance .entrance-identity{transform:translateY(var(--intro-logo-offset,0px))}
#entrance .material-logo{filter:url(#trace-cut-edge)!important}
.intro-cutouts header>.brand-wrap,.intro-cutouts header>.talk{visibility:hidden}
.doors a>span{left:50%;top:50%;width:max-content;white-space:nowrap;transform:translate(-50%,-50%) translateY(var(--intro-title-offset,0px))}
.doors img,.project img,.picture img,.project-image img,.next-preview>img{filter:saturate(var(--image-saturation,1)) brightness(.8)}

/* Pale gold pressed just into the paper, with subpixel inner edges. */
.material-logo,#entrance .material-logo{filter:url(#gold-deboss)!important}
.logo-aperture{background:linear-gradient(115deg,#c6ad70 0%,#e7d5a0 46%,#d5bc81 100%)!important;filter:none!important}

/* Translucent vellum: quieter opacity, fine fibres and broad irregular density. */
:root{--sheet:rgba(245,245,245,.485)}
:root[data-theme=dark]{--sheet:rgba(236,236,236,.578)}
.surface-trace:after{
 opacity:.8;
 background-image:radial-gradient(ellipse at 17% 26%,rgba(255,255,255,.085),transparent 43%),radial-gradient(ellipse at 74% 63%,rgba(30,30,30,.035),transparent 49%),radial-gradient(ellipse at 91% 8%,rgba(255,255,255,.06),transparent 37%),url('assets/trace-fibres.svg');
 background-size:100% 100%,100% 100%,100% 100%,384px 384px;
 background-repeat:no-repeat,no-repeat,no-repeat,repeat;
}

/* Neutral page branding; the moving entrance remains an open aperture. */
.logo-aperture{background:#606060!important}
#entrance .material-logo{filter:url(#trace-cut-edge)!important}
#entrance .logo-aperture{background:#000!important}

/* Contact with the image tightens the trace, without exposing bare imagery. */
header>.surface-trace{transition:backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease}
.trace-press header>.surface-trace{backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78);-webkit-backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78)}
.surface-trace:after{opacity:.95}
.departing-sheet{position:fixed;inset:0;z-index:40;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(var(--wash),var(--wash)),var(--texture);background-size:auto,272px 108px;pointer-events:none}
.departing-sheet>div{scrollbar-width:none}
.departing-sheet header{height:var(--head);background:none;pointer-events:none}
.departing-sheet header>.surface-trace{height:100svh;backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78);-webkit-backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78)}
.departing-sheet header nav{display:none}
.sheet-navigation #journey,.sheet-navigation header,.sheet-navigation .direction{pointer-events:none}
.sheet-navigation .lane-enter{animation:none}
@media(max-width:760px){.departing-sheet header{height:100px;padding-bottom:0}}
@media(prefers-reduced-motion:reduce){header>.surface-trace{transition:none}}

/* Supplied tracing-paper photograph, one source pixel per CSS pixel. */
.surface-trace:after{background-image:url('assets/trace-reference-tile.svg?v=3');background-size:1204px 954px;background-repeat:repeat;opacity:.85;mix-blend-mode:normal}
header .material-logo{height:auto;aspect-ratio:938/540}

/* One moving trace sheet, with quieter fibres and clearer silhouettes. */
:root{--sheet:rgba(245,245,245,.412)}
:root[data-theme=dark]{--sheet:rgba(236,236,236,.491)}
.surface-trace:after{opacity:.425}
.doors img,.project img,.picture img,.project-image img,.next-preview>img{filter:saturate(var(--image-saturation,1)) brightness(.8)}

/* Original logo silhouette, cut through the front trace onto a second sheet. */
header .material-logo{aspect-ratio:863/450;filter:url(#trace-cut-edge)!important}
header .logo-aperture{background:#000!important}
.logo-trace-underlay{position:absolute;z-index:-1;pointer-events:none;background:var(--sheet);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.logo-trace-underlay:after{content:'';position:absolute;inset:0;background:url('assets/trace-reference-tile.svg?v=3') 0 0/1204px 954px;opacity:.425}
.intro-cutouts .logo-trace-underlay{visibility:hidden}

/* All entrance cutouts share a single pre-rendered sheet and one travel offset. */
body[data-lane=home] header>.brand-wrap,body[data-lane=home] header>.logo-trace-underlay{transform:translateY(var(--intro-title-offset,0px))}
.intro-cutouts header>.brand-wrap,.intro-cutouts .logo-trace-underlay{visibility:visible}

/* A continuous map: all three lanes occupy permanent positions on one paper. */
#journey{position:relative;display:grid;grid-template-columns:repeat(3,var(--view-width,100vw));grid-template-rows:auto auto;align-items:start;gap:0;padding:0!important;scroll-padding:0;scroll-snap-type:none;overflow:auto}
#journey>[data-lane]{position:relative;width:var(--view-width,100vw)}
#journey>[data-lane=home]{grid-column:1/4;grid-row:1}
#journey>[data-lane=work]{grid-column:1;grid-row:2}
#journey>[data-lane=you]{grid-column:2;grid-row:2}
#journey>[data-lane=about]{grid-column:3;grid-row:2}
.screen{min-height:100svh;padding-top:calc(var(--head) + 48px);padding-bottom:calc(var(--foot) + 36px);scroll-snap-align:none}
.home{padding-top:calc(var(--head) + 48px);min-height:100svh}
.lane-enter{animation:none!important}
.surface-trace:after{background-position:var(--trace-x,0px) var(--trace-y,0px)}
@media(max-width:760px){.screen:not(.home){padding-top:calc(var(--head) + 32px);padding-bottom:calc(var(--foot) + 24px)}.home{padding-top:126px}}

.home>.surface-trace{display:block}
body[data-lane=home]>header>.surface-trace{display:none}

#journey{scrollbar-width:none}#journey::-webkit-scrollbar{display:none}

/* One material layer spans the complete map, so section boundaries have no edges. */
#journey{isolation:isolate}
.screen{isolation:auto;overflow:visible}
.world-trace{position:absolute;left:0;top:0;right:auto;bottom:auto;z-index:2;pointer-events:none}
.world-trace:after{background-position:0 0}
#lane-position{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:0}
header>.surface-trace{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
header>.surface-trace:after{display:none}
.picture,.project-image{box-shadow:inset 0 .5px 1px #0003}

.next-preview{display:none!important}

.world-trace{transition:backdrop-filter .28s ease,-webkit-backdrop-filter .28s ease}
.trace-press .world-trace{backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78);-webkit-backdrop-filter:blur(2.4px) saturate(var(--trace-saturation,1)) contrast(.78)}
@media(prefers-reduced-motion:reduce){.world-trace{transition:none}}

/* Images extend past their smaller openings, leaving a veiled photographic edge. */
.picture,.project-image{position:relative;z-index:1;box-shadow:none}
.project-grid{z-index:auto}
.project{position:relative;isolation:auto}
.project>span:last-child{position:relative;z-index:3}

.logo-trace-underlay{display:none!important}

#journey>[data-lane=home]{position:sticky;left:0;align-self:start}

/* Material rendering only. All adjustable values live in materials.css. */
:root,:root[data-theme=dark]{--paper:var(--base-paper-colour);--wash:var(--base-paper-wash);--texture:var(--base-paper-texture);--sheet:rgba(var(--trace-colour),var(--trace-opacity))}
body{background-color:var(--base-paper-colour);background-image:linear-gradient(var(--base-paper-wash),var(--base-paper-wash)),var(--base-paper-texture);background-size:auto,var(--base-paper-scale)}
.world-trace,dialog>.surface-trace{background:rgba(var(--trace-colour),var(--trace-opacity));backdrop-filter:blur(var(--trace-blur)) saturate(var(--trace-saturation,1)) contrast(var(--trace-contrast));-webkit-backdrop-filter:blur(var(--trace-blur)) saturate(var(--trace-saturation,1)) contrast(var(--trace-contrast))}
.surface-trace:after{background-image:var(--trace-texture);background-size:var(--trace-texture-scale);opacity:var(--trace-texture-intensity)}
.trace-press .world-trace{backdrop-filter:blur(var(--trace-press-blur)) saturate(var(--trace-saturation,1)) contrast(var(--trace-press-contrast));-webkit-backdrop-filter:blur(var(--trace-press-blur)) saturate(var(--trace-saturation,1)) contrast(var(--trace-press-contrast))}
.doors img,.project img,.picture img,.project-image img{filter:saturate(var(--image-saturation,1)) brightness(var(--image-brightness))}

.surface-trace:after{filter:url(#trace-fibre-extract)}

/* Shadow belongs to the opening, above the trace; photo continues beneath it.
   Vary density along long edges without changing the rectangular cut itself. */
.picture,.project-image{z-index:auto}
.picture img,.project-image img{z-index:1}
.project-image img{position:relative}
.picture::after,.project-image::after{
 content:'';position:absolute;z-index:3;inset:var(--aperture-inset,0px);
 pointer-events:none;opacity:var(--image-cut-shadow-opacity);
 background:
 linear-gradient(90deg,#0003 0%,#0008 19%,#0004 42%,#0009 69%,#0003 100%) top left/100% .65px,
 linear-gradient(90deg,transparent 0%,#0003 25%,transparent 48%,#0004 74%,transparent 100%) top left/100% var(--image-cut-shadow-depth),
 linear-gradient(180deg,#0002 0%,#0006 28%,#0002 51%,#0007 81%,#0002 100%) top left/.6px 100%,
 linear-gradient(180deg,transparent,#0002 34%,transparent 61%,#0003 86%,transparent) top left/var(--image-cut-shadow-depth) 100%,
 linear-gradient(90deg,#fff1,#fff4 32%,#fff1 61%,#fff3) bottom left/100% .5px,
 linear-gradient(180deg,#fff1,#fff3 40%,#fff1) top right/.5px 100%;
 background-repeat:no-repeat;
}

/* Printed on the sheet beneath each opening, never fixed to the viewport. */
.doors{margin-bottom:0}
.lane-caption{position:absolute;top:calc(100% + 16px);left:0;right:0;z-index:3;display:block;font-family:inherit;font-size:var(--caption-size,11px);font-weight:400;line-height:1.5;letter-spacing:.24em;color:#111;filter:none;text-shadow:none}
@media(max-width:760px){.doors{row-gap:62px}.lane-caption{font-size:calc(var(--caption-size,11px) - 1px);letter-spacing:.2em;top:calc(100% + 13px)}}


.doors .lane-caption{opacity:0}.caption-ink{right:auto;pointer-events:none}

/* Captions remain printed on the sheet, inside each photograph's lower edge. */
.doors .lane-caption{top:auto;bottom:18px;left:20px;right:20px}
@media(max-width:760px){.doors{row-gap:20px}.doors .lane-caption{bottom:16px;left:18px;right:18px}}

/* A shallow, irregular contact shadow follows the full height of the Ask sheet. */
dialog{border-left:0;box-shadow:-.5px 0 .8px #00000014}
dialog>.surface-trace::before{
 content:'';position:absolute;inset:0 auto 0 0;width:5px;z-index:1;pointer-events:none;
 opacity:var(--ask-edge-shadow-opacity,.55);
 background:
 linear-gradient(180deg,#0002 0%,#0007 14%,#0003 32%,#0008 49%,#0002 65%,#0006 84%,#0003 100%) left top/.7px 100% no-repeat,
 linear-gradient(180deg,transparent 0%,#0003 17%,transparent 35%,#0004 51%,transparent 69%,#0003 88%,transparent 100%) left top/2.6px 100% no-repeat,
 linear-gradient(180deg,#fff2,#fff5 27%,#fff1 53%,#fff4 78%,#fff1) 1px 0/.5px 100% no-repeat;
 clip-path:polygon(0 0,45% 0,65% 14%,35% 31%,85% 49%,40% 66%,70% 84%,45% 100%,0 100%);
}

.site-credit{position:absolute;bottom:24px;left:var(--margin);right:var(--margin);font:400 11px/1.6 Arial,Helvetica,sans-serif;letter-spacing:.025em;color:#222;z-index:3}
.home>.site-credit{opacity:0}.site-credit.caption-ink{right:auto}
@media(max-width:760px){.site-credit{bottom:14px;font-size:10px;max-width:calc(100vw - 48px)}}

.site-credit{font-size:12.333333px;color:#fff}.site-credit.caption-ink{opacity:1}
@media(max-width:760px){.site-credit{font-size:11.333333px}}

/* Expose the base paper at the left only, with a short varying contact shadow. */
.world-paper-edge{position:absolute;top:0;width:8px;z-index:4;pointer-events:none;opacity:var(--trace-edge-shadow-opacity);background:url("assets/trace-edge-shadow.svg") 0 0/8px 900px repeat-y}

@font-face{font-family:"Arkhaus Credit";src:url("assets/montserrat-light.woff2") format("woff2"),url("assets/montserrat-light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
.site-credit{font-family:"Arkhaus Credit",Arial,sans-serif;font-weight:300;font-synthesis:none}

/* A 20% black tint inside the lane lettering; underlying photographs stay visible. */
.doors a>span{filter:url(#lane-cut-darken)}

/* Shared typography: preserve the two approved main-page treatments. */
:root{--font-heading:Arial,Helvetica,sans-serif;--font-text:Arial,Helvetica,sans-serif;--heading-weight:400;--label-weight:400;--heading-tracking:.015em;--label-tracking:.24em}
body{font-family:var(--font-text);font-weight:400}
h1,h2,h3,.doors a>span,dialog h2{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-tracking);line-height:1.1}
button,input,textarea,a,p,.signature,.selected{font-family:var(--font-text);font-weight:400}
/* Menu and label font: chosen in Console > Design ("Menu & labels"). Oswald Light is the old site's menu font (SIL OFL, assets/oswald-OFL.txt). */
@font-face{font-family:ArkOswald;src:url("assets/oswald-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:ArkMontserrat;src:url("assets/montserrat-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
.lane-caption,.kicker,header nav,.contact-nav,.position-label,.caption{font-family:var(--font-label,var(--font-text));font-weight:var(--label-weight);letter-spacing:var(--label-tracking)}
@media(max-width:760px){.lane-caption,.kicker,header nav,.contact-nav,.position-label,.caption{letter-spacing:.2em}}
header nav a,.contact-nav a{font-family:var(--font-label,var(--font-text));letter-spacing:var(--menu-tracking,.06em)}

/* Ask occupies its own space. The paper workspace travels left as one surface. */
:root{--ask-panel-width:min(570px,calc(100vw - 48px));--ask-panel-inset:32px;--ask-shift:calc(var(--ask-panel-width) + 64px);--ask-motion:540ms;--workspace-x:0px}
body{overflow:hidden;background-position:var(--workspace-x) 0;transition:background-position var(--ask-motion) cubic-bezier(.22,.68,.2,1)}
body.ask-open{--workspace-x:calc(-1 * var(--ask-shift))}
body>header,body>#journey,body>#lane-position,body>.direction,body>#entrance{translate:var(--workspace-x) 0;transition:translate var(--ask-motion) cubic-bezier(.22,.68,.2,1)}
dialog#contact{inset:50% var(--ask-panel-inset) auto auto;margin:0;width:var(--ask-panel-width);height:auto;max-height:calc(100svh - 64px);padding:88px 42px 38px;border:0;border-radius:3px;background:#151515 url('assets/ask-black-tiles.png') center/100% 100% no-repeat;box-shadow:-7px 6px 12px #0004,0 1px 2px #0007;color:#fff;color-scheme:dark;overflow:auto;scrollbar-color:#aaa #222;transform:translate(calc(100% + var(--ask-panel-inset) + 20px),-50%);transition:transform var(--ask-motion) cubic-bezier(.22,.68,.2,1);backdrop-filter:none;-webkit-backdrop-filter:none}
dialog#contact[open]{animation:none}
dialog#contact.ask-visible{transform:translate(0,-50%)}
dialog#contact>.surface-trace,dialog#contact::before,dialog#contact::after{display:none!important}
dialog#contact::backdrop{background:transparent}
dialog#contact h2{background:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;filter:none!important;text-shadow:none!important;font-weight:400;font-size:clamp(2rem,3vw,3rem);letter-spacing:.015em}
dialog#contact :is(p,label,input,textarea,button,a,small,#context-text){color:#fff;-webkit-text-fill-color:#fff;filter:none;text-shadow:none;font-weight:400}
dialog#contact input,dialog#contact textarea{border-color:#ffffffb3;background:none;caret-color:#fff}
dialog#contact input::placeholder,dialog#contact textarea::placeholder{color:#fff;opacity:.65}
dialog#contact .contact-intro{margin-top:12px;font-size:1.125rem}
dialog#contact form{margin-top:28px}
dialog#contact form label{margin-top:24px;font-size:1rem}
dialog#contact textarea{min-height:58px}
dialog#contact .contact-nav{left:42px;top:30px;font-size:11px;gap:22px}
dialog#contact .close{right:14px;top:16px}
dialog#contact .primary{border-color:#ffffff80;margin-top:24px}
dialog#contact button:disabled{opacity:1}
dialog#contact .demo{font-size:12px;line-height:1.5;margin-top:12px}
dialog#contact :is(input,textarea,button,a):focus-visible{outline:1px solid #fff;outline-offset:4px}
@media(max-width:760px){:root{--ask-panel-inset:16px;--ask-panel-width:calc(100vw - 48px);--ask-shift:calc(100vw - 16px)}dialog#contact{padding:72px 24px 28px;max-height:calc(100svh - 32px)}dialog#contact .contact-nav{left:24px;top:25px;gap:15px;letter-spacing:.12em;font-size:10px}dialog#contact .close{right:8px;top:10px}dialog#contact h2{font-size:2rem}dialog#contact .contact-intro{font-size:1rem}dialog#contact form{margin-top:18px}dialog#contact .primary{font-size:1.125rem}}
@media(prefers-reduced-motion:reduce){body,body>header,body>#journey,body>#lane-position,body>.direction,body>#entrance,dialog#contact{transition:none!important}}

/* The tile panel rests on a continuation of the same tracing-paper workspace. */
dialog#contact{background-image:url('assets/ask-connected-ridges.png');box-shadow:-1px 1px 0 #373737,-2px 2px 0 #292929,-3px 3px 0 #252525,-4px 4px 0 #242424,-5px 5px 0 #202020,-6px 6px 0 #1d1d1d,-7px 7px 0 #181818,-10px 12px 9px #0005,0 1px 2px #0008;color:#d5d5d5}
dialog#contact h2,dialog#contact :is(p,label,input,textarea,button,a,small,#context-text){color:#d5d5d5!important;-webkit-text-fill-color:#d5d5d5!important}
dialog#contact input,dialog#contact textarea{border-color:#bcbcbc;caret-color:#d5d5d5}
dialog#contact input::placeholder,dialog#contact textarea::placeholder{color:#d5d5d5}
dialog#contact .primary{border-color:#bcbcbc80}

/* Persistent credit stays on the viewport while the paper and lanes move. */
body>.site-credit{position:fixed;left:var(--margin);right:var(--margin);bottom:12px;z-index:30;opacity:1;pointer-events:none;max-width:none}
/* The credit line lets clicks through to the page, but its links (Services, Notes, Questions…) must be pressable. */
body>.site-credit .credit-links a{pointer-events:auto;cursor:pointer}
@media(max-width:760px){body>.site-credit{left:12px;right:12px;bottom:6px;font-size:11.333333px;line-height:1.4;text-align:center}body:not([data-lane=home]) .side-left,body:not([data-lane=home]) .side-right{bottom:40px}}

/* One original sheet extends beyond the viewport into Ask's reserved space. */
#journey{width:calc(100vw + var(--ask-shift))}
body.ask-space #journey>[data-lane]{visibility:hidden}
body.ask-space[data-lane=home] #journey>[data-lane=home],body.ask-space[data-lane=work] #journey>[data-lane=work],body.ask-space[data-lane=you] #journey>[data-lane=you],body.ask-space[data-lane=about] #journey>[data-lane=about]{visibility:visible}

/* Ask is printed on the continuous trace, with a ceramic sample resting above it. */
dialog#contact{padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;color-scheme:light}
.ask-form-scroll{position:relative;z-index:1;padding:88px 42px 38px;max-height:calc(100svh - 64px);overflow:auto;scrollbar-color:#888 transparent}
.ask-ceramic-object{position:absolute;z-index:0;width:150px;max-width:none;height:auto;right:-35px;top:-100px;transform:rotate(20deg);transform-origin:center;filter:saturate(var(--image-saturation,1)) drop-shadow(4px 7px 3px #0003) drop-shadow(10px 16px 12px #0003);pointer-events:none}
dialog#contact h2,dialog#contact :is(p,label,input,textarea,button,a,small,#context-text){color:#383838!important;-webkit-text-fill-color:#383838!important}
dialog#contact input,dialog#contact textarea{border-color:#5558;caret-color:#383838}
dialog#contact .primary{border-color:#5556}
dialog#contact :is(input,textarea,button,a):focus-visible{outline-color:#444}
dialog#contact .close{right:16px;top:18px;color:#d5d5d5!important;-webkit-text-fill-color:#d5d5d5!important}
@media(max-width:760px){dialog#contact{padding:0}.ask-form-scroll{padding:72px 24px 28px;max-height:calc(100svh - 32px)}.ask-ceramic-object{width:85px;right:-6px;top:-40px}.ask-form-scroll #contact-title{max-width:230px}dialog#contact .close{right:12px;top:16px}}
dialog#contact .close .symbol{color:#d5d5d5!important;-webkit-text-fill-color:#d5d5d5!important}

/* Ceramic scale and soft overhead illumination; tight contact, diffused outer shadow. */
.ask-ceramic-object{width:450px;right:-290px;top:-1100px;filter:saturate(var(--image-saturation,1)) brightness(.72) contrast(1.12) drop-shadow(1px 2px 1px #0005) drop-shadow(3px 7px 5px #0003) drop-shadow(7px 16px 13px #0002)}
dialog#contact .close{right:16px;top:-52px}
dialog#contact .close,dialog#contact .close .symbol{color:#383838!important;-webkit-text-fill-color:#383838!important}
dialog#contact.ask-image-aligned{top:var(--ask-image-top);transform:translateX(calc(100% + var(--ask-panel-inset) + 20px))}
dialog#contact.ask-image-aligned.ask-visible{transform:translateX(0)}
.ask-image-aligned .ask-form-scroll{padding:0 42px;overflow:visible;max-height:none}
.ask-image-aligned #contact-main{height:var(--ask-image-height);display:flex;flex-direction:column}
dialog.ask-image-aligned #contact-title{margin:0;font-size:clamp(2rem,3vw,3rem);line-height:1}
dialog.ask-image-aligned .contact-nav{top:-48px}
dialog.ask-image-aligned .contact-intro{margin-top:12px}
dialog.ask-image-aligned #contact-form{flex:1;display:flex;flex-direction:column;margin-top:14px;min-height:0}
dialog.ask-image-aligned #contact-form label{margin-top:10px}
dialog.ask-image-aligned #contact-form textarea{min-height:36px;height:36px;padding:4px 0;flex:1;resize:none}
dialog.ask-image-aligned #contact-form input{height:34px;padding:4px 0}
dialog.ask-image-aligned #contact-form .primary{margin-top:14px;padding:4px 0;font-size:1.125rem}
dialog.ask-image-aligned #contact-form .demo{margin-top:8px;font-size:11px;line-height:1.35}
@media(max-width:760px){.ask-ceramic-object{width:255px;right:-140px;top:-630px}dialog#contact .close{top:16px;right:12px}}

dialog#contact.ask-image-aligned .contact-nav{top:-48px}
dialog#contact.ask-image-aligned #contact-form .demo{margin-bottom:0;max-width:none}
dialog#contact.ask-image-aligned #contact-form textarea{overflow:auto;scrollbar-width:none}
dialog#contact .close{right:auto;left:42px;top:-88px}
dialog#contact.ask-image-aligned #contact-form .primary{margin-top:9px}
@media(max-width:760px){dialog#contact .close{left:24px;right:auto;top:12px}}
@media(max-width:760px){dialog#contact .close{top:-24px}}
@media(min-width:761px) and (max-width:1350px){dialog#contact.ask-image-aligned #contact-title{font-size:32px}dialog#contact.ask-image-aligned #contact-form{margin-top:8px}dialog#contact.ask-image-aligned #contact-form label{margin:4px 0 2px}}

/* Persistent brand is only the aperture in world-paper-mask, never painted ink. */
header .material-logo{filter:none!important;background:none!important}
header .logo-aperture{background:none!important;filter:none!important;box-shadow:none!important}
header>.logo-trace-underlay{display:none!important}

/* Approved Ask composition: one image-column extension, white ink, shared sheet. */
@media(min-width:761px){
 :root{--ask-panel-width:calc((100vw - var(--margin) * 2) * .3033333333);--ask-panel-inset:var(--margin);--ask-shift:calc((100vw - var(--margin) * 2) * .3483333333)}
 dialog#contact .ask-form-scroll{padding:0;overflow:visible}
 dialog#contact .ask-ceramic-object{width:450px;right:-110px;top:-435px;transform:none;filter:none}
 dialog#contact .contact-nav{position:relative;inset:auto;display:flex;align-items:center;height:22px;margin:0 36px 14px 0;gap:22px;font-size:10px;letter-spacing:.2em}
 dialog#contact .close{left:auto;right:0;top:-8px}
 dialog#contact.ask-image-aligned #contact-main{height:calc(var(--ask-image-height) - 36px)}
 dialog#contact #contact-title{font-size:clamp(28px,2.5vw,36px);line-height:1.04;margin:0}
 dialog#contact .contact-intro{font-size:16px;line-height:1.3;margin-top:8px}
 dialog#contact.ask-image-aligned #contact-form{margin-top:12px}
 dialog#contact #contact-form label{font-size:14px;line-height:1.25;margin:8px 0 4px}
 dialog#contact #contact-form textarea{min-height:28px;height:28px;line-height:1.25;padding:3px 0}
 dialog#contact #contact-form input{height:28px;min-height:24px;font-size:14px;line-height:1.25;padding:3px 0}
 dialog#contact #contact-form .primary{font-size:16px;line-height:1.2;margin-top:10px;padding:3px 0;border:0}
 dialog#contact #contact-form .demo{font-size:10px;line-height:1.3;margin:6px 0 0;max-width:none}
}
dialog#contact h2,dialog#contact :is(p,label,input,textarea,button,a,small,#context-text),dialog#contact .close,dialog#contact .close .symbol{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1;text-shadow:none;filter:none}
dialog#contact input,dialog#contact textarea{border-color:#fff;caret-color:#fff}
dialog#contact :is(input,textarea,button,a):focus-visible{outline-color:#fff}
@media(max-width:760px){
 dialog#contact .ask-form-scroll{padding:52px 24px 24px}
 dialog#contact .ask-ceramic-object{width:300px;right:-90px;top:-255px;transform:none;filter:none}
 dialog#contact .contact-nav{left:24px;top:14px;font-size:9px;gap:14px}
 dialog#contact .close{left:auto;right:24px;top:4px}
}
@media(min-width:761px) and (max-width:1200px){dialog#contact #contact-title{font-size:26px}dialog#contact .contact-intro{font-size:14px}dialog#contact #contact-form label{margin:4px 0 2px}dialog#contact.ask-image-aligned #contact-form{margin-top:6px}dialog#contact #contact-form .demo{font-size:9px}}

@media(min-width:761px){
 dialog#contact.ask-image-aligned .contact-nav{top:0;left:0;right:auto;bottom:auto}
 dialog#contact .close{top:-8px;left:190px;right:auto}
 dialog#contact .ask-ceramic-object{width:540px;right:-140px;top:-510px}
}
@media(max-width:760px){dialog#contact .close{left:190px;right:auto;top:4px}}
@media(min-width:761px) and (max-width:1100px){
 dialog#contact.ask-image-aligned .contact-nav{height:18px;margin-bottom:10px;gap:16px;font-size:9px}
 dialog#contact.ask-image-aligned #contact-main{height:calc(var(--ask-image-height) - 28px)}
 dialog#contact.ask-image-aligned #contact-title{font-size:26px;line-height:1}
 dialog#contact.ask-image-aligned .contact-intro{font-size:14px;line-height:1.2;margin-top:6px}
 dialog#contact.ask-image-aligned #contact-form{margin-top:6px}
 dialog#contact.ask-image-aligned #contact-form label{font-size:13px;line-height:1.2;margin:4px 0 2px}
 dialog#contact.ask-image-aligned #contact-form textarea{min-height:24px;height:24px;padding:2px 0}
 dialog#contact.ask-image-aligned #contact-form input{height:24px;min-height:24px;padding:2px 0;line-height:1.2}
 dialog#contact.ask-image-aligned #contact-form .primary{font-size:14px;line-height:1.2;padding:2px 0;margin-top:6px}
 dialog#contact.ask-image-aligned #contact-form .demo{font-size:9px;line-height:1.2;margin-top:4px}
 dialog#contact .close{left:164px}
}
@media(min-width:761px) and (max-width:1100px){dialog#contact.ask-image-aligned #contact-form{margin-top:2px}dialog#contact.ask-image-aligned #contact-form label{margin:2px 0 0}}

/* Darken only the landing logo aperture by 50%. */
#entrance .material-logo{filter:url(#landing-cut-darken)!important}
/* Work expands on the same world trace: category photos stay beneath it. */
.category-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.5%}
.category-doors button{position:relative;padding:0;display:block;text-align:center;isolation:auto}
.category-doors img{display:block;width:100%;aspect-ratio:1;object-fit:cover;position:relative;z-index:1;filter:saturate(var(--image-saturation,1)) brightness(var(--image-brightness))}
.category-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;white-space:nowrap;font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:clamp(24px,4.1vw,72px);line-height:1.1;letter-spacing:var(--heading-tracking);color:#000;filter:url(#lane-cut-darken);pointer-events:none}
.work-back{display:block;width:fit-content;font-size:14px;margin-bottom:22px;padding:8px 0;position:relative;z-index:3}
.work-preview-note{font-size:12px;margin-top:12px;max-width:48ch}
.work-list .project-grid{row-gap:30px}
.work-list .project img{aspect-ratio:4/3}
.work-list .project>span:last-child{font-size:14px}
.work-gallery{grid-column:2;grid-row:1;min-width:0;width:100%;justify-self:end}
.work-gallery .picture{width:100%;max-width:none;touch-action:pan-y}
.carousel-controls{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px}
.carousel-controls button{font-size:24px;min-width:44px;min-height:44px}
.work-detail .words{grid-column:1;grid-row:1;min-width:0}
.work-detail .project-challenge{margin-top:28px}
.work-detail .project-challenge strong{font-size:14px;font-weight:500}
.work-detail .project-challenge p{margin-top:10px}
#project-preview-note{display:block;font-size:12px;margin-top:24px;max-width:40ch}
#project-preview-note[hidden]{display:none}
@media(min-width:1100px){.work-gallery{max-width:min(100%,calc(100svh - 220px))}}
@media(max-width:760px){.category-doors{grid-template-columns:1fr;gap:24px}.category-title{font-size:clamp(32px,10vw,60px)}.work-list .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.work-gallery{order:0;max-width:none}.work-detail .words{order:1}.work-list .project>span:last-child{font-size:12px}.work-list .project b{font-size:12px}.work-detail .work-back{margin-top:12px}}
@media(min-width:761px){
 .work-list{padding-top:140px;padding-bottom:80px}
 .work-list .section-heading{margin-bottom:20px}
 .work-list .work-back{margin-bottom:8px}
 .work-list h2{font-size:32px}
 .work-list .project img{height:clamp(110px,18svh,220px);aspect-ratio:auto}
 .work-detail{padding-top:150px;padding-bottom:70px}
 .work-gallery{max-width:min(100%,calc(100svh - 300px))}
 .work-detail .words p{font-size:18px;line-height:1.45;margin-top:16px}
 .work-detail .work-back{margin-bottom:12px}
 .work-detail .kicker{margin-bottom:12px}
 .work-detail h2{font-size:36px}
 .work-detail .project-challenge{margin-top:20px}
 .work-detail .primary{margin-top:20px;font-size:22px}
}
body[data-lane=work] #page-up{display:none}

.category-title{width:max-content}

/* Shared image-choice typography; intro movement remains on the home titles. */
.doors a>span,.category-title{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-tracking);line-height:1.1;width:max-content;left:50%;top:50%;color:#000;text-shadow:none;filter:url(#lane-cut-darken)}
@media(max-width:760px){.category-doors{gap:20px}}

/* The base sheet is stationary; only the tracing-paper layer moves above it. */
body{isolation:isolate;background-image:none;transition:none}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--base-paper-colour);background-image:linear-gradient(var(--base-paper-wash),var(--base-paper-wash)),var(--base-paper-texture);background-size:auto,var(--base-paper-scale);background-position:0 0;transform:translateX(var(--workspace-x));transition:transform var(--ask-motion) cubic-bezier(.22,.68,.2,1);width:calc(100% + var(--ask-shift))}
@media(prefers-reduced-motion:reduce){body::before{transition:none}}

/* Printed captions follow their source cards and the same entrance offset as titles. */
.caption-ink{transform:translateY(var(--intro-title-offset,0px))}

/* A single square unit throughout project grids and carousel openings. */
.work-list .project img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
#work-carousel{aspect-ratio:1;overflow:hidden}
#work-image{max-width:none;object-fit:cover;object-position:center;width:100%;height:100%;transform:none}
#work-image[data-format="panorama"]{width:200%}
#work-image[data-half="right"]{transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){#work-image{transition:none!important}}

/* Quiet project grids: only photographic apertures and their cutout names. */
.work-list .section-heading,.work-detail .work-back{display:none}
#category-projects .project-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;display:block;white-space:nowrap;width:max-content;font-family:var(--font-heading);font-size:clamp(18px,2.8vw,46px);font-weight:400;letter-spacing:.015em;color:transparent;pointer-events:none}
#category-projects .project:hover img{transform:none}
#category-projects .project-image img{transition:none}
#lane-left,#lane-right{display:none!important}
body[data-lane=work] #page-up{display:flex}
.direction.vertical-up,.direction.vertical-down{left:50%;right:auto;transform:translateX(-50%);width:48px;height:48px;padding:10px;min-height:48px;max-width:none;z-index:12}
.direction.vertical-up{top:118px;bottom:auto}
.direction.vertical-down{bottom:40px;top:auto}
.direction.vertical-up>span,.direction.vertical-down>span,.direction i{display:none}
.direction.vertical-up::before,.direction.vertical-down::before,#photo-prev::before,#photo-next::before{content:'';display:block;width:24px;height:23px;background:currentColor;mask:url('assets/arrow-a.svg') center/contain no-repeat;-webkit-mask:url('assets/arrow-a.svg') center/contain no-repeat}
.direction.vertical-down::before{transform:rotate(180deg)}
#photo-prev,#photo-next{font-size:0;display:grid;place-items:center}
#photo-prev::before{transform:rotate(-90deg)}
#photo-next::before{transform:rotate(90deg)}
#journey{touch-action:pan-y}
@media(max-width:760px){#category-projects .project-title{font-size:clamp(16px,4.5vw,28px)}.direction.vertical-up{top:106px}.direction.vertical-down{bottom:40px}}

@media(min-width:761px){.direction.vertical-up{top:88px}}
body[data-lane=work] .review-link{display:none}

/* The ASK ink rides the same tracing sheet as the home logo. */
body[data-lane=home] header>.talk{transform:translateY(var(--intro-title-offset,0px))}
.intro-cutouts header>.talk{visibility:visible}

/* Shared spacing and genuine A apertures, attached to their content. */
:root{--content-gap:clamp(20px,4.5vw,72px)}
.doors,.category-doors,.work-list .project-grid{gap:var(--content-gap)}
.direction.vertical-up,.direction.vertical-down{bottom:auto;justify-content:center;padding:0;color:transparent}
.direction.vertical-up::before,.direction.vertical-down::before{display:none}
.direction>.cut-arrow,header .talk>.cut-arrow{display:block!important;width:24px;height:24px;flex-shrink:0;background:transparent}
/* Ask: a question mark cut out like the logo (Montserrat Light, the site's lighter face), as tall as the logo, top and bottom aligned with it. */
header .talk>.cut-question{display:block;font-family:"Arkhaus Credit",var(--font-heading);font-weight:300;font-synthesis:none;font-size:var(--q-size,52px);line-height:var(--q-line,58px);height:var(--q-line,58px);letter-spacing:0;margin-top:var(--q-top,0px);color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:none}

/* Reuse the approved A-arrow silhouette everywhere; never render font arrows. */
.choices .symbol,.primary .symbol,.direct .symbol{display:none!important}
.choices button>span,.direct b{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px}
.choices button>span::before,.direct b::before,.primary::after{content:'';display:block;width:24px;height:23px;background:currentColor;mask:url('assets/arrow-a.svg') center/contain no-repeat;-webkit-mask:url('assets/arrow-a.svg') center/contain no-repeat}
.choices button>span::before,.direct b::before{transform:rotate(90deg)}
.primary{display:flex;align-items:center;gap:12px}
.primary::after{transform:rotate(90deg);flex:0 0 24px}
header>.talk{position:absolute;right:var(--margin);width:44px;height:44px;min-height:44px;padding:0;display:flex;justify-content:center;align-items:flex-start}
@media(max-width:760px){:root{--content-gap:20px}}
@media(min-width:761px){header>nav{position:absolute;left:50%;margin:0;transform:translateX(-50%)}}

/* Full photographic tile alpha and its original feathered shadow; no clipping. */
dialog#contact .ask-ceramic-object{width:clamp(350px,34vw,550px);height:auto;right:calc(-1 * var(--ask-panel-inset) + 16px);top:calc(-1 * var(--ask-image-top,220px) - 15vw);transform:none;filter:none;clip-path:none;mask:none;object-fit:contain}
@media(max-width:760px){dialog#contact .ask-ceramic-object{width:250px;right:-8px;top:-270px}}

/* The modal hit target follows the existing top cutout arrow. */
dialog#contact .ask-return{position:absolute;width:44px;height:44px;padding:0;background:transparent;border:0;z-index:10;cursor:pointer}

/* Without the redundant lane links, keep Ask aligned to the image bounds. */
dialog#contact.ask-image-aligned #contact-main{height:var(--ask-image-height)}

/* Uppercase typography trial across the workspace. Keep entered values intact. */
body{text-transform:var(--case-text,uppercase)}
button,a,label,h1,h2,h3,p,small,span,nav{ text-transform:inherit }
input,textarea{text-transform:none}
input::placeholder,textarea::placeholder{text-transform:var(--case-text,uppercase)}

/* One spacing unit: exposed paper, trace-to-image inset, and every image gap. */
:root{--content-gap:var(--workspace-gap);--margin:calc(2 * var(--workspace-gap))}
.doors,.category-doors,.project-grid,.work-list .project-grid{gap:var(--workspace-gap)}
@media(min-width:761px){:root{--ask-panel-width:calc((100vw - 6 * var(--workspace-gap)) / 3);--ask-panel-inset:var(--margin);--ask-shift:calc(var(--ask-panel-width) + var(--workspace-gap))}}

/* All visitor paths use the same vertical axis beneath home. */
#journey{grid-template-columns:var(--view-width,100vw);overflow-x:hidden}
#journey>[data-lane=home]{grid-column:1;grid-row:1}
#journey>[data-lane]:not([data-lane=home]){grid-column:1;grid-row:2;visibility:hidden}
body[data-visible-lane=work] #journey>[data-lane=work],body[data-visible-lane=you] #journey>[data-lane=you],body[data-visible-lane=about] #journey>[data-lane=about]{visibility:visible}

/* Navigation uses page actions and labels; directional arrow chrome is removed. */
.choice-mark,.direction,.carousel-controls .symbol { display:none !important; }


/* YOU and ABOUT photographs use the same open cutout as the main image tiles. */
.visitor-visual{position:relative;z-index:auto;isolation:isolate;overflow:hidden;box-shadow:none}
.visitor-visual img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.visitor-visual::after{content:'';position:absolute;z-index:3;inset:0;pointer-events:none;opacity:var(--image-cut-shadow-opacity);background:linear-gradient(90deg,#0003 0%,#0008 19%,#0004 42%,#0009 69%,#0003 100%) top left/100% .65px,linear-gradient(90deg,transparent 0%,#0003 25%,transparent 48%,#0004 74%,transparent 100%) top left/100% var(--image-cut-shadow-depth),linear-gradient(180deg,#0002 0%,#0006 28%,#0002 51%,#0007 81%,#0002 100%) top left/.6px 100%,linear-gradient(180deg,transparent,#0002 34%,transparent 61%,#0003 86%,transparent) top left/var(--image-cut-shadow-depth) 100%,linear-gradient(90deg,#fff1,#fff4 32%,#fff1 61%,#fff3) bottom left/100% .5px,linear-gradient(180deg,#fff1,#fff3 40%,#fff1) top right/.5px 100%;background-repeat:no-repeat}


/* Visitor imagery stays colour-led with only a restrained monochromatic wash. */
.visitor-visual img{filter:grayscale(.08) saturate(.94) brightness(1.01)}


/* Ask (owner, 10 Oct): the question mark is replaced by a speech bubble cut out of the tracing paper (drawn by paper-type.js). */
header>.talk{width:auto;min-width:44px}
header .talk>.cut-bubble{display:block;width:var(--b-w,28px);height:var(--b-h,25px);margin-top:var(--b-top,0px)}
@media(forced-colors:active){header .talk>.cut-bubble{forced-color-adjust:none;background:CanvasText;clip-path:polygon(0 0,100% 0,100% 75.1%,22.8% 75.1%,0 100%)}}

/* Background paper darkness and brightness (Console → Design → Paper background), per theme. 0 and 1 = as approved. */
:root{--paper-darken:var(--base-paper-darken,0);--paper-bright:var(--base-paper-brightness,1)}:root[data-theme=dark]{--paper-darken:var(--base-paper-darken-dark,0);--paper-bright:var(--base-paper-brightness-dark,1)}
body::before{filter:brightness(calc((1 - var(--paper-darken)) * var(--paper-bright)))}

/* Typography (Console → Design, owner 10 Oct): one font and one capitals switch per type, applied to every element of
   that type. Headings and titles; text; labels and menu. Per-page overrides come from design-tokens.css. */
h1,h2,h3,.doors a>span,.category-title,#category-projects .project-title,dialog h2,.contact-sheet-title{text-transform:var(--case-headings,uppercase)}
.lane-caption,.kicker,header nav,header nav a,.contact-nav,.position-label,.caption,#stage-nav,.site-credit,.contact-sheet-list dt,.visitor-custom-confirm,.direction{text-transform:var(--case-labels,uppercase)}
.contact-sheet-title{font-family:var(--font-heading)}