*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom square cursor only over mural canvas and viewer images */
#canvas-wrap, #canvas-wrap *,
.viewer-ref-figure, .viewer-ref-figure *,
.vr-gallery-item, .vr-gallery-item *,
#viewer-lightbox, #viewer-lightbox * {
  cursor: none !important;
}


/* ─── Custom cursor (mix-blend-mode: difference) ────────── */
/* White square + difference = black on light bg, white on dark bg */

.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--bg);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-100px, -100px); /* off-screen until first mousemove */
  will-change: transform; /* GPU-composited — no layout cost */
}

:root {
  --bg:  #ffffff;
  --ink: #000000;
  /* --rule removido: substituído por --ink (mesmo valor) */
  /* --muted removido: substituído por --o-muted em todo o código */
  --font:      'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* ─── Design tokens ─────────────────────────────── */

  /* Proporção áurea φ = 1.618 — 8 medidas (Fibonacci, base 8px)   */
  /* Uso: distâncias, margens, espaçamentos, gutters                */
  /* Escala φ — fórmula geral: --phi-n = 100vw ÷ φⁿ                 */
  /* φ-1 + φ-2 = 100vw · emerge de φ+1=φ² (prop. fundamental)      */
  /* φ-n + φ-(n+1) = φ-(n-1) · Fibonacci · VW = referência de layout */
  /* Uso: layout macro (φ-1–5) · componentes (φ-6–10) · micro (φ-11–15) */
  /* VW = escala com viewport · PX fixo reservado para bordas e detalhes invariáveis */
  --phi-1:  61.803vw;   /* 100vw ÷ φ¹  · layout macro   */
  --phi-2:  38.197vw;   /* 100vw ÷ φ²                   */
  --phi-3:  23.607vw;   /* 100vw ÷ φ³                   */
  --phi-4:  14.590vw;   /* 100vw ÷ φ⁴                   */
  --phi-5:   9.017vw;   /* 100vw ÷ φ⁵                   */
  --phi-6:   5.573vw;   /* 100vw ÷ φ⁶  · componentes    */
  --phi-7:   3.444vw;   /* 100vw ÷ φ⁷                   */
  --phi-8:   2.129vw;   /* 100vw ÷ φ⁸                   */
  --phi-9:   1.316vw;   /* 100vw ÷ φ⁹                   */
  --phi-10:  0.813vw;   /* 100vw ÷ φ¹⁰                  */
  --phi-11:  0.502vw;   /* 100vw ÷ φ¹¹ · micro          */
  --phi-12:  0.311vw;   /* 100vw ÷ φ¹²                  */
  --phi-13:  0.192vw;   /* 100vw ÷ φ¹³                  */
  --phi-14:  0.119vw;   /* 100vw ÷ φ¹⁴                  */
  --phi-15:  0.073vw;   /* 100vw ÷ φ¹⁵ · ≈ 1px @ 1440px */

  /* Font size scale                                                */
  /* Escala tipográfica φ — Scale 1 · ≤767px · ×0.8               */
  /* UI cluster (xs, sm, base, md) + Display (lg→3xl, md × φⁿ)   */
  --fs-3xs:  0.39rem;   /* 0.49 × 0.8 */
  --fs-2xs:  0.45rem;   /* 0.56 × 0.8 */
  --fs-xs:   0.52rem;   /* 0.65 × 0.8 */
  --fs-sm:   0.60rem;   /* 0.75 × 0.8 */
  --fs-base: 0.68rem;   /* 0.85 × 0.8 */
  --fs-md:   0.8rem;    /* âncora — 1rem × 0.8 */
  --fs-lg:   1.294rem;  /* md × φ¹ */
  --fs-xl:   2.094rem;  /* md × φ² */
  --fs-2xl:  3.389rem;  /* md × φ³ */
  --fs-3xl:  5.483rem;  /* md × φ⁴ */

  /* Font-weight scale */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Letter-spacing scale */
  --ls-title:  -0.025em; /* display title */
  --ls-none:   0;
  --ls-tight:  0.04em;
  --ls-normal: 0.08em;
  --ls-wide:   0.14em;
  --ls-wider:  0.22em;

  /* Line-height scale */
  --lh-auto:    normal;
  --lh-tight:   1.0;
  --lh-compact: 1.2;
  --lh-normal:  1.4;
  --lh-loose:   1.7;

  /* Opacity scale — black */
  --o-surface:   rgba(0,0,0,0.08);
  --o-faint:     rgba(0,0,0,0.2);
  --o-muted:     rgba(0,0,0,0.4);
  --o-secondary: rgba(0,0,0,0.55);
  --o-medium:    rgba(0,0,0,0.75);
  --o-primary:   rgba(0,0,0,0.9);

  /* --overlay-bio/lightbox/viewer removidos: substituídos por --bg */
  /* --nh-photo-bg removido: substituído por --bg                  */
  /* --nh-key-bg removido: substituído por --ink                   */

  /* Opacity scale — white */
  --o-surface-w:   rgba(255,255,255,0.08);
  --o-faint-w:     rgba(255,255,255,0.2);
  --o-muted-w:     rgba(255,255,255,0.4);
  --o-secondary-w: rgba(255,255,255,0.55);
  --o-medium-w:    rgba(255,255,255,0.75);
  --o-primary-w:   rgba(255,255,255,0.9);

  /* Transition timing */
  --t-fast:  0.15s;  /* hover de cor/border */
  --t-base:  0.2s;   /* hover de transform/opacity */
  --t-slow:  0.35s;  /* transição de painel */
  --t-open:  0.4s;   /* entrada de overlay */

  /* Easing */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Hover scale */
  --scale-hover: 1.07;

  /* Spacing scale */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-9:   36px;
  --sp-10:  48px;
  --sp-11:  56px;
  --sp-12:  64px;
  --sp-13:  72px;
  --sp-14:  80px;
  --sp-15: 104px;

  /* Article spacing */
  --sp-article: 4rem;
}

