/* One shared grid: header, text and horizontal viewports share their edges. */
:root{--page-margin:clamp(28px,10vw,160px);--content-left:var(--page-margin);--header-inset:var(--page-margin);--gutter:var(--page-margin);--plum:var(--brand-plum);--panel-top:132px;--panel-bottom:40px;--glass:linear-gradient(125deg,color-mix(in srgb, var(--brand-white) 9.412%, transparent),color-mix(in srgb, var(--brand-white) 3.137%, transparent));--glass-border:var(--brand-border)}
body{background:var(--plum)}
.glass-panel,.hero-glass,.site-header,.site-header.solid,.site-header.light{backdrop-filter:blur(var(--brand-blur));-webkit-backdrop-filter:blur(var(--brand-blur))}
.site-header,.site-header.solid,.site-header.light,.site-header.solid.light{left:var(--page-margin);right:var(--page-margin);width:auto;padding:12px 28px;gap:24px;min-height:84px}
.site-header .wordmark{width:48px;height:48px;flex:0 0 48px;margin:0 8px 0 0;align-self:center;align-items:center;justify-content:center}
.brand-logo{width:48px;height:48px;object-fit:contain}
.site-header .header-timeline a,.site-header .header-timeline a:nth-child(n){font-size:clamp(10px,.9vw,13px)}
.journey-pin,.journey-hero .journey-pin,.world-transition .journey-pin{padding:var(--panel-top) var(--page-margin) 70px;align-items:center}
.hero-glass,.world-copy{width:min(680px,100%);max-width:100%;padding:var(--ds-box-spacing-base-5);border:var(--brand-border-width) solid var(--glass-border);border-radius:var(--brand-radius);color:var(--brand-white);background:linear-gradient(120deg,color-mix(in srgb, var(--brand-plum) 72.157%, transparent),color-mix(in srgb, var(--brand-plum) 52.157%, transparent));box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--brand-blur));-webkit-backdrop-filter:blur(var(--brand-blur));text-shadow:none}
.hero-glass h1{font-size:var(--ds-display-size-base-3);color:var(--brand-white);text-shadow:none}
.hero-intro{max-width:540px;margin-top:28px;font-size:var(--ds-body-size-base-3);line-height:var(--ds-body-line-base-2);color:var(--brand-paper)}
.world-copy{max-width:min(600px,100%);position:relative;z-index:2}
.world-copy h2{font-size:var(--ds-heading-size-base-5);}
.world-copy p{color:var(--brand-paper);font-size:var(--ds-body-size-base-1);line-height:var(--ds-body-line-base-2);margin-top:24px}
.urban-project,.urban-pin,.static-journey .urban-pin,.world-transition,.world-transition .journey-pin,.world-visual,.static-journey .world-transition{background:var(--plum)}
.urban-pin{padding:var(--panel-top) 0 var(--panel-bottom);--board-height:calc(100svh - var(--panel-top) - var(--panel-bottom) - 12px)}
.board-window,.gallery-window,.byat-window{width:100%;margin:0;padding:0;overflow:hidden;scroll-snap-type:none}
.board-track,.gallery-track,.byat-track{padding-inline:var(--page-margin)!important}
.board-meter,.byat-meter{margin:0 var(--page-margin);height:2px;background:color-mix(in srgb, var(--brand-white) 12.549%, transparent)}
.project-intro,.project-outro{width:min(400px,calc(var(--viewport-width,100vw) - 2 * var(--page-margin)));padding:28px}
.board-track .project-intro,.board-track .project-outro{background:color-mix(in srgb, var(--brand-white) 3.529%, transparent)}
.board-track p{font-size:16px}
/* A single horizontal BYAT strip. No layered slides or opacity crossfades. */
.byat-story{background:var(--plum);color:var(--brand-white);position:relative;height:auto}
.byat-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;padding:var(--panel-top) 0 var(--panel-bottom);display:flex;flex-direction:column;gap:24px}
.byat-window{position:relative;flex:1;min-height:0;z-index:1}
.byat-track{display:flex;gap:32px;width:max-content;height:100%;will-change:transform}
.byat-panel{position:relative;flex:none;width:calc(var(--viewport-width,100vw) - 2 * var(--page-margin));height:100%;display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-box-spacing-base-6);}
.byat-panel figure{order:0;flex:1;min-height:0;width:100%;margin:0;border-radius:calc(var(--brand-radius) * 0.9166666666666666);overflow:hidden;background:color-mix(in srgb, var(--brand-white) 1.569%, transparent)}
.byat-panel figure img{width:100%;height:100%;object-fit:contain}
.byat-copy{position:relative;order:1;display:grid;grid-template-columns:1fr 1.35fr;gap:var(--ds-box-spacing-base-7);align-items:center;inset:auto;width:auto;max-width:none;bottom:auto;left:auto;padding:var(--ds-box-spacing-base-8);color:var(--brand-white);background:linear-gradient(135deg,color-mix(in srgb, var(--brand-plum) 53.333%, transparent),color-mix(in srgb, var(--brand-plum) 86.667%, transparent));border:var(--brand-border-width) solid var(--glass-border);text-shadow:none}
.byat-copy h2{font-size:var(--ds-heading-size-base-6);line-height:var(--ds-heading-line-base-2);}
.byat-copy p{font-size:var(--ds-body-size-base-2);line-height:var(--ds-body-line-base-2);margin-top:0;color:var(--brand-paper)}
.byat-copy small{font-size:12px;color:var(--brand-muted);grid-column:2;margin:0}
.interior-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.7);pointer-events:none;z-index:0}
.byat-meter{flex:none;position:relative;z-index:1}.byat-meter i{display:block;height:100%;background:var(--bronze);transform-origin:left}
/* A distinct object gallery, with a readable opening card and explicit affordances. */
.furniture{background:var(--brand-paper);color:var(--brand-plum);border-top:var(--brand-border-width) solid color-mix(in srgb, var(--brand-white) 37.647%, transparent)}
.furniture-pin{padding:var(--panel-top) 0 var(--panel-bottom);gap:0}
.gallery-track{gap:28px;height:100%;padding:0}
.furniture-lead{width:min(430px,calc(var(--viewport-width,100vw) - 2 * var(--page-margin)));flex:none;padding:var(--ds-box-spacing-base-9);display:flex;flex-direction:column;justify-content:center;gap:var(--ds-box-spacing-base-10);color:var(--brand-plum);background:linear-gradient(135deg,color-mix(in srgb, var(--brand-white) 73.333%, transparent),color-mix(in srgb, var(--brand-white) 33.333%, transparent));border-color:var(--brand-white)}
.furniture-lead h2{font-size:var(--ds-heading-size-base-7);line-height:var(--ds-heading-line-base-4);}
.furniture-lead p{font-size:var(--ds-body-size-base-1);line-height:var(--ds-body-line-base-2);max-width:300px}
.furniture-lead .gallery-guide{font-size:14px;color:var(--brand-plum);margin-top:16px}
.furniture-card{position:relative;width:min(560px,calc(var(--viewport-width,100vw) - 2 * var(--page-margin)));min-width:0;max-width:none;flex:none;height:100%;background:var(--brand-muted);isolation:isolate;text-align:left}
.furniture-card>img{position:absolute;top:0;left:0;height:calc(100% - 90px);object-fit:cover;padding:var(--ds-box-spacing-base-3);object-position:var(--image-position,50% 50%);transform:scale(1);transition:transform .55s cubic-bezier(.2,.65,.25,1)}
.furniture-card[data-project=brain]{--image-position:53% 55%}
.furniture-card[data-project=chess]{--image-position:49% 60%}
.furniture-card[data-project=cork]{--image-position:54% 45%}
.furniture-card[data-project=easel]{--image-position:50% 48%}
.furniture-card:hover>img,.furniture-card:focus-visible>img{transform:scale(1.035)}
.project-card-label{position:absolute;bottom:0;left:0;right:0;min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;background:var(--brand-paper);color:var(--brand-plum);font-size:20px}
.gallery-open{font-size:13px;white-space:nowrap;padding:10px 13px;border:var(--brand-border-width) solid color-mix(in srgb, var(--brand-plum) 40%, transparent);border-radius:30px}
.furniture-card:hover .gallery-open{background:var(--plum);color:var(--brand-white)}
/* A modal floating inside the same site margins, with the page visible behind it. */
.project-dialog{inset:0;margin:auto;width:calc(var(--viewport-width,100vw) - 2 * var(--page-margin));max-width:1200px;height:82dvh;max-height:850px;padding:72px 24px 106px;border:var(--brand-border-width) solid color-mix(in srgb, var(--brand-white) 39.608%, transparent);border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb, var(--brand-plum) 86.667%, transparent),color-mix(in srgb, var(--brand-plum) 90.196%, transparent));box-shadow:0 30px 100px color-mix(in srgb, var(--brand-ink) 40%, transparent);color:var(--brand-white);overflow:hidden}
.project-dialog::backdrop{background:color-mix(in srgb, var(--brand-plum) 30.196%, transparent);backdrop-filter:blur(5px)}
.dialog-image{position:relative;inset:auto;width:100%;height:100%;object-fit:contain;border-radius:10px;cursor:default}
.dialog-heading{top:22px;left:26px;right:70px;width:auto;max-width:none;padding:0;background:none;backdrop-filter:none;font-size:16px;align-items:center}
.dialog-close{top:16px;right:19px;width:36px;height:36px}
.dialog-thumbs{bottom:18px;max-width:calc(100% - 48px);background:color-mix(in srgb, var(--brand-white) 4.706%, transparent)}
.pin{padding-left:var(--page-margin);padding-right:var(--page-margin)}
.approach-pin{gap:5vw}.contact-pin{padding-left:var(--page-margin);padding-right:var(--page-margin)}
footer{left:var(--page-margin);right:var(--page-margin)}
.static-journey .byat-story{height:auto!important}.static-journey .byat-pin{position:relative;height:auto;min-height:100svh}
.static-journey .byat-window{overflow-x:auto;flex:none;height:calc(100svh - var(--panel-top) - var(--panel-bottom))}
.static-journey .byat-track{transform:none!important}.static-journey .interior-motion{display:none}
.static-journey .gallery-window,.static-journey .board-window{overflow-x:auto}
.static-journey .furniture-pin{height:100svh}
@media(max-width:1100px){.byat-panel{grid-template-columns:1fr 1.25fr;gap:var(--ds-box-spacing-responsive-3);}.byat-copy{padding:var(--ds-box-spacing-responsive-4);}.site-header,.site-header.solid,.site-header.light{gap:16px;padding-left:22px;padding-right:22px}.byat-copy h2{font-size:var(--ds-heading-size-responsive-2);}}
@media(max-width:899px){
 :root{--page-margin:24px;--panel-top:150px;--panel-bottom:26px}
 .site-header,.site-header.solid,.site-header.light,.site-header.solid.light{padding:10px 18px;gap:7px 14px;min-height:112px;top:12px}
 .site-header .wordmark{width:36px;height:32px;flex-basis:36px;margin:0 0 0 4px}.brand-logo{width:36px;height:36px}
 .site-header .header-timeline a,.site-header .header-timeline a:nth-child(n){font-size:10px;min-height:48px}
 .hero-glass,.world-copy{padding:var(--ds-box-spacing-mobile-9);width:100%}.hero-glass h1{font-size:var(--ds-display-size-mobile-2);}.hero-intro{margin-top:24px;font-size:var(--ds-body-size-mobile-4);line-height:var(--ds-body-line-mobile-2);}
 .world-copy h2{font-size:var(--ds-heading-size-mobile-7);}.world-copy p{font-size:var(--ds-body-size-mobile-4);}
 .world-transition .journey-pin{align-items:flex-end;padding-bottom:var(--panel-bottom)}
 .byat-panel{display:flex;flex-direction:column;gap:var(--ds-box-spacing-mobile-10);align-items:stretch}.byat-panel figure{order:0;flex:1;min-height:0}.byat-copy{order:1;padding:var(--ds-box-spacing-mobile-4);flex:none}
 .byat-copy{display:block}.byat-copy h2{font-size:var(--ds-heading-size-mobile-8);}.byat-copy h2 br:after{content:' '}.byat-copy p{font-size:var(--ds-body-size-mobile-1);line-height:var(--ds-body-line-mobile-3);margin-top:12px}.byat-copy small{margin-top:8px}
 .byat-pin{gap:14px}.furniture-lead{padding:var(--ds-box-spacing-mobile-9);}.furniture-lead h2{font-size:var(--ds-heading-size-mobile-9);}.project-card-label{display:block;font-size:18px;padding:15px}.gallery-open{display:inline-block;margin-top:8px;font-size:12px;padding:6px 11px}.furniture-card>img{height:calc(100% - 110px)}
 .project-dialog{height:80dvh;padding:68px 14px 90px;border-radius:22px}.dialog-heading{font-size:14px;left:18px;right:58px}.dialog-thumbs{bottom:13px;max-width:calc(100% - 28px)}.dialog-thumbs button{width:52px;height:42px}
 .contact-copy{width:100%}.contact .mobile-project-image{max-width:100%}.approach-pin{gap:32px}
}
@media(max-height:700px){.hero-glass{padding:var(--ds-box-spacing-responsive-5);}.hero-glass h1{font-size:var(--ds-display-size-responsive-2);}.hero-intro{font-size:var(--ds-body-size-responsive-2);line-height:var(--ds-body-line-responsive-1);margin-top:16px}.byat-copy{padding:var(--ds-box-spacing-responsive-6);}.byat-copy h2{font-size:var(--ds-heading-size-responsive-3);}.byat-copy p{font-size:var(--ds-body-size-responsive-3);margin-top:10px}.world-copy{padding:var(--ds-box-spacing-responsive-5);}.world-copy h2{font-size:var(--ds-heading-size-responsive-4);}}
@media(prefers-reduced-transparency:reduce){.hero-glass,.world-copy,.byat-copy,.project-dialog{background:var(--brand-plum);backdrop-filter:none}}

