/* ==========================================================================
   Tokens (Figma: portfolio-2025 / 1440w)
   ========================================================================== */
:root {
	--color-black: #020202;
	--color-title-light: #cfccc9;
	--color-bg: #f2f2f2;
	--color-scramble: #a6a6a6;

	/* easing global (= GSAP "expo.out" usado nas animações) */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-hover: .8s;
	--color-white: #ffffff;

	--font-heading: "Anton", Impact, "Arial Narrow", sans-serif;
	--font-paragraph: "Space Grotesk", system-ui, sans-serif;

	/* 1 unidade do Figma (frame de 1440px), reduz proporcionalmente abaixo de 1440 */
	--u: min(1px, 100vw / 1440);

	--gutter: calc(120 * var(--u));

	/* altura da área visível (descontando a barra do admin do WP, se houver) */
	--screen-h: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	--spacer-xl: calc(160 * var(--u));
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-black);
	font-family: var(--font-paragraph);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }

/* evita palavra sozinha (viúva) na última linha dos blocos de texto */
h1, h2, h3, h4, p, li, blockquote, figcaption { text-wrap: pretty; }
ul { list-style: none; }
a { color: inherit; }

/* ==========================================================================
   Motion de texto (assets/js/main.js → initTextMotion)
   Escondido só até o JS assumir; se o JS falhar, aparece após 3s.
   ========================================================================== */
/* máscara das linhas com folga vertical: não corta acentos nem a sobra
   de letras redondas (O, G, S) que passam da linha */
[data-motion="title"] > div {
	padding-block: .15em;
	/* compensa a folga sem somar entre linhas: margens negativas de irmãos
	   colapsam, então a compensação toda vai na margem de baixo */
	margin-block: 0 -.3em;
}
[data-motion="title"] > div:first-child { margin-top: -.15em; }
[data-motion="title"] > div:last-child { margin-bottom: -.15em; }

.motion [data-motion] {
	visibility: hidden;
	animation: motion-fallback 0s 3s forwards;
}
@keyframes motion-fallback { to { visibility: visible; } }

