/* =========================================================
   Páginas de projeto (lunavi.html, xms-investimentos.html,
   martins-zanchet.html, one-coffee.html)
   Mesma moldura, tipografia e rodapé da Home (css/style.css); aqui
   ficam as peças das páginas de projeto. Todas seguem o mesmo molde
   (estrutura de haikai.design/portfolio/…) — js/project.js liga cada
   módulo só se ele existir na página.

   Fixos em todo projeto:
   - abertura: imagem ou vídeo cresce de cartão até a janela inteira
     (sem o nome por cima: a marca já está na capa)
   - o projeto: título, texto e ficha técnica
   - grade de imagens (.pj-grid / .pj-fig) e capítulos (.pj-chapter)
   - próximo projeto + rodapé
   Opcionais (um ou outro, conforme o conceito do projeto):
   - frase com palavra que troca (.pj-pause), com ou sem desacelerar
   - faixa horizontal de aplicações (.pj-strip)
   - fotos em sonho, desfocadas até o meio da tela ([data-dream])
   - protótipo visual (.pj-proto) — Lunaví
   - rosa dos ventos que segue o cursor (.pj-compass) — XMS
   - maço de cópias (.pj-deck) e filme em laço (.pj-film) — ONE COFFEE
   - de → para (.pj-shift) e pivô (.pj-pivot) — Martins Zanchet
   ========================================================= */
.pj {
  --color-paper: #e6e6e2;
  --color-ink: #0c0c0c;
  --rule-light: rgba(255, 255, 255, 0.22);
  --rule-dark: rgba(12, 12, 12, 0.18);
  --gutter: 1.25vw;
  --pj-pad-x: calc(var(--frame-side) + var(--pad-x));
}

:where(.pj) figure {
  margin: 0;
}

:where(.pj) img {
  display: block;
  max-width: 100%;
}

/* Corpo de texto: o mesmo par da Home (lead grande + corpo a 60%) */
.pj-lead {
  max-width: 24ch;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Mesma ênfase da Home (--serif-* em style.css) */
.pj-lead em,
.pj-intro__title em,
.pj-chapter__title em,
.pj-shift__to em {
  font-family: var(--font-serif);
  font-size: var(--serif-scale);
  font-style: italic;
  letter-spacing: -0.03em;
  -webkit-text-stroke: var(--serif-stroke) currentColor;
}

.pj-lead em,
.pj-shift__to em { letter-spacing: -0.02em; }   /* frases (-0.015em) */

.pj-body {
  max-width: 40ch;
  margin-top: 1.4em;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  opacity: 0.6;
}

/* --- Moldura: a figura em vista, no centro da faixa de baixo --- */
.frame__corner--bc {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

.frame__fig-num {
  font-variant-numeric: tabular-nums;
}

.frame__fig-num::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.7em;
  border-radius: 50%;
  background-color: var(--color-accent, #fff);
  vertical-align: 0.12em;
}

.frame__fig-name {
  opacity: 0.5;
  transition: opacity 0.35s ease;
}

.frame__fig.is-swapping .frame__fig-name {
  opacity: 0;
}

@media (max-width: 1023px) {
  .frame__fig { display: none; }
}

/* =========================================================
   01 — Abertura
   ========================================================= */
.pj-hero-track {
  position: relative;
  height: 260vh; /* 100vh de tela + 160vh para a imagem abrir */
}

.pj-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-stage);
  color: #fff;
  isolation: isolate;
}

/* Sem script: a imagem já ocupa a janela. js/project.js anima a caixa
   (left/top/width/height) do cartão até a janela. */
.pj-hero__media {
  position: absolute;
  top: var(--frame-band);
  left: var(--frame-side);
  right: var(--frame-side);
  bottom: var(--frame-band);
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
  will-change: left, top, width, height;
}

.pj-hero__media img,
.pj-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rótulos em branco, por cima da imagem. Sem nome gigante: a marca
   já está na imagem de capa (o h1 fica só para leitores de tela) */
