@property --fold-shade { syntax: '<number>'; inherits: true; initial-value: 0; }
:root { color-scheme: light; --sheet: 28.1vw; }
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; height: 100%; margin: 0; overflow: hidden; background: #f4f4f4; }
body { position: fixed; inset: 0; width: 100vw; height: 100dvh; overscroll-behavior: none; }
button { -webkit-tap-highlight-color: transparent; }
.direction-cursor { display: none; }
.to-first-page {
  --return-width: clamp(40px, 4.0625vw, 78px);
  appearance: none;
  position: fixed;
  left: clamp(18px, 1.5625vw, 30px);
  top: clamp(18px, 1.5625vw, 30px);
  z-index: 180;
  width: var(--return-width);
  height: calc(var(--return-width) * 92 / 76);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.to-first-page[hidden] { display: none; }
.to-first-page img {
  display: block;
  width: var(--return-width);
  height: calc(var(--return-width) * 92 / 76);
}
.to-first-page:focus-visible { outline: 1px solid #828282; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pages.is-direction-cursor,
  .pages.is-direction-cursor .page-control,
  .pages.is-direction-cursor .is-scrollable,
  .pages.is-direction-cursor .project-photos img { cursor: none; }
  .direction-cursor {
    position: fixed; left: 0; top: 0; z-index: 200;
    display: block; width: 120px; height: 52px;
    max-width: 120px; max-height: 52px;
    object-fit: contain;
    pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .16));
    transition: opacity .08s linear;
    animation: none !important;
  }
  .direction-cursor[data-direction="photo"] {
    width: 38px; height: 146px;
    max-width: 38px; max-height: 146px;
  }
  .direction-cursor.is-visible { opacity: 1; }
}
.pages {
  position: relative; width: 100vw; max-width: 100vw; height: 100%; height: 100dvh;
  overflow: hidden; isolation: isolate; background: #f4f4f4;
  perspective: 2400px; perspective-origin: 43.5% 50%; touch-action: pan-y;
}
.endgame {
  /* The finished book keeps the same geometry as every project spread:
     a sliver of the resume remains visible, the turned Selected Works leaf
     occupies one sheet, and the game begins at the fixed 43.5vw spine. */
  position: absolute; inset: 0 0 0 calc(43.5vw - 28.1vw); z-index: 0;
  display: grid; grid-template-columns: 28.1vw minmax(0, 1fr);
  width: calc(100vw - (43.5vw - 28.1vw)); max-width: none; height: 100dvh;
  overflow: visible; background: #f4f4f4;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.endgame.is-active { z-index: 150; opacity: 1; visibility: visible; pointer-events: auto; }
.endgame.is-preview { opacity: 1; visibility: visible; pointer-events: none; }
.endgame-portfolio {
  position: relative; min-width: 0; height: 100%; overflow: hidden;
  border-right: 1px solid #e2e2e2; background: #f4f4f4;
}
.endgame-game { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.endgame-canvas {
  --endgame-width: 56.5vw;
  position: relative; width: 100%; height: 100%; overflow: hidden;
  color: #828282; font-family: HelveticaNeueCyr, Arial, sans-serif;
}
.endgame-copyright {
  position: absolute; top: 2.75%; left: 0; width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 1.55em;
  z-index: 1000; pointer-events: none;
  font-size: calc(var(--endgame-width) * .0175);
}
.endgame-copyright .copyright-mark { font-size: 1.75em; }
.endgame-copyright .year { gap: 1.35em; }
.endgame-title {
  position: absolute; margin: 0; font-family: Anaktoria, Georgia, serif;
  top: 8.15%; left: 6%; width: 88%; text-align: center;
  z-index: 1000; pointer-events: none;
  font-size: calc(var(--endgame-width) * .0525); font-weight: 400; line-height: .88;
  text-transform: uppercase;
}
.endgame-signature {
  position: absolute; top: 20.8%; left: 0; width: 100%; margin: 0;
  text-align: center; font-family: Anaktoria, Georgia, serif;
  z-index: 1000; pointer-events: none;
  font-size: calc(var(--endgame-width) * .02); line-height: 1;
}
.endgame-instruction {
  position: absolute; top: 28.9%; left: 4.5%; width: 91%; margin: 0;
  z-index: 1000; pointer-events: none;
  text-align: center; font-size: calc(var(--endgame-width) * .0175); line-height: 1.03;
}
.endgame-rule { position: absolute; top: 35.5%; left: 4.5%; z-index: 1000; display: block; width: 91%; height: 1px; pointer-events: none; }
.endgame-shape {
  position: absolute; display: block; height: auto; margin: 0;
  user-select: none; -webkit-user-drag: none; touch-action: none;
  cursor: grab;
}
.endgame-shape.is-dragging { cursor: grabbing; }
.endgame-shape--union { left: 41.2%; top: 52%; width: 45%; }
.endgame-shape--witch { left: 13.5%; top: 52.6%; width: 31%; }
.endgame-shape--figure { left: 25.8%; top: 73.5%; width: 18.5%; }
.endgame-shape--union-one { left: 24.8%; top: 70.9%; width: 26%; }
.endgame-shape--nine { left: 52.5%; top: 64.7%; width: 21%; }
.endgame-shape--one { left: 13.4%; top: 65.4%; width: 4.9%; }
.endgame-shape--two { left: 21%; top: 42.8%; width: 14.3%; transform: rotate(37deg); transform-origin: center; }
.endgame-shape--three { left: 69.6%; top: 78.2%; width: 12.6%; }
.endgame-shape--four { left: 49%; top: 64.2%; width: 16.8%; }
.endgame-shape--five { left: 25%; top: 60.5%; width: 17.6%; }
.endgame-shape--six { left: 79.5%; top: 52.6%; width: 8.6%; }
.endgame-shape--seven { left: 74%; top: 74.9%; width: 13%; }
.endgame-shape--eight { left: 52.9%; top: 42%; width: 9.1%; }
.cover, .page { position: absolute; inset: 0 auto 0 0; margin: 0; }
.cover {
  width: 43.5vw; z-index: 0; background: #f4f4f4; transform-origin: left center; backface-visibility: hidden;
  /* The résumé is taller than the screen, so it scrolls under the pointer. */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.cover::-webkit-scrollbar { display: none; }
.cover-control { pointer-events: none; }
.page {
  width: var(--sheet); transform-origin: left center;
  transform-style: preserve-3d; overflow: visible !important;
  will-change: transform; background: transparent;
}
.page-face {
  /* The one-pixel overlap prevents the background or a lower leaf from
     flashing through the joins while the stack is moving. */
  position: absolute; inset: 0 -1px 0 0; background: #f4f4f4;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* The edge shadow falls to the right, onto the pages lying beneath. */
  box-shadow: 3px 0 7px rgb(0 0 0 / .055), 1px 0 1px rgb(0 0 0 / .04);
}
.page-front { transform: rotateY(0deg); }
.page-back { transform: rotateY(180deg); background: #f4f4f4; }
.page-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, rgb(30 30 30 / .08), transparent 28%, rgb(30 30 30 / .025));
  opacity: var(--fold-shade);
}
.page-back::after { background: linear-gradient(270deg, rgb(30 30 30 / .1), transparent 42%); }
.is-turning .page-face { box-shadow: 4px 0 12px rgb(0 0 0 / .03), 1px 0 1px rgb(0 0 0 / .025); }
/* Case photographs stay flat against the spread, without sheet shadows. */
.project-page .page-back,
.project-page.is-turning .page-back { box-shadow: none; }
.project-page .page-back::after { background: none; }
.page-control {
  appearance: none; position: absolute; z-index: 3; inset: 0;
  width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  cursor: pointer; touch-action: pan-y; color: inherit;
}
.page-control:focus-visible { outline: 1px solid #828282; outline-offset: -5px; }
.cover-control { z-index: 2; }
.works-page .page-front {
  overflow-y: auto; overflow-x: hidden;
  border-left: 1px solid #e8e8e8;
}
/* Turned leaves share one binding edge. Their shadows must not accumulate
   into a dark stripe as more case pages are opened. */
.page[data-state="turned"] .page-face { box-shadow: none; }
.page[data-state="turned"] .page-back { border-right: 1px solid #e8e8e8; }
/* Only the uppermost open left page casts onto the résumé. Targeting the
   leaf immediately before the current one avoids stacking hidden shadows. */
.page[data-state="turned"]:has(+ .page[data-state="current"]) .page-back,
.page[data-state="turned"]:has(+ .page.is-turning) .page-back,
.page:last-child[data-state="turned"] .page-back,
.endgame.is-active .endgame-portfolio {
  box-shadow: -10px 0 22px rgb(0 0 0 / .035), -2px 0 7px rgb(0 0 0 / .018);
}
/* Scroll zones: the wheel over a zone scrolls only that zone. */
.is-scrollable { cursor: pointer; }
.face-scroll {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none;
}
.face-scroll::-webkit-scrollbar { display: none; }
.is-scrollable > .page-control { pointer-events: none; }
/* A project waiting in the stack only peeks out, so it doesn't scroll. */
.project-page[data-state="tab"] .face-scroll { overflow-y: hidden; }
.turn-shadow {
  position: absolute; top: 0; bottom: 0; left: -7vw; width: 14vw; z-index: 99;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / .035) 50%, transparent);
  filter: blur(12px);
}
@media (max-width: 900px) {
  :root { --sheet: 76vw; }
  .cover { width: 88vw; }
  .pages { perspective: 1400px; perspective-origin: 35% 50%; }
}

/* Use the compact desktop composition on phones held horizontally. */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --sheet: 28.1vw; }
  .cover { width: 43.5vw; }
  .pages { perspective: 2400px; perspective-origin: 43.5% 50%; }

  .endgame-copyright {
    line-height: 1.1;
  }

  .endgame-title {
    top: 8.15%;
    font-size: min(calc(var(--endgame-width) * .0525), 13dvh);
    line-height: .968;
  }

  .endgame-signature {
    top: 20.8%;
    line-height: 1.1;
  }

  .endgame-instruction {
    top: 28.9%;
    line-height: 1.133;
  }

  .endgame-rule {
    top: 35.5%;
  }
}