/* link.arq: páginas públicas. A raiz de cada página tem as classes "larq t-<modelo>". */

.larq, .larq *, .larq *::before, .larq *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.larq { margin: 0; min-height: 100vh; }
.larq {
	--cta-texto: #fff;
	--raio: 0;
	--raio-card: 0;
	--raio-soc: 0;
	--f-meta: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
	--curva: cubic-bezier(.2, .8, .2, 1);
	container-type: inline-size;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--f-corpo);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
:where(.larq) img { display: block; max-width: 100%; }
:where(.larq) svg { display: block; }
:where(.larq) a { color: inherit; text-decoration: none; }
:where(.larq) :focus-visible { outline: 2px solid var(--caneta); outline-offset: 3px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Modelos ===================================================== */

/* Carimbo: suíço, papel claro, botões em cinza grafite */
.t-carimbo {
	--papel: #F4F4F1; --superficie: #E9E9E4; --tinta: #141414; --grafite: #75756E; --linha: #DBDBD4; --caneta: #75756E;
	--f-titulo: 'Geist', system-ui, sans-serif;
	--f-corpo: 'Geist', system-ui, sans-serif;
}
/* Concreto: concreto aparente, verde musgo, placas arredondadas */
.t-concreto {
	--papel: #BDB9B1; --superficie: #CFCBC4; --tinta: #181715; --grafite: #4F4C47; --linha: #A29E95; --caneta: #39482A;
	--raio: 10px; --raio-card: 12px; --raio-soc: 50%;
	--f-titulo: 'Instrument Sans', system-ui, sans-serif;
	--f-corpo: 'Instrument Sans', system-ui, sans-serif;
}
/* Nanquim: galeria escura, portfólio em primeiro lugar */
.t-nanquim {
	--papel: #0A0A0A; --superficie: #171716; --tinta: #F4F4F0; --grafite: #8C8C86; --linha: #262624; --caneta: #F4F4F0;
	--cta-texto: #0A0A0A;
	--f-titulo: 'Unbounded', system-ui, sans-serif;
	--f-corpo: 'Geist', system-ui, sans-serif;
}
/* Jardim: verde de mata, barro cozido, formas arredondadas */
.t-jardim {
	--papel: #1E3527; --superficie: #284634; --tinta: #E4EBDD; --grafite: #A3B39C; --linha: #3C5C48; --caneta: #B5653A;
	--cta-texto: #F6EFE6;
	--raio: 999px; --raio-card: 1.25rem; --raio-soc: 50%;
	--f-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
	--f-corpo: 'Bricolage Grotesque', system-ui, sans-serif;
}

/* Pátio: capa no topo, cores claras e três paletas (Sálvia é a padrão) */
.t-patio {
	--papel: #F3F4EF; --superficie: #FFFFFF; --suave: #E7EAE1; --tinta: #1F2A22; --grafite: #66726A; --linha: #DADFD3; --caneta: #5E7A62;
	--cta-texto: #FFFFFF;
	--raio: 16px; --raio-card: 16px; --raio-soc: 50%;
	--f-titulo: 'Outfit', system-ui, sans-serif;
	--f-corpo: 'Outfit', system-ui, sans-serif;
}
.t-patio.p-areia { --papel: #F6F2EC; --suave: #EDE6DB; --tinta: #2B241E; --grafite: #766B5F; --linha: #E2D9CB; --caneta: #9C5F3C; }
.t-patio.p-nevoa { --papel: #F1F3F5; --suave: #E4E9ED; --tinta: #1D2630; --grafite: #636E79; --linha: #D6DCE2; --caneta: #3F6C8C; }

/* ===== Estrutura comum ============================================= */

.pg {
	max-width: 34rem;
	margin: 0 auto;
	padding: max(2.25rem, env(safe-area-inset-top)) 1.25rem 2.5rem;
	display: flex;
	flex-direction: column;
}
.aviso { background: var(--tinta); color: var(--papel); font-size: .85rem; padding: .6rem .8rem; margin: 0 0 1.5rem; }

/* Cabeçalho */
.cab { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.1rem; }
.cab-foto { width: 4.5rem; height: 4.5rem; object-fit: cover; background: var(--linha); border-radius: var(--raio-foto, 0); }
.nome {
	font-family: var(--f-titulo); font-weight: 600; margin: 0;
	font-size: clamp(2.3rem, 10.5cqi, 3.3rem); line-height: .98; letter-spacing: -.045em;
	text-wrap: balance;
}
.nome .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.nome .w > span { display: inline-block; }
.esp { margin: .75rem 0 0; font-family: var(--f-meta); font-size: .78rem; line-height: 1.4; color: var(--grafite); }
.rot { display: inline-block; transition: opacity .35s var(--curva), translate .35s var(--curva); }
.rot.sai { opacity: 0; translate: 0 -.6em; }
.rot.entra { opacity: 0; translate: 0 .6em; transition: none; }
.bio { margin: 0 0 1.75rem; max-width: 32em; font-size: 1.02rem; line-height: 1.55; color: var(--grafite); text-wrap: pretty; }

/* Redes sociais: só os ícones, sem caixas */
.sociais { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem -.55rem; }
.soc {
	display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
	color: var(--grafite); border-radius: var(--raio-soc);
	transition: color .25s, background-color .25s, translate .35s var(--curva);
}
.soc svg { width: 1.1rem; height: 1.1rem; }
.soc:hover { color: var(--tinta); background: var(--superficie); translate: 0 -2px; }

/* Texto que rola ao passar o mouse */
.rl { display: inline-grid; overflow: hidden; vertical-align: top; }
.rl > span { grid-area: 1 / 1; transition: transform .5s var(--curva); }
.rl > span + span { transform: translateY(105%); }
.lk:hover .rl > span:first-child, .cta:hover .rl > span:first-child { transform: translateY(-105%); }
.lk:hover .rl > span + span, .cta:hover .rl > span + span { transform: none; }

/* Botão do WhatsApp */
.cta {
	display: flex; align-items: center; gap: .75rem;
	background: var(--caneta); color: var(--cta-texto);
	font-weight: 600; padding: 1.05rem 1.25rem; margin-bottom: 1.75rem;
	border-radius: var(--raio);
	transition: filter .25s, transform .2s;
}
.cta svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.cta:hover { filter: brightness(1.1); }

/* Links */
.links { display: flex; flex-direction: column; margin-bottom: 2.75rem; }
.lk {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.05rem 0; border-top: 1px solid var(--linha); font-weight: 500;
	transition: color .3s, background-color .3s, padding .45s var(--curva), transform .2s;
}
.lk:last-child { border-bottom: 1px solid var(--linha); }
.lk-ic svg { width: 100%; height: 100%; }
.lk-ic { flex-shrink: 0; width: 1.05rem; height: 1.05rem; color: var(--grafite); transition: transform .45s var(--curva), color .3s; }
.lk:hover .lk-ic { transform: translate(2px, -2px); color: currentColor; }
.lk-dest { background: var(--tinta); color: var(--papel); border-color: var(--tinta); padding-inline: 1.1rem; }
.lk-dest .lk-ic { color: inherit; }
.lk:active, .cta:active, .soc:active { transform: scale(.98); }
.lk, .cta, .soc { -webkit-tap-highlight-color: transparent; }

/* Vídeo em destaque */
.video { margin-bottom: 1.75rem; }
.video-play {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
	background: var(--linha); overflow: hidden; cursor: pointer; border-radius: var(--raio-card);
	font: inherit; color: inherit;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.video-play iframe, .video-play video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-botao {
	position: absolute; inset: 0; margin: auto; width: 3.75rem; height: 3.75rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--caneta); color: var(--cta-texto);
	transition: transform .4s var(--curva);
}
.video-botao svg { width: 1.4rem; height: 1.4rem; margin-left: .15rem; }
.video-play:hover .video-botao { transform: scale(1.1); }
.video-play:hover img { transform: scale(1.03); }
.video-tit { margin: .6rem 0 0; font-family: var(--f-meta); font-size: .72rem; color: var(--grafite); }

/* Projetos */
.proj h2 {
	display: flex; align-items: baseline; gap: .6rem;
	font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.035em; font-size: 1.55rem; margin: 0 0 1rem;
}
.proj h2 .cont { font-family: var(--f-meta); font-size: .72rem; font-weight: 400; letter-spacing: 0; color: var(--grafite); }
.proj-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem .8rem; }
.proj-item { display: block; }
.proj figure { margin: 0; }
.proj-img { display: block; overflow: hidden; border-radius: var(--raio-card); background: var(--linha); }
.proj img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--curva); }
a.proj-item:hover .proj-img img { transform: scale(1.045); }
.proj figcaption { margin-top: .55rem; font-size: .9rem; line-height: 1.35; }
.proj-tit { display: block; font-weight: 600; letter-spacing: -.01em; }
.proj-meta { display: block; margin-top: .15rem; font-family: var(--f-meta); font-size: .68rem; color: var(--grafite); }
.proj-selo { display: block; margin-bottom: .3rem; font-family: var(--f-meta); font-size: .68rem; color: var(--grafite); }
.proj-dest { grid-column: 1 / -1; }
.proj-dest .proj-tit { font-family: var(--f-titulo); font-size: 1.35rem; letter-spacing: -.035em; }