.pj-hero__content {
  position: absolute;
  inset: calc(var(--frame-band) + 1.6vw) var(--pj-pad-x);
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.pj-hero__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
}

/* A dica fica na base; o cartão ocupa o espaço entre a linha de
   cima e ela */
.pj-hero__hint {
  align-self: center;
  margin-top: auto;
  margin-bottom: 1.5rem;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .pj-hero-track { height: auto; }
  .pj-hero { position: relative; }
  .pj-hero__hint { display: none; }
}

/* Celular: a capa inteira, na proporção dela, abaixo da linha de
   rótulos — o nome da marca está na imagem e não pode ser cortado */
@media (max-width: 767px) {
  .pj-hero {
    height: auto;
    padding: calc(var(--frame-band) + 20px + 1.6em) var(--pj-pad-x) 32px;
  }

  .pj-hero__media {
    position: relative;
    inset: auto;
    border-radius: 4px;
  }

  .pj-hero__media img,
  .pj-hero__media video {
    height: auto;
  }

  .pj-hero__content {
    inset: calc(var(--frame-band) + 12px) var(--pj-pad-x) auto;
  }
}

/* =========================================================
   02 — O projeto + ficha técnica
   ========================================================= */
.pj-intro,
.pj-atmos,
.pj-paper {
  position: relative;
  padding: calc(var(--frame-band) + 9vh) var(--pj-pad-x) calc(var(--frame-band) + 6vh);
  background-color: var(--color-paper);
  color: var(--color-ink);
  overflow: hidden;
  overflow: clip;
}

.pj-intro__grid,
.pj-chapter__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

.pj-intro__label,
.pj-chapter__label {
  grid-column: 1 / -1;
  grid-row: 1;
}

.pj-intro__title,
.pj-chapter__title {
  grid-column: 1 / 8;
  grid-row: 2;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.57vw, 4.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pj-intro__text {
  grid-column: 1 / 7;
  grid-row: 3;
  margin-top: 14vh;
}

/* Ficha técnica: bloco padrão de todos os projetos — rótulo em mono,
   valor em sans, um fio entre as linhas. Na coluna da direita, na
   mesma altura do texto. */
.pj-facts {
  grid-column: 9 / -1;
  grid-row: 3;
  margin-top: 14vh;
}

.pj-facts__label {
  padding-bottom: 0.9rem;
}

.pj-facts__list {
  margin: 0;
  border-bottom: 1px solid var(--rule-dark);
}

.pj-facts__row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) 2fr;
  gap: var(--gutter);
  padding-block: 0.75rem;
  border-top: 1px solid var(--rule-dark);
}

/* Seta de link externo (parcerias): sempre como caractere de texto, nunca
   emoji (o iOS desenha ↗ como emoji sem o seletor U+FE0E do template) */
.pj-arrow {
  font-family: var(--font-sans);
  font-variant-emoji: text;
}

.pj-facts__row dt {
  padding-top: 0.25em;
}

.pj-facts__row dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.pj-facts__row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.pj-facts__row a:hover {
  color: var(--color-accent, inherit);
}

/* =========================================================
   Grade de imagens (editorial, assimétrica)
   ========================================================= */
.pj-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 12vh;
  align-items: start;
  margin-top: 16vh;
}

.pj-fig figcaption {
  margin-top: 0.8em;
}

.pj-fig__media {
  overflow: hidden;
  overflow: clip;
}

.pj-fig__media img,
.pj-fig__media video {
  display: block;
  width: 100%;
  height: auto;
}

.pj-fig--full { grid-column: 1 / -1; }
.pj-fig--l { grid-column: 1 / 6; }
.pj-fig--r { grid-column: 8 / -1; }
.pj-fig--low { margin-top: 22vh; }
.pj-fig--seal { grid-column: 5 / 9; }
.pj-fig--wide { grid-column: 1 / 9; }
.pj-fig--side { grid-column: 10 / -1; align-self: end; }
.pj-fig--quarter { grid-column: span 3; }
.pj-fig--step { margin-top: 14vh; }

