:root{
  --teal-950:#063634;
  --teal-900:#084541;
  --teal-800:#0b5752;
  --teal-700:#126d66;
  --teal-500:#3b9288;
  --teal-soft:#c8dfd9;
  --ivory:#fbf6eb;
  --paper:#fffaf1;
  --sand:#eadcc6;
  --gold:#c99a46;
  --gold-2:#efd69c;
  --ink:#2d2a26;
  --muted:#6d655c;
  --white:#fffdfa;
  --serif:"Italiana",Georgia,serif;
  --script:"Parisienne",cursive;
  --sans:"DM Sans",Arial,sans-serif;
  --ui:"Montserrat",Arial,sans-serif;
  --shadow:0 30px 90px rgba(31,45,42,.18);
  --max:1240px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}


body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

::selection{
  background:var(--teal-800);
  color:#fff;
}


/* ==========================================================================================
   ACCESSIBILITY
========================================================================================== */

.skip{
  position:fixed;
  top:-60px;
  left:18px;
  z-index:9999;
  padding:10px 14px;
  background:#fff;
  color:var(--teal-950);
  border-radius:0 0 12px 12px;
}

.skip:focus{
  top:0;
}


/* ==========================================================================================
   SCROLL PROGRESS
========================================================================================== */

.scroll-progress{
  position:fixed;
  z-index:1100;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:transparent;
}

.scroll-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(
    90deg,
    var(--gold),
    var(--gold-2)
  );
}


/* ==========================================================================================
   HEADER
========================================================================================== */

.header{
  position:fixed;
  z-index:1000;
  top:-18px;
  left:0;
  width:100%;
  color:#fff;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    top .45s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease,
    visibility 0s linear .45s;
}

.header.is-visible{
  top:0;
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    top .45s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease,
    visibility 0s;
}

.header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  pointer-events:none;
  border-bottom:1px solid rgba(239,214,156,.12);
  background:
    linear-gradient(
      90deg,
      rgba(4,44,42,.68) 0%,
      rgba(7,66,62,.72) 50%,
      rgba(4,44,42,.80) 100%
    ),
    url("assets/book-texture.png") center 42% / cover no-repeat;
  box-shadow:0 10px 32px rgba(6,54,52,.14);
  transition:opacity .4s ease;
}

.header.is-scrolled::after{
  opacity:1;
}

.header__inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 48px),var(--max));
  height:82px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wordmark{
  display:grid;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.wordmark span{
  font-family:var(--serif);
  font-size: 15px;
  font-weight: 600;
  color:var(--gold-2);
  text-transform:none;
  letter-spacing:.08em;
}

.wordmark strong{
  font-family:var(--serif);
  font-weight:600;
  font-size:23px;
}

.nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-family:var(--ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing:.03em;
}

.nav > a:not(.nav__cta){
  opacity:.82;
  transition:.2s;
}

.nav > a:not(.nav__cta):hover{
  opacity:1;
  color:var(--gold-2);
}

.nav__cta{
  position:relative;
  padding:12px 24px;
  border:1px solid #ead69b;
  border-radius:999px;
  background:linear-gradient(
    135deg,
    #d8b769 0%,
    #e4c983 52%,
    #d8b769 100%
  );
  color:var(--teal-950);
  font-weight:500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 7px 18px rgba(94,72,32,.14);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.nav__cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 22px rgba(94,72,32,.18);
}

.nav__cta:hover::before{
  left:140%;
}

.nav__cta:active{
  transform:translateY(0);
}

.menu{
  display:none;
}

.header__mobile-actions{
  display:none;
}

.header__buy{
  display:none;
}

/* mobile / tablet */

@media (max-width:820px){

  .header__mobile-actions{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .header__buy{
    min-height:38px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ead69b;
    border-radius:999px;
    background:linear-gradient(
      135deg,
      #d8b769 0%,
      #e4c983 52%,
      #d8b769 100%
    );
    color:var(--teal-950);
    font-family:var(--ui);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      0 5px 14px rgba(33,28,18,.12);
  }

  .header__buy:active{
    transform:translateY(1px);
  }


  .menu{
    display:grid;
    place-content:center;
    gap:7px;
    border:0;
    background:transparent;
    color:#fff;
    z-index:5;
  }

  .menu i{
    display:block;
    height:1px;
    background:currentColor;
    transition:.25s;
  }

  .menu[aria-expanded="true"] i:first-child{
    transform:translateY(4px) rotate(45deg);
  }

  .menu[aria-expanded="true"] i:last-child{
    transform:translateY(-4px) rotate(-45deg);
  }

  .nav{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-family:var(--serif);
    transform:translateY(-100%);
    transition:.45s cubic-bezier(.7,0,.2,1);
  }

  .nav.is-open{
    transform:none;
  }

}


/* small mobile */


@media (max-width:380px){
  .header__mobile-actions{
    gap:4px;
  }

  .header__buy{
    min-height:35px;
    padding:0 12px;
    font-size:.56rem;
  }

  .menu{
    width:38px;
    height:40px;
    margin-right:-4px;
  }
}


/* ==========================================================================================
   TYPOGRAPHY / COMMON
========================================================================================== */

.kicker,
.eyebrow{
  margin:0 0 18px;
  color:var(--gold);
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.kicker{
  display:flex;
  align-items:center;
  gap:12px;
}

.kicker span{
  width:46px;
  height:1px;
  background:currentColor;
}

.eyebrow--light{
  color:var(--gold-2);
}


/* ==========================================================================================
   BUTTONS
========================================================================================== */

.button{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 24px;
  border-radius:999px;
  font-family:var(--ui);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  transition:.25s ease;
}

.button b{
  font-size:1.1rem;
  font-weight:400;
}

.button--primary{
  position:relative;
  border:1px solid #ead69b;
  background:linear-gradient(
    135deg,
    #d8b769 0%,
    #e4c983 52%,
    #d8b769 100%
  );
  font-size: 16px;
  color:var(--teal-950);
  font-weight:600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 7px 18px rgba(94,72,32,.14);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.button--primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 22px rgba(94,72,32,.18);
}

.button--outline{
  border:1px solid rgba(8,69,65,.28);
  color:var(--teal-900);
}

.button--outline:hover{
  background:var(--teal-900);
  color:#fff;
  border-color:var(--teal-900);
}

.button--gold{
  background:linear-gradient(
    135deg,
    var(--gold-2),
    var(--gold)
  );
  color:var(--teal-950);
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

.button--gold:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}


/* ==========================================================================================
   REVEAL
========================================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1);
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}


/* ==========================================================================================
   HERO
========================================================================================== */

.hero{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  color:var(--white);
  background:
    radial-gradient(
      circle at 67% 26%,
      rgba(64,147,136,.52),
      transparent 29%
    ),
    linear-gradient(
      105deg,
      #063936 0%,
      #0a4c47 46%,
      #0c625a 100%
    );
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.25;
  background-image:
    linear-gradient(
      115deg,
      transparent 0 49.7%,
      rgba(239,214,156,.18) 49.8% 50%,
      transparent 50.1%
    ),
    radial-gradient(
      circle at 12% 18%,
      rgba(255,255,255,.16) 0 1px,
      transparent 1.5px
    );
  background-size:auto,26px 26px;
}

.hero__grain{
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.hero__wash{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  opacity:.7;
  pointer-events:none;
}

.hero__wash--a{
  width:48vw;
  height:48vw;
  right:-8vw;
  top:-13vw;
  background:radial-gradient(
    circle,
    rgba(239,214,156,.18),
    transparent 66%
  );
}

.hero__wash--b{
  width:34vw;
  height:34vw;
  left:-12vw;
  bottom:-9vw;
  background:radial-gradient(
    circle,
    rgba(188,219,211,.12),
    transparent 68%
  );
}

.hero__scene{
  position:absolute;
  right:-6%;
  top:0;
  width:48%;
  height:100%;
  opacity:.25;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 32%,
    #000 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 32%,
    #000 100%
  );
}

.hero__paris{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero__content{
  position:relative;
  z-index:2;
  width:min(calc(100% - 48px),var(--max));
  min-height:100svh;
  margin:auto;
  padding:130px 0 85px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
}

.hero__copy{
  max-width:720px;
}

.hero h1{
  margin:0 0 26px;
  font-family:var(--serif);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.045em;
  font-size:clamp(4.3rem,8.2vw,8.8rem);
}

.hero h1 em{
  display:block;
  margin:13px 0 10px 13%;
  font-family:var(--script);
  font-size:.42em;
  font-weight:400;
  line-height:1;
  color:var(--gold-2);
  letter-spacing:0;
}

.hero h1 strong{
  display:block;
  font-weight:400;
}

.hero__lead{
  max-width:640px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.8;
}

.hero__actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px;
}

.button-link{
  padding-bottom:3px;
  font-family:var(--ui);
  font-size:.77rem;
  color:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(255,255,255,.3);
}

.button-link:hover{
  color:#fff;
  border-color:var(--gold-2);
}

.hero__bookwrap{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center;
}

.hero__halo{
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(239,214,156,.34),
    rgba(239,214,156,.06) 48%,
    transparent 70%
  );
  filter:blur(4px);
}

.hero__book{
  position:relative;
  z-index:2;
  width:min(510px,90%);
  transform-style:preserve-3d;
  filter:drop-shadow(
    0 38px 42px rgba(0,0,0,.28)
  );
  transition:transform .18s ease-out;
}

.hero__book img{
  width:100%;
  border-radius:22px;
}

.hero__seal{
  position:absolute;
  z-index:3;
  right:0;
  bottom:9%;
  width:142px;
  aspect-ratio:1;
  display:grid;
  place-content:center;
  text-align:center;
  background:rgba(6,54,52,.9);
  border:1px solid rgba(239,214,156,.8);
  border-radius:50%;
  box-shadow:0 0 0 7px rgba(6,54,52,.45);
  color:var(--gold-2);
  transform:rotate(7deg);
}

.hero__seal::before{
  content:"✦";
  margin-bottom:7px;
  font-size:.8rem;
}

.hero__seal span{
  font-family:var(--ui);
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hero__seal strong{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:400;
  line-height:1.15;
}

.hero__foot{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(calc(100% - 48px),var(--max));
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--ui);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.hero__foot p{
  margin:0;
}

.hero__foot a{
  display:flex;
  align-items:center;
  gap:8px;
}


/* tablet */

@media (max-width:1050px){
  .hero__content{
    grid-template-columns:1fr .8fr;
    gap:28px;
  }

  .hero__bookwrap{
    min-height:480px;
  }

  .hero__seal{
    width:120px;
  }
}


/* mobile */


/* small mobile */


/* ==========================================================================================
   OPENING — EDITORIAL
========================================================================================== */

.opening{
  position:relative;
  overflow:hidden;
  padding:110px 0 100px;
  background:
    linear-gradient(
      90deg,
      rgba(11,87,82,.025),
      transparent 32%
    ),
    var(--paper);
}

.opening__ghost{
  position:absolute;
  right:-2vw;
  top:10px;
  font-family:var(--script);
  font-size:clamp(9rem,20vw,20rem);
  line-height:1;
  color:rgba(11,87,82,.035);
  pointer-events:none;
  user-select:none;
}

.opening__inner{
  position:relative;
  width:min(calc(100% - 48px),var(--max));
  margin:auto;
  display:grid;
  grid-template-columns:
    90px
    minmax(0,1.05fr)
    minmax(360px,.95fr);
  gap:60px;
  align-items:center;
}


/* número / identificação lateral */

.opening__meta{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding-top:14px;
  border-right:1px solid rgba(201,154,70,.28);
}

.opening__meta span{
  font-family:var(--serif);
  font-size:3rem;
  color:var(--gold);
}

.opening__meta p{
  margin:0;
  font-family:var(--ui);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-700);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}


/* texto */

.opening__content{
  max-width:670px;
}

.opening__content h2 em{
  display:block;
  margin-top:10px;
}

.opening__divider{
  width:72px;
  height:1px;
  margin:34px 0;
  background:var(--gold);
}

.opening__content > p:not(.eyebrow){
  max-width:610px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.85;
}

.opening__content .opening__lead{
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.38rem;
  line-height:1.58;
}


/* imagem */

.opening__visual{
  position:relative;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  isolation:auto;
}

.opening__visual-reveal{
  position:relative;
  width:100%;
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.opening__circle{
  position:absolute;
  width:84%;
  aspect-ratio:1;
  border-radius:50%;
  transform:rotate(-7deg);
}

.opening__circle::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  transform:rotate(13deg);
}

.opening__visual img{
  position:relative;
  z-index:2;
  width:112%;
  max-width:none;
  opacity:1;
  mix-blend-mode:darken !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:translateX(-3%);
}

.opening__caption{
  position:absolute;
  z-index:3;
  right:0;
  bottom:30px;
  padding:12px 16px;
  background:var(--teal-900);
  color:rgba(255,255,255,.84);
  font-family:var(--ui);
  font-size:.62rem;
  line-height:1.55;
  letter-spacing:.08em;
  text-transform:uppercase;
}


/* tablet */

@media (max-width:1050px){
  .opening__inner{
    grid-template-columns:
      60px
      1fr
      .8fr;
    gap:36px;
  }

  .opening__visual{
    min-height:480px;
  }
}


/* mobile */


/* small mobile */


.opening h2,
.bridge h2,
.author h2,
.final h2,
.manifesto h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3rem,5.8vw,6.25rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--teal-900);
}

