/* ============================================================
   Atelier Luquet — layout (v3)
   Página única. A abertura é um carrossel em tela cheia; cada
   seção abre por cima, em painel de tela cheia, com o conteúdo
   em coluna alinhada à esquerda. O menu vive à direita.
   Referência de UI: mnma.co (espelhada — lá o menu é à esquerda).
   ============================================================ */

/* ============================================================
   1 · ABERTURA — carrossel em tela cheia
   ============================================================ */

.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-hero);
  overflow: hidden;
}

.hero { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--d-fade) var(--e-soft);
}
.hero__slide.is-on { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* deriva lenta: a foto respira enquanto está no ar */
  transform: scale(1.045);
  transition: transform 9200ms linear;
}
.hero__slide.is-on img { transform: scale(1); }

/* véu: garante contraste do texto branco sem virar "seção escura" */
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* só o pé: paradas em px (não em %) para que o contraste do texto branco
     não dependa da altura da tela. O alto é resolvido por .top::before, que
     acompanha a altura real da faixa. Medido em AA sobre o trecho mais claro
     de uma foto (5,4:1 no desktop, 6,8:1 no celular). */
  background: var(--veil-foot);
}
/* ao abrir o menu, a foto recua — não com um véu chapado, e sim com uma
   sombra que vem da direita, onde o menu está. Três quartos da foto seguem
   limpos e o texto do menu ganha 4,7:1 mesmo sobre um trecho claro. */
.hero__dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--veil-menu), var(--veil-menu-base);
  opacity: 0;
  transition: opacity var(--d-3) var(--e-soft);
}
html.is-menu .hero__dim { opacity: 1; }

/* --- rodapé da abertura: dados de contato sobre a foto -------- */
.hero__foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(20px, 3.4vh, 40px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--on-photo);
}

.hero__contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wide);
  color: var(--on-photo-soft);
}
.hero__contact a { transition: color var(--d-2) var(--e-out); }
.hero__contact a:hover,
.hero__contact a:focus-visible { color: var(--on-photo); }
.hero__contact .hero__place {
  color: var(--on-photo);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.hero__count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wider);
  color: var(--on-photo-soft);
  white-space: nowrap;
}
.hero__ticks { display: flex; gap: 6px; }
.hero__tick {
  display: block;
  width: 14px; height: 1px;
  background: var(--on-photo-rule);
  transition: background var(--d-2) var(--e-out), width var(--d-3) var(--e-out);
}
.hero__tick.is-on { background: var(--on-photo); width: 22px; }

/* ============================================================
   2 · FAIXA SUPERIOR — logo à esquerda, controles à direita
   ============================================================ */

.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-top);
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--gutter);
  color: var(--on-photo);
  transition: color var(--d-3) var(--e-soft);
}
html.is-panel .top { color: var(--fg); }

/* sombra da faixa: acompanha a altura real do cabeçalho e desce mais 60px
   para não virar uma tarja. Sai de cena assim que um painel abre. */
.top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: -62px;
  pointer-events: none;
  z-index: -1;
  background: var(--veil-top);
  transition: opacity var(--d-3) var(--e-soft);
}
html.is-panel .top::before { opacity: 0; }

.top__brand {
  display: block;
  width: clamp(126px, 14vw, 184px);
  flex: none;
}
.top__brand .wordmark { display: block; }
.top__brand { transition: opacity var(--d-2) var(--e-out); }
.top__brand:hover { opacity: .62; }

.top__ctrl {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

/* alternância de idioma */
.lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wider);
}
.lang button {
  padding: 8px 2px;
  color: currentColor;
  opacity: .8;                      /* não desce mais: abaixo disso o rótulo
                                       perde o AA sobre foto clara */
  transition: opacity var(--d-2) var(--e-out);
}
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button:hover { opacity: .92; }
.lang span { opacity: .45; }
html.is-panel .lang button { opacity: .55; }
html.is-panel .lang button[aria-pressed="true"] { opacity: 1; }

/* hambúrguer / voltar ocupam o mesmo lugar */
.top__toggle {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  margin-right: -10px;
}
.burger, .back {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  transition: opacity var(--d-2) var(--e-out), transform var(--d-3) var(--e-out);
}
.burger i {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform var(--d-3) var(--e-out), width var(--d-3) var(--e-out);
}
.burger:hover i:first-child { width: 15px; }
.burger:hover i:last-child  { width: 22px; }

