.intro-loader{display:none}.js .intro-loader{position:fixed;inset:0;z-index:300;background:#252824;color:#f2f1ed;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:0 0 3vw 3vw;will-change:transform}.loader-word{overflow:hidden;padding:0 .1em .12em;font-size:clamp(27px,4.2vw,64px);letter-spacing:-.055em;line-height:1.3}.loader-word>span{display:block;animation:loaderWord .7s cubic-bezier(.16,.7,.25,1) both}.loader-dot{color:#b1c3a5}@keyframes loaderWord{from{transform:translateY(110%)}to{transform:translateY(0)}}
.name-marquee{bottom:30px}.hero-role{top:20%}.work-list{padding:100px var(--pad) 120px;background:var(--paper)}.work-list-heading{margin-bottom:65px}.work-list h2{font-size:clamp(52px,7.4vw,118px);font-weight:400;line-height:1.1;letter-spacing:-.065em}.work-list h2 sup{font-size:11px;letter-spacing:0;vertical-align:top;display:inline-block;margin:17px 0 0 24px;color:var(--muted)}.work-list .index-row{min-height:155px;padding:28px 12px;position:relative}.work-list .index-name{font-size:clamp(30px,4.4vw,70px)}.index-row:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.index-row:focus-visible .index-name{transform:translateX(15px)}.index-row .index-arrow{transition:transform .5s}.index-row:hover .index-arrow{transform:translate(5px,-5px)}
.work-preview{position:fixed;left:0;top:0;width:390px;height:300px;z-index:40;pointer-events:none;visibility:hidden;opacity:0;will-change:transform}.work-preview-window{width:100%;height:100%;overflow:hidden}.work-preview-rail{height:600%;will-change:transform}.work-preview-rail>img{display:block;width:100%;height:calc(100% / 6);object-fit:cover}.work-pointer{position:fixed;left:0;top:0;width:88px;height:88px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;font-size:10px;z-index:41;pointer-events:none;opacity:0;visibility:hidden;will-change:transform}
.contact.closing{padding:100px var(--pad) 70px;background:#dce3d6;color:var(--ink);overflow:hidden}.closing-head{display:grid;grid-template-columns:1fr 280px;gap:80px;align-items:end}.closing-label{display:block;font-size:11px;margin-bottom:45px}.closing h2{font-size:clamp(88px,12vw,190px);font-weight:400;line-height:.98;letter-spacing:-.075em;overflow:hidden}.closing h2>span{display:block}.closing h2 .closing-name{color:#73836b}.closing-note{padding-bottom:6px}.closing-note>img{width:96px;height:116px;object-fit:cover;object-position:center;border-radius:50% 50% 3px 3px;margin-bottom:30px;filter:saturate(.7)}.closing-note p{font-size:14px;line-height:1.8;color:#596453;max-width:280px}.closing-mail{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid #aebca5;border-bottom:1px solid #aebca5;margin-top:70px;padding:35px 0}.closing-mail>span:first-child{display:flex;flex-direction:column;gap:14px;min-width:0}.closing-mail small{font-size:10px;color:#596453}.closing-mail>span>span{font-size:clamp(22px,3.5vw,56px);line-height:1.25;letter-spacing:-.05em}.mail-arrow{display:grid;place-items:center;flex-shrink:0;width:78px;height:78px;background:var(--ink);color:var(--paper);border-radius:50%;font-size:32px;font-weight:300;transition:transform .5s,background .5s}.closing-mail:hover .mail-arrow{transform:rotate(45deg);background:var(--blue)}.closing-tools{display:flex;align-items:center;justify-content:space-between;margin-top:23px;font-size:10px;color:#596453}.closing-tools button{font:inherit;color:inherit;padding:8px 0}.closing-tools span{margin-left:12px}.site-footer{background:#dce3d6;border-color:#bdc8b5;color:#596453;padding-top:25px;padding-bottom:28px}.site-footer button{color:inherit}.motion-off .work-preview,.motion-off .work-pointer{display:none}.motion-off .loader-word>span{animation:none}
@media(max-width:1100px){.work-preview{width:330px;height:260px}.work-list .index-row{min-height:135px}.closing-head{grid-template-columns:1fr 230px;gap:45px}.closing-note p{font-size:12px}.closing h2{font-size:12.5vw}.closing-mail{margin-top:60px}.mail-arrow{width:65px;height:65px;font-size:27px}}
@media(max-width:760px){.name-marquee{bottom:40px}.hero-role{top:100px}.work-list{padding:65px 24px 65px}.work-list-heading{margin-bottom:35px}.work-list h2{font-size:12.3vw}.work-list h2 sup{font-size:8px;margin:8px 0 0 12px}.work-list .index-row{padding:23px 0;min-height:128px;grid-template-columns:70px minmax(0,1fr) 20px;gap:18px}.work-list .index-row>img{width:70px;height:80px;object-fit:cover}.work-list .index-name{font-size:25px;line-height:1.15}.work-list .index-number{top:9px;font-size:8px}.work-preview,.work-pointer{display:none!important}.contact.closing{padding:60px 24px 35px}.closing-head{grid-template-columns:1fr;gap:35px}.closing-label{font-size:10px;margin-bottom:35px}.closing h2{font-size:24vw;line-height:1.02}.closing-note{display:flex;align-items:center;gap:25px}.closing-note>img{width:65px;height:80px;margin:0;flex-shrink:0}.closing-note p{font-size:11px;line-height:1.8;max-width:225px}.closing-mail{margin-top:40px;padding:25px 0;gap:13px}.closing-mail small{font-size:9px}.closing-mail>span:first-child{gap:12px}.closing-mail>span>span{font-size:4.85vw;letter-spacing:-.045em}.mail-arrow{width:43px;height:43px;font-size:23px}.closing-tools{font-size:8px;margin-top:16px}.closing-tools span{margin-left:6px}.site-footer{font-size:8px}.js .intro-loader{border-radius:0 0 8vw 8vw}}
.closing h2>span{margin-left:0;font-size:inherit;color:var(--ink);transition:none}.closing h2>.closing-name{color:#73836b}
@media(any-hover:none){.work-preview,.work-pointer{display:none!important}}
@media print{.intro-loader,.work-preview,.work-pointer,.work-list{display:none!important}}
.preview-frame{height:calc(100% / 6);width:100%;position:relative;overflow:hidden;margin:0;background:#20251f}.preview-frame>img{display:block;width:100%;height:100%;object-fit:cover}.preview-frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 13px 10px;background:linear-gradient(transparent,#141a14bd);color:#fff;font-size:8px;line-height:1.4}.preview-nightjar>img{object-position:center 35%}.preview-zorvane>img{object-fit:contain;background:#1e293b}.preview-barber>img{object-fit:cover}.preview-batch>img{object-fit:cover;object-position:left center}.dialog-caption a{text-decoration:underline;text-underline-offset:3px}.dialog-footer{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.dialog-live{display:inline-flex;align-items:center;padding:20px 28px;border:1px solid var(--line);border-radius:40px;font-size:12px}.dialog-live:hover{background:var(--ink);color:white}.work-list [data-project=nightjar]>img{object-position:center 35%}.work-list [data-project=zorvane]>img{object-fit:cover}.work-list [data-project=batch]>img{object-position:left center}

/* Vector icons keep their shape and colour on every mobile platform. */
.ui-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;overflow:visible;pointer-events:none}
.brand-plus,.index-arrow,.year-arrow{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-plus>.ui-icon,.index-arrow>.ui-icon,.year-arrow>.ui-icon,.hero-arrow>.ui-icon{display:block}
.location-icon>.ui-icon{width:70%;height:70%}
.document-open>.ui-icon,.dialog-live>.ui-icon{margin-left:.35em}
.dialog-close>span>.ui-icon{width:.8em;height:.8em}

/* Reduced motion: no travel, zoom, pinning or perpetual motion. */
.motion-reduced,.motion-off,html.lenis.lenis-smooth{scroll-behavior:auto!important}
.motion-reduced *,.motion-reduced *::before,.motion-reduced *::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}
.motion-reduced .reveal{transform:none!important}
.motion-reduced .name-rail{transform:translateX(-3vw)!important}
.motion-reduced .work-preview,.motion-reduced .work-pointer{display:none!important}
.motion-reduced .hero-photo,.motion-reduced .hero-photo img,.motion-reduced .hero-role,.motion-reduced .hero-role-inner,.motion-reduced .name-marquee,.motion-reduced .location-stamp,.motion-reduced .year-value,.motion-reduced .closing h2>span{transform:none!important;visibility:visible!important}
/* A partial library failure must never leave headings or cards hidden. */
.motion-off .hero-role-inner,.motion-off .location-stamp,.motion-off .name-marquee,.motion-off .index-row,.motion-off .document-card,.motion-off .timeline-item,.motion-off .year-value,.motion-off .closing h2>span,.motion-off .closing-note,.motion-off .closing-mail{opacity:1!important;visibility:visible!important;transform:none!important}
/* A plain-language summary accompanies every project, including desktop rows. */
.index-copy{display:grid;gap:9px;min-width:0}
.index-name{display:block}
.index-summary{display:block;max-width:490px;font-size:13px;line-height:1.55;letter-spacing:0;font-weight:400;color:#5d6557}
.index-row:hover .index-summary{color:var(--ink)}

/* The four useful answers come before the detailed project documentation. */
.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:45px 0 0;padding-top:27px;border-top:1px solid var(--line)}
.project-fact h3{font-size:12px;font-weight:500;letter-spacing:0;margin:0 0 12px;color:#46513f}
.project-fact p{font-size:14px;line-height:1.75;color:#535c4d}
.project-figure{margin:0}
#project-dialog .project-figure .dialog-image{display:block;aspect-ratio:3/2;object-fit:contain;margin:45px 0 0;height:auto}
#project-dialog .project-figure .dialog-caption{font-size:12px;line-height:1.75;color:#535c4d;margin-top:16px;max-width:950px}
.project-documentation{margin-top:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-documentation>summary{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;list-style:none;font-size:14px;cursor:pointer}
.project-documentation>summary::-webkit-details-marker{display:none}
.project-documentation>summary>span{font-size:24px;font-weight:300;transition:transform .25s}
.project-documentation[open]>summary>span{transform:rotate(45deg)}
#project-dialog .project-documentation .dialog-columns{margin:10px 0 35px}
#project-dialog .project-documentation .dialog-evidence{margin:0;padding:28px 0}
@media(min-width:761px) and (max-width:1100px){.project-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 35px}.index-summary{font-size:12px}}
@media(max-width:760px){
 .work-list .index-list{border-top:0}
 .work-list .index-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:20px 14px;min-height:0;padding:0 0 28px;margin:0 0 34px;align-items:start;text-align:left}
 .work-list .index-row:last-child{margin-bottom:0}
 .work-list .index-row>img{display:block;grid-column:1/-1;grid-row:1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#dfe3d9}
 .work-list .index-number,.work-list .index-type{display:none}
 .work-list .index-copy{grid-column:1;grid-row:2;gap:9px}
 .work-list .index-name{font-size:29px;line-height:1.15;letter-spacing:-.05em;overflow-wrap:normal}
 .work-list .index-summary{font-size:15px;line-height:1.6;max-width:34ch}
 .work-list .index-arrow{grid-column:2;grid-row:2;font-size:25px;padding-top:2px;justify-self:end}
 .work-list .index-row:hover .index-name{transform:none;color:var(--ink)}
 .work-list .index-row:focus-visible .index-name{transform:none}
 .work-list [data-project=nightjar]>img{object-position:center}
 .work-list [data-project=zorvane]>img{object-fit:contain;background:#1e293b}
 .work-list [data-project=batch]>img{object-fit:contain;object-position:center;background:#d7d9d1}
 #project-dialog .dialog-intro{font-size:16px;line-height:1.7;color:#535c4d}
 .project-facts{grid-template-columns:1fr;gap:26px;margin-top:30px;padding-top:25px}
 .project-fact h3{font-size:12px;margin-bottom:8px}
 .project-fact p{font-size:15px;line-height:1.75;max-width:42ch}
 #project-dialog .project-figure .dialog-image{margin-top:32px;max-height:none}
 #project-dialog .project-figure .dialog-caption{font-size:12px;line-height:1.75;margin-top:15px}
 .project-documentation{margin-top:32px}
 .project-documentation>summary{font-size:13px;padding:22px 0}
 #project-dialog .project-documentation .dialog-columns{margin:0 0 28px}
 #project-dialog .project-documentation .dialog-columns h3{font-size:23px}
 #project-dialog .project-documentation .dialog-columns p{font-size:15px;line-height:1.75}
 #project-dialog .project-documentation .dialog-evidence p{font-size:13px;line-height:1.75}
 #project-dialog .dialog-contact,#project-dialog .dialog-live{font-size:13px;min-height:48px}
}