/* =========================================================
   Aetherius — folha de estilos
   Minimal · fundo branco · tipografia preta · Gimlet Text Light
   ========================================================= */

/* --- Tipografia: Gimlet Text Light (teste) — assets/fonts/GimletText-Light.otf --- */
@font-face {
  font-family: "Gimlet Text";
  src: url("../assets/fonts/GimletText-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-muted: #8a8a8a;
  --color-line: #e6e6e6;
  --color-accent: #ff007a; /* acento magenta pontual (ver layouts) */

  --font-sans: "Gimlet Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Ref. pawelachtelik.com — tipografia uniforme a 15px */
  --text-base: 15px;
  --line-height-base: 19.46px;
  --text-nav: 13px;

  --fw-light: 300;
  --fw-regular: 400;

  --space: clamp(1rem, 2.75vw, 2.5rem);
  --maxw: 1320px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Sobre — entrada 900ms; saída do texto mais demorada */
  --ease-sobre: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-sobre-text: 900ms;
  --dur-sobre-text-close: 1400ms;
  --hero-blur: 14px;
  --hero-dim-overlay: 0.38;
  --dur-hero-blur: var(--dur-sobre-text);
  --dur-hero-blur-close: var(--dur-sobre-text-close);
  --dur-menu-open: 2.2s; /* menu "+" — deslize das opções */
  --dur: 720ms;
  --dur-slide: calc(var(--dur) * 3); /* deslocamento da barra no Sobre */
  /* Secções do menu — ref. pawelachtelik.com Selected/Index (slide-up / slide-down) */
  --dur-page: 500ms;
  --ease-page: linear;
  /* Páginas do menu "+" entre si — opacity .5s linear (pawelachtelik.com Index/Selected) */
  --dur-menu-fade: 500ms;
  --ease-menu-fade: linear;

  --header-h: 44px;
  --menu-header-pad-top: clamp(0.5rem, 1.25vw, 0.85rem);
  --menu-header-block: calc(var(--header-h) + var(--menu-header-pad-top));
  --text-footer: 10.5px;
  --line-height-footer: 13.5px;
  --footer-block: calc(var(--menu-header-pad-top) * 2 + var(--line-height-footer) * 2);
  /* Corpo de texto — páginas do menu "+" */
  --text-menu: 21px;
  --line-height-menu: 22px;
}

@media screen and (max-width: 991px) {
  :root {
    --text-menu: 17px;
    --line-height-menu: 18px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --space: clamp(0.85rem, 4vw, 1.5rem);
    --menu-header-pad-top: max(0.5rem, env(safe-area-inset-top, 0px));
  }
}

@media screen and (max-width: 479px) {
  :root {
    --text-menu: 17px;
    --line-height-menu: 18px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--text-base);
}

body {
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--fw-light);
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: var(--line-height-base);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* o scroll vive no contentor .pages */
}

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

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--color-fg); color: var(--color-bg); }

/* =========================================================
   Rodapé fixo
   ========================================================= */
.site-footer {
  display: none;
  position: fixed;
  inset: auto auto 0 0;
  z-index: 40;
  justify-content: flex-start;
  align-items: flex-end;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: var(--menu-header-pad-top) var(--space);
  font-size: var(--text-footer);
  font-weight: var(--fw-light);
  line-height: var(--line-height-footer);
  letter-spacing: 0;
  pointer-events: none;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer a {
  pointer-events: auto;
}

/* Páginas do menu "+" — texto preto sobre fundo branco */
body.menu-page .site-footer {
  display: flex;
  color: var(--color-fg);
}

body.menu-page[data-page="galeria"]:not(.is-menu-navigating) .site-footer {
  display: none;
}

.site-footer.is-crossfade-in,
.site-footer.is-crossfade-out {
  transition: opacity var(--dur-menu-fade) var(--ease-menu-fade);
}

.site-footer.is-crossfade-in {
  display: flex;
  opacity: 0;
}

.site-footer.is-crossfade-in.is-crossfade-visible {
  opacity: 1;
}

.site-footer.is-crossfade-out.is-crossfade-hidden {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Cabeçalho fixo
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: 0 var(--space);
  letter-spacing: 0.06em;
  mix-blend-mode: difference;        /* legível sobre claro/escuro */
  color: #fff;                        /* com difference => preto sobre branco */
  transition: opacity var(--dur) var(--ease);
}
.site-header.is-hidden { opacity: 0; pointer-events: none; }

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 0;
}

#hero .hero-bar .header-left,
.site-header:not(.is-hidden) .header-left {
  overflow: hidden;
  max-width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-menu-fade) var(--ease-menu-fade),
              max-width var(--dur-menu-fade) var(--ease-menu-fade),
              visibility 0s;
}

.brand {
  font-size: var(--text-nav);
  font-weight: var(--fw-light);
  letter-spacing: 0.12em;
}