/* Grade que abre a seção (sem texto antes) */
.pj-grid--top { margin-top: 0; }

/* Entrada: a imagem sobe de dentro da moldura */
[data-reveal] .pj-fig__media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease-reveal);
}

[data-reveal] .pj-fig__media img {
  transform: scale(1.18);
  transition: transform 1.8s var(--ease-reveal);
}

[data-reveal].is-in .pj-fig__media {
  clip-path: inset(0 0 0 0);
}

[data-reveal].is-in .pj-fig__media img {
  transform: none;
}

/* Sonho: desfocada e estourada até chegar no meio da tela (--dream 1 → 0) */
[data-dream] .pj-fig__media img {
  filter:
    blur(calc(var(--dream, 0) * 22px))
    brightness(calc(1 + var(--dream, 0) * 0.45))
    saturate(calc(1 - var(--dream, 0) * 0.5));
  transform: scale(calc(1.04 + var(--dream, 0) * 0.08));
}

/* =========================================================
   Pausa: frase com palavras que trocam ("Luxo é ___")
   A altura do trecho fixo vem de js/project.js (pelo número de
   palavras); os 340vh só valem até o script medir.
   ========================================================= */
.pj-pause {
  position: relative;
  height: 340vh;
  background-color: var(--color-stage);
  color: #fff;
}

.pj-pause__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: calc(var(--frame-band) + 3vh) var(--pj-pad-x) calc(var(--frame-band) + 3vh);
}

.pj-pause__top {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
}

.pj-pause__speed {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s ease;
}

.pj-pause__speed i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.7em;
  border-radius: 50%;
  background-color: var(--color-accent, #fff);
  vertical-align: 0.12em;
}

.pj-pause__speed.is-slow i {
  animation: accent-tick 1.6s steps(1) infinite;
}

/* A frase, em uma ou mais linhas (.pj-pause__row); cada linha pode
   ter palavras que trocam (.pj-slot), todas no mesmo passo */
.pj-pause__line {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--pause-size, clamp(3rem, 9.2vw, 12rem));
  line-height: 1;
  letter-spacing: -0.04em;
}

.pj-pause__row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.22em;
  white-space: nowrap;
}

/* A palavra corre na vertical dentro de uma janela de uma linha;
   a largura acompanha a palavra da vez (js/project.js) */
.pj-slot {
  --h: 1.12em;
  position: relative;
  display: inline-block;
  height: var(--h);
  overflow: hidden;
  overflow: clip;
  vertical-align: bottom;
  font-family: var(--font-serif);
  font-size: var(--serif-scale);
  font-style: italic;
  letter-spacing: -0.03em;
  -webkit-text-stroke: var(--serif-stroke) currentColor;
  transition: width 0.9s var(--ease-reveal);
}

.pj-slot__track {
  display: flex;
  flex-direction: column;
  /* Cada palavra ocupa --h e fica a --gap da seguinte: a folga impede que
     as hastes descendentes da itálica (o "f" de "coffee") da palavra de
     cima apareçam no topo da janela */
  --gap: 0.5em;
  row-gap: var(--gap);
  transform: translate3d(0, calc(var(--slot, 0) * (var(--h) + var(--gap)) * -1), 0);
  transition: transform 0.9s var(--ease-reveal);
}

.pj-slot__word {
  position: relative;
  display: block;
  width: max-content;
  height: var(--h);
  line-height: var(--h);
  padding-right: 0.06em;
}

/* As palavras que a marca recusa: riscadas */
.pj-slot__word.is-no {
  opacity: 0.4;
}

.pj-slot__word.is-no::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 58%;
  height: 0.045em;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-reveal) 0.35s;
}

.pj-slot__word.is-no.is-current::after,
.pj-slot__word.is-no.is-past::after {
  transform: scaleX(1);
}

.pj-pause__ticks {
  display: flex;
  justify-content: center;
  gap: 2.4em;
  margin: 0 0 6vh;
  padding: 0;
  list-style: none;
  opacity: 1;
}

