/* A photographic guide accompanies the work, with ordinary vertical scrolling. */
.walkthrough{--paper:#f3f2ec;--ink:#20251f;--blue:#304bd4;background:var(--paper)}
.walkthrough .site-header{position:absolute;top:0;left:0;right:0;margin:0;padding:0 var(--pad);border:0;color:#f7f7ee;height:100px;z-index:10}
.walkthrough .site-header .brand-plus{color:inherit}
.walkthrough .site-header nav{gap:30px}
.walkthrough .site-header nav>a:hover{color:#d1dbb8}
.tour-hero{position:relative;min-height:800px;height:100svh;max-height:1150px;background:var(--blue);color:#f7f7ed;padding:185px var(--pad) 95px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tour-title{font-size:clamp(72px,7.6vw,122px);font-weight:450;line-height:1.05;letter-spacing:-.055em;word-spacing:.04em;max-width:64%;position:relative;z-index:2}
.tour-title-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.tour-title-line>span{display:block}
.tour-title-line em{color:#d4deb9}
.tour-companion{position:fixed;left:0;top:0;width:420px;z-index:5;pointer-events:none;will-change:transform;transition:opacity .3s}
.tour-companion.is-away{opacity:0;pointer-events:none}
.tour-speech{position:absolute;left:0;top:0;width:300px;min-height:80px;padding:22px 24px;margin:0;background:#f9f8f0;color:#20251f;border-radius:14px;box-shadow:2px 3px 0 #1a24131c;pointer-events:auto}
.tour-speech:after{content:"";position:absolute;bottom:-13px;left:50%;border-top:15px solid #f9f8f0;border-left:13px solid transparent;border-right:13px solid transparent}
.tour-speech p{font-size:16px;letter-spacing:-.025em;line-height:1.5;font-weight:500}
.tour-person{position:relative;width:100%;height:auto;aspect-ratio:1 / 1.42;display:block;pointer-events:auto;cursor:pointer;transform-origin:0 0}
.person-motion{position:absolute;inset:0;display:block;width:100%;height:100%;transform-origin:50% 95%}
.tour-person img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .4s;pointer-events:none}
.tour-person .pose-point{transform:translateX(14%)}
.tour-companion[data-pose=wave] .pose-wave,.tour-companion[data-pose=point] .pose-point{opacity:1}
.tour-companion[data-pose=left] .pose-left,.tour-companion[data-pose=think] .pose-think,.tour-companion[data-pose=ready] .pose-ready{opacity:1}
.tour-person .pose-left{transform:translateX(-7%)}
.tour-person.is-waving .person-motion{animation:andiGreeting .65s ease-in-out 2 alternate}
@keyframes andiGreeting{from{transform:rotate(-1.3deg)}to{transform:rotate(1.3deg)}}
.tour-intro{position:relative;padding:70px var(--pad);height:100svh;min-height:440px;display:flex;align-items:center;background:var(--paper)}
.tour-intro h2{font-size:clamp(29px,3.6vw,56px);line-height:1.35;letter-spacing:-.045em;word-spacing:.04em;font-weight:400;margin-left:38%;max-width:23ch}
.tour-intro h2>.intro-word{display:inline-block;color:var(--ink)}
.tour-chapter{position:relative;min-height:100svh;padding:95px var(--pad) 100px;display:flex;align-items:center;overflow:hidden;--chapter-ink:#f0f2e8;background:#53675e;color:var(--chapter-ink)}
.tour-chapter.chapter-nightjar{background:#1c2429}
.tour-chapter.chapter-barber{background:#d9cfbe;--chapter-ink:#25251f}
.tour-chapter-content{margin-left:34%;width:66%;min-width:0}
.tour-chapter[data-guide-side=right] .tour-chapter-content{margin-left:0;margin-right:34%}
.tour-chapter .tour-open.index-row{display:block;min-height:0;padding:0;border:0;width:100%;color:inherit}
.tour-project-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;margin-bottom:22px;color:inherit;opacity:.75}
.tour-project-title{font-size:clamp(44px,5.2vw,83px);font-weight:400;line-height:1.1;letter-spacing:-.05em;word-spacing:.06em;margin-bottom:17px;overflow:hidden;padding-bottom:.1em}
.tour-project-title>span{display:block;transform-origin:left bottom}
.tour-project-summary{display:block;font-size:14px;line-height:1.6;max-width:40ch;color:inherit;opacity:.8;margin-bottom:35px;letter-spacing:-.015em}
.tour-picture{position:relative;overflow:hidden;width:100%;aspect-ratio:3/2;background:#40534c;perspective:1400px;isolation:isolate}
.tour-image-depth{position:relative;width:100%;height:100%;overflow:hidden;transform-origin:center;backface-visibility:hidden}
.tour-media-float{position:relative;width:100%}
.tour-image-depth>img{height:100%;width:100%;object-fit:cover;transform-origin:center}
.chapter-nightjar .tour-picture{background:#131b1e}
.chapter-nightjar .tour-image-depth>img{object-position:center 35%}
.tour-read{display:flex;justify-content:space-between;align-items:center;min-height:66px;font-size:12px;border-bottom:1px solid #ffffff42;margin-top:16px}
.chapter-barber .tour-read{border-color:#25251f45}
.tour-read-text{display:block;position:relative;line-height:1.4;overflow:hidden}
.tour-read-text>span{display:block;transition:transform .55s var(--ease)}
.tour-read-text>span:last-child{position:absolute;left:0;top:100%}
.tour-read-arrow{display:grid;place-items:center;position:relative;width:45px;height:45px;border:1px solid #ffffff55;border-radius:50%;isolation:isolate;overflow:hidden;flex-shrink:0}
.tour-read-arrow:before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--chapter-ink);transform:translateY(105%);transition:transform .45s var(--ease);z-index:-1}
.tour-read-arrow .ui-icon{font-size:20px;transition:color .4s,transform .45s var(--ease)}
.chapter-barber .tour-read-arrow{border-color:#25251f55}
@media(any-hover:hover) and (any-pointer:fine){
 .tour-open:hover .tour-read-text>span{transform:translateY(-100%)}
 .tour-open:hover .tour-read-arrow:before{transform:translateY(0)}
 .tour-open:hover .tour-read-arrow .ui-icon{color:#29342c;transform:rotate(45deg)}
 .chapter-barber .tour-open:hover .tour-read-arrow .ui-icon{color:#f4f0e7}
 .walkthrough .site-header nav>a{position:relative;padding:9px 0}
 .walkthrough .site-header nav>a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
 .walkthrough .site-header nav>a:hover:after{transform:scaleX(1);transform-origin:left}
}
.tour-open:focus-visible{outline:2px solid currentColor;outline-offset:10px}
.tour-inline-note{display:none}
.walkthrough .work-list{padding:110px var(--pad);margin-left:34%;max-width:none}
.walkthrough .work-list-heading{margin-bottom:45px}
.walkthrough .work-list h2{font-size:clamp(34px,3.6vw,57px)}
.walkthrough .work-list .index-row{grid-template-columns:25px minmax(0,1fr) 23px;gap:20px;padding:28px 0;min-height:150px}
.walkthrough .work-list .index-name{font-size:clamp(24px,2.9vw,46px)}
.walkthrough .work-list .index-type{display:none}
.walkthrough .work-list .index-summary{font-size:12px;line-height:1.6;max-width:36ch}
.walkthrough .documents{padding-left:38%;padding-right:var(--pad);background:#e5e7de}
.walkthrough .documents-heading h2{font-size:clamp(35px,3.8vw,60px)}
.walkthrough .document-grid{gap:25px}
.walkthrough .document-label h3{font-size:clamp(24px,2.8vw,41px)}
.walkthrough .journey{padding-left:38%}
.walkthrough .journey[data-guide-side=right]{padding-left:var(--pad);padding-right:38%}
.walkthrough .journey>h2{font-size:clamp(45px,5vw,78px);word-spacing:.07em}
.walkthrough .timeline{display:block;padding:0;margin-top:60px}
.walkthrough .timeline-track{display:none}
.walkthrough .timeline-item:before{display:none}
.walkthrough .timeline-item{display:grid;grid-template-columns:130px minmax(0,1fr);gap:13px 32px;border-top:1px solid #c8cebf;padding:30px 0 36px;margin:0;transition:color .4s;transform:none}
.walkthrough .timeline-year{font-size:58px;margin:0;grid-row:1/3;align-self:start;line-height:1.1}
.walkthrough .timeline-year>.year-arrow{display:none}
.walkthrough .timeline h3{font-size:24px;margin:2px 0 0}
.walkthrough .timeline p{font-size:14px;max-width:36ch;color:#606b56}
.walkthrough .timeline-item.is-current .timeline-year{color:var(--blue)}
.walkthrough .journey-pinned .timeline{margin-top:45px}
.walkthrough .journey-pinned .timeline-item{opacity:1;transform:none}
.walkthrough .journey-pinned>h2{margin-top:35px}
.walkthrough .contact.closing{padding-left:38%;padding-right:var(--pad);background:#d7decb}
.walkthrough .closing-head{display:block}
.walkthrough .closing h2{font-size:clamp(75px,8.5vw,140px)}
.walkthrough .closing-note{margin-top:35px;max-width:350px}
.walkthrough .closing-note>img{display:none}
.walkthrough .closing-note p{font-size:14px;max-width:none}
.walkthrough .closing-mail{margin-top:45px}
.walkthrough .closing-mail>span>span{font-size:clamp(18px,2.4vw,36px)}
.walkthrough .mail-arrow{width:50px;height:50px;font-size:23px}
.walkthrough .site-footer{padding-left:38%;position:relative;background:#d7decb;z-index:6}
.walkthrough .intro-loader{background:#f3f2ec;color:#20251f;border-radius:0;overflow:hidden}
.loader-lockup{display:flex;align-items:center;gap:24px}
.loader-name{display:flex;gap:.25em;font-size:clamp(35px,5vw,76px);letter-spacing:-.055em;line-height:1.15}
.walkthrough .loader-word{font:inherit;line-height:inherit;padding:0 .025em .12em;letter-spacing:inherit}
.walkthrough .loader-word>span{opacity:0;transform:translateY(120%);animation:none}
.loader-mark{display:block;width:46px;height:46px;color:var(--blue);margin-top:-.12em}
.loader-mark svg{display:block;width:100%;height:100%}
.walkthrough .loader-dot{color:var(--blue)}
.walkthrough .work-preview{z-index:30}
.walkthrough .work-pointer{z-index:31}
.tour-skills{position:relative;padding:110px var(--pad) 115px;background:#e9eaf0;color:var(--ink)}
.skills-content{width:66%;max-width:920px}
.skills-eyebrow{display:block;font-size:12px;margin-bottom:32px;color:#596173}
.skills-heading h2{font-size:clamp(42px,5.3vw,83px);font-weight:400;line-height:1.08;letter-spacing:-.055em;word-spacing:.07em}
.skills-heading h2>span{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.skills-heading h2>span:last-child{color:var(--blue)}
.skills-heading>p{font-size:16px;line-height:1.65;max-width:32ch;margin-top:32px;color:#596173}
.skills-ledger{margin-top:65px}
.skill-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:24px;padding:38px 0 42px;border-top:1px solid #bfc4cd}
.skill-index{font-size:11px;color:#596173;padding-top:8px;font-variant-numeric:tabular-nums}
.skill-main h3{font-size:clamp(26px,3.1vw,45px);font-weight:400;letter-spacing:-.045em;line-height:1.15}
.skill-tools{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px 20px;margin:22px 0 20px}
.skill-tools li{font-size:13px;font-weight:550;letter-spacing:-.02em}
.skill-tools li:not(:last-child):after{content:'/';margin-left:20px;color:#979eac;font-weight:400}
.skill-main>p{font-size:15px;line-height:1.75;color:#586172;max-width:51ch}
.skill-project{font-size:13px;line-height:1.5;display:inline-flex;align-items:center;gap:18px;margin-top:24px;padding-bottom:6px;border-bottom:1px solid #9ea8c2;color:#3047b8}
.skill-project .ui-icon{width:18px;height:18px;transition:transform .4s var(--ease)}
.skill-project:hover .ui-icon{transform:translate(3px,-3px)}
.skill-project:focus-visible,.skill-notes summary:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.skill-notes{margin-top:24px;max-width:51ch}
.skill-notes summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:13px;color:#3047b8;line-height:1.6}
.skill-notes summary::-webkit-details-marker{display:none}
.skill-notes summary>svg{width:20px;height:20px;flex-shrink:0;transition:transform .35s var(--ease)}
.skill-notes[open] summary>svg{transform:rotate(45deg)}
.skill-notes>div{overflow:hidden}
.skill-notes p{font-size:14px;line-height:1.75;padding-top:17px;color:#586172}
.skills-footnote{margin:20px 0 0 56px;font-size:14px;line-height:1.75;max-width:40ch;color:#596173}
.skills-footnote>img{display:none}
.motion-reduced .tour-person{animation:none}
.motion-off .tour-title-line>span,.motion-off .person-motion,.motion-off .tour-project-title>span,.motion-off .tour-project-meta,.motion-off .tour-project-summary,.motion-off .tour-picture,.motion-off .tour-image-depth,.motion-off .tour-image-depth>img,.motion-off .tour-read,.motion-off .timeline .year-value,.motion-off .timeline h3,.motion-off .timeline p{opacity:1!important;visibility:visible!important;transform:none!important;clip-path:none!important}
.motion-off .intro-word{color:var(--ink)!important}
.motion-off .site-header,.motion-off .tour-speech p{opacity:1!important;transform:none!important}
@media(min-width:1700px){.tour-title{font-size:116px}.tour-hero{padding-top:200px}}
@media(max-width:1100px) and (min-width:761px){.tour-title{font-size:7.6vw;max-width:65%}.tour-hero{min-height:730px}.tour-companion .tour-speech{padding:17px;width:260px}.tour-speech p{font-size:14px}.tour-intro{padding-top:65px;padding-bottom:65px}.tour-chapter{padding-top:80px;padding-bottom:80px}.tour-project-title{font-size:5vw}.walkthrough .document-grid{grid-template-columns:1fr}.walkthrough .documents-heading h2{font-size:36px}.walkthrough .timeline-year{font-size:42px}.walkthrough .timeline h3{font-size:18px}.walkthrough .timeline p{font-size:12px}}
@media(max-width:760px){
 .walkthrough .site-header{height:85px;padding:0 24px}
 .walkthrough .mobile-menu{background:#f8f8ee;color:#252a20;backdrop-filter:none;border:1px solid #20251f14;box-shadow:0 3px 14px #14201409}
 .walkthrough .mobile-menu>span{background:currentColor}
 .tour-hero{height:100svh;min-height:760px;max-height:none;padding:140px 24px 0;justify-content:flex-start}
 .tour-title{font-size:clamp(40px,11.3vw,74px);max-width:100%;line-height:1.07}
 .tour-title-line:nth-child(3){margin-top:10px}
 .tour-companion{position:absolute!important;top:auto;bottom:-55px;left:auto;right:12px;width:min(330px,82vw)!important;transform:none!important;z-index:4}
 .tour-speech{position:relative;width:auto;padding:17px 20px;min-height:0;margin-bottom:13px;border-radius:13px;transform:none!important}
 .tour-speech p{font-size:14px;line-height:1.5}
 .tour-person{aspect-ratio:1/1.35}
 .tour-person .pose-point{transform:none}
 .tour-intro{padding:65px 24px;min-height:440px}
 .tour-intro h2{margin:0;font-size:26px;line-height:1.4;max-width:27ch}
 .tour-chapter{min-height:0;padding:55px 24px 50px;display:block}
 .tour-chapter-content,.tour-chapter[data-guide-side=right] .tour-chapter-content{margin:0;width:100%}
 .tour-project-meta{font-size:10px;gap:20px;margin-bottom:20px;align-items:flex-start;padding-right:53px}
 .tour-project-meta>span:last-child{text-align:right;max-width:17ch}
 .tour-project-title{font-size:11.5vw;margin-bottom:15px}
 .tour-project-summary{font-size:15px;line-height:1.6;margin-bottom:26px;max-width:31ch}
 .tour-picture{aspect-ratio:3/2;margin:0 -8px;width:calc(100% + 16px)}
 .tour-read{font-size:14px;min-height:58px;margin-top:10px}
 .tour-read-arrow{width:38px;height:38px}
 .tour-read-arrow .ui-icon{font-size:18px}
 .tour-inline-note{display:flex;align-items:center;gap:14px;margin-top:30px}
 .tour-inline-note>img{height:105px;width:76px;object-fit:contain;align-self:flex-end}
 .tour-inline-note>p{font-size:15px;line-height:1.65;max-width:27ch}
 .walkthrough .work-list{margin:0;padding:65px 24px 50px}
 .walkthrough .work-list h2{font-size:10vw}
 .walkthrough .work-list-heading{margin-bottom:35px}
 .walkthrough .work-list .index-row{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:0 16px;min-height:0;padding:0 0 30px;margin-bottom:28px}
 .walkthrough .work-list .index-row>img{display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:22px}
 .walkthrough .work-list .index-number{position:absolute;top:auto;bottom:11px;left:0;right:auto;font-size:9px}
 .walkthrough .work-list .index-name{font-size:28px;line-height:1.2}
 .walkthrough .work-list .index-summary{font-size:15px;max-width:none;margin-top:9px}
 .walkthrough .work-list .index-arrow{align-self:start;margin-top:4px;font-size:22px}
 .walkthrough .documents{padding:55px 24px 60px}
 .walkthrough .documents-heading h2{font-size:10vw}
 .walkthrough .document-grid{gap:24px}
 .walkthrough .document-label h3{font-size:30px}
 .walkthrough .journey,.walkthrough .journey[data-guide-side=right]{padding:55px 24px 70px}
 .walkthrough .journey>h2{font-size:12vw}
 .walkthrough .timeline{display:block;margin-top:45px}
 .walkthrough .timeline-item{display:block;margin-bottom:0;padding:28px 0 30px 74px;position:relative;min-height:80px}
 .walkthrough .timeline-year{font-size:28px;position:absolute;left:0;top:28px;line-height:1.3;letter-spacing:-.05em}
 .walkthrough .timeline-year>.year-arrow{display:none}
 .walkthrough .timeline h3{font-size:21px;margin-bottom:12px}
 .walkthrough .timeline p{font-size:15px;max-width:none}
 .walkthrough .contact.closing{padding:55px 24px 35px}
 .walkthrough .closing h2{font-size:22vw}
 .walkthrough .closing-note{margin-top:30px;display:flex;align-items:center;gap:18px}
 .walkthrough .closing-note>img{display:block;width:76px;height:125px;object-fit:contain;flex-shrink:0;border-radius:0}
 .walkthrough .closing-note p{font-size:15px;max-width:29ch}
 .walkthrough .closing-mail{margin-top:35px;gap:10px}
 .walkthrough .closing-mail>span>span{font-size:clamp(16px,5vw,20px);line-height:1.45}
 .walkthrough .mail-arrow{width:40px;height:40px;font-size:21px}
 .walkthrough .site-footer{padding:22px 24px}
 .loader-lockup{gap:14px}
 .loader-mark{width:29px;height:29px}
 .loader-name{font-size:clamp(29px,8.8vw,52px)}
 .tour-skills{padding:60px 24px 65px}
 .skills-content{width:100%;max-width:none}
 .skills-eyebrow{font-size:12px;margin-bottom:26px}
 .skills-heading h2{font-size:11.5vw}
 .skills-heading>p{font-size:15px;margin-top:25px}
 .skills-ledger{margin-top:42px}
 .skill-row{grid-template-columns:21px minmax(0,1fr);gap:12px;padding:27px 0 32px}
 .skill-main h3{font-size:27px;line-height:1.2;overflow-wrap:normal}
 .skill-index{padding-top:5px;font-size:10px}
 .skill-tools{gap:8px 13px;margin:20px 0 16px}
 .skill-tools li{font-size:12px}
 .skill-tools li:not(:last-child):after{margin-left:13px}
 .skill-main>p{font-size:15px;line-height:1.7}
 .skill-notes summary,.skill-project{font-size:13px}
 .skill-notes p{font-size:14px}
 .skills-footnote{display:flex;align-items:center;gap:18px;margin:20px 0 0;font-size:14px;max-width:none}
 .skills-footnote>img{display:block;width:76px;height:120px;object-fit:contain;flex-shrink:0}
}
@media(max-width:360px){.tour-hero{padding-top:140px;min-height:760px}.tour-companion{right:10px}.tour-title{font-size:11.2vw}.tour-speech p{font-size:14px}.tour-intro h2{font-size:24px}.tour-inline-note>p{font-size:15px}.tour-inline-note>img{width:65px}.walkthrough .timeline-item{padding-left:65px}.walkthrough .timeline-year{font-size:25px}}
@media print{.tour-companion,.tour-inline-note,.tour-hero,.tour-intro,.tour-chapter{display:none!important}}