/* LABYRINTH / INTERACTIVE STORY EDITION — individual visual elements extracted from the portfolio */
.story-page{--story-accent:#a3104e;--story-soft:#f2dfdf;--story-dark:#350e22;background:#f8f6ef;color:#1e261e}
.story-page::selection{background:var(--story-accent);color:#fff}
.story-progress{position:fixed;top:74px;left:0;right:0;height:3px;z-index:150;background:rgba(15,33,20,.09);pointer-events:none}
.story-progress-fill{height:100%;width:0;background:var(--story-accent);transition:width .1s linear}
.story-cover{min-height:720px;height:calc(100svh - 74px);max-height:1100px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background-image:var(--cover);background-size:cover;background-position:center;isolation:isolate;color:#fff}
.story-cover::before{content:'';position:absolute;inset:0;background:var(--cover) center/cover;transform:scale(1.035);animation:cover-enter 1.3s cubic-bezier(.2,.75,.2,1) both;z-index:-2}
.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,12,.76),rgba(6,16,12,.34) 54%,rgba(6,16,12,.03)),linear-gradient(0deg,rgba(8,16,10,.67),transparent 64%);z-index:-1}
.cover-grain{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.018) 5px 6px);mix-blend-mode:screen;pointer-events:none;opacity:.3}
.all-work{position:absolute;z-index:5;left:clamp(25px,6.5vw,110px);top:45px;font:700 14px var(--font-narrow);letter-spacing:.23em;border-bottom:1px solid rgba(255,255,255,.75);padding:0 0 10px}
.all-work:hover{color:#f9c7d5}
.story-cover-content{padding:80px clamp(25px,6.5vw,110px) clamp(58px,7vw,110px);width:100%;max-width:1900px;margin:0 auto;position:relative}
.story-cover-meta{display:flex;gap:22px;text-transform:uppercase;font:700 13px var(--font-narrow);letter-spacing:.22em;margin-bottom:18px;color:#f4eee5}
.story-cover-meta span+span{padding-left:22px;border-left:1px solid rgba(255,255,255,.55)}
.story-cover-title{max-width:1080px}
.story-cover-title>p{font:700 clamp(15px,1.3vw,20px) var(--font-narrow);letter-spacing:.24em;margin:0 0 12px;color:#fcdece}
.story-cover h1{font:400 clamp(76px,10.8vw,190px)/.88 var(--font-display);letter-spacing:-.062em;margin:0;max-width:970px;text-wrap:balance;text-shadow:0 10px 36px rgba(0,0,0,.17)}
.cover-desc{font:italic clamp(19px,2vw,31px)/1.38 var(--font-display);max-width:520px;margin-top:22px;color:#f8eee9}
.start-story{display:inline-flex;align-items:center;gap:30px;margin-top:38px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.8);font:700 15px var(--font-narrow);letter-spacing:.2em;transition:gap .2s}
.start-story:hover{gap:44px}.start-story span{font-size:24px}
.cover-side-mark{position:absolute;right:30px;bottom:55px;transform:rotate(-90deg) translateX(100%);transform-origin:right bottom;font:700 13px var(--font-narrow);letter-spacing:.2em;opacity:.65}
.story-shell{display:grid;grid-template-columns:clamp(175px,19vw,290px) minmax(0,1fr);max-width:1800px;margin:0 auto;position:relative}
.story-rail{height:calc(100svh - 90px);min-height:460px;position:sticky;top:80px;align-self:start;padding:72px 22px 35px clamp(22px,5vw,78px);display:flex;flex-direction:column;border-right:1px solid #deded4;background:#f8f6ef;z-index:3}
.rail-label{font:700 12px var(--font-narrow);letter-spacing:.20em;color:var(--story-accent);margin:0 0 60px}
.rail-label span{margin-left:8px;font-size:18px}
.rail-links{display:flex;flex-direction:column;gap:6px;border-left:1px solid #c9cbbf;margin-left:7px;padding:0 0 0 0}
.rail-links a{font:600 clamp(11px,1vw,13px)/1.4 var(--font-narrow);letter-spacing:.1em;text-transform:uppercase;color:#8a938b;display:flex;align-items:center;gap:13px;padding:16px 8px 16px 0;position:relative;transition:color .25s,transform .25s}
.rail-links a::before{content:'';height:1px;width:20px;display:block;background:#c9cbbf;transition:width .2s,background .2s}
.rail-links a span{font-size:11px;font-weight:700;letter-spacing:0;color:#8e958b}
.rail-links a:hover,.rail-links a.active{color:var(--story-accent);transform:translateX(2px)}
.rail-links a.active::before{width:35px;background:var(--story-accent)}
.rail-links a.active span{color:var(--story-accent)}
.rail-end{font:700 12px var(--font-narrow);letter-spacing:.2em;color:#a1a59c;margin-top:auto}
.story-flow{min-width:0;overflow:hidden}
.story-chapter{padding:clamp(75px,9vw,140px) clamp(25px,7vw,128px) 85px;min-height:100svh;position:relative;border-bottom:1px solid #e4e3d8;scroll-margin-top:75px}
.story-chapter::after{content:'';width:130px;height:130px;position:absolute;bottom:-65px;right:clamp(25px,7vw,128px);border:1px solid var(--story-accent);opacity:.08;border-radius:50%;pointer-events:none}
.chapter-marker{display:flex;align-items:center;gap:18px;margin-bottom:67px;color:var(--story-accent)}
.chapter-marker span{font:400 44px var(--font-display);line-height:1;letter-spacing:-.06em}
.chapter-marker i{height:1px;background:var(--story-accent);width:73px;opacity:.8}
.chapter-marker small{font:700 13px var(--font-narrow);letter-spacing:.25em;text-transform:uppercase}
.chapter-eyebrow{font:700 13px var(--font-narrow);letter-spacing:.24em;color:var(--story-accent);text-transform:uppercase;margin-bottom:19px}
.story-chapter h2{font:400 clamp(52px,6.5vw,122px)/.98 var(--font-display);letter-spacing:-.06em;margin:0 0 26px;max-width:920px;text-wrap:balance}
.chapter-lede{font:italic clamp(25px,2.65vw,43px)/1.31 var(--font-display);color:var(--story-dark);max-width:670px;margin:0 0 30px}
.chapter-body{font-size:clamp(15px,1.07vw,18px);line-height:1.95;color:#4b554f;max-width:610px;margin:0}
.chapter-body em{color:#2d392e}
.origin-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.9fr);gap:clamp(35px,6vw,110px);align-items:center}
.origin-layout .chapter-heading{align-self:center}
.pull-quote{font:italic clamp(26px,2.8vw,43px)/1.32 var(--font-display);border-left:4px solid var(--story-accent);padding:0 0 0 27px;margin:60px 0 0;max-width:570px;color:var(--story-accent)}
.story-figure{margin:0;min-width:0;position:relative}
.art-frame{display:block;width:100%;height:100%;border:0;padding:0;background:var(--story-soft);position:relative;overflow:hidden;cursor:zoom-in;text-align:left}
.art-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.15,.6,.1,1)}
.art-frame:hover img{transform:scale(1.035)}
.art-zoom{position:absolute;top:17px;right:17px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f8f6ef;color:var(--story-dark);box-shadow:0 5px 16px rgba(0,0,0,.1);font-size:23px;transition:transform .2s}
.art-frame:hover .art-zoom{transform:rotate(45deg)}
.story-figure figcaption{font:700 12px var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:#748076;margin-top:13px;line-height:1.5}
.figure-portrait{height:clamp(480px,55vw,790px);max-height:900px}
.figure-portrait .art-frame{height:calc(100% - 33px)}
.chapter-next{font:700 12px var(--font-narrow);letter-spacing:.2em;color:var(--story-accent);text-transform:uppercase;display:inline-flex;align-items:center;gap:25px;margin-top:90px;padding-bottom:9px;border-bottom:1px solid var(--story-accent)}
.chapter-next span{font-size:20px}
.chapter-next:hover span{transform:translateY(4px)}
.story-concept{background:#f1f0e8}
.concept-heading{max-width:900px;margin-bottom:66px}
.concept-collage{display:grid;grid-template-columns:1fr .71fr;grid-template-areas:'main note' 'main secondary';align-items:start;gap:32px 54px}
.concept-main{grid-area:main;height:760px;max-height:63vw}
.concept-main .art-frame{height:calc(100% - 34px)}
.concept-note{grid-area:note;align-self:center;position:relative;padding:45px 28px 20px;background:var(--story-soft)}
.hand-drawn-star{font:400 55px var(--font-display);color:var(--story-accent);position:absolute;top:-34px;left:25px}
.concept-note p{font:400 clamp(15px,1.25vw,19px)/1.85 var(--font-body);color:#334037;margin:0 0 27px}
.chip-cloud{display:flex;gap:9px;flex-wrap:wrap}
.chip-cloud span{border:1px solid rgba(24,48,28,.28);border-radius:100px;padding:8px 12px;font:600 11px var(--font-narrow);text-transform:uppercase;letter-spacing:.08em}
.concept-secondary{grid-area:secondary;height:340px}
.concept-secondary .art-frame{height:calc(100% - 34px)}
.story-route{background:var(--story-dark);color:#fff;padding-left:clamp(22px,5.5vw,92px);padding-right:clamp(22px,5.5vw,92px)}
.story-route .chapter-marker,.story-route .chapter-eyebrow,.story-route .chapter-next{color:var(--story-soft)}
.story-route .chapter-marker i{background:var(--story-soft)}
.story-route h2{max-width:1000px}
.story-route .chapter-lede{color:#fbefe7}
.story-route .chapter-body{color:#d4d6cf}
.route-title{margin-bottom:65px}
.route-experience{display:grid;grid-template-columns:minmax(195px,.65fr) minmax(0,1.75fr);gap:24px;min-height:640px;background:#111912;border:1px solid rgba(255,255,255,.18);padding:16px}
.route-stop-list{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:10px 0 10px 7px;max-height:760px;overflow-y:auto}
.route-stop{border:1px solid transparent;border-bottom-color:rgba(255,255,255,.21);color:#d3d9cf;background:transparent;text-align:left;padding:21px 14px;cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 8px;transition:background .2s,border-color .2s}
.route-stop small{grid-row:1/3;font:400 20px var(--font-display);color:var(--story-soft)}
.route-stop strong{font:600 clamp(16px,1.5vw,24px)/1.15 var(--font-narrow);letter-spacing:.025em}
.route-stop span{font:400 12px var(--font-narrow);letter-spacing:.15em;text-transform:uppercase;opacity:.58}
.route-stop:hover{background:rgba(255,255,255,.08)}
.route-stop.selected{background:var(--story-accent);color:white;border-color:rgba(255,255,255,.16)}
.route-stop.selected small{color:white}
.route-visual{position:relative;overflow:hidden;min-height:610px;background:#202921}
.route-main-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .22s,transform .8s cubic-bezier(.22,.6,.2,1)}
.route-main-image.is-changing{opacity:.1;transform:scale(1.04)}
.route-visual::after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(3,9,5,.93));pointer-events:none}
.route-visual-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:35px clamp(24px,3vw,55px)}
.route-counter{font:700 13px var(--font-narrow);letter-spacing:.23em;border:1px solid rgba(255,255,255,.7);padding:9px 13px}
.route-visual-overlay>div{margin-top:auto;padding-bottom:30px}
.route-subtitle{font:700 13px var(--font-narrow);letter-spacing:.18em;color:#f5d7ce;text-transform:uppercase}
.route-name{font:400 clamp(40px,5vw,82px)/1.02 var(--font-display);letter-spacing:-.04em;margin:12px 0 13px;max-width:660px}
.route-description{font-size:15px;line-height:1.7;max-width:590px;color:#e7e9e0;margin:0}
.route-enlarge{background:transparent;color:white;border:0;border-bottom:1px solid rgba(255,255,255,.8);font:700 12px var(--font-narrow);letter-spacing:.19em;cursor:zoom-in;padding:8px 0}
.route-hint{font:700 12px var(--font-narrow);letter-spacing:.15em;text-transform:uppercase;display:flex;justify-content:space-between;padding:16px;color:#e2e0db;opacity:.75}
.story-route .chapter-next{border-color:var(--story-soft)}
.story-finale{background:#fffdf8}
.finale-heading{max-width:960px;margin-bottom:65px}
.finale-gallery{display:grid;grid-template-columns:1.12fr .8fr;gap:38px;align-items:start}
.final-visual-one{height:clamp(440px,50vw,735px)}
.final-visual-two{height:clamp(330px,35vw,520px);margin-top:125px}
.final-visual-one .art-frame,.final-visual-two .art-frame{height:calc(100% - 35px)}
.end-of-path{display:flex;align-items:end;justify-content:space-between;gap:25px;padding:80px 0 20px;margin-top:75px;border-top:1px solid #c9cabc}
.end-of-path span{font:700 12px var(--font-narrow);letter-spacing:.19em;color:var(--story-accent)}
.end-of-path p{font:italic clamp(30px,4vw,65px)/1.1 var(--font-display);letter-spacing:-.03em;color:var(--story-dark);margin:0;max-width:420px}
.end-of-path a{font:700 12px var(--font-narrow);letter-spacing:.16em;border-bottom:1px solid var(--story-accent);color:var(--story-accent);padding-bottom:9px;white-space:nowrap}
.story-next-project{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--story-soft);color:var(--story-dark);padding:65px clamp(24px,8vw,130px)}
.story-next-project>span{font:700 12px var(--font-narrow);letter-spacing:.2em;white-space:nowrap}
.story-next-project>a{display:flex;align-items:center;gap:45px;transition:gap .2s}
.story-next-project>a:hover{gap:60px}
.story-next-project a small{font:700 12px var(--font-narrow);letter-spacing:.14em}
.story-next-project a strong{font:400 clamp(32px,4vw,60px)/1 var(--font-display);letter-spacing:-.04em}
.story-next-project a b{font:400 35px var(--font-display)}
.story-page .site-footer{background:#17261b}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s cubic-bezier(.2,.6,.1,1),transform .8s cubic-bezier(.2,.6,.1,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes cover-enter{from{opacity:.1;transform:scale(1.09)}to{opacity:1;transform:scale(1.035)}}
@media(max-width:1200px){.origin-layout{gap:40px}.story-chapter{padding-left:5vw;padding-right:5vw}.story-rail{padding-left:24px}.concept-collage{gap:26px}.route-experience{grid-template-columns:minmax(175px,.62fr) minmax(0,1.65fr)}}
@media(max-width:900px){.story-shell{grid-template-columns:1fr}.story-rail{position:sticky;top:74px;min-height:0;height:auto;padding:0;overflow:auto;border-right:0;border-bottom:1px solid #dddace;z-index:10}.rail-label,.rail-end{display:none}.rail-links{border:0;display:flex;flex-direction:row;gap:0;align-items:center;min-width:max-content;padding:0 13px;margin:0}.rail-links a{padding:15px 20px;font-size:12px;white-space:nowrap}.rail-links a::before{width:11px}.rail-links a.active::before{width:18px}.story-chapter{scroll-margin-top:129px}.story-cover{min-height:620px;height:83svh}.origin-layout{grid-template-columns:.9fr 1fr;gap:32px}.concept-main{height:640px}.route-experience{min-height:540px}.route-visual{min-height:520px}.story-next-project{display:block}.story-next-project>a{margin-top:20px}}
@media(max-width:650px){.story-progress{top:67px}.story-cover{height:81svh;min-height:580px;background-position:57% center}.story-cover-content{padding:110px 23px 65px}.story-cover h1{font-size:clamp(58px,16vw,110px)}.story-cover-title>p{font-size:13px}.story-cover-meta{font-size:11px;letter-spacing:.13em;gap:10px}.story-cover-meta span+span{padding-left:10px}.cover-desc{font-size:23px}.all-work{top:27px;left:23px}.cover-side-mark{display:none}.story-rail{top:67px}.story-chapter{padding:68px 22px 65px;scroll-margin-top:124px}.chapter-marker{margin-bottom:40px}.chapter-marker span{font-size:35px}.chapter-marker i{width:48px}.chapter-marker small{font-size:12px}.story-chapter h2{font-size:clamp(50px,13vw,75px)}.origin-layout{display:flex;flex-direction:column;gap:42px}.figure-portrait{height:560px;max-width:650px;width:100%}.chapter-lede{font-size:27px}.chapter-body{font-size:15px}.pull-quote{font-size:30px;margin-top:35px}.concept-heading{margin-bottom:43px}.concept-collage{display:flex;flex-direction:column;gap:38px}.concept-main{height:510px;max-height:none;width:100%}.concept-note{padding:35px 22px 28px;width:100%}.concept-secondary{height:380px;width:100%}.chapter-next{margin-top:50px}.story-route{padding-left:15px;padding-right:15px}.story-route>.chapter-marker,.route-title{padding:0 7px}.route-title{margin-bottom:35px}.route-experience{display:flex;flex-direction:column-reverse;padding:8px;gap:0}.route-visual{min-height:510px}.route-stop-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:7px 0;max-height:none;min-height:110px}.route-stop{min-width:160px;scroll-snap-align:start;padding:12px;grid-template-columns:1fr;gap:7px;border-bottom:0;border-right:1px solid #ddd7}.route-stop small{grid-row:auto;font-size:16px}.route-stop strong{font-size:17px}.route-stop span{font-size:11px}.route-visual-overlay{padding:22px}.route-name{font-size:46px}.route-description{font-size:13px}.route-hint{font-size:11px;padding:18px 5px}.finale-gallery{display:flex;flex-direction:column;gap:35px}.final-visual-one{height:510px;width:100%}.final-visual-two{height:390px;width:100%;margin-top:0}.end-of-path{display:flex;align-items:flex-start;flex-direction:column;margin-top:50px;padding-top:45px}.end-of-path p{font-size:44px}.story-next-project{padding:42px 24px}.story-next-project a{gap:14px;flex-wrap:wrap}.story-next-project a strong{font-size:40px}.story-next-project a small{width:100%}}
@media(max-width:410px){.story-cover{min-height:530px}.story-cover h1{font-size:56px}.cover-desc{font-size:19px}.figure-portrait{height:450px}.concept-main{height:440px}.concept-secondary{height:290px}.route-visual{min-height:465px}.route-name{font-size:37px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.story-cover::before{animation:none}.route-main-image{transition:none}}
/* On phones the story-stage selectors precede the image, and wrap rather than hiding in a horizontal rail. */
@media(max-width:650px){
  .route-experience{flex-direction:column}
  .route-stop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;overflow:visible;gap:5px;max-height:none;min-height:0;scroll-snap-type:none;padding:0 0 9px}
  .route-stop{min-width:0;min-height:86px;scroll-snap-align:none;padding:11px 9px;border-right:0;grid-template-columns:24px minmax(0,1fr);align-content:center}
  .route-stop small{grid-row:1/3}
  .route-stop strong{font-size:15px;overflow-wrap:anywhere}
  .route-stop span{font-size:10px;line-height:1.25}
}