/* ── Escala tipográfica φ — Scale 2 · @768px · ×1 ─────────── */
/* Toda a escala × 1.0 · âncora md = 1rem                     */
@media (min-width: 768px) {
  :root {
    --fs-3xs:  0.49rem;   /* base */
    --fs-2xs:  0.56rem;   /* base */
    --fs-xs:   0.65rem;   /* base */
    --fs-sm:   0.75rem;   /* base */
    --fs-base: 0.85rem;   /* base */
    --fs-md:   1rem;      /* âncora */
    --fs-lg:   1.618rem;  /* md × φ¹ */
    --fs-xl:   2.618rem;  /* md × φ² */
    --fs-2xl:  4.236rem;  /* md × φ³ */
    --fs-3xl:  6.854rem;  /* md × φ⁴ */
  }
}

/* ── Escala tipográfica φ — Scale 3 · @1280px · ×1.2 ─────── */
/* Toda a escala × 1.2 · âncora md = 1.2rem                   */
@media (min-width: 1280px) {
  :root {
    --fs-3xs:  0.59rem;   /* 0.49 × 1.2 */
    --fs-2xs:  0.67rem;   /* 0.56 × 1.2 */
    --fs-xs:   0.78rem;   /* 0.65 × 1.2 */
    --fs-sm:   0.9rem;    /* 0.75 × 1.2 */
    --fs-base: 1.02rem;   /* 0.85 × 1.2 */
    --fs-md:   1.2rem;    /* âncora */
    --fs-lg:   1.942rem;  /* md × φ¹ */
    --fs-xl:   3.142rem;  /* md × φ² */
    --fs-2xl:  5.083rem;  /* md × φ³ */
    --fs-3xl:  8.225rem;  /* md × φ⁴ */
  }
}

/* ── Escala tipográfica φ — Scale 4 · @1600px · ×1.4 ─────── */
/* Toda a escala × 1.4 · âncora md = 1.4rem                   */
@media (min-width: 1600px) {
  :root {
    --fs-3xs:  0.69rem;   /* 0.49 × 1.4 */
    --fs-2xs:  0.78rem;   /* 0.56 × 1.4 */
    --fs-xs:   0.91rem;   /* 0.65 × 1.4 */
    --fs-sm:   1.05rem;   /* 0.75 × 1.4 */
    --fs-base: 1.19rem;   /* 0.85 × 1.4 */
    --fs-md:   1.4rem;    /* âncora */
    --fs-lg:   2.265rem;  /* md × φ¹ */
    --fs-xl:   3.665rem;  /* md × φ² */
    --fs-2xl:  5.93rem;   /* md × φ³ */
    --fs-3xl:  9.596rem;  /* md × φ⁴ */
  }
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ─── Grain texture overlay ───────────────────────────── */
/* Cobre toda a tela mas não bloqueia cliques nem seleção  */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 150; /* acima do painel/viewer, abaixo do lightbox (200) e overlays (900) */
  background-image: url('grain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.07;
  /* mix-blend-mode removido — soft-light forçava o browser a achatar todas as
     camadas GPU do canvas numa só a cada frame (60 fps), matando a performance.
     Opacity pura sem blend mode é tratada pelo compositor sem custo de CPU. */
  pointer-events: none;
  user-select: none;
}


/* ─── Bio overlay ────────────────────────────────────── */

/* ─── Bio overlay ───────────────────────────────────────────── */

.bio-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-open) ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.bio-overlay::-webkit-scrollbar { display: none; }

/* Fundo branco semi-transparente — fica fixo enquanto o conteúdo rola */
.bio-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 0.91;
  z-index: -1;
}

.bio-overlay > * { position: relative; z-index: 1; }

.bio-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('grain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.07;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

@media (orientation: portrait) {
}

.bio-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.bio-close {
  position: fixed;
  bottom: 27px;
  right: 155px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--o-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--o-secondary);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-base);
  z-index: 3;
  padding: 0;
  line-height: 0;
}

.bio-close:hover {
  border-color: var(--o-medium);
  color: var(--o-primary);
  transform: scale(var(--scale-hover));
}

/* ── Bio-close: acompanha o nh-photo do nav-hub em cada breakpoint ── */
@media (max-width: 767px) {
  .bio-close {
    bottom: 105px;
    right: 27px;
    width: 31px;
    height: 31px;
  }
}
@media (min-width: 1600px) {
  .bio-close {
    right: 165px;
    width: 57px;
    height: 57px;
  }
}

/* ── Bio video hero ────────────────────────────────── */
.bio-video-wrap {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

/* ── Bio layout ────────────────────────────────────── */

.bio-layout {
  display: flex;
  width: 100%;
  flex: 1;
  position: relative;
  z-index: 1;
}

.bio-sb-bottom {
  position: fixed;
  top: 72px;
  right: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  padding: 0;
  margin-top: 0;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-open) ease-out;
}

.bio-overlay.open .bio-sb-bottom {
  pointer-events: all;
  opacity: 1;
}

/* ── Bio hero ─────────────────────────────────────── */
.bio-hero {
  position: absolute;
  bottom: 48px;
  left: 72px;
  right: 72px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.bio-scroll-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-lg);
  color: var(--o-primary);
  padding: 0;
  line-height: var(--lh-tight);
  text-align: left;
  transition: color var(--t-fast);
  width: fit-content;
}
.bio-scroll-btn:hover { color: var(--o-primary); }