.pj-pause__ticks li {
  position: relative;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease-reveal-soft);
}

.pj-pause__ticks li.is-no {
  text-decoration: line-through;
}

.pj-pause__ticks li.is-current {
  opacity: 1;
}

.pj-pause__ticks li.is-current::before {
  content: "";
  position: absolute;
  top: -1.1em;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background-color: var(--color-accent, #fff);
}

.pj-pause__quote {
  max-width: 30ch;
}

.pj-pause__quote,
.pj-pause__quote em {
  color: rgba(255, 255, 255, 0.6);
}

/* Sem script / telas pequenas: a frase inteira, sem trecho fixo */
.pj-pause:not(.is-live) {
  height: auto;
}

.pj-pause:not(.is-live) .pj-pause__stage {
  position: relative;
  height: auto;
  row-gap: 8vh;
}

.pj-pause:not(.is-live) .pj-pause__line {
  align-items: flex-start;
  font-size: var(--pause-size-small, clamp(2.4rem, 9.2vw, 12rem));
}

.pj-pause:not(.is-live) .pj-pause__row {
  flex-wrap: wrap;
  justify-content: flex-start;
  white-space: normal;
}

.pj-pause:not(.is-live) .pj-pause__ticks,
.pj-pause:not(.is-live) .pj-pause__speed {
  display: none;
}

/* =========================================================
   Capítulos (título + texto)
   ========================================================= */
/* Bloco escuro só de imagens (entre capítulos escuros) */
.pj-dark {
  position: relative;
  padding: 0 var(--pj-pad-x);
  background-color: var(--color-stage);
  color: #fff;
}

.pj-dark .pj-grid {
  margin-top: 0;
  padding-top: 8vh;
}

.pj-chapter--dark {
  position: relative;
  padding: 6vh var(--pj-pad-x) 12vh;
  background-color: var(--color-stage);
  color: #fff;
}

.pj-chapter__text {
  grid-column: 8 / -1;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  max-width: 40ch;
}

.pj-chapter--dark .pj-chapter__title {
  grid-row: 1 / 3;
}

/* =========================================================
   04 — Aplicações: faixa horizontal
   ========================================================= */
.pj-strip {
  position: relative;
  background-color: var(--color-stage);
  color: #fff;
}

.pj-strip__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5vh;
  overflow: hidden;
  padding: calc(var(--frame-band) + 3vh) 0 calc(var(--frame-band) + 3vh);
}

.pj-strip__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-inline: var(--pj-pad-x);
  font-variant-numeric: tabular-nums;
}

.pj-strip__rail {
  display: flex;
  gap: 2.2vw;
  width: max-content;
  padding-inline: var(--pj-pad-x);
  will-change: transform;
}

/* A rota: um fio com o ponto na posição da faixa (--p, js/project.js) */
.pj-strip__route {
  position: relative;
  height: 1px;
  margin-inline: var(--pj-pad-x);
  background-color: var(--rule-light);
}

.pj-strip__route::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background-color: #fff;
}

.pj-strip__route::after {
  content: "";
  position: absolute;
  top: -3px;
  left: calc(var(--p, 0) * 100%);
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background-color: var(--color-accent, #fff);
}

.pj-strip:not(.is-live) .pj-strip__route {
  display: none;
}

.pj-card {
  flex: none;
  transform: skewX(var(--skew, 0deg));
  transform-origin: 50% 100%;
}

.pj-card__media {
  height: min(62vh, 44vw);
  overflow: hidden;
  overflow: clip;
}

.pj-card__media img,
.pj-card__media video {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  transform: scale(1.06) translate3d(var(--shift, 0%), 0, 0);
}

.pj-card figcaption {
  margin-top: 0.8em;
}

/* Sem script / telas pequenas: rolagem lateral nativa */
.pj-strip:not(.is-live) .pj-strip__stage {
  position: relative;
  height: auto;
}

.pj-strip:not(.is-live) .pj-strip__rail {
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pj-strip:not(.is-live) .pj-card {
  scroll-snap-align: center;
}

/* =========================================================
   05 — Atmosfera + protótipo visual
   ========================================================= */
.pj-atmos .pj-chapter__text {
  grid-row: 2;
}

.pj-proto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  margin-top: 18vh;
  padding-block: 8vh;
  border-block: 1px solid var(--rule-dark);
}

.pj-proto__text {
  grid-column: 1 / 6;
}

.pj-proto__brief {
  margin-top: 3rem;
}

.pj-proto__brief-head {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule-dark);
  opacity: 1;
}