html.is-menu .burger i:first-child { transform: translateY(3.5px) rotate(14deg); width: 22px; }
html.is-menu .burger i:last-child  { transform: translateY(-3.5px) rotate(-14deg); }

/* seta de voltar: aponta para o lado do menu (direita) */
.back { opacity: 0; pointer-events: none; transform: translateX(-6px); }
.back svg { width: 26px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1; }
html.is-panel .back { opacity: 1; pointer-events: auto; transform: none; }
html.is-panel .burger { opacity: 0; pointer-events: none; }
.back:hover svg { transform: translateX(4px); transition: transform var(--d-3) var(--e-out); }

.back__word {
  /* abaixo da seta, e não ao lado dela: à esquerda ficava por cima do PT / EN */
  position: absolute;
  top: calc(100% - 4px);
  right: 10px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out);
}
.back:hover .back__word,
.back:focus-visible .back__word { opacity: 1; }

/* ============================================================
   3 · MENU — coluna à direita, sob o hambúrguer
   ============================================================ */

.menu {
  position: fixed;
  z-index: var(--z-menu);
  top: var(--top-h);
  right: var(--gutter);
  text-align: right;
  visibility: hidden;
  pointer-events: none;
}
html.is-menu .menu { visibility: visible; pointer-events: auto; }
html.is-panel .menu { visibility: hidden; pointer-events: none; }

.menu__list { display: flex; flex-direction: column; align-items: flex-end; }

.menu__item {
  display: inline-block;
  overflow: hidden;
  padding: clamp(3px, .5vh, 7px) 0;
}
.menu__item > span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: var(--tr-tight);
  color: var(--on-photo);
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform var(--d-3) var(--e-out),
    opacity var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}
html.is-menu .menu__item > span { transform: none; opacity: 1; }
.menu__item:hover > span,
.menu__item:focus-visible > span { color: var(--on-photo-soft); }

/* escalonamento da entrada */
html.is-menu .menu__item:nth-child(1) > span { transition-delay: 40ms; }
html.is-menu .menu__item:nth-child(2) > span { transition-delay: 95ms; }
html.is-menu .menu__item:nth-child(3) > span { transition-delay: 150ms; }
html.is-menu .menu__item:nth-child(4) > span { transition-delay: 205ms; }

/* ============================================================
   4 · PAINEL — o conteúdo de cada seção, em tela cheia
   ============================================================ */

.panels { position: fixed; inset: 0; z-index: var(--z-panel); pointer-events: none; }

.panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--d-3) var(--e-soft),
    visibility 0s linear var(--d-3);
}
.panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--d-3) var(--e-soft),
    visibility 0s linear 0s;
}

/* o conteúdo dissolve no papel antes de encostar no logo, em vez de
   passar por baixo dele */
.panel { isolation: isolate; }
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--top-h) + 28px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, var(--bg) 56%, var(--al-paper-00) 100%);
}

.panel__scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--al-ink-26) transparent;
}
.panel__scroll::-webkit-scrollbar { width: 7px; }
.panel__scroll::-webkit-scrollbar-thumb { background: var(--al-ink-26); }
.panel__scroll::-webkit-scrollbar-track { background: transparent; }

.panel__col {
  width: var(--col-w);
  margin-left: var(--gutter);
  padding-top: calc(var(--top-h) + clamp(20px, 5vh, 60px));
  padding-bottom: clamp(80px, 18vh, 200px);
  padding-right: var(--s-3);
}

/* ------------------------------------------------------------
   Reveal — herdado da v2. Cada bloco entra quando cruza a borda
   de baixo da área de leitura, não todos de uma vez na abertura.
   O JS escreve o atraso de cada um em `--d`.

   Tudo aqui depende de `.panel.has-reveal`, classe que o JS só
   põe quando já montou a varredura que vai revelar os blocos.
   Sem ela — JS desligado, erro, movimento reduzido — o conteúdo
   nasce visível. Nada de texto escondido esperando um evento.
   ------------------------------------------------------------ */
.panel.has-reveal .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-3) var(--e-out),
    transform var(--d-4) var(--e-out);
  transition-delay: var(--d, 0ms);
}
.panel.has-reveal .rv.is-in { opacity: 1; transform: none; }

/* título palavra a palavra */
.w { display: inline-block; }
.panel.has-reveal .w {
  transform: translateY(.42em);
  opacity: 0;
  transition:
    transform var(--d-4) var(--e-out),
    opacity var(--d-2) var(--e-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 36ms);
}
.panel.has-reveal .rv.is-in .w { transform: none; opacity: 1; }