/* Tela preta inicial da home (some na entrada; se o JS falhar, some em 4s) */
.site-curtain { display: none; }
.motion .site-curtain {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--color-black);
	pointer-events: none;
	animation: curtain-fallback .6s 4s forwards;
}
@keyframes curtain-fallback { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   Header / nav
   ========================================================================== */
/* Menu flutuante, sem fundo: branco em difference fica preto sobre branco
   e branco sobre preto. Fica acima do painel do menu (o X no mesmo lugar). */
.site-nav {
	position: fixed;
	top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
	right: 16px;
	z-index: 70;
	mix-blend-mode: difference;
}
/* Nome no topo à esquerda (fonte de título): rolando fica só o "M";
   parado ou com o mouse no topo abre inteiro (main.js initLogo) */
.site-logo {
	position: fixed;
	top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
	left: 16px;
	z-index: 70;
	display: flex;
	align-items: center;
	height: 40px;
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
	mix-blend-mode: difference;
}
.site-logo__m { display: inline-block; } /* escala ao fechar (JS) */
.site-logo__part {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
/* botão 40px; linhas = ícone sort-down ampliado (30/20/10px, 3px de espessura) */
.site-nav__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.site-nav__icon {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
}
/* MENU | FECHAR: as duas palavras na mesma célula, numa máscara; ao abrir,
   MENU sobe e sai, FECHAR entra por baixo (mesma curva do site) */
.site-nav__text {
	display: grid;
	justify-items: end;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.site-nav__text > span {
	grid-area: 1 / 1;
	transition: transform var(--dur-hover) var(--ease-out);
}
.site-nav__text > [data-state="open"] { transform: translateY(110%); }
.site-nav__toggle[aria-expanded="true"] [data-state="closed"] { transform: translateY(-110%); }
.site-nav__toggle[aria-expanded="true"] [data-state="open"] { transform: none; }
.site-nav__line {
	position: absolute;
	left: 5px;
	height: 3px;
	border-radius: 2px;
	background: #fff;
}
.site-nav__line[data-line="top"] { top: 10px; width: 30px; }
.site-nav__line[data-line="mid"] { top: 18.5px; width: 20px; }
.site-nav__line[data-line="bot"] { top: 27px; width: 10px; }

/* Menu: painel na metade direita, por cima de tudo, entra da direita */
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	visibility: hidden;
	pointer-events: none;
}
.site-menu.is-open { visibility: visible; pointer-events: auto; }
.site-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, .45);
	opacity: 0;
	cursor: pointer;
}
.site-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 48px;
	padding: 96px max(var(--gutter), 64px);
	background: #000; /* preto puro, mais escuro que o do site */
	color: #fff;
	overflow-y: auto;
}
.site-menu__list { list-style: none; }
.site-menu__item a {
	display: flex;
	align-items: flex-start;
	padding: clamp(2px, .5vh, 6px) 0; /* itens próximos, sem linhas entre eles */
	text-decoration: none;
	color: inherit;
}
.site-menu__label {
	display: block;
	font-family: var(--font-heading);
	/* 5 itens: cabe na largura do painel (meia tela) e na altura da tela */
	font-size: clamp(40px, min(4.6vw, 8vh), 80px);
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
.roll-word { display: inline-block; white-space: nowrap; }
/* espaço entre palavras como margem (a divisão em linhas do motion remove
   os espaços de texto entre os spans) */
.roll-word + .roll-word { margin-left: .22em; }
/* nomes dos projetos: mesmo letter roll do menu */
.projects__roll { display: block; }
.projects__link:hover .roll__char,
.projects__link:focus-visible .roll__char { transform: translateY(calc(-100% - .3em)); }
/* letter roll (referência Loop): cada letra numa máscara; a cópia fica logo
   abaixo e sobe no hover, com atraso crescente por letra */
.roll {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* folga em cima para acentos (Ã, É…) não serem cortados pela máscara */
	padding-top: .2em;
	margin-top: -.2em;
}
.roll__char {
	position: relative;
	display: block;
	transition: transform .7s var(--ease-out);
	transition-delay: calc(var(--i) * 25ms);
}
.roll__char::after {
	content: attr(data-char);
	position: absolute;
	/* a cópia fica afastada: o acento dela não aparece por baixo da letra */
	top: calc(100% + .3em);
	left: 0;
}
.site-menu__item a:hover .roll__char,
.site-menu__item a:focus-visible .roll__char { transform: translateY(calc(-100% - .3em)); }
.site-menu__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.site-menu__foot a {
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color var(--dur-hover) var(--ease-out);
}
.site-menu__foot a:hover { color: #fff; }
/* trava o scroll com o menu aberto; o espaço da barra de rolagem fica
   reservado para nada mudar de lugar (o X fica onde estava o botão) */
html { scrollbar-gutter: stable; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Altura = 1 tela + percurso horizontal do "massaru" (via JS) + 1 tela em que
   a intro sobe por cima do hero ainda fixo */
.hero-wrap {
	position: relative;
	height: calc(2 * var(--screen-h) + var(--hero-travel, 0px));
}
.hero {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 0;
	height: var(--screen-h);
	overflow: hidden;
	/* fundo preto; o branco fica só na camada do gráfico, que entra pela
	   direita como formas brancas sobre o preto */
	background: var(--color-black);
}
.hero__inner {
	position: absolute;
	inset: 0;
	will-change: transform;
}

/* Gráfico de fundo: bloco preto + palavra gigante, alinhados à esquerda.
   No scroll desliza para a esquerda até a palavra aparecer inteira. */
.hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--color-white);
}
.hero__bg-flip {
	position: absolute;
	inset: 0;
}
.hero__bg-track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	will-change: transform;
}
.hero__bg-block {
	flex: none;
	align-self: stretch;
	width: calc(397 * var(--u));
	margin-right: calc(-60 * var(--u));
	background: var(--color-black);
}
.hero__bg-text {
	flex: none;
	font-family: var(--font-heading);
	font-size: max(calc(1286 * var(--u)), var(--screen-h) * 1.43);
	line-height: 1;
	text-box: trim-both cap alphabetic;
	color: var(--color-black);
	text-transform: uppercase;
	white-space: nowrap;
}
.hero__photo {
	/* caixa com o mesmo centro do Figma (50% + 190u). A largura nunca fica
	   menor que a altura: em telas altas (iPad) a foto quadrada não é
	   recortada nas laterais (braço) e mantém a mesma escala/posição */
	--photo-h: calc(var(--screen-h) + 212 * var(--u));
	--photo-w: max(calc(1370 * var(--u)), var(--photo-h));
	position: absolute;
	top: 0;
	left: calc(50% + 190 * var(--u) - var(--photo-w) / 2);
	width: var(--photo-w);
	height: var(--photo-h);
}
.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* desktop: quase centralizada como no Figma, só o suficiente para a
	   cabeça não encostar no topo; o zoom do scroll parte do topo */
	object-position: 50% 40%;
	transform-origin: 50% 0;
	/* equivale ao overlay soft-light 20% do Figma, só nos pixels da foto */
	filter: brightness(.9) contrast(1.08);
}