.btn-link { letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; transition: opacity 0.3s var(--ease); }
.btn-link:hover { opacity: 1; }
/* "Sobre" / "Fechar": só primeira letra em maiúscula */
.btn-link[data-open-sobre] {
  font-size: var(--text-nav);
  margin-left: clamp(3.5rem, 12.5vw, 9rem);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* =========================================================
   Menu inline — opções deslizam para a esquerda, na mesma
   linha do "+"; o "+" passa a "x" quando aberto.
   ========================================================= */
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.menu-items {
  display: flex; align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  overflow: hidden; white-space: nowrap;
  max-width: 0; opacity: 0;
  transform: translateX(0.75rem);
  pointer-events: none;
  transition: max-width var(--dur-menu-open) var(--ease),
              opacity var(--dur-menu-open) var(--ease),
              transform var(--dur-menu-open) var(--ease);
}
.menu.is-open .menu-items {
  max-width: 80vw; opacity: 1; transform: translateX(0);
  pointer-events: auto;
}
.menu-items a {
  font-size: var(--text-nav);
  opacity: 0.85; transition: opacity 0.3s var(--ease);
  text-transform: none; /* História, Poética, etc. — como "Sobre" */
  letter-spacing: 0.04em;
}
.menu-items a:hover { opacity: 1; }

/* Modo navegação: menu aberto, página ativa opaca, restantes mais claras */
body.is-nav-mode .header-left { display: none; }
body.is-nav-mode .site-header { justify-content: flex-end; }

/* Secções do menu "+": cabeçalho fixo no topo */
body.is-on-menu-section .site-header {
  top: 0;
  transform: none;
  height: var(--header-h);
  pointer-events: none;
}

/* Páginas do menu "+" — barra capa: Aetherius · + */
body.menu-page.is-on-menu-section .site-header.menu-page-header {
  height: auto;
  min-height: var(--menu-header-block);
  padding: var(--menu-header-pad-top) var(--space) 0;
  pointer-events: auto;
}

body.menu-page .menu-page-header .hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space);
  color: var(--color-fg);
}

body.menu-page .menu-page-header .header-left,
body.menu-page .menu-page-header .menu-toggle {
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-menu-fade) var(--ease-menu-fade),
              max-width var(--dur-menu-fade) var(--ease-menu-fade),
              visibility 0s;
}

