@font-face{
  font-family: Fraunces;
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Italic face is synthesized from the roman file to keep the Worker under the upload limit. */


:root{
  --cream: #FBF6EE;
  --cream-deep: #F3E6D6;
  --blush: #F4E0D4;
  --ink: #3B2A22;
  --ink-soft: #5C4338;
  --gold: #B8874A;
  --copper: #C4623F;
  --rose: #C9898A;
  --paper: #FFF9F2;
  --shadow: rgba(59,42,34,.22);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
html{ -webkit-text-size-adjust: 100%; hyphenate-limit-chars: 6 3 3; }
body{
  font-family: Fraunces, "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0, "wght" 500;
  letter-spacing: normal;
  word-spacing: normal;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #fff8f0 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #f0d9c8 0%, transparent 50%),
    linear-gradient(180deg, #F6EBE0 0%, #EEDFCC 100%);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skip{
  position:absolute; left:-999px; top:0;
  background: var(--ink); color: #fff; padding:.5rem 1rem; z-index: 20;
}
.skip:focus{ left: .5rem; top: .5rem; }

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: calc(.45rem + var(--safe-t)) 1rem .45rem;
  min-height: 3.2rem;
  flex: 0 0 auto;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color: inherit; min-width: 0;
}
.brand img{ width: 40px; height: 40px; border-radius: 50%; background:#fff; }
.brand span{ display:flex; flex-direction:column; min-width:0; }
.brand strong{
  font-weight: 600;
  font-size: clamp(.85rem, 2.8vw, 1.05rem);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 52vw;
}
.brand small{
  font-size: .72rem; color: var(--ink-soft); letter-spacing: .02em;
}
.actions{ display:flex; align-items:center; gap:.4rem; flex: 0 0 auto; }
.btn{
  appearance:none; border:0; cursor:pointer;
  font-family: inherit; font-weight: 600;
  font-size: .92rem;
  line-height: 1.1;
  color: #fff;
  background: linear-gradient(180deg, #C98958, #A46B38);
  text-decoration: none;
  padding: .55rem .85rem;
  border-radius: 999px;
  box-shadow: 0 2px 0 #7A4E24;
  white-space: nowrap;
}
.btn:hover{ filter: brightness(1.06); }
.btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.icon{
  width: 2.4rem; height: 2.4rem; padding: 0;
  display:grid; place-items:center;
  background: #fff8f0; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(59,42,34,.15);
}
.btn.icon[aria-pressed="true"]{ background: var(--ink); color: #fff; }


.stage{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 0 .15rem;
}
.book-wrap{
  width: 100%;
  height: 100%;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 2200px;
}
#book{
  position: relative;
  width: min(100%, 420px);
  height: 100%;
  max-height: 100%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 28px rgba(59,42,34,.22));
}
@media (min-width: 900px){
  #book{ width: min(92%, 540px); }
}
#book .leaf{
  position: absolute;
  inset: 0;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--paper);
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 0 1px rgba(59,42,34,.07);
}
#book .leaf.behind{ pointer-events: none; }
#book .leaf.flipping{
  box-shadow: -8px 0 24px rgba(59,42,34,.2);
}