.hero__descript {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px var(--gutter);
	transform: translateY(-50%);
	color: var(--color-title-light);
	mix-blend-mode: difference;
}
.hero__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: max(28px, calc(42 * var(--u)));
	line-height: 1.08;
}
.hero__text {
	width: max(180px, calc(219 * var(--u)));
	font-size: max(13px, calc(16 * var(--u)));
	line-height: 1.25;
}

/* ==========================================================================
   Seções que cobrem o hero
   ========================================================================== */
.intro,
.projects,
.contact {
	position: relative;
	z-index: 1;
	background: var(--color-bg);
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
	margin-top: calc(-1 * var(--screen-h));
	display: flex;
	align-items: center;
	min-height: var(--screen-h);
	padding: 0 var(--gutter);
}
.intro__text {
	font-family: var(--font-heading);
	font-size: max(40px, calc(96 * var(--u)));
	line-height: 1.042;
	color: var(--color-black);
}
/* reveal por letra (JS): oculta até a vez dela; embaralhando mostra um
   caractere aleatório cinza por cima, sem mudar a largura da letra final */
.intro__text .word { white-space: nowrap; }
.intro__text.is-split .char {
	position: relative;
	display: inline-block; /* caixa = altura da linha: o ::after fica na mesma baseline */
	color: transparent;
}
.intro__text.is-split .char.is-done { color: var(--color-black); }
.intro__text.is-split .char[data-s]::after {
	content: attr(data-s);
	position: absolute;
	inset: 0 auto auto 0;
	line-height: inherit;
	color: var(--color-scramble);
}

/* ==========================================================================
   Projetos
   ========================================================================== */
.projects {
	--project-size: max(56px, calc(180 * var(--u)));
	display: flex;
	align-items: flex-start;
	gap: calc(80 * var(--u));
	/* depois do último projeto: meia tela de respiro */
	padding: var(--spacer-xl) var(--gutter) calc(var(--screen-h) / 2);
}
.projects__label {
	/* fica fixo enquanto a lista rola (home e páginas de área) */
	position: sticky;
	top: max(100px, calc(120 * var(--u)));
	flex: none;
	padding-top: 8px;
	font-family: var(--font-paragraph);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	width: min-content; /* uma palavra por linha: "Selected / work", "Product / design"… */
}
.projects__list {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: calc(80 * var(--u));
}
.projects__link,
.projects__item--empty {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--project-size);
	line-height: .83;
	letter-spacing: -1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-black);
	opacity: .2;
	transition: opacity var(--dur-hover) var(--ease-out);
}
@supports (text-box: trim-both cap alphabetic) {
	.projects__link, .projects__item--empty { line-height: 1.22; text-box: trim-both cap alphabetic; }
	/* topo das maiúsculas do rótulo alinhado ao topo das letras do 1º nome:
	   o topo do "ORIZ" fica a .174em do topo da lista; o rótulo tem ~3px
	   entre o topo da caixa e o topo das maiúsculas */
	.projects__label { padding-top: calc(var(--project-size) * .174 - 3px); }
}
/* a thumb (z 2) fica por cima de todos os nomes */
.projects__item { position: relative; }