body.menu-page .menu-page-header .hero-bar:has(.menu.is-open) .menu-toggle {
  max-width: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.menu-page .menu-page-header .menu {
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

body.menu-page.is-menu-page-compact .menu-page-header .hero-bar:has(.menu.is-open) .menu {
  width: 100%;
  justify-content: flex-end;
}

body.menu-page .menu-page-header .menu-items {
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: none;
  gap: clamp(0.5rem, 1.6vw, 2.25rem);
}

body.menu-page .menu.is-open .menu-items {
  max-width: 100%;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

body.menu-page .menu.is-open .menu-items a {
  opacity: 0.35;
}

body.menu-page .menu.is-open .menu-items a.is-active {
  opacity: 1;
}

body.menu-page .menu.is-open .menu-items a:hover:not(.is-active) {
  opacity: 0.55;
}

body.is-nav-mode .menu {
  width: auto;
  justify-content: flex-end;
}
body.is-nav-mode .menu-items {
  max-width: 80vw; opacity: 1; transform: translateX(0);
  pointer-events: auto;
}
body.is-nav-mode .menu-toggle { transform: rotate(45deg); } /* "+" → "x" */
body.is-nav-mode .menu-items a { opacity: 0.35; }
body.is-nav-mode .menu-items a.is-active { opacity: 1; }
body.is-nav-mode .menu-items a:hover:not(.is-active) { opacity: 0.55; }

.menu-toggle {
  flex: none;
  font-size: 15px;
  line-height: 1;
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  transition: transform var(--dur-menu-open) var(--ease);
}
.menu.is-open .menu-toggle { transform: rotate(45deg); } /* "+" vira "x" */

/* Capa / páginas do menu — ecrã estreito + menu aberto sem espaço: esconde Aetherius */
body.is-home-menu-compact .site-header:not(.is-hidden) .header-left,
body.is-home-menu-compact #hero .hero-bar .header-left,
body.is-menu-page-compact .menu-page-header .header-left {
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-menu-fade) var(--ease-menu-fade),
              max-width var(--dur-menu-fade) var(--ease-menu-fade),
              visibility 0s linear var(--dur-menu-fade);
}

/* =========================================================
   Contentor de páginas — scroll fixo (snap por página)
   ========================================================= */
.pages {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.pages--home {
  overflow: hidden;
  scroll-snap-type: none;
}
.pages::-webkit-scrollbar { display: none; }

.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  overflow: hidden;
}

/* Entrada/saída — slide-up (abrir) / slide-down (fechar), como pawelachtelik.com */
@keyframes page-enter-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes page-exit-down {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.page.is-entering {
  z-index: 41;
  animation: page-enter-up var(--dur-page) var(--ease-page) forwards;
}
.page.is-exiting {
  animation: page-exit-down var(--dur-page) var(--ease-page) forwards;
}
.page.is-exiting-fixed,
.page.is-entering-fixed,
.menu-page-shell.is-exiting-fixed,
.menu-page-shell.is-entering-fixed {
  position: fixed;
  inset: 0;
  z-index: 45;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* Capa ↔ páginas do menu — painel sobre a fotografia (pawelachtelik.com) */
.menu-page-shell {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  will-change: transform;
}

/* Capa visível por baixo enquanto o painel desliza para baixo */
.page-transition-underlay {
  position: fixed;
  inset: 0;
  z-index: 44;
  overflow: hidden;
  pointer-events: none;
}

.page-transition-underlay .page--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.is-closing-to-home {
  background: transparent;
}

.menu-page-shell.is-entering-fixed:not(.is-entering) {
  transform: translateY(100%);
}

.menu-page-shell.is-entering {
  animation: page-enter-up var(--dur-page) var(--ease-page) forwards;
}

.menu-page-shell.is-exiting {
  animation: page-exit-down var(--dur-page) var(--ease-page) forwards;
}

/* Navegação entre páginas do menu "+" — crossfade 500ms linear (pawelachtelik.com) */
.menu-page-crossfade-host {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.menu-page-main.is-crossfade-out,
.menu-page-main.is-crossfade-in {
  transition: opacity var(--dur-menu-fade) var(--ease-menu-fade);
}

.menu-page-crossfade-host .menu-page-main.is-crossfade-out {
  height: 100%;
}

.menu-page-main.is-crossfade-out {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
}

.menu-page-main.is-crossfade-in {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
}

.menu-page-main.is-crossfade-out.is-crossfade-hidden {
  opacity: 0;
  pointer-events: none;
}

.menu-page-main.is-crossfade-in.is-crossfade-visible {
  opacity: 1;
}

.menu-page-shell .site-header {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  height: auto;
  min-height: var(--header-h);
  flex: none;
  mix-blend-mode: normal;
  color: var(--color-fg);
  pointer-events: none;
}

.menu-page-shell .site-header.menu-page-header {
  pointer-events: auto;
}

.menu-page-shell .menu-page-main {
  flex: 1;
  min-height: 0;
  height: auto;
  margin-top: 0;
  background: var(--color-bg);
}

.menu-page-shell.is-exiting .site-header,
.menu-page-shell.is-exiting .menu-page-main,
.menu-page-shell.is-exiting .split-text,
.menu-page-shell.is-exiting .galeria-main {
  background: var(--color-bg);
}

/* =========================================================
   01 — Hero (fotografia full-screen; barra de texto ao centro)
   Layout segue o exemplo: marca à esquerda, Sobre a seguir,
   "+" à direita — tudo numa linha, alinhada ao centro vertical.
   ========================================================= */
.page--hero { align-items: center; justify-content: center; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background var(--dur-hero-blur) var(--ease-sobre);
}

body.sobre-is-open:not(.sobre-is-closing) .hero-media::after {
  background: rgba(0, 0, 0, var(--hero-dim-overlay));
}

body.sobre-is-closing .hero-media::after {
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur-hero-blur-close) var(--ease-sobre);
}

.hero-media img {
  object-position: center 65%;
  transition: filter var(--dur-hero-blur) var(--ease-sobre),
              transform var(--dur-hero-blur) var(--ease-sobre);
  transform-origin: center center;
}

body.sobre-is-open:not(.sobre-is-closing) .hero-media img {
  filter: blur(var(--hero-blur));
  transform: scale(1.04);
}

body.sobre-is-closing .hero-media img {
  filter: none;
  transform: none;
  transition: filter var(--dur-hero-blur-close) var(--ease-sobre),
              transform var(--dur-hero-blur-close) var(--ease-sobre);
}

#hero .hero-bar .brand,
#hero .hero-bar .menu-toggle {
  transition: filter var(--dur-hero-blur) var(--ease-sobre);
}

body.sobre-is-open:not(.sobre-is-closing) #hero .hero-bar .brand,
body.sobre-is-open:not(.sobre-is-closing) #hero .hero-bar .menu-toggle {
  filter: blur(var(--hero-blur));
}

.hero-content {
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 var(--space);
}
.hero-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space);
  letter-spacing: 0.1em;
  color: #fff;
}

/* Desloca a barra para baixo se o texto "Sobre" se aproximar (ecrãs estreitos) */
body.sobre-is-open #hero .hero-bar {
  transform: translateY(var(--hero-bar-shift, 0px));
  transition: transform var(--dur-slide) var(--ease);
}

/* =========================================================
   02 — Manifesto
   ========================================================= */
.page--statement { align-items: center; justify-content: center; padding: var(--space); }
.statement {
  max-width: 24ch;
  font-weight: var(--fw-light);
  line-height: var(--line-height-base);
}

/* =========================================================
   Páginas independentes do menu (historia.html, etc.)
   ========================================================= */
body.menu-page {
  overflow: hidden;
  max-width: 100vw;
}