.opening h2 em,
.bridge h2 em,
.author h2 em,
.final h2 em,
.manifesto h2 em{
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}

.opening__copy > p:not(.eyebrow){
  max-width:610px;
  font-size:1.02rem;
  line-height:1.85;
  color:var(--muted);
}

.opening__intro{
  margin-top:30px;
  font-family:var(--serif);
  font-size:1.35rem !important;
  line-height:1.55 !important;
  color:var(--ink) !important;
}

@media (max-width:1050px){
  .opening__grid{
    gap:5vw;
  }
}


/* ==========================================================================================
   MANIFESTO
========================================================================================== */

.manifesto{
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--teal-950);
  overflow:hidden;
  color:#fff;
}

.manifesto__ink{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(
      circle at 30% 45%,
      rgba(41,131,120,.55),
      transparent 20%
    ),
    radial-gradient(
      circle at 70% 45%,
      rgba(201,154,70,.14),
      transparent 18%
    ),
    radial-gradient(
      circle at 50% 70%,
      rgba(255,255,255,.06),
      transparent 20%
    );
  filter:blur(6px);
}

.manifesto::before,
.manifesto::after{
  content:"";
  position:absolute;
  width:36%;
  height:1px;
  top:50%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(239,214,156,.4)
  );
}

.manifesto::before{
  left:0;
}

.manifesto::after{
  right:0;
  transform:scaleX(-1);
}

.manifesto__content{
  position:relative;
  z-index:2;
  width:min(720px,calc(100% - 40px));
}

.manifesto h2{
  color:#fff;
  font-size:clamp(3.5rem,7vw,7.4rem);
}

.manifesto h2 em{
  color:var(--gold-2);
}

.manifesto__line{
  width:70px;
  height:1px;
  margin:32px auto;
  background:var(--gold);
}

.manifesto__content > p:last-child{
  max-width:650px;
  margin:0 auto;
  color:rgba(255,255,255,.68);
  font-size:1.02rem;
  line-height:1.8;
}

.manifesto__book{
  position:absolute;
  right:-7%;
  bottom:-25%;
  width:33%;
  opacity:.12;
  transform:rotate(-8deg);
  mix-blend-mode:normal;
  filter:grayscale(.2);
  box-shadow:none !important;
  text-shadow:none !important;
}


/* ==========================================================================================
   BRIDGE
========================================================================================== */

.bridge{
  min-height:760px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:var(--paper);
}

.bridge__image{
  position:relative;
  min-height:760px;
  background:#fbf6eb;
  overflow:hidden;
  isolation:auto;
}

.bridge__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent 60%,
    rgba(255,250,241,.84)
  );
  pointer-events:none;
}

.bridge__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:darken !important;
  opacity:1;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

.bridge__copy{
  position:relative;
  z-index:2;
  align-self:center;
  max-width:620px;
  margin-left:-8vw;
  padding:72px 70px;
  background:rgba(255,250,241,.92);
  box-shadow:var(--shadow);
  border:1px solid rgba(201,154,70,.18);
  backdrop-filter:blur(12px);
}

.bridge__chapter{
  position:absolute;
  right:22px;
  top:22px;
  font-family:var(--ui);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(8,69,65,.45);
  writing-mode:vertical-rl;
}

.bridge h2{
  font-size:clamp(3.2rem,5vw,5.8rem);
}

.bridge__copy > p:not(.eyebrow){
  color:var(--muted);
  line-height:1.8;
}

.bridge blockquote{
  margin:32px 0 0;
  padding:24px 0 0;
  border-top:1px solid rgba(201,154,70,.35);
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.5;
  color:var(--teal-900);
}


/* ==========================================================================================
   GALLERY — ENTRE AS PÁGINAS
========================================================================================== */

.gallery{
  position:relative;
  padding:125px 0 0;
  background:#f4ecdf;
  overflow:clip;
}

.gallery__word{
  position:absolute;
  left:-2vw;
  top:30px;
  font-family:var(--script);
  font-size:clamp(9rem,19vw,18rem);
  line-height:1;
  color:rgba(8,69,65,.035);
  pointer-events:none;
  user-select:none;
}

