/* Technical additions preserve the approved room geometry. */
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;transform:translateY(-200%);padding:12px;background:#100c08;color:#f4e5c8}.skip-link:focus{transform:none}
.business-details{display:flex;flex-direction:column;gap:6px;font:normal 12px/1.5 Arial;color:#e2d5c0}.business-details a{overflow-wrap:anywhere}.social-links{display:flex;gap:22px;flex-wrap:wrap}.social-links a{font-size:12px;line-height:1.5;padding:8px 0;color:#e1c794}.business-copyright{font-size:10px;color:#c6baa5}
#copyEnquiry{font-size:12px;color:#e1c794;padding:0;min-height:36px}#copyStatus:empty{display:none}#copyStatus{font-size:12px!important}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #edd39b;outline-offset:3px}h1[tabindex],h2[tabindex],legend[tabindex]{outline:none}
#back:disabled{visibility:hidden}.static-fallback{position:fixed;inset:0;z-index:100;background:#080706;color:#eee4ce;padding:10vh 8vw;overflow:auto}.static-fallback a{display:block;margin:16px 0;color:#e1c794}

.route-nav{position:fixed;z-index:999;left:12px;top:60px;display:flex;gap:14px;flex-wrap:wrap;padding:12px;background:#100c08;color:#f4e5c8;transform:translateX(-200%)}.route-nav:focus-within{transform:none}.entry{display:block}


/* One independent black logo stage. No wall patch, video tracking, or residual labels. */
#logoStage{position:fixed;inset:0;z-index:25;background:#000;display:grid;place-items:center;overflow:hidden;opacity:0}
#logoStageButton{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;background:transparent;cursor:pointer}
#stageLogo{display:block;width:min(76vw,1000px);height:auto;aspect-ratio:930/300;object-fit:contain;transform-origin:center;filter:sepia(.2)}
body[data-finale=true] header,body[data-finale=true] footer{visibility:hidden}
body[data-finale=true] #logoStage{visibility:visible}
#collection.active #photo{pointer-events:none!important;touch-action:pan-y pinch-zoom}
body[data-photo=open] #collection.active #photo{pointer-events:auto!important}
body:not([data-photo=open]) #collection #photo{visibility:hidden}
#collection .photo-controls{position:relative;z-index:20;pointer-events:auto}
#collection .photo-controls button{pointer-events:auto;min-width:40px;min-height:44px}
#collection .collection-copy{z-index:10}
@media(orientation:portrait){#stageLogo{width:88vw}}

/* v53: calm gallery travel and a balanced, scrollable founder page. */
#photo{isolation:isolate}
#hero{position:relative;z-index:1}
#photo .photo-outgoing{position:absolute;left:0;top:0;width:100%;height:calc(100% - 32px);object-fit:contain;background:#0c0906;z-index:2;pointer-events:none}
body[data-page=story] footer{display:none}
#story{grid-template-columns:minmax(0,44fr) minmax(0,50fr);column-gap:6%;padding:48px 7% 36px;overflow:auto;align-items:center}
#story .page-brand{transform:none;width:min(94%,440px)}
#story .portrait-exhibit{width:100%;height:min(78vh,760px);min-height:420px;max-height:none;align-self:center;overflow:hidden}
#story .portrait-exhibit .portrait-scene{inset:0 0 52px;justify-content:center;align-items:center}
#story .portrait-exhibit .portrait-scene .portrait-raster{height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center bottom}
#story .portrait-exhibit::before{inset:0;background:radial-gradient(ellipse at 50% 42%,#bb8c4930,transparent 68%);opacity:1}
#story .portrait-exhibit::after{display:none}
#story .portrait-exhibit figcaption{left:8%;right:8%;bottom:8px;height:auto;min-height:36px;text-align:center;border-top:1px solid #b99d624a;padding:14px 0 0;line-height:1.5}
#story .portrait-exhibit figcaption span{display:block;float:none;margin-top:5px;font-size:11px;letter-spacing:.04em}
#story .page-copy{max-height:calc(100dvh - 220px);justify-content:flex-start;gap:15px;padding:12px 8px 20px}
#story .business-details{padding-top:16px;border-top:1px solid #b99d624a;gap:8px;font-size:13px}
#story .story-return{align-self:flex-end;margin-top:16px;padding:12px 0;min-height:44px}
#story .business-copyright{display:block;margin-top:12px;border-top:1px solid #b99d6233;padding-top:16px;text-align:right;font-size:11px}
@media(orientation:portrait){
 #photo .photo-outgoing{height:calc(100% - 28px)}
 #story{display:flex;flex-direction:column;gap:24px;padding:48px 7% 32px;overflow-y:auto;overscroll-behavior:contain;align-items:stretch}
 #story .page-brand{width:min(92%,480px);align-self:center;flex-shrink:0}
 #story .portrait-exhibit{height:clamp(300px,48svh,520px);min-height:300px;width:100%;flex-shrink:0;align-self:center}
 #story .portrait-exhibit .portrait-scene{inset:0 0 62px;justify-content:center}
 #story .portrait-exhibit .portrait-scene .portrait-raster{height:100%;width:100%;object-position:center bottom}
 #story .portrait-exhibit figcaption{left:8%;right:8%;bottom:0;height:54px;font-size:12px}
 #story .portrait-exhibit figcaption span{float:none;font-size:11px}
 #story .page-copy{display:flex;overflow:visible;max-height:none;min-height:auto;flex-shrink:0;padding:0;gap:16px}
 #story .page-copy h1{font-size:clamp(29px,7vw,40px)}
 #story .page-copy p:not(.eyebrow){font-size:15px;line-height:1.6}
 #story .business-details{font-size:14px;gap:10px}
 #story .social-links a{font-size:14px;min-height:44px}
 #story .story-return{align-self:center;margin-top:20px}
 #story .business-copyright{text-align:center;width:100%;margin-top:8px}
}
@media(orientation:landscape) and (max-height:600px){#story .portrait-exhibit{min-height:250px;height:80vh}#story .page-copy{max-height:65vh}}
/* Keep the entire scrolling About canvas dark, including content below the first screen. */
#story{background-color:#080604}
/* Finish the page fade before the room takes over, without a mid-fade cut. */
.page.active.departing{opacity:0;filter:brightness(.12);transition:opacity 1400ms ease-in-out,filter 1400ms ease-in-out,transform 1400ms ease-in-out}
.page.departing .page-brand,.page.departing .exhibit,.page.departing .page-copy,#story.active.departing .portrait-exhibit .portrait-scene .portrait-raster{transition-duration:1400ms}

/* v54: About uses the document scrollbar, including on iPhone Safari.
   No nested scrolling panel or clipped room ancestor owns its text. */
html[data-scroll=story]{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto}
html[data-scroll=story] body{height:auto;min-height:100svh;min-height:100dvh;overflow:visible}
html[data-scroll=story] #viewport{position:relative;inset:auto;min-height:100svh;min-height:100dvh;height:auto;overflow:visible}
html[data-scroll=story] #story{position:relative;inset:auto;height:auto;min-height:100svh;min-height:100dvh;overflow:visible;touch-action:pan-y pinch-zoom;transform:none}
html[data-scroll=story] #story .page-copy{height:auto;max-height:none;overflow:visible;min-height:auto;overscroll-behavior:auto}
html[data-scroll=story] #story .portrait-exhibit{overflow:hidden}
html[data-scroll=story] #story .page-copy,html[data-scroll=story] #story .page-copy *{touch-action:pan-y pinch-zoom}
html[data-scroll=story] #story{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
html[data-scroll=story] #story::before{background-image:linear-gradient(#08060460,#08060430),url('assets/room-blank-alcove.webp');background-size:cover}
html[data-scroll=story] header{position:fixed}
@media(orientation:portrait){
 html[data-scroll=story] #story{justify-content:flex-start}
 html[data-scroll=story] #story .page-copy{flex:0 0 auto}
}

/* v55: vector waymarks render consistently without emoji substitution. */
.social-links a,#story .story-return{display:inline-flex;align-items:center;gap:10px}
.social-links .waymark{flex:none;width:19px;height:16px;color:#c6ab78}
#story .story-return .waymark{flex:none;color:#c6ab78}

/* v56: leave breathing room around the foreground logo on landscape screens. */
@media(orientation:landscape){#stageLogo{width:min(62vw,780px,160vh)}}

/* v57: two purposeful panels, compact proportions and one vertical document flow. */
html[data-scroll=story],html[data-scroll=story] body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
html[data-scroll=story] #viewport{width:100%;max-width:100%;overflow:visible}
html[data-scroll=story] #camera{position:fixed;left:0;top:0;pointer-events:none}
html[data-scroll=story] .page:not(#story){display:none}
html[data-scroll=story] #story{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto 1fr;gap:16px 6%;width:100%;max-width:1180px;margin:0 auto;padding:38px 5% 24px;min-height:100svh;min-height:100dvh;align-content:start;align-items:start;overflow:visible;background:#080604;transform:none}
html[data-scroll=story] body{background:#080604}
html[data-scroll=story] #story::before{background-position:center;background-size:cover;filter:brightness(.24)}
html[data-scroll=story] #story .page-brand{grid-column:2;grid-row:1;justify-self:start;align-self:start;width:min(76%,310px);margin:0;transform:none}
html[data-scroll=story] #story .portrait-exhibit{grid-column:1;grid-row:1 / 3;position:relative;align-self:start;width:100%;height:clamp(320px,74svh,640px);min-height:0;max-height:none;margin:0;overflow:hidden}
html[data-scroll=story] #story .portrait-exhibit .portrait-scene{position:absolute;inset:0 0 56px;display:flex;align-items:center;justify-content:center}
html[data-scroll=story] #story .portrait-exhibit .portrait-scene .portrait-raster{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:brightness(.82) saturate(.9)}
html[data-scroll=story] #story .portrait-exhibit::before{inset:0;background:radial-gradient(ellipse at 50% 40%,#ae824d24,transparent 70%)}
html[data-scroll=story] #story .portrait-exhibit figcaption{left:4%;right:4%;bottom:0;height:50px;min-height:0;padding:10px 0 0;text-align:center;font-size:11px;line-height:1.3}
html[data-scroll=story] #story .portrait-exhibit figcaption span{display:block;float:none;font-size:10px;margin:4px 0 0}
html[data-scroll=story] #story .page-copy{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:14px;height:auto;min-height:0;max-height:none;overflow:visible;padding:0;align-self:start;width:100%;min-width:0}
html[data-scroll=story] #story .page-copy .eyebrow{font-size:9px;letter-spacing:.14em;display:block}
html[data-scroll=story] #story .page-copy h1{font:normal clamp(26px,3vw,39px)/1.12 Georgia;margin:0;max-width:22ch}
html[data-scroll=story] #storyChapters{display:flex;gap:24px;margin:0;border-bottom:1px solid #b59a6750}
html[data-scroll=story] #storyChapters button{min-height:40px;font-size:13px;padding:0;color:#bfb29a}
html[data-scroll=story] #storyChapters button[aria-selected=true]{color:#f3e4c8;border-bottom:1px solid #c6ab78}
html[data-scroll=story] #story .story-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
html[data-scroll=story] #story .story-panel p{font-size:14px;line-height:1.6;margin:0;max-width:56ch;color:#d5ccbb}
html[data-scroll=story] #story .story-panel .story-lead{font-size:17px;line-height:1.45;color:#f0e2c9}
html[data-scroll=story] #story .story-panel .text-link{display:inline-flex;gap:10px;align-items:center;align-self:flex-start;margin:0;min-height:40px;font-size:13px}
html[data-scroll=story] #story .business-details{display:grid;grid-template-columns:1fr;gap:7px;padding:10px 0 0;margin:0;border:0;font:normal 13px/1.45 Arial}
html[data-scroll=story] #story .business-details span:nth-child(2){font-size:12px;color:#afa590}
html[data-scroll=story] #story .business-details a{overflow-wrap:anywhere}
html[data-scroll=story] #story .social-links{gap:22px;flex-wrap:wrap}
html[data-scroll=story] #story .social-links a{min-height:36px;padding:0;font-size:13px;gap:7px}
html[data-scroll=story] #story .story-page-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border-top:1px solid #b59a6733;margin-top:4px;padding-top:12px}
html[data-scroll=story] #story .story-return{margin:0;padding:0;min-height:40px;font-size:12px;gap:8px;align-self:auto}
html[data-scroll=story] #story .business-copyright{font-size:10px;border:0;margin:0;padding:0;width:auto;text-align:right;line-height:1.4}
@media(orientation:landscape) and (max-height:600px){
 html[data-scroll=story] #story{padding:28px 6% 18px;gap:10px 5%;grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
 html[data-scroll=story] #story .portrait-exhibit{height:calc(100svh - 56px);min-height:230px;max-height:440px;position:sticky;top:28px}
 html[data-scroll=story] #story .page-brand{width:min(55%,240px)}
 html[data-scroll=story] #story .page-copy{gap:10px}
 html[data-scroll=story] #story .page-copy h1{font-size:25px}
 html[data-scroll=story] #story .page-copy .eyebrow{display:none}
 html[data-scroll=story] #story .story-panel p{font-size:12px;line-height:1.5}
 html[data-scroll=story] #story .story-panel .story-lead{font-size:14px}
 html[data-scroll=story] #story .story-panel{gap:9px}
}
@media(orientation:portrait){
 html[data-scroll=story] #story{display:flex;flex-direction:column;gap:20px;padding:44px 7% 24px;align-items:stretch;justify-content:flex-start}
 html[data-scroll=story] #story .page-brand{width:min(90%,340px);align-self:center;flex-shrink:0}
 html[data-scroll=story] #story .portrait-exhibit{height:clamp(230px,36svh,360px);width:100%;flex:none;position:relative;top:auto}
 html[data-scroll=story] #story .portrait-exhibit .portrait-scene{inset:0 0 52px}
 html[data-scroll=story] #story .page-copy{gap:14px;flex:none}
 html[data-scroll=story] #story .page-copy .eyebrow{display:none}
 html[data-scroll=story] #story .page-copy h1{font-size:clamp(27px,7vw,34px)}
 html[data-scroll=story] #story .story-panel p{font-size:14px;line-height:1.6}
 html[data-scroll=story] #story .story-panel .story-lead{font-size:17px}
 html[data-scroll=story] #story .story-page-end{gap:8px;justify-content:space-between}
 html[data-scroll=story] #story .business-copyright{font-size:9px}
}

@media(orientation:landscape){html[data-scroll=story] #story .page-copy h1{max-width:none}}