body.menu-page .site-header {
  mix-blend-mode: normal;
  color: var(--color-fg);
}

.menu-page-main {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Páginas do menu — smartphone: conteúdo abaixo do cabeçalho */
@media (max-width: 768px) {
  body.is-menu-page-stacked.menu-page.is-on-menu-section .site-header.menu-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--menu-header-pad-top) max(var(--space), env(safe-area-inset-right, 0px)) 0 max(var(--space), env(safe-area-inset-left, 0px));
  }

  .menu-page-shell.menu-page .site-header.menu-page-header {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    padding: var(--menu-header-pad-top) var(--space) 0;
  }

  body.is-menu-page-stacked.menu-page .menu-page-main {
    margin-top: var(--menu-header-block);
    height: calc(100dvh - var(--menu-header-block));
    min-height: 0;
  }

  body.is-menu-page-stacked.menu-page .menu-page-crossfade-host {
    margin-top: var(--menu-header-block);
    height: calc(100dvh - var(--menu-header-block));
  }

  .menu-page-shell.menu-page .menu-page-main {
    margin-top: 0;
    flex: 1;
    min-height: 0;
  }

  body.is-menu-page-stacked.menu-page .split-text,
  .menu-page-shell.menu-page .split-text {
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding: var(--space) var(--space) var(--footer-block);
    text-align: left;
    justify-content: flex-start;
    min-height: 0;
  }

  body.is-menu-page-stacked.menu-page .prose,
  .menu-page-shell.menu-page .prose {
    width: 100%;
    max-width: 100%;
  }

  /* Menu aberto — opções encostadas à margem esquerda; "+" mantém-se à direita */
  #hero:has(.menu.is-open) .hero-content {
    padding-left: max(0.2rem, env(safe-area-inset-left, 0px));
    padding-right: var(--space);
  }

  body.is-menu-page-stacked.menu-page.is-on-menu-section .site-header.menu-page-header:has(.menu.is-open) {
    padding-left: max(0.2rem, env(safe-area-inset-left, 0px));
  }

  .menu-page-shell.menu-page .site-header.menu-page-header:has(.menu.is-open) {
    padding-left: max(0.2rem, env(safe-area-inset-left, 0px));
  }

  body.menu-page .menu-page-header .hero-bar:has(.menu.is-open) .header-left,
  #hero .hero-bar:has(.menu.is-open) .header-left {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.menu-page .menu-page-header .hero-bar:has(.menu.is-open),
  #hero .hero-bar:has(.menu.is-open) {
    gap: 0;
  }

  body.menu-page .menu-page-header .hero-bar:has(.menu.is-open) .menu,
  #hero .hero-bar:has(.menu.is-open) .menu {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    gap: clamp(0.5rem, 1.5vw, 1rem);
  }

  .menu.is-open .menu-items,
  body.is-nav-mode .menu-items,
  body.menu-page .menu.is-open .menu-items {
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow: visible;
    justify-content: flex-start;
    gap: clamp(1rem, 2.5vw, 2.25rem);
  }

  .menu.is-open .menu-toggle,
  body.is-nav-mode .menu-toggle {
    flex-shrink: 0;
  }

  body.is-menu-page-stacked.menu-page .menu-page-main {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.is-menu-page-stacked.menu-page .menu-page-main::-webkit-scrollbar {
    display: none;
  }

  body.is-menu-page-stacked.menu-page .menu-page-main:not(.page-photo-main) .split-text {
    flex: 1;
    min-height: 0;
    padding-bottom: calc(var(--footer-block) + env(safe-area-inset-bottom, 0px) + var(--space));
  }

  body.is-menu-page-stacked.menu-page .menu-page-main:not(.page-photo-main) .prose,
  .menu-page-shell.menu-page .prose {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.is-menu-page-stacked.menu-page .text-step-viewport,
  .menu-page-shell.menu-page .text-step-viewport {
    flex: 1;
    min-height: 0;
  }

  body.is-menu-page-stacked.menu-page .page-gallery.is-visible {
    width: 100%;
    height: auto;
    min-height: min(52dvh, 380px);
    transform: none;
  }

  body.is-menu-page-stacked.menu-page .page-gallery.is-visible .page-carousel {
    width: 100%;
    height: min(50dvh, 360px);
    max-height: 70vw;
  }

  body.is-menu-page-stacked.menu-page .page-carousel__nav {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  body.menu-page .site-footer {
    padding-bottom: calc(var(--menu-header-pad-top) + env(safe-area-inset-bottom, 0px));
  }

  /* Capa — barra e Sobre em ecrãs estreitos */
  .btn-link[data-open-sobre] {
    margin-left: clamp(1rem, 5vw, 2.5rem);
  }

  .hero-bar {
    gap: clamp(0.65rem, 3vw, var(--space));
  }

  .sobre-stage {
    padding-top: calc(var(--menu-header-block) + env(safe-area-inset-top, 0px));
    padding-left: max(var(--space), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space), env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 479px) {
  .galeria-main .galeria-category {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  body.is-menu-page-stacked.menu-page .page-gallery.is-visible .page-carousel {
    height: min(46dvh, 320px);
  }
}

/* =========================================================
   História · Poética · Matéria · Designer — só texto
   ========================================================= */
.page--split {
  align-items: flex-start;
  justify-content: flex-start;
}
.split-text {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.5rem;
  min-height: 100%;
  padding: calc(var(--header-h) + var(--space)) var(--space) var(--footer-block);
  overflow-y: auto;
  scrollbar-width: none;
}
.split-text::-webkit-scrollbar { display: none; }

.page--split:has(.text-step-viewport) .split-text,
.menu-page .split-text {
  justify-content: flex-start;
  padding: var(--menu-header-block) var(--space) var(--footer-block);
  overflow: hidden;
  text-align: left;
}

.page--split:has(.text-step-viewport) .prose,
.menu-page .prose {
  gap: 0;
  max-width: 54ch;
}

/* Passos de texto (Sobre, secções do menu) — parágrafos empilhados com scroll por passo */
.text-step-viewport,
.sobre-viewport {
  overflow: hidden;
}

.text-step-track,
.sobre-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.text-step-para,
.sobre-para {
  will-change: opacity, transform;
}

.text-step-para--group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.text-step-para--group > p {
  font-size: inherit;
  line-height: inherit;
}

.sobre-para {
  font-size: var(--text-base);
  line-height: var(--line-height-base);
}

/* Corpo de texto — páginas do menu "+" */
body.menu-page .text-step-para,
body.menu-page .text-step-label,
body.menu-page .prose p,
.menu-page-shell .text-step-para,
.menu-page-shell .text-step-label,
.menu-page-shell .prose p {
  font-size: var(--text-menu);
  line-height: var(--line-height-menu);
}

/* História · Poética · Matéria · Designer — intervalo reduzido entre parágrafos */
body.menu-page .text-step-track > .text-step-para:not(:last-child),
.menu-page-shell .text-step-track > .text-step-para:not(:last-child) {
  padding-bottom: 0.55em;
}

@media screen and (max-width: 479px) {
  body.menu-page .text-step-para,
  .menu-page-shell .text-step-para {
    letter-spacing: 0.25px;
  }
}

.text-step-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-right: 0.35em;
}

/* Secções do menu — mesma duração/easing dos passos do Sobre (--dur-sobre-text, --ease-sobre) */

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-muted);
}
.split-text h2 {
  font-weight: var(--fw-light);
  line-height: var(--line-height-base);
}
.prose { max-width: 46ch; display: flex; flex-direction: column; gap: 1rem; }
.prose p { color: #1a1a1a; }

/* =========================================================
   Páginas com imagem no último passo de texto
   ========================================================= */
.page-photo-main {
  position: relative;
}

.page-photo-main .split-text {
  position: relative;
  z-index: 2;
}

/* Poética / Matéria — galeria clicável por cima do texto no último passo */
.page-photo-main:has(.page-gallery.is-visible) .split-text {
  pointer-events: none;
}

.designer-photo,
.historia-photo,
.materia-photo,
.poetica-photo,
.page-photo {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-sobre-text) var(--ease-sobre),
              visibility 0s linear var(--dur-sobre-text);
}

.designer-photo.is-visible,
.historia-photo.is-visible,
.materia-photo.is-visible,
.poetica-photo.is-visible,
.page-photo.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-sobre-text) var(--ease-sobre), visibility 0s;
}