.projects__name { display: block; }
.projects__link:hover,
.projects__link:focus-visible { opacity: 1; }
.projects__thumb { display: none; }
.projects__item--empty { font-size: max(32px, calc(64 * var(--u))); }

/* thumb 4:5 com 70% da altura da tela */
.projects__cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	height: calc(var(--screen-h) * .7);
	aspect-ratio: 4 / 5;
	overflow: visible; /* quadrados do mosaico vêm de fora da tela */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
/* a imagem fica só como referência; o que aparece são os quadrados */
.projects__cursor img { display: none; }
.projects__tile {
	position: absolute;
	background-repeat: no-repeat;
	will-change: transform;
}

/* ==========================================================================
   Contato
   ========================================================================== */
.contact {
	display: flex;
	align-items: flex-end;
	min-height: var(--screen-h); /* altura da tela */
	padding: calc(80 * var(--u)) calc(104 * var(--u));
	overflow: hidden;
	background: var(--color-black);
	color: var(--color-title-light);
}
.contact__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: 40px;
}
.contact__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: max(48px, calc(96 * var(--u)));
	line-height: 1.042;
}
.contact__text {
	font-size: max(20px, calc(32 * var(--u)));
	line-height: 1.375;
}
.contact__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 20px;
}

/* botões (borda clara sobre preto; hover inverte) */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 68px;
	border: 2px solid var(--color-title-light);
	border-radius: 999px;
	color: var(--color-title-light);
	text-decoration: none;
	transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.button--pill { padding: 0 40px; }
.button--icon { width: 68px; }
.button svg { display: block; width: 24px; height: 24px; margin: 4px; }
.button svg path { fill: currentColor; }
.button span {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.button:hover,
.button:focus-visible {
	background: var(--color-title-light);
	color: var(--color-black);
}

/* ==========================================================================
   Página de projeto (Figma "projeto") — topo + blocos do editor
   ========================================================================== */
.project {
	--margin: calc(96 * var(--u));
	/* conteúdo = 70% da seção, máx. 960px → seção máx. 960 / .7 ≈ 1371px;
	   acima disso a margem lateral cresce e os blocos ficam centralizados */
	--inner-max: calc(960px / .7);
	--side: max(var(--margin), calc((100% - var(--inner-max)) / 2));
	--section-gap: calc(80 * var(--u));
	--color-paragraph: #302e2c;
	--color-label: #868079;
	background: var(--color-bg);
	color: var(--color-paragraph);
}

/* capa (imagem destacada): faixa larga no topo com overlay escuro */
/* largura total, na proporção da própria imagem (sem cortar as laterais);
   com JS a moldura esconde uma faixa em cima/embaixo para o parallax */
.project__cover {
	position: relative;
	margin: 0;
	overflow: hidden;
}
.project__cover img {
	display: block;
	width: 100%;
	height: auto;
}


/* topo: nome · chamada grande · categoria (difference = escuro sobre o claro) */
.project__header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--section-gap) var(--side);
	color: var(--color-title-light);
	mix-blend-mode: difference;
}
.project__name {
	font-weight: 400;
	font-size: max(18px, calc(22 * var(--u)));
	line-height: 1.36;
}
.project__headline {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: max(56px, calc(180 * var(--u)));
	line-height: 1.056;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.project__category {
	padding: 8px 0;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
}

/* transição home → projeto: thumb expandindo até a posição da capa */
.page-transition {
	position: fixed;
	z-index: 90;
	overflow: hidden;
	pointer-events: none;
}
.page-transition img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0; /* mesmo recorte da capa: alinhada no topo */
}


