/* ============ Fonte (arquivo local) ============ */
@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ Paleta e medidas — mude aqui pra mudar o site inteiro ============ */
:root {
  --fundo: #1A120F;          /* marrom bem fechado */
  --texto: #ECE3D3;          /* off-white areia */
  --pessego: #EFC3A6;        /* pêssego (hover dos links) */
  --rosa: #E6007E;           /* rosa-choque: carimbos e palavras com textura */
  --apagado: rgba(236, 227, 211, .48);
  --linha: rgba(236, 227, 211, .14);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tam: clamp(12px, .95vw, 15px);      /* tamanho de texto do site inteiro */
  --bloco: clamp(290px, 24vw, 400px);   /* largura dos blocos de texto */
  --pad: clamp(16px, 2vw, 32px);
  --gap: clamp(10px, 1.4vw, 22px);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--sans); font-size: var(--tam); line-height: 1.18; font-weight: 400; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip;
}
/* grão por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; font: inherit; }
b { font-weight: 700; }
::selection { background: var(--rosa); color: var(--fundo); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--texto); color: var(--fundo); padding: 6px 10px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 1px solid var(--rosa); outline-offset: 3px; }
.dim { color: var(--apagado); }
.u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.u:hover { background-size: 100% 1px; }
a:hover { color: var(--pessego); }

/* ============ O "bloco": a unidade tipográfica do site ============ */
.block { position: relative; width: var(--bloco); }
.block .row { display: flex; justify-content: space-between; gap: 1em; }
.block .row.gap { margin-top: 1.2em; }
.block .nav { margin-top: 1.6em; }
.ast { display: inline-block; font-size: 1.5em; line-height: .7; transform-origin: 50% 55%; animation: gira 14s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ============ Palavras com textura e negrito no meio da frase ============ */
/* tipografia do carimbo: grotesca bold, apertada, com tinta borrada (ver filtro #xerox no build.js) */
.tex, .stamp-text, .stamp, .boom { color: var(--rosa); filter: url(#xerox); }
.tex { font-weight: 800; letter-spacing: -.03em; }
.stamp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.stamp-svg text { fill: currentColor; font-family: var(--sans); font-weight: 620; font-stretch: 100%; }
.tex { display: inline-block; padding: 0 .06em; transform: rotate(-1.5deg); }

/* ============ Carimbo de texto (sem borda) ============ */
.stamp-text {
  position: absolute; pointer-events: none; z-index: 4;
}
/* cada linha do carimbo justificada na largura da maior */
.stamp-text--intro { width: 16em; right: -30%; top: 90%; transform: rotate(-5deg); }
.stamp-text--project { width: 15em; right: -48%; top: -2.4em; transform: rotate(4deg); }
.stamp-text--photo { width: 14em; left: -22%; bottom: 10%; transform: rotate(-6deg); }

/* ============ Topo fixo ============ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; gap: var(--gap);
  padding: 14px var(--pad); mix-blend-mode: difference; color: #fff; transition: opacity .3s, transform .3s;
}
.topbar-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.page-home .topbar { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.page-home.passou .topbar { opacity: 1; transform: none; pointer-events: auto; }

/* ============ Home: abertura ============ */
.intro { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--pad); }
.intro-block .dash { color: var(--apagado); }
.intro-lang { position: absolute; top: 14px; right: var(--pad); }
.intro-scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--apagado); animation: pisca 2.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .35; } }

/* ============ Home: trabalhos (grandes, cada um num lugar) ============ */
.works { padding: 6vh var(--pad) 0; }
.work { margin-bottom: clamp(80px, 18vh, 220px); }
.work-link { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 12px; cursor: none; }
.work-link:hover { color: inherit; }
.work-cover { position: relative; overflow: hidden; grid-row: 1; background: #2a1f1a; }
.work-cover img, .work-cover video { width: 100%; height: 100%; object-fit: cover; transition: filter .25s, transform .8s cubic-bezier(.2,.7,.2,1); }
.work-cap { grid-row: 1; width: auto; }
.work-cap .row { justify-content: flex-start; gap: 1.2em; }
.work-cap p:not(.row) { color: var(--apagado); padding-left: calc(2ch + 1.2em); }
.work-link:hover .work-cover img, .work-link:hover .work-cover video, .work-link:focus-visible .work-cover img { filter: grayscale(1) contrast(1.25) brightness(.62) sepia(.25); transform: scale(1.03); }
.work-link:hover .work-cap b { color: var(--rosa); }

/* o carimbo com o nome do projeto, que segue o mouse */
.boom {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3; pointer-events: none;
  width: clamp(260px, 34vw, 600px);
  transform: translate(-50%, -50%) rotate(var(--r, -6deg)) scale(1.5); opacity: 0;
  transition: opacity .12s, transform .28s cubic-bezier(.2,1.6,.4,1);
}
.work-link:hover .boom, .work-link:focus-visible .boom { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, -6deg)) scale(1); }