.designer-photo__placeholder,
.historia-photo__placeholder,
.materia-photo__placeholder,
.poetica-photo__placeholder,
.page-photo__placeholder {
  display: block;
  width: min(38vw, 260px);
  aspect-ratio: 3 / 4;
  max-height: calc(100dvh - var(--header-h) - var(--footer-block) - 2rem);
  background: #ececec;
}

.designer-photo img,
.historia-photo img,
.materia-photo img,
.poetica-photo img,
.page-photo img {
  display: block;
  width: min(38vw, 260px);
  height: auto;
  max-height: calc(100dvh - var(--header-h) - var(--footer-block) - 2rem);
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .designer-photo,
  .historia-photo,
  .materia-photo,
  .poetica-photo,
  .page-photo,
  .designer-photo.is-visible,
  .historia-photo.is-visible,
  .materia-photo.is-visible,
  .poetica-photo.is-visible,
  .page-photo.is-visible {
    transition: none;
  }
}

/* Smartphone: imagem abaixo do texto (sem sobreposição) */
@media (max-width: 768px) {
  body.is-menu-page-stacked.menu-page .page-photo-main {
    flex-direction: column-reverse;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.is-menu-page-stacked.menu-page .page-photo-main::-webkit-scrollbar {
    display: none;
  }

  body.is-menu-page-stacked.menu-page .page-photo-main .split-text {
    position: static;
    z-index: auto;
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
  }

  body.is-menu-page-stacked.menu-page .designer-photo,
  body.is-menu-page-stacked.menu-page .historia-photo,
  body.is-menu-page-stacked.menu-page .materia-photo,
  body.is-menu-page-stacked.menu-page .page-gallery,
  body.is-menu-page-stacked.menu-page .poetica-photo,
  body.is-menu-page-stacked.menu-page .page-photo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition: opacity var(--dur-sobre-text) var(--ease-sobre),
                max-height var(--dur-sobre-text) var(--ease-sobre),
                padding var(--dur-sobre-text) var(--ease-sobre),
                visibility 0s linear var(--dur-sobre-text);
  }

  body.is-menu-page-stacked.menu-page .designer-photo.is-visible,
  body.is-menu-page-stacked.menu-page .historia-photo.is-visible,
  body.is-menu-page-stacked.menu-page .materia-photo.is-visible,
  body.is-menu-page-stacked.menu-page .page-gallery.is-visible,
  body.is-menu-page-stacked.menu-page .poetica-photo.is-visible,
  body.is-menu-page-stacked.menu-page .page-photo.is-visible {
    max-height: 120vh;
    min-height: min(48dvh, 400px);
    height: auto;
    width: 100%;
    z-index: 5;
    pointer-events: auto;
    padding: var(--space) var(--space) calc(var(--footer-block) + var(--space));
    transition: opacity var(--dur-sobre-text) var(--ease-sobre),
                max-height var(--dur-sobre-text) var(--ease-sobre),
                padding var(--dur-sobre-text) var(--ease-sobre),
                visibility 0s;
  }

  body.is-menu-page-stacked.menu-page .designer-photo__placeholder,
  body.is-menu-page-stacked.menu-page .historia-photo__placeholder,
  body.is-menu-page-stacked.menu-page .materia-photo__placeholder,
  body.is-menu-page-stacked.menu-page .poetica-photo__placeholder,
  body.is-menu-page-stacked.menu-page .page-photo__placeholder,
  body.is-menu-page-stacked.menu-page .designer-photo img,
  body.is-menu-page-stacked.menu-page .historia-photo img,
  body.is-menu-page-stacked.menu-page .materia-photo img,
  body.is-menu-page-stacked.menu-page .poetica-photo img,
  body.is-menu-page-stacked.menu-page .page-photo img,
  body.is-menu-page-stacked.menu-page .page-carousel__item img {
    width: min(85vw, 320px);
    max-height: none;
    object-fit: contain;
  }
}

