/* The photographs lead; each chapter changes the rhythm. */
.portfolio {padding:0}
.portfolio-intro {position:relative;padding-top:100px;padding-bottom:95px}
.portfolio-intro h2 {font-size:clamp(70px,10.2vw,160px);line-height:.99;margin-top:35px;max-width:75%}
.portfolio-aside {position:absolute;right:7%;top:46%;font-size:15px;line-height:1.7;max-width:260px}
/* Keep the introduction together even when the screen is much wider than its text. */
@media(min-width:1101px) {
 .portfolio-intro {display:grid;grid-template-columns:max-content minmax(0,320px);gap:35px clamp(48px,5vw,96px);align-items:center}
 .portfolio-intro>.eyebrow {grid-column:1/-1}
 .portfolio-intro h2 {max-width:none;margin-top:0}
 .portfolio-aside {position:static;max-width:320px;font-size:clamp(17px,1vw,20px);line-height:1.65}
}
.little-star {display:block;font-size:46px;line-height:1;color:#737f61;margin-bottom:22px}
.handwritten,.chapter-scribble,.photo-annotation {font:italic 22px/1.3 var(--serif);letter-spacing:-.025em}
.handwritten {display:block;margin-top:22px;transform:rotate(-5deg)}
.album {background:#f0f1eb;position:relative}
.album-pin {position:relative;isolation:isolate}
.album-topline {display:flex;justify-content:space-between;padding:30px var(--gutter);font-size:10px;text-transform:uppercase;letter-spacing:.16em;position:relative;z-index:5}
.album-chapter {position:relative;min-height:790px;padding:75px var(--gutter)}
.chapter-copy {position:absolute;left:var(--gutter);top:23%;width:30%;z-index:3}
.chapter-copy h3 {font-size:clamp(65px,8.7vw,140px);line-height:.95;margin:27px 0}
.chapter-copy>p:last-child {font-size:15px;line-height:1.7}
.chapter-photos {position:absolute;left:34%;top:0;width:62%;height:100%}
.album-photo {position:absolute;background:white;padding:9px 9px 0;box-shadow:0 14px 35px #2530260e}
.album-photo .photo-button {aspect-ratio:2/3;background:#e7e9e0}
.album-photo img {object-position:50% 25%}
.album-photo figcaption {font:italic 12px/1.4 var(--serif);padding:12px 3px 15px;color:#565d4e}
.photo-main {width:46%;left:37%;top:15%;transform:rotate(4deg);z-index:2}
.photo-side {width:30%;left:2%;top:37%;transform:rotate(-7deg);z-index:3}
.chapter-scribble {position:absolute;left:38%;bottom:12%;transform:rotate(-6deg);color:#6e775d}
.chapter-two .photo-main {width:82%;left:6%;top:14%;transform:rotate(-3deg)}
.chapter-two .photo-main .photo-button,.chapter-two .photo-side .photo-button {aspect-ratio:3/2}
.chapter-two .photo-main img {object-position:50% 30%}
.chapter-two .photo-side {width:42%;left:53%;top:58%;transform:rotate(7deg)}
.chapter-two .chapter-scribble {left:7%;bottom:17%;transform:rotate(-5deg)}
.chapter-three .photo-main {width:43%;left:4%;top:15%;transform:rotate(-4deg)}
.chapter-three .photo-side {width:45%;left:52%;top:38%;transform:rotate(6deg)}
.chapter-three .photo-side .photo-button {aspect-ratio:3/2}
.chapter-three .chapter-scribble {left:52%;bottom:17%;transform:rotate(4deg)}
.album-nav {display:flex;gap:28px;padding:24px var(--gutter);position:relative;z-index:5}
.album-nav button {font-size:12px;background:none;padding:10px 0;color:#727969;border-bottom:1px solid transparent}
.album-nav span {font-size:10px;margin-right:8px}
.album-nav button[aria-current=true] {border-color:var(--olive);color:var(--ink)}
.album-scroll {position:absolute;right:var(--gutter);bottom:40px;font:italic 14px var(--serif)}
.album-progress {display:none;position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--olive);transform:scaleX(var(--album-progress,0));transform-origin:left}
.album-photo .photo-button:hover img {transform:scale(1.02)}
@media(min-width:901px) and (min-height:651px){
 .js:not(.reduced-motion) .album {height:280svh}
 .js:not(.reduced-motion) .album-pin {position:sticky;top:0;height:100svh;min-height:650px;overflow:clip}
 .js:not(.reduced-motion) .album-chapter {position:absolute;inset:0;min-height:0;padding:0;will-change:transform,opacity}
 .js:not(.reduced-motion) .album-chapter:not(:first-of-type) {opacity:0;visibility:hidden}
 .js:not(.reduced-motion) .album-nav {position:absolute;bottom:19px;left:0}
 .js:not(.reduced-motion) .album-progress {display:block}
 .album-topline {padding-top:116px}
 .photo-main {width:min(46%,calc(48svh - 50px))}
 .photo-side {width:min(30%,30svh)}
 .chapter-three .photo-main {width:min(43%,calc(48svh - 50px))}
 .chapter-two .photo-main {width:min(82%,70svh)}
 .chapter-two .photo-side {width:min(42%,42svh)}
 .chapter-three .photo-side {width:45%}
}
/* Fifteen complete photographs, laid out like loose prints between chapters. */
.memory-sequence {padding:85px 0 55px;background:#fff;overflow:clip}
.memory-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:0 var(--gutter)}
.memory-heading h2 {font-size:clamp(40px,4.6vw,70px);margin-top:18px;line-height:1.12}
.memory-heading .eyebrow {font-size:10px;letter-spacing:.14em}
.memory-description {font-size:14px;color:var(--muted);margin-top:20px}
.memory-track {display:flex;align-items:flex-start;gap:22px;padding:55px var(--gutter) 60px}
.memory-print {flex:var(--ratio) 1 0%;min-width:0;position:relative;translate:0 var(--print-offset,0px)}
.memory-print:nth-child(2) {--print-offset:26px}
.memory-print:nth-child(3) {--print-offset:-12px}
.memory-print:nth-child(4) {--print-offset:32px}
.memory-print:nth-child(5) {--print-offset:7px}
.memory-print .photo-button {background:none;overflow:visible;transition:transform .4s;box-shadow:0 12px 26px #2430200b}
.memory-print .photo-button img {width:100%;height:auto;object-fit:contain;transform:none}
.memory-print .photo-button:hover,.memory-print .photo-button:focus-visible {transform:translateY(-6px)}
.memory-print figcaption {padding-top:12px;gap:0}
.memory-print figcaption>span {font:italic 12px/1.4 var(--serif);letter-spacing:0;color:#636b59}
.memory-print .photo-open {width:30px;height:30px;font-size:18px;bottom:10px;right:10px}
.memory-footer {margin:8px var(--gutter) 0;border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.07em;color:var(--muted)}
.memory-hint>span {margin-left:8px}
.memory-pagination {font-variant-numeric:tabular-nums;white-space:nowrap}
.memory-controls:not([hidden]) {display:flex;gap:9px;flex-shrink:0}
.memory-controls button {width:44px;height:44px;display:grid;place-items:center;border:1px solid #bdc5b0;border-radius:50%;background:white;font-size:20px;transition:background .2s,color .2s}
.memory-controls button:hover:not(:disabled) {background:var(--olive);color:white}
.memory-controls button:disabled {opacity:.3;cursor:default}
.memory-lieblingsmenschen {padding-top:15px;padding-bottom:80px}
.memory-leichtsein .memory-print:nth-child(2) {--print-offset:-10px}
.memory-leichtsein .memory-print:nth-child(3) {--print-offset:28px}
.memory-leichtsein .memory-print:nth-child(4) {--print-offset:7px}
.memory-leichtsein .memory-print:nth-child(5) {--print-offset:30px}
.js:not(.reduced-motion) .memory-print {transition:opacity .6s var(--print-delay),transform .7s cubic-bezier(.2,.7,.2,1) var(--print-delay)}
.js:not(.reduced-motion) .memory-print:not(.print-visible):not(:focus-within) {opacity:0;transform:translateY(25px)}
@media(max-width:1050px){
 .memory-track {--print-height:min(250px,calc((100vw - 64px)/1.5));gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:#bcc4b0 transparent;margin-bottom:20px}
 .memory-print {flex:none;width:calc(var(--print-height)*var(--ratio));scroll-snap-align:start}
 .memory-print figcaption>span {font-size:12px}
 .memory-heading h2 {font-size:46px}
}
@media(max-width:700px){
 .memory-sequence {padding:65px 0 42px}
 .memory-heading {padding:0 24px;display:block}
 .memory-heading h2 {font-size:11vw;max-width:350px}
 .memory-heading .eyebrow {font-size:8px;letter-spacing:.11em}
 .memory-description {font-size:13px;max-width:300px}
 .memory-controls:not([hidden]) {justify-content:flex-end;margin-top:22px}
 .memory-track {padding:32px 24px 52px;scroll-padding-inline:24px;margin-top:0;gap:17px}
 .memory-footer {margin:0 24px;align-items:flex-start;font-size:9px;letter-spacing:.03em}
 .memory-print:nth-child(n) {--print-offset:0px}
 .memory-print:nth-child(even) {--print-offset:18px}
 .memory-lieblingsmenschen {padding-top:0;padding-bottom:60px}
}
/* A photograph grows out of a frame and becomes the whole scene. */
.feeling {height:160svh;min-height:0;max-height:none;overflow:visible;background:#fff}
.feeling:after {display:none}
.feeling-pin {position:sticky;top:0;height:100svh;min-height:620px;isolation:isolate;overflow:clip}
.feeling-window {position:absolute;inset:0;clip-path:inset(var(--veil-inset,12%) var(--veil-inset,12%));will-change:clip-path}
.feeling-window img {width:100%;height:100%;object-fit:cover;object-position:63% 38%;transform:scale(var(--veil-scale,1.04));will-change:transform}
.feeling-copy {left:var(--gutter);top:auto;bottom:13%;color:var(--ink);transform:translateY(var(--veil-text,0px));z-index:2}
.feeling-copy h2 {font-size:clamp(80px,11vw,176px);line-height:.95}
.feeling-caption {margin-top:26px;font-size:15px}
.feeling-index {position:absolute;right:var(--gutter);bottom:35px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;z-index:2}
/* A typographic pause, with a small print floating alongside the words. */
.about {display:block;padding-top:130px;padding-bottom:140px}
.about-statement {margin-top:45px;font-size:clamp(66px,9.4vw,150px);line-height:1.04;position:relative;z-index:2;max-width:1100px}
.about-statement>span {display:block;color:var(--line-ink,var(--ink));transition:color .16s}
.about-statement>span:nth-child(2) {padding-left:12%}
.about-statement>span:nth-child(3) {padding-left:25%}
.about-bottom {display:grid;grid-template-columns:1fr 1fr;gap:14%;align-items:start;margin-top:65px}
.about-copy {padding:0;max-width:470px}.about-copy .intro-paragraph {font-size:26px}
.signature {margin-top:30px}.signature span {font-size:11px}
.about-photo {width:64%;margin:0 auto;transform:translateY(var(--drift-y,0px)) rotate(6deg);position:relative;background:#fff;padding:9px 9px 0;box-shadow:0 12px 40px #22332212}
.about-photo>img {aspect-ratio:2/3;object-fit:cover}.about-photo figcaption {font:italic 14px var(--serif);padding:16px 4px 20px}
.photo-annotation {position:absolute;left:-27%;bottom:20%;width:180px;transform:rotate(-14deg);background:#ffffffdd;padding:8px}
.services {background:#f0f1eb;padding-top:105px;padding-bottom:85px}
.services-heading h2 {font-size:clamp(56px,7vw,108px)}
.services-heading .eyebrow {font-size:10px;letter-spacing:.14em}
.service-row {grid-template-columns:40px 1.4fr .7fr 1fr;gap:3.5%;align-items:center;padding:45px 0;position:relative}
.service-row h3 {font-size:clamp(35px,4.6vw,72px);line-height:1.02}
.service-row>img {width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 27%;transform:rotate(-5deg);transition:transform .55s,filter .55s;filter:grayscale(.4)}
.service-row:nth-child(2)>img {transform:rotate(5deg);object-position:45% 30%}
.service-row:nth-child(3)>img {object-position:50% 27%}
.service-row:hover>img {transform:rotate(0) scale(1.02);filter:none}
.service-row p {font-size:14px}.service-row div>span {font-size:10px;letter-spacing:.04em}.row-number {font-size:11px}
.questions {padding-top:110px;padding-bottom:110px}
/* A full-sized final portrait, followed by the clear enquiry action. */
.closing {position:relative;isolation:isolate;min-height:620px;height:86svh;overflow:clip;background:#eff0ea}
.closing-image {position:absolute;inset:0}
.closing-image img {width:100%;height:100%;object-fit:cover;object-position:70% 40%;transform:var(--closing-image-transform,none)}
.closing-copy {position:absolute;left:var(--gutter);top:22%;z-index:2;transform:translateY(var(--closing-y,0px))}
.closing-copy .eyebrow {font-size:clamp(22px,2.2vw,38px);line-height:1.25;letter-spacing:.045em}
.closing-copy h2 {font-size:clamp(110px,19vw,290px);line-height:.93;margin:20px 0 32px}
.closing-cta {width:148px;height:148px;border-radius:50%;display:flex;justify-content:center;flex-direction:column;padding:23px;background:var(--olive);color:#fff;gap:10px;transform:rotate(-8deg);transition:transform .3s,background .3s;font-size:14px;line-height:1.4}
.closing-cta>span:last-child {font-size:26px;align-self:flex-end;line-height:1}
.closing-cta:hover,.closing-cta:focus-visible {transform:rotate(0);background:#283122}
.closing-note {position:absolute;left:var(--gutter);bottom:32px;font:italic 17px var(--serif)}
@media(min-width:701px) and (max-height:820px){
 .closing-copy {top:14%}
 .closing-copy h2 {font-size:min(19vw,31svh)}
 .closing-cta {width:128px;height:128px;padding:20px;font-size:13px}
}
.contact {background:#242b21;gap:9vw}.contact h2 {font-size:clamp(58px,7vw,110px)}
.contact-heading {position:sticky;top:140px;align-self:start}.contact-form-wrap {padding-top:50px}
.site-footer {background:#242b21;padding-bottom:12px;overflow:hidden}
.footer-wordmark {grid-column:1/-1;font:400 17.5vw/.94 var(--serif);letter-spacing:-.085em;color:#d1d6c4;margin-top:45px;white-space:nowrap;transform:translateX(-.045em)}
.reduced-motion .album-chapter,.no-js .album-chapter {opacity:1!important;visibility:visible!important;transform:none!important}
.reduced-motion .album-nav,.no-js .album-nav,.reduced-motion .album-scroll,.no-js .album-scroll {display:none}
.reduced-motion .feeling,.no-js .feeling {height:85svh}
.reduced-motion .feeling-pin,.no-js .feeling-pin {position:relative;height:100%;min-height:0}
.reduced-motion .feeling-window,.no-js .feeling-window {clip-path:none}
.reduced-motion .feeling-window img,.reduced-motion .closing-image img,.reduced-motion .about-photo {transform:none}
.reduced-motion .about-statement>span {color:var(--ink)!important}
@media(max-width:1100px){
 .portfolio-aside {right:6%;max-width:200px;font-size:13px}
 .portfolio-intro h2 {font-size:10vw}.chapter-copy>p:last-child{font-size:13px}
 .chapter-copy {width:32%}.chapter-scribble {font-size:18px}
 .album-photo figcaption {font-size:10px}
 .service-row {grid-template-columns:24px 1.2fr .7fr 1fr;gap:3%}
 .service-row h3 {font-size:4.6vw}
}
@media(max-width:900px),(max-height:650px){
 .album {height:auto!important}.album-pin{height:auto;overflow:hidden}
 .album-chapter {min-height:690px}
 .album-topline {padding-top:30px}
 .album-nav,.album-scroll {display:none}
 .chapter-copy {top:18%}.chapter-copy h3{font-size:8.5vw}
 .photo-main{top:14%;width:47%;left:42%}.photo-side{left:2%;top:38%;width:35%}
 .chapter-two .photo-main{top:15%}.chapter-two .photo-side{top:49%}
 .chapter-three .photo-side{top:32%}
 .chapter-scribble{bottom:19%}
 .feeling{height:140svh}.feeling-pin{min-height:580px}
 .about-bottom{gap:9%}.about-photo{width:80%}
 .service-row{grid-template-columns:25px 1fr 1fr;gap:24px}
 .service-row h3{font-size:48px}.service-row>img{grid-column:3;grid-row:1/3;width:78%;justify-self:end}
 .service-row>div{grid-column:2;font-size:14px}
 .contact-heading{position:static}
}
@media(max-width:700px){
 .portfolio-intro{padding:70px 24px 65px}.portfolio-intro h2{font-size:16vw;max-width:100%;margin-top:27px}
 .portfolio-aside{position:relative;top:auto;right:auto;display:block;margin-top:30px;max-width:100%;font-size:14px}
 .portfolio-aside .handwritten{width:fit-content;max-width:100%}
 .little-star{font-size:36px;align-self:center;margin:0}.handwritten{grid-column:2;font-size:20px;margin-top:18px}
 .album-topline{padding:25px 24px;font-size:8px;letter-spacing:.08em}
 .album-chapter{min-height:810px;padding:0 24px;border-top:1px solid #d6dbcb}
 .chapter-copy{position:relative;top:auto;left:auto;width:100%;padding-top:40px}
 .chapter-copy .eyebrow{font-size:9px}
 .chapter-copy h3{font-size:17vw;margin:20px 0 16px;line-height:1}
 .chapter-copy h3 br{display:none}.chapter-copy h3 em{margin-left:.17em}
 .chapter-copy>p:last-child{font-size:14px}
 .chapter-photos{left:0;top:240px;width:100%;height:550px}
 .photo-main{width:53%;left:40%;top:5%;transform:rotate(5deg)}
 .photo-side{width:35%;left:6%;top:26%;transform:rotate(-6deg)}
 .album-photo{padding:5px 5px 0}.album-photo figcaption{font-size:10px;padding:10px 2px 12px}
 .chapter-scribble{left:10%;bottom:11%;font-size:18px}
 .chapter-two{min-height:780px}.chapter-two .chapter-photos{top:235px;height:500px}
 .chapter-two .photo-main{width:86%;left:6%;top:4%}
 .chapter-two .photo-side{width:55%;left:38%;top:42%}
 .chapter-two .chapter-scribble{left:7%;bottom:6%;font-size:18px}
 .chapter-three{min-height:800px}.chapter-three .photo-main{width:51%;left:6%;top:3%}
 .chapter-three .photo-side{width:49%;left:44%;top:40%}
 .chapter-three .chapter-scribble{left:20%;bottom:7%;font-size:18px}
 .feeling{height:135svh}.feeling-pin{height:100svh;min-height:660px}
 .feeling-window img{object-position:76% 35%}.feeling-window:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#18231da8,transparent 57%)}
 .feeling-copy{left:24px;bottom:12%;color:white}.feeling-copy h2{font-size:19vw}
 .feeling-copy .eyebrow{font-size:9px}.feeling-caption{font-size:14px;margin-top:23px}
 .feeling-index{right:24px;bottom:26px;color:#fff;font-size:8px}
 .about{padding:80px 24px 95px}.about-statement{font-size:13.7vw;margin-top:32px;line-height:1.09}
 .about-statement>span:nth-child(2){padding-left:8%}.about-statement>span:nth-child(3){padding-left:13%}
 .about-bottom{display:flex;flex-direction:column;gap:65px;margin-top:37px}
 .about-copy .intro-paragraph{font-size:23px}.about-photo{width:62%;margin-left:30%;margin-right:0}
 .photo-annotation{left:-45%;bottom:19%;width:130px;font-size:19px}
 .services{padding:74px 24px}.services-heading h2{font-size:15vw}
 .services-heading .eyebrow{font-size:9px;letter-spacing:.07em}
 .service-list{margin-top:45px}.service-row{grid-template-columns:20px 1fr 29%;gap:15px;padding:35px 0}
 .service-row h3{font-size:10.3vw}.service-row>img{width:100%;grid-row:1;align-self:center}
 .service-row>div{grid-column:2/4}.service-row p{font-size:14px}.service-row div>span{font-size:10px;line-height:1.6}
 .services-bottom p{font-size:23px}.questions{padding:78px 24px}
 .closing{height:90svh;min-height:700px}
 .closing-image img{object-position:82% 35%}
 .closing-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#f5f4edf5,transparent 65%)}
 .closing-copy{left:24px;top:auto;bottom:90px}
 .closing-copy .eyebrow{font-size:clamp(18px,5vw,24px)}.closing-copy h2{font-size:34vw;margin:15px 0 25px}
 .closing-cta{width:118px;height:118px;padding:20px;font-size:12px;transform:rotate(-6deg)}
 .closing-note{left:24px;bottom:28px;max-width:210px;font-size:15px}
 .contact{padding:76px 24px}.contact h2{font-size:14vw}.contact-form-wrap{padding-top:44px}
 .site-footer{padding-bottom:10px}.footer-wordmark{grid-column:1;font-size:16vw;margin-top:18px}
 .reduced-motion .feeling,.no-js .feeling{height:85svh;min-height:660px}
}
@media(max-width:380px){.album-chapter{min-height:735px}.chapter-photos{height:490px}.chapter-two{min-height:725px}.chapter-two .chapter-photos{height:455px}.chapter-three{min-height:750px}.chapter-copy h3{font-size:16.6vw}.album-photo figcaption{font-size:9px}}
@media(max-width:900px),(max-height:650px){
 .js:not(.reduced-motion) .album-photo {transition:opacity .65s,translate .75s cubic-bezier(.2,.7,.2,1),scale .75s cubic-bezier(.2,.7,.2,1)}
 .js:not(.reduced-motion) .album-photo:not(.print-visible):not(:focus-within) {opacity:0;translate:0 26px;scale:.96}
}