@media (min-width: 760px) {
  .work--0 .work-cover { grid-column: 1 / span 9; aspect-ratio: 16 / 10; }
  .work--0 .work-cap   { grid-column: 10 / span 3; align-self: end; }
  .work--1 .work-cover { grid-column: 6 / span 7; aspect-ratio: 4 / 5; max-height: 118vh; }
  .work--1 .work-cap   { grid-column: 2 / span 3; align-self: start; }
  .work--2 .work-cover { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .work--2 .work-cap   { grid-row: 2; grid-column: 9 / span 4; justify-self: end; text-align: right; }
  .work--3 .work-cover { grid-column: 2 / span 6; aspect-ratio: 4 / 5; }
  .work--3 .work-cap   { grid-column: 9 / span 3; align-self: center; }
  .work--4 .work-cover { grid-column: 4 / span 9; aspect-ratio: 3 / 2; }
  .work--4 .work-cap   { grid-column: 1 / span 3; align-self: end; }
  .work--2 .work-cap .row { justify-content: flex-end; }
  .work--2 .work-cap p:not(.row) { padding-left: 0; }
}
@media (max-width: 759px) {
  .work-link { cursor: auto; }
  .work-cover { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .work-cap { grid-row: 2; grid-column: 1 / -1; }
  .boom { width: 70vw; }
}
@media (hover: none) { .work-link { cursor: auto; } }

/* ============ Frase com textura ============ */
.statement { min-height: 80vh; display: grid; place-items: center; padding: 10vh var(--pad); }
.statement-text { max-width: 24em; text-align: center; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.12; }
.statement-text b { font-weight: 800; }

/* ============ Indicador fixo (projeto atual + hora) ============ */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 1.4em; padding: 14px var(--pad);
  mix-blend-mode: difference; color: #fff; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ticker-clock { margin-left: auto; }
.ticker.on { opacity: 1; }

/* ============ Página de projeto ============ */
.p-intro { min-height: 86svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4em; padding: 80px var(--pad) 40px; }
.p-intro .row span:first-child { color: var(--apagado); }
.p-intro h1.row { margin-bottom: 1.2em; }
.p-intro h1.row span:first-child { color: inherit; }
.p-summary { width: var(--bloco); text-transform: none; color: var(--apagado); line-height: 1.35; }
.p-summary b { color: var(--texto); }
.p-cover { display: flex; justify-content: center; padding: 0 var(--pad); }
.p-cover img, .p-cover video { max-height: 90svh; width: auto; max-width: min(1100px, 100%); }
.p-body {
  width: var(--bloco); margin: clamp(80px, 16vh, 200px) 0 clamp(80px, 16vh, 200px) auto; margin-right: clamp(var(--pad), 16vw, 280px);
  text-transform: none; line-height: 1.45;
}
.p-body p + p { margin-top: 1em; }
.p-body a { text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 3px; }
.p-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); width: min(1100px, calc(100% - var(--pad) * 2)); margin: 0 auto; }
.g--full { grid-column: 1 / -1; }
.g--full:nth-of-type(3n) { width: 72%; justify-self: end; }
.g img, .g video { width: 100%; }
.g figcaption { padding-top: 8px; color: var(--apagado); }
.next { display: flex; align-items: flex-end; justify-content: center; gap: var(--gap); padding: clamp(120px, 24vh, 280px) var(--pad) clamp(60px, 12vh, 140px); }
.next-thumb { width: clamp(80px, 8vw, 130px); overflow: hidden; }
.next-thumb img { width: 100%; transition: filter .2s; }
.next:hover .next-thumb img { filter: grayscale(1) contrast(1.6); }
.next:hover { color: inherit; }
.next:hover b, .next:hover .arrow { color: var(--rosa); }
.next .block { width: auto; min-width: 200px; }
@media (max-width: 759px) { .p-gallery { grid-template-columns: 1fr; } .g--full:nth-of-type(3n) { width: 100%; } .p-body { margin-right: auto; margin-left: var(--pad); } }