/* figura revelada por máscara, de baixo para cima */
.panel.has-reveal .project__fig,
.panel.has-reveal .press__fig,
.panel.has-reveal .pj__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-4) var(--e-out);
  transition-delay: var(--d, 0ms);
}
.panel.has-reveal .rv.is-in .project__fig,
.panel.has-reveal .rv.is-in .press__fig,
.panel.has-reveal .rv.is-in .pj__frame { clip-path: inset(0 0 0 0); }

/* revelação progressiva: o texto ainda não lido fica claro
   (é a assinatura da referência enviada pelo cliente) */
html.js .panel [data-read] {
  color: var(--fg-ghost);
  transition: color var(--d-3) var(--e-soft);
}
html.js .panel [data-read].is-read { color: var(--rd-on, var(--fg)); }
.body[data-read] { --rd-on: var(--al-ink-88); }

/* filete de bloco */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
  transition: transform var(--d-4) var(--e-out);
  transition-delay: calc(var(--d, 0ms) + 140ms);
}
.panel.has-reveal .rule { transform: scaleX(0); }
.panel.has-reveal .rv.is-in .rule { transform: scaleX(1); }

/* --- blocos de texto ------------------------------------------ */
.panel__col > * + * { margin-top: var(--block); }
.panel__col > .placeholder { margin-top: var(--s-4); }

.blk > * + * { margin-top: var(--s-3); }
.blk > .kicker + * { margin-top: var(--s-4); }
.blk > .cta { margin-top: var(--s-5); }

/* cabeçalho da seção: rótulo e filete que se desenha */
.phead,
.blk__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.blk__head { margin-bottom: var(--s-4); }
.phead .rule,
.blk__head .rule { flex: 1 1 auto; width: auto; }

/* linha de frentes de trabalho */
.cats {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 2;
}
.cats span { white-space: nowrap; }
.cats i {
  font-style: normal;
  color: var(--al-ink-26);
  margin: 0 .45em;
}

/* abertura do painel O Atelier — nome da marca em caixa alta */
.panel__name {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg);
}

/* ============================================================
   5 · PROJETOS — lista simples: miniatura e legenda abaixo
   ============================================================ */

.projects { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 64px); }

.project__link { display: block; }

.project__fig {
  overflow: hidden;
  background: var(--al-ink-08);
}
.project__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.001);
  transition: transform var(--d-4) var(--e-out), filter var(--d-3) var(--e-out);
}
.project__link:hover .project__fig img,
.project__link:focus-visible .project__fig img { transform: scale(1.038); }

.project__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.project__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  transition: color var(--d-2) var(--e-out);
}
.project__link:hover .project__name { color: var(--accent); }
.project__go {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-3) var(--e-out);
  white-space: nowrap;
}
.project__link:hover .project__go,
.project__link:focus-visible .project__go { opacity: 1; transform: none; }

/* aviso de conteúdo provisório */
.placeholder {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 7px 11px;
  border: 1px dashed var(--al-ink-26);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* ============================================================
   6 · PROJETO ABERTO — carrossel e texto
   ============================================================ */

.pj__carousel { position: relative; }

.pj__frame {
  position: relative;
  overflow: hidden;
  background: var(--al-ink-08);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.pj__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--d-3) var(--e-soft);
}
.pj__slide.is-on { opacity: 1; }
.pj__slide img { width: 100%; height: 100%; object-fit: cover; }

.pj__expand {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  display: grid; place-content: center;
  color: var(--on-photo);
  opacity: .7;
  transition: opacity var(--d-2) var(--e-out);
}
.pj__expand svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.pj__frame:hover .pj__expand { opacity: 1; }

.pj__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.pj__arrow {
  width: 40px; height: 40px;
  display: grid; place-content: center;
  color: var(--fg-mute);
  transition: color var(--d-2) var(--e-out), transform var(--d-3) var(--e-out);
}
.pj__arrow svg { width: 22px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1; }
.pj__arrow:hover { color: var(--fg); }
.pj__arrow--prev:hover { transform: translateX(-3px); }
.pj__arrow--next:hover { transform: translateX(3px); }
.pj__arrow[disabled] { opacity: .3; pointer-events: none; }
.pj__count {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wider);
  color: var(--fg-mute);
  margin-left: auto;
}

/* ============================================================
   7 · IMPRENSA
   ============================================================ */