/* Próximo projeto (fim da página de projeto): rolar além do fim preenche o
   fundo com a capa do próximo, como uma barra (--p de 0 a 1, main.js
   initNextProject) */
.next-project {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 200px;
	padding: 0 calc(104 * var(--u));
	overflow: hidden;
	background: var(--color-bg);
	color: var(--color-black);
	text-decoration: none;
}
.next-project__media {
	position: absolute;
	inset: 0;
	/* a própria capa é a barra: preenche o fundo da esquerda para a direita */
	clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
.next-project__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}
/* texto em "difference": escuro no fundo claro, claro sobre a capa */
.next-project__info {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	color: #fff;
	mix-blend-mode: difference;
}
.next-project__label,
.next-project__hint {
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.next-project__top {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.next-project__hint { opacity: .6; }
.next-project__name {
	font-family: var(--font-heading);
	font-size: min(max(48px, calc(96 * var(--u))), 96px); /* cabe nos 200px */
	line-height: 1;
	text-transform: uppercase;
}
.next-project:hover .roll__char,
.next-project:focus-visible .roll__char { transform: translateY(calc(-100% - .3em)); }

/* páginas sem capa (áreas, About me): topo com respiro para o menu */
.area-page__header { padding-top: max(140px, calc(240 * var(--u))); }
.area-page__intro {
	max-width: 640px;
	font-size: max(18px, calc(22 * var(--u)));
	line-height: 1.36;
}
/* páginas de área: topo menor, nome da área fixo */
.area-page .projects { padding-top: max(100px, calc(120 * var(--u))); }
.area-page .projects__label { font-family: var(--font-paragraph); }

/* About me — 1) parte clara: foto à esquerda (sem margem, do topo) e a
   apresentação grande por cima dela em "difference" (clara sobre a foto,
   escura sobre o fundo); 2) parte escura com as colunas da página de projeto */
.about__intro {
	position: relative;
	/* texto maior que a tela: a página rola normalmente enquanto ele se revela */
	padding: 0 var(--gutter) calc(var(--screen-h) * .4);
}
/* 1ª linha ("Olá.") centralizada na tela ao abrir: meia tela menos meia linha */
.about__lead.intro__text { margin-top: calc(var(--screen-h) * .5 - .521em); }
/* foto fixa: fica parada enquanto o texto rola por cima; a parte escura
   (abaixo) passa por cima dela */
.about__photo {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(628 / 1440 * 100%);
	height: var(--screen-h);
	margin: 0;
	overflow: hidden;
}
.about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}
.about__text {
	position: relative;
	z-index: 1;
	color: #fff;
}
/* o "difference" fica na seção (que é fixada pelo pin e vira um contexto
   próprio): assim o texto se mistura com a foto e o fundo da página */
.about__intro { z-index: 1; mix-blend-mode: difference; }
/* tipografia e revelação = .intro__text (classe no próprio <p>); aqui só a
   cor: branca em "difference" (escura no fundo claro, clara sobre a foto) */
.about__lead.intro__text,
.about__lead.intro__text.is-split .char.is-done { color: inherit; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.about__more {
	position: relative;
	z-index: 2;
	--color-paragraph: #fdfffd;
	--color-label: #9a9a9a;
	padding-block: var(--section-gap);
	background: var(--color-black); /* mesmo preto do bloco de contato */
	color: var(--color-paragraph);
}
.about__more .project__content .is-style-titulo-secao,
.about__more .project__content .is-style-titulo-secao-anton,
.about__more .project__content .is-style-subtitulo-secao { color: #fdfffd; }

/* Grupo › Logos: grade de logos (marcas, agências) */
.project__content .wp-block-group.is-style-logos,
.project__content .wp-block-group.is-style-logos > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 40px 24px;
	align-items: center;
}
.project__content .wp-block-group.is-style-logos:has(> .wp-block-group__inner-container) { display: block; }
.project__content .wp-block-group.is-style-logos .wp-block-image { margin: 0; overflow: visible; }
.project__content .wp-block-group.is-style-logos img {
	width: 100%;
	max-width: 120px;
	height: auto;
	margin-inline: auto;
}

/* conteúdo: blocos empilhados sem margem; textos soltos respeitam a margem */
.project__content > * { margin-block: 0; }
.project__content > :not(.alignfull):not(.alignwide):not(.wp-block-columns):not(.video-embed):not(.is-style-video) {
	margin-inline: var(--side);
}
.project__content img { display: block; max-width: 100%; height: auto; }
.project__content p { font-size: 18px; line-height: 24px; }
.project__content :is(p, h2, h3) + :is(p, h2, h3) { margin-top: 24px; }
.project__content a:not(.wp-block-button__link) { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.project__content .alignfull { width: 100%; max-width: none; }
.project__content .alignfull img { width: 100%; }
.project__content .alignwide {
	width: min(calc(100% - 2 * var(--margin)), calc(998 * var(--u) + 120px), var(--inner-max));
	margin: var(--section-gap) auto;
}
/* zoom de entrada da imagem não vaza da moldura */
.project__content .wp-block-image { overflow: hidden; }
.project__content .alignwide img { width: 100%; }

/* Imagem › Capa: faixa larga de 600px com overlay escuro */
.project__content .wp-block-image.is-style-capa { /* capa antiga como bloco (compatibilidade) */
	position: relative;
	height: max(320px, calc(600 * var(--u)));
	overflow: hidden;
}
.project__content .wp-block-image.is-style-capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project__content .wp-block-image.is-style-capa::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, .25);
	pointer-events: none;
}

/* Colunas › Seção: título (400px) + conteúdo */
.project__content .wp-block-columns.is-style-secao {
	display: grid;
	/* conteúdo com 70% da largura da seção; o título ocupa o resto */
	grid-template-columns: minmax(0, 1fr) 70%;
	gap: 24px;
	margin: 0;
	padding: var(--section-gap) var(--side);
}
.project__content .wp-block-columns.is-style-secao > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.project__content .wp-block-column > * { margin: 0; }
.project__content .wp-block-column > :is(p, h2, h3) + :is(p, h2, h3) { margin-top: 0; }

/* Parágrafos: títulos de seção, destaque e ficha */
/* títulos das seções, 2 níveis (fonte do conteúdo, sem bold):
   nível 1 maior (32/44), nível 2 no tamanho do texto (18/24) */
.project__content .is-style-titulo-secao,
.project__content .is-style-titulo-secao-anton,
.project__content .is-style-subtitulo-secao {
	font-family: var(--font-paragraph);
	font-weight: 400;
	text-transform: none;
	color: var(--color-black);
}
.project__content .is-style-titulo-secao,
.project__content .is-style-titulo-secao-anton {
	font-size: max(24px, calc(32 * var(--u)));
	line-height: 1.375;
}
.project__content .is-style-subtitulo-secao {
	font-size: 18px;
	line-height: 24px;
	padding-top: 10px; /* desce um pouco em relação ao conteúdo ao lado */
}
.project__content p.is-style-destaque {
	font-size: max(24px, calc(32 * var(--u)));
	line-height: 1.375;
}
/* Ficha: 1ª linha = cargo/rótulo em cinza, 14px; nomes também em 14px
   (a mini ficha do Overview, em colunas, mantém os valores no tamanho do texto) */
.project__content p.is-style-ficha::first-line { color: var(--color-label); font-size: 14px; }
.project__content p.is-style-ficha { font-size: 14px; line-height: 20px; }
.project__content .wp-block-columns.is-style-ficha p.is-style-ficha { font-size: inherit; line-height: inherit; }

/* Colunas › Ficha: mini ficha em 3 colunas */
.project__content .wp-block-columns.is-style-ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 40px 0 16px;
}