.nav{
  appearance:none; border:0; background: #fff8f0ee;
  color: var(--ink);
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: 0 2px 10px var(--shadow);
  z-index: 8;
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.nav-prev{ left: .35rem; }
.nav-next{ right: .35rem; }
.nav:disabled{ opacity:.3; cursor: default; }
.nav:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

.bar{
  flex: 0 0 auto;
  display:flex; flex-direction: column; align-items:center;
  gap: .1rem;
  padding: .3rem 1rem calc(.55rem + var(--safe-b));
  text-align:center;
}
.hint{
  margin:0; font-size: .78rem; color: var(--ink-soft);
}
.pager{
  margin:0; font-weight: 600; font-size: .95rem; color: var(--ink);
}

/* ---- leaves ---- */
.leaf{
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
.leaf img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

.leaf-cover img,
.leaf-bleed img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.cover-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding: 2.4rem 1rem 1.15rem;
  background: linear-gradient(180deg, transparent 0%, rgba(251,246,238,.55) 28%, rgba(251,246,238,.94) 62%, #FBF6EE 100%);
  text-align: center;
}
.cover-copy h1{
  margin: .15rem 0 .35rem;
  font-size: clamp(1.45rem, 5.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.subtitle{
  margin: 0 auto;
  max-width: 26ch;
  font-size: clamp(.92rem, 2.6vw, 1.12rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  word-spacing: normal;
  letter-spacing: normal;
}
.brand-line{
  margin: 0 0 .2rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.bleed-copy{
  position:absolute; left:0; right:0;
  padding: 1.1rem 1.15rem 1.3rem;
  text-align: center;
}
.bleed-copy.top{
  top:0;
  background: linear-gradient(180deg, #FBF6EE 0%, rgba(251,246,238,.92) 70%, transparent 100%);
  padding-bottom: 2.4rem;
}
.bleed-copy.bottom{
  bottom:0;
  background: linear-gradient(0deg, #FBF6EE 0%, #FBF6EE 62%, rgba(251,246,238,.9) 80%, transparent 100%);
  padding-top: 2.2rem;
}
.dedica{
  margin: .4rem auto 0;
  max-width: 26ch;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.5;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.fim{
  margin: .2rem 0 .5rem;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .06em;
}
.leaf-ending blockquote{
  margin: 0 auto;
  max-width: 26ch;
  border:0; padding:0;
  font-size: clamp(1.02rem, 3vw, 1.28rem);
  font-style: italic;
  line-height: 1.5;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.back-copy h2{
  margin: 0 0 .35rem;
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
}
.back-copy .meta{
  margin: .15rem 0 0;
  font-size: clamp(.88rem, 2.4vw, 1.02rem);
  color: var(--ink-soft);
}
.back-copy .mensagem{
  margin: .7rem auto .7rem;
  max-width: 26ch;
  font-style: italic;
  font-size: clamp(.95rem, 2.6vw, 1.12rem);
  line-height: 1.5;
  word-spacing: normal;
  letter-spacing: normal;
}

.leaf-story{
  display: grid;
  grid-template-rows: 46% minmax(0, 1fr);
  grid-template-columns: 1fr;
}
.leaf-story.dense{
  grid-template-rows: 38% minmax(0, 1fr);
}
.leaf-story .art{
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cream-deep);
  height: auto !important;
}
.leaf-story .art img{ object-position: center 20%; }
.leaf-story .copy{
  min-height: 0;
  display:flex;
  flex-direction: column;
  padding: .55rem .8rem 1.15rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
}
.kicker{
  margin: 0 0 .1rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.leaf-story h2{
  margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
}
.text{
  flex: 1 1 auto;
  text-align: start;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.text p{
  margin: 0 0 .42em;
  font-size: clamp(.95rem, 2.5vw, 1.1rem);
  line-height: 1.5;
  text-align: start;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.leaf-story.dense .text p{
  margin-bottom: .32em;
  font-size: clamp(.9rem, 2.3vw, 1.05rem);
  line-height: 1.5;
}
.text p.fala{ padding-left: .15rem; }
.text p.plim{
  color: var(--gold);
  font-weight: 600;
  letter-spacing: normal;
  word-spacing: normal;
}
blockquote.caixa-msg{
  margin: .35rem .1rem .5rem;
  padding: .45rem .7rem;
  border: 0;
  border-left: 3px solid var(--gold);
  background: rgba(184,135,74,.1);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  font-size: clamp(.9rem, 2.4vw, 1.05rem);
  line-height: 1.5;
  text-align: start;
  word-spacing: normal;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}
blockquote.caixa-msg p{ margin:0; font-size: inherit; }

.folio{
  position:absolute;
  left:0; right:0; bottom: .28rem;
  text-align:center;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--rose);
  font-weight: 600;
  pointer-events: none;
}

/* Landscape / desktop book: slightly roomier type */
@media (min-width: 900px){
  .brand strong{ max-width: none; }
  .nav{ width: 3rem; height: 3rem; }
  .leaf-story{ grid-template-rows: 50% minmax(0, 1fr); }
  .leaf-story.dense{ grid-template-rows: 36% minmax(0, 1fr); }
  .leaf-story .copy{ padding: .7rem 1rem 1.3rem; }
  .text p{ font-size: clamp(1rem, 1.05vw, 1.12rem); line-height: 1.5; }
  .cover-copy{ padding-bottom: 1.4rem; }
  .hint::before{ content: none; }
}

/* Very short viewports (landscape phones): shrink art, keep text */
@media (max-height: 520px){
  .leaf-story{ grid-template-rows: 36% minmax(0, 1fr); }
  .leaf-story.dense{ grid-template-rows: 30% minmax(0, 1fr); }
  .top{ min-height: 2.6rem; padding-top: .25rem; padding-bottom: .25rem; }
  .brand img{ width: 30px; height: 30px; }
  .brand small{ display:none; }
}

@media (max-width: 520px){
  .brand strong{ display:none; }
  .btn:not(.icon){ font-size: .82rem; padding: .5rem .7rem; }
  .nav{
    width: 2.2rem; height: 2.2rem;
    background: #fff8f0ee;
  }
  .nav-prev{ left: .2rem; }
  .nav-next{ right: .2rem; }
  /* Keep story text clear of the overlaid arrows */
  .leaf-story .copy{ padding-left: 2.55rem; padding-right: 2.55rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

@media print{
  .top, .nav, .bar{ display:none !important; }
  body{ background:#fff; overflow:visible; }
}