/* ============ Sobre ============ */
.about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: clamp(120px, 22vh, 240px) var(--pad) clamp(80px, 16vh, 200px); }
.about-block { grid-column: 2 / span 4; grid-row: 1; }
.about-block .row { margin-bottom: 1.2em; }
.about-photo { grid-column: 8 / span 3; grid-row: 1 / span 3; position: relative; align-self: start; }
.about-photo img { width: 100%; filter: grayscale(1) contrast(1.15); }
.about-statement { grid-column: 2 / span 5; grid-row: 2; margin-top: clamp(80px, 16vh, 180px); font-size: clamp(17px, 1.55vw, 24px); line-height: 1.12; max-width: 22em; }
.about-statement b { font-weight: 800; }
.about-bio { grid-column: 2 / span 4; grid-row: 3; margin-top: 3em; text-transform: none; line-height: 1.45; max-width: 34em; color: var(--apagado); }
.about-bio p + p { margin-top: 1em; }
.about-lists { grid-column: 2 / span 6; grid-row: 4; display: flex; gap: clamp(30px, 5vw, 90px); margin-top: clamp(60px, 10vh, 120px); }
.about-lists .block { width: auto; min-width: 12em; }
.about-lists .dim { margin-bottom: .6em; }
@media (max-width: 759px) {
  .about-block, .about-statement, .about-bio, .about-lists { grid-column: 1 / -1; grid-row: auto; }
  .about-photo { grid-column: 4 / -1; grid-row: auto; margin-top: 60px; }
  .about-lists { flex-wrap: wrap; }
}

/* ============ Rodapé ============ */
.footer { position: relative; min-height: 70svh; display: grid; place-items: center; padding: 10vh var(--pad) 70px; border-top: 1px solid var(--linha); }
.footer-block .row:first-child { margin-bottom: 1.2em; }
.footer-block .row:nth-child(3) { justify-content: flex-start; gap: 1.4em; }
.footer-bottom { position: absolute; left: var(--pad); right: var(--pad); bottom: 16px; display: flex; justify-content: flex-end; color: var(--apagado); }

/* ============ Carimbos espalhados ============ */
.stamps { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events: none; z-index: 60; overflow: hidden; }
.stamp { position: absolute; transform-origin: center; }
.stamp--pessego { color: var(--pessego); }
.stamp.is-new { animation: thunk .26s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes thunk { from { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.5); opacity: 0; } to { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); opacity: 1; } }

/* ============ Celular ============ */
@media (max-width: 759px) {
  :root { --tam: 12.5px; --bloco: min(86vw, 340px); }
  /* cada linha do carimbo justificada na largura da maior */
  .stamp-text--intro { right: -3%; top: 112%; width: 17em; }
  .stamp-text--project { right: -2%; top: -8.6em; width: 16em; }
  .ticker { display: none; }
}

/* ============ Menos movimento, quando a pessoa pede ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ast, .intro-scroll, .stamp.is-new { animation: none; }
}

@media (max-width: 759px) {
  .topbar { padding: 12px var(--pad); }
  .topbar-name { white-space: nowrap; }
  .topbar-nav { gap: 12px; }
  .topbar-nav a:first-child { display: none; }
}

/* ============ Cursores especiais: carimbo (rodapé) e smile (frase) ============ */
@property --cs { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cursor-carimbo, .cursor-smile {
  position: fixed; left: 0; top: 0; z-index: 120; color: var(--rosa); filter: url(#xerox);
  pointer-events: none; opacity: 0; transition: opacity .2s;
  transform: translate(var(--cx, -999px), var(--cy, -999px)) translate(-50%, -50%) rotate(var(--cr, -5deg)) scale(var(--cs, 1));
}
.cursor-carimbo { width: 16em; --cr: -5deg; }
.cursor-smile { width: 84px; --cr: 0deg; transition: opacity .2s, --cr .2s; }
.smile-svg { display: block; width: 100%; height: auto; overflow: visible; }
.smile-ast { animation: gira-olho 6s linear infinite; }
.smile-ast > g { transform-box: fill-box; }
@keyframes gira-olho { from { transform: translate(66px, 40px) rotate(0); } to { transform: translate(66px, 40px) rotate(360deg); } }
.smile-olho { transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.cursor-smile.pisca .smile-olho { transform: scaleY(.12); }
[data-cursor] { cursor: none; }
[data-cursor] a { cursor: none; }
.cursor-on-carimbo .cursor-carimbo, .cursor-on-smile .cursor-smile { opacity: 1; }
.cursor-carimbo.bate, .cursor-smile.bate { animation: bate .22s ease-out; }
@keyframes bate { 50% { --cs: .86; } }
@media (hover: none) { .cursor-carimbo, .cursor-smile { display: none; } [data-cursor], [data-cursor] a { cursor: auto; } }

@media (prefers-reduced-motion: reduce) { .smile-ast { animation: none; } }