/* Figma process direction C. The existing four-stage track and its input/scroll
   logic remain in journey.js; the extra palm print is visual context only. */
.story.process-story,
.process-panorama { background:var(--cream); }

.process-panorama {
 --process-card-size:min(31vw,32svh,340px);
 --process-gap:clamp(100px,13vw,195px);
 --process-rise:clamp(18px,3svh,40px);
 --process-content-gap:clamp(34px,5svh,56px);
}
.story.process-story .process-heading h2 {
 font-size:clamp(36px,4.1vw,60px);
 letter-spacing:-.02em;
}
.story.process-story .process-heading h2 em {
 font-size:clamp(23px,2.46vw,36px);
 letter-spacing:-.02em;
}
@media(min-width:801px) {
 .process-heading { translate:0 -clamp(12px,2.5svh,24px); }
}
.process-window {
 height:calc(var(--process-card-size)*1.415 + 2*var(--process-rise) + 40px);
}
.process-photos {
 gap:var(--process-gap);
 padding:24px var(--page-gutter) 0;
}
.process-origin-card,
.process-panel {
 position:relative;
 z-index:2;
 flex:none;
 display:flex;
 flex-direction:column;
 box-sizing:border-box;
 width:var(--process-card-size);
 height:calc(var(--process-card-size)*1.415);
 margin:0;
 padding:calc(var(--process-card-size)*.048);
 border:1px solid #e9e5d9;
 border-radius:2px;
 background-color:#faf8ef;
 background-image:linear-gradient(#faf8efeb,#faf8efeb),url('assets/process-c-paper-grain-20261030.594b68f88d06.webp');
 background-size:auto,120px 120px;
 box-shadow:2.5px 6.5px 7px #372a2424;
 transition:translate .35s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.process-origin-card { margin-right:calc(var(--process-gap)*-.24); transform:rotate(5deg); }
.process-panel:nth-of-type(2) { transform:translateY(calc(var(--process-rise)*1.5)) rotate(-5deg); }
.process-panel:nth-of-type(3) { transform:translateY(var(--process-rise)) rotate(6deg); }
.process-panel:nth-of-type(4) { transform:translateY(0) rotate(-5deg); }
.process-panel:nth-of-type(5) { transform:translateY(var(--process-rise)) rotate(8deg); }

.process-origin-card img,
.process-panel .process-photo {
 display:block;
 flex:none;
 width:100%;
 height:calc(var(--process-card-size)*1.12);
 aspect-ratio:auto;
 border:1px solid #a8997b40;
 border-radius:0;
 object-fit:cover;
 object-position:center;
 box-shadow:none;
 transition:filter .35s ease;
}
.process-paper-caption {
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:calc(var(--process-card-size)*.14);
 margin-top:auto;
 color:#344135;
 font:400 clamp(9px,1vw,13px)/1.25 'Chelsea Market',Montserrat,sans-serif;
 letter-spacing:-.025em;
 text-align:center;
 white-space:nowrap;
 transition:color .35s ease;
}

@media(hover:hover) and (pointer:fine) {
 .process-origin-card:hover,
 .process-panel:hover { translate:0 -7px; scale:1.015; box-shadow:5px 16px 25px #372a2438; }
 .process-origin-card:hover img,
 .process-panel:hover .process-photo { filter:saturate(1.06) brightness(1.035); }
 .process-origin-card:hover .process-paper-caption,
 .process-panel:hover .process-paper-caption { color:#946b45; }
}
@media(prefers-reduced-motion:reduce) {
 .process-origin-card,
 .process-panel,
 .process-origin-card img,
 .process-panel .process-photo,
 .process-paper-caption { transition:none; }
 .process-origin-card:hover,
 .process-panel:hover { translate:none; scale:none; }
}

@media(max-width:800px) {
 .process-panorama { --process-card-size:min(80vw,350px); --process-gap:42px; --process-rise:16px; }
 .process-origin-card { display:none; }
 .process-window { height:calc(var(--process-card-size)*1.415 + 2*var(--process-rise) + 40px); }
 .process-photos { padding:24px calc(100vw - var(--process-card-size)) 0 var(--page-gutter); }
 .process-panel:nth-of-type(2) { transform:translateY(var(--process-rise)) rotate(-4deg); }
 .process-panel:nth-of-type(3) { transform:translateY(0) rotate(4deg); }
 .process-panel:nth-of-type(4) { transform:translateY(var(--process-rise)) rotate(-4deg); }
 .process-panel:nth-of-type(5) { transform:translateY(0) rotate(5deg); }
 .process-paper-caption { font-size:clamp(9px,2.6vw,12px); }
}