.bio-sb-headline {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--o-muted);
  line-height: var(--lh-loose);
  text-transform: uppercase;
  margin-top: -20px;
}

.bio-sb-location {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--o-muted);
  text-transform: uppercase;
  margin-top: -24px;
}

.bio-sb-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bio-sb-label {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--o-muted);
  margin-bottom: var(--sp-1);
}

.bio-sb-link {
  font-family: var(--font);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--o-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
.bio-sb-link:hover { color: var(--o-primary); }

/* Lang button — fixed, same position as mural */
.bio-lang-btn {
  position: fixed;
  bottom: 27px;
  right: 27px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--o-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-secondary);
  z-index: 3;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.bio-lang-btn:hover {
  border-color: var(--o-secondary);
  color: var(--o-primary);
  transform: scale(var(--scale-hover));
}

/* Main content */
.bio-main {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-12) var(--sp-13) var(--sp-14) var(--sp-13);
  display: flex;
  flex-direction: column;
  gap: var(--sp-15);
}

.bio-hero-img {
  width: 202px;
  height: auto;
  display: block;
  object-fit: cover;
  margin-bottom: var(--sp-5);
  opacity: 0.4;
}

.bio-summary {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
  max-width: 66vw;
  text-align: left;
}

.bio-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);
}

.bio-section-label {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--o-muted);
}

.bio-entry {
  display: flex;
  flex-direction: row;
  gap: var(--sp-6);
  align-items: flex-start;
  max-width: 66vw;
}

.bio-entry-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

/* Gallery — 3 square thumbs, fixed width column */
.bio-entry-gallery {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.bio-gallery-item {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: default;
  margin: 0;
  border: 1px solid var(--o-surface);
}

.bio-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--t-base) ease-out, opacity var(--t-base) ease-out;
}


.bio-gallery-item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.bio-entry--stacked { flex-direction: column; }
.bio-entry--stacked .bio-entry-company {
  color: var(--o-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}
.bio-entry--stacked .bio-entry-role    { color: var(--o-primary); }

/* Education grid — degrees side by side, date above name */
.bio-education-grid {
  display: flex;
  gap: var(--sp-8);
  margin-top: 2px;
}

.bio-education-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.bio-saiba-mais {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-medium);
  text-align: right;
  line-height: var(--lh-normal);
  transition: color var(--t-fast);
}

.bio-saiba-mais:hover {
  color: var(--o-primary);
}

.bio-gallery-num {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 2;
  isolation: isolate;
  font-family: var(--font);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-tight);
  color: var(--o-primary);
  pointer-events: none;
  line-height: var(--lh-tight);
}

.bio-entry-company {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--o-primary);
  letter-spacing: var(--ls-tight);
}

.bio-entry-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bio-entry-period {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--o-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.bio-entry-role {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--o-muted);
}

.bio-entry-desc {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--o-primary);
  max-width: 580px;
  margin-top: var(--sp-1);
}

/* ─── Bio lightbox ───────────────────────────────────── */

.bio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}

.bio-lightbox.is-open {
  opacity: 1;
  pointer-events: none;
}

.bio-lb-container {
  position: relative;
  line-height: 0;
}

.bio-lb-container > img {
  height: 90vh;
  max-width: 95vw;
  object-fit: contain;
  display: block;
  opacity: 0.5;
}

.bio-lb-meta {
  display: none;
}

.bio-lb-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

#bio-lb-field-title .bio-lb-label { display: none; }

.bio-lb-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-muted);
}

.bio-lb-title {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--o-primary);
  line-height: var(--lh-compact);
}

.bio-lb-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
}

.bio-lb-source-link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
  text-decoration: none;
  word-break: break-all;
}

.bio-lb-source-link:hover { color: var(--o-primary); }

/* ─── Password overlay ────────────────────────────────── */

.password-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-open) ease-out;
}

/* Grayscale background image behind the overlay tint */
.password-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('key_background.png') center center / cover no-repeat;
  filter: grayscale(1);
  opacity: 0.85;
  z-index: -1;
}

.password-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('grain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.07;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@media (orientation: portrait) {
}

.password-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* X close button — centered at top of overlay */
.password-close {
  position: fixed;
  bottom: 27px;
  right: 91px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--o-muted-w);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--o-secondary-w);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-base);
  z-index: 3;
  padding: 0;
  line-height: 0;
}

.password-close:hover {
  border-color: var(--o-medium-w);
  color: var(--o-primary-w);
  transform: scale(var(--scale-hover));
}

/* ── Password-close: acompanha o nh-key do nav-hub em cada breakpoint ── */
@media (max-width: 767px) {
  .password-close {
    bottom: 66px;
    right: 27px;
    width: 31px;
    height: 31px;
  }
}
@media (min-width: 1600px) {
  .password-close {
    right: 96px;
    width: 57px;
    height: 57px;
  }
}

.password-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
  max-width: 340px;
  text-align: center;
}

.password-hint-title {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-primary-w);
  margin: 0;
}

.password-hint-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--o-muted-w);
  margin: -14px 0 0;
}

.password-input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--o-surface-w);
  outline: none;
  color: var(--o-primary-w);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wider);
  padding: 6px 0 10px;
  text-align: center;
  width: 230px;
  caret-color: var(--o-muted-w);
  transition: border-bottom-color var(--t-base);
}

.password-input:focus {
  border-bottom-color: var(--o-muted-w);
}