.gallery__inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 48px),1280px);
  margin:auto;
}


/* introdução */

.gallery__head{
  width:min(760px,100%);
  max-width:none;
  margin:0 auto 70px;
  text-align:center;
}

.gallery__head h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.3vw,5.8rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--teal-900);
}

.gallery__head h2 em{
  display:block;
  margin-top:8px;
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}

.gallery__head > p:last-child{
  max-width:560px;
  margin:26px auto 0;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.75;
}


/* área de scroll */

.page-book{
  --hint-opacity:1;

  position:relative;
  height:420vh;
}

.page-book__sticky{
  position:sticky;
  top:82px;
  height:calc(100svh - 82px);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.page-book__scene{
  position:relative;
  width:100%;
  display:grid;
  place-items:center;
  padding-top:40px;
  perspective:2800px;
  perspective-origin:center 48%;
  transform:translateY(22px);
}

.page-book__book{
  position:relative;
  width:min(920px,86vw);
  aspect-ratio:1.5;
  transform-style:preserve-3d;
  filter:drop-shadow(0 34px 50px rgba(61,51,39,.13));
}


/* base do livro */

.page-book__base{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(201,154,70,.035),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,.34),
      transparent 30%
    ),
    var(--paper);
  border:1px solid rgba(72,61,48,.08);
}

.page-book__base::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(89,74,55,.18) 0 1px,
      transparent 1.4px
    );
  background-size:24px 24px;
  pointer-events:none;
}

.page-book__base--left{
  left:0;
  border-radius:7px 0 0 7px;
  box-shadow:inset -22px 0 30px rgba(55,43,31,.08);
}

.page-book__base--right{
  right:0;
  border-radius:0 7px 7px 0;
  box-shadow:inset 22px 0 30px rgba(55,43,31,.07);
}

.page-book__base--right span{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:80%;
  text-align:center;
  font-family:var(--serif);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(8,69,65,.17);
}


/* introdução da jornada */

.page-book__intro{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:clamp(32px,3.5vw,56px);
  display:flex;
  flex-direction:column;
}

.page-book__intro .eyebrow{
  margin-bottom:12px;
}

.page-book__intro h3{
  max-width:390px;
  margin:0 0 22px;
  font-family:var(--serif);
  font-size:clamp(2.2rem,3vw,3.6rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--teal-900);
}

.page-book__intro h3 em{
  display:block;
  margin-top:5px;
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}

.page-book__intro-text{
  max-width:400px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.7;
}

.page-book__index{
  margin-top:auto;
  margin-bottom:22px;
  border-top:1px solid rgba(8,69,65,.12);
}

.page-book__index p{
  margin:0;
  padding:9px 0;
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  border-bottom:1px solid rgba(8,69,65,.09);
  color:var(--teal-900);
  font-family:var(--serif);
  font-size:.9rem;
  line-height:1.22;
}

.page-book__index p span{
  font-family:var(--ui);
  font-size:.55rem;
  letter-spacing:.12em;
  color:var(--gold);
}

.page-book__intro-folio{
  position:absolute;
  left:clamp(32px,3.5vw,56px);
  bottom:19px;
  font-family:var(--ui);
  font-size:.5rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(8,69,65,.32);
}


/* folhas */

.book-sheet{
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:translateZ(var(--sheet-depth)) rotateY(var(--turn));
  will-change:transform;
}

.book-sheet__face{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--paper);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid rgba(72,61,48,.08);
}

.book-sheet__front{
  border-radius:0 7px 7px 0;
  box-shadow:
    inset 20px 0 26px rgba(58,47,35,.055),
    5px 3px 14px rgba(54,44,33,.05);
}

.book-sheet__back{
  transform:rotateY(180deg);
  border-radius:7px 0 0 7px;
  box-shadow:
    inset -20px 0 26px rgba(58,47,35,.055),
    -5px 3px 14px rgba(54,44,33,.05);
}

.book-sheet__front::after,
.book-sheet__back::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  opacity:var(--page-shadow);
  pointer-events:none;
}

.book-sheet__front::after{
  background:linear-gradient(
    90deg,
    rgba(34,26,18,.32),
    rgba(34,26,18,.08) 18%,
    transparent 48%
  );
}

.book-sheet__back::after{
  background:linear-gradient(
    270deg,
    rgba(34,26,18,.30),
    rgba(34,26,18,.07) 18%,
    transparent 48%
  );
}


/* conteúdo das páginas */

.book-page{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:clamp(28px,3vw,48px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(59,146,136,.04),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      transparent 38%
    ),
    var(--paper);
}

.book-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.12;
  background-image:
    radial-gradient(
      circle,
      rgba(86,72,54,.22) 0 .7px,
      transparent .9px
    );
  background-size:22px 22px;
}

.book-page--right{
  padding-left:clamp(36px,4vw,62px);
}

.book-page--left{
  padding-right:clamp(36px,4vw,62px);
}

.book-page__number{
  position:absolute;
  right:30px;
  top:20px;
  font-family:var(--serif);
  font-size:clamp(4rem,6vw,6.8rem);
  line-height:1;
  color:rgba(8,69,65,.055);
}

.book-page--left .book-page__number{
  right:auto;
  left:30px;
}

.book-page .eyebrow{
  position:relative;
  z-index:2;
  margin-bottom:10px;
}

.book-page h3{
  position:relative;
  z-index:2;
  max-width:420px;
  margin:0 0 16px;
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,3.45rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--teal-900);
}

.book-page h3 em{
  display:block;
  margin-top:5px;
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}

.book-page__text{
  position:relative;
  z-index:2;
  max-width:390px;
  margin:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.65;
}
.book-page__art{
  position:relative;
  min-height:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0 10px;
  text-align:center;
  z-index:auto;
  isolation:auto;
}

.book-page__art img{
  position:relative;
  display:block;
  width:auto;
  max-width:100%;
  max-height:235px;
  margin:auto;
  object-fit:contain;
  mix-blend-mode:multiply !important;
  opacity:1;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

.book-page__art--paris img{
  max-width:96%;
  max-height:250px;
}

.book-page__art--crowns img{
  max-width:76%;
  max-height:205px;
}

.book-page__folio{
  position:absolute;
  bottom:21px;
  font-family:var(--ui);
  font-size:.55rem;
  letter-spacing:.16em;
  color:rgba(8,69,65,.42);
}

.book-page--right .book-page__folio{
  right:30px;
}

.book-page--left .book-page__folio{
  left:30px;
}


/* lombada */

.page-book__gutter{
  position:absolute;
  z-index:20;
  left:50%;
  top:0;
  bottom:0;
  width:26px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(47,35,24,.08) 30%,
    rgba(47,35,24,.14) 49%,
    rgba(255,255,255,.18) 52%,
    rgba(47,35,24,.07) 72%,
    transparent
  );
  pointer-events:none;
}

.page-book__hint{
  margin:24px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--ui);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(8,69,65,.48);
  opacity:var(--hint-opacity);
  transition:opacity .15s linear;
}

.page-book__hint span{
  font-size:.9rem;
  color:var(--gold);
}


/* tablet */

@media (max-width:1050px){
  .gallery{
    padding-top:110px;
  }

  .gallery__head{
    width:min(760px,100%);
    margin:0 auto 55px;
  }

  .page-book{
    height:400vh;
  }

  .page-book__book{
    width:min(840px,88vw);
  }

  .page-book__intro{
    padding:32px;
  }

  .page-book__intro h3{
    font-size:clamp(1.9rem,3.3vw,3rem);
  }

  .page-book__intro-text{
    margin-bottom:22px;
  }

  .page-book__index p{
    padding:7px 0;
    font-size:.84rem;
  }

  .book-page{
    padding:32px;
  }

  .book-page h3{
    font-size:clamp(1.9rem,3.3vw,3rem);
  }

  .book-page__art img{
    max-height:205px;
  }
}


/* mobile */


/* small mobile */


/* reduced motion */

@media (prefers-reduced-motion:reduce){
  .page-book{
    height:auto;
    padding:30px 0 100px;
  }

  .page-book__sticky{
    position:relative;
    top:auto;
    height:auto;
    overflow:visible;
  }

  .page-book__scene{
    transform:none;
  }

  .page-book__book{
    transform:none;
  }

  .book-sheet--one{
    transform:rotateY(0deg);
  }

  .book-sheet--two{
    transform:rotateY(0deg);
  }

  .page-book__hint{
    display:none;
  }
}


/* ==========================================================================================
   AUTHOR
========================================================================================== */

.author{
  position:relative;
  padding:145px 0 155px;
  background:
    linear-gradient(
      135deg,
      rgba(4,44,42,.88) 0%,
      rgba(7,66,62,.82) 52%,
      rgba(4,44,42,.9) 100%
    ),
    url("assets/book-texture.png") center / cover no-repeat;
  overflow:hidden;
}

