/* The subject matter becomes the website; every state belongs to the same scene. */
.project-collection{--project-ink:#213e3c;background:#e9f2ef;color:var(--project-ink);position:relative;scroll-margin-top:64px}
.projects-intro{padding:48px 6vw 32px;display:grid;grid-template-columns:1.5fr 1fr;gap:12px 50px;align-items:end}
.projects-eyebrow{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;font-weight:550}
.projects-intro>.projects-eyebrow{grid-column:1/-1}
.projects-intro h2{font-size:clamp(2rem,3.7vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1;margin:0;max-width:14em}
.projects-intro-note{margin:0 0 4px;max-width:22rem;font-size:1rem;line-height:1.5;justify-self:end;color:#52726f}
.project-story{--project-progress:0;--project-enter:0;--project-merge:0;--project-reveal:0;--project-objects:1;--project-detail:0;height:265svh;position:relative}
.project-stage{position:sticky;top:var(--top-h,64px);height:calc(100svh - var(--top-h,64px));min-height:590px;overflow:hidden;isolation:isolate;perspective:1600px}
.project-world{position:absolute;inset:-2%;z-index:-2;overflow:hidden;background:#f0e6d9}
.project-world>img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(calc((var(--project-progress) - .5)*-3vw),0,0) scale(calc(1.08 - var(--project-enter)*.04));will-change:transform}
.project-world:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f5eee6ed 0%,#f5eee6a3 27%,transparent 66%)}
.project-context{position:absolute;left:5.5vw;top:clamp(48px,10svh,110px);width:23%;max-width:350px;z-index:5}
.project-index{font-size:.73rem;letter-spacing:.14em;display:block;margin-bottom:24px;opacity:.65}
.project-kind{font-size:.73rem;line-height:1.45;margin:0 0 22px;max-width:19em;letter-spacing:.02em}
.project-context h3{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(4rem,6.9vw,7rem);letter-spacing:-.065em;line-height:1;margin:0 0 26px}
.project-sobbo .project-context h3{color:#a64e35}
.project-context h3>span[aria-hidden]{color:#b87150}
.project-intent{font-weight:500;font-size:clamp(1.1rem,1.8vw,1.6rem);line-height:1.2;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.project-description{font-size:.93rem;line-height:1.55;margin:0 0 22px;max-width:25em;opacity:calc(.9 - var(--project-merge)*.25)}
.project-open{display:flex;align-items:center;justify-content:space-between;gap:22px;background:transparent;border:0;border-bottom:1px solid currentColor;padding:12px 0;color:inherit;font:inherit;font-size:.94rem;font-weight:550;cursor:pointer;min-height:48px}
.project-open span:last-child{font-size:1.4rem;transition:transform .2s}
.project-open:hover span:last-child{transform:translate(3px,-3px)}
.project-status{margin:18px 0 0;font-size:.69rem;line-height:1.45;opacity:.75;max-width:25em}
.project-live{position:absolute;inset:0;pointer-events:none;opacity:var(--project-objects);z-index:2}
.sobbo-device{position:absolute;aspect-ratio:.483;width:clamp(205px,24svh,290px);border:7px solid #181713;border-radius:39px;background:#181713;box-shadow:inset 0 0 0 1px #9a9a8e,0 30px 45px -15px #3f291e66;transform-origin:50% 65%;will-change:transform}
.device-front{left:50%;top:20%;z-index:2;transform:translate3d(calc(var(--project-merge)*21vw),calc((1 - var(--project-enter))*9svh + var(--project-merge)*14svh),0) rotateY(calc(-12deg + var(--project-enter)*5deg + var(--project-merge)*7deg)) rotateZ(calc(-7deg + var(--project-merge)*7deg)) scale(calc(1 - var(--project-merge)*.25))}
.device-back{left:71%;top:8%;width:clamp(190px,23svh,270px);transform:translate3d(calc(var(--project-merge)*12vw),calc((1 - var(--project-enter))*-6svh + var(--project-merge)*16svh),-80px) rotateY(calc(14deg - var(--project-merge)*14deg)) rotateZ(calc(8deg - var(--project-merge)*8deg)) scale(calc(1 - var(--project-merge)*.26))}
.device-camera{position:absolute;top:9px;left:35%;width:30%;height:16px;border-radius:100px;background:#12120f;z-index:3}
.device-camera:after{content:"";position:absolute;right:8px;top:5px;width:5px;height:5px;border-radius:50%;background:#283943;box-shadow:inset 0 0 0 1px #344755}
.device-display{position:absolute;inset:0;overflow:hidden;border-radius:31px;background:#faf6ec;container-type:inline-size;color:#38251e}
.device-recipe>img{display:block;width:100%;height:42%;object-fit:cover}
.device-recipe-copy{padding:14px 16px}
.device-small{font:500 3.5cqw/1.2 var(--jules,system-ui);letter-spacing:.13em;color:#9b583d;display:block}
.device-heading{display:block;font-family:"Young Serif",Georgia,serif;font-size:12.5cqw;line-height:1.05;letter-spacing:-.04em;margin:12px 0}
.device-recipe-copy p{font-family:"Hanken",sans-serif;font-size:5cqw;line-height:1.4;margin:12px 0 16px;color:#655346}
.recipe-time{font-family:"Hanken",sans-serif;display:block;font-size:3.8cqw;letter-spacing:.08em;border-top:1px solid #d9c9b7;padding-top:10px}
.recipe-action{font-family:"Hanken",sans-serif;display:flex;justify-content:space-between;margin-top:14px;background:#b55a3c;color:#fff8ed;border-radius:100px;padding:10px 14px;font-size:4.7cqw}
.device-library{padding:43px 16px 16px}
.device-library .device-heading{font-size:11.5cqw;margin-bottom:18px}
.recipe-book{height:58%;background:#a4573b;position:relative;border-radius:3px 9px 9px 3px;box-shadow:5px 8px 12px #6e472c22;overflow:hidden}
.recipe-book:before{position:absolute;content:"";inset:0 auto 0 7px;width:1px;background:#e4be8f99;z-index:2}
.recipe-book img{display:block;width:100%;height:45%;object-fit:cover}
.recipe-book>span{display:block;font-family:"Young Serif",Georgia,serif;font-size:13cqw;line-height:1.05;color:#fff3de;padding:14px 15px}
.recipe-book small{display:block;font:400 3cqw/1.3 var(--jules);letter-spacing:.14em;color:#f0d7be;padding:0 15px}
.device-bottom{display:block;margin-top:16px;font:400 3.5cqw/1.4 var(--jules);color:#736254}
.project-object-note{position:absolute;bottom:7%;left:49%;font-size:.69rem;letter-spacing:.05em;color:#81634e;opacity:calc(1 - var(--project-merge))}
.project-screen{position:absolute;left:32%;right:4%;top:50%;margin:0;z-index:3;transform:translate3d(calc((1 - var(--project-reveal))*-4vw),-50%,0) scale(calc(.88 + var(--project-reveal)*.12));transform-origin:77% 55%;clip-path:inset(calc((1 - var(--project-reveal))*43%) calc((1 - var(--project-reveal))*24%) calc((1 - var(--project-reveal))*57%) calc((1 - var(--project-reveal))*76%) round calc((1 - var(--project-reveal))*35px));will-change:clip-path,transform}
.project-screen-salon{transform-origin:66% 58%;clip-path:inset(calc((1 - var(--project-reveal))*47%) calc((1 - var(--project-reveal))*34%) calc((1 - var(--project-reveal))*53%) calc((1 - var(--project-reveal))*66%) round calc((1 - var(--project-reveal))*35px))}
.project-image-open{position:relative;display:block;width:100%;border:0;padding:0;background:none;color:inherit;text-align:left;cursor:zoom-in;box-shadow:0 24px 70px -25px #38251e55}
.project-screen img{display:block;width:100%;height:auto}
.project-image-hint{position:absolute;right:14px;bottom:14px;width:40px;height:40px;display:grid;place-items:center;background:#f5eee6;color:#183b3d;border-radius:50%;font-size:1.25rem;box-shadow:0 2px 12px #0002}
.project-screen figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.68rem;line-height:1.4;margin-top:14px;color:inherit;opacity:.75}
.project-salon{background:#103d3e;color:#edf4ef}
.project-salon .project-world{background:#123c38}
.project-salon .project-world>img{filter:blur(5px) saturate(.8);transform:translate3d(calc((var(--project-progress) - .5)*-5vw),0,0) scale(1.14)}
.project-salon .project-world:after{background:linear-gradient(90deg,#072d2bed 0%,#103d3eaf 35%,#103d3e4d 75%),linear-gradient(0deg,#092b2b9c,transparent 60%)}
.project-salon .project-context h3{font-family:var(--jules,system-ui);font-weight:500;font-size:clamp(3rem,4.7vw,5rem);line-height:.97;letter-spacing:-.055em}
.project-salon .project-status{color:#c0d6ce}
.salon-hex{position:absolute;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);aspect-ratio:.94;overflow:hidden;background:#2e6860;filter:drop-shadow(0 25px 40px #001d2a77);will-change:transform}
.salon-hex img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--project-enter)*.08))}
.salon-hex:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#052927c9)}
.salon-hex span{position:absolute;left:15%;right:15%;bottom:17%;z-index:1;color:white;font-size:clamp(.7rem,1.15vw,1.1rem);font-weight:500;text-align:center;text-shadow:0 1px 12px #001d29}
.hex-main{left:47%;top:17%;width:28vw;max-width:460px;z-index:2;transform:translate3d(calc(var(--project-merge)*-9vw),calc((1 - var(--project-enter))*7svh + var(--project-merge)*13svh),0) scale(calc(1 - var(--project-merge)*.76))}
.hex-programme{left:73%;top:5%;width:20vw;max-width:340px;transform:translate3d(calc(var(--project-merge)*9vw),calc((1 - var(--project-enter))*-7svh - var(--project-merge)*12svh),-70px) rotate(calc(6deg - var(--project-enter)*6deg)) scale(calc(1 - var(--project-merge)*.5))}
.hex-editions{left:74%;top:55%;width:18vw;max-width:300px;transform:translate3d(calc(var(--project-merge)*11vw),calc((1 - var(--project-enter))*10svh + var(--project-merge)*18svh),-100px) rotate(calc(-5deg + var(--project-enter)*5deg)) scale(calc(1 - var(--project-merge)*.5))}
.project-salon .project-image-open{box-shadow:0 28px 80px -20px #001013b3}
.project-salon-crop{display:block;position:relative;aspect-ratio:4112/2358;overflow:hidden;background:#153c36}
.project-salon-crop img{position:absolute;top:0;left:0;transform:translateY(-11.3%)}
.project-scroll-line{position:absolute;left:6vw;right:5vw;bottom:18px;height:1px;background:currentColor;opacity:.3;overflow:hidden}
.project-scroll-line span{display:block;width:100%;height:100%;background:currentColor;transform:scaleX(var(--project-progress));transform-origin:0 50%;filter:brightness(2)}
.project-salon .project-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 70%, #103d3e 97%);
  opacity: var(--project-detail);
  pointer-events: none;
}
html.calm .project-salon .project-world::before {
  opacity: 1;
}
.projects-next {
  padding: 0 max(20px, 6vw);
  background: linear-gradient(#103d3e, #061d24);
  color: #edf4ef;
}
.projects-next a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 16px;
  padding: clamp(24px, 3.6vw, 52px) 0;
  color: inherit;
  text-decoration: none;
}
.projects-next-title {
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 550;
}
.projects-next a:hover .projects-next-title {
  text-decoration: underline;
  text-underline-offset: .22em;
}
.projects-next a:focus-visible {
  outline: 2px solid #edf4ef;
  outline-offset: 4px;
}
.projects-next-description {
  grid-column: 1;
  color: #b7d2cb;
  font-size: .95rem;
}
.projects-next-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.65rem;
  color: #a6ceca;
}
.project-dialog{width:min(1380px,96vw);max-width:none;max-height:94svh;padding:0;border:0;background:#edf4ef;color:#153d3e;box-shadow:0 25px 120px #0008;overscroll-behavior:contain}
.project-dialog::backdrop{background:#02191cdd;backdrop-filter:blur(8px)}
.project-dialog-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;background:#edf4eff5;backdrop-filter:blur(12px);z-index:2;border-bottom:1px solid #153d3e25}
.project-dialog-heading{margin:0;font-size:1rem;font-weight:600}
.project-dialog-close{font:inherit;display:flex;align-items:center;gap:20px;background:none;border:0;color:inherit;padding:8px;cursor:pointer;min-height:44px}
.project-dialog-close span:last-child{font-size:1.8rem;line-height:1}
.project-dialog-layout{padding:24px}
.project-dialog-view{background:#f4f3ee}
.project-dialog-view img{display:block;width:100%;height:auto}
.project-dialog-copy{padding:clamp(32px,5vw,70px) 0 10px;max-width:900px;margin:auto}
.project-dialog-copy[hidden]{display:none}
.project-dialog-copy h3{font-size:clamp(2rem,4vw,3.8rem);line-height:1;letter-spacing:-.04em;font-weight:520;max-width:17em;margin:0 0 24px}
.project-dialog-copy p{max-width:45rem;font-size:1.05rem}
.project-dialog-copy dl{margin:28px 0}
.project-dialog-copy dl div{padding:16px 0;border-top:1px solid #153d3e35;display:grid;grid-template-columns:180px 1fr;gap:20px}
.project-dialog-copy dt{font-size:.82rem;font-weight:600}
.project-dialog-copy dd{margin:0;font-size:.95rem;line-height:1.5}
.project-contact{display:inline-block;text-underline-offset:7px;padding:10px 0;font-weight:600}
.project-dialog-help{padding:8px 24px 24px;margin:0;font-size:.78rem;opacity:.7}
html.calm .project-story{height:auto}
html.calm .project-stage{position:relative;top:0;height:auto;min-height:0;padding:60px 6vw}
html.calm .project-context{position:relative;top:auto;left:auto;width:auto;max-width:40rem}
html.calm .project-live{display:none}
html.calm .project-screen{position:relative;inset:auto;transform:none;clip-path:none;opacity:1;will-change:auto;margin-top:40px;width:100%}
html.calm .project-world>img{transform:none}
html.calm .project-scroll-line{display:none}
@media(prefers-reduced-motion:reduce){.project-world>img{transform:none!important;will-change:auto}.project-open span:last-child{transition:none}}
@media(max-width:1000px) and (min-width:721px){.project-context{left:4vw;width:26%}.project-context h3{font-size:4.5rem}.project-description{display:none}.project-salon .project-context h3{font-size:3.3rem}.sobbo-device{width:clamp(180px,24svh,240px)}.device-back{width:clamp(175px,23svh,230px)}}
@media(max-width:720px){
 .projects-intro{padding:44px 20px 30px;display:block}.projects-intro h2{font-size:2.2rem}.projects-intro-note{font-size:.95rem;margin-top:16px}
 .project-story{height:255svh}
 .project-stage{height:calc(100svh - var(--top-h,56px));min-height:600px}
 .project-context{top:24px;left:20px;right:20px;width:auto;max-width:none}
 .project-index{position:absolute;right:0;top:0;margin:0;font-size:.66rem}
 .project-kind{font-size:.66rem;margin-bottom:12px;max-width:none;padding-right:65px}
 .project-context h3{font-size:3.3rem;margin-bottom:12px}
 .project-salon .project-context h3{font-size:2.7rem;max-width:8em;line-height:.95}
 .project-intent{font-size:1.05rem;max-width:26em;margin-bottom:12px}
 .project-description{display:none}
 .project-open{font-size:.84rem;padding:8px 0;min-height:44px}
 .project-status{font-size:.63rem;max-width:28em;margin-top:10px}
 .project-world:after{background:linear-gradient(180deg,#f5eee6f0 0%,#f5eee6b3 30%,#f5eee600 62%)}
 .project-salon .project-world:after{background:linear-gradient(180deg,#072d2bf5 0%,#103d3ebd 37%,#103d3e4d 80%)}
 .sobbo-device{width:clamp(165px,23svh,225px);border-width:6px;border-radius:31px}
 .device-display{border-radius:25px}
 .device-front{left:14%;top:40%;transform:translate3d(calc(var(--project-merge)*43vw),calc((1 - var(--project-enter))*7svh - var(--project-merge)*2svh),0) rotateY(calc(-8deg + var(--project-merge)*8deg)) rotateZ(calc(-6deg + var(--project-merge)*6deg)) scale(calc(1 - var(--project-merge)*.58))}
 .device-back{width:clamp(158px,22svh,210px);left:51%;top:38%;transform:translate3d(calc(var(--project-merge)*24vw),calc((1 - var(--project-enter))*-4svh + var(--project-merge)*3svh),-80px) rotateY(calc(12deg - var(--project-merge)*12deg)) rotateZ(calc(7deg - var(--project-merge)*7deg)) scale(calc(1 - var(--project-merge)*.58))}
 .project-object-note{left:20px;bottom:3.5%;font-size:.62rem}
 .project-screen{left:4%;right:4%;top:67%}
 .project-screen figcaption{font-size:.61rem;margin-top:10px;gap:16px}.project-screen figcaption span:last-child{text-align:right}
 .project-image-hint{width:34px;height:34px;right:9px;bottom:9px}
 .hex-main{left:7%;top:44%;width:59vw;max-width:none;transform:translate3d(calc(var(--project-merge)*6vw),calc((1 - var(--project-enter))*7svh),0) scale(calc(1 - var(--project-merge)*.8))}
 .hex-programme{left:58%;top:48%;width:39vw;transform:translate3d(calc(var(--project-merge)*12vw),calc((1 - var(--project-enter))*-5svh - var(--project-merge)*9svh),-70px) scale(calc(1 - var(--project-merge)*.6))}
 .hex-editions{left:62%;top:70%;width:32vw;transform:translate3d(calc(var(--project-merge)*14vw),calc((1 - var(--project-enter))*8svh + var(--project-merge)*10svh),-90px) scale(calc(1 - var(--project-merge)*.6))}
 .salon-hex span{font-size:.7rem}
 .project-scroll-line{left:20px;right:20px;bottom:14px}
 .project-dialog{width:100vw;max-height:100svh;height:100svh;margin:0}
 .project-dialog-top{padding:8px 14px}.project-dialog-layout{padding:14px}.project-dialog-copy{padding-top:30px}.project-dialog-copy dl div{grid-template-columns:1fr;gap:6px}
 .project-dialog-help{padding:8px 14px 24px}.project-dialog-view{overflow:auto}.project-dialog-view img{min-width:700px}
 html.calm .project-stage{padding:48px 20px}.project-dialog-copy p{font-size:.96rem}
}
@media(max-height:700px) and (min-width:721px){
 .project-stage{min-height:500px}.project-context{top:36px}.project-index{margin-bottom:14px}.project-context h3{font-size:4rem}.project-salon .project-context h3{font-size:3.3rem}.project-description{display:none}.project-kind{margin-bottom:16px}.project-status{font-size:.64rem}
 .sobbo-device{width:clamp(180px,25svh,210px)}.device-front{top:16%}.device-back{top:4%;width:clamp(170px,24svh,200px)}
}