/* Composição de leitura para celulares e janelas abaixo de 1024 px. */
:root {
  --edge: clamp(20px, 5.6vw, 50px);
  --frame: clamp(8px, 2vw, 14px);
  --section-gap: clamp(64px, 17vw, 116px);
  --title: clamp(29px, 9.3vw, 64px);
  --copy: clamp(17px, 4.5vw, 21px);
  --radius: 10px;
  --touch: 46px;
}
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { font-weight: 400; }
main, .footer { width: 100%; }
main p, footer p { text-wrap: pretty; }
.keep-phrase, .anniversary h2 strong { white-space: nowrap; }
h2.reveal[id] { scroll-margin-top: 36px; }
.section, .landscape { padding-inline: var(--edge); }
main h2, .closing-title {
  font-size: var(--title); line-height: 1.035; font-weight: 300;
  letter-spacing: -.032em; text-wrap: balance;
}
.body, .hero-sub, .journal-copy p, .closing-copy {
  font: 300 var(--copy)/1.48 Otto, Georgia, serif; color: var(--dark);
}
.eyebrow {
  font: 400 11px/1.45 Favorit, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .035em;
}
.small-index { font: 300 16px/1.5 Otto, Georgia, serif; }
.rounded, .film-surface, .landscape-slot, .bts-photo { border-radius: var(--radius); }
.pill {
  display: inline-flex; min-height: var(--touch); padding: 0 clamp(13px, 4vw, 22px);
  width: 100%; max-width: 100%; border: 1px solid currentColor;
  font: 400 clamp(10px, 2.65vw, 12px)/1.25 Favorit, Arial, sans-serif;
}
.pill:active { background: var(--ink); color: white; }
.journal-copy .pill, .portfolio-copy .pill { color: white; background: var(--ink); border-color: var(--ink); }
.journal-copy .pill:is(:hover,:focus-visible), .portfolio-copy .pill:is(:hover,:focus-visible) { background: transparent; color: var(--ink); }

/* A marca e o conteúdo do filme partem do mesmo eixo. */
.site-header {
  position: absolute; z-index: 30; top: calc(var(--frame) + 12px);
  left: var(--edge); right: var(--edge); display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; color: white;
}
.has-mobile-nav .site-header { position: fixed; padding: 0 2px; }
.site-header .brand { position: relative; display: block; width: 97px; height: 48px; }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand-dark { opacity: 0; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.has-mobile-nav .menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; min-width: 74px; padding: 0 2px 0 10px;
  font: 400 12px/1 Favorit, Arial, sans-serif; text-transform: uppercase;
}
.menu-toggle i { position: relative; width: 18px; height: 12px; }
.menu-toggle i::before, .menu-toggle i::after {
  content: ''; position: absolute; left: 0; width: 18px; top: 3px; height: 1px;
  background: currentColor; transition: transform .22s var(--ease);
}
.menu-toggle i::after { top: 9px; }
.menu-toggle[aria-expanded=true] i::before { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded=true] i::after { transform: translateY(-3px) rotate(-45deg); }
.has-mobile-nav .site-header:is(.is-compact,.menu-open) {
  top: max(10px, env(safe-area-inset-top));
  padding-inline: 16px; border-radius: 26px; color: var(--ink);
  background: rgba(250,249,246,.96); box-shadow: 0 3px 22px #211e191a;
}
.site-header:is(.is-compact,.menu-open) .brand-dark { opacity: 1; }
.site-header:is(.is-compact,.menu-open) .brand-white { opacity: 0; }
.site-header.is-compact .brand { width: 81px; }
.has-mobile-nav .site-header nav { display: none; }
.site-header nav a { font: 400 14px/1.25 Saans, Arial, sans-serif; }
.has-mobile-nav .menu-open nav {
  display: grid; width: 100%; grid-template-columns: minmax(0,1fr); gap: 8px;
  padding: 8px 0 16px;
}
.site-header.menu-open nav a {
  justify-content: center; text-align: center; width: 100%; min-height: 54px; padding: 8px 12px;
  border: 1px solid var(--ink); border-radius: 999px;
  font: 400 clamp(16px, 4.6vw, 20px)/1.2 Favorit, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
}
.site-header.menu-open nav .pill { font-size: clamp(14px, 3.8vw, 17px); }
.site-header.menu-open nav a:is(:active,:focus-visible) { background: var(--ink); color: white; }
.site-header.menu-open nav a:focus-visible { outline-color: var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  .site-header.menu-open nav a:hover { background: var(--ink); color: white; }
}