.author::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 14% 20%,
      rgba(239,214,156,.08),
      transparent 24%
    ),
    radial-gradient(
      circle at 86% 72%,
      rgba(255,255,255,.05),
      transparent 18%
    );
  pointer-events:none;
}

.author__ghost{
  position:absolute;
  right:-1vw;
  top:-25px;
  font-family:var(--script);
  font-size:clamp(10rem,20vw,20rem);
  line-height:1;
  color:rgba(255,255,255,.05);
  pointer-events:none;
  user-select:none;
}

.author__inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 48px),var(--max));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
  column-gap:clamp(70px,8vw,130px);
  align-items:center;
}

/* retrato */

.author__portrait{
  position:relative;
  padding:0 0 50px 34px;
}

.author__portrait-panel{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:
    linear-gradient(
      150deg,
      rgba(255,250,241,.14) 0%,
      rgba(255,250,241,.08) 100%
    );
  border:1px solid rgba(239,214,156,.18);
  overflow:hidden;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.author__portrait-panel::before{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  right:-130px;
  top:-120px;
  border:1px solid rgba(239,214,156,.2);
  border-radius:50%;
}

.author__portrait-panel::after{
  content:"";
  position:absolute;
  left:30px;
  right:30px;
  top:30px;
  bottom:30px;
  border:1px solid rgba(239,214,156,.12);
  pointer-events:none;
}

.author__portrait-line{
  position:absolute;
  z-index:1;
  left:-34px;
  top:58px;
  width:68px;
  height:1px;
  background:var(--gold-2);
}

.author__portrait img{
  position:relative;
  z-index:2;
  width:100%;
  max-height:625px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.22));
}


/* experiência */

.author__experience{
  position:absolute;
  z-index:4;
  left:0;
  right:42px;
  bottom:0;
  min-height:108px;
  padding:20px 26px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:20px;
  background:#f0dfad;
  border:1px solid #e2c77f;
  box-shadow:0 18px 35px rgba(25,24,22,.18);
}

.author__experience strong{
  font-family:var(--serif);
  font-size:3.3rem;
  font-weight:400;
  line-height:1;
  color:var(--teal-900);
}

.author__experience p{
  max-width:260px;
  margin:0;
  font-family:var(--ui);
  font-size:.68rem;
  line-height:1.55;
  letter-spacing:.035em;
  color:rgba(6,54,52,.72);
}


/* conteúdo */

.author__content{
  position:relative;
  max-width:650px;
  padding:25px 0 0;
}

.author__content .eyebrow{
  margin-bottom:20px;
  color:var(--gold-2);
}

.author h2{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4rem,6.2vw,7rem);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.05em;
  color:#fffdfa;
}

.author h2 em{
  display:block;
  margin-top:10px;
  margin-left:18%;
  font-family:var(--script);
  font-weight:400;
  color:var(--gold-2);
  letter-spacing:0;
}

.author__divider{
  width:76px;
  height:1px;
  margin:36px 0 30px;
  background:var(--gold-2);
}

.author__bio{
  max-width:590px;
}

.author__bio p{
  margin:0 0 18px;
  color:rgba(255,255,255,.76);
  font-size:.96rem;
  line-height:1.8;
}

.author__bio p:first-child{
  color:#fffdfa;
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.65;
}

.author__bio strong{
  color:var(--gold-2);
  font-weight:600;
}

.author__actions{
  margin-top:32px;
}

/* botão dentro da seção */

.author .button--outline{
  border:1px solid rgba(239,214,156,.45);
  color:#fffdfa;
  background:rgba(255,255,255,.04);
}

.author .button--outline:hover{
  background:var(--gold-2);
  border-color:var(--gold-2);
  color:var(--teal-950);
}


/* tablet */

@media (max-width:1050px){
  .author{
    padding:125px 0 135px;
  }

  .author__inner{
    grid-template-columns:minmax(300px,.85fr) 1.15fr;
    column-gap:55px;
  }

  .author__portrait-panel{
    min-height:560px;
  }

  .author__portrait img{
    max-height:535px;
  }

  .author h2{
    font-size:clamp(3.5rem,6.4vw,5.8rem);
  }

  .author__content{
    padding-bottom:125px;
  }

  .author__book{
    width:220px;
  }
}


/* mobile */

@media (max-width:820px){
  .author__book{
    position:relative;
    right:auto;
    bottom:auto;
    width:min(310px,72%);
    margin:-20px 0 0 auto;
    transform:rotate(2deg);
  }
}


/* small mobile */

@media (max-width:560px){
  .author__book{
    width:78%;
    margin-top:-10px;
  }
}

/* ==========================================================================================
   FINAL
========================================================================================== */

.final{
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:8vw;
  padding:
    120px
    max(24px,calc((100vw - var(--max))/2));
  overflow:hidden;
  color:#fff;
  background:linear-gradient(
    125deg,
    #062f2e,
    #084843 52%,
    #0d5e56
  );
}

.final__texture{
  position:absolute;
  inset:0;
  opacity:.65;
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255,255,255,.08),
      transparent 20%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(239,214,156,.11),
      transparent 22%
    ),
    linear-gradient(
      100deg,
      transparent 49.85%,
      rgba(239,214,156,.16) 49.9% 50%,
      transparent 50.05%
    );
  pointer-events:none;
}

.final__book{
  position:relative;
  z-index:1;
  justify-self:center;
  width:min(400px,80%);
}

.final__book::before{
  content:"";
  position:absolute;
  inset:3% -10% -8%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(239,214,156,.28),
    transparent 65%
  );
}

.final__book img{
  width:100%;
  box-shadow:0 36px 70px rgba(0,0,0,.28);
  transform:rotate(-3deg);
}

.final__copy{
  position:relative;
  z-index:1;
  max-width:680px;
}

.final h2{
  color:#fff;
  font-size:clamp(3.6rem,6vw,6.8rem);
}

.final h2 em{
  color:var(--gold-2);
}

.final__copy > p:not(.eyebrow){
  max-width:620px;
  color:rgba(255,255,255,.7);
  line-height:1.8;
}

.final__copy .button{
  margin-top:20px;
}

.final small{
  display:block;
  margin-top:14px;
  color:rgba(255,255,255,.5);
  font-family:var(--ui);
  font-size:.65rem;
  letter-spacing:.04em;
}


/* ==========================================================================================
   FOOTER
========================================================================================== */

.footer{
  min-height:120px;
  padding:
    30px
    max(24px,calc((100vw - var(--max))/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#052927;
  color:rgba(255,255,255,.58);
}

.footer > div{
  display:flex;
  align-items:center;
  gap:28px;
}

.wordmark--footer strong{
  color:#fff;
}

.footer p,
.footer > a{
  margin:0;
  font-family:var(--ui);
  font-size:.66rem;
  letter-spacing:.06em;
}


/* ==========================================================================================
   REDUCED MOTION
========================================================================================== */

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  [data-reveal]{
    opacity:1;
    transform:none;
  }
}


/* ==========================================================================================
   REVEAL BOOK
========================================================================================== */

.reveal-book{
  --cover-w:330px;
  --cover-h:495px;
  --spine-w:29px;

  --book-lift:0px;
  --book-scale:1;

  --front-rotate:-89deg;
  --back-rotate:89deg;

  --others-opacity:1;
  --others-blur:0px;
  --others-shift:0px;

  --intro-opacity:1;
  --intro-shift:0px;

  position:relative;
  height:340vh;
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(59,146,136,.08),
      transparent 22%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(201,154,70,.08),
      transparent 18%
    ),
    linear-gradient(
      180deg,
      #f8f2e6 0%,
      #f3eadb 100%
    );
  overflow:clip;
}

.reveal-book__sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.reveal-book__inner{
  position:relative;
  width:min(calc(100% - 48px),var(--max));
  height:100%;
  margin:auto;
}


/* introdução */

.reveal-book__intro{
  position:absolute;
  z-index:4;
  left:50%;
  top:4.5vh;
  width:min(920px,calc(100% - 40px));
  text-align:center;
  transform:translateX(-50%) translateY(var(--intro-shift));
  opacity:var(--intro-opacity);
  pointer-events:none;
}

.reveal-book__intro .eyebrow{
  margin-bottom:14px;
}

.reveal-book__intro h2{
  max-width:920px;
  margin:0 auto;
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.3vw,5.8rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--teal-900);
}

.reveal-book__intro h2 em{
  display:block;
  margin-top:8px;
  font-family:var(--script);
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
}


/* palco */

.reveal-book__stage{
  position:absolute;
  inset:0;
  perspective:2400px;
  perspective-origin:center 52%;
}

.reveal-book__row{
  position:absolute;
  left:50%;
  bottom:6.5vh;
  width:max-content;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:13px;
  transform:translateX(-50%);
}