/* Carimbo: o bloco de identificação das pranchas de projeto */
.carimbo { margin-top: 3rem; }
.carimbo dl {
	margin: 0; display: grid; grid-template-columns: 1fr 1fr;
	border: 1px solid var(--tinta); border-radius: var(--raio-card); overflow: hidden;
}
.carimbo dl > div { padding: .65rem .8rem .75rem; min-width: 0; border-color: var(--tinta); }
.carimbo dl > div + div { border-top: 1px solid var(--tinta); }
.carimbo dl > div:nth-child(2) { border-right: 1px solid var(--tinta); }
.carimbo dl > div.cel-inteira { grid-column: 1 / -1; }
.carimbo dt { font-family: var(--f-meta); font-size: .66rem; color: var(--grafite); margin-bottom: .2rem; }
.carimbo dd { margin: 0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.carimbo dd.cn { font-family: var(--f-titulo); font-size: 1.15rem; letter-spacing: -.03em; }
.assin { margin: 1rem 0 0; font-family: var(--f-meta); font-size: .68rem; color: var(--grafite); }
.assin a:hover { color: var(--tinta); }

.off { min-height: 90vh; display: grid; place-content: center; text-align: center; padding: 2rem; }
.off-nome { font-family: var(--f-titulo); font-size: 1.6rem; margin: 0 0 .5rem; }

/* ===== Carimbo ===================================================== */

.t-carimbo .lk:hover { color: var(--caneta); }
.t-carimbo .lk-dest:hover { background: var(--caneta); border-color: var(--caneta); color: #fff; }

/* ===== Concreto ==================================================== */

.t-concreto .cab-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--raio-card); }
.t-concreto .nome { font-stretch: 88%; font-variation-settings: 'wdth' 88; }
.t-concreto .links { gap: .5rem; }
.t-concreto .lk, .t-concreto .lk:last-child { background: var(--superficie); border: 0; padding: 1rem 1.15rem; border-radius: var(--raio); }
.t-concreto .lk:hover { background: #D9D6D0; }
.t-concreto .lk-dest, .t-concreto .lk-dest:hover { background: var(--tinta); }
.t-concreto .proj-grade { grid-template-columns: 1fr; gap: 1.75rem; }
.t-concreto .proj img { aspect-ratio: 3 / 2; }
.t-concreto .carimbo dl { border-color: var(--linha); }
.t-concreto .carimbo dl > div { border-color: var(--linha); }

/* ===== Nanquim: projetos logo abaixo do nome, em carrossel ========= */

.t-nanquim .aviso { order: 0; }
.t-nanquim .cab { order: 1; flex-direction: row; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.t-nanquim .sociais { order: 2; }
.t-nanquim .proj { order: 3; margin-bottom: 1.75rem; }
.t-nanquim .video { order: 4; }
.t-nanquim .bio { order: 5; }
.t-nanquim .cta { order: 6; }
.t-nanquim .links { order: 7; }
.t-nanquim .carimbo { order: 8; margin-top: 1rem; }

.t-nanquim .cab-foto { width: 3.25rem; height: 3.25rem; filter: grayscale(1); --raio-foto: 50%; }
.t-nanquim .nome { font-weight: 500; font-size: clamp(1.3rem, 6cqi, 1.7rem); line-height: 1.1; letter-spacing: -.03em; }
.t-nanquim .esp { margin-top: .35rem; }
.t-nanquim .proj h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-nanquim .proj-grade {
	grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; gap: .75rem;
	overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem;
	scrollbar-width: none;
}
.t-nanquim .proj-grade::-webkit-scrollbar { display: none; }
.t-nanquim .proj-item { scroll-snap-align: start; }
.t-nanquim .proj figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .8rem; }
.t-nanquim .proj-meta { margin: 0; text-align: right; }
.t-nanquim .lk:hover { background: var(--superficie); padding-inline: .9rem; }
.t-nanquim .lk-dest:hover { background: #D6D6D0; }
.t-nanquim .carimbo dl, .t-nanquim .carimbo dl > div { border-color: var(--linha); }

/* ===== Jardim ====================================================== */

.t-jardim .cab { align-items: center; text-align: center; }
.t-jardim .cab-foto { width: 6.5rem; height: 6.5rem; --raio-foto: 50%; }
.t-jardim .nome { font-weight: 700; font-stretch: 80%; font-variation-settings: 'wdth' 80, 'opsz' 96; font-size: clamp(2.1rem, 9cqi, 2.7rem); letter-spacing: -.03em; }
.t-jardim .bio { text-align: center; margin-inline: auto; }
.t-jardim .sociais { justify-content: center; margin-inline: auto; }
.t-jardim .cta { justify-content: center; font-weight: 700; }
.t-jardim .links { gap: .55rem; }
.t-jardim .lk, .t-jardim .lk:last-child { background: var(--superficie); border: 0; border-radius: var(--raio); padding: .95rem 1.35rem; }
.t-jardim .lk:hover { background: var(--caneta); color: var(--cta-texto); }
.t-jardim .lk-dest { background: var(--tinta); color: var(--papel); }
.t-jardim .proj h2 { justify-content: center; }
.t-jardim .proj img { aspect-ratio: 1; }
.t-jardim .proj figcaption { text-align: center; }
.t-jardim .carimbo dl, .t-jardim .carimbo dl > div { border-color: var(--linha); }
.t-jardim .assin { text-align: center; }

/* ===== Pátio ======================================================= */

.t-patio .pg { padding-top: 0; }
.capa { margin: 0 -1.25rem; height: 11.5rem; overflow: hidden; background: linear-gradient(135deg, var(--suave), var(--linha)); }
.capa img { width: 100%; height: 100%; object-fit: cover; }
.t-patio .cab { position: relative; align-items: center; text-align: center; gap: 1rem; margin-top: -3.4rem; }
.t-patio .cab-foto { width: 6.75rem; height: 6.75rem; --raio-foto: 50%; border: 4px solid var(--papel); background: var(--suave); }
.t-patio .nome { font-weight: 600; letter-spacing: -.035em; font-size: clamp(2rem, 8.5cqi, 2.6rem); }
.t-patio .bio { text-align: center; margin-inline: auto; }
.t-patio .sociais { justify-content: center; margin-inline: auto; gap: .5rem; }
.t-patio .soc { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta); }
.t-patio .soc:hover { background: var(--caneta); box-shadow: none; color: var(--cta-texto); }
.t-patio .cta { justify-content: center; box-shadow: 0 12px 24px -16px var(--caneta); }
.t-patio .links { gap: .6rem; }
.t-patio .lk, .t-patio .lk:last-child {
	background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
	padding: .7rem .7rem .7rem 1.15rem;
}
.t-patio .lk:hover { border-color: var(--caneta); }
.t-patio .lk-ic {
	width: 2.2rem; height: 2.2rem; padding: .6rem; border-radius: 50%;
	background: var(--suave); color: var(--tinta);
	transition: transform .45s var(--curva), background-color .3s, color .3s;
}
.t-patio .lk:hover .lk-ic { transform: rotate(45deg); background: var(--caneta); color: var(--cta-texto); }
.t-patio .lk-dest { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.t-patio .lk-dest .lk-ic { background: rgba(255, 255, 255, .14); color: inherit; }
.t-patio .proj h2 { justify-content: center; }
.t-patio .proj-grade { display: block; columns: 2; column-gap: .8rem; }
.t-patio .proj-item { break-inside: avoid; margin-bottom: 1.1rem; }
.t-patio .proj-item:nth-child(odd) img { aspect-ratio: 3 / 4; }
.t-patio .proj-item:nth-child(even) img { aspect-ratio: 1; }
.t-patio .proj-item.proj-dest { column-span: all; }
.t-patio .proj-item.proj-dest img { aspect-ratio: 16 / 10; }
.t-patio .proj figcaption { padding-inline: .15rem; }
.t-patio .carimbo dl { border: 0; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.t-patio .carimbo dl > div { border-color: var(--linha); }
.t-patio .assin { text-align: center; }

/* Projeto em destaque (depois dos modelos para ter prioridade) */
.larq .proj-dest img { aspect-ratio: 16 / 10; }
/* Último projeto sozinho na linha: ocupa a largura toda */
.proj-sozinho { grid-column: 1 / -1; }
.t-patio .proj-item.proj-sozinho { column-span: all; }
.larq .proj-sozinho img, .t-patio .proj-item.proj-sozinho img { aspect-ratio: 16 / 10; }
.t-concreto .proj-item.proj-sozinho img { aspect-ratio: 3 / 2; }
.t-nanquim .proj-sozinho { grid-column: auto; }
.t-nanquim .proj-item.proj-sozinho img { aspect-ratio: 4 / 5; }
.t-nanquim .proj-dest { grid-column: auto; }
.t-nanquim .proj-dest img { aspect-ratio: 4 / 5; }
.t-nanquim .proj-selo { display: none; }
.t-nanquim .proj-dest .proj-tit { font-family: inherit; font-size: inherit; letter-spacing: -.01em; }

/* ===== Movimento =================================================== */

@media (prefers-reduced-motion: no-preference) {
	.pg > * { animation: larq-sobe .8s var(--curva) both; }
	.pg > :nth-child(2) { animation-delay: .1s; }
	.pg > :nth-child(3) { animation-delay: .18s; }
	.pg > :nth-child(4) { animation-delay: .26s; }
	.pg > :nth-child(5) { animation-delay: .34s; }
	.pg > :nth-child(n+6) { animation-delay: .42s; }
	.pg > .cab, .pg > .proj, .pg > .carimbo, .pg > .capa { animation: none; }

	/* Nome: cada palavra sobe de dentro de uma "janela" */
	.nome .w > span { animation: larq-palavra 1s var(--curva) both; animation-delay: calc(.12s + var(--i, 0) * .08s); }
	.cab-foto { animation: larq-foto 1.1s var(--curva) both; }
	.t-patio .cab-foto { animation: larq-sobe .9s var(--curva) .15s both; }
	.capa img { animation: larq-capa 1.6s var(--curva) both; }
	.esp { animation: larq-sobe .8s var(--curva) .4s both; }
	.links .lk { animation: larq-sobe .7s var(--curva) both; animation-delay: calc(.4s + var(--n, 0) * .06s); }

	/* Projetos e carimbo aparecem conforme a pessoa rola a página */
	.js .revela { opacity: 0; translate: 0 26px; transition: opacity 1s var(--curva), translate 1s var(--curva); }
	.js .revela.visto { opacity: 1; translate: 0 0; }
	.js .t-nanquim .proj-item.revela { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.larq *, .larq *::before, .larq *::after { transition: none !important; animation: none !important; }
}
@keyframes larq-sobe { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes larq-palavra { from { transform: translateY(110%); } to { transform: none; } }
@keyframes larq-capa { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes larq-foto { from { clip-path: inset(0 0 100% 0); scale: 1.06; } to { clip-path: inset(0 0 0 0); scale: 1; } }

@container (min-width: 40rem) {
	.pg { padding-top: 3.5rem; }
	.t-patio .pg { padding-top: 1.5rem; }
	.capa { margin: 0; border-radius: var(--raio-card); }
}