.story-open{overflow:hidden}
.project-launcher{cursor:pointer}
.project-launcher:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.project-story{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f6f5f1;color:#151714;overflow:auto;font:inherit}
.project-story::backdrop{background:#151714}
.project-story[open]{animation:story-appear .24s ease-out}
.story-layout{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,28%);grid-template-rows:auto minmax(0,1fr) auto}
.story-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;border-bottom:1px solid #d9d7d0;font-size:14px;letter-spacing:.08em}
.story-edition{color:#61645e;margin-left:18px;font-size:12px}
.project-story button{font:inherit;cursor:pointer;min-height:44px}
.story-close{background:none;border:1px solid #b9bbb4;padding:8px 20px;font-size:14px!important}
.project-story button:focus-visible{outline:3px solid #9f211d;outline-offset:3px}
.story-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:280px;background:#171b19;overflow:hidden;touch-action:pan-y}
.story-photo{width:100%;height:min(65vh,760px);object-fit:contain;display:block}
.story-kind{position:absolute;top:20px;left:24px;padding:8px 14px;background:rgba(15,20,18,.88);color:#fff;font-size:13px;letter-spacing:.04em}
.story-prev,.story-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid #ffffff85;background:#171b19cc;color:#fff;font-size:32px!important;line-height:1}
.story-prev{left:16px}.story-next{right:16px}
.story-prev[hidden],.story-next[hidden]{display:none}
.story-image-error{position:absolute;max-width:80%;padding:20px;background:#171b19;color:white}
.story-details{padding:clamp(24px,3vw,52px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.story-eyebrow{font-size:12px;letter-spacing:.16em;color:#61645e}
.story-details h2{font-family:'Playfair Display',serif;font-size:clamp(30px,3.2vw,54px);line-height:1.12;letter-spacing:-.025em;margin:20px 0}
.story-description{font-size:16px;line-height:1.85;color:#4c504a;margin:0 0 28px}
.story-inquire{border:1px solid #151714;background:#151714;color:white;padding:15px 22px;font-size:16px!important;transition:background .2s;width:100%}
.story-inquire:hover{background:#9f211d;border-color:#9f211d}
.story-inquiry-note{font-size:13px;line-height:1.7;color:#61645e;margin:12px 0 0}
.story-footer{grid-column:1/-1;padding:18px 32px 24px;min-width:0;border-top:1px solid #d9d7d0}
.story-caption{display:flex;align-items:center;gap:22px;margin-bottom:12px;font-size:14px}
.story-count{font-variant-numeric:tabular-nums;white-space:nowrap;color:#9f211d}
.story-thumbnails{display:flex;gap:10px;overflow-x:auto;padding:4px;scrollbar-width:thin}
.story-thumb{flex:0 0 84px;height:56px;padding:0;border:2px solid transparent;background:#dedfd8;opacity:.6;transition:opacity .2s}
.story-thumb img{width:100%;height:100%;object-fit:cover}
.story-thumb[aria-pressed="true"]{opacity:1;border-color:#9f211d;outline:1px solid #9f211d;outline-offset:2px}
.story-thumb:hover{opacity:1}
.inquiry-reference{padding:14px 18px;background:#ecece5;border-left:3px solid #9f211d}
.inquiry-reference[hidden]{display:none!important}
.inquiry-reference input{font-weight:500;border:0!important;padding:0!important}
.inquiry-reference span{font-size:14px!important;color:#51554c!important}
@keyframes story-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){
 .story-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
 .story-header{padding:12px 16px;font-size:12px;position:sticky;top:0;background:#f6f5f1;z-index:2}
 .story-edition{display:none}.story-close{padding:8px 14px}
 .story-stage{grid-row:2;min-height:210px}.story-photo{height:42vh;height:42dvh;min-height:210px}
 .story-footer{grid-row:3;padding:14px 16px}.story-details{grid-row:4;padding:24px}
 .story-details h2{font-size:36px;margin:12px 0}.story-eyebrow{margin:0}
 .story-kind{top:12px;left:12px;font-size:12px}.story-description{margin-bottom:20px}
 .story-prev{left:8px}.story-next{right:8px}.story-prev,.story-next{width:44px;height:44px}
 .story-caption{align-items:flex-start;gap:14px}.story-thumb{flex-basis:72px;height:48px}
}
@media(prefers-reduced-motion:reduce){.project-story[open]{animation:none}.project-story *{transition:none!important;scroll-behavior:auto!important}}