.password-input::placeholder {
  color: var(--o-surface-w);
  letter-spacing: var(--ls-wider);
}

.password-error {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--o-muted-w);
  min-height: 11px;
  margin: -14px 0 0;
}

@keyframes pw-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

.password-input.pw-shake {
  animation: pw-shake 0.32s ease;
}

/* ─── Canvas ──────────────────────────────────────────── */

.canvas-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  transition: opacity var(--t-slow) ease-out;
  /* isolation: isolate removido — era necessário para conter o mix-blend-mode:soft-light
     do grain. Sem blend mode no grain, isolation cria overhead desnecessário. */
}


/* ─── Lens strips (left / right edge magnification) ────────────
   Técnica: 3 zonas por lado, cada uma com um scaleX crescente
   do interior para o exterior. Os scalers de cada zona ocupam
   sempre a largura total da faixa (15vw) de modo que o ponto de
   transform-origin (right para esquerda, left para direita) fique
   sempre na borda interna — garante joins matematicamente exatos.
   JS calcula os offsets de translação para cada world element
   usando a fórmula: A_{i+1} = Ai + (xBound − innerX)×(1/N_{i+1} − 1/Ni).
   Sem filtros SVG — tudo GPU (transforms). Safari-safe.
   z-index 2: acima do canvas (z 0), abaixo dos edge-fades (z 4).
   pointer-events: none — cliques passam para o canvas principal. ── */

.lens-strip {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 15vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  background: var(--bg);
}

.lens-strip--left  { left: 0; }
.lens-strip--right { right: 0; }

/* Zone containers clip each band */
.lens-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

/* Left zones: inner (10-15vw), mid (5-10vw), outer (0-5vw) */
.lens-zone-l--inner { left: 10vw; width: 5vw; }
.lens-zone-l--mid   { left: 5vw;  width: 5vw; }
.lens-zone-l--outer { left: 0;    width: 5vw; }

/* Right zones: inner (0-5vw of strip), mid (5-10vw), outer (10-15vw) */
.lens-zone-r--inner { left: 0;    width: 5vw; }
.lens-zone-r--mid   { left: 5vw;  width: 5vw; }
.lens-zone-r--outer { left: 10vw; width: 5vw; }

/* Zone scalers span the full 15vw strip; left: offset places them
   so their right (left) edge aligns with the strip's inner boundary */
.lens-zone-scaler {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15vw;
}

/* Left scalers → transform-origin: right = strip's inner boundary (screen 15vw) */
.lens-zone-scaler-l--inner { left: -10vw; transform: scaleX(1.5); transform-origin: right center; }
.lens-zone-scaler-l--mid   { left: -5vw;  transform: scaleX(2.5); transform-origin: right center; }
.lens-zone-scaler-l--outer { left: 0;     transform: scaleX(4);   transform-origin: right center; }

/* Right scalers → transform-origin: left = strip's inner boundary (screen 85vw) */
.lens-zone-scaler-r--inner { left: 0;     transform: scaleX(1.5); transform-origin: left center; }
.lens-zone-scaler-r--mid   { left: -5vw;  transform: scaleX(2.5); transform-origin: left center; }
.lens-zone-scaler-r--outer { left: -10vw; transform: scaleX(4);   transform-origin: left center; }

body.is-filtered .lens-strip {
  display: none;
}

.canvas-wrap.faded {
  opacity: 0;
  pointer-events: none;
}


.world {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform; /* GPU compositing layer — keeps pan/zoom on the compositor thread */
  transform-origin: 0 0;  /* must be 0 0 so scale() in applyTransform() works correctly */
}

.tile {
  position: absolute;
  overflow: visible;
  /* contain: layout limita o escopo de reflow ao interior de cada tile —
     criação/remoção de tiles não invalida layout de elementos externos. */
  contain: layout;
}

/* ─── Items (base) ────────────────────────────────────── */

.item {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: inherit; /* inherit the canvas square cursor */
  user-select: none;
  overflow: hidden;
}

/* Mural items start grayscale; hover reveals colour instantly, fades back on leave.
   Filter is scoped to #world only — lens zone worlds apply grayscale at the
   container level instead, to avoid creating hundreds of GPU compositing layers.
   NOTE: no transition on the base state — prevents all 100+ items from being
   permanently promoted to compositor layers, which causes random disappearance
   under GPU memory pressure. The fade-back transition is added/removed via JS
   only for the item that just lost hover (.item--leaving class). */
#world .item {
  filter: grayscale(1);
}

#world .item.item--hovered {
  filter: grayscale(0);
}

#world .item.item--leaving {
  filter: grayscale(1);
}

/* Lens zones: single filter on each world container — 6 GPU layers instead
   of 6 × N_items, fixes flickering under animation.
   JS adds .lens-world--hovered when a main-world item is hovered, lifts the
   container grayscale and applies inline grayscale per clone instead. */
#world-l0, #world-l1, #world-l2,
#world-r0, #world-r1, #world-r2 {
  filter: grayscale(1);
}

/* Lifted by JS (syncLensHover) only when cursor is in the lens strip area */
.lens-world--hovered { filter: none !important; }

/* Per-item grayscale inside hovered lens worlds — avoids O(N) inline style mutations.
   JS only adds/removes .lens-item--match on the one matching clone per world. */
.lens-world--hovered .item { filter: grayscale(1); }
.lens-world--hovered .item.lens-item--match { filter: grayscale(0) !important; }
.lens-world--hovered .item.lens-item--match .item__img { opacity: 1; }


