/* 3D prototype page: a scroll-driven sticky stage holding the WebGL box and its text overlays */
.stage3d{position:relative;height:230svh}
.stage-sticky{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));overflow:hidden}
.canvas-host{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.canvas-host.is-ready{opacity:1}
.canvas-host canvas{display:block}

.intro3d{position:absolute;left:0;right:0;top:clamp(20px,6vh,72px);z-index:2;padding:0 20px;text-align:center;pointer-events:none}
.intro3d h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,78px);line-height:1.04;letter-spacing:-1.6px;margin:0 0 10px;color:var(--forest)}
.intro3d h1 em{color:#6a8562}
.intro3d p{font-size:15px;color:#4f6658;margin:0}
@media (min-width:701px){.intro3d{top:clamp(36px,12vh,132px)}} /* a little lower on desktop, nearer the box */

.tap-hint{position:absolute;left:50%;z-index:3;transform:translateX(-50%);padding:6px 12px;font-size:13px;letter-spacing:.03em;color:#4a6253;border-radius:20px;transition:background .25s}
.tap-hint:hover{background:#ffffff80}
.tap-hint[hidden]{display:none}

/* Text that sits on the raised lid's glass */
.lid-panel{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.lid-panel.is-visible{opacity:1}
.lid-welcome{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center;white-space:nowrap;font-family:var(--serif);font-size:clamp(24px,calc(var(--panel-w) * .046),50px);line-height:1.04;color:#1d3a2f;opacity:0;transition:opacity .35s}
.lid-welcome em{color:#5f7c57}
.lid-welcome.is-visible{opacity:1;transition-delay:.25s}
.lid-welcome:not(.is-visible){transition-duration:.12s}
.project-info{position:absolute;left:9%;right:9%;top:50%;transform:translateY(-44%);text-align:center;opacity:0;transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.project-info.is-visible{opacity:1;transform:translateY(-50%);pointer-events:auto}
.project-info h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,calc(var(--panel-w) * .044),42px);line-height:1.04;letter-spacing:-.5px;margin:0 0 10px;color:var(--forest)}
.project-info p{font-size:clamp(13px,calc(var(--panel-w) * .018),16px);line-height:1.5;margin:0 0 10px;color:#2c463a}
.info-tags{font-size:12px;color:#4b633d;margin-bottom:14px}
.info-links{display:flex;flex-wrap:wrap;gap:16px}
.info-links a{font-size:13px;color:var(--forest);border-bottom:1px solid #153c3366;padding-bottom:3px}
.info-links a:hover{border-bottom-color:var(--forest)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-webgl-message{display:none;position:absolute;left:0;right:0;top:50%;text-align:center;font-size:15px}
html.no-webgl .no-webgl-message{display:block}
html.no-webgl .tap-hint{display:none}

@media (max-width:700px){
 .stage3d{height:210svh}
 .project-info{left:8%;right:8%} /* the phone's portrait lid is tall enough to centre the text, as on wider screens */
}
@media (prefers-reduced-motion:reduce){.canvas-host,.lid-panel,.project-info,.lid-welcome{transition:none}}

/* The light source, made legible: a faint warm glow from the top left of the page */
body{background-image:radial-gradient(ellipse 65% 55% at 6% -8%,#fffbf2,transparent 62%),radial-gradient(ellipse 80% 60% at 50% 28%,#fbf9f3,transparent 70%),linear-gradient(#f5f1e8,#ede7db)}

/* Window light: one soft beam from the top left. The page is gently shaded everywhere except the beam,
   which is what makes light visible on a pale surface. Runs behind everything, so there is no seam at the header. */
.window-light{inset:0;opacity:1;filter:blur(16px);mix-blend-mode:multiply;-webkit-mask-image:none;mask-image:none;
 background:linear-gradient(58deg,rgba(118,104,80,.19) 0%,rgba(118,104,80,.17) 20%,rgba(118,104,80,0) 27%,rgba(118,104,80,0) 41%,rgba(118,104,80,.15) 49%,rgba(118,104,80,.2) 100%)}
.window-light:after{content:'';position:absolute;inset:0;mix-blend-mode:normal;opacity:1;
 background:linear-gradient(58deg,transparent 25%,rgba(255,247,228,.6) 30%,rgba(255,248,234,.5) 37%,transparent 44%);
 -webkit-mask-image:linear-gradient(155deg,#000 8%,rgba(0,0,0,.45) 55%,transparent 82%);mask-image:linear-gradient(155deg,#000 8%,rgba(0,0,0,.45) 55%,transparent 82%)}

/* Speaker toggle in the header */
.sound-toggle{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:-12px;border-radius:50%;color:var(--forest);border-bottom:0!important;transition:background .2s}
.sound-toggle:hover{background:#153c3312}
.sound-toggle .mute{display:none}
.sound-toggle[aria-pressed="false"] .wave{display:none}
.sound-toggle[aria-pressed="false"] .mute{display:inline}

/* Lid text: centred title and description, with a link down to the matching exhibit */
.project-info p{max-width:34em;margin-left:auto;margin-right:auto}
.info-exhibit{display:inline-block;margin-top:4px;font-size:13px;letter-spacing:.02em;color:var(--forest);border-bottom:1px solid #153c3366;padding-bottom:3px}
.info-exhibit:hover{border-bottom-color:var(--forest)}

/* The plinth's front face: the 3D plinth's stone carried on from the bottom of the stage to the end of the page, a shade
   darker than the top. scene3d.js measures the plinth and sets --plinth-left/right/top and the stone's scale; without
   WebGL there is no plinth. */
.plinth-face{display:none}
.has-plinth .plinth-face{display:block;position:absolute;z-index:-1;top:var(--plinth-top);bottom:0;left:var(--plinth-left);right:var(--plinth-right);
 background:#f9f8f6 url('assets/stone.webp?v=3') var(--stone-x) 0/var(--stone-tile) auto repeat;background-blend-mode:multiply;box-shadow:inset 0 1px #fbf9f5}
.has-plinth .exhibits{max-width:none;margin-inline:var(--plinth-left) var(--plinth-right);padding-inline:clamp(16px,5vw,80px)}
.has-plinth .exhibit-list{max-width:1120px;margin-inline:auto}
.has-plinth .site-footer{margin-inline:calc(var(--plinth-left) + clamp(16px,5vw,80px)) calc(var(--plinth-right) + clamp(16px,5vw,80px))}

/* Exhibit catalogue under the box */
.exhibits{max-width:1120px;margin:0 auto;padding:110px 5% 96px;color:var(--forest)}

/* Each exhibit is one textured card set on the stone: the text on one side and the piece itself on the other, swapping
   sides down the page. The piece keeps its own shape, so a phone reel stands tall and a screen recording lies wide. */
.exhibit-list{position:relative}
.exhibit-frame{display:grid;gap:clamp(28px,4vw,48px)}
/* Scroll cards (after Lightswind's Scroll Cards): the collection pins in place, and each card slides up from the bottom of
   the screen over the last, which shrinks and tilts back. exhibits.js turns this on (.is-stacked) only where every card fits
   the frame, and never for reduced motion. Cards size their piece to the frame's height (cqh). */
.is-stacked .exhibit-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding-top:var(--header-height)}
.is-stacked .exhibit-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--header-height) - 116px);container-type:size}
.is-stacked .exhibit{--media-h:calc(100cqh - 2 * clamp(12px,1.4vw,18px));position:absolute;inset:0;will-change:transform;box-shadow:0 25px 50px -12px #2a221540}
/* "Back to top", in the page's outline-pill style: one pinned under the pile while the cards are stacked, so it sits under
   whichever card is showing, and one under each card when they sit in a list */
.back-to-top{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 22px;border-radius:30px;border:1px solid #153c3355;background:#fbfaf7b3;font-size:14px;letter-spacing:.02em;color:var(--forest);transition:background .25s,border-color .25s}
.back-to-top span{display:inline-block;transition:transform .35s var(--ease)}
.back-to-top:hover{background:#fff;border-color:var(--forest)}
.back-to-top:hover span{transform:translateY(-3px)}
.exhibit-stage>.back-to-top,.is-stacked .exhibit-frame>.back-to-top{display:none}
.exhibit-frame>.back-to-top{justify-self:center;margin-top:calc(14px - clamp(28px,4vw,48px))}
.is-stacked .exhibit-stage{grid-template-rows:auto auto;align-content:center;row-gap:clamp(14px,2.2vh,24px)}
.is-stacked .exhibit-stage>.back-to-top{display:inline-flex}
.exhibit{--media-h:max(220px,min(calc(100svh - 230px),500px));display:grid;grid-template-columns:minmax(0,1fr) min(58%,calc(var(--media-h) * var(--ratio)));align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(12px,1.4vw,18px);border-radius:16px;background:#fff;color:#24392f;box-shadow:0 0 0 1px #2a22150a,0 1px 2px #2a22150f,0 14px 30px -16px #2a221545;scroll-margin-top:calc(var(--header-height) + 24px)}
.exhibit-art{position:relative;margin:0;order:2;border-radius:8px;overflow:hidden}
.exhibit-art video,.exhibit-art img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio);object-fit:cover;border-radius:8px;background:#e9e5dc}
.exhibit-art.is-object img{object-fit:contain;padding:12%;background:linear-gradient(#f6f4ef,#ebe7de)}
.art-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
.art-button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#fbfaf6e0;color:var(--forest);box-shadow:0 1px 3px #1a2e2229;opacity:.72;transition:opacity .2s}
.art-button svg{width:15px;height:15px}
.art-button .when-on,.art-button.is-on .when-off{display:none}
.art-button.is-on .when-on{display:block}
.exhibit-art:hover .art-button,.art-button:focus-visible{opacity:1}

.exhibit-text{max-width:34em;padding:clamp(14px,2.6vw,36px) clamp(10px,2vw,28px)}
.label-number{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6b7a70;margin:0 0 14px}
.exhibit-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.02;letter-spacing:-.5px;margin:0 0 14px;color:var(--forest)}
.label-summary{font-size:15.5px;line-height:1.6;margin:0}
.exhibit-text h4{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#6b7a70;margin:22px 0 6px}
.label-why{font-size:14px;line-height:1.6;margin:0}
.label-partner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:20px 0 0;padding-top:14px;border-top:1px solid #24392f1f}
.label-partner span{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#6b7a70}
.label-partner strong{font-size:15px;font-weight:550;color:var(--forest)}
.label-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0}
.label-links a{font-family:"Nothing You Could Do",var(--hand);font-size:21px;line-height:1.5;color:var(--forest);border-bottom:1px solid #153c3359;transition:color .2s,border-color .2s}
.label-links a:hover{color:#5f7c57;border-bottom-color:currentColor}

@media(min-width:801px){
 .exhibit:nth-child(even){grid-template-columns:min(58%,calc(var(--media-h) * var(--ratio))) minmax(0,1fr)}
 .exhibit:nth-child(even) .exhibit-art{order:0}
}
@media(max-width:800px){.exhibit{--media-h:max(160px,min(calc(100svh - 480px),340px));grid-template-columns:1fr;gap:4px}.exhibit-art{order:0;justify-self:center;width:min(100%,calc(var(--media-h) * var(--ratio)))}}
@media(max-width:800px){.is-stacked .exhibit-frame{aspect-ratio:auto;height:calc(100svh - var(--header-height) - 104px);max-height:none}.is-stacked .exhibit{--media-h:max(140px,calc(100cqh - 360px));align-content:center}}
@media (prefers-reduced-motion:reduce){.label-links a,.art-button{transition:none}}

/* Current page in the header: a solid underline, where hover only shows a faint one */
.site-header nav a[aria-current="page"]{border-bottom-color:var(--forest)}

/* On phones the header links sit closer, so the wordmark, After Hours, About and the speaker share one line */
@media (max-width:600px){.site-header nav{gap:24px}.site-header nav a,.wordmark{white-space:nowrap}}

/* The in-page browser (site-browser.js): a frosted browser window over the page, with traffic lights, the address in a
   pill with a padlock, "open in a new tab" and close buttons, and the project's live site below. It fills the screen
   bar a slim margin, and site-browser.js sizes and scales the site inside. Edge to edge on phones */
.site-browser{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;padding:0;overflow:hidden;
 border:1px solid #ffffffc0;border-radius:18px;background:#eef2f7c4;-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
 box-shadow:0 0 0 1px #0f1e3510,0 40px 100px -24px #0f1e3566;color:var(--forest)}
.site-browser[open]{display:grid;grid-template:auto minmax(0,1fr)/minmax(0,1fr);animation:browser-in .45s var(--ease)}
.site-browser::backdrop{background:#e8eff766;-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1)} /* frosted, the page still light behind */
@keyframes browser-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
.browser-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px}
.browser-lights{display:flex;gap:8px;margin-right:10px}
.browser-lights i{width:12px;height:12px;border-radius:50%;background:#df735b;box-shadow:inset 0 0 0 1px #0000000f}
.browser-lights i:nth-child(2){background:#e5b04f}
.browser-lights i:nth-child(3){background:#8fa78a}
.browser-address{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:34px;margin:0;padding:0 14px;border-radius:10px;background:#ffffffb8;box-shadow:inset 0 0 0 1px #0f1e350d;font-size:14px;color:#3d4c66}
.browser-address svg{flex:none;width:14px;height:14px;opacity:.65}
.browser-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-button{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#ffffffb8;box-shadow:inset 0 0 0 1px #0f1e350d;color:var(--forest);transition:background .2s}
.browser-button:hover{background:#fff}
.browser-button svg{width:18px;height:18px}
.browser-view{position:relative;margin:0 8px 8px;border-radius:11px;overflow:hidden;background:#fbfcfd;box-shadow:0 0 0 1px #0f1e3512}
.browser-view iframe{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;border:0;background:#fff;opacity:0;transition:opacity .4s}
.browser-view.is-loaded iframe{opacity:1}
.browser-loading{position:absolute;inset:0;display:grid;place-content:center;margin:0;font-family:var(--serif);font-size:22px;color:#5b6b84}
@media (max-width:700px){
 .site-browser{width:100vw;height:100dvh;border:0;border-radius:0}
 .browser-bar{gap:8px;padding:10px 8px 8px 10px}
 .browser-lights{display:none}
 .browser-address{padding:0 12px;font-size:13px}
 .browser-view{margin:0 6px 6px}
}
@media (prefers-reduced-motion:reduce){.site-browser[open]{animation:none}.browser-view iframe{transition:none}}

/* Links to the privacy policy and terms, under the footer's first line */
.footer-legal{display:flex;flex-wrap:wrap;gap:2px 18px}
.footer-legal a{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s}
.footer-legal a:hover,.footer-legal a[aria-current="page"]{text-decoration-color:currentColor}