/* Folio: a photographic mosaic, type as the structure, paper as the surface. */
[data-design=folio] .site-header{position:absolute;top:0;left:0;right:0;padding:29px 4vw;color:var(--ink);background:transparent;border:0;border-radius:0;transform:none;max-width:none;width:auto}
[data-design=folio] .site-header .brand{font-size:45px}
[data-design=folio] .site-header nav{font-size:14px;gap:28px}
[data-design=folio] .site-header .action{border-radius:0;padding:0 0 0 14px;background:none;color:var(--ink);gap:22px}
.folio-page h1,.folio-page h2,.folio-page h3{font-family:var(--heading-font)}
.folio-hero{padding:155px 4vw 45px;max-width:2000px;margin:auto;overflow:clip}
.folio-title{display:grid;grid-template-columns:1.7fr 1fr;gap:7vw;align-items:end;margin-bottom:55px}
.folio-title h1{font-size:clamp(70px,9.9vw,158px);line-height:.9;letter-spacing:-.075em;font-weight:500;white-space:pre-line;max-width:1050px}
.folio-hero-note{padding-bottom:5px}.folio-hero-note p{max-width:325px;font-size:16px;line-height:1.55}
.folio-hero-note .action{margin-top:28px;padding:14px 19px;font-size:12px;background:var(--ink);color:var(--paper);gap:20px;border-radius:30px}
.folio-mosaic{display:grid;grid-template-columns:1.8fr 1fr;gap:5vw;align-items:start}
.folio-wide,.folio-tall{margin:0;overflow:hidden}.folio-wide{height:510px;position:relative}
.folio-wide img,.folio-tall img{display:block;width:100%;height:100%;object-fit:cover}
.folio-aside{padding-top:48px;display:flex;flex-direction:column;align-items:flex-end;gap:48px}
.folio-aside>p{font-size:clamp(25px,2.6vw,43px);letter-spacing:-.055em;line-height:1.07;width:100%;max-width:325px}
.folio-tall{height:330px;width:76%;position:relative}.folio-tall img{object-position:center 70%}
.folio-approach{padding:140px 4vw 120px;max-width:2000px}
.folio-approach .middle-opening{grid-template-columns:1.2fr 1fr;gap:15vw;margin-bottom:85px}
.folio-approach .middle-opening h2{font-size:clamp(60px,8.3vw,134px);letter-spacing:-.07em}
.folio-approach .method-composition{grid-template-columns:.75fr 1.25fr;gap:10vw}
.folio-approach .method-photo{min-height:500px;max-height:530px}
.folio-approach .method-tabs button{font-size:clamp(36px,4vw,60px);letter-spacing:-.06em}
.folio-approach .method-panels{max-width:600px}.folio-approach .method-panels p{font-size:20px}
.folio-approach .method-composition[data-layout=columns]{grid-template-columns:1fr}
.folio-work{padding-inline:4vw;background:#ebe9e2;border:0}
.folio-work .work-opening h2{font-size:clamp(70px,8vw,129px);letter-spacing:-.075em}
.folio-work .work-photo{height:450px}.folio-work .work-example{min-height:450px;background:var(--paper);border:0;border-radius:0;flex-basis:35vw;padding:40px}
.folio-work .work-example h3{font-size:clamp(38px,4.8vw,75px);letter-spacing:-.065em}.folio-work .work-example p{font-size:16px;max-width:315px}
.folio-work[data-work-view=index] .work-example{min-height:140px}.folio-work[data-work-view=index] .work-example h3{font-size:45px}
.folio-work[data-work-view=columns] .work-example{min-height:375px}.folio-work[data-work-view=columns] .work-example h3{font-size:44px}
.folio-footer{overflow:hidden;background:var(--accent);color:#fffdf0;padding:110px 4vw 0;position:relative}
.folio-invitation{display:grid;grid-template-columns:1.5fr 1fr;gap:10vw;align-items:end}
.folio-invitation h2{font-size:clamp(65px,8.5vw,130px);letter-spacing:-.065em;white-space:pre-line;line-height:.95}
.folio-invitation>div>p{font-size:17px;max-width:330px;margin-bottom:28px}
.folio-big-link{display:flex;align-items:center;gap:35px;font-size:16px}.folio-big-link>span{display:grid;place-items:center;width:75px;height:75px;border:1px solid #fff9;border-radius:50%;font-size:38px;transition:background .3s,color .3s}
.folio-big-link:hover>span{background:#fffdf0;color:var(--accent)}
.folio-footer .footer-end{margin-top:90px;border-top:1px solid #fff5;padding-block:27px;position:relative;z-index:2}
.folio-signature{font:500 40.4vw/.73 'DM Sans',sans-serif;letter-spacing:-.084em;position:relative;left:-.035em;padding-top:55px;margin-bottom:-.025em;user-select:none}
/* Relay: deep blue film and a light surface that rises into the frame. */
[data-design=relay] body{background:#15242d}
[data-design=relay] .site-header{position:absolute;top:0;left:0;right:0;transform:none;padding:29px 4vw;max-width:none;width:auto;border:0;border-radius:0;color:var(--hero-ink);background:transparent}
[data-design=relay] .site-header .brand{font-size:38px}
[data-design=relay] .site-header nav{font-size:13px;gap:30px}
[data-design=relay] .site-header .action{background:#ffffff12;border:1px solid #ffffff38;color:var(--hero-ink);font-size:13px}
.relay-hero{padding:150px 4vw 0;background:#15242d;color:var(--hero-ink);overflow:clip;position:relative}
.relay-title{display:grid;grid-template-columns:1.8fr 1fr;align-items:end;gap:8vw;margin-bottom:65px}
.relay-title h1{font:500 clamp(75px,10vw,157px)/.92 var(--heading-font);letter-spacing:-.07em;white-space:pre-line}
.relay-title>div{padding-bottom:9px}.relay-title p{font-size:16px;max-width:340px;line-height:1.6}
.relay-title .action{margin-top:28px;background:#f1f4ef;color:#1c2a31;border-radius:30px;font-size:13px;gap:25px}
.relay-film{height:640px;overflow:hidden;position:relative;margin-inline:-4vw}
.relay-film>img{display:block;height:100%;width:100%;object-fit:cover;object-position:62% 60%}
.relay-middle{background:var(--paper);color:var(--ink);position:relative;z-index:2}
.relay-approach{padding:120px 6vw 115px}
.relay-approach .middle-opening{grid-template-columns:1.5fr 1fr;gap:9vw;margin-bottom:85px}
.relay-approach .middle-opening h2{font-size:clamp(60px,6.8vw,104px);letter-spacing:-.065em}
.relay-approach .method-composition{grid-template-columns:1fr 1.1fr;gap:8vw}
.relay-approach .method-photo{min-height:490px;max-height:540px}
.relay-approach .method-tabs button{font-size:clamp(31px,3.5vw,56px);letter-spacing:-.05em}
.relay-approach .method-composition[data-layout=columns]{grid-template-columns:1fr}
.relay-work{background:color-mix(in srgb,var(--accent) 7%,var(--paper));border:0;padding-inline:6vw}
.relay-work .work-opening h2{font-size:clamp(60px,7vw,112px);letter-spacing:-.06em}
.relay-work .work-photo{height:430px}.relay-work .work-example{min-height:430px;border:1px solid var(--rule);background:var(--paper);flex-basis:350px}
.relay-work .work-example h3{font-size:43px}.relay-work[data-work-view=index] .work-example{min-height:130px;background:none}
.relay-footer{min-height:800px;overflow:hidden;isolation:isolate;position:relative;background:#13232d;color:#f8faf4;padding:110px 6vw 0;display:flex;flex-direction:column;justify-content:space-between}
.relay-footer-art{position:absolute;inset:0;z-index:-2;overflow:hidden}.relay-footer-art>img{height:100%;width:100%;object-fit:cover;display:block}
.relay-footer-art:after{content:'';position:absolute;inset:0;background:linear-gradient(#10212ca0,transparent 60%,#10212c80)}
.relay-invitation h2{font-size:clamp(68px,8vw,128px);white-space:pre-line;letter-spacing:-.065em;line-height:.96}
.relay-invitation p{font-size:17px;max-width:330px;margin:30px 0}.relay-invitation .action{background:#f8faf4;color:#172730;border-radius:30px;font-size:14px}
.relay-footer .footer-end{border-top:1px solid #fff5;margin-top:120px}
.middle-mask-line{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em;perspective:700px}
.middle-mask-word{display:inline-block;transform-origin:50% 100%}
[data-art=false] .folio-mosaic,[data-art=false] .relay-film{display:none}
[data-art=false] .folio-hero,[data-art=false] .relay-hero{padding-bottom:100px}
[data-art=false] .relay-footer-art{display:none}
@media(max-width:1099px){
 .folio-title{grid-template-columns:1.35fr 1fr;gap:5vw}.folio-title h1{font-size:10vw}.folio-hero-note p{font-size:14px}.folio-hero-note .action{font-size:11px;padding:13px 16px}
 .folio-wide{height:420px}.folio-tall{height:280px}.folio-aside{padding-top:35px;gap:40px}
 .folio-approach .middle-opening{gap:7vw}.folio-approach .middle-opening h2{font-size:76px}.folio-approach .method-composition{gap:6vw}.folio-approach .method-photo{min-height:450px}.folio-approach .method-panels p{font-size:18px}
 .folio-work .work-example{flex-basis:370px;padding:30px}.folio-work .work-example h3{font-size:50px}.folio-invitation{gap:6vw}.folio-invitation h2{font-size:9vw}
 .relay-title{gap:6vw;grid-template-columns:1.4fr 1fr}.relay-title h1{font-size:11vw}.relay-title p{font-size:14px}.relay-film{height:550px}.relay-approach .middle-opening{gap:7vw}.relay-approach .middle-opening h2{font-size:65px}
}
@media(max-width:699px){
 [data-design=folio] .site-header,[data-design=relay] .site-header{padding:23px 25px;min-height:65px;top:0;left:0;right:0}
 [data-design=folio] .site-header .brand{font-size:34px}[data-design=relay] .site-header .brand{font-size:31px}
 [data-design=folio] .menu-toggle,[data-design=relay] .menu-toggle{width:39px;height:39px;border-radius:50%}
 [data-design=relay] #page-menu{color:var(--ink)}
 .folio-hero{padding:127px 25px 20px}.folio-title{display:block;margin-bottom:38px}.folio-title h1{font-size:clamp(58px,15.3vw,95px);letter-spacing:-.07em;line-height:.98}
 .folio-hero-note{margin-top:27px;display:block}.folio-hero-note p{font-size:14px;max-width:310px}.folio-hero-note .action{margin-top:22px;font-size:11px;padding:13px 17px}
 .folio-mosaic{grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}.folio-wide{height:285px}.folio-wide img{object-position:58%}.folio-aside{padding-top:23px;gap:35px}.folio-aside>p{font-size:19px;line-height:1.15}.folio-tall{height:180px;width:100%}
 .folio-approach{padding:80px 25px}.folio-approach .middle-opening{display:block;margin-bottom:37px}.folio-approach .middle-opening h2{font-size:54px}.folio-approach .method-composition{grid-template-columns:1fr;gap:30px}.folio-approach .method-photo{min-height:0;height:255px}.folio-approach .method-tabs button{font-size:35px}.folio-approach .method-panels p{font-size:16px}
 .folio-work{padding-inline:25px}.folio-work .work-opening h2{font-size:63px}.folio-work .work-photo{height:210px}.folio-work .work-example{flex-basis:calc(100vw - 91px);min-height:375px;padding:28px 24px}.folio-work .work-example h3{font-size:43px}.folio-work .work-example p{font-size:15px}.folio-work[data-work-view=index] .work-example h3{font-size:30px}
 .folio-footer{padding:70px 25px 0}.folio-invitation{display:block}.folio-invitation h2{font-size:58px}.folio-invitation>div>p{font-size:15px;margin-top:28px}.folio-big-link{font-size:14px;gap:28px}.folio-big-link>span{height:58px;width:58px;font-size:29px}.folio-footer .footer-end{margin-top:60px;gap:16px}.folio-signature{font-size:41vw;padding-top:20px;left:-.04em}
 .relay-hero{padding:126px 25px 0}.relay-title{display:block;margin-bottom:40px}.relay-title h1{font-size:clamp(62px,16vw,93px);line-height:.97}.relay-title>div{margin-top:28px;padding:0}.relay-title p{font-size:14px;max-width:305px}.relay-title .action{margin-top:23px;font-size:12px;gap:22px}
 .relay-film{height:410px;margin-inline:-25px}.relay-film>img{object-position:65% 60%}.relay-approach{padding:80px 25px}.relay-approach .middle-opening{display:block;margin-bottom:37px}.relay-approach .middle-opening h2{font-size:51px}.relay-approach .method-composition{grid-template-columns:1fr;gap:30px}.relay-approach .method-photo{height:280px;min-height:0}.relay-approach .method-tabs button{font-size:32px}
 .relay-work{padding-inline:25px}.relay-work .work-opening h2{font-size:59px}.relay-work .work-photo{height:200px}.relay-work .work-example{min-height:370px;flex-basis:calc(100vw - 91px)}.relay-work .work-example h3{font-size:38px}
 .relay-footer{min-height:700px;padding:75px 25px 0}.relay-invitation h2{font-size:65px}.relay-invitation p{font-size:15px}.relay-footer-art>img{object-position:67%}.relay-footer .footer-end{gap:16px;margin-top:100px}
}

.folio-aside{padding-top:140px}
@media(max-width:1099px){.folio-aside{padding-top:110px}}
@media(max-width:699px){.folio-aside{padding-top:80px}}

/* Both navigation choices remain functional on the two new directions. */
[data-design=folio][data-navigation=floating] .site-header,[data-design=relay][data-navigation=floating] .site-header{position:fixed;top:18px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:12px 18px;border:1px solid #9fa7a944;border-radius:12px;backdrop-filter:blur(20px);background:#f8f7f0df;gap:50px;color:var(--ink)}
[data-design=relay][data-navigation=floating] .site-header{background:#182b35e8;color:#f9faf5}
[data-design=folio][data-navigation=floating] .site-header .brand,[data-design=relay][data-navigation=floating] .site-header .brand{font-size:28px}
.new-lab [data-choice]:disabled{opacity:.35;cursor:default}
@media(max-width:699px){[data-design=folio][data-navigation=floating] .site-header,[data-design=relay][data-navigation=floating] .site-header{width:calc(100% - 38px);justify-content:space-between;gap:15px;padding:10px 14px;min-height:0}}