@media(max-width:600px){.site-header .header-timeline a,.site-header .header-timeline a:nth-child(n){font-size:9px;padding-left:1px;padding-right:1px;min-height:60px}.header-timeline .timeline-label{overflow-wrap:anywhere;line-height:1.15}.site-header{min-height:124px}:root{--panel-top:160px}}

@media(max-width:600px){.site-header .header-timeline{grid-template-columns:1fr 1.6fr 1.25fr 1fr 1fr 1fr 1fr}.header-timeline .timeline-label{overflow-wrap:normal;letter-spacing:-.025em}.site-header .header-timeline a,.site-header .header-timeline a:nth-child(n){font-size:8.5px}}

/* The text and globe occupy separate measured slots at every viewport size. */
.world-transition{height:1100svh}
.world-copy{width:46%;max-width:600px;flex:none}
.world-copy h2{font-size:var(--ds-heading-size-base-8);}
.world-copy p{font-size:var(--ds-body-size-base-4);}
.byat-render-pause{position:absolute;inset:var(--panel-top) var(--page-margin) var(--panel-bottom);z-index:3;margin:auto;max-width:1260px;height:fit-content;max-height:100%;padding:clamp(18px,2.2vw,36px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:clamp(22px,3vw,48px);background:linear-gradient(125deg,color-mix(in srgb, var(--brand-plum) 54.902%, transparent),color-mix(in srgb, var(--brand-plum) 37.647%, transparent));border:var(--brand-border-width) solid color-mix(in srgb, var(--brand-white) 33.333%, transparent);border-radius:26px;box-shadow:0 24px 80px color-mix(in srgb, var(--brand-ink) 26.667%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}
.byat-render-pause img{grid-column:2;grid-row:1;width:100%;height:auto;max-height:calc(100svh - var(--panel-top) - var(--panel-bottom) - 100px);object-fit:contain;border-radius:14px}
.byat-render-pause figcaption{grid-column:1;grid-row:1;color:var(--brand-white);display:flex;flex-direction:column;gap:22px}
.byat-render-pause .render-kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-paper)}
.byat-render-pause h2{font-size:clamp(1.8rem,3.2vw,3.6rem);line-height:1.07}
.byat-render-pause p{font-size:clamp(14px,1.15vw,17px);line-height:1.65;color:var(--brand-paper)}
.static-journey .world-transition{background:var(--plum)}
/* The 3D tour has already introduced the exterior and entered the house.
   Static mode keeps the exterior photographs as an alternative to the tour. */