.press { display: flex; flex-direction: column; gap: clamp(36px, 6vh, 64px); }

.press__link {
  display: grid;
  grid-template-columns: clamp(92px, 26%, 146px) minmax(0, 1fr);
  gap: clamp(16px, 3.2vw, 30px);
  align-items: start;
}

.press__fig {
  width: 100%;
  overflow: hidden;
  background: var(--al-ink-08);
  border: 1px solid var(--rule-soft);
}
.press__fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--d-4) var(--e-out);
}
.press__link:hover .press__fig img { transform: scale(1.04); }

.press__top {
  /* veículo e data empilhados: com a miniatura ao lado a coluna ficou estreita
     demais para a mesma linha, e alinhado assim todo item fica igual */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.press__body { min-width: 0; }

.press__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin-top: var(--s-2);
  transition: color var(--d-2) var(--e-out);
}
.press__link:hover .press__title { color: var(--accent); }
.press__deck {
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: var(--lh-lede);
  color: var(--fg-mute);
  margin-top: var(--s-2);
  max-width: var(--measure);
}
.press__bot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.press__read i { font-style: normal; display: inline-block; transition: transform var(--d-3) var(--e-out); }
.press__link:hover .press__read i { transform: translate(3px, -3px); }

/* ============================================================
   8 · CONTATO
   ============================================================ */

.contact__list { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.contact__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  min-height: 44px;
}
.contact__row .label { flex: 0 0 clamp(66px, 22%, 96px); }
.contact__val {
  font-size: var(--fs-sm);
  color: var(--fg);
  word-break: break-word;
}

/* --- formulário ----------------------------------------------- */
.form { margin-top: var(--block); }
.form__intro { margin-bottom: var(--s-4); }

.field { position: relative; margin-bottom: var(--s-4); }
.field input,
.field textarea {
  width: 100%;
  padding: 16px 0 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--fg);
  border-radius: 0;
  transition: border-color var(--d-2) var(--e-out);
}
.field textarea { resize: vertical; min-height: 92px; line-height: var(--lh-body); }
.field label {
  position: absolute;
  left: 0; top: 16px;
  font-size: var(--fs-sm);
  color: var(--fg-mute);
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--fg); }
/* em campo de filete, o foco é o próprio filete — sem caixa em volta */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-17px) scale(.76);
  color: var(--fg-mute);
}
.field__err {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: block;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.field.is-bad input, .field.is-bad textarea { border-bottom-color: var(--accent); }
.field.is-bad .field__err { opacity: 1; transform: none; }

.form .cta { margin-top: var(--s-3); }

/* --- rodapé dentro do painel de contato ----------------------- */
.colophon {
  margin-top: var(--block);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  color: var(--fg-mute);
}
.colophon__mono { width: 15px; height: 15px; color: var(--al-ink-38); flex: none; }
.colophon p { margin: 0; }
.colophon .colophon__sep { color: var(--al-ink-26); }

/* ============================================================
   9 · LIGHTBOX
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: var(--veil-lightbox);
  display: grid;
  grid-template-rows: 1fr auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-2) var(--e-soft), visibility 0s linear var(--d-2);
}
.lightbox.is-open {
  visibility: visible; opacity: 1;
  transition: opacity var(--d-2) var(--e-soft), visibility 0s linear 0s;
}

.lightbox__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(44px, 7vh, 84px) clamp(16px, 5vw, 96px) var(--s-3);
}
.lightbox__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2) var(--e-soft);
}
.lightbox__img.is-on { opacity: 1; pointer-events: auto; }
.lightbox__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: none;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 clamp(16px, 5vw, 96px) clamp(20px, 4vh, 40px);
  color: var(--on-photo-soft);
}
.lightbox__bar .pj__arrow { color: var(--on-photo-soft); }
.lightbox__bar .pj__arrow:hover { color: var(--on-photo); }
.lightbox__cap {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  color: var(--on-photo-soft);
  max-width: 46ch;
}
.lightbox__count { margin-left: auto; font-size: var(--fs-3xs); letter-spacing: var(--tr-wider); }

.lightbox__close {
  position: absolute;
  top: clamp(10px, 2vh, 22px);
  right: clamp(12px, 3vw, 40px);
  width: 44px; height: 44px;
  display: grid; place-content: center;
  color: var(--on-photo-soft);
  transition: color var(--d-2) var(--e-out), transform var(--d-3) var(--e-out);
}
.lightbox__close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1; }
.lightbox__close:hover { color: var(--on-photo); transform: rotate(90deg); }

/* ============================================================
   10 · CARREGAMENTO — só na primeira visita da sessão
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  gap: var(--s-4);
  background: var(--bg);
  transition: opacity var(--d-4) var(--e-soft), visibility 0s linear var(--d-4);
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mono { width: 30px; height: 30px; color: var(--fg); justify-self: center; }
.loader__line { width: 108px; height: 1px; background: var(--al-ink-14); overflow: hidden; }
.loader__line i {
  display: block; height: 100%; width: 100%;
  background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: load 1500ms var(--e-soft) forwards;
}
@keyframes load { to { transform: scaleX(1); } }
html.no-loader .loader { display: none; }

/* ============================================================
   11 · CURSOR fino (só ponteiro fino, sem toque)
   ============================================================ */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--al-ink-26);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