.pj-proto__brief-head [data-pj-proto-status] {
  opacity: 0.55;
}

.pj-proto__brief-head.is-busy [data-pj-proto-status] {
  color: var(--color-accent, inherit);
  opacity: 1;
}

.pj-proto__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: brief;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.pj-proto__lines li {
  counter-increment: brief;
  display: flex;
  gap: 1rem;
  min-height: 1.12em;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule-dark);
}

.pj-proto__lines li::before {
  content: "( " counter(brief, decimal-leading-zero) " )";
  flex: none;
  width: 4.5rem;
  padding-top: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* Cursor de digitação na linha da vez */
.pj-proto__lines .is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.06em;
  background-color: var(--color-accent, currentColor);
  vertical-align: -0.1em;
  animation: accent-tick 0.9s steps(1) infinite;
}

.pj-proto__fig {
  grid-column: 7 / -1;
}

.pj-proto__media {
  position: relative;
  overflow: hidden;
  overflow: clip;
  aspect-ratio: 1080 / 1350;
  background-color: #d8d7d2;
}

.pj-proto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pj-proto__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.9s ease;
}

.pj-proto__canvas.is-done {
  opacity: 0;
}

.pj-proto__fig figcaption {
  margin-top: 0.8em;
}

/* =========================================================
   Próximo projeto
   ========================================================= */
.pj-next {
  position: relative;
  z-index: 2;
  display: block;
  padding: 7vh var(--pj-pad-x) 8vh;
  background-color: var(--color-stage);
  color: #fff;
  text-decoration: none;
  outline: none;
}

.pj-next__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--rule-light);
}

.pj-next__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em;
  padding-top: 3vh;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pj-next [data-roll] {
  display: flex;
  overflow: hidden;
  overflow: clip;
}

/* O espaço vira um span vazio no flex: precisa de largura própria */
.pj-next .outro__ch[data-ch=" "] {
  width: 0.24em;
}

.pj-next:hover .outro__ch,
.pj-next:focus-visible .outro__ch {
  transform: translate3d(0, -100%, 0);
}

.pj-next:hover .pj-next__arrow,
.pj-next:focus-visible .pj-next__arrow {
  transform: translate3d(0.12em, 0, 0);
}

/* =========================================================
   Telas pequenas
   ========================================================= */
