/* ----------------------------------------------------------------
   PROJETO — páginas avulsas do arquivo
   Extensão do design system Prancheta. O núcleo (tokens, menu,
   labels, footer) vem de prancheta.css; aqui ficam apenas o header
   em tinta (variante do arquivo.html) e os layouts das páginas de
   projeto (.layout-a "respiro" / .layout-b "imersivo").
-----------------------------------------------------------------*/

body{overflow-x:hidden}

/* ---------- header em tinta: mesma variante do arquivo.html ---------- */
header.archive-header{
	z-index:300;
	mix-blend-mode:normal;
	color:var(--ink);
	pointer-events:none;
	opacity:1;
	visibility:visible;
	transform:translate3d(0,0,0);
	will-change:opacity,transform;
	transition:opacity .55s ease,transform .55s var(--ease),visibility 0s linear 0s;
}
body.header-hidden:not(.menu-open):not(.menu-closing) header.archive-header{
	opacity:0;
	visibility:hidden;
	transform:translate3d(0,-18px,0);
	transition:opacity .55s ease,transform .55s var(--ease),visibility 0s linear .55s;
}
header.archive-header .brand,
header.archive-header .header-actions{pointer-events:auto}
header.archive-header .brand a{display:inline-block}
header.archive-header .brand,
header.archive-header .cta,
header.archive-header .menu-toggle{
	color:var(--ink);
	transition:color .4s ease,border-color .4s ease,background-color .3s ease;
}
header.archive-header .cta{border-color:rgba(24,24,24,.58)}
header.archive-header .cta:hover{background:var(--ink);color:var(--bg)}
header.archive-header a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.back-link{
	margin-left:clamp(14px,2vw,26px);
	font-size:12px;
	font-weight:var(--w-body);
	letter-spacing:.05em;
	color:var(--ink-2);
	transition:color .3s ease;
}
.back-link:hover{color:var(--ink)}
body.menu-open header.archive-header .brand,
body.menu-open header.archive-header .cta,
body.menu-open header.archive-header .menu-toggle,
body.menu-open header.archive-header .back-link,
body.menu-closing header.archive-header .brand,
body.menu-closing header.archive-header .cta,
body.menu-closing header.archive-header .menu-toggle,
body.menu-closing header.archive-header .back-link{color:#fff}
body.menu-open header.archive-header .cta,
body.menu-closing header.archive-header .cta{border-color:rgba(255,255,255,.7)}
body.menu-open header.archive-header .cta:hover,
body.menu-closing header.archive-header .cta:hover{background:#fff;color:#000}
/* enquanto o header está sobre o hero-foto, tinta clara para legibilidade */
body.over-hero header.archive-header .brand,
body.over-hero header.archive-header .cta,
body.over-hero header.archive-header .menu-toggle,
body.over-hero header.archive-header .back-link{color:#fff}
body.over-hero header.archive-header .cta{border-color:rgba(255,255,255,.7)}
body.over-hero header.archive-header .cta:hover{background:#fff;color:#000}
body.over-hero header.archive-header .back-link{color:rgba(255,255,255,.72)}

/* ---------- abertura editorial: spread de revista ---------- */
/* Coluna de papel à esquerda com a ficha de abertura completa; fotografia na
   metade direita, sem scrim e sem texto por cima. Ao rolar, a foto avança
   sobre a coluna e toma a tela inteira ("a capa se abre") — mesma mecânica
   de rampa das expansões do miolo. O clip inicial reserva uma faixa de papel
   no topo, onde o header fixo permanece legível em tinta. */
.spread-hero{height:210svh;position:relative}
.spread-sticky{
	--strip:76px;
	position:sticky;
	top:0;
	height:100svh;
	overflow:hidden;
	background:var(--bg);
}
.spread-folio{
	position:absolute;
	inset:0 auto 0 0;
	z-index:1;
	width:42%;
	min-width:340px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:24px;
	padding:clamp(96px,13vh,140px) clamp(26px,3.2vw,56px) clamp(24px,3.6vh,40px);
	border-right:1px solid var(--hairline);
	will-change:transform;
}
.proj-kicker{
	font-size:12px;
	font-weight:var(--w-body);
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ink-2);
	margin-bottom:clamp(18px,3vh,34px);
}
.kicker-dot{color:var(--accent);font-size:8px;vertical-align:2px;margin-right:4px}
.spread-folio h1{
	font-size:clamp(38px,4.4vw,72px);
	font-weight:var(--w-display);
	letter-spacing:-.035em;
	line-height:1.02;
	max-width:12ch;
}
.spread-folio h1 .thin{font-weight:var(--w-body);color:var(--ink-2)}
.proj-attrib{
	font-size:clamp(14px,1.2vw,17px);
	font-weight:var(--w-body);
	letter-spacing:-.01em;
	color:var(--ink-2);
	margin-top:clamp(10px,1.6vh,18px);
}
.folio-lead{
	margin-top:clamp(24px,4.2vh,48px);
	font-size:clamp(14px,1.1vw,16.5px);
	line-height:1.65;
	max-width:36ch;
	color:var(--ink);
}
.folio-foot{display:grid;gap:16px}
.folio-hint{
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ink-2);
}
.folio-hint .arrow{margin-left:8px;color:var(--accent)}

.spread-plate{
	position:absolute;
	inset:0;
	z-index:2;
	margin:0;
	clip-path:inset(var(--strip) 0 0 42%);
	will-change:clip-path;
	background:var(--ink);
}
.spread-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-n{
	position:absolute;
	right:16px;
	bottom:14px;
	font-size:11px;
	letter-spacing:.05em;
	color:rgba(255,255,255,.85);
	text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.project-facts{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px 28px;
	padding-top:4px;
}
.project-facts div{border-top:1px solid var(--hairline);padding-top:7px}
.project-facts dt{
	font-size:10px;
	font-weight:var(--w-ui);
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ink-2);
}
.project-facts dd{margin:3px 0 0;font-size:12.5px;line-height:1.35}
.fact-symbol{
	display:inline-block;
	min-width:16px;
	margin-right:4px;
	color:var(--accent);
	font-size:.92em;
}

/* ---------- figuras ---------- */
.ph{margin:0;position:relative}
.ph picture,.ph img{display:block;width:100%;height:auto;background:#ece8e1}
.ph-caption{
	margin-top:12px;
	font-size:12px;
	color:var(--ink-2);
	display:flex;
	justify-content:space-between;
	gap:16px;
}

/* parallax: moldura com sangria interna; o JS move a imagem */
.plx{overflow:hidden;position:relative}
.plx.h{aspect-ratio:3/2}
.plx.v{aspect-ratio:2/3}
.plx.wide{aspect-ratio:16/9}
.plx img{
	position:absolute;
	left:0;
	top:-9%;
	width:100%;
	height:118%;
	object-fit:cover;
	will-change:transform;
}

/* full-bleed fora do .wrap */
.bleed{width:100%}

/* ---------- expansão fullscreen guiada pelo scroll ---------- */
.expand{height:250vh;position:relative}
.expand-sticky{
	position:sticky;
	top:0;
	height:100svh;
	overflow:hidden;
}
.expand-frame{
	margin:0;
	position:absolute;
	inset:0;
	clip-path:inset(15vh 19vw);
	will-change:clip-path;
}
.expand-frame picture,.expand-frame img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.expand-caption{
	position:absolute;
	left:clamp(20px,3vw,48px);
	bottom:22px;
	font-size:11px;
	letter-spacing:.06em;
	color:#fff;
	opacity:0;
	transition:opacity .8s ease;
	text-shadow:0 1px 8px rgba(0,0,0,.45);
	pointer-events:none;
}
.expand.is-full .expand-caption{opacity:.85}

/* ---------- próximo projeto: capa full-bleed com título dentro, como o hero ---------- */
.next-proj{
	position:relative;
	min-height:clamp(560px,88svh,940px);
	margin-top:clamp(120px,20vh,280px);
	overflow:hidden;
}
.next-link{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	color:#fff;
}
.next-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#ece8e1}
.next-bg img{
	position:absolute;
	left:0;
	top:-9%;
	width:100%;
	height:118%;
	object-fit:cover;
	will-change:transform;
}
/* scrim: denso no topo e na base, leve no meio — igual ao hero */
.next-scrim{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(to bottom,
		rgba(24,24,24,.4) 0%,
		rgba(24,24,24,.1) 24%,
		rgba(24,24,24,.06) 54%,
		rgba(24,24,24,.6) 100%);
}
.next-inner{
	position:relative;
	z-index:2;
	width:100%;
	padding-left:clamp(20px,3vw,48px);
	padding-right:clamp(20px,3vw,48px);
	padding-bottom:clamp(40px,7vh,84px);
}
.next-inner .next-label{
	display:flex;
	justify-content:space-between;
	font-size:12px;
	color:rgba(255,255,255,.8);
	margin-bottom:clamp(20px,3vh,40px);
}
.next-proj h2{
	margin:0;
	max-width:16ch;
	color:#fff;
	font-size:clamp(28px,4.6vw,74px);
	font-weight:var(--w-display);
	letter-spacing:-.04em;
	line-height:.98;
	transition:color .35s ease;
}
.next-link:hover h2{color:rgba(255,255,255,.82)}

/* ---------- reveal (mesmas classes/curvas do arquivo.html) ---------- */
.reveal-media,.reveal-text{
	opacity:0;
	transform:translateY(34px);
	transition:opacity 1.1s ease,transform 1.3s var(--ease);
}
.reveal-media{transform:translateY(44px) scale(.985);transition-duration:1.35s}
.reveal-media.in,.reveal-text.in{opacity:1;transform:none}
.reveal-text{transition-delay:.11s}
.js .hero-reveal{opacity:0;transform:translateY(28px)}
.js body.is-ready .hero-reveal{
	opacity:1;
	transform:none;
	transition:opacity 1.15s ease,transform 1.3s var(--ease);
}
.js body.is-ready .spread-folio h1{transition-delay:.14s}
.js body.is-ready .folio-lead{transition-delay:.26s}
.js body.is-ready .folio-foot{transition-delay:.36s}

/* ================================================================
   LAYOUT A — respiro editorial
   Poucas fotos, larguras variadas, muito ar entre blocos.
   ================================================================ */
.layout-a .block{margin-top:clamp(120px,18vh,240px)}
.layout-a .ph-right{width:min(62vw,1080px);margin-left:auto}
.layout-a .ph-left-v{width:min(34vw,460px)}
.layout-a .ph-left-v .ph-caption{max-width:340px}
.layout-a .duo-asym{
	display:grid;
	grid-template-columns:38fr 54fr;
	gap:clamp(20px,4vw,72px);
	align-items:start;
}
.layout-a .duo-asym .ph:last-child{margin-top:clamp(60px,10vh,140px)}
.layout-a .ph-close{width:min(74vw,1240px);margin-inline:auto}

/* ================================================================
   LAYOUT B — imersivo denso
   Fotos grandes, sequência contínua, gaps curtos.
   ================================================================ */
.layout-b .block{margin-top:clamp(56px,9vh,110px)}
.layout-b .hero-bleed{margin-top:clamp(40px,7vh,90px)}
.layout-b .hero-bleed .plx{aspect-ratio:auto;height:100svh}
.duo{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(12px,2vw,24px);
	align-items:stretch;
}
.duo .ph{overflow:hidden}
.duo .ph img{height:100%;object-fit:cover;aspect-ratio:4/3}
.trio{
	display:grid;
	grid-template-columns:1fr .72fr 1fr;
	gap:clamp(12px,2vw,24px);
	align-items:center;
}
.trio .ph img{object-fit:cover;aspect-ratio:3/2}
.trio .ph.v img{aspect-ratio:2/3}
.layout-b .text-pause{
	padding-block:clamp(64px,12vh,160px);
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
	gap:clamp(24px,4vw,70px);
}
.layout-b .text-pause .pause-note{
	font-size:14px;
	line-height:1.6;
	color:var(--ink-2);
	max-width:44ch;
}
.layout-b .ph-final-v{width:min(52vw,680px);margin-inline:auto}

/* ---------- responsivo ---------- */
/* spread empilhado: sem rampa nem clip — coluna de papel acima, prancha
   abaixo. O JS também limpa os estilos inline neste breakpoint. */
@media(max-width:860px){
	.spread-hero{height:auto}
	.spread-sticky{position:static;height:auto;display:flex;flex-direction:column}
	.spread-folio{position:static;width:100%;min-width:0;border-right:0;border-bottom:1px solid var(--hairline);padding-top:96px;min-height:72svh}
	.spread-plate{position:relative;inset:auto;height:62svh;clip-path:none}
}

@media(max-width:900px){
	.layout-a .ph-right{width:100%}
	.layout-a .ph-left-v{width:72%}
	.layout-a .duo-asym{grid-template-columns:1fr;gap:56px}
	.layout-a .duo-asym .ph:last-child{margin-top:0}
	.layout-a .ph-close{width:100%}
	.trio{grid-template-columns:1fr 1fr}
	.trio .ph.v{grid-column:span 2;width:70%;margin-inline:auto}
	.layout-b .text-pause{grid-template-columns:1fr}
	.layout-b .ph-final-v{width:78%}
	.next-proj h2{font-size:clamp(28px,5.4vw,54px)}
}

@media(max-width:700px){
	header.archive-header{padding:calc(14px + env(safe-area-inset-top)) calc(17px + env(safe-area-inset-right)) 14px calc(17px + env(safe-area-inset-left))}
	.back-link{margin-left:10px}
	.spread-folio h1{font-size:clamp(38px,10vw,58px)}
	.expand-frame{clip-path:inset(9vh 8vw)}
	.duo{grid-template-columns:1fr}
	.next-proj{min-height:clamp(440px,72svh,720px)}
	.next-proj h2{font-size:clamp(28px,8vw,46px)}
}

/* ---------- movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
	.js .hero-reveal,.js body.is-ready .hero-reveal,.reveal-media,.reveal-text{
		opacity:1;transform:none;transition:none;
	}
	.next-cover img,.next-proj h2{transition:none}
}
body.reduced-motion .expand{height:auto}
body.reduced-motion .expand-sticky{position:static;height:auto;overflow:visible}
body.reduced-motion .expand-frame{position:static;clip-path:none}
body.reduced-motion .expand-frame img{height:auto}
body.reduced-motion .expand-caption{position:static;color:var(--ink-2);opacity:1;text-shadow:none;margin-top:12px}
body.reduced-motion .plx{aspect-ratio:auto}
body.reduced-motion .plx img{position:static;top:auto;height:auto}
body.reduced-motion .layout-b .hero-bleed .plx{height:auto}
body.reduced-motion .spread-hero{height:auto}
body.reduced-motion .spread-sticky{position:static}
body.reduced-motion .next-bg img{position:absolute;inset:0;top:0;width:100%;height:100%;transform:none}