/* The opening remains a word-led scroll moment. Projects are independent vertical sections. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.opening{display:block;position:relative;width:100%;max-width:none;min-height:0;margin:0;padding:0;overflow:visible}
.opening-frame{min-height:calc(100svh - var(--header));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:20px;padding-top:22px}
.opening-options{justify-self:end;text-align:right}
.opening-options .motion-toggle{min-height:44px;margin-top:4px;padding-block:10px;white-space:nowrap}
.opening-frame h1{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-self:center;align-items:end;min-width:0;gap:4vw;font-size:clamp(48px,min(9.2vw,16svh),148px);line-height:1.05;margin:0;padding:18px 0}
.opening-frame h1>.opening-primary{min-width:0;transform:translateY(var(--opening-drift,0px))}
.opening-frame h1>.opening-secondary{min-width:0;max-width:100%;justify-self:end;font-size:.42em;line-height:1.14;color:#777771;padding:0;transform:translateY(var(--opening-counter,0px))}
.opening-line{display:block;white-space:nowrap}
.opening-word-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.18em;margin-bottom:-.18em}
.opening-word{display:inline-block}
.opening-frame .opening-footer{margin:0;padding-block:19px 24px}
html.opening-ready .opening{height:calc(170svh - var(--header))}
html.opening-ready .opening-frame{position:sticky;top:var(--header);height:calc(100svh - var(--header));overflow:clip}
html.opening-ready .opening-word{transform:translate3d(var(--word-x,0px),var(--word-y,112%),0);opacity:var(--word-opacity,0);will-change:transform,opacity}

/* A new project starts with a name, a brief and a change of pace. */
.independent-projects{margin-top:0}
.project-chapter{position:relative;padding-block:clamp(65px,7vw,115px);scroll-margin-top:var(--header);overflow:clip}
.project-chapter+.project-chapter{margin-top:0}
.project-chapter h2,.project-chapter h3,.editorial-thought,.project-deck{font-family:SuisseBodoni,Georgia,serif;font-weight:400;letter-spacing:-.025em}
.chapter-heading{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:6vw;align-items:end;margin-bottom:clamp(45px,6vw,90px)}
.chapter-heading .folio{font-size:12px;color:var(--grey);margin-bottom:22px}
.chapter-heading h2{font-size:clamp(56px,7.7vw,116px);line-height:.98;max-width:100%}
.chapter-summary{max-width:390px;padding-bottom:4px;font-size:16px;line-height:1.55}
.chapter-summary .text-link{margin-top:23px}
.project-chapter figure{margin:0;min-width:0}
.project-chapter figcaption{font-size:12px;line-height:1.5;color:var(--grey);padding-top:17px}
.project-chapter img{display:block;width:100%;height:auto;max-width:100%}
.chapter-end{display:flex;justify-content:flex-end;margin-top:50px}
.editorial-thought{font-size:clamp(42px,6vw,85px);line-height:1.04;letter-spacing:-.025em}
.source-crop{display:block;max-width:100%;width:100%;height:auto;overflow:hidden}