.item__img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* square — height matches rendered width */
  height: auto;
  object-fit: cover;
  display: block;
  opacity: 0.2;
  /* NO permanent transition — would promote every image to its own GPU compositor
     layer (448+ layers when tiles are full), crushing frame rate.
     Same pattern as .item filter: transitions added only at hover-in/out via :hover + .item--leaving. */
}

/* Hover: instant reveal — no transition keeps this image off the compositor layer list */
#world .item.item--hovered .item__img { opacity: 1; }

/* Hover-out: .item--leaving (added by JS on mouseleave, removed after 450ms) holds the
   fade transition for just this one image — exactly as .item filter does for grayscale. */
#world .item.item--leaving .item__img {
  opacity: 0.2;
}

/* ─── Filtered View ───────────────────────────────────── */

.filtered-view {
  position: fixed;
  inset: 0;
  padding: 60px 40px 160px; /* bottom clears the bottom panel */
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) ease-out;
}

.filtered-view.visible {
  opacity: 1;
  pointer-events: all;
}

.filtered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

/* Override mural-specific positioning inside grid */
.filtered-grid .item {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
}

/* ─── Scrollbar ───────────────────────────────────────── */

.filtered-view::-webkit-scrollbar { width: 5px; }
.filtered-view::-webkit-scrollbar-track { background: transparent; }
.filtered-view::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 2px; }

/* ─── Language Toggle ─────────────────────────────────────── */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
}


.lang-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-muted);
  user-select: none;
  font-family: var(--font);
  transition: color var(--t-base);
}

.lang-toggle.pt-active .lang-pt,
.lang-toggle.en-active .lang-en {
  color: var(--ink);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 9px;
  transition: background var(--t-base);
}

.toggle-track::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.22s var(--ease-standard);
}

/* checked = PT (knob slides to the right) */
.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(18px);
}

/* ─── Cursor tooltip ──────────────────────────────────────── */

.cursor-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  padding: 13px 20px;
  white-space: nowrap;
  will-change: transform;
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-title {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-compact);
  order: 2;
}

.ct-cat {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--o-muted);
  order: 1;
}

.ct-action {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--o-muted);
  margin-top: 2px;
  order: 3;
}

.cursor-tooltip.visible {
  opacity: 1;
}

/* ─── Mural index — left column overlay ─────────────────────── */

.mural-index {
  position: fixed;
  top: 0;
  left: 0;
  width: 40vw;
  height: 100vh;
  z-index: 40;
  padding: 22px 16px 22px 82px;
  overflow-y: auto;
  scrollbar-width: none;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.mural-index::-webkit-scrollbar { display: none; }

.mi-list { margin-top: auto; }

.mi-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: baseline;
  padding: 3px 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
  transition: color var(--t-fast);
  user-select: none;
  line-height: var(--lh-normal);
}

.mi-item:hover,
.mi-item--mural-hovered { color: var(--o-medium); }
.mi-item.active { color: var(--o-primary); }

/* While any mi-item is hovered: dim all others to date-level opacity */
.mi-list--hovering .mi-item { color: var(--o-faint); transition: color var(--t-fast); }
.mi-list--hovering .mi-item:hover,
.mi-list--hovering .mi-item--mural-hovered { color: var(--o-medium); }
.mi-list--hovering .mi-item.active          { color: var(--o-muted); }

.mi-date {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--o-faint);
  white-space: nowrap;
}

.mi-item.active .mi-date { color: var(--o-muted); }

/* Index → mural: item triggered from index hover */
#world .item.item--index-hovered { filter: grayscale(0); }
#world .item.item--index-hovered .item__img { opacity: 1; }

.mi-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
}

.mi-cat {
  margin-left: 60px;
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--o-faint);
  white-space: nowrap;
}

/* Ocultar índice quando o viewer está aberto */
/* Mural index and side buttons remain visible through the viewer (90% white bg).
   Buttons drop below viewer z-index and become non-interactive. */
body.viewer-open .mural-index { pointer-events: none; }

/* ─── Responsive breakpoints — mural index ───────── */

@media (max-width: 767px) {
  .mural-index {
    width: 75vw;
  }
  .mi-item {
    grid-template-columns: 72px 1fr auto;
  }
  .mi-cat { margin-left: 36px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .mural-index {
    width: 50vw;
  }
  .mi-item {
    grid-template-columns: 84px 1fr auto;
  }
  .mi-cat { margin-left: 42px; }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  .mural-index { left: 20px; width: calc(40vw + 20px); }
}

@media (min-width: 1600px) {
  .mural-index { left: 82px; width: calc(33.333vw + 82px); }
}

@media (min-width: 2050px) {
  .mural-index { left: 140px; width: calc(33.333vw + 140px); }
}

@media (min-width: 1600px) and (max-width: 2049px) {
  .mi-item { grid-template-columns: 131px 1fr auto; }
  /* font-size escala via :root — sem override necessário */
}

@media (min-width: 2050px) {
  .mi-item {
    grid-template-columns: 187px 1fr auto;
    font-size: var(--fs-lg);
  }
  .mi-date  { font-size: var(--fs-lg); }
  .mi-title { font-size: var(--fs-lg); }
  .mi-cat   { font-size: var(--fs-lg); margin-left: 94px; }
}


/* ════════════════════════════════════════════════════
   NAV HUB — botões flutuantes (mural + viewer)
════════════════════════════════════════════════════ */

/* ── Base container ──────────────────────────────── */

.nav-hub {
  --nh-size: 52px;
  --nh-icon: 13px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Mural variant — fixed bottom-right ──────────── */

.nav-hub--mural {
  position: fixed;
  bottom: 27px;
  right: 27px;
  flex-direction: row;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

/* ── Viewer variant — fixed top-left of viewer ───── */

.nav-hub--viewer {
  --nh-size: 40px;
  --nh-icon: 10px;
  position: fixed;
  top: var(--v-margin);
  left: var(--v-margin);
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 46;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) ease;
}

body.viewer-open .nav-hub--viewer {
  opacity: 1;
  pointer-events: auto;
}

/* ── Photo button ─────────────────────────────────── */

.nh-photo {
  width: var(--nh-size);
  height: var(--nh-size);
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: var(--bg);
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
  position: relative;
  transition:
    width 0.38s cubic-bezier(0,0,0.2,1),
    height 0.38s cubic-bezier(0,0,0.2,1),
    transform var(--t-base),
    opacity 0.25s ease-out;
}

/* Paper texture overlay — viewer only */
.nav-hub--viewer .nh-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('papel-btn.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  opacity: 0.8;
  border-radius: 50%;
  z-index: 0;
}

.nh-photo:hover { transform: scale(1.05); }

.nh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* Viewer needs z-index to appear above ::before texture */
.nav-hub--viewer .nh-photo img {
  position: relative;
  z-index: 1;
}

/* ── Key button ───────────────────────────────────── */

.nh-key {
  width: var(--nh-size);
  height: var(--nh-size);
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--o-surface-w);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-base), transform var(--t-base), opacity 0.25s ease-out;
}