/* =========================================================
   Poética / Matéria — carrossel no último passo de texto
   ========================================================= */
.page-gallery {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(92vw, 560px);
  height: min(52dvh, calc(100dvh - var(--header-h) - var(--footer-block) - 2rem));
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-sobre-text) var(--ease-sobre),
              visibility 0s linear var(--dur-sobre-text);
}

.page-gallery.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 5;
  transition: opacity var(--dur-sobre-text) var(--ease-sobre), visibility 0s;
}

.page-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.5vw, 0.85rem);
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.page-carousel__nav {
  flex: none;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: var(--text-nav);
  line-height: 1;
  color: #1a1a1a;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.page-carousel__nav:hover {
  opacity: 0.75;
}

.page-carousel__viewport {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.page-carousel__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.page-carousel__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.page-carousel__item.is-active {
  cursor: pointer;
}

.page-carousel__frame {
  display: block;
  width: 100%;
  height: 100%;
}

.page-carousel__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.page-carousel__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #ececec;
}

@media (prefers-reduced-motion: reduce) {
  .page-gallery,
  .page-gallery.is-visible,
  .page-carousel__track {
    transition: none;
  }
}

/* =========================================================
   Galeria — fila vertical, foco ao centro (ref. serenacongiu.com)
   ========================================================= */
.galeria-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.galeria-main .galeria-layout {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
  padding: 0 var(--space);
  overflow: hidden;
}

/* Categorias — Aetherius à esquerda, Tondela à direita, centradas verticalmente */
.galeria-main .galeria-categories {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space);
  pointer-events: none;
}

.galeria-main .galeria-category {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-nav);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  opacity: 0.35;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.galeria-main .galeria-category[data-galeria-filter="tondela"] {
  text-align: right;
}

.galeria-main .galeria-category.is-active {
  opacity: 1;
}

.galeria-main .galeria-stack {
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

.galeria-main .galeria-stack__viewport {
  width: 100%;
  height: 100%;
  max-width: min(72vw, 420px);
  overflow: hidden;
  position: relative;
  transform-origin: center center;
  will-change: opacity, transform;
}

.galeria-main .galeria-stack__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  will-change: transform;
}

.galeria-main .galeria-stack__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transform-origin: center center;
}

.galeria-main .galeria-stack__item.is-clone {
  pointer-events: none;
}

.galeria-main .galeria-stack__frame {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

.galeria-main .galeria-stack__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.galeria-main .galeria-stack__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #ececec;
}