.reveal-book__shelf{
  position:absolute;
  left:50%;
  bottom:4.8vh;
  width:min(900px,86vw);
  height:18px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(
    180deg,
    #b88e52 0%,
    #8e6538 100%
  );
  box-shadow:
    0 8px 24px rgba(63,44,25,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}


/* livros laterais */

.shelf-book{
  position:relative;
  display:block;
  width:var(--book-w);
  height:var(--book-h);
  flex:none;
  border:1px solid rgba(68,58,47,.08);
  border-radius:7px 7px 5px 5px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.02) 18%,
      transparent 42%
    ),
    var(--book-bg);
  box-shadow:
    inset 5px 0 0 rgba(255,255,255,.18),
    inset -5px 0 0 rgba(0,0,0,.05);
  opacity:var(--others-opacity);
  filter:blur(var(--others-blur));
  transform:translateY(var(--others-shift));
  transform-origin:center bottom;
  transition:
    filter .18s linear,
    opacity .18s linear,
    transform .18s linear;
}

.shelf-book::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  border-radius:7px 0 0 5px;
  background:var(--book-edge);
  opacity:.75;
}

.shelf-book::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:22px;
  height:1px;
  background:rgba(96,84,67,.13);
  box-shadow:
    0 34px 0 rgba(96,84,67,.08),
    0 68px 0 rgba(96,84,67,.10),
    0 102px 0 rgba(96,84,67,.07),
    0 136px 0 rgba(96,84,67,.10),
    0 170px 0 rgba(96,84,67,.07),
    0 204px 0 rgba(96,84,67,.09);
  opacity:.5;
}


/* livro principal */

.reveal-book__featured{
  position:relative;
  z-index:3;
  width:var(--spine-w);
  height:var(--cover-h);
  flex:none;
  transform:
    translateY(var(--book-lift))
    scale(var(--book-scale));
  transform-origin:center bottom;
  will-change:transform;
}

.reveal-book__object{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}

.reveal-book__spine{
  position:absolute;
  z-index:4;
  left:50%;
  top:0;
  width:var(--spine-w);
  height:var(--cover-h);
  transform:translateX(-50%);
  overflow:hidden;
  border-radius:3px;
  box-shadow:
    0 12px 22px rgba(35,31,26,.19),
    0 3px 7px rgba(35,31,26,.08);
}

.reveal-book__spine img{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
}

.reveal-book__panel{
  position:absolute;
  top:0;
  width:var(--cover-w);
  height:var(--cover-h);
  overflow:hidden;
  border-radius:4px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:
    0 22px 42px rgba(33,29,24,.13),
    0 5px 10px rgba(33,29,24,.07);
  will-change:transform;
}

.reveal-book__panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.reveal-book__panel--front{
  z-index:3;
  left:calc(50% + (var(--spine-w) / 2));
  transform-origin:left center;
  transform:rotateY(var(--front-rotate));
}

.reveal-book__panel--back{
  z-index:2;
  right:calc(50% + (var(--spine-w) / 2));
  transform-origin:right center;
  transform:rotateY(var(--back-rotate));
}


/* tablet */

@media (max-width:1050px){
  .reveal-book{
    --cover-w:280px;
    --cover-h:420px;
    --spine-w:24px;

    height:330vh;
  }

  .reveal-book__row{
    bottom:11vh;
    gap:10px;
  }

  .reveal-book__shelf{
    bottom:9.4vh;
    width:min(820px,90vw);
  }

  .shelf-book{
    max-width:58px;
    height:400px;
  }
}


/* mobile */


/* small mobile */


/* reduced motion */

@media (prefers-reduced-motion:reduce){
  .reveal-book{
    height:auto;
    padding:100px 0 120px;
  }

  .reveal-book__sticky{
    position:relative;
    height:auto;
  }

  .reveal-book__inner{
    min-height:auto;
  }

  .reveal-book__intro{
    position:relative;
    top:auto;
    left:auto;
    margin:0 auto 60px;
    opacity:1;
    transform:none;
  }

  .reveal-book__stage{
    position:relative;
    min-height:560px;
  }

  .reveal-book__row{
    position:absolute;
    left:50%;
    bottom:50px;
  }

  .reveal-book__featured{
    transform:translateY(-80px) scale(1.02);
  }

  .reveal-book__panel--front{
    transform:rotateY(0deg);
  }

  .reveal-book__panel--back{
    transform:rotateY(0deg);
  }

  .shelf-book{
    opacity:.28;
    filter:blur(1px);
  }

  .reveal-book__shelf{
    bottom:34px;
  }
}

.book-sheet--intro{
  --turn:0deg;
  --sheet-depth:3px;
  --page-shadow:0;
  z-index:7;
}

.book-sheet--one{
  --turn:0deg;
  --sheet-depth:2px;
  --page-shadow:0;
  z-index:5;
}

.book-sheet--two{
  --turn:0deg;
  --sheet-depth:1px;
  --page-shadow:0;
  z-index:3;
}

.book-page--blank{
  background:var(--paper);
}

.book-page--intro{
  padding:clamp(32px,3.5vw,56px);
}

.book-page--intro .page-book__index{
  margin-top:auto;
}

/* ==========================================================================================
   MOBILE — MASTER OVERRIDES
========================================================================================== */