/* Glaswegin gets its own dark opening and a full second photographic view. */
.project-glaswegin{padding-top:75px;padding-bottom:0;background:#272729;color:#f9f9f7;--grey:#c0c0bb;--line:#666662}
.glas-editorial{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6vw;align-items:center;padding-bottom:70px}
.glas-introduction .folio{font-size:12px;color:var(--grey);margin-bottom:35px}
.glas-introduction h2{font-size:clamp(66px,10vw,160px);line-height:.94;margin-bottom:40px;letter-spacing:-.04em}
.project-deck{font-size:clamp(38px,5vw,74px);line-height:1.02;margin:0 0 30px}
.project-description{max-width:370px;font-size:16px;line-height:1.55;color:#c0c0bb;margin:0}
.glas-introduction .text-link{margin-top:28px}
.glas-studio-dark{max-width:590px;justify-self:end;width:100%}
.glas-studio-dark img{max-height:81svh;object-fit:contain;mask-image:linear-gradient(to bottom,#000 94%,transparent)}
.glas-studio-dark figcaption{color:#c0c0bb}
.glas-second-view{background:#eeece6;color:var(--ink);--grey:#686866;padding-bottom:38px}
.glas-studio-light{width:100%;overflow:hidden}
.glas-studio-light img{width:100%;height:auto}
.glas-closing{display:flex;justify-content:space-between;align-items:start;gap:35px;padding-top:34px;font-size:16px;line-height:1.45}
.glas-closing>p:last-child{font-size:12px;color:var(--grey);margin:0;text-align:right}

/* Pictii follows the white-page presentation and original PDF compositions. */
.project-pictii{background:#fff;--grey:#777;--line:#bbb}
.project-pictii .chapter-heading{max-width:1330px}

/* Industrial scale, followed by three clear physical details. */
.project-museum{background:#e8e7e0}
.museum-establishing img{width:100%;height:auto}
.museum-details{display:grid;grid-template-columns:.8fr 1fr 1.3fr;gap:clamp(22px,4vw,65px);align-items:end;margin-top:70px}
.museum-details figure{display:grid;grid-template-rows:minmax(0,1fr) auto}
.museum-details .source-crop{width:100%;height:clamp(260px,34vw,470px)}

/* Colin Gray is a separate typographic pause. */
.project-colin{background:var(--paper);border-block:1px solid var(--line)}
.gray-discovery{padding-block:clamp(65px,9vw,140px);text-align:center;overflow:hidden}
.gray-discovery .photo-word{font-family:SuisseBodoni,Georgia,serif;font-size:clamp(42px,11.1vw,178px);line-height:1.2;letter-spacing:-.045em;justify-content:center}
.gray-discovery .photo-word span:not(.kept){color:#999992}
.gray-explanation{font-size:12px;margin-top:30px;color:var(--grey)}
.gray-original{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:7vw;align-items:center;padding-top:40px;border-top:1px solid var(--line)}
.gray-original img{mix-blend-mode:multiply}

/* A book can be understood without waiting for photographs to replace one another. */
.project-books{background:#e8e8e2}
.book-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:7vw;align-items:center}
.book-feature figure,.book-spreads figure{mix-blend-mode:multiply}
.book-feature h3{font-size:clamp(40px,4.5vw,70px);line-height:1.04;margin:20px 0 28px}
.book-feature>div{max-width:380px;font-size:16px;line-height:1.55}
.book-feature>div>.folio{font-size:12px;color:var(--grey)}
.book-spreads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:start;margin-top:85px}
.book-spreads strong{font-weight:400;color:var(--ink)}
.book-spreads figcaption{max-width:390px;padding-top:24px}

/* The cars keep their full silhouettes and a clean page behind them. */
.project-peugeot{background:#ededeb}
.car-front{max-width:1250px}
.car-front img{width:100%;max-height:75svh;object-fit:contain}
.car-second{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr);gap:6vw;align-items:center;margin-top:80px}
.car-second img{width:100%;height:auto}

.project-suissemas{background:#191919;color:#f9f9f7;--grey:#b8b8b1;--line:#555}
.suissemas-composition{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:10vw;align-items:center}
.suissemas-tool{max-width:290px;width:100%}
.suissemas-flake{max-width:600px;width:100%;justify-self:end}
.suissemas-composition figcaption{color:var(--grey)}
.project-fingerprint{background:var(--paper);border-top:1px solid var(--line)}
.fingerprint-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:11vw;align-items:center}
.fingerprint-composition figure{max-width:580px;mix-blend-mode:multiply}
.fingerprint-composition .text-link{margin-top:35px}

@media(max-width:900px){
 .opening-frame h1{grid-template-columns:minmax(0,1fr);gap:28px;font-size:clamp(48px,min(9.2vw,13svh),100px)}
 .opening-frame h1>.opening-secondary{font-size:.48em}
 .chapter-heading{grid-template-columns:minmax(0,1fr);gap:28px}
 .chapter-heading h2{font-size:clamp(52px,9vw,82px)}
 .chapter-summary{max-width:540px;font-size:15px}
 .chapter-summary .text-link{margin-top:17px}
 .glas-editorial{gap:4vw;grid-template-columns:1fr 1fr}
 .glas-introduction h2{font-size:9vw;margin-bottom:30px}
 .project-deck{font-size:4.8vw}
 .project-description{font-size:14px}
 .museum-details{gap:24px}
 .museum-details .source-crop{height:290px}
 .gray-original{grid-template-columns:1.4fr 1fr;gap:40px}
 .gray-original .editorial-thought{font-size:43px}
 .book-feature{gap:35px;grid-template-columns:1.1fr 1fr}
 .book-feature h3{font-size:42px}
 .book-feature>div{font-size:14px}
}
@media(max-width:600px){
 .opening-frame{gap:16px;padding-top:18px}
 .opening-frame h1{font-size:clamp(44px,min(14.6vw,12svh),86px);gap:25px;padding-block:12px}
 .opening-frame .opening-footer{grid-template-columns:1fr auto;font-size:11px;padding-block:16px 20px}
 .independent-projects{margin-top:0}
 .project-chapter{padding-block:50px}
 .project-chapter+.project-chapter{margin-top:0}
 .chapter-heading{gap:24px;margin-bottom:38px}
 .chapter-heading h2{font-size:clamp(46px,12vw,70px)}
 .chapter-heading .folio{font-size:10px;margin-bottom:17px}
 .chapter-summary{font-size:15px;line-height:1.5}
 .project-chapter figcaption{font-size:11px}
 .chapter-end{margin-top:30px;justify-content:flex-start}
 .glas-editorial{display:flex;flex-direction:column;align-items:stretch;gap:40px;padding-bottom:45px}
 .glas-introduction .folio{font-size:10px;margin-bottom:25px}
 .glas-introduction h2{font-size:clamp(68px,17vw,100px);margin-bottom:28px}
 .project-deck{font-size:clamp(38px,10vw,55px);margin-bottom:22px}
 .project-description{max-width:350px;font-size:15px}
 .glas-studio-dark{max-width:430px;align-self:center}
 .glas-studio-dark img{max-height:70svh}
 .project-glaswegin{padding-bottom:0}
 .glas-studio-light img{height:68svh;max-height:620px;object-fit:cover;object-position:36% center}
 .glas-closing{padding-top:25px;flex-direction:column;gap:20px;font-size:16px}
 .glas-closing>p:last-child{text-align:left;font-size:10px}
 .museum-details{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:42px}
 .museum-details .source-crop{height:auto;max-height:65svh}
 .museum-details figure{max-width:420px;width:100%;margin-inline:auto}
 .gray-discovery{padding-block:55px}
 .gray-discovery .photo-word{font-size:10.2vw;letter-spacing:-.055em}
 .gray-explanation{font-size:10px;line-height:1.4}
 .gray-original{grid-template-columns:minmax(0,1fr);gap:35px;padding-top:30px}
 .gray-original .editorial-thought{font-size:clamp(40px,11vw,57px)}
 .book-feature{display:flex;flex-direction:column;align-items:stretch;gap:35px}
 .book-feature h3{font-size:42px;margin-top:17px}
 .book-feature>div{max-width:100%;font-size:15px}
 .book-spreads{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:50px}
 .car-front img{max-height:none}
 .car-second{grid-template-columns:minmax(0,1fr);gap:35px;margin-top:55px}
 .car-second .editorial-thought{font-size:45px}
 .suissemas-composition{grid-template-columns:minmax(0,1fr);gap:60px}
 .suissemas-tool{max-width:180px}
 .suissemas-flake{max-width:460px}
 .fingerprint-composition{grid-template-columns:minmax(0,1fr);gap:40px}
 .fingerprint-composition figure{max-width:420px;margin-inline:auto}
 .fingerprint-composition .editorial-thought{font-size:clamp(44px,12vw,64px)}
 .work-pair .image-link,.archive-image{width:100vw;margin-left:calc(-1*var(--gutter));max-width:none}
 .archive-image{padding:0;aspect-ratio:1}.archive-image img{max-width:none}
}
@media(max-height:650px){.opening-frame h1{padding-block:8px;gap:18px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="on"]) .opening-primary,html:not([data-motion="on"]) .opening-secondary{transform:none!important}}
.project-chapter figure.wrap{margin-inline:auto}

/* Parallax has room within each project; there are no spacer panels between projects. */
.glas-studio-light .glas-photo-canvas{--ms:1.045}
.glas-studio-light{overflow:hidden}
.glas-introduction,.book-feature>div,.fingerprint-composition>div{align-self:start;position:sticky;top:calc(var(--header) + 35px)}
.glas-editorial,.book-feature,.fingerprint-composition{align-items:start}
.glas-introduction{margin-top:clamp(0px,3vw,45px)}
.work-pair{padding-block:75px 90px}
@media(max-width:900px){
 .glas-introduction,.book-feature>div,.fingerprint-composition>div{position:static;top:auto}
 .glas-introduction{margin-top:0}
 .work-pair{padding-block:55px 65px}
}