html:not(.static-journey) .byat-panel:nth-child(-n+3){display:none}
.interior-motion{display:none}
@media(max-width:899px){
 .world-copy{width:100%;max-width:100%;padding:var(--ds-box-spacing-mobile-4);}
 .world-copy h2{font-size:var(--ds-heading-size-mobile-10);}
 .world-copy p{font-size:var(--ds-body-size-mobile-2);line-height:var(--ds-body-line-mobile-3);margin-top:14px}
 .byat-render-pause{padding:20px;gap:18px;border-radius:22px}
 .byat-render-pause figcaption{gap:14px}
}
@media(max-width:699px) and (max-aspect-ratio:1/1){
 .byat-render-pause{grid-template-columns:1fr;gap:18px}
 .byat-render-pause figcaption{grid-column:1;grid-row:1;gap:12px}
 .byat-render-pause img{grid-column:1;grid-row:2;max-height:calc((100svh - var(--panel-top) - var(--panel-bottom)) * .48)}
 .byat-render-pause h2{font-size:1.8rem}
 .byat-render-pause p{font-size:13px;line-height:1.5}
}
@media(max-height:600px){
 .byat-render-pause{padding:14px;gap:20px}
 .byat-render-pause h2{font-size:1.6rem}
 .byat-render-pause figcaption{gap:8px}
 .byat-render-pause p{font-size:12px;line-height:1.45}
 .byat-render-pause .render-kicker{font-size:10px}
}
@media(max-height:600px){
 .world-copy{padding:var(--ds-box-spacing-responsive-7);}
 .world-copy h2{font-size:var(--ds-heading-size-responsive-5);}
 .world-copy p{font-size:var(--ds-body-size-responsive-4);margin-top:10px}
}
@media(max-width:899px) and (min-aspect-ratio:4/3){
 .world-copy{width:46%;max-width:600px}
 .world-transition .journey-pin{align-items:center}
}