@media (max-width:820px){

  /* base */

  html{
    scroll-padding-top:70px;
  }

  body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .eyebrow,
  .kicker{
    font-size:.64rem;
    line-height:1.45;
    letter-spacing:.16em;
  }

  .button{
    min-height:52px;
    padding:0 22px;
    gap:14px;
    font-size:.72rem;
  }


  /* header */

  .header__inner{
    width:calc(100% - 36px);
    height:70px;
  }

  .wordmark span{
    font-size:.10rem;
    font-weight: 600;
    letter-spacing:.07em;
  }

    .wordmark strong{
    font-size:1.04rem;
    color:#fffefc;
    letter-spacing:.035em;
    font-weight: 500;
    text-shadow:
      0 0 .45px rgba(255,255,255,1),
      0 0 .45px rgba(255,255,255,1),
      0 .5px .8px rgba(0,0,0,.12);
    -webkit-text-stroke:.28px rgba(255,255,255,.42);
  }


  .menu{
    width:46px;
    height:46px;
    margin-right:-8px;
  }

  .menu i{
    width:24px;
  }

  .nav{
    padding:
      calc(90px + env(safe-area-inset-top))
      24px
      calc(40px + env(safe-area-inset-bottom));
    gap:26px;
    background:
      linear-gradient(
        180deg,
        rgba(4,44,42,.92),
        rgba(5,50,48,.97)
      ),
      url("assets/book-texture.png") center / cover no-repeat;
    font-size:clamp(1.9rem,8vw,2.7rem);
    text-align:center;
  }

  .nav > a:not(.nav__cta){
    width:100%;
    opacity:.88;
  }

  .nav__cta{
    width:min(310px,100%);
    min-height:52px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    font-family:var(--ui);
    font-size:.74rem;
  }


  /* hero */

  .hero{
    min-height:auto;
  }

  .hero__content{
    width:calc(100% - 40px);
    min-height:auto;
    padding:
      calc(104px + env(safe-area-inset-top))
      0
      76px;
    grid-template-columns:1fr;
    gap:34px;
  }

  .hero__copy{
    max-width:620px;
  }

  .hero .kicker{
    margin-bottom:18px;
  }

  .hero h1{
    max-width:620px;
    margin-bottom:24px;
    font-size:clamp(3.55rem,14.8vw,6rem);
    line-height:.86;
    letter-spacing:-.045em;
  }

  .hero h1 em{
    margin:11px 0 9px 8%;
    font-size:.44em;
  }

  .hero__lead{
    max-width:560px;
    font-size:.96rem;
    line-height:1.72;
  }

  .hero__actions{
    margin-top:30px;
    gap:18px;
    align-items:flex-start;
  }

  .hero__bookwrap{
    min-height:420px;
    margin-top:-4px;
  }

  .hero__book{
    width:min(390px,84vw);
  }

  .hero__halo{
    width:85%;
  }

  .hero__seal{
    right:4%;
    bottom:5%;
    width:104px;
    box-shadow:0 0 0 5px rgba(6,54,52,.4);
  }

  .hero__seal strong{
    font-size:.86rem;
  }

  .hero__scene{
    right:-25%;
    width:125%;
    opacity:.11;
  }

  .hero__foot{
    display:none;
  }


  /* opening */

  .opening{
    padding:82px 0 88px;
  }

  .opening__inner{
    width:calc(100% - 40px);
    grid-template-columns:1fr;
    gap:30px;
  }

  .opening__meta{
    width:100%;
    padding:0 0 14px;
    flex-direction:row;
    align-items:center;
    gap:14px;
    border-right:0;
    border-bottom:1px solid rgba(201,154,70,.24);
  }

  .opening__meta span{
    font-size:1.8rem;
    line-height:1;
  }

  .opening__meta p{
    margin:0;
    writing-mode:initial;
    transform:none;
    font-size:.56rem;
  }

  .opening__content{
    max-width:none;
  }

  .opening__content .eyebrow{
    margin-bottom:16px;
  }

  .opening__content h2,
  .opening h2{
    font-size:clamp(2.85rem,10.5vw,4.8rem);
    line-height:.96;
  }

  .opening__content h2 em{
    margin-top:7px;
  }

  .opening__divider{
    width:54px;
    margin:26px 0;
  }

  .opening__content .opening__lead{
    font-size:1.16rem;
    line-height:1.55;
  }

  .opening__content > p:not(.eyebrow){
    margin-bottom:16px;
    font-size:.94rem;
    line-height:1.72;
  }

  .opening__visual{
    min-height:0;
    margin-top:8px;
  }

  .opening__visual-reveal{
    min-height:0;
  }

  .opening__visual img{
    width:min(112%,620px);
    max-width:none;
    margin:auto;
    transform:none;
  }

  .opening__caption{
    right:0;
    bottom:8px;
    max-width:220px;
    padding:10px 12px;
    font-size:.54rem;
    line-height:1.45;
  }

  .opening__ghost{
    top:35px;
    right:-28%;
    font-size:8rem;
  }


  /* manifesto */

  .manifesto{
    min-height:0;
    padding:92px 20px 96px;
  }

  .manifesto__content{
    width:100%;
    max-width:610px;
  }

  .manifesto .eyebrow{
    margin-bottom:18px;
  }

  .manifesto h2{
    font-size:clamp(3rem,11vw,5rem);
    line-height:.95;
  }

  .manifesto__line{
    width:54px;
    margin:27px auto;
  }

  .manifesto__content > p:last-child{
    max-width:540px;
    font-size:.94rem;
    line-height:1.7;
  }

  .manifesto::before,
  .manifesto::after{
    width:12%;
  }

  .manifesto__book{
    right:-18%;
    bottom:-12%;
    width:58%;
    opacity:.08;
  }


  /* bridge */

  .bridge{
    min-height:0;
    grid-template-columns:1fr;
  }

  .bridge__image{
    min-height:390px;
  }

  .bridge__image img{
    object-position:center center;
  }

  .bridge__image::after{
    background:linear-gradient(
      180deg,
      transparent 48%,
      rgba(255,250,241,.96) 100%
    );
  }

  .bridge__copy{
    width:auto;
    max-width:none;
    margin:-54px 20px 76px;
    padding:38px 28px 36px;
    box-shadow:0 20px 50px rgba(31,45,42,.12);
    backdrop-filter:blur(10px);
  }

  .bridge__chapter{
    position:static;
    display:block;
    margin-bottom:16px;
    writing-mode:initial;
    font-size:.54rem;
  }

  .bridge__copy .eyebrow{
    margin-bottom:16px;
  }

  .bridge h2{
    font-size:clamp(2.85rem,10.5vw,4.7rem);
    line-height:.96;
  }

  .bridge__copy > p:not(.eyebrow){
    font-size:.93rem;
    line-height:1.72;
  }

  .bridge blockquote{
    margin-top:26px;
    padding-top:20px;
    font-size:1.16rem;
    line-height:1.5;
  }


  /* gallery */

  .gallery{
    padding-top:82px;
  }

  .gallery__inner{
    width:calc(100% - 40px);
  }

  .gallery__word{
    top:42px;
    left:-18%;
    font-size:9rem;
  }

  .gallery__head{
    width:100%;
    max-width:630px;
    margin:0 auto 38px;
  }

  .gallery__head .eyebrow{
    margin-bottom:15px;
  }

  .gallery__head h2{
    font-size:clamp(2.9rem,10.8vw,4.8rem);
    line-height:.96;
  }

  .gallery__head h2 em{
    margin-top:6px;
  }

  .gallery__head > p:last-child{
    max-width:520px;
    margin-top:20px;
    font-size:.91rem;
    line-height:1.65;
  }


  /* livro folheável */

  .page-book{
    height:380vh;
  }

  .page-book__sticky{
    top:70px;
    height:calc(100svh - 70px);
  }

  .page-book__scene{
    padding-top:10px;
    transform:translateY(10px);
    perspective:2200px;
  }

  .page-book__book{
    width:min(720px,118vw);
    aspect-ratio:1.25;
    filter:drop-shadow(0 24px 34px rgba(61,51,39,.12));
  }

  .page-book__gutter{
    width:16px;
  }

  .page-book__intro{
    padding:20px;
  }

  .page-book__intro .eyebrow{
    margin-bottom:8px;
    font-size:.52rem;
    letter-spacing:.13em;
  }

  .page-book__intro h3{
    margin-bottom:11px;
    font-size:clamp(1.3rem,4vw,2rem);
    line-height:.98;
  }

  .page-book__intro-text{
    margin-bottom:11px;
    font-size:.66rem;
    line-height:1.45;
  }

  .page-book__index{
    margin-bottom:10px;
  }

  .page-book__index p{
    padding:5px 0;
    grid-template-columns:22px 1fr;
    gap:7px;
    font-size:.68rem;
    line-height:1.18;
  }

  .page-book__index p span{
    font-size:.45rem;
  }

  .page-book__intro-folio{
    left:20px;
    bottom:10px;
    font-size:.42rem;
  }

  .book-page{
    padding:20px;
  }

  .book-page--right{
    padding-left:26px;
  }

  .book-page--left{
    padding-right:26px;
  }

  .book-page__number{
    top:12px;
    right:14px;
    font-size:3.4rem;
  }

  .book-page--left .book-page__number{
    left:14px;
  }

  .book-page .eyebrow{
    margin-bottom:7px;
    font-size:.52rem;
    letter-spacing:.13em;
  }

  .book-page h3{
    margin-bottom:9px;
    font-size:clamp(1.25rem,4vw,1.9rem);
    line-height:.98;
  }

  .book-page h3 em{
    margin-top:3px;
  }

  .book-page__text{
    max-width:100%;
    font-size:.66rem;
    line-height:1.45;
  }

  .book-page__art{
    min-height:0;
    flex:1;
    padding:16px 0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .book-page__art img{
    width:auto;
    max-width:96%;
    max-height:52%;
    margin:auto;
    object-fit:contain;
  }

  .book-page__art--paris img{
    max-width:98%;
    max-height:56%;
  }

  .book-page__art--crowns img{
    max-width:82%;
    max-height:44%;
  }


  .book-page__folio{
    bottom:11px;
    font-size:.44rem;
  }

  .book-page--right .book-page__folio{
    right:14px;
  }

  .book-page--left .book-page__folio{
    left:14px;
  }

  .page-book__hint{
    margin-top:14px;
    gap:7px;
    font-size:.48rem;
    letter-spacing:.14em;
  }


  /* author */

  .author{
    padding:86px 0 94px;
    background:
      linear-gradient(
        180deg,
        rgba(4,44,42,.84) 0%,
        rgba(7,66,62,.82) 52%,
        rgba(4,44,42,.9) 100%
      ),
      url("assets/book-texture.png") center / cover no-repeat;
  }

  .author__inner{
    width:calc(100% - 40px);
    grid-template-columns:1fr;
    gap:54px;
  }

  .author__ghost{
    top:10px;
    right:-18%;
    font-size:9rem;
  }

  .author__portrait{
    width:min(520px,100%);
    margin:auto;
    padding:0 0 46px 14px;
  }

  .author__portrait-panel{
    min-height:0;
    aspect-ratio:.81;
  }

  .author__portrait-panel::after{
    inset:20px;
  }

  .author__portrait-panel::before{
    width:320px;
    height:320px;
    right:-110px;
    top:-90px;
  }

  .author__portrait-line{
    left:-14px;
    top:48px;
    width:46px;
  }

  .author__portrait img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center bottom;
  }

  .author__experience{
    left:0;
    right:14px;
    bottom:0;
    min-height:96px;
    padding:17px 20px;
    gap:15px;
  }

  .author__experience strong{
    font-size:2.8rem;
  }

  .author__experience p{
    max-width:none;
    font-size:.61rem;
    line-height:1.48;
  }

  .author__content{
    max-width:620px;
    padding:0;
  }

  .author__content .eyebrow{
    margin-bottom:16px;
  }

  .author h2{
    font-size:clamp(3.45rem,12.8vw,5.8rem);
    line-height:.89;
  }

  .author h2 em{
    margin-top:7px;
    margin-left:9%;
  }

  .author__divider{
    width:58px;
    margin:27px 0 24px;
  }

  .author__bio{
    max-width:none;
  }

  .author__bio p{
    margin-bottom:16px;
    font-size:.92rem;
    line-height:1.7;
  }

  .author__bio p:first-child{
    font-size:1.08rem;
    line-height:1.58;
  }

  .author__actions{
    margin-top:27px;
  }

  .author .button--outline{
    min-width:240px;
  }


  /* final */

  .final{
    min-height:0;
    grid-template-columns:1fr;
    gap:46px;
    padding:
      88px
      20px
      calc(92px + env(safe-area-inset-bottom));
    text-align:center;
  }

  .final__book{
    width:min(300px,65vw);
  }

  .final__book img{
    box-shadow:0 26px 48px rgba(0,0,0,.24);
  }

  .final__copy{
    max-width:620px;
    margin:auto;
  }

  .final__copy .eyebrow{
    margin-bottom:18px;
  }

  .final h2{
    font-size:clamp(3rem,10.8vw,5rem);
    line-height:.95;
  }

  .final__copy > p:not(.eyebrow){
    max-width:540px;
    margin:22px auto 0;
    font-size:.94rem;
    line-height:1.7;
  }

  .final__copy .button{
    margin-top:28px;
  }

  .final small{
    margin-top:13px;
    font-size:.61rem;
    line-height:1.5;
  }


  /* footer */

  .footer{
    min-height:150px;
    padding:
      34px
      20px
      calc(34px + env(safe-area-inset-bottom));
    flex-direction:column;
    justify-content:center;
    gap:22px;
    text-align:center;
  }

  .footer > div{
    flex-direction:column;
    gap:12px;
  }

  .footer p,
  .footer > a{
    font-size:.62rem;
  }


  /* reveal book */

  .reveal-book{
    --cover-w:200px;
    --cover-h:300px;
    --spine-w:17px;

    height:300vh;
  }

  .reveal-book__inner{
    width:calc(100% - 32px);
  }

  .reveal-book__intro{
    top:88px;
    width:calc(100% - 20px);
  }

  .reveal-book__intro .eyebrow{
    margin-bottom:10px;
  }

  .reveal-book__intro h2{
    font-size:clamp(2.65rem,9.8vw,4.4rem);
    line-height:.97;
  }

  .reveal-book__row{
    bottom:12vh;
    gap:7px;
  }

  .reveal-book__shelf{
    bottom:10.3vh;
    width:94vw;
    height:14px;
  }

  .shelf-book{
    width:44px;
    height:300px;
  }

  .shelf-book:nth-child(1),
  .shelf-book:nth-child(7){
    display:none;
  }
}