/* Colunas › Imagens lado a lado: largura total, sem espaço entre elas */
.project__content .wp-block-columns.is-style-imagens,
.project__content .wp-block-columns.is-style-imagens-estaticas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	margin: 0;
}
.project__content .wp-block-columns.is-style-imagens img,
.project__content .wp-block-columns.is-style-imagens-estaticas img { width: 100%; }

/* Colunas › Galeria: grade com espaço, dentro das margens, até 4 por linha */
.project__content .wp-block-columns.is-style-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(200px, 22%), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0 var(--side);
}
/* espaço da galeria: galerias seguidas formam uma grade só (24px entre elas);
   antes/depois de imagens, vídeos etc. ganha o respiro de seção (as seções
   de texto já têm o próprio respiro) */
.project__content .wp-block-columns.is-style-galeria + .wp-block-columns.is-style-galeria { margin-top: 24px; }
.project__content .wp-block-columns.is-style-galeria:not(.is-style-secao + .is-style-galeria):not(.is-style-galeria + .is-style-galeria) {
	margin-top: var(--section-gap);
}
.project__content .wp-block-columns.is-style-galeria:not(:has(+ .is-style-secao)):not(:has(+ .is-style-galeria)) {
	margin-bottom: var(--section-gap);
}
.project__content .wp-block-columns.is-style-galeria > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.project__content .wp-block-columns.is-style-galeria img { width: 100%; }