.nh-key:hover { transform: scale(1.05); background: var(--ink); }

.nh-key img {
  height: var(--nh-icon);
  width: auto;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--t-base);
}

.nh-key:hover img { opacity: 1; }

/* ── Language button ──────────────────────────────── */

.nh-lang {
  width: var(--nh-size);
  height: var(--nh-size);
  border-radius: 50%;
  background: none;
  border: 1px solid var(--o-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-secondary);
  flex-shrink: 0;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-base);
}

.nh-lang:hover {
  border-color: var(--o-secondary);
  color: var(--o-primary);
  transform: scale(var(--scale-hover));
}

/* Corner standalone lang button (viewer mobile) */
.nh-lang--corner {
  --nh-size: 52px;
  position: fixed;
  bottom: 27px;
  right: 27px;
  z-index: 46;
}

/* Copy button — mesma posição que o key ocupa no index (uma vaga à
   esquerda do lang, gap = --sp-3). Mesmo estilo redondo do .nh-lang. */
.nh-copy--corner {
  right: calc(27px + var(--nh-size) + var(--sp-3));
  text-transform: none;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

/* ── Close button (mobile viewer) ─────────────────── */

.nh-close {
  /* Visível em todos os tamanhos; a opacidade do .post-viewer controla quando aparece */
  display: flex;
  position: fixed;
  top: var(--v-margin);
  left: var(--v-margin);
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--o-secondary);
  z-index: 47;
  padding: 10px;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: color var(--t-base) ease-out;
}

.nh-close:hover { color: var(--ink); }

/* ── Dim state (mural when bio is open) ───────────── */

.nav-hub--mural.nav-hub--dim .nh-photo,
.nav-hub--mural.nav-hub--dim .nh-key  { opacity: 0.4; }

.nav-hub--mural.nav-hub--dim .nh-photo:hover,
.nav-hub--mural.nav-hub--dim .nh-key:hover  { opacity: 1; }

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 767px) {
  .nav-hub--mural { flex-direction: column; gap: var(--sp-2); }
  .nav-hub--mural .nh-photo,
  .nav-hub--mural .nh-key  { width: 31px; height: 31px; }
  .nav-hub--mural .nh-lang { width: 31px; height: 31px; }
  .nav-hub--mural .nh-key img { height: 8px; }
}

@media (min-width: 1600px) {
  .nav-hub--mural .nh-photo,
  .nav-hub--mural .nh-key  { width: 57px; height: 57px; }
  .nav-hub--mural .nh-lang { width: 57px; height: 57px; }
  .nav-hub--mural .nh-key img { height: 14px; }
}


/* ════════════════════════════════════════════════════
   POST VIEWER
════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   VIEWER.CSS — inline post viewer overlay for index.html
   Grid layout: sidebar | main content | ref images
   Espaçamentos: 22 px outer (amarelo) · 16 px gutter (azul)
══════════════════════════════════════════════════════ */

/* ── Variáveis de layout do viewer ──────────────────── */

.post-viewer {
  --v-margin:  22px;   /* outer margin (amarelo) */
  --v-gutter:  16px;   /* column gutter (azul)   */
  --v-sidebar: 300px;  /* largura da sidebar      */
  --v-ref:     25vw;   /* largura da coluna ref   */
}

/* ── Overlay ─────────────────────────────────────────── */

.post-viewer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) ease;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--o-surface) rgba(255, 255, 255, 0.93);
}

.pv-layout {
  position: relative;
  display: flex;
  gap: var(--v-gutter);
  padding: var(--v-margin);
  align-items: flex-start;
  min-height: 100%;
}

.post-viewer.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Sidebar esquerda ────────────────────────────────── */

.pv-sidebar {
  width: var(--v-sidebar);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--v-margin);
  height: calc(100vh - 2 * var(--v-margin));
}


/* ── Sumário (posição 6) ─────────────────────────────── */

.pv-summary {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pv-summary-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--o-secondary);
  margin: 0 0 8px 0;
  flex-shrink: 0;
}


.pv-doc-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
}

.pv-doc-list::-webkit-scrollbar { display: none; }