/* O filme ocupa a parte alta. A imagem se dissolve no fundo do texto. */
.hero {
  isolation: isolate; margin: var(--frame); min-height: calc(100svh - 2 * var(--frame));
  display: flex; align-items: end; color: #faf7f1; background: #1b1815;
  padding: 160px calc(var(--edge) - var(--frame) + 2px) clamp(28px,6.4svh,64px);
}
.hero > video { height: 76%; object-position: 51% 45%; }
.hero .shade {
  background: linear-gradient(to bottom,rgba(20,17,14,.57),rgba(20,17,14,.03) 20%,rgba(27,24,21,.08) 32%,rgba(27,24,21,.55) 49%,#1b1815 76%);
}
.hero-copy { position: relative; z-index: 1; width: 100%; max-width: 40rem; container-type: inline-size; }
.hero-copy .eyebrow { margin-bottom: clamp(12px,2.2svh,22px); }
.hero h1 {
  font: 300 clamp(26px, 8.15vw, 68px)/1.015 Saans, Arial, sans-serif;
  font-size: min(9cqi,64px);
  text-transform: uppercase; letter-spacing: -.033em; margin: 0;
}
.hero h1 .otto { font-size: 1.025em; }
.hero-last { display: block; }
.hero-action-row { margin-top: 19px; }
.hero-sub { max-width: 31ch; color: inherit; font-size: clamp(16px,4.25vw,21px); }
.hero-bottom { margin-top: 23px; }
.hero-bottom .pill { gap: 11px; }
.hero-bottom .pill::before { content: ''; border-block: 4px solid transparent; border-left: 7px solid currentColor; }
.hero-bottom .circle-play { display: none; }
.film-surface .pill:is(:hover,:focus-visible) { background: #fff; color: var(--ink); border-color: white; }

.partnership { padding-block: var(--section-gap); }
.title-row .eyebrow, .backstage-intro .eyebrow { margin-bottom: 15px; }
.title-row h2 br, .anniversary h2 br, .journal-copy p br { display: none; }
.draw-rule { display: grid; align-items: center; margin: 23px 0 26px; width: 100%; }
.draw-rule::before, .draw-rule img { grid-area: 1/1; }
.draw-rule::before { content: ''; height: 1px; background: #302e2b75; }
.draw-rule img { width: 100%; height: clamp(17px,4.2vw,30px); }
.partnership-body, .decisions-copy .body {
  display: grid; grid-template-columns: minmax(26px, .7fr) minmax(0, 9.3fr);
  align-items: baseline; column-gap: 8px;
}
.partnership-body .body, .decisions-copy .body p { max-width: 52ch; }
.decisions { display: grid; grid-template-columns: minmax(0,1fr); }
.decisions-copy, .portfolio-copy { display: contents; }
.decisions-copy .eyebrow, .portfolio-copy .eyebrow { grid-row: 1; margin-bottom: 14px; }
.decisions h2, .portfolio-copy h2 { grid-row: 2; margin-bottom: 22px; }
.decisions-film { grid-row: 3; aspect-ratio: 1.12; width: 100%; }
.decisions-film video { object-position: center 48%; }
.decisions-copy .body { grid-row: 4; margin-top: 25px; row-gap: .9em; }
.decisions-copy .body p { grid-column: 2; }

.journal { padding-block: var(--section-gap) clamp(44px,10vw,80px); }
.partnership, .journal, .portfolio { scroll-margin-top: calc(10px - var(--section-gap)); }
.journal > h2 { margin-bottom: 22px; }
.journal-body { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; }
.journal-cover, .journal-lines { grid-area: 1 / 1; }
.journal-cover {
  position: relative; display: block; width: min(80%,330px); aspect-ratio: 589/852;
  overflow: hidden; justify-self: center;
}
.journal-cover img { position: absolute; height: 100%; width: 257.16%; max-width: none; left: -85.63%; top: 0; }
.journal-lines { display: grid; gap: clamp(17px,4vw,26px); pointer-events: none; }
.journal-lines img { width: 100%; height: 1px; background: #bab0a1; }
.journal-copy { grid-area: 2 / 1; margin-top: 6px; }
.journal-copy p { max-width: 40ch; }
.journal-copy .pill { margin-top: 20px; }

/* Dez subdivisões mantêm os seis planos em escalas e alturas diferentes. */
.landscape { padding-block: clamp(42px,10vw,78px) var(--section-gap); }
.landscape-canvas {
  display: grid; grid-template-columns: repeat(10,minmax(0,1fr));
  column-gap: clamp(4px,1.8vw,14px); row-gap: clamp(30px,9vw,74px); align-items: start;
}
.landscape-slot { position: relative; }
.landscape-slot video { position: absolute; inset: 0; }
.landscape-a { grid-area: 1 / 1 / 2 / 7; aspect-ratio: 4/5; }
.landscape-b { grid-area: 1 / 8 / 2 / 11; aspect-ratio: 4/5; align-self: end; margin-bottom: 9%; }
.landscape-intro { grid-area: 2 / 1 / 3 / -1; }
.landscape h2 { font-size: clamp(25px,7.4vw,55px); text-transform: uppercase; line-height: 1.03; }
.landscape h2 span, .portfolio-copy .title-line { display: block; }
.landscape .body { margin: 20px 0 0 auto; max-width: min(88%,43ch); }
.landscape-c { grid-area: 3 / 1 / 4 / 5; aspect-ratio: 3/4; }
.landscape-d { grid-area: 3 / 6 / 4 / 11; aspect-ratio: 4/5; margin-top: 34%; }
.landscape-e { grid-area: 4 / 2 / 5 / 5; aspect-ratio: 3/4; }
.landscape-f { grid-area: 4 / 5 / 5 / 11; aspect-ratio: 5/4; margin-top: 26%; }

.backstage { padding-block: clamp(42px,10vw,84px) var(--section-gap); }
.backstage-intro { max-width: 48rem; }
.backstage-collage {
  margin-block: 28px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: clamp(7px,2vw,15px); align-items: end;
}
.bts-photo { display: block; width: 100%; }
.bts-photo img { width: 100%; height: 100%; object-fit: cover; }
.bts-a, .bts-d, .bts-e { grid-column: span 2; aspect-ratio: 1.08; }
.bts-b, .bts-c, .bts-f { grid-column: span 3; aspect-ratio: 1.45; }
.bts-c, .bts-d { align-self: start; }
.backstage-bottom .body { max-width: 52ch; }
.backstage-bottom .actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.anniversary {
  margin-inline: var(--edge); min-height: clamp(400px,69svh,690px);
  padding: 24px 16px; isolation: isolate; text-align: center;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  background: #332c22; color: white;
}
.anniversary > video, .hero > video { z-index: -2; }
.anniversary > .shade, .hero > .shade { z-index: -1; }
.anniversary > .shade { background: linear-gradient(170deg,#20170e52,#20180ea6 74%,#21190eaf); }
.anniversary-bottom { justify-self: stretch; }
.anniversary-heading { align-self: center; max-width: 660px; }
.anniversary-mark img { width: 32px; margin: 0 auto 14px; }
.anniversary h2 { font-size: clamp(29px,8.4vw,54px); }
.portfolio {
  background: linear-gradient(to bottom,transparent,var(--paper) var(--section-gap));
  padding-block: var(--section-gap) clamp(32px,7vw,64px);
  display: grid; grid-template-columns: minmax(0,1fr);
}
.portfolio-copy h2 { text-transform: uppercase; }
.portfolio-film { grid-row: 3; aspect-ratio: 1.28; }
.portfolio-copy > p:not(.eyebrow) { grid-row: 4; font: 400 var(--copy)/1.48 Saans, Arial, sans-serif; margin-top: 23px; max-width: 48ch; }
.portfolio-copy .pill { grid-row: 5; margin-top: 21px; }
.footer { background: var(--paper); }
.closing-main {
  padding: 30px var(--edge) 28px; display: grid;
  grid-template-columns: 1fr auto; gap: 13px 12px; align-items: center;
}
.closing-title, .closing-copy { grid-column: 1/-1; }
.closing-title { font-size: clamp(24px,6.5vw,47px); text-transform: uppercase; }
.closing-copy { font-size: 16px; max-width: 38ch; }
.closing-social { display: flex; flex-wrap: wrap; gap: 0 14px; }
.closing-social a, .closing-legal a, .closing-partner a, .closing-logo {
  display: inline-flex; align-items: center; min-height: 44px;
}
.closing-social a { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.closing-logo img { width: clamp(128px,38vw,190px); }
.closing-band { padding: 26px var(--edge) max(20px,env(safe-area-inset-bottom)); background: #bab0a1; color: #302e2b; }
.closing-partner { display: flex; align-items: center; gap: 12px; }
.closing-partner span { font: 400 10px/1.3 Saans, sans-serif; text-transform: uppercase; }
.closing-partner img { width: clamp(178px,54vw,264px); }
.closing-credits p, .closing-legal { font: 400 13px/1.55 Saans, Arial, sans-serif; }
.closing-credits p { margin-top: 12px; max-width: 40em; font-size: clamp(9px,2.6vw,12px); line-height: 1.5; letter-spacing: -.012em; }
.closing-line { width: 100%; height: 1px; margin: 22px 0 16px; }
.closing-legal { display: flex; flex-wrap: wrap; gap: 0 14px; justify-content: space-between; }
.closing-legal span { flex-basis: 100%; }

.media-dialog:not(.journal-dialog) { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
.media-dialog:not(.journal-dialog) .dialog-bar { padding: 6px 15px; }
.dialog-close { min-height: 44px; }
@media (max-width: 599px) {
  .reader-controls .reader-download { width: 100%; justify-content: center; }
  .reader-controls .reader-navigation { width: auto; }
}
.gallery { padding: 10px; gap: 8px; }
.gallery button { min-height: 44px; }
body.modal-open .site-header { visibility: hidden; }

@media (min-width: 600px) {
  .has-mobile-nav .site-header.is-compact { left: max(var(--edge),calc(50% - 330px)); right: max(var(--edge),calc(50% - 330px)); }
  .hero { padding-inline: var(--edge); }
  .hero-last { display: inline; }
  .hero h1 { font-size: clamp(45px,6.7vw,62px); }
  .hero-copy { max-width: 100%; }
  .partnership-body, .decisions-copy .body { grid-template-columns: 40px minmax(0, 1fr); }
  .decisions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 28px; align-items: start; }
  .decisions-film { grid-area: 1/1/5/2; aspect-ratio: 4/5; align-self: stretch; }
  .decisions-film video { position: absolute; inset: 0; }
  .decisions-film { position: relative; }
  .decisions-copy .eyebrow, .decisions-copy h2, .decisions-copy .body { grid-column: 2; }
  .decisions-copy h2 { font-size: clamp(42px,5.7vw,58px); }
  .decisions-copy .body { margin-top: 4px; display: block; }
  .decisions-copy .small-index { display: block; margin-bottom: 8px; }
  .decisions-copy p + p { margin-top: .85em; }
  .journal-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 24px; }
  .journal-copy { display: contents; }
  .journal-copy p { grid-area: 1/1; }
  .journal-copy .pill { grid-area: 2/1/3/-1; }
  .journal-cover { grid-area: 1/2; width: min(100%,340px); }
  .journal-lines { grid-area: 1/2; }
  .landscape-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 24px; }
  .landscape h2 { font-size: clamp(26px,4.2vw,42px); }
  .landscape .body { margin: 0; max-width: none; }
  .landscape-a { aspect-ratio: 1.55; }
  .landscape-b { aspect-ratio: 1.2; }
  .backstage-collage { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .bts-a, .bts-f { grid-column: span 3; }
  .bts-b, .bts-e { grid-column: span 5; }
  .bts-c, .bts-d { grid-column: span 4; }
  .bts-photo { aspect-ratio: 1.5; }
  .backstage-bottom .body { max-width: 58ch; }
  .portfolio { grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; }
  .portfolio-film { grid-area: 1/1/5/2; align-self: stretch; position: relative; aspect-ratio: auto; }
  .portfolio-film video { position: absolute; inset: 0; }
  .portfolio-copy > :is(.eyebrow,h2,p) { grid-column: 2; }
  .portfolio-copy .pill { grid-column: 1/-1; }
  .portfolio-copy h2 { font-size: clamp(37px,5.6vw,57px); margin-bottom: 0; }
  .closing-main { grid-template-columns: 1fr auto; }
}
@media (max-width: 359px) {
  .pill { font: 500 11.5px/1.3 Saans, Arial, sans-serif; letter-spacing: .025em; }
}
@media (max-height: 510px) and (orientation: landscape) {
  .hero { min-height: calc(100svh - 2 * var(--frame)); padding-block: 86px 22px; }
  .hero > video { height: 100%; }
  .hero .shade { background: linear-gradient(90deg,#151411cd, #14131025 88%); }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(30px,5.3vw,47px); }
  .hero-action-row { margin-top: 13px; }
  .hero-bottom { margin-top: 12px; }
  .hero-sub { font-size: 16px; }
  .has-mobile-nav .menu-open nav { max-height: calc(100dvh - 66px); overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}