@media (max-width: 767px) {
  .pj-intro,
  .pj-atmos,
  .pj-paper { padding-top: calc(var(--frame-band) + 56px); }

  .pj-intro__title,
  .pj-chapter__title,
  .pj-chapter--dark .pj-chapter__title,
  .pj-intro__text,
  .pj-chapter__text,
  .pj-facts { grid-column: 1 / -1; grid-row: auto; }

  .pj-intro__text { margin-top: 40px; }
  .pj-chapter__text { justify-self: start; margin-top: 32px; }

  .pj-facts { margin-top: 48px; }

  .pj-grid { row-gap: 40px; margin-top: 72px; }
  .pj-fig--l,
  .pj-fig--r,
  .pj-fig--seal,
  .pj-fig--wide,
  .pj-fig--side { grid-column: 1 / -1; }
  .pj-fig--low { margin-top: 0; }
  .pj-fig--quarter { grid-column: span 6; }
  .pj-fig--step { margin-top: 48px; }

  .pj-hero__row span:nth-child(2) { display: none; }

  .pj-pause__stage { padding-top: calc(var(--frame-band) + 40px); }

  /* Frase que troca, fixa também no celular: no corpo menor e quebrando
     em linhas (numa linha só ela não cabe na largura do telefone) */
  .pj-pause.is-live .pj-pause__line {
    font-size: var(--pause-size-small, clamp(2.4rem, 9.2vw, 12rem));
  }

  /* A régua de palavras (ticks) não cabe numa linha no celular: quebra,
     e o palco não pode alargar além da tela por causa dela */
  .pj-pause__stage { grid-template-columns: minmax(0, 1fr); }
  .pj-pause__ticks { flex-wrap: wrap; justify-content: center; gap: 10px 1.4em; }

  .pj-pause.is-live .pj-pause__line { align-items: stretch; }

  .pj-pause.is-live .pj-pause__row {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    row-gap: 0.04em;
  }

  .pj-card__media { height: 52vh; }

  .pj-proto { margin-top: 72px; row-gap: 40px; }
  .pj-proto__text,
  .pj-proto__fig { grid-column: 1 / -1; }

  .pj-next__name { font-size: 7.4vw; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .pj-fig__media { clip-path: none; transition: none; }
  [data-reveal] .pj-fig__media img { transform: none; transition: none; }
  [data-dream] .pj-fig__media img { filter: none; transform: none; }

  .pj-proto__canvas { display: none; }
}

/* =========================================================
   Módulo opcional — Rosa dos ventos (XMS)
   O asset da marca aponta para o cursor, com a folga de uma bússola
   de verdade (mola com pouco amortecimento); fora da seção, volta ao
   norte. Ver js/project.js.
   ========================================================= */
.pj-compass {
  position: relative;
  padding: calc(var(--frame-band) + 9vh) var(--pj-pad-x) calc(var(--frame-band) + 9vh);
  background-color: var(--color-stage);
  color: #fff;
}

.pj-compass__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}

.pj-compass__text {
  grid-column: 1 / 6;
}

.pj-compass__text .pj-chapter__title {
  margin-bottom: 8vh;
}

.pj-compass__fig {
  grid-column: 7 / -1;
  justify-self: center;
  width: min(100%, 72vh);
}

.pj-compass__dial {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: #fff;
}

/* O traço do asset, fino e na cor do texto, em qualquer tamanho */
.pj-compass__dial .rose {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  vector-effect: non-scaling-stroke;
}

.pj-compass__readout {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-light);
  font-variant-numeric: tabular-nums;
}

.pj-compass__readout strong {
  font-weight: 400;
  opacity: 1;
}

@media (max-width: 767px) {
  .pj-compass { padding-top: calc(var(--frame-band) + 56px); }
  .pj-compass__text,
  .pj-compass__fig { grid-column: 1 / -1; }
  .pj-compass__fig { margin-top: 48px; }
}

/* =========================================================
   Módulo opcional — De → para (Martins Zanchet)
   O que a marca era (riscado) e o que ela passa a ser; cada linha
   entra quando chega na tela ([data-reveal])
   ========================================================= */
.pj-shift {
  margin-top: 16vh;
}

.pj-shift__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-bottom: 0.9rem;
}

.pj-shift__head span:nth-child(1) { grid-column: 1 / 3; }
.pj-shift__head span:nth-child(2) { grid-column: 3 / 7; }
.pj-shift__head span:nth-child(3) { grid-column: 8 / -1; }

.pj-shift__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule-dark);
}

.pj-shift__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule-dark);
}

.pj-shift__key { grid-column: 1 / 3; }

.pj-shift__from,
.pj-shift__to {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.pj-shift__from {
  grid-column: 3 / 7;
  position: relative;
  justify-self: start;
  opacity: 0.4;
}

.pj-shift__from::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 55%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease-reveal) calc(0.2s + var(--d, 0) * 0.12s);
}

.pj-shift__arrow {
  grid-column: 7;
  width: 1.2rem;
  height: 1.2rem;
  align-self: center;
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
  opacity: 0;
  transform: translate3d(-0.6rem, 0, 0);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-reveal);
  transition-delay: calc(0.6s + var(--d, 0) * 0.12s);
}