/* Vídeo (Vimeo) em 16:9, largura total */
.project__content .video-embed {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--color-black);
}
.project__content .video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Grupo › Vídeo: 90% da altura da tela, fundo escolhido no painel do grupo
   (sem cor escolhida = preto), vídeo 16:9 centralizado e o maior possível */
.project__content .wp-block-group.is-style-video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--screen-h) * .9);
	margin: 0;
	padding: 0;
}
.project__content .wp-block-group.is-style-video:not(.has-background) { background: var(--color-black); }
.project__content .wp-block-group.is-style-video > * { margin: 0; }
/* tema clássico: o grupo envolve o conteúdo num __inner-container */
.project__content .wp-block-group.is-style-video > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.project__content .wp-block-group.is-style-video .video-embed,
.project__content .wp-block-group.is-style-video .wp-block-embed {
	width: min(100%, calc(var(--screen-h) * .9 * 16 / 9));
	aspect-ratio: 16 / 9;
	background: transparent;
}

/* Vídeo/embeds */
.project__content .wp-block-embed iframe,
.project__content .wp-block-video video { display: block; width: 100%; }

/* Botões do conteúdo (ex.: "Ver projeto") — pill escuro sobre o claro */
.project__content .wp-block-buttons { padding-top: 16px; }
.project__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 68px;
	padding: 0 40px;
	border: 2px solid var(--color-black);
	border-radius: 999px;
	background: transparent;
	color: var(--color-black);
	font-family: var(--font-paragraph);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
