@font-face {
  font-family: "Museum Gujarati";
  src: url("./assets/fonts/NotoSerifGujarati.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
:root { color: #352d25; background: #201b18; font-family: Baskerville, "Iowan Old Style", Georgia, serif; }
html, body, #root { margin: 0; width: 100%; height: 100%; overflow: hidden; }
:lang(gu) { font-family: "Gujarati Sangam MN", "Museum Gujarati", "Noto Sans Gujarati", "Nirmala UI", sans-serif; }
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
button:active { background-color: #ba9d772d; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #7a4c25; outline-offset: -4px; }
button:disabled { opacity: .35; cursor: default; }
.viewport { position: fixed; inset: 0; overflow: hidden; }
.scaled { position: absolute; left: 50%; top: 50%; transform-origin: center; overflow: hidden; }
.mount { position: absolute; width: 1600px; height: 840px; }
.preview .mount { background: center / 100% 100% no-repeat url("./assets/faceplate.webp"); }
.installed, .installed .mount { background: #080706; }
.installed .mount { left: -50px; top: -42px; }
/* All aperture coordinates use the same rectified faceplate plane.
   The cutout contours are traced from study 06. Do not let layout reflow between windows. */
.aperture { position: absolute; overflow: hidden; }
.name {
  left: 152px; top: 102px; width: 435px; height: 73px; margin: 0;
  clip-path: polygon(1.8% 1%,99% 2%,99% 96%,0% 97%);
  background:#e6dac2; display:grid; place-content:center;
  font-size:37px; font-weight:400; letter-spacing:-.7px; white-space:nowrap;
}
.name:lang(gu) { font-size:31px; letter-spacing:0; }
.portrait {
  left:183px; top:250px; width:358px; height:409px;
  clip-path:polygon(4.8% .4%,99% .6%,94.5% 99.4%,0% 98.7%); background:#836658;
}
.portrait img,.portrait video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; }
.portrait video { opacity:0; }
.portrait video.exposed { opacity:1; }
.rightOpening {
  left:670px; top:150px; width:607px; height:581px;
  clip-path:polygon(4.7% .5%,99.6% 0%,98.6% 99.6%,0% 98.6%);
  background:linear-gradient(118deg,#f2eadb 0%,#efe5d3 65%,#e9ddc6 100%);
  box-shadow:inset 0 7px 17px #53371c19;
}
.apertureInterior { position:absolute; inset:10px 34px 13px 49px; display:flex; flex-direction:column; min-height:0; }
.languages,.callFooter,.pickup,.quiet,.links,.pager,dt,small { font-family:"Gill Sans","Gujarati Sangam MN", "Museum Gujarati","Noto Sans Gujarati","Trebuchet MS",sans-serif; }
.languages { display:flex; align-items:center; justify-content:flex-end; min-height:46px; gap:3px; }
.languages button { font-size:19px; min-height:44px; padding:6px 11px; }
.languages button:lang(gu) { font-family:"Gujarati Sangam MN", "Museum Gujarati","Noto Sans Gujarati",sans-serif; }
.languages button[aria-pressed="true"] { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#845e38; }
.languages span { height:15px; width:1px; background:#bba887; }
.choices { display:grid; grid-template-rows:repeat(3,1fr); flex:1; min-height:0; }
.choice { display:flex; align-items:center; text-align:left; gap:27px; padding:8px 15px; border-bottom:1px solid #bcaa8a; }
.choice img { width:85px; height:99px; object-fit:cover; object-position:center 30%; outline:1px solid #9e8766; outline-offset:3px; }
.choice span { font-size:36px; line-height:1.1; }
.choice small { display:block; margin:0 0 3px; font-family:inherit; color:#624e38; font-size:21px; }
.choice:lang(gu) span { font-size:31px; line-height:1.35; }
.pickup { width:100%; min-height:64px; font-size:25px; }
.receiver { position:absolute; left:1340px; top:75px; width:233px; height:545px; border-radius:45px; }
.receiver:active { background:#fff2; }
.narration { display:flex; flex-direction:column; flex:1; min-height:0; padding-top:7px; }
.artwork { position:relative; height:233px; flex:none; overflow:hidden; background:#deceb4; border:1px solid #cbb99f; }
.scene { position:absolute; inset:0; opacity:0; transition:opacity 650ms ease; overflow:hidden; }
.scene.visible { opacity:1; }
.scene img { width:100%; height:100%; object-fit:cover; }
.scene.visible img { animation:observe 11s ease-out both; }
.artwork.still .scene img { animation-play-state:paused; }
@keyframes observe { from{transform:scale(1)} to{transform:scale(1.045)} }
@media(prefers-reduced-motion:reduce){.scene{transition:none}.scene.visible img{animation:none}}
.spoken { margin:auto 3px; padding:12px 0; font-size:31px; line-height:1.25; text-wrap:pretty; }
.spoken:lang(gu) { font-size:27px; line-height:1.5; }
.callFooter,.links,.pager { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.callFooter,.links { border-top:1px solid #baa788; }
.callFooter small { font-size:16px; color:#685644; }
.quiet,.pager button { font-size:20px; min-height:49px; padding:6px 8px; text-decoration:underline; text-underline-offset:4px; }
.reading { flex:1; overflow:auto; display:flex; flex-direction:column; padding:0 5px 5px; }
h2 { font-weight:400; font-size:38px; line-height:1.1; margin:15px 0 12px; }
h2:lang(gu) { font-size:32px; line-height:1.35; }
.reading p, dd { font-size:27px; line-height:1.32; margin:12px 0 20px; }
.reading p:lang(gu),dd:lang(gu) { font-size:24px; line-height:1.55; }
.reading .links,.reading>.quiet { margin-top:auto; }
.bookmarks button { display:flex; width:100%; justify-content:space-between; border-bottom:1px solid #c7b598; padding:17px 4px; text-align:left; font-size:28px; }
.scrollText { flex:1; min-height:0; overflow:auto; padding-right:12px; }
dl { margin:0; }
dl>div { border-top:1px solid #c7b598; padding:8px 0; }
dt { font-size:17px; color:#6a5743; }
dd,dd:lang(gu) { margin:0; }
.pager span { color:#766047; }
/* On the installed panel the physical masking provides the final edge. */
.installed .aperture { clip-path:none; }
.choices.four { grid-template-rows:repeat(4,1fr); }
.four .choice { padding-block:5px; gap:22px; }
.four .choice img { width:62px; height:78px; }
.four .choice span { font-size:31px; }
.four .choice small { font-size:18px; }
.four .choice:lang(gu) span { font-size:28px; }
.welcomeCue { margin:0; min-height:58px; display:grid; place-items:center; font:22px "Gill Sans","Gujarati Sangam MN","Museum Gujarati",sans-serif; }
.portrait .introduction { object-position:50% 17%; }
.selectedPortrait { animation:settle-portrait 600ms ease-out both; }
.lifting .selectedPortrait { animation:pickup-portrait 850ms cubic-bezier(.22,.62,.27,1) both; }
@keyframes settle-portrait { from{opacity:.35;transform:scale(.97)}to{opacity:1;transform:scale(1)} }
@keyframes pickup-portrait { from{filter:brightness(.75);transform:scale(.94)}to{filter:none;transform:scale(1)} }
.arrival { display:grid; place-content:center; flex:1; overflow:hidden; }
.arrival img { width:100px; aspect-ratio:3/4; object-fit:cover; animation:portrait-leaves .85s ease forwards; }
@keyframes portrait-leaves { 0%{opacity:1} 100%{opacity:0;transform:translateX(-200px) scale(1.25)} }
.narration { animation:story-arrives .35s ease-out; }
@keyframes story-arrives { from{opacity:0}to{opacity:1} }
.cradlePatch,.movableReceiver { position:absolute; left:1330px; top:55px; width:265px; height:725px; background-size:100% 100%; pointer-events:none; }
.cradlePatch { background-image:url("./assets/empty-cradle.webp"); opacity:0; transition:opacity 100ms 550ms; }
.offhook .cradlePatch { opacity:1; transition-delay:0ms; }
.movableReceiver { background-image:url("./assets/receiver.webp");transform-origin:60% 38%; transition:transform 650ms cubic-bezier(.36,0,.25,1),opacity 500ms ease-in; }
.offhook .movableReceiver { transform:translate(230px,-185px) rotate(19deg); opacity:0; }
@media(prefers-reduced-motion:reduce){
  .selectedPortrait,.lifting .selectedPortrait,.arrival img,.narration{animation:none}
  .cradlePatch,.movableReceiver,.offhook .cradlePatch{transition:none}
}
.flightLayer { position:absolute; inset:0; pointer-events:none; clip-path:path("M 200 252 L 537 252 L 521 656 L 183 653 Z M 699 153 L 1274 150 L 1268 728 L 670 723 Z"); }
.flightLayer img { position:absolute; object-fit:cover; object-position:50% 4%; animation:move-into-frame 850ms cubic-bezier(.30,.05,.20,1) forwards; }
@keyframes move-into-frame {
  0% { left:var(--from-x);top:var(--from-y);width:var(--from-w);height:var(--from-h);opacity:1; }
  88% { opacity:1; }
  100% { left:183px;top:250px;width:358px;height:409px;opacity:0; }
}
@media(prefers-reduced-motion:reduce){.flightLayer{display:none}}
.topline { min-height:46px; display:flex; align-items:center; justify-content:space-between; }
.topline .languages { margin-left:auto; }
.backToFour { font:18px "Gill Sans","Gujarati Sangam MN","Museum Gujarati",sans-serif; padding:6px; min-height:44px; }