/* Daylight direction — 24 October 2026. Preserve the portfolio's own colour. */
:root{--paper:#faf8f3;--ink:#32382f;--muted:#62665b;--line:#c3c3b6}
body,.home-hero,.pitch-nav,.site-nav,.mobile-menu>nav,.reveal-shell{background:var(--paper);color:var(--ink)}
.light{background:#eeece3;color:var(--ink)}
.section{padding-top:72px;padding-bottom:72px}
.button{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.button:hover{background:#505947;color:var(--paper)}
.home-hero h1,.home-hero .hero-name{font-size:9.2cqw;margin:20px 0 30px;letter-spacing:-.045em}
.concept .home-hero{padding-top:24px}
.triptych{grid-template-columns:1fr 1.8fr 1fr;gap:2.5%;margin-top:0}
.triptych .centre{height:47cqw}.triptych .side{height:29cqw}
.triptych .left{margin-top:3cqw}.triptych .right{margin-bottom:3cqw}
.hero-base{margin-top:42px}.hero-label{font-size:11px}
.intro{padding-top:55px;padding-bottom:40px}
.intro>p{font-size:clamp(40px,5.2vw,76px);margin:25px 0 35px}
.photo-pair{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:5%;align-items:center;margin-bottom:35px}
.photo-pair figure:first-of-type img{aspect-ratio:5/4;object-position:center 55%}
.photo-pair figure:last-of-type img{aspect-ratio:4/5}
.photo-pair figcaption{font-size:12px;margin-top:12px}
.photo-pair>.motion-marker{top:25%}
.section-heading{margin:35px 0 36px}.work .section-heading h2{font-size:clamp(52px,6vw,84px)}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0}
.gallery-controls>span{font-size:12px}.gallery-controls>div{display:flex;align-items:center;gap:15px}
.gallery-controls button,.viewer-bottom button{width:48px;height:48px;background:none;border:1px solid var(--line);color:var(--ink);border-radius:50%;font-size:22px}
.gallery-controls button:disabled{opacity:.35;cursor:default}.gallery-count{font-size:12px;white-space:nowrap}
.work-grid{display:flex;align-items:stretch;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ink) #e8e5dc;padding:0 0 20px;overscroll-behavior-x:contain}
.work-card,.work-3{flex:0 0 48%;width:auto;margin:0;scroll-snap-align:start;min-width:0}
.work-card img,.work-3 img{aspect-ratio:4/5;object-fit:cover}
.work-3 img{object-position:40% center}
.card-caption h3,.work-3 .card-caption h3{font-size:clamp(29px,3vw,42px)}
.card-caption,.work-3 .card-caption{padding-top:18px}
.work-card a:hover img{filter:brightness(1.04)}
.story-open:hover .round-arrow{background:var(--ink);color:var(--paper)}
.photo-open{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;color:white;text-align:left;overflow:hidden}
.photo-open img{transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.photo-open:hover img{transform:scale(1.035)}
.photo-hint{position:absolute;right:12px;bottom:12px;background:#32382fe8;color:#fff;padding:9px 12px;font-size:11px;line-height:1.4}
.triptych .side .photo-hint{font-size:10px;padding:7px 9px}
.photo-pair .photo-open,.material-grid .photo-open,.contact .photo-open{height:auto}
.material-grid{gap:3%}.material-grid figure:nth-child(2){margin-top:35px}.material-grid figure:nth-child(3){margin-top:70px}
.material-grid img{aspect-ratio:4/5}
.contact{background:#e6e8dd;gap:8%}.contact figure{width:100%}.contact img{aspect-ratio:4/5}
.contact h2{font-size:clamp(52px,6vw,84px)}
.cover-art{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:5%;height:auto;min-height:0;margin:30px 0 40px}
.cover-art>img{position:static;grid-column:2;grid-row:1;width:100%;height:min(69vw,690px);object-position:center}
.cover-title{position:static;grid-column:1;grid-row:1;width:100%}
.cover-title h1{font-size:clamp(80px,10vw,155px);line-height:.89;text-shadow:none}
.cover-title p{font-size:18px;margin-top:30px}
.vertical-note{display:none}.cover{padding-top:26px;padding-bottom:30px}
.observations{gap:3%}.observations article{padding-top:0;border:0}
.observations article>img{aspect-ratio:4/3;margin-bottom:20px}
.observations h3{margin:16px 0 18px;font-size:36px}
.observations p{font-size:15px}
.direction{background:#faf8f3}.reveal-shell .home-hero{border-color:#c3c3b6}
.thinking-grid{margin-top:35px;gap:8%}.thinking-grid figure img{aspect-ratio:4/5}
.invitation{background:#e6e8dd}.invitation h2{font-size:clamp(60px,8vw,112px);margin:40px 0}
.image-pin{background:var(--ink);color:var(--paper)}
.image-pin[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.photo-viewer{width:min(1200px,94vw);background:var(--paper)}
.viewer-image{width:100%;height:68dvh;object-fit:contain;background:#eae8e0}
.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 24px}
.viewer-caption{font-size:13px;text-align:center}.viewer-bottom button{flex-shrink:0}
html:not(.js) .photo-hint,html:not(.js) .gallery-controls>div{display:none}
html:not(.js) .photo-open{cursor:default}
@media(prefers-reduced-motion:no-preference){
 .js .photo-pair:not(.played) figure:first-of-type{transform:translateX(8%) rotate(-3deg);clip-path:inset(0 12% 0 12%)}
 .js .photo-pair:not(.played) figure:last-of-type{transform:translateX(-12%) rotate(3deg);clip-path:inset(0 12% 0 12%)}
 .js .photo-pair figure{transition:transform 1.35s cubic-bezier(.2,.75,.2,1),clip-path 1.35s cubic-bezier(.2,.75,.2,1)}
 .js .photo-pair.played figure{transform:none;clip-path:inset(0)}
}
@media(max-width:650px){
 .section{padding:48px 22px}.cover{padding-top:22px}
 .cover-art{display:flex;flex-direction:column-reverse;gap:25px;margin-top:24px;height:auto}
 .cover-art>img{height:430px;max-height:61dvh;width:100%}
 .cover-title h1{font-size:clamp(72px,20vw,112px);line-height:.9}.cover-title h1 br{display:none}
 .cover-title p{margin-top:18px;font-size:16px}.cover-title{width:100%}
 .home-hero h1,.home-hero .hero-name{font-size:12cqw;margin:20px 0 25px}
 .hero-label{font-size:8px}.triptych{grid-template-columns:1fr 1fr;gap:15px}
 .triptych .centre{grid-column:1/-1;grid-row:1;height:112cqw;max-height:70dvh}
 .triptych .side{height:37cqw;margin:0}.triptych .right{align-self:start}
 .triptych figcaption{font-size:10px}.triptych .side .photo-hint{font-size:9px;right:6px;bottom:6px;padding:6px}
 .hero-base{margin-top:35px;font-size:11px}.hero-base>span{max-width:23ch}
 .concept .home-hero{padding:22px 22px 25px}
 .intro>p{font-size:43px;margin:25px 0 28px}.photo-pair{gap:14px;grid-template-columns:1fr 1fr;margin-bottom:30px}
 .photo-pair figure:first-of-type img,.photo-pair figure:last-of-type img{aspect-ratio:3/4}
 .photo-pair figure:last-of-type{margin-top:42px}.photo-pair .photo-hint{font-size:9px;right:6px;bottom:6px;padding:6px}
 .photo-pair figcaption{font-size:11px}.section-heading{margin:30px 0}
 .work .section-heading h2{font-size:56px}.gallery-controls{align-items:start;gap:10px;flex-direction:column}
 .gallery-controls>div{align-self:flex-end}.gallery-controls>span{font-size:11px}
 .work-grid{gap:18px;margin-right:-22px;padding-right:22px}.work-card,.work-3{flex:0 0 86%;margin:0;width:auto}
 .card-caption h3,.work-3 .card-caption h3{font-size:31px}.round-arrow{width:44px;height:44px}
 .material-grid{gap:14px}.material-grid figure:nth-child(2){margin-top:45px}.material-grid figure:nth-child(3){width:76%;margin-top:15px}
 .material-grid .photo-hint{font-size:9px;right:6px;bottom:6px;padding:6px}
 .contact{gap:35px}.contact figure{width:100%;margin:0}.contact h2{font-size:55px}
 .observations article{display:block}.observations article>img{aspect-ratio:16/10}.observations h3{font-size:36px;margin:14px 0}
 .thinking-grid{flex-direction:column;gap:28px}.thinking-grid figure img{aspect-ratio:4/5}
 .invitation h2{font-size:60px}.viewer-image{height:60dvh}.viewer-bottom{padding:14px;gap:10px}.viewer-caption{font-size:11px}
 .reveal-shell>.motion-marker{top:25%}
}
@media print{.gallery-controls,.photo-hint{display:none}.work-grid{display:block;overflow:visible}.work-card{margin-bottom:25px}.photo-pair figure{transform:none!important;clip-path:none!important}}

/* Retain the complete kitchen composition inside its gallery frame. */
.work-3 img{object-fit:contain;background:#eeece3}

@media(max-width:650px){.triptych{row-gap:36px}.observations{display:flex;flex-direction:column;gap:35px}.opportunity .source-note{margin-top:40px;clear:both}}

.work-3 img{object-position:center top}


/* Editorial refinement: photography first, one restrained opening reveal. */
.editorial-sequence{margin:38px calc(-1 * var(--pad)) 40px}
.editorial-room{margin:0}
.editorial-room .photo-open{height:min(90svh,1000px);min-height:560px}
.editorial-room img{height:100%;object-fit:cover;object-position:center 8%}
.editorial-sequence .photo-open{background:transparent;border:0;border-radius:0;box-shadow:none}
.editorial-sequence .photo-open:hover img{transform:none}
.editorial-sequence figcaption{font-size:11px;letter-spacing:.03em;line-height:1.5;margin-top:14px}
.editorial-room figcaption{padding:0 var(--pad)}
.editorial-details{display:grid;grid-template-columns:1.1fr .8fr;gap:12%;align-items:center;padding:70px var(--pad) 0}
.editorial-details .photo-open{height:auto}
.editorial-object img{aspect-ratio:4/5}
.editorial-material img{aspect-ratio:1/1}
.editorial-sequence .photo-hint{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;font-size:22px;background:#faf8f3e8;color:#32382f;right:14px;bottom:14px;opacity:0;transition:opacity .2s}
.editorial-sequence .photo-open:hover .photo-hint,.editorial-sequence .photo-open:focus-visible .photo-hint{opacity:1}
.editorial-note{font-size:11px;color:var(--muted);margin:36px var(--pad) 0}
.material-grid{grid-template-columns:1fr 1fr;max-width:980px;margin:auto}
.material-grid figure:nth-child(2){margin-top:70px}
@media(prefers-reduced-motion:no-preference){
 .js .editorial-room .photo-open{clip-path:inset(0 9%);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1)}
 .js .editorial-room.revealed .photo-open{clip-path:inset(0)}
}
@media(max-width:650px){
 .editorial-sequence{margin:30px -22px 30px}
 .editorial-room .photo-open{height:auto;min-height:0}
 .editorial-room img{height:auto;aspect-ratio:4/5;object-position:center 52%}
 .editorial-room figcaption{padding:0 22px}
 .editorial-details{padding:40px 22px 0;grid-template-columns:1fr;gap:32px}
 .editorial-object{width:88%}
 .editorial-material{width:76%;margin-left:auto}
 .editorial-sequence figcaption{font-size:11px;margin-top:12px}
 .editorial-sequence .photo-hint{opacity:1;right:10px;bottom:10px}
 .editorial-note{margin:28px 22px 0}
 .material-grid figure:nth-child(2){margin-top:40px}
}
@media print{.editorial-room .photo-open{clip-path:none!important}.editorial-sequence .photo-hint{display:none}}

/* Rachel's existing terracotta, sampled from the supplied brand screenshot. */
:root{--brand:#81423d;--brand-cream:#faf0d2}
.home-hero h1,.home-hero .hero-name,.cover-title h1,.monogram,.intro>p,.section-heading h2{color:var(--brand)}
.hero-label,.hero-base a,.nav-cta,.eyebrow,.gallery-count{color:var(--brand)}
.button{background:var(--brand);border-color:var(--brand);color:var(--brand-cream)}
.button:hover{background:#68332f;border-color:#68332f;color:var(--brand-cream)}
.round-arrow,.gallery-controls button{color:var(--brand);border-color:#81423d70}
.story-open:hover .round-arrow{background:var(--brand);color:var(--brand-cream)}
.photo-hint{background:#81423de8;color:var(--brand-cream)}
.editorial-sequence .photo-hint{color:var(--brand)}
.contact,.invitation{background:var(--brand);color:var(--brand-cream);--muted:#faf0d2;--line:#faf0d260}
.contact .eyebrow,.invitation .eyebrow{color:var(--brand-cream)}
.contact .button,.invitation .button{background:var(--brand-cream);border-color:var(--brand-cream);color:var(--brand)}
.contact .button:hover,.invitation .button:hover{background:#fffaf0;border-color:#fffaf0;color:#68332f}

/* Vertical folding studies: native page scrolling, with readable stacked tabs. */
.stack-instruction{font-size:12px;margin:0 0 28px;color:var(--muted)}
.work-grid{display:block;overflow:visible;scroll-snap-type:none;padding:0;margin:0;perspective:1400px}
.work-card,.work-3{width:100%;margin:0 0 40px;background:var(--paper);border-top:1px solid var(--line)}
.work-card .story-open{display:flex;flex-direction:column}
.work-card .card-caption{order:-1;display:flex;justify-content:space-between;align-items:center;padding:14px 0 18px;background:var(--paper)}
.work-card .card-caption h3{font-size:clamp(28px,3.5vw,46px);margin:4px 0}
.work-card .card-caption small{font-size:10px;letter-spacing:.1em}
.work-card .card-description{display:none}
.work-card img,.work-3 img{width:100%;height:clamp(240px,58svh,720px);aspect-ratio:auto;object-fit:cover}
.work-3 img{object-fit:contain}
.work-card:nth-child(1){--card-index:0}.work-card:nth-child(2){--card-index:1}.work-card:nth-child(3){--card-index:2}
@media(prefers-reduced-motion:no-preference) and (min-height:650px){
 .js .work-grid{padding-bottom:5vh}
 .js .work-card{position:sticky;top:calc(90px + var(--card-index)*48px);z-index:calc(1 + var(--card-index));margin-bottom:32vh;transform-origin:center top;transform:scale(var(--card-scale,1)) rotateX(var(--card-fold,0deg))}
 .js .work-card:last-child{margin-bottom:0}
 .js .work-card img{height:clamp(240px,calc(100svh - 330px),660px)}

}
@media(max-width:650px){
 .work-card .card-caption h3{font-size:28px}
 .work-card .card-caption{min-height:92px;padding:12px 0}
 .work-card .round-arrow{width:42px;height:42px}
 .work-card img{object-position:center}
 .stack-instruction{max-width:30ch;line-height:1.6}
}

.work-card .card-caption h3,.work-card .round-arrow{opacity:calc(1 - var(--fold-progress,0))}


/* Primary green sampled from Rachel's supplied wordmark screenshot. */
:root{--brand-green:#02644d}
.home-hero h1,.home-hero .hero-name,.cover-title h1,.monogram,
.hero-label,.hero-base a,.nav-cta,.site-nav nav a,.mobile-menu summary,
.intro>p,.section-heading h2{color:var(--brand-green)}
.site-nav a:hover,.mobile-menu summary:hover{color:var(--brand)}

/* Keep modal return focus from changing the document layout. */
.work-card:has(.story-open:focus-visible){outline:2px solid var(--brand-green);outline-offset:5px}
.work-card .story-open:focus-visible .card-caption h3,.work-card .story-open:focus-visible .round-arrow{opacity:1}
.study-photo{width:fit-content;max-width:100%;margin:0 auto}
.study-photo img{width:auto;max-width:100%;height:auto;max-height:calc(100svh - 290px);object-fit:contain}
.study-image .detail-notes{min-height:130px}
@media(min-width:900px){
 .work-card .story-open{display:grid;grid-template-columns:1fr 1.35fr;gap:6%;align-items:start}
 .work-card .card-caption{padding:20px 0;align-items:start;gap:20px}
 .work-card .card-caption h3{font-size:clamp(32px,3.2vw,48px);max-width:10ch;margin-top:35px}
 .work-card .card-description{display:block;font-size:14px;max-width:26ch;line-height:1.6;margin-top:20px}
 .work-card img{object-fit:contain;background:#eeece3}
 .work-card .round-arrow{margin-top:30px}
}
@media(max-width:650px){
 .study-photo{width:fit-content;max-width:100%}
 .study-photo img{max-height:35svh;width:auto;max-width:100%}
 .work .section-heading h2{font-size:48px}
}

.work-card .card-description{opacity:calc(1 - var(--fold-progress,0))}

@media(max-width:650px){.cover-title h1{font-size:clamp(60px,16vw,80px);line-height:1}.cover-title h1 br{display:block}}

/* Three architectural colour fields: off-white, olive, terracotta. */
:root{--olive:#5e6547}
.intro.light,.opportunity.light{background:var(--paper)}
.material.light,.thinking.light{
 background:var(--olive);color:var(--brand-cream);
 --ink:#faf0d2;--muted:#faf0d2;--line:#b7ba9d;
}
.material .eyebrow,.material .section-heading h2,
.thinking .eyebrow,.thinking h2{color:var(--brand-cream)}
.material .material-grid figcaption span{opacity:1}
.material .photo-hint{background:var(--brand-cream);color:var(--olive)}
.material .replay{color:var(--brand-cream);border-color:var(--brand-cream)}
.thinking .thinking-grid article{border-color:var(--line)}
.material,.thinking{padding-top:100px;padding-bottom:100px}
@media(max-width:650px){.material,.thinking{padding-top:64px;padding-bottom:64px}}

/* Original company mark, with its own drawn letterforms. */
.site-nav .monogram{display:flex;align-items:center;min-height:44px;min-width:60px}
.site-nav .monogram img{display:block;width:60px;height:31px;object-fit:contain}
@media(max-width:650px){.site-nav .monogram img{width:52px;height:27px}}