/* ==========================================================================================
   MOBILE — SMALL
========================================================================================== */

@media (max-width:560px){

  /* base */

  .eyebrow,
  .kicker{
    font-size:.6rem;
  }

  .button{
    min-height:52px;
  }


  /* header */

  .header__inner{
    width:calc(100% - 32px);
  }

  .wordmark span{
    font-size:.57rem;
  }

  .wordmark strong{
    font-size:.9rem;
  }


  /* hero */

  .hero__content{
    width:calc(100% - 36px);
    padding-top:100px;
    padding-bottom:66px;
    gap:27px;
  }

  .hero h1{
    font-size:clamp(3.35rem,16.2vw,4.9rem);
  }

  .hero h1 em{
    margin-left:5%;
  }

  .hero__lead{
    font-size:.92rem;
    line-height:1.68;
  }

  .hero__actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }

  .hero__actions .button--primary{
    width:100%;
  }

  .button-link{
    align-self:flex-start;
    font-size:.72rem;
  }

  .hero__bookwrap{
    min-height:350px;
  }

  .hero__book{
    width:min(330px,84vw);
  }

  .hero__seal{
    right:1%;
    width:90px;
  }

  .hero__seal span{
    font-size:.47rem;
  }

  .hero__seal strong{
    font-size:.75rem;
  }


  /* opening */

  .opening{
    padding:72px 0 78px;
  }

  .opening__inner{
    width:calc(100% - 36px);
    gap:26px;
  }

  .opening__meta span{
    font-size:1.55rem;
  }

  .opening__meta p{
    font-size:.52rem;
  }

  .opening__content h2,
  .opening h2{
    font-size:clamp(2.7rem,12.6vw,4rem);
  }

  .opening__divider{
    margin:23px 0;
  }

  .opening__content .opening__lead{
    font-size:1.1rem;
  }

  .opening__content > p:not(.eyebrow){
    font-size:.91rem;
    line-height:1.68;
  }

  .opening__caption{
    max-width:190px;
    padding:9px 10px;
    font-size:.5rem;
  }

  .opening__ghost{
    font-size:7rem;
  }


  /* manifesto */

  .manifesto{
    padding:80px 18px 84px;
  }

  .manifesto h2{
    font-size:clamp(2.8rem,12.7vw,4.2rem);
  }

  .manifesto__content > p:last-child{
    font-size:.9rem;
    line-height:1.66;
  }


  /* bridge */

  .bridge__image{
    min-height:330px;
  }

  .bridge__copy{
    margin:-42px 14px 64px;
    padding:34px 22px 32px;
  }

  .bridge h2{
    font-size:clamp(2.65rem,12vw,4rem);
  }

  .bridge__copy > p:not(.eyebrow){
    font-size:.9rem;
  }

  .bridge blockquote{
    font-size:1.1rem;
  }


  /* gallery */

  .gallery{
    padding-top:74px;
  }

  .gallery__inner{
    width:calc(100% - 36px);
  }

  .gallery__head{
    margin-bottom:30px;
  }

  .gallery__head h2{
    font-size:clamp(2.7rem,12.3vw,4rem);
  }

  .gallery__head > p:last-child{
    font-size:.88rem;
  }


  /* livro folheável */

  .page-book{
    height:360vh;
  }

  .page-book__scene{
    padding-top:0;
    transform:translateY(8px);
  }

  .page-book__book{
    width:122vw;
    aspect-ratio:1.18;
  }

  .page-book__intro{
    padding:15px;
  }

  .page-book__intro .eyebrow{
    margin-bottom:5px;
    font-size:.45rem;
  }

  .page-book__intro h3{
    margin-bottom:7px;
    font-size:clamp(1.08rem,5vw,1.45rem);
  }

  .page-book__intro-text{
    margin-bottom:6px;
    font-size:.54rem;
    line-height:1.34;
  }

  .page-book__index{
    margin-bottom:0;
  }

  .page-book__index p{
    padding:3.5px 0;
    grid-template-columns:18px 1fr;
    gap:5px;
    font-size:.56rem;
    line-height:1.14;
  }

  .page-book__index p span{
    font-size:.38rem;
  }

  .page-book__intro-folio{
    display:none;
  }

  .book-page{
    padding:15px;
  }

  .book-page--right{
    padding-left:19px;
  }

  .book-page--left{
    padding-right:19px;
  }

  .book-page__number{
    top:9px;
    right:9px;
    font-size:2.8rem;
  }

  .book-page--left .book-page__number{
    left:9px;
  }

  .book-page .eyebrow{
    margin-bottom:5px;
    font-size:.45rem;
  }

  .book-page h3{
    margin-bottom:7px;
    font-size:clamp(1.05rem,5vw,1.45rem);
  }

  .book-page__text{
    font-size:.56rem;
    line-height:1.35;
  }

  .book-page__art{
    padding:6px 0 3px;
  }

  .book-page__art img{
    max-width:96%;
    max-height:50%;
  }

  .book-page__art--paris img{
    max-width:98%;
    max-height:54%;
  }

  .book-page__art--crowns img{
    max-width:84%;
    max-height:42%;
  }

  .book-page__folio{
    bottom:8px;
    font-size:.38rem;
  }

  .page-book__gutter{
    width:12px;
  }

  .page-book__hint{
    margin-top:11px;
    font-size:.43rem;
  }


  /* author */

  .author{
    padding:76px 0 82px;
  }

  .author__inner{
    width:calc(100% - 36px);
    gap:48px;
  }

  .author__portrait{
    padding:0 0 43px 10px;
  }

  .author__portrait-panel::after{
    inset:16px;
  }

  .author__experience{
    right:8px;
    min-height:88px;
    padding:14px 16px;
    gap:12px;
  }

  .author__experience strong{
    font-size:2.45rem;
  }

  .author__experience p{
    font-size:.56rem;
  }

  .author h2{
    font-size:clamp(3.1rem,14.5vw,4.7rem);
  }

  .author h2 em{
    margin-left:5%;
  }

  .author__divider{
    margin:24px 0 21px;
  }

  .author__bio p{
    font-size:.89rem;
    line-height:1.66;
  }

  .author__bio p:first-child{
    font-size:1.03rem;
  }

  .author .button--outline{
    width:100%;
    min-width:0;
  }


  /* final */

  .final{
    gap:38px;
    padding:
      78px
      18px
      calc(82px + env(safe-area-inset-bottom));
  }

  .final__book{
    width:min(270px,72vw);
  }

  .final h2{
    font-size:clamp(2.75rem,12.2vw,4.2rem);
  }

  .final__copy > p:not(.eyebrow){
    font-size:.9rem;
  }

  .final__copy .button{
    width:100%;
  }


  /* reveal book */

  .reveal-book{
    --cover-w:174px;
    --cover-h:261px;
    --spine-w:15px;

    height:290vh;
  }

  .reveal-book__intro{
    top:82px;
  }

  .reveal-book__intro h2{
    font-size:clamp(2.45rem,11vw,3.7rem);
  }

  .reveal-book__row{
    bottom:13vh;
    gap:6px;
  }

  .reveal-book__shelf{
    bottom:11.4vh;
    height:12px;
  }

  .shelf-book{
    width:40px;
    height:261px;
  }

  .shelf-book:nth-child(2),
  .shelf-book:nth-child(6){
    display:none;
  }
}


