:root {
  --paper: #f5efe6;
  --ink: #707174;
  --silver-a: #57595c;
  --silver-b: #b9b9b6;
  --silver-c: #6d6e70;
  --salmon: #df9788;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body {
  background: #ece7de;
  color: var(--ink);
  overflow: hidden;
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.book { position: relative; width: 100vw; height: 100dvh; perspective: 1800px; overflow: hidden; }
.sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
  backface-visibility: hidden;
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(.77,0,.18,1), box-shadow 900ms ease;
  will-change: transform;
}
.sheet--cover { z-index: 2; }
.sheet--inside { z-index: 1; overflow-y: auto; }

.sheet--cover.is-turned { transform: rotateY(-178deg); box-shadow: 25px 0 55px rgba(40,35,30,.10); pointer-events: none; }

.paper-art {
  position: absolute; inset: 0;
  background: url("page1-art.jpg") center center / cover no-repeat;
  filter: saturate(.88) brightness(1.025);
}
.paper-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%, rgba(255,255,255,.05));
  pointer-events: none;
}

.brand {
  position: absolute;
  top: 12.7%; left: 7.8%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.35rem, 4.4vw, 4.5rem);
  line-height: .9;
  letter-spacing: .015em;
  font-weight: 400;
  background: linear-gradient(102deg, #4e5053 0%, #bfc0bd 27%, #696b6d 45%, #d5d5d1 61%, #5d5f62 82%, #a9aaa8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 .5px 0 rgba(255,255,255,.35);
  white-space: nowrap;
}

.world {
  position: absolute;
  right: 5.4%; top: 29%;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.62rem, .85vw, .86rem);
  letter-spacing: .25em;
  color: #77787a;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.world-rule { display:block; width: 1px; height: 52px; background: #8c8d8e; margin-left: 1px; }

.legacy {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 7.5%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.68rem, .9vw, .9rem);
  letter-spacing: .27em;
  text-transform: none;
  color: #77787a;
  white-space: nowrap;
}

.corner-cue {
  position: absolute; right: 0; bottom: 0; width: 48px; height: 48px;
  opacity: .45;
  background: linear-gradient(135deg, transparent 49%, rgba(110,111,112,.45) 50%, transparent 52%);
}
.corner-cue::after { content:""; position:absolute; right:0; bottom:0; width:18px; height:18px; border-top:1px solid rgba(100,100,100,.4); border-left:1px solid rgba(100,100,100,.4); transform: translate(1px,1px); }

.turn-zone { position:absolute; top:0; bottom:0; border:0; background:transparent; padding:0; cursor:pointer; z-index:5; }
.turn-zone--next { right:0; width:32%; }
.turn-zone--prev { left:0; width:24%; }
.turn-zone:focus-visible { outline: 1px solid rgba(80,80,80,.35); outline-offset:-6px; }

.sheet--inside { background:
  radial-gradient(circle at 12% 18%, rgba(224,151,136,.035), transparent 28%),
  linear-gradient(110deg, #f7f2ea, #f3eee6 58%, #f7f1e8);
}
.inside-wrap { min-height:100%; width:min(1060px, 82vw); margin:0 auto; padding:12vh 0 13vh; }
.institutional, .english { max-width: 700px; margin-left: 7%; }
.institutional h1, .english h2 {
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.7rem, 2.6vw, 2.55rem);
  font-weight:400; letter-spacing:.04em; margin:0 0 4.5vh; color:#67696b;
}
.institutional p, .english p {
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(1.02rem, 1.35vw, 1.28rem);
  line-height:1.52; font-weight:400; margin:0 0 2.9vh; color:#67696b;
}
.institutional strong { font-weight:600; }
.signature { margin-top:5vh; font-family:"Cormorant Garamond", Georgia, serif; font-size:1.15rem; letter-spacing:.26em; color:#6b6c6e; }
.legacy--inside { position:static; transform:none; margin-top:1.3vh; font-size:.8rem; letter-spacing:.18em; }
.english-rule { height:1px; background:rgba(100,100,100,.18); width:86%; margin:9vh auto 7vh; }
.english h2 { font-size:1.55rem; margin-bottom:3.2vh; }
.english p { font-size:1.05rem; }

@media (max-width: 700px) {
  .brand { top: 11.5%; left: 8%; font-size: 2.25rem; }
  .world { right: 4.2%; top: 34%; font-size:.58rem; letter-spacing:.18em; gap:12px; }
  .world-rule { height:35px; }
  .legacy { bottom: 6.2%; font-size:.62rem; letter-spacing:.16em; }
  .inside-wrap { width: 84vw; padding: 9vh 0 14vh; }
  .institutional, .english { margin-left:0; max-width:none; }
  .institutional h1 { margin-bottom:4vh; }
  .institutional p, .english p { font-size:1rem; line-height:1.46; margin-bottom:2.5vh; }
  .english-rule { margin:7vh auto 6vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition:none; }
}