/* Itens reutilizam as classes .bp-doc-* com layout base + cores para fundo branco */
.pv-doc-list .bp-doc-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: baseline;
  padding: 2.5px 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-compact);
  color: var(--o-faint);
  transition: color var(--t-fast);
  user-select: none;
}

.pv-doc-list .bp-doc-item:hover .bp-doc-title { color: var(--ink); }
.pv-doc-list .bp-doc-item.active { color: var(--ink); }
.pv-doc-list .bp-doc-item.active .bp-doc-title { color: var(--ink); }

/* Category label: black for matching category, gray for others */
.pv-doc-list .bp-doc-item .pv-doc-cat         { color: var(--o-faint); }
.pv-doc-list .bp-doc-item.related .pv-doc-cat { color: var(--o-primary); }

.pv-doc-list .bp-doc-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--o-faint);
  white-space: nowrap;
}

.pv-doc-list .bp-doc-item.active .bp-doc-date { color: var(--ink); }

.pv-doc-list .bp-doc-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pv-doc-cat {
  font-family: var(--font);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted); /* mesmo cinza dos títulos */
  white-space: nowrap;
  margin-left: 14px;
}

/* Categoria do artigo aberto — mais destaque */
.pv-doc-list .bp-doc-item.active .pv-doc-cat {
  color: var(--ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
}

/* ── Botões viewer → ver .nav-hub--viewer no componente nav-hub ── */

/* ── Coluna central — cresce com o conteúdo (scroll no viewer) ─ */

.pv-main {
  flex: 1;
  min-width: 0;
}

/* ── Coluna direita — sticky, acompanha o scroll do viewer ───── */

.pv-ref-col {
  width: var(--v-ref);
  flex-shrink: 0;
  overflow: visible;
}

.pv-ref-col::-webkit-scrollbar { display: none; }

/* ── Esconder controlos do mural quando viewer está aberto ─ */

/* #bottom-panel e #bp-loading-text removidos do HTML — regras não necessárias */
/* #lang-toggle tem display:none inline no HTML — regra não necessária */

/* Side buttons stay visible through the viewer but drop below it and lose interactivity */
body.viewer-open .nav-hub--mural {
  z-index: 44;
  pointer-events: none;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════
   ARTICLE STYLES — restaurados exactamente do original
══════════════════════════════════════════════════════ */

/* Bloco de texto centrado dentro da coluna central */
.post-viewer .post-article {
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  width: min(731px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(4 / 17 * 100vh);
  padding-bottom: 220px;
}

/* ── Title ───────────────────────────────────────────── */

.post-viewer .post-report-title {
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  margin: 0 0 var(--sp-article) 0;
  text-align: left;
}

/* ── Meta rows ───────────────────────────────────────── */

.post-viewer .post-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-bottom: 0.6rem;
}

.post-viewer .post-meta-row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 0;
  margin-top: 0.6rem;
}

.post-viewer .post-meta-row--2 .pmf:nth-child(1) { justify-self: start; }
.post-viewer .post-meta-row--2 .pmf:nth-child(2) { justify-self: center; }
.post-viewer .post-meta-row--2 .pmf:nth-child(3) { justify-self: end; }

/* Individual field: label + value */
.post-viewer .pmf {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-none);
  color: var(--o-secondary);
  display: flex;
  gap: 0.6em;
  align-items: baseline;
}

/* Field label (uppercase key) */
.post-viewer .pmk {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-medium);
  color: var(--o-secondary);
}

/* ── Tag chips ────────────────────────────────────────── */

.post-viewer .pmf-tag {
  display: inline-block;
  border: 1px solid var(--o-faint);
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--o-secondary);
  margin-right: 4px;
  line-height: var(--lh-normal);
  vertical-align: middle;
}

/* ── Horizontal rule ─────────────────────────────────── */

.post-viewer .post-report-rule {
  border: none;
  border-top: 1px solid var(--o-faint);
  margin: 0;
}

/* ── Vertical spacers ────────────────────────────────── */

.post-viewer .post-report-gap      { height: var(--sp-article); }
.post-viewer .post-report-gap--sm  { height: 1.6rem; }

/* ── Sumário section ─────────────────────────────────── */

.post-viewer .post-summary-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--o-secondary);
  margin: 0 0 0.6rem 0;
}

.post-viewer .post-summary-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-none);
  line-height: var(--lh-normal);
  color: var(--o-secondary);
  margin: 0.85rem 0 0 0;
}

/* ── Body ────────────────────────────────────────────── */

.post-viewer .post-body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}

.post-viewer .post-body > * + * { margin-top: 1.4em; }

.post-viewer .post-body p         { margin-bottom: 0.75em; }
.post-viewer .post-body p + p     { text-indent: 2em; margin-top: 0; }

.post-viewer .post-body h2 + p,
.post-viewer .post-body blockquote + p { text-indent: 0; }

.post-viewer .post-body h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
  text-indent: 0;
}

.post-viewer .post-body blockquote {
  border-left: 1px solid var(--ink);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--ink);
  text-indent: 0;
}

.post-viewer .post-body strong { font-weight: var(--fw-semibold); }
.post-viewer .post-body em     { font-style: italic; }