/* ==========================================================================================
   MOBILE — VERY SMALL
========================================================================================== */

@media (max-width:380px){

  /* header */

  .header__inner{
    width:calc(100% - 28px);
  }

  .wordmark strong{
    font-size:.84rem;
  }

  .wordmark span{
    font-size:.53rem;
  }


  /* hero */

  .hero__content{
    width:calc(100% - 30px);
  }

  .hero h1{
    font-size:clamp(3.05rem,16vw,3.8rem);
  }

  .hero__lead{
    font-size:.89rem;
  }

  .hero__bookwrap{
    min-height:315px;
  }

  .hero__book{
    width:82vw;
  }

  .hero__seal{
    width:82px;
  }


  /* editorial sections */

  .opening__inner,
  .gallery__inner,
  .author__inner{
    width:calc(100% - 30px);
  }

  .opening__content h2,
  .opening h2,
  .bridge h2,
  .gallery__head h2,
  .final h2{
    font-size:2.65rem;
  }

  .manifesto h2{
    font-size:2.75rem;
  }


  /* livro folheável */

  .page-book__book{
    width:126vw;
  }

  .book-page{
    padding:13px;
  }

  .book-page--right{
    padding-left:17px;
  }

  .book-page--left{
    padding-right:17px;
  }

  .book-page h3{
    font-size:1rem;
  }

  .book-page__text{
    font-size:.52rem;
  }

  .book-page__art img{
    max-height:105px;
  }


  /* author */

  .author h2{
    font-size:2.95rem;
  }

  .author__experience{
    padding:12px 14px;
  }

  .author__experience strong{
    font-size:2.25rem;
  }


  /* reveal book */

  .reveal-book{
    --cover-w:150px;
    --cover-h:225px;
    --spine-w:13px;
  }

  .reveal-book__row{
    bottom:15vh;
  }

  .reveal-book__shelf{
    bottom:13.6vh;
  }

  .shelf-book{
    height:225px;
  }
}

/* ==========================================================================================
   GALLERY — MOBILE SINGLE PAGE
========================================================================================== */

@media (max-width:820px){

  .page-book{
    height:520vh;
  }

  .page-book__sticky{
    top:70px;
    height:calc(100svh - 70px);
  }

  .page-book__scene{
    width:100%;
    height:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    perspective:none;
    transform:none;
  }

  /*
   * No mobile o "livro" deixa de ser um spread.
   * A área passa a ter a proporção de UMA página.
   */
  .page-book__book{
    width:min(
      88vw,
      390px,
      calc((100svh - 155px) * .72)
    );
    aspect-ratio:.72;
    transform-style:flat;
    filter:drop-shadow(
      0 22px 32px rgba(61,51,39,.13)
    );
  }


  /* elementos exclusivos do spread */

  .page-book__base,
  .page-book__gutter{
    display:none;
  }


  /* todas as folhas passam a ocupar a página inteira */

  .book-sheet{
    position:absolute;
    inset:0;
    left:0;
    top:0;
    width:100%;
    height:100%;
    transform:none !important;
    transform-origin:center;
    transform-style:flat;
    z-index:auto !important;
    pointer-events:none;
  }


  /* cada face se torna uma página independente */

  .book-sheet__face{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:7px;
    backface-visibility:visible;
    -webkit-backface-visibility:visible;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) !important;
    box-shadow:
      0 2px 5px rgba(47,35,24,.05),
      0 18px 35px rgba(47,35,24,.08);
    transition:
      opacity .32s ease,
      transform .42s cubic-bezier(.2,.7,.2,1),
      visibility 0s linear .32s;
  }

  .book-sheet__face.is-mobile-active{
    z-index:10;
    opacity:1;
    visibility:visible;
    transform:translateY(0) !important;
    transition:
      opacity .32s ease,
      transform .42s cubic-bezier(.2,.7,.2,1),
      visibility 0s;
  }

  .book-sheet__face.is-mobile-before{
    opacity:0;
    visibility:hidden;
    transform:translateY(-14px) !important;
  }

  .book-sheet__face.is-mobile-after{
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) !important;
  }


  /* página */

  .book-page,
  .page-book__intro{
    width:100%;
    height:100%;
    padding:clamp(25px,7vw,34px);
  }

  .book-page--right,
  .book-page--left{
    padding-left:clamp(25px,7vw,34px);
    padding-right:clamp(25px,7vw,34px);
  }


  /* introdução */

  .page-book__intro .eyebrow{
    margin-bottom:11px;
    font-size:.57rem;
    letter-spacing:.15em;
  }

  .page-book__intro h3{
    max-width:100%;
    margin:0 0 16px;
    font-size:clamp(2rem,8vw,2.75rem);
    line-height:.96;
  }

  .page-book__intro h3 em{
    margin-top:5px;
  }

  .page-book__intro-text{
    max-width:100%;
    margin:0 0 22px;
    font-size:.78rem;
    line-height:1.55;
  }

  .page-book__index{
    margin-top:auto;
    margin-bottom:18px;
  }

  .page-book__index p{
    padding:8px 0;
    grid-template-columns:27px 1fr;
    gap:9px;
    font-size:.83rem;
    line-height:1.25;
  }

  .page-book__index p span{
    font-size:.49rem;
  }

  .page-book__intro-folio{
    left:clamp(25px,7vw,34px);
    bottom:16px;
  }


  /* conteúdo */

  .book-page__number{
    top:18px;
    right:20px;
    font-size:5rem;
  }

  .book-page--left .book-page__number{
    left:auto;
    right:20px;
  }

  .book-page .eyebrow{
    margin-bottom:10px;
    font-size:.59rem;
    letter-spacing:.16em;
  }

  .book-page h3{
    max-width:92%;
    margin-bottom:15px;
    font-size:clamp(2rem,8vw,2.8rem);
    line-height:.98;
  }

  .book-page h3 em{
    margin-top:5px;
  }

  .book-page__text{
    max-width:94%;
    font-size:.82rem;
    line-height:1.6;
  }


  /* artes */

.book-page__art{
  min-height:0;
  flex:1;
  padding:16px 0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.book-page__art img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  max-height:100%;
  margin:auto;
  object-fit:contain;
}

.book-page__art--paris img{
  width:108%;
  max-width:none;
  max-height:100%;
}

.book-page__art--crowns img{
  width:90%;
  max-width:none;
  max-height:100%;
}

  /* fólio */

  .book-page__folio{
    bottom:17px;
    font-size:.48rem;
  }

  .book-page--right .book-page__folio,
  .book-page--left .book-page__folio{
    left:auto;
    right:20px;
  }


  /* instrução */

  .page-book__hint{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    margin:0;
    white-space:nowrap;
    font-size:.48rem;
    letter-spacing:.15em;
  }
}


/* ==========================================================================================
   GALLERY — MOBILE SINGLE PAGE / SMALL
========================================================================================== */

@media (max-width:560px){

  .page-book{
    height:510vh;
  }

  .page-book__book{
    width:min(
      90vw,
      360px,
      calc((100svh - 145px) * .72)
    );
  }

  .book-page,
  .page-book__intro{
    padding:24px;
  }

  .book-page--right,
  .book-page--left{
    padding-left:24px;
    padding-right:24px;
  }

  .page-book__intro h3{
    font-size:clamp(1.8rem,8.5vw,2.45rem);
  }

  .page-book__intro-text{
    font-size:.73rem;
  }

  .page-book__index p{
    padding:7px 0;
    font-size:.77rem;
  }

  .book-page__number{
    top:16px;
    right:17px;
    font-size:4.4rem;
  }

  .book-page--left .book-page__number{
    right:17px;
  }

  .book-page h3{
    font-size:clamp(1.8rem,8.5vw,2.5rem);
  }

  .book-page__text{
    font-size:.76rem;
    line-height:1.55;
  }

  .book-page__folio{
    right:17px !important;
    bottom:15px;
  }
}