.galeria-main .galeria-fullscreen,
.poetica-main .galeria-fullscreen,
.materia-main .galeria-fullscreen {
  --dur-galeria-fs-open: 1400ms;
  --dur-galeria-fs-close: 900ms;
  --ease-galeria-fs: ease;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  perspective: 1200px;
  transition: opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs),
              visibility 0s linear var(--dur-galeria-fs-close);
}

.galeria-main .galeria-fullscreen.is-open,
.galeria-main .galeria-fullscreen.is-closing,
.poetica-main .galeria-fullscreen.is-open,
.poetica-main .galeria-fullscreen.is-closing,
.materia-main .galeria-fullscreen.is-open,
.materia-main .galeria-fullscreen.is-closing {
  visibility: visible;
}

.galeria-main .galeria-fullscreen.is-open,
.poetica-main .galeria-fullscreen.is-open,
.materia-main .galeria-fullscreen.is-open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-galeria-fs-open) var(--ease-galeria-fs), visibility 0s;
}

.galeria-main .galeria-fullscreen.is-closing,
.poetica-main .galeria-fullscreen.is-closing,
.materia-main .galeria-fullscreen.is-closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs),
              visibility 0s linear var(--dur-galeria-fs-close);
}

.galeria-main .galeria-fullscreen__stage,
.poetica-main .galeria-fullscreen__stage,
.materia-main .galeria-fullscreen__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--header-h) var(--space);
  transform: scale(0.96) translateZ(-24px);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform var(--dur-galeria-fs-close) var(--ease-galeria-fs),
              opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs);
}

.galeria-main .galeria-fullscreen.is-open .galeria-fullscreen__stage,
.poetica-main .galeria-fullscreen.is-open .galeria-fullscreen__stage,
.materia-main .galeria-fullscreen.is-open .galeria-fullscreen__stage {
  transform: scale(1) translateZ(0);
  opacity: 1;
  transition: transform var(--dur-galeria-fs-open) var(--ease-galeria-fs),
              opacity var(--dur-galeria-fs-open) var(--ease-galeria-fs);
}

.galeria-main .galeria-fullscreen.is-closing .galeria-fullscreen__stage,
.poetica-main .galeria-fullscreen.is-closing .galeria-fullscreen__stage,
.materia-main .galeria-fullscreen.is-closing .galeria-fullscreen__stage {
  transform: scale(0.98) translateZ(-12px);
  opacity: 0;
  transition: transform var(--dur-galeria-fs-close) var(--ease-galeria-fs),
              opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs);
}

.galeria-main .galeria-fullscreen__img,
.poetica-main .galeria-fullscreen__img,
.materia-main .galeria-fullscreen__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.galeria-main .galeria-fullscreen__placeholder,
.poetica-main .galeria-fullscreen__placeholder,
.materia-main .galeria-fullscreen__placeholder {
  width: min(88vw, 720px);
  aspect-ratio: 3 / 4;
  max-height: calc(100dvh - var(--header-h) * 2);
  background: #ececec;
}

.galeria-main .galeria-fullscreen__close,
.poetica-main .galeria-fullscreen__close,
.materia-main .galeria-fullscreen__close {
  position: fixed;
  top: var(--galeria-close-top, calc(var(--menu-header-pad-top) + (var(--header-h) - 1.5em) / 2));
  left: var(--galeria-close-left, auto);
  right: var(--space);
  z-index: 2;
  width: var(--galeria-close-size, 1.5em);
  height: var(--galeria-close-size, 1.5em);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--color-fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs);
}

.galeria-main .galeria-fullscreen.is-open .galeria-fullscreen__close,
.poetica-main .galeria-fullscreen.is-open .galeria-fullscreen__close,
.materia-main .galeria-fullscreen.is-open .galeria-fullscreen__close {
  opacity: 1;
  transition: opacity var(--dur-galeria-fs-open) var(--ease-galeria-fs);
}

.galeria-main .galeria-fullscreen.is-closing .galeria-fullscreen__close,
.poetica-main .galeria-fullscreen.is-closing .galeria-fullscreen__close,
.materia-main .galeria-fullscreen.is-closing .galeria-fullscreen__close {
  opacity: 0;
  transition: opacity var(--dur-galeria-fs-close) var(--ease-galeria-fs);
}

body.galeria-fullscreen-open {
  overflow: hidden;
}

body.galeria-fullscreen-open .site-header,
body.galeria-fullscreen-open .site-footer,
body.galeria-fullscreen-open .page-gallery,
body.galeria-fullscreen-open .split-text,
body.galeria-fullscreen-open .galeria-main .galeria-layout {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .galeria-main .galeria-fullscreen,
  .galeria-main .galeria-fullscreen__stage,
  .galeria-main .galeria-fullscreen__close,
  .poetica-main .galeria-fullscreen,
  .poetica-main .galeria-fullscreen__stage,
  .poetica-main .galeria-fullscreen__close,
  .materia-main .galeria-fullscreen,
  .materia-main .galeria-fullscreen__stage,
  .materia-main .galeria-fullscreen__close {
    transition: none;
  }

  .galeria-main .galeria-fullscreen__stage,
  .poetica-main .galeria-fullscreen__stage,
  .materia-main .galeria-fullscreen__stage {
    transform: none;
  }
}

