/* Edwin's album. Walnut, woven olive cloth, old brass and warm cotton paper.
   The original page layout remains in book.css; this is the room and binding. */
:root {
  --paper-lit: #fcf8ed;
  --paper: #f2ebd9;
  --paper-deep: #d9caac;
  --ink: #39392e;
  --ink-soft: #72705c;
  --ink-faint: #968e76;
  --cloth: #525d42;
  --cloth-deep: #303d2e;
  --spine: #263126;
  --sun: #d4b779;
  --sun-deep: #8e794d;
  --gold: #dfc892;
  --hand-x: 0;
  --hand-y: 0;
  --font-ui: "Helvetica Neue", Arial, sans-serif;
}
body { background: #91633b; }
button { touch-action: manipulation; }

/* The still life moves a few pixels independently of the book. */
.room-photograph {
  position: absolute; inset: -22px;
  background: #a77747 url('../assets/scene/walnut-table-clear.jpg') center / cover no-repeat;
  transform: translate(calc(var(--hand-x) * -4px), calc(var(--hand-y) * -3px));
  transition: transform 1.5s ease-out;
}
.room .sky { display: none; }
.sky-morning { background: linear-gradient(100deg, #eddac0, #c3ae91); }
.sky-noon { background: linear-gradient(100deg, #f7e9c1, #dab679); }
.sky-golden { background: linear-gradient(120deg, #f7db9d, #bb844b); }
.sky-dusk { background: linear-gradient(120deg, #a7b1ad, #666f80); }
.sky-evening { background: linear-gradient(120deg, #e8c78c, #946b49); }
.room::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #281b1466, transparent 12%);
}
.sunglow, .rays { display: none; }
body[data-theme="dusk"] .room-photograph { filter: none; }
.rays i { animation-duration: 24s; }
.table { display: none; }
#dust { opacity: .42; }

/* Closed: an object on the right. Open: the reader has the whole table. */
.stage { padding: 15px 0 55px 28vw; transition: padding 1.65s cubic-bezier(.22,.7,.22,1); }
body.open .stage, body.opening .stage { padding-left: 0; }
.scene { perspective: 1900px; perspective-origin: 50% 33%; }
.tilt {
  transform: rotateX(calc(20deg + var(--hand-y) * -2.8deg)) rotateY(calc(-9deg + var(--hand-x) * 3deg)) rotateZ(-7deg);
  transition: transform 1.6s cubic-bezier(.2,.65,.2,1);
}
body.open .tilt, body.opening .tilt {
  transform: rotateX(calc(7deg + var(--hand-y) * -1.5deg)) rotateY(calc(var(--hand-x) * 1.5deg)) rotateZ(-.5deg);
}
.book { transition-duration: 1.6s; }
.book-shadow {
  top: 4%; bottom: -6%; left: 1%; right: -1%;
  border-radius: 7%; background: #22190dcc; filter: blur(23px);
  transform: translate3d(15px, 27px, -28px);
  transition: left 1.6s, right 1.6s, opacity 1.6s;
}
.book.at-start .book-shadow { left: 49%; right: -3%; }
.book.at-end .book-shadow { left: -3%; right: 49%; }
.book.single .book-shadow { left: 0; right: -3%; }
.face.front { transform: translateZ(.65px); }
.face.back { transform: rotateY(180deg) translateZ(.65px); }
.sheet.is-cover .face.front, .sheet.is-back .face.front { transform: translateZ(3px); }
.sheet.is-cover .face.back, .sheet.is-back .face.back { transform: rotateY(180deg) translateZ(3px); }
.sheet-thickness {
  position: absolute; right: -3px; top: 0; height: 100%; width: 6px;
  transform: rotateY(90deg); transform-style: preserve-3d;
  background: #d0c5ab; pointer-events: none;
}
.sheet.is-cover .sheet-thickness, .sheet.is-back .sheet-thickness {
  background: linear-gradient(90deg, #303b2b, #748063 40%, #36432e);
  box-shadow: 0 1px 1px #202619;
}
.stack { background: var(--paper); transform: translateZ(-10px); border: 1px solid #baa788; }
.stack::before {
  content: ''; position: absolute; left: 0; right: -1px; top: 100%; height: 18px;
  background: repeating-linear-gradient(0deg, #beae8b 0 1px, #ece2c9 1px 2.2px);
  border-bottom: 4px solid var(--cloth-deep); border-radius: 0 0 4px 4px;
  transform-origin: center top; transform: rotateX(-35deg);
  box-shadow: 0 3px 2px #211d1633;
}
.stack::after {
  content: ''; position: absolute; left: 100%; top: 0; bottom: -8px; width: 14px;
  background: repeating-linear-gradient(90deg, #c3b38e 0 1px, #eee4cb 1px 2px);
  transform: rotateY(32deg); transform-origin: left center;
  border-right: 3px solid var(--cloth-deep); border-radius: 0 3px 4px 0;
}
.stack.left::after { left: auto; right: 100%; transform: rotateY(-32deg); transform-origin: right center; border: 0; border-left: 3px solid var(--cloth-deep); }
.binding {
  position: absolute; left: calc(50% - 21px); top: -1.2%; height: 102.4%; width: 25px;
  background: linear-gradient(90deg, #1f2d23, #586048 40%, #2c392c 88%);
  border-radius: 10px 0 0 10px; box-shadow: inset 2px 0 3px #81916c55, -3px 7px 8px #302b2055;
  transform: translateZ(-8px); opacity: 0; transition: opacity .55s;
  display: grid; place-items: center; pointer-events: none;
}
.binding span { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .25em; color: #c5b581; opacity: .7; }
.book.at-start .binding { opacity: 1; }
.book.single .binding { left: -20px; }
.ribbon {
  position: absolute; left: 77%; top: 95%; height: 17%; width: 18px;
  background: linear-gradient(90deg, #8d6b3c, #bda06b 28%, #dbbe85 60%, #937345);
  transform: translateZ(-18px) rotate(-4deg); transform-origin: center top;
  clip-path: polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);
  transition: transform 1.6s; pointer-events: none;
}
.book.open .ribbon { transform: translateZ(-18px) rotate(7deg); }
.book.single .ribbon { left: 79%; }
.gutter { width: 8%; transform: translateX(-50%) translateZ(4px); opacity: 0; }
.book.is-turning .gutter { opacity: .35; }
.face { border-radius: 1px 5px 6px 1px; }
.sheet.is-cover .face, .sheet.is-back .face { box-shadow: inset 0 0 0 1px #efe4be22, 1px 1px 1px #202c2577; }
.paper { background: linear-gradient(100deg, #e3d9c1 0%, var(--paper-lit) 9%, #f5f0e2 83%, #e8dec8 100%); padding-bottom: 8%; line-height: 1.85; }
.face.back .paper { background: linear-gradient(90deg, #eee6d5, #fcf8ed 17%, #f7f2e7 84%, #dbcfb3); }
.grain { opacity: .14; }
.edge { background: linear-gradient(90deg, #3f352c29, #6055420a 5%, transparent 14%); }
.face.back .edge { background: linear-gradient(270deg, #3f352c38, #6055420b 6%, transparent 15%); }
.body p { text-align: left; }
.title { font-size: 1.85em; letter-spacing: .035em; margin-bottom: .65em; }
.kicker { font-size: .76em; color: #77715b; }
.folio { position: absolute; bottom: 12px; right: 20px; font: 11px var(--font-latin); color: #91846a; pointer-events: none; }
.scroll-cue { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 11px; color: #72674e; opacity: 0; pointer-events: none; transition: opacity .25s; }
.face.scrolly .scroll-cue { opacity: 1; }
.face.back .folio { left: 20px; right: auto; }
.page-sheen {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--flex, 0);
  background: linear-gradient(90deg, #30291e20, #fff8df88 22%, transparent 50%, #493a1f33 88%, #fffaf466);
}
.face.back .page-sheen { background: linear-gradient(270deg, #30291e20, #fff8df88 22%, transparent 50%, #493a1f33 88%, #fffaf466); }
.sheet.turning .face { pointer-events: none; }
.print { padding: 6px 6px 10px; box-shadow: 1px 2px 2px #352f2526, 3px 12px 15px -8px #352a1e75; transition: transform .35s, box-shadow .35s; }
.prints.one .print { width: 83%; }
.print::before, .print::after { background: #d8d1a67a; box-shadow: 0 1px 2px #514b2520; }
.print figcaption { font-size: .72em; }
.print:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 2px 14px 18px -7px #352a1e70; }
.print .play { opacity: .75; width: 1.8em; height: 1.8em; font-size: .8em; }

/* Gold foil on woven book cloth. */
.paper.t-cover, .paper.t-back, .face.back .paper.t-back {
  color: var(--gold);
  background-color: var(--cloth);
  background-image: repeating-linear-gradient(0deg, #00000017 0 .6px, #ffffff0b .6px 1.3px, transparent 1.3px 3px), repeating-linear-gradient(90deg, #00000012 0 .7px, transparent .7px 2px), radial-gradient(ellipse at 24% 15%, #728063, #4c593f 42%, #303e2f 100%);
  box-shadow: inset 5px 0 8px #10201a80, inset 9px 0 2px #a4b09235, inset 12px 0 8px #22302350, inset -1px 0 1px #c6c6a961;
  padding: 10% 10% 9%;
}
.paper.t-cover::after { width: 5%; background: linear-gradient(90deg, #17271c8c, #a2af7c35 26%, #17291d3b 58%, transparent); }
.paper.t-cover::before { content: ''; position: absolute; inset: 3px; border: 1px solid #d3dfb623; border-radius: 3px 7px 7px 3px; pointer-events: none; }
.paper .cover-frame { position: absolute; inset: 6.2% 7.5% 5.7% 10%; border: 1px solid #c7b68063; box-shadow: 0 0 0 4px #2130202b, inset 0 0 0 3px #21302024; pointer-events: none; }
.cover-frame::before, .cover-frame::after { content: '✦'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-size: 12px; color: #d8c18a; padding: 0 9px; background: #626e51; }
.cover-frame::after { top: auto; bottom: -12px; background: #3c4a35; }
.cover-edition { font-family: var(--font-latin); font-size: .78em; letter-spacing: .06em; margin: 1em 0 0; color: #d4c499; }
.cover-emblem { width: 32%; margin: 6% auto 1%; color: #dfc590; }
.cover-emblem svg { width: 100%; display: block; filter: drop-shadow(0 1px 0 #122519); }
.paper.t-cover .cover-name { font-family: var(--font-latin); font-style: normal; font-size: 5.3em; line-height: .95; color: #e5d3a1; letter-spacing: -.025em; margin: .06em 0 .28em; text-shadow: 0 1px 0 #142b1b, 0 -1px 0 #f4e9be66; }
.cover-title { font-size: 1.75em; color: #decc9a; text-shadow: 0 1px 0 #142b1b, 0 -1px 0 #fff4c333; letter-spacing: .14em; }
.cover-sub { color: #c9bf9b; font-size: .69em; letter-spacing: .08em; margin-top: 1em; }
.cover-foot { margin-top: auto; padding-bottom: 2%; }
.cover-years { font-size: .9em; letter-spacing: .2em; color: #decca1; }
.cover-love { font: italic .85em var(--font-latin); color: #b7b390; margin: .85em 0 0; }
.paper.t-back .cover-name { color: #dfc892; }
.sun { background: none; border: 1px solid #b19a64; box-shadow: inset 0 0 0 5px #ad98591a, 0 0 0 5px #ad985914; }
.sun.small { margin-top: auto; }
.paper.t-back .cover-name { margin-bottom: auto; }
.paper.t-quote .quote { font-size: 1.32em; line-height: 2.15; }

/* The room's quiet labels and reading controls. */
.ui { transition: opacity 1s .4s; }
.masthead { position: absolute; top: 30px; left: 40px; display: flex; align-items: center; gap: 13px; color: #f7edda; text-shadow: 0 1px 6px #3723118c; font-size: 15px; }
.masthead-mark { border: 1px solid #efe3c677; width: 36px; height: 41px; display: grid; place-items: center; font: italic 25px var(--font-latin); }
.masthead small { display: block; font: 11px var(--font-ui); margin-top: 4px; color: #eadfc8; letter-spacing: .035em; }
.welcome { position: absolute; width: 310px; left: 10.5%; top: 50%; transform: translateY(-49%); color: #fff5e3; text-shadow: 0 1px 14px #44271144; transition: opacity .65s, transform 1s, visibility 0s; }
.welcome-preface { font: italic 22px var(--font-latin); margin: 0 0 18px; }
.welcome h2 { font: 500 clamp(75px,7.2vw,116px)/.9 var(--font-latin); letter-spacing: -.035em; margin: 0 0 24px -5px; }
.welcome-title { font-size: 27px; letter-spacing: .18em; margin: 0 0 12px; }
.welcome-copy { font-size: 16px; margin: 0; color: #faeed7; }
.welcome-dedication { font: 18px/1.5 var(--font-latin); margin: 24px 0 29px; color: #f5e6ca; }
.btn-open {
  position: relative; left: auto; bottom: auto; transform: none;
  display: grid; grid-template-columns: 1fr 25px; align-items: center; gap: 4px 25px;
  text-align: left; padding: 14px 23px; border-radius: 4px;
  border: 1px solid #edddb686; background: #f7efdc; color: #3c452e;
  font-size: 17px; letter-spacing: .06em; text-indent: 0;
  box-shadow: 0 6px 14px #30250e2b, inset 0 1px 0 #ffffffcc;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.btn-open .button-english { grid-column: 1; font: 11px var(--font-ui); letter-spacing: .04em; color: #66694f; }
.btn-open svg { grid-column: 2; grid-row: 1 / 3; width: 24px; height: 24px; }
.btn-open:hover { transform: translateY(-2px); background: #fff9e9; box-shadow: 0 10px 20px #30250e3d; }
.hint { position: static; transform: none; margin: 15px 0 0; font-size: 11px; letter-spacing: .035em; color: #f1e1c9; text-shadow: 0 1px 5px #442a16; }
body.open .welcome, body.opening .welcome { opacity: 0; visibility: hidden; transform: translate(-12px, -49%); pointer-events: none; transition: opacity .45s, transform 1s, visibility 0s .45s; }
.reading-caption { position: absolute; top: 35px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff2dc; opacity: 0; visibility: hidden; transition: opacity .7s; }
.reading-caption > span { font-size: 18px; letter-spacing: .07em; }
.reading-caption small { display: block; font: italic 14px var(--font-latin); margin-top: 5px; color: #edddc0; }
body.open .reading-caption { opacity: 1; visibility: visible; }
.music { top: calc(30px + env(safe-area-inset-top)); right: 36px; border: 1px solid #efe5ce55; color: #f7ecd5; background: #453c2d6e; backdrop-filter: blur(12px); font: 11px var(--font-ui); letter-spacing: .02em; min-height: 40px; box-shadow: 0 3px 10px #241f131a; padding: 10px 16px; }
.music .bars i { background: #d9c393; }
.motion-toggle { position: absolute; right: 41px; top: 73px; min-width: 44px; min-height: 44px; background: none; border: 0; padding: 8px 0; color: #f2e6cf; font-size: 11px; cursor: pointer; text-shadow: 0 1px 5px #372614; }
.motion-toggle span { font: 10px var(--font-ui); margin-left: 5px; }
.motion-toggle::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #efe5c0; margin-right: 7px; vertical-align: middle; }
.motion-toggle[aria-pressed="true"]::before { background: #e9d6a6; }
.places { position: absolute; left: 40px; bottom: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.places-caption { flex-basis: 100%; color: #edddc1; font: italic 14px var(--font-latin); margin-bottom: 4px; }
.places button { font: 12px var(--font-ui); letter-spacing: .02em; padding: 7px 0; border: none; background: none; color: #f6ebd6; cursor: pointer; position: relative; }
.places button::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 7px; border: 1px solid #e6cf9e; border-radius: 50%; vertical-align: 2px; }
.places button[aria-current]::before { background: #f8e6b7; box-shadow: 0 0 7px #fbe1a175; }
.places button:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.place-thread { width: 19px; height: 1px; background: #dbc99d55; }
.family-note { position: absolute; right: 39px; bottom: 35px; color: #f5e5cb; font: italic 15px var(--font-latin); margin: 0; }
.pager { bottom: calc(31px + env(safe-area-inset-bottom)); gap: 18px; }
.pager button { color: #f7edda; border-color: #ead9b359; background: #3f3c2d91; backdrop-filter: blur(12px); box-shadow: 0 4px 9px #231b1226; letter-spacing: .02em; min-width: 44px; min-height: 44px; font-size: 13px; }
.pager button:hover { background: #595c43; }
.pager button:disabled { opacity: .35; }
.reading-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#pageCount { font: 12px var(--font-latin); color: #f3e3c7; letter-spacing: .12em; }
.progress { width: 140px; height: 1px; background: #f2e1b63d; }
.progress i { background: #eed7a1; }
.btn-again { bottom: 39px; font-size: 15px; color: #f6ead1; background: #424831e6; border-color: #decea970; min-height: 44px; }
.flashback { z-index: 1; background: none; }
.flashback.on { opacity: .06; }
.flashback.light-only.on { opacity: .03; }
.fb-media { inset: 0; }
.fb-media img, .fb-media video { filter: sepia(.15) saturate(.8); }
.fb-leak { opacity: .15; }
.fb-grain { display: none; }
.lightbox { background: #23291de8; backdrop-filter: blur(14px); }
.lb-inner img, .lb-inner video { border-color: #f4efe1; box-shadow: 0 25px 80px #0d120b88; }
.lb-cap { max-width: 85vw; font-size: 16px; }
.still *, .still *::before, .still *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
.still .flashback { display: none; }

@media (max-width: 1150px) {
  .welcome { left: 6%; width: 260px; }
  .welcome h2 { font-size: 86px; }
  .welcome-title { font-size: 23px; }
  .stage { padding-left: 34vw; }
  .places { left: 26px; }
  body.open .places, body.open .family-note { display: none; }
  .masthead { left: 26px; }
}
@media (max-width: 900px) {
  .stage { padding-left: 0; padding-bottom: 65px; padding-top: 25px; }
  .welcome { position: static; transform: none; }
  .welcome > :not(.btn-open):not(.hint) { display: none; }
  .welcome .btn-open { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 218px; padding: 11px 21px; font-size: 15px; }
  .welcome .btn-open:hover { transform: translateX(-50%) translateY(-2px); }
  .welcome .hint { position: absolute; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-size: 10px; }
  body.open .welcome, body.opening .welcome { transform: none; }
  .family-note { display: none; }
  .places { left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); white-space: nowrap; flex-wrap: nowrap; gap: 9px; }
  .places-caption { display: none; }
  .places button { font-size: 10px; }
  .tilt { transform: rotateX(calc(10deg + var(--hand-y) * -2deg)) rotateY(calc(-5deg + var(--hand-x) * 2deg)) rotateZ(-4deg) scale(.9); }
  .masthead { top: 25px; left: 23px; font-size: 13px; }
  .masthead-mark { width: 30px; height: 36px; font-size: 22px; }
  .music { right: 23px; top: calc(24px + env(safe-area-inset-top)); }
  .motion-toggle { right: 27px; top: 74px; }
  .reading-caption { top: 89px; }
  .reading-caption > span { font-size: 14px; }
  .reading-caption small { display: none; }
  .pager { bottom: calc(30px + env(safe-area-inset-bottom)); }
}
@media (max-width: 719px), (max-height: 559px) {
  .room-photograph { background-size: auto 105%; background-position: 84% center; }
  .stage { padding-bottom: 65px; }
  .scene { perspective: 1700px; }
  .tilt { transform: rotateX(9deg) rotateY(-4deg) rotateZ(-4deg) scale(.9); }
  body.open .tilt, body.opening .tilt { transform: rotateX(3deg); }
  .paper { padding-top: 8%; }
  .paper.t-cover { padding-top: 10%; font-size: min(var(--fs), calc(var(--ph) * .029)); }
  .cover-edition { font-size: .71em; margin-top: .8em; }
  .cover-emblem { width: 31%; margin-top: 5%; }
  .paper.t-cover .cover-name { font-size: 4.7em; }
  .cover-title { font-size: 1.5em; }
  .cover-sub { font-size: .63em; }
  .cover-love { font-size: .8em; }
  .cover-years { font-size: .82em; }
  .title { font-size: 1.65em; }
  .music .lbl-on, .music .lbl-off { display: none !important; }
  .music { width: 40px; padding: 10px; }
  .motion-toggle { right: 21px; font-size: 10px; }
  .motion-toggle span { display: none; }
  .pager { gap: 24px; }
  .pager button span { display: none; }
  .progress { width: 128px; }
  .reading-caption { top: 88px; }
  .prints.strip { gap: 18px 8%; }
  .prints.strip .print { width: 43%; }
  .paper.t-quote .quote { font-size: 1.2em; }
  .btn-again { bottom: 36px; }
}
@media (max-height: 680px) and (min-width: 901px) {
  .welcome h2 { font-size: 70px; margin-bottom: 16px; }
  .welcome-preface { font-size: 18px; margin-bottom: 12px; }
  .welcome-dedication { margin: 18px 0; font-size: 16px; }
  .hint { font-size: 10px; }
  .cover-emblem { width: 28%; margin-top: 4%; }
  .paper.t-cover .cover-name { font-size: 4.5em; }
  .cover-title { font-size: 1.45em; }
}
@media (max-height: 559px) {
  .room-photograph { background-size: cover; }
  .stage { padding: 18px 0 35px; }
  .masthead { top: 16px; }
  .music { top: 16px; }
  .motion-toggle { top: 63px; }
  .welcome > :not(.btn-open) { display: none; }
  .welcome .btn-open { bottom: 13px; padding: 8px 17px; grid-template-columns: auto 20px; font-size: 13px; width: 188px; }
  .welcome .btn-open .button-english { display: none; }
  .welcome .btn-open svg { grid-row: 1; width: 20px; height: 20px; }
  .places { display: none; }
  .reading-caption { left: 25px; top: 84px; transform: none; text-align: left; max-width: 140px; }
  .pager { bottom: 12px; }
  .pager button { min-height: 36px; }
  .btn-again { bottom: 12px; }
  .cover-edition { font-size: .71em; margin-top: 0; }
  .cover-emblem { width: 24%; margin-top: 4%; }
  .paper.t-cover .cover-name { font-size: 4.7em; }
  .cover-title { font-size: 1.5em; }
  .cover-sub { font-size: .63em; }
  .cover-love { display: none; }
  .cover-years { font-size: .65em; }
}
@media (max-height: 680px) and (max-width: 719px) and (min-height: 560px) {
  .stage { padding-bottom: 85px; }
  .welcome .btn-open { bottom: calc(83px + env(safe-area-inset-bottom)); }
  .welcome .hint { bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .flashback { display: none; }
}