.pj-shift__to {
  grid-column: 8 / -1;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  transition: opacity 0.8s ease, transform 1s var(--ease-reveal);
  transition-delay: calc(0.75s + var(--d, 0) * 0.12s);
}

.pj-shift.is-in .pj-shift__from::after { transform: scaleX(1); }
.pj-shift.is-in .pj-shift__arrow { opacity: 1; transform: none; }
.pj-shift.is-in .pj-shift__to { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .pj-shift { margin-top: 72px; }
  .pj-shift__head { display: none; }
  .pj-shift__key,
  .pj-shift__from,
  .pj-shift__to { grid-column: 1 / -1; }
  .pj-shift__from { margin-top: 8px; }
  .pj-shift__arrow { display: none; }
  .pj-shift__to { margin-top: 4px; }
}

/* =========================================================
   Módulo opcional — Pivô (Martins Zanchet)
   Trecho fixo: o símbolo aparece sobre o sketch que o originou,
   num círculo que abre do centro — como a área irrigada por um
   pivô central. Ver js/project.js.
   ========================================================= */
.pj-pivot {
  position: relative;
  height: 260vh;
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.pj-pivot__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding: calc(var(--frame-band) + 3vh) var(--pj-pad-x);
}

.pj-pivot__text {
  grid-column: 1 / 5;
}

.pj-pivot__text .pj-chapter__title {
  margin-bottom: 6vh;
}

.pj-pivot__fig {
  grid-column: 6 / -1;
  justify-self: center;
  width: min(100%, calc(100vh - 2 * var(--frame-band) - 14vh));
}

.pj-pivot__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  overflow: clip;
}

.pj-pivot__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --r: raio do círculo, em % do lado (0 → 72: passa dos cantos) */
.pj-pivot__top {
  clip-path: circle(var(--r, 0%) at 50% 50%);
}

.pj-pivot__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r, 0%) * 2);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: var(--ring, 0);
}

.pj-pivot__readout {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  margin-top: 0.8em;
  font-variant-numeric: tabular-nums;
}

.pj-pivot__readout span {
  transition: opacity 0.4s ease;
}

.pj-pivot:not(.is-live) {
  height: auto;
}

.pj-pivot:not(.is-live) .pj-pivot__stage {
  position: relative;
  height: auto;
  row-gap: 48px;
  padding-block: calc(var(--frame-band) + 9vh) 9vh;
}

.pj-pivot:not(.is-live) .pj-pivot__top {
  --r: 75%;
}

@media (max-width: 767px) {
  .pj-pivot__text,
  .pj-pivot__fig { grid-column: 1 / -1; }

  /* Sketch → símbolo também no celular: o texto rola normalmente e só a
     imagem fica fixa (sticky) enquanto o símbolo abre; a sobra embaixo
     do palco dá a rolagem dessa abertura */
  .pj-pivot.is-live { height: auto; }

  .pj-pivot.is-live .pj-pivot__stage {
    position: relative;
    height: auto;
    display: block;
    padding: calc(var(--frame-band) + 9vh) var(--pj-pad-x) 9vh;
  }

  /* A sobra de rolagem precisa ser conteúdo (o sticky não entra no padding) */
  .pj-pivot.is-live .pj-pivot__stage::after {
    content: "";
    display: block;
    height: 110svh;
  }

  .pj-pivot.is-live .pj-pivot__fig {
    position: sticky;
    top: calc(var(--frame-band) + 6svh);
    width: min(100%, calc(100svh - 2 * var(--frame-band) - 20svh));
    margin: 48px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-shift__from::after,
  .pj-shift__arrow,
  .pj-shift__to { transition: none; }
}

/* =========================================================
   Módulo opcional — Maço de cópias (ONE COFFEE)
   As embalagens empilhadas, uma de cada vez: a de cima sai para o
   lado e volta para o fundo do maço. Clique, toque ou setas.
   Ver js/project.js.
   ========================================================= */
.pj-deck-wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}