@media screen and (max-width: 768px) {
  body.is-menu-page-stacked.menu-page .galeria-main .galeria-layout,
  .menu-page-shell.menu-page .galeria-main .galeria-layout {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 var(--space) env(safe-area-inset-bottom, 0px);
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
  }

  body.is-menu-page-stacked.menu-page .galeria-main .galeria-categories,
  .menu-page-shell.menu-page .galeria-main .galeria-categories {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    order: -1;
    width: 100%;
    padding: 0.25rem 0 0.5rem;
    pointer-events: auto;
  }

  .galeria-main .galeria-stack {
    flex: 1;
    min-height: min(52dvh, 420px);
    height: auto;
    touch-action: pan-y pinch-zoom;
  }

  .galeria-main .galeria-stack__viewport {
    max-width: min(92vw, 360px);
    min-height: min(44dvh, 340px);
  }
}

.specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  max-width: 44rem;
}
.specs > div { background: var(--color-bg); padding: 1rem 1.1rem; }
.specs dt { text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); }
.specs dd { margin-top: 0.35rem; }

@media (max-width: 860px) {
  .specs { grid-template-columns: 1fr; }
}

/* =========================================================
   05 — Fotografia full-bleed
   ========================================================= */
.page--full { padding: 0; }
.page--full img { width: 100%; height: 100%; }

/* =========================================================
   Overlay (Sobre) — texto por cima da fotografia
   ========================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  visibility: hidden;
  transition: transform var(--dur-sobre-text) var(--ease-sobre), visibility 0s linear var(--dur-sobre-text);
  will-change: transform;
  pointer-events: none; /* o texto é visual; "Fechar" fica clicável por baixo */
  color: #fff;
}

/* Abrir: texto visível desde o 1.º frame do slide (sem atrasar visibility) */
.overlay.is-open {
  transition: transform var(--dur-sobre-text) var(--ease-sobre), visibility 0s;
}

/* Fechar: painel e texto com duração de saída mais longa */
.overlay.is-closing {
  transition: transform var(--dur-sobre-text-close) var(--ease-sobre),
              visibility 0s linear var(--dur-sobre-text-close);
}

/* Mantém a barra (Aetherius · Fechar · +) acima do overlay e clicável */
body.sobre-is-open .hero-content {
  z-index: 70;
}
.overlay--top { transform: translateY(-100%); }   /* "Sobre" surge de cima */
.overlay.is-open { transform: translateY(0); visibility: visible; }
.overlay.is-closing { visibility: visible; pointer-events: none; }

.overlay-scroll {
  flex: 1; overflow: hidden;
  pointer-events: auto;
}

.sobre-stage {
  max-width: 80ch;
  padding: calc(var(--header-h) - 2.5rem) var(--space) var(--space) var(--sobre-x, var(--space));
  text-align: left;
}

.overlay.is-open:not(.is-closing) .sobre-stage {
  opacity: 1;
  transition: none;
}

.overlay.is-closing .sobre-stage {
  opacity: 0;
  transition: opacity var(--dur-sobre-text-close) var(--ease-sobre);
}

/* Capa — Sobre: mesmo corpo de texto e passos (modo pilha) das páginas do menu "+" */
.overlay .sobre-para {
  font-size: var(--text-menu);
  line-height: var(--line-height-menu);
  color: #ffffff;
}

.sobre-track > .sobre-para:not(:last-child) {
  padding-bottom: 0.55em;
}


/* Acessibilidade — reduz movimento */
@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  #hero .hero-bar .brand,
  #hero .hero-bar .menu-toggle {
    transition: none;
  }

  body.sobre-is-open .hero-media img {
    filter: none;
    transform: none;
  }

  .hero-media::after {
    transition: none;
  }

  body.sobre-is-open #hero .hero-bar .brand,
  body.sobre-is-open #hero .hero-bar .menu-toggle {
    filter: none;
  }

  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .pages { scroll-behavior: auto; }
  .page.is-entering,
  .page.is-exiting,
  .menu-page-shell.is-entering,
  .menu-page-shell.is-exiting,
  .menu-page-main.is-crossfade-out,
  .menu-page-main.is-crossfade-in,
  .site-footer.is-crossfade-in,
  .site-footer.is-crossfade-out,
  #hero .hero-bar .header-left,
  .site-header:not(.is-hidden) .header-left,
  body.menu-page .menu-page-header .header-left,
  body.menu-page .menu-page-header .menu-toggle { transition: none; opacity: 1; max-width: 100%; }
  .page.is-exiting-fixed,
  .page.is-entering-fixed,
  .menu-page-shell.is-exiting-fixed,
  .menu-page-shell.is-entering-fixed { position: static; }
}