/* A single editorial type treatment for every appearance of Charlotte's name. */
.profile-main h1,
.profile-main h1 em,
.contact h2,
.contact h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* The project image is a cover selector, not an immediate modal trigger. */
.project-image-wrap { border: 0; padding: 0; text-align: left; cursor: pointer; }
.project-image-wrap img { object-fit: contain; background: #f5eee5; }
.project-image-wrap:focus-visible { outline: 2px solid var(--accent-lilac); outline-offset: 5px; }
.project-image-wrap .project-cover-prompt { position: absolute; right: 22px; bottom: 18px; z-index: 2; color: #fff; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .24s ease, transform .24s ease; }
.project-image-wrap:hover .project-cover-prompt,
.project-image-wrap:focus-visible .project-cover-prompt { opacity: 1; transform: translateY(0); }
.project-image-wrap .image-number { left: 36px; bottom: 28px; }

.project-reader {
  position: fixed; z-index: 100; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px clamp(20px, 4vw, 64px) 20px; overflow: hidden;
  background: radial-gradient(circle at 20% 18%, rgba(151,78,226,.20), transparent 29%), radial-gradient(circle at 80% 70%, rgba(230,109,185,.16), transparent 32%), rgba(9,5,15,.98);
  color: #f9f6fc; opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.project-reader.is-open { opacity: 1; pointer-events: auto; }
.project-reader[aria-hidden="true"] { visibility: hidden; }
.project-reader.is-open[aria-hidden="false"] { visibility: visible; }
.reader-bar { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(235,219,255,.24); font: 500 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.reader-bar p { margin: 0; }
.reader-bar p:nth-child(2) { color: var(--accent-lilac); }
.reader-bar button { justify-self: end; border: 0; background: transparent; padding: 0; color: rgba(255,255,255,.72); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.reader-bar button:hover { color: #fff; }

/* A single full image is divided at the book spine: it is never cropped or duplicated. */
.book-stage {
  --book-ratio: 2.8125;
  align-self: center; justify-self: center; position: relative;
  width: min(90vw, 1500px, calc(69vh * var(--book-ratio))); aspect-ratio: var(--book-ratio);
  perspective: 2600px; outline: none;
}
.book-stage:focus-visible { outline: 1px solid var(--accent-lilac); outline-offset: 10px; }
.album-book { position: absolute; inset: 0; transform-style: preserve-3d; filter: drop-shadow(0 30px 38px rgba(0,0,0,.46)); }

/* The reader starts on the same cover selected in Selected Work, then that cover becomes the first physical leaf. */
.start-cover { position: absolute; z-index: 8; top: 0; left: 50%; width: 50%; height: 100%; margin: 0; padding: 0; border: 0; transform: rotateY(0); transform-origin: left center; transform-style: preserve-3d; cursor: pointer; filter: drop-shadow(0 30px 38px rgba(0,0,0,.46)); transition: transform 1.08s cubic-bezier(.32,.01,.16,1); }
.start-cover-front, .start-cover-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fbf5ee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.start-cover-front { border-radius: 0 12px 12px 0; }
.start-cover-back { border-radius: 12px 0 0 12px; transform: rotateY(180deg) translateZ(1px); }
.start-cover-front::after, .start-cover-back::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 15px 0 22px rgba(24,12,37,.13), inset 0 0 24px rgba(54,26,81,.08); }
.start-cover-front img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.book-stage.cover-state .album-book { opacity: 0; }
.book-stage.opening-state .album-book { opacity: 0; }
.book-stage.open-state .album-book { opacity: 1; transition: opacity .18s ease; }
.book-stage.opening-state .start-cover { transform: rotateY(-180deg); }
.book-stage.open-state .start-cover, .book-stage.end-state .start-cover { display: none; pointer-events: none; }
.book-stage.cover-state .start-cover { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.static-page { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; background: #fbf5ee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 28px rgba(54,26,81,.10); }
.static-left { left: 0; border-radius: 12px 0 0 12px; }
.static-right { right: 0; border-radius: 0 12px 12px 0; }
.static-left::after, .static-right::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.static-left::after { box-shadow: inset -18px 0 23px rgba(26,14,39,.13); }
.static-right::after { box-shadow: inset 18px 0 23px rgba(26,14,39,.13); }
.page-crop { position: absolute; inset: 0; overflow: hidden; background: #fbf5ee; }
.page-crop img { position: absolute; top: 0; width: 200%; height: 100%; display: block; object-fit: contain; user-select: none; pointer-events: none; }
.left-crop img { left: 0; }
.right-crop img { right: 0; }

/* The leaf has a distinct front and back. This is what makes a physical, album-like turn. */
.turn-leaf { position: absolute; z-index: 4; top: 0; width: 50%; height: 100%; display: none; transform-style: preserve-3d; pointer-events: none; }
.turn-leaf.forward { display: block; left: 50%; transform-origin: left center; animation: leaf-forward 1.08s cubic-bezier(.32,.01,.16,1) both; }
.turn-leaf.backward { display: block; left: 0; transform-origin: right center; animation: leaf-backward 1.08s cubic-bezier(.32,.01,.16,1) both; }
.leaf-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fbf5ee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.leaf-front { border-radius: 0 12px 12px 0; }
.leaf-back { border-radius: 12px 0 0 12px; transform: rotateY(180deg) translateZ(1px); }
.turn-leaf.backward .leaf-front { border-radius: 12px 0 0 12px; }
.turn-leaf.backward .leaf-back { border-radius: 0 12px 12px 0; }
.turn-leaf.backward .leaf-front img { left: 0; right: auto; }
.turn-leaf.backward .leaf-back img { right: 0; left: auto; }
.turn-leaf::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; backface-visibility: hidden; background: linear-gradient(90deg, rgba(16,7,25,.28), transparent 30%, rgba(255,255,255,.16) 56%, rgba(16,7,25,.18)); mix-blend-mode: multiply; }
.turn-leaf.forward::after { animation: leaf-shade-forward 1.08s ease-in-out both; }
.turn-leaf.backward::after { animation: leaf-shade-backward 1.08s ease-in-out both; }
@keyframes leaf-forward {
  0% { transform: rotateY(0deg) translateZ(1px); }
  30% { transform: rotateY(-34deg) translateZ(18px); }
  65% { transform: rotateY(-142deg) translateZ(18px); }
  100% { transform: rotateY(-180deg) translateZ(1px); }
}
@keyframes leaf-backward {
  0% { transform: rotateY(0deg) translateZ(1px); }
  30% { transform: rotateY(34deg) translateZ(18px); }
  65% { transform: rotateY(142deg) translateZ(18px); }
  100% { transform: rotateY(180deg) translateZ(1px); }
}
@keyframes leaf-shade-forward { 0%,100% { opacity: .15; } 48% { opacity: .82; } }
@keyframes leaf-shade-backward { 0%,100% { opacity: .15; } 48% { opacity: .82; } }
.album-book::before { content: ""; position: absolute; z-index: 6; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(13,6,23,.34), rgba(255,255,255,.20), rgba(13,6,23,.3)); box-shadow: 0 0 15px rgba(20,8,30,.32); pointer-events: none; }

/* The final photograph becomes the closing half-cover after the final leaf settles. */
.end-cover { position: absolute; z-index: 7; top: 0; left: 50%; width: 50%; height: 100%; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; background: #fbf5ee; border-radius: 0 12px 12px 0; transform: rotateY(-180deg); transform-origin: left center; transform-style: preserve-3d; box-shadow: 0 30px 70px rgba(0,0,0,.52); transition: transform 1.02s cubic-bezier(.32,.01,.16,1), opacity .18s ease .6s; }
.end-cover img { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.book-stage.end-state .album-book { opacity: 0; transform: scale(.98); transition: opacity .24s ease .7s, transform .8s ease; }
.book-stage.end-state .end-cover { opacity: 1; pointer-events: auto; transform: rotateY(0deg); }
.book-stage.end-state .end-cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 14px 0 22px rgba(24,12,37,.12), inset 0 0 24px rgba(54,26,81,.08); pointer-events: none; }

.reader-edge { position: absolute; z-index: 9; top: 50%; width: 48px; height: 48px; border: 1px solid rgba(235,219,255,.32); border-radius: 50%; background: rgba(58,28,88,.36); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; backdrop-filter: blur(14px); transition: transform .2s, background .2s, opacity .2s; }
.reader-edge:hover { transform: translateY(-50%) scale(1.06); background: rgba(142,86,202,.55); }
.reader-edge:disabled { opacity: .25; cursor: default; }
.reader-edge:disabled:hover { transform: translateY(-50%); background: rgba(58,28,88,.36); }
.reader-prev { left: clamp(18px,2.5vw,42px); }
.reader-next { right: clamp(18px,2.5vw,42px); }
.reader-hint { position: relative; z-index: 5; margin: 0; text-align: center; color: rgba(255,255,255,.47); font: 400 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width:1024px) {
  .work-section .showcase { min-height: 0; }
  .work-section .project-image-wrap { min-height: 0; aspect-ratio: 1.45; }
  .work-section .project-image-wrap img { object-fit: contain; }
  .project-reader { padding: 20px clamp(16px, 3vw, 32px); }
  .book-stage { width: min(94vw, calc(71vh * var(--book-ratio))); }
  .reader-edge { width: 44px; height: 44px; }
}

@media (max-width:720px) {
  .project-image-wrap .project-cover-prompt { opacity: 1; transform: none; }
  .project-image-wrap .image-number { left: 40px; bottom: 32px; }
  .work-section .project-image-wrap { height: auto; aspect-ratio: 1.45; }
  .work-section .showcase { row-gap: clamp(24px, 7vw, 34px); }
  .work-section .project-list { padding: 0 16px; }
  .project-reader { padding: 18px 16px; }
  .reader-bar { grid-template-columns: 1fr auto; gap: 12px; font-size: 9px; }
  .reader-bar p:first-child { grid-column: 1 / -1; }
  .book-stage { width: min(calc(100vw - 32px), calc(62vh * var(--book-ratio))); }
  .reader-edge { top: auto; bottom: 31px; width: 42px; height: 42px; }
  .reader-edge:hover { transform: scale(1.04); }
  .reader-edge:disabled:hover { transform: none; }
  .reader-prev { left: 24px; }.reader-next { right: 24px; }.reader-hint { padding-bottom: 58px; }
}