:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f5f4f1; color: #151515; }
button, a { font: inherit; }
.project { min-height: 100vh; padding: 24px 3vw 5vw; }
.project__header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .13em; }
.project__header span { font-weight: 600; }
.back { color: inherit; text-decoration: none; }
.intro { padding: 13vh 0 10vh; max-width: 760px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; margin: 0 0 22px; }
h1 { font-size: clamp(76px, 16vw, 220px); font-weight: 400; letter-spacing: -.07em; line-height: .72; margin: 0; }
.intro__copy { font: 300 clamp(19px, 2.2vw, 28px)/1.35 Georgia, serif; max-width: 480px; margin: 50px 0 34px; }
.open-book { appearance: none; border: 1px solid #151515; background: transparent; color: #151515; cursor: pointer; padding: 15px 18px; font-size: 11px; letter-spacing: .13em; transition: .2s ease; }
.open-book:hover { background: #151515; color: #f5f4f1; }
.open-book span { font-size: 18px; padding-left: 20px; vertical-align: -1px; }
.mockups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mockups img { width: 100%; display: block; }

.reader { background: #151515; color: #e9e5dc; position: fixed; inset: 0; z-index: 10; display: none; grid-template-rows: auto 1fr auto; min-height: 100dvh; }
.reader.is-open { display: grid; }
.reader__header, .reader__footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; font-size: 10px; letter-spacing: .14em; }
.reader__header p { margin: 0; }
.reader__header p span { opacity: .5; margin-left: 10px; }
.reader button { color: inherit; background: transparent; border: 0; cursor: pointer; letter-spacing: .14em; font-size: 10px; }
.book-stage { min-width: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px; align-items: center; outline: none; touch-action: pan-y; }
.book { position: relative; justify-self: center; width: 100%; height: 100%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.36)); }
.page { background: #171717; overflow: hidden; }
.page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page[data-density="hard"] { background: #101010; }
/* A sombra fica dentro de cada página: acompanha a dobra e nunca passa da altura do livro. */
.stf__item.--left::after, .stf__item.--right::after { content: ''; position: absolute; z-index: 20; top: 0; bottom: 0; width: 14px; pointer-events: none; opacity: .62; }
.stf__item.--left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.27)); }
.stf__item.--right::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.20), transparent); }
.nav { font-size: 48px !important; letter-spacing: 0 !important; opacity: .8; padding: 20px; }
.nav:disabled, .reader__footer button:disabled { opacity: .25; cursor: default; }
.reader__footer { border-top: 1px solid rgba(255,255,255,.12); }
#pagination { opacity: .55; }
@media (max-width: 700px) {
  .project { padding: 18px 18px 36px; }
  .intro { padding: 16vh 0 8vh; }
  .mockups { grid-template-columns: 1fr; gap: 12px; }
  .book-stage { grid-template-columns: 43px minmax(0, 1fr) 43px; }
  .book { width: 100%; height: min(70vh, 640px); }
  .book { width: 100%; height: 100%; }
  .nav { font-size: 34px !important; padding: 8px; }
  .reader__header, .reader__footer { padding: 17px 14px; }
}