/* link para fora do site (nova aba): seta ↗ depois do texto */
.project__content .wp-block-button__link[target="_blank"]::after {
	content: "\2197";
	margin-left: .5em;
	letter-spacing: 0;
}
.project__content .wp-block-button__link:hover,
.project__content .wp-block-button__link:focus-visible {
	background: var(--color-black);
	color: var(--color-bg);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
	:root { --gutter: 20px; --spacer-xl: 96px; }

	.site-nav { right: var(--gutter); } /* alinhado à margem de 20px do texto */
	.site-logo { left: var(--gutter); }
	.site-menu__panel { width: 100%; padding: 96px var(--gutter); }
	.site-menu__label { font-size: 54px; } /* maior possível: "Product design" ainda em 1 linha */

	/* Hero mobile (Figma 360w): gráfico numa caixa de 720px centrada em
	   50% + 188px; medidas em px como no frame (sem o espelhamento do Figma) */
	.hero__bg-flip {
		inset: 0 auto;
		left: calc(50% + 188px - 360px);
		width: 720px;
	}
	/* sem espelhar, desloca a palavra para o "M" formar a mesma leitura do
	   Figma: haste preta na borda esquerda, cunha branca à esquerda e o vão
	   branco no topo à direita */
	.hero__bg-track { left: -560px; }
	.hero__bg-block {
		width: 397px;
		margin-right: -60px;
	}
	.hero__bg-text { font-size: calc(var(--screen-h) * 1.43); }

	.hero__photo {
		top: -40px;
		left: calc(50% + 69px - 526px);
		width: 1052px;
		height: calc(100% + 85px);
	}
	/* mobile: ancorada no topo para a cabeça não ser cortada */
	.hero__img { object-position: 50% 0; }
	.hero__descript {
		top: auto;
		bottom: 30px;
		transform: none;
		width: 100%;
		padding: 40px var(--gutter);
	}
	.hero__title {
		font-size: 42px;
		line-height: 1.05;
	}
	.hero__text {
		width: 219px;
		font-size: 16px;
		line-height: 1.25;
	}
	/* Projetos mobile (Figma 360w): card 4:5 com a thumb e o nome embaixo */
	.projects { flex-direction: column; gap: 80px; padding-top: 80px; padding-bottom: 80px; }
	.projects .projects__label { position: static; padding-top: 8px; }
	.projects__list { width: 100%; gap: 50px; }
	.projects__link {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		aspect-ratio: 4 / 5;
		padding: 20px;
		overflow: hidden;
		background: #bebab7;
		opacity: 1;
	}
	.projects__cursor { display: none; }
	.projects__thumb {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* nome no card: branco, sem transparência nem efeito de hover */
	.projects__name {
		position: relative;
		font-size: 48px;
		line-height: 56px;
		color: #fff;
	}
	.projects__link:hover .roll__char,
	.projects__link:focus-visible .roll__char { transform: none; }

	/* About mobile: foto em cima (largura toda), apresentação sobe por cima */
	.about__intro { min-height: 0; padding: 0 0 120px; }
	.about__photo { position: relative; width: 100%; height: 75vh; }
	.about__text { margin-top: -96px; padding: 0 var(--gutter); }
	.about__lead.intro__text { margin-top: 0; }

	/* Projeto mobile: margens de 20px e seções empilhadas */
	.project { --margin: var(--gutter); --section-gap: 56px; }
	.project__content .wp-block-columns.is-style-secao { grid-template-columns: 1fr; }
	/* vídeos mobile: largura total, sem a faixa de 90% da tela em volta */
	.project__content .wp-block-group.is-style-video { height: auto; }
	.project__content .wp-block-group.is-style-video .video-embed,
	.project__content .wp-block-group.is-style-video .wp-block-embed { width: 100%; }
	/* capa mobile com 600px de altura (recortada); a imagem tem a folga do
	   parallax (COVER_MASK = 8%, main.js), então a moldura fica em 600px */
	.project__cover img { height: calc(600px / .92); object-fit: cover; object-position: 50% 0; }
	.project__content .is-style-subtitulo-secao { padding-top: 0; } /* empilhado: sem o recuo */
	.project__content .alignwide { width: calc(100% - 2 * var(--gutter)); }

	/* Intro mobile (Figma 360w): 32/44, ocupa a altura da tela */
	.intro { height: var(--screen-h); }
	.intro__text {
		font-size: 44px; /* mesmo tamanho da apresentação do About */
		line-height: 1.05;
	}
	.contact { padding: 80px var(--gutter); }
	.button--pill { padding: 0 24px; }
}

@media (hover: none) {
	.projects__cursor { display: none; }
}