html.has-cursor .cursor { opacity: 1; }
html.has-cursor.is-hover .cursor { transform: scale(1.75); border-color: var(--al-ink-38); }
html:not(.is-panel) .cursor { border-color: var(--al-white-30); }
html:not(.is-panel).is-hover .cursor { border-color: var(--al-white-64); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   12 · RESPONSIVO
   ============================================================ */

/* tablet e desktop estreito: coluna um pouco mais larga */
@media (max-width: 900px) {
  :root { --col-w: min(560px, calc(100vw - var(--gutter) * 2)); }
  .panel__col { padding-right: var(--gutter); }
}

/* celular */
@media (max-width: 640px) {
  :root {
    --col-w: calc(100vw - var(--gutter) * 2);
    --top-h: 58px;
  }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .hero__count { align-self: flex-start; }
  .menu { left: var(--gutter); }
  .menu__item > span { font-size: var(--fs-xl); }
  .press__link { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
  .project__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .project__go { display: none; }
  .lightbox__cap { display: none; }
}

/* telas muito altas: o menu ganha ar */
@media (min-height: 800px) and (min-width: 641px) {
  .menu { top: calc(var(--top-h) + clamp(4px, 2vh, 24px)); }
}

/* telas muito largas: a coluna não descola do canto */
@media (min-width: 1900px) {
  :root { --col-w: clamp(440px, 30vw, 620px); }
}

/* ============================================================
   13 · SEM JAVASCRIPT
   A arquitetura de painéis depende de JS. Sem ele, a página vira
   uma rolagem longa com todas as seções abertas, na ordem.
   ============================================================ */
.no-js body { overflow: auto; }
.no-js .loader,
.no-js .cursor,
.no-js .top__toggle,
.no-js .hero__count { display: none; }
.no-js .stage { position: relative; height: 100vh; }
.no-js .top { position: absolute; }
.no-js .menu { position: static; visibility: visible; pointer-events: auto; text-align: left; padding: var(--s-5) var(--gutter) 0; }
.no-js .menu__list { align-items: flex-start; }
.no-js .menu__item > span { transform: none; opacity: 1; color: var(--fg); }
.no-js .panels { position: static; pointer-events: auto; }
.no-js .panel { position: static; visibility: visible; opacity: 1; pointer-events: auto; }
.no-js .panel__scroll { height: auto; overflow: visible; }
.no-js .panel__col { padding-top: var(--block); }
.no-js .panel .rv { opacity: 1; transform: none; }
.no-js .rule { transform: none; }
.no-js .pj__slide { position: static; opacity: 1; margin-bottom: var(--s-2); }
.no-js .pj__frame { aspect-ratio: auto; cursor: default; }
.no-js .press__link { display: block; }
.no-js .press__fig { width: 40%; margin-bottom: var(--s-3); }
.no-js .pj__nav,
.no-js .pj__expand,
.no-js .lightbox { display: none; }
.no-js .hero__slide { position: static; opacity: 1; }
.no-js .hero__slide:not(:first-child) { display: none; }
.no-js .hero__slide img { height: 100vh; transform: none; }

/* --- movimento reduzido --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide img { transform: none; transition: none; }
  .panel .rv, .panel.has-reveal .rv { opacity: 1; transform: none; }
  .panel.has-reveal .w { opacity: 1; transform: none; }
  .panel.has-reveal .rule { transform: scaleX(1); }
  .panel.has-reveal .project__fig,
  .panel.has-reveal .press__fig,
  .panel.has-reveal .pj__frame { clip-path: none; }
  .loader { display: none; }
  .cursor { display: none; }
}