/* A white opening becomes the original orange as the visitor starts scrolling. */
:root{--intro-color:#fff}
.hero{background:var(--intro-color)}
.hero h1{font-size:clamp(3.6rem,8.3vw,8.6rem);line-height:1.04;max-width:none}
.hero h1 em{letter-spacing:-.055em}
.hero-title{grid-template-columns:minmax(0,1fr) 180px}
.hero-top{border-color:#17191650}
.hero-note blockquote{max-width:19em}
.brand{background:#fff;border-radius:0 0 18px 0;box-shadow:0 0 0 1px #17191608}
@media(max-width:1100px) and (min-width:601px){.hero-title{grid-template-columns:minmax(0,1fr) 145px}.hero h1{font-size:7.9vw}}
@media(max-width:600px){.hero-title{grid-template-columns:1fr}.hero h1{font-size:12.2vw;line-height:1.09}.brand{border-radius:0 0 14px 0}}
@media(prefers-reduced-motion:reduce){.hero{background:#fff}}
/* Preserve the complete project image, including its lower edge. */
.project-image{background:#20221e}
.project-image img,.project:nth-child(n) img,.motion-on .project-image img,.motion-on .project-button:hover img{width:100%;height:clamp(280px,65svh,900px);min-height:0;aspect-ratio:auto;object-fit:contain;transform:none;will-change:auto}
@media(max-width:600px){.project-image img,.project:nth-child(n) img,.motion-on .project-image img{height:52svh;min-height:0}}
/* The original mark and promise form one centred opening. */
.header{justify-content:flex-end}
.hero{min-height:100svh;padding-top:90px;padding-bottom:45px;justify-content:space-between;gap:36px}
.hero-identity{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin:auto 0 0}
.hero-brand{width:clamp(300px,36vw,480px);height:auto;max-width:100%;padding:8px 24px;box-shadow:none;border-radius:0 0 22px 0}
.hero-brand img{width:100%;height:auto}
.hero h1{font-size:clamp(48px,5.6vw,88px);line-height:1.04;letter-spacing:-.055em}
.hero-promise{font-size:clamp(16px,1.5vw,21px);line-height:1.5;letter-spacing:.015em}
.hero-bottom{width:100%;margin-top:25px;align-items:center;gap:40px}
.hero-note{max-width:370px}.hero-note blockquote{font-size:clamp(21px,1.8vw,27px)}
.hero .personal{display:flex;align-items:center;gap:22px;padding:0}
.hero .personal img{width:76px;height:76px;margin:0;box-shadow:6px 6px 0 var(--green)}
.hero .personal p{font-size:14px}
/* Give each caption a reading pause before the next sheet arrives. */
.project:nth-child(n){margin-bottom:clamp(160px,26svh,300px)}
.project-caption{padding-top:26px;padding-bottom:28px}
.project:last-child{margin-bottom:60px}
@media(max-width:900px){.hero-bottom{gap:24px}.hero-note{max-width:270px}.hero .personal{gap:16px}}
@media(max-width:600px){
 .hero{padding-top:86px;padding-bottom:36px;gap:32px}
 .hero-identity{gap:20px;margin:auto 0 0}
 .hero-brand{width:min(340px,100%);padding:8px 16px}
 .hero h1{font-size:clamp(39px,10.7vw,64px)}
 .hero-bottom{display:grid;grid-template-columns:1fr auto;gap:26px 20px;margin-top:20px;align-items:center}
 .hero-note{grid-column:1/-1;max-width:100%}.hero-note blockquote{font-size:21px}
 .hero .personal{gap:16px}.hero .personal img{width:60px;height:60px}.hero .personal p{font-size:14px}
 .hero-bottom>.text-link{font-size:14px;gap:12px}
 .project:nth-child(n){margin-bottom:clamp(150px,25svh,220px)}
 .project-caption{padding-top:22px;padding-bottom:30px}
 .project:last-child{margin-bottom:40px}
}
@media(max-width:360px){.hero-bottom{grid-template-columns:1fr}.hero-bottom>.text-link{justify-self:start}}

/* A readable invitation connects the first cover image to its gallery. */
.project-discover{display:none;position:absolute;right:100px;bottom:29px;padding:12px 18px;background:var(--green);color:var(--ink);border-radius:30px;font-size:15px;line-height:1.4;max-width:calc(100% - 130px);transform:scale(var(--discover-scale,1));transform-origin:right center}
.project:first-child .project-discover{display:block}
.project:first-child .open-project{box-shadow:0 0 0 5px #d8fa3925}
.project:first-child .project-button:hover .project-discover,.project:first-child .project-button:focus-visible .project-discover{background:white}
.project-caption .project-explanation{font-size:clamp(16px,1.5vw,20px);line-height:1.65;max-width:44em;color:var(--paper);margin-top:20px;white-space:pre-line;overflow-wrap:anywhere;font-weight:400;letter-spacing:normal}
.project-caption>div{min-width:0}
@media(max-width:600px){.project-discover{right:78px;bottom:17px;font-size:12px;padding:8px 12px;max-width:calc(100% - 100px)}.project-caption .project-explanation{font-size:16px;margin-top:16px}.motion-on .project-image img{height:44svh}}
@media(prefers-reduced-motion:reduce){.project-discover{transform:none}}

/* Long project paragraphs can scroll fully into view before a card sticks. */
.motion-on .project{top:var(--project-top,26px)}