.pj-deck-wrap__text {
  grid-column: 1 / 6;
}

.pj-deck-wrap__text .pj-chapter__title {
  margin-bottom: 6vh;
}

.pj-deck {
  grid-column: 7 / -1;
  justify-self: center;
  width: min(100%, calc((100vh - 2 * var(--frame-band) - 16vh) * 0.8));
}

.pj-deck__stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 1350;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
}

.pj-deck__stack:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 10px;
}

/* --k: posição no maço (0 = em cima); --r: inclinação própria */
.pj-deck__card {
  position: absolute;
  inset: 0;
  z-index: calc(10 - var(--k, 0));
  transform:
    translate3d(calc(var(--k, 0) * 1.4%), calc(var(--k, 0) * -1.6%), 0)
    rotate(calc(var(--r, 0deg) * min(var(--k, 0), 1)));
  transition: transform 0.9s var(--ease-reveal);
  box-shadow: 0 30px 60px -30px rgba(12, 12, 12, 0.45);
}

.pj-deck__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A que sai: voa para o lado e só então vai para o fundo */
.pj-deck__card.is-leaving {
  z-index: 20;
  transform: translate3d(70%, 6%, 0) rotate(9deg);
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.75, 0.2);
}

.pj-deck__bar {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  margin-top: 1.4rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .pj-deck-wrap__text,
  .pj-deck { grid-column: 1 / -1; }
  .pj-deck { margin-top: 48px; width: 86%; }
  .pj-deck__bar span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-deck__card,
  .pj-deck__card.is-leaving { transition: none; }
}

/* =========================================================
   Módulo opcional — Filme (ONE COFFEE)
   Cinemascope (2,35:1) no escuro, tocando sozinho em laço, sem som
   e sem player: o vídeo não recebe clique nem toque.
   ========================================================= */
.pj-film {
  position: relative;
  padding: calc(var(--frame-band) + 6vh) var(--pj-pad-x) 12vh;
  background-color: var(--color-stage);
  color: #fff;
}

.pj-film__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  padding-bottom: 1.2rem;
}

.pj-film__media {
  position: relative;
  aspect-ratio: 1280 / 544;
  overflow: hidden;
  overflow: clip;
  background-color: #000;
}

.pj-film__media video {
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pj-film__fig figcaption {
  margin-top: 0.8em;
}

/* =========================================================
   Ajustes da versão CMS
   ========================================================= */
/* Pausa com frase longa em duas linhas (antes, style inline na XMS) */
.pj-pause--long {
  --pause-size: clamp(2.6rem, 6.6vw, 9.5rem);
  --pause-size-small: clamp(2.2rem, 9vw, 4rem);
}

/* Bloco "Depoimento" (novo): citação no corpo do título, assinatura mono */
.pj-quote__text {
  margin: 0.9rem 0 0;
  grid-column: 1 / 9;
}

.pj-quote__by {
  margin-top: 1.6rem;
}

/* 404 e páginas genéricas (Pages) no mesmo sistema visual */
.cms-not-found,
.cms-page {
  min-height: 100vh;
}

.cms-page__body {
  grid-column: 1 / 8;
  grid-row: 3;
  margin-top: 8vh;
  max-width: 62ch;
  opacity: 1;               /* o cinza vai no texto, para os subtítulos ficarem em tinta cheia */
  color: rgba(12, 12, 12, 0.62);
}

.cms-page__body > * + * {
  margin-top: 1em;
}

/* Subtítulos na escala das frases de abertura, em tinta cheia */
.cms-page__body h2,
.cms-page__body h3 {
  margin-top: 2.4em;
  color: var(--color-ink);
  font-size: clamp(1.125rem, 1.55vw, 1.625rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.cms-page__body h2 + p,
.cms-page__body h3 + p {
  margin-top: 0.7em;
}

@media (max-width: 767px) {
  .cms-page__body { grid-column: 1 / -1; margin-top: 40px; }
}

.cms-page__body a {
  color: inherit;
}