/* ── Base < 768px — 2 colunas: 3/4 texto+sumário | 1/4 imagens ── */
@media (max-width: 767px) {

  /* Grid: texto à esquerda, imagens à direita */
  .pv-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "main    ref"
      "sidebar ref";
  }

  /* Artigo — coluna esquerda, topo */
  .pv-main { grid-area: main; }

  /* Sumário — coluna esquerda, abaixo do artigo */
  .pv-sidebar {
    grid-area: sidebar;
    width: auto;
    height: auto;
    position: static;
  }

  /* Imagens — coluna direita, sticky */
  .pv-ref-col {
    grid-area: ref;
    width: auto;
    overflow: visible;
  }

  /* Fontes escalam via :root — sem override necessário */

  /* Botões bio/key/lang — centrados no ecrã, horizontais, ocultos por defeito */
  body.viewer-open .nav-hub--viewer {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    gap: var(--sp-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  /* Abrem ao activar o menu sanduíche */
  body.viewer-open.pv-menu-open .nav-hub--viewer {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }

  /* Botão voltar texto — oculto; X substitui */

  /* Hamburger — oculto neste breakpoint, reservado para mobile */
  .pv-hamburger { display: none; }
}

/* ── 768px — replica layout e fontes da base ────── */
@media (min-width: 768px) {

  /* Grid: texto à esquerda, imagens à direita */
  .pv-layout {
    display: grid;
    grid-template-columns: 1fr 25vw;
    grid-template-rows: auto auto;
    grid-template-areas:
      "main    ref"
      "sidebar ref";
    column-gap: calc(var(--v-gutter) * 5); /* 5× = 80px */
  }

  .pv-main { grid-area: main; }

  .pv-sidebar {
    grid-area: sidebar;
    width: min(731px, 100%);
    margin-left: auto;
    margin-right: auto;
    height: auto;
    position: static;
  }

  .pv-ref-col {
    grid-area: ref;
    width: auto;
    overflow: visible;
  }

  /* Fontes */
  /* post-report-title escala via :root — sem override necessário */
  /* .post-body font-size escala via :root — sem override necessário */
  /* pmf + pmk escalam via :root — sem override necessário */
  .pv-doc-list .bp-doc-item                          { font-size: var(--fs-sm); }
  .pv-doc-list .bp-doc-date                          { font-size: var(--fs-2xs); }
  .pv-doc-list .bp-doc-title                         { font-size: var(--fs-xs); }
  .pv-doc-cat                                        { font-size: var(--fs-2xs); }
  .pv-doc-list .bp-doc-item.active .pv-doc-cat       { font-size: var(--fs-2xs); }
  /* vr-gallery-num escala via :root — sem override necessário */
  .vlb-title-text                                    { font-size: var(--fs-base); }
  .vlb-label                                         { font-size: var(--fs-xs); }

  /* Botões bio/key/lang — centrados no ecrã, horizontais, ocultos por defeito */
  body.viewer-open .nav-hub--viewer {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    gap: var(--sp-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  body.viewer-open.pv-menu-open .nav-hub--viewer {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }

  /* Botão voltar texto — oculto; X substitui */

  /* Hamburger — oculto */
  .pv-hamburger { display: none; }
}

/* Tokens px do viewer escalam via --v-margin/gutter/sidebar/ref — sem override necessário */

/* ── Inline image references in body ─────────────────── */

.post-viewer .img-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-none);
  color: var(--o-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}

.post-viewer .img-ref:hover {
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════
   REFERENCE IMAGES — dentro da coluna .pv-ref-col
══════════════════════════════════════════════════════ */

.viewer-ref-figure {
  position: fixed;
  top: var(--v-margin);
  right: var(--v-margin);
  width: 25vw;
  max-height: calc(100svh - 2 * var(--v-margin));
  overflow: hidden;
  margin: 0;
  cursor: zoom-in;
}

/* Main image — 20% opacity, brightens on hover */
.viewer-ref-figure > img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.2;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
}

.viewer-ref-figure > img:hover { opacity: 1; }

.viewer-ref-figure figcaption { display: none; }

/* Breakpoints — figura em fluxo normal (não fixed) em ecrãs pequenos */
@media (max-width: 767px) {
  .viewer-ref-figure {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    overflow-y: visible;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .viewer-ref-figure {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    overflow-y: visible;
  }
}

/* ── Thumbnail gallery ───────────────────────────────── */

.viewer-ref-gallery {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  cursor: default;
}

.vr-gallery-item {
  cursor: zoom-in;
  margin: 0;
  position: relative;
}

/* Number overlaid on top-left of each thumbnail */
.vr-gallery-num {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-tight);
  color: var(--o-primary);
  pointer-events: none;
  line-height: var(--lh-tight);
}

.vr-gallery-item > img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.2;
  transition: opacity 0.25s;
}

/* Each thumbnail brightens independently */
.vr-gallery-item:hover > img,
.vr-gallery-item.img-ref-hovered > img { opacity: 1; }


/* ══════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════ */

.viewer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}

.viewer-lightbox::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../grain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

@media (orientation: portrait) {
}

.viewer-lightbox > * {
  position: relative;
  z-index: 1;
}

.viewer-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Container: wraps the image tightly; meta anchors to its right edge */
.vlb-container {
  position: relative;
  line-height: 0;
}

.vlb-container > img {
  max-height: 85vh;
  max-width: 55vw;
  object-fit: contain;
  display: block;
}

/* ── Lightbox metadata panel ─────────────────────────── */

.vlb-meta {
  position: absolute;
  left: calc(100% + 2.5vw);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  line-height: var(--lh-auto);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: default;
}

.vlb-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Hide the TÍTULO label — title shows on its own */
#vlb-field-title .vlb-label { display: none; }

.vlb-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--o-muted);
}

.vlb-title-text {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--o-primary);
  line-height: var(--lh-compact);
}

.vlb-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
}

.vlb-source-link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--o-muted);
  text-decoration: none;
  word-break: break-all;
}

.vlb-source-link:hover { color: var(--o-primary); }