/* Editorial triptych: a single tall border with three equally sized photographs. */
.portfolio.portfolio-stories{position:relative;padding:0;margin:0;width:100%;max-width:none;background:#17221b;color:#fff;isolation:isolate;scroll-margin-top:4rem}
.portfolio-stories__track{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.portfolio-stories__track::-webkit-scrollbar{display:none}
.portfolio-stories__track:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.portfolio-stories__slide{--story-height:clamp(760px,110svh,1200px);flex:0 0 100%;position:relative;height:var(--story-height);min-width:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}
.portfolio-stories__background{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 55%;z-index:-2}
.portfolio-stories__shade{position:absolute;inset:0;background:linear-gradient(180deg,#07130e24,#07130e0a 50%,#07130e45);z-index:-1}
.portfolio-stories__edition{position:absolute;top:3%;left:1rem;right:1rem;display:flex;justify-content:center;gap:1rem;font:500 10px/1.4 var(--body-font);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 1px 8px #0008}
.portfolio-stories__edition span:last-child{position:absolute;top:calc(var(--story-height) * .91);font-size:8px;letter-spacing:.2em}
.portfolio-stories__composition{position:absolute;top:7%;bottom:8%;left:50%;width:min(54%,calc(var(--story-height) * .31));transform:translateX(-50%)}
.portfolio-stories__frames{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;height:100%;padding:10px;background:#0e242dcc}
.portfolio-stories__frame{margin:0;min-height:0;overflow:hidden;background:#233229}
.portfolio-stories__frame img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%}
.portfolio-stories__frame:last-child img{object-position:center 65%}
.portfolio-stories__quote{position:absolute;inset:0;z-index:1;margin:0;color:#fff;font:400 clamp(54px,7vw,105px)/1 "Wild Magnolia",cursive;text-shadow:0 2px 15px #07130e45;pointer-events:none}
.portfolio-stories__quote span{position:absolute;display:block;white-space:nowrap;transform:rotate(-10deg)}
.portfolio-stories__quote span:first-child{top:43%;left:-28%}
.portfolio-stories__quote span:last-child{top:69%;right:-38%;font-size:.85em;width:115%;white-space:normal;text-align:center}
.portfolio-stories__navigation{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1.1rem;color:#fff}
.portfolio-stories__navigation button{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff80;border-radius:50%;background:#13241b30;backdrop-filter:blur(12px);color:#fff;font:400 20px/1 var(--body-font);cursor:pointer;transition:background .2s}
.portfolio-stories__navigation button:hover{background:#ffffff30}
.portfolio-stories__navigation button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.portfolio-stories__counter{font:500 10px/1 var(--body-font);letter-spacing:.15em;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px #0008}
@media(max-width:600px){
 .portfolio-stories__slide{--story-height:clamp(680px,100svh,920px)}
 .portfolio-stories__edition{font-size:9px;letter-spacing:.25em}
 .portfolio-stories__frames{padding:7px;gap:7px}
 .portfolio-stories__quote{font-size:clamp(44px,12vw,72px)}
 .portfolio-stories__quote span:last-child{right:-38%;font-size:.85em}
 .portfolio-stories__navigation{bottom:5.25rem}
}
@media(prefers-reduced-motion:reduce){.portfolio-stories__track{scroll-behavior:auto}.portfolio-stories__navigation button{transition:none}}
.hymne-home-page .portfolio-stories .portfolio-stories__quote{font-family:"Wild Magnolia",cursive!important}
