/* Editorial direction approved September 2026. No build or runtime libraries. */

:root {
  --paper:#fafafa;
  --ink:#171717;
  --muted:#636363;
  --soft:#f0f0f0;
  --serif:var(--sans);
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,4.5vw,88px);
  --space:clamp(100px,12vw,200px);
  --gap:clamp(24px,3vw,48px);
  /* Movimento: tres duracoes e quatro easings cobrem o site inteiro.
     Rapida = resposta ao ponteiro; media = mudanca de estado; lenta = entrada
     editorial. Valor novo entra aqui, nao solto na regra. docs/motion.md. */
  --dur-fast:.25s;
  --dur-medium:.45s;
  --dur-slow:.85s;
  --ease-standard:cubic-bezier(.28,.11,.32,1);
  --ease-entrance:cubic-bezier(.22,.75,.22,1);
  --ease-float:cubic-bezier(.2,.72,.18,1);
  --ease-drift:linear;
  --ease:var(--ease-standard);
  /* Sombra discreta só nas placas de marca e telas. A obra permanece plana. */
  --r:18px;
  --float:0 14px 36px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.045);
}
*,*::before,*::after {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  /* o cabeçalho é fixo: sem isto a âncora pousa debaixo dele */
  scroll-padding-top:96px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,p,figure,ul,dl,dd {
  margin:0;
}
h1,h2,h3 {
  font-weight:400;
}
figure {
  margin:0;
}
ul {
  padding:0;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
em {
  font-weight:400;
}
button {
  border:0;
  background:none;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:7px;
}
::selection {
  background:#dfd8c7;
  color:#171717;
}
.wrap {
  width:calc(100% - var(--gutter)*2);
  max-width:1440px;
  margin-inline:auto;
}
.section {
  padding-block:var(--space);
}
.grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
}
.eyebrow {
  font:400 12px/1.5 var(--sans);
  letter-spacing:.035em;
}
.muted {
  color:var(--muted);
}
.editorial {
  font:400 clamp(34px,3.8vw,60px)/1.1 var(--serif);
  letter-spacing:-.02em;
  text-wrap:pretty;
}
.text-link,.back-link {
  display:inline-flex;
  gap:20px;
  align-items:center;
  min-height:44px;
  font-size:14px;
  line-height:1.3;
}
.text-link>span:first-child,.back-link>span:first-child {
  position:relative;
}
.text-link>span:first-child::after,.back-link>span:first-child::after {
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.text-link:hover>span:first-child::after,.back-link:hover>span:first-child::after {
  transform:scaleX(1);
}
.text-link>span:last-child,.back-link>span:last-child {
  transition:transform var(--dur-fast) var(--ease);
}
.text-link:hover>span:last-child {
  transform:translate(2px,-2px);
}
.skip {
  position:fixed;
  top:12px;
  clip-path:inset(50%);
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap;
  left:12px;
  z-index:20;
  padding:12px;
  background:var(--ink);
  color:var(--paper);
}
.skip:focus {
  clip-path:none;
  width:auto;
  height:auto;
  top:12px;
}
/* Quiet navigation, kept in document flow. */

/* Fixo no topo (sticky) e sempre visível — como a referência da Fábrica.
   `wrap` deixa o cabeçalho mais estreito que a tela, então o fundo é estendido
   por ::before até as bordas — com `calc(gutter * -1)` sobrariam vãos laterais
   acima de 1440px, onde a margem cresce além do gutter. */
.header {
  position:sticky;
  top:0;
  z-index:40;
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.header::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--paper);
  z-index:-1;
}
/* Cabeçalho fixo: sem .nav-away nem transição de slide — decisão de 29/09. */
.wordmark {
  font:400 27px/1 var(--serif);
  letter-spacing:-.025em;
}
.wordmark-dot {
  margin-left:1px;
}
.header nav {
  display:flex;
  align-items:center;
  gap:32px;
}
.nav-link {
  font-size:13px;
  min-height:44px;
  display:flex;
  align-items:center;
}
.nav-link>span:last-child {
  display:none;
}
.nav-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.languages {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  margin-left:14px;
}
.languages button {
  min-width:34px;
  min-height:44px;
  padding:0;
  color:var(--muted);
  font-size:11px;
}
.languages button[aria-pressed=true] {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:5px;
}
.menu-toggle {
  display:none;
}
/* Intro */

.hero-links {
  display:flex;
  gap:38px;
  padding-bottom:4px;
}
.hero-links .text-link>span:last-child {
  transform:none;
}
.hero-links .text-link:hover>span:last-child {
  transform:translateY(2px);
}
/* Four chapters, with a shared editorial spine. */

.work-intro {
  align-items:start;
  padding-bottom:76px;
}
.visual-corner {
  position:absolute;
  right:20px;
  bottom:16px;
  font:28px/1 var(--sans);
  color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
}
/* Personal chapters */

.about {
  padding-top:60px;
}
.about>h2,.experience>h2 {
  grid-column:1/5;
  padding-top:8px;
}
.about-content,.experience-content {
  grid-column:5/13;
}
.about-statement {
  font-size:clamp(38px,4.5vw,72px);
  line-height:1.08;
}
.about-statement em {
  color:#68665f;
}
.about-detail {
  max-width:54ch;
  margin-top:42px;
}
.about-detail p+p {
  margin-top:22px;
}
.capabilities {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
  margin-top:40px;
  font-size:14px;
}
.manifesto {
  background:var(--ink);
  color:var(--paper);
  padding-block:clamp(112px,13vw,208px);
}
.manifesto .eyebrow {
  color:#bab7af;
  margin-bottom:48px;
}
.manifesto-title {
  font:400 clamp(52px,6.8vw,108px)/1.04 var(--serif);
  letter-spacing:-.03em;
  max-width:1150px;
  text-wrap:pretty;
}
.manifesto-title em {
  color:#c8c2b5;
}
.contact-title {
  font:400 clamp(64px,10vw,160px)/1.1 var(--serif);
  letter-spacing:-.035em;
  margin-top:24px;
}
.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:44px;
}
.contact-links {
  display:flex;
  gap:48px;
}
.location {
  font-size:13px;
  color:var(--muted);
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:32px;
  font-size:12px;
}
.footer>a {
  font:24px/1 var(--serif);
}
.footer p {
  color:var(--muted);
}
/* Project pages: actual artwork, not recreated brand assets. */

.case-intro {
  padding-top:52px;
  padding-bottom:64px;
}
.back-link {
  color:var(--muted);
  font-size:12px;
}
.back-link>span:last-child {
  transform:none;
  order:-1;
}
.case-name {
  font:400 clamp(66px,8.4vw,134px)/1 var(--serif);
  letter-spacing:-.035em;
  margin-top:18px;
}
.case-headline {
  font:400 clamp(32px,4vw,64px)/1.08 var(--serif);
  letter-spacing:-.025em;
  max-width:1000px;
  margin-top:28px;
  text-wrap:pretty;
}
.case-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:44px;
}
.case-facts dt,.case-decisions h3 {
  font-size:12px;
  color:var(--muted);
  margin-bottom:12px;
}
.case-facts dd {
  font-size:15px;
}
.next-project {
  padding-bottom:100px;
}
.next-project>a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  font:400 clamp(48px,7.5vw,112px)/1.1 var(--serif);
  letter-spacing:-.03em;
  margin-top:24px;
}
.next-project>a>span:last-child {
  font-family:var(--sans);
  font-size:.6em;
}
.lightbox {
  width:100vw;
  max-width:100vw;
  height:100dvh;
  max-height:100dvh;
  padding:0;
  border:0;
  background:var(--paper);
  color:var(--ink);
}
.lightbox::backdrop {
  background:#171717e8;
}
.lightbox form {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  padding:12px 24px;
  background:var(--paper);
}
.lightbox-close {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:24px;
  font-size:14px;
}
.lightbox-content {
  padding:16px 24px 64px;
}
.lightbox-content img {
  width:auto;
  max-width:100%;
  height:auto;
  margin-inline:auto;
}
.lightbox-open {
  overflow:hidden;
}
/* Résumé shares the same type system and has a dedicated print layout. */

.resume {
  max-width:1000px;
  padding-block:80px 120px;
}
.resume-heading {
  padding-bottom:64px;
}
.resume h1 {
  font:400 clamp(58px,8vw,96px)/1 var(--serif);
  letter-spacing:-.03em;
  margin:20px 0;
}
.resume .editorial {
  font-size:34px;
}
.resume-links {
  display:flex;
  gap:32px;
  margin-top:32px;
}
.print-button {
  padding:0;
}
.print-contact {
  display:none;
}
.resume-section {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:16px 48px;
  padding-block:32px;
}
.resume-section>h2 {
  font-size:13px;
  grid-column:1;
}
.resume-section>p,.resume-job {
  grid-column:2;
}
.resume-job+.resume-job {
  margin-top:28px;
}
.resume-job h3 {
  font:30px/1.15 var(--serif);
  margin-block:10px;
}
.resume-role {
  color:var(--muted);
  margin-bottom:16px;
}
.resume-job>p:last-child {
  max-width:60ch;
}
@media(max-width:1024px) {
  .header nav {
    gap:24px;
  }
  
  
  .project-head,.work-intro,.other-header,.about,.experience,.case-story,.gallery-intro {
    column-gap:24px;
  }
  .project-id,.section-index,.other-header h2,.about>h2,.experience>h2,.case-story>h2,.gallery-intro>h2 {
    grid-column:1/4;
  }
  .project-copy,.intro-copy,.other-header>.editorial,.about-content,.experience-content,.case-story-main,.gallery-intro>div {
    grid-column:4/13;
  }
  .case-decisions,.case-facts {
    gap:28px;
  }
  .footer p {
    font-size:11px;
  }
}
@media(max-width:700px) {
  :root {
    --gutter:24px;
    --space:96px;
    --gap:24px;
  }
  .header {
    min-height:76px;
    position:sticky;
    flex-wrap:wrap;
    gap:0;
  }
  .wordmark {
    font-size:26px;
  }
  .menu-ready .menu-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:44px;
    padding:0;
    font-size:13px;
  }
  .menu-toggle>span {
    font-size:21px;
    transition:transform var(--dur-fast);
  }
  .menu-toggle[aria-expanded=true]>span {
    transform:none;
  }
  .header nav {
    display:flex;
    flex-direction:column;
    flex-basis:100%;
    padding:8px 0 20px;
    align-items:stretch;
    gap:4px;
  }
  .menu-ready .header nav {
    display:none;
  }
  .menu-ready .header nav.is-open {
    display:flex;
  }
  .nav-link {
    font:400 22px/1.3 var(--sans);
    letter-spacing:-.025em;
    min-height:48px;
    padding:8px 0;
  }
  .languages {
    margin-left:0;
    margin-top:8px;
    gap:8px;
  }
  .languages button {
    font-size:13px;
  }
  
  .hero>.eyebrow {
    font-size:11px;
    letter-spacing:0;
  }
  
  
  
  
  .hero-links {
    gap:30px;
    padding:0;
  }
  .text-link {
    font-size:13px;
    gap:18px;
  }
  .grid {
    display:block;
  }
  .editorial {
    font-size:36px;
    line-height:1.12;
  }
  .visual-corner {
    right:12px;
    bottom:12px;
    font-size:22px;
  }
  .about {
    padding-top:0;
  }
  .about>h2,.experience>h2 {
    margin-bottom:28px;
    padding:0;
  }
  .about-statement {
    font-size:43px;
    line-height:1.09;
  }
  .about-detail {
    margin-top:30px;
  }
  .capabilities {
    margin-top:30px;
  }
  .manifesto {
    padding-block:96px;
  }
  .manifesto .eyebrow {
    margin-bottom:32px;
  }
  .manifesto-title {
    font-size:52px;
    line-height:1.05;
  }
  .contact-title {
    font-size:clamp(60px,15.3vw,90px);
    line-height:1.05;
    margin-top:26px;
  }
  .contact-bottom {
    display:block;
    margin-top:30px;
  }
  .contact-links {
    gap:28px;
    flex-wrap:wrap;
  }
  .location {
    margin-top:32px;
  }
  .footer {
    flex-wrap:wrap;
    gap:20px;
    justify-content:space-between;
    padding-bottom:28px;
  }
  .footer p {
    order:3;
    width:100%;
    font-size:11px;
  }
  .case-name {
    font-size:60px;
    line-height:1.01;
    margin-top:16px;
  }
  .case-headline {
    font-size:36px;
    line-height:1.08;
    margin-top:24px;
  }
  .case-facts {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:32px;
  }
  .next-project {
    padding-block:72px 88px;
  }
  .next-project>a {
    font-size:48px;
  }
  .resume {
    padding-top:44px;
  }
  .resume-heading {
    padding-bottom:30px;
  }
  .resume h1 {
    font-size:60px;
  }
  .resume .editorial {
    font-size:30px;
  }
  .resume-links {
    gap:24px;
    flex-wrap:wrap;
  }
  .resume-section {
    display:block;
    padding-block:24px;
  }
  .resume-section>h2 {
    margin-bottom:22px;
  }
  .resume-section>p+p {
    margin-top:16px;
  }
  .resume-job h3 {
    font-size:28px;
  }
  .lightbox-content {
    padding:8px 12px 40px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .rv {
    opacity:1!important;
    transform:none!important;
  }
}
@media print {
  @page {
    margin:18mm;
  }
  body {
    font-size:10pt;
    background:#fff;
    color:#000;
  }
  .header,.footer,.skip,.resume-links,.lightbox {
    display:none;
  }
  .wrap {
    width:100%;
    max-width:none;
  }
  .resume {
    padding:0;
  }
  .resume-heading {
    padding-bottom:14pt;
  }
  .resume h1 {
    font-size:36pt;
    margin:8pt 0;
  }
  .resume .editorial {
    font-size:18pt;
  }
  .print-contact {
    display:block;
    font-size:9pt;
    margin-top:12pt;
  }
  .resume-section {
    display:block;
    padding:12pt 0;
    break-inside:avoid;
  }
  .resume-section>h2 {
    font-size:10pt;
    margin-bottom:10pt;
  }
  .resume-job+.resume-job {
    margin-top:12pt;
  }
  .resume-job h3 {
    font-size:16pt;
    margin:5pt 0;
  }
  .resume-role {
    margin-bottom:5pt;
  }
  .resume-section p {
    max-width:none;
  }
  .resume-job {
    break-inside:avoid;
  }
  .resume-job .eyebrow {
    font-size:9pt;
  }
  a {
    color:#000;
  }
}

/* Curated hierarchy: the homepage gives projects different editorial weights. */
.portfolio-home { --space: clamp(80px,8vw,128px); }

.portfolio-home .hero-expression { display: block; font: italic 400 clamp(60px,7.3vw,106px)/1.06 var(--serif); letter-spacing: -.03em; color: var(--ink); white-space: normal; }
.hero-current { margin-bottom: 8px; }
.portfolio-home .about { padding-top: 0; }
.portfolio-home .about-statement { font-size: clamp(38px,4vw,58px); }
.portfolio-home .about-detail { margin-top: 26px; }
.portfolio-home .manifesto { padding-block: clamp(72px,7vw,112px); }
.portfolio-home .manifesto .wrap { display: block; }
.portfolio-home .manifesto .eyebrow { padding-top: 12px; margin-bottom: 0; }
.portfolio-home .manifesto-title { font-size: clamp(42px,4.4vw,64px); line-height: 1.1; }
.portfolio-home .contact-title { font-size: clamp(60px,7.8vw,112px); }

/* Blank galleries reserve a format, not the full height of a website export. */
.portfolio-case .case-intro { padding-top: 24px; padding-bottom: 36px; }
.portfolio-case .case-name { font-size: clamp(54px,6vw,88px); }
.portfolio-case .case-headline { font-size: clamp(28px,3.2vw,46px); max-width: 820px; margin-top: 20px; }
.portfolio-case .section { padding-block: clamp(64px,7vw,112px); }
@media(max-width:700px) {
  .portfolio-home { --space: 76px; }
  
  .portfolio-home .hero-expression { font-size: clamp(46px,12vw,60px); line-height: 1.02; max-width: 16ch; margin-top: 6px; text-wrap: balance; }
  .hero-current { margin-bottom: 8px; }
  .portfolio-home .about-statement { font-size: 40px; }
  .portfolio-home .manifesto .wrap { display: block; }
  .portfolio-home .manifesto .eyebrow { padding-top: 0; margin-bottom: 26px; }
  .portfolio-home .manifesto-title { font-size: 42px; }
  .portfolio-case .case-name { font-size: 56px; }
}

/* Motion only reinforces reading order and interactive affordances. */
@media (prefers-reduced-motion: no-preference) {
  .text-link:focus-visible > span:first-child::after,
  .back-link:focus-visible > span:first-child::after {
    transform: scaleX(1);
  }
}

/* Scroll entrances are prepared below the viewport, preventing the visible→hidden flash. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(14px); }
  .reveal-pending:focus-within { opacity: 1; transform: none; }
}
.welcome[hidden], .welcome-replay[hidden] { display: none; }
.welcome { position: fixed; inset: 0; z-index: 60; background: var(--paper); color: #111; }
.welcome-paint { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .36; pointer-events: none; }
.welcome-stage { position: absolute; inset: 24px; display: grid; place-items: center; }
.welcome-phrase { position: absolute; width: 100%; text-align: center; font-family: 'Helvetica World','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 700; font-size: clamp(50px,6.3vw,120px); line-height: 1.06; letter-spacing: -.055em; }
.welcome-word { white-space: nowrap; }
.welcome-letter { display: inline-block; opacity: 0; }
.welcome-skip { position: absolute; right: var(--gutter); bottom: max(24px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 22px; min-height: 44px; padding: 0; font-size: 13px; }
.welcome-replay { padding: 10px 0; min-height: 44px; font-size: 12px; order: 2; }
.welcome-replay:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width:700px) {
  .welcome-phrase { font-size: clamp(42px,10vw,60px); max-width: 17ch; }
  .welcome-stage { inset: 24px; }
  .welcome-replay { order: 4; }
}
@media (prefers-reduced-motion:reduce) {
  .welcome, .welcome-replay { display: none; }
  .reveal-pending { opacity: 1!important; transform: none!important; }
}
@media print { .welcome, .welcome-replay { display: none!important; } .reveal-pending { opacity: 1!important; transform: none!important; } }

/* Supplied artwork: cover, screen and portrait pieces keep their own proportions. */
.portfolio-home .project-visual.art-easy, .portfolio-case .case-cover .art-easy { aspect-ratio: 16/9; padding: 0; background: #f5f5ff; }
.gallery-art { align-self: start; }
.gallery-art img { display: block; height: auto; }
.lightbox[open] { display: flex; flex-direction: column; overflow: hidden; }
.lightbox form { flex: none; align-items: center; gap: 24px; }
.lightbox-zoom { min-height: 44px; padding: 8px 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.lightbox-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lightbox-content img { display: block; }
.lightbox.is-zoomed .lightbox-content img { width: var(--detail-width); max-width: none; }

/* A single typographic voice connects the greeting, work and case studies. */

.portfolio-home .hero-expression { font: 500 clamp(48px,5.8vw,84px)/1.08 var(--sans); letter-spacing: -.055em; margin-top: 4px; }
.portfolio-home .about-statement { font-weight: 500; font-size: clamp(36px,4.5vw,60px); letter-spacing: -.045em; }
.portfolio-home .manifesto-title { font-weight: 500; font-size: clamp(38px,5vw,70px); letter-spacing: -.045em; }
.case-name { font-weight: 600; letter-spacing: -.055em; }
.portfolio-case .case-headline { font-size: clamp(26px,3vw,40px); letter-spacing: -.035em; }
.next-project>a { font-size: clamp(40px,6vw,80px); font-weight: 500; }
@media (max-width:700px) {
  .hero-direct, .portfolio-home .hero-expression { font-size: clamp(38px,10vw,52px); max-width: 15ch; line-height: 1.06; }
  .portfolio-home .about-statement { font-size: 36px; }
  .portfolio-home .manifesto-title { font-size: 38px; }
}

/* ---------------- entrada ----------------
   Construção emprestada de uma referência que o Paulo trouxe. O que faz ela
   funcionar não é a pilha de palavras: é o escalonamento. Cada linha começa num
   ponto diferente, e são os vãos abertos por esse recuo que abrigam as notas
   pequenas. Sem isso, o texto pequeno vira uma tira estreita e a relação entre
   o corpo grande e o pequeno se perde.

   As duas camadas (palavras e notas) dividem a mesma grade de 12 colunas, então
   as notas caem exatamente nos vãos. O corpo é calculado para a palavra mais
   larga caber na fatia que lhe cabe, não para encher a tela. */
.hero{position:relative;padding:clamp(40px,5vw,80px) 0 clamp(64px,8vw,120px);overflow:hidden}
.hero-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;
  background:radial-gradient(ellipse at 78% 30%,rgba(100,105,110,.065),transparent 55%);
  mask-image:linear-gradient(transparent,#000 18%,#000 65%,transparent)}
.hero-field::before{content:"";position:absolute;width:95%;height:135%;left:23%;top:-28%;
  border:clamp(42px,8vw,120px) solid rgba(85,90,95,.05);border-radius:48% 62% 45% 70%;
  transform:rotate(-28deg);filter:blur(24px)}
.hero-grid,.hero-rule,.hero-foot{position:relative;z-index:1}

.hero-grid{--hw:clamp(2.3rem,12.4vw,5rem)}
.hero-stack{margin:0;font:300 var(--hw)/.94 var(--sans);
  letter-spacing:-.035em;text-transform:uppercase;display:grid;gap:0}
.hw{display:block;white-space:nowrap}
.hero-note{margin:0;font-size:clamp(14px,1vw,16px);line-height:1.5;
  color:var(--muted);max-width:24ch}

@media(max-width:899px){
  .hero-grid{display:flex;flex-direction:column;gap:18px}
  .hero-note{max-width:34ch}
  .hero-note-a{order:-1}
}

@media(min-width:900px){
  /* Grade de 24 colunas para as notas colarem na palavra, não na borda da
     célula. As faixas de cada palavra foram medidas: MARCAS ocupa ~49% da
     largura útil, INTERFACES ~68%, CAMPANHAS ~72%. Como o corpo é definido em
     vw, essa proporção se mantém em qualquer largura. */
  .hero-grid{--hw:clamp(4.2rem,10.2vw,10.1rem);
    display:grid;grid-template-columns:repeat(24,1fr);
    grid-template-rows:repeat(3,calc(var(--hw) * .94));
    column-gap:0;align-items:start}
  .hero-stack{grid-column:1/-1;grid-row:1/span 3;display:grid;
    grid-template-columns:repeat(24,1fr);column-gap:0;font-size:var(--hw)}
  .hw-1{grid-column:11/25;grid-row:1}
  .hw-2{grid-column:1/18;grid-row:2}
  .hw-3{grid-column:1/20;grid-row:3}
  .hero-note-a{grid-column:1/11;grid-row:1;justify-self:end;align-self:end;
    text-align:right;padding:0 clamp(14px,1.3vw,24px) .5em 0}
  .hero-note-b{grid-column:18/25;grid-row:2;justify-self:start;align-self:center;
    padding-left:clamp(14px,1.3vw,24px)}
}

.hero-rule{margin-top:clamp(26px,3.2vw,44px);display:grid;gap:12px}
.hero-rule hr{border:0;border-top:1px solid var(--ink);opacity:.16;margin:0;width:100%}
.hero-place{margin:0;font-size:clamp(11px,.85vw,13px);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hero-sign{margin:0;display:flex;align-items:baseline;gap:.38em;flex-wrap:wrap;
  font:300 clamp(1.3rem,2.4vw,2.2rem)/1 var(--sans);letter-spacing:-.012em}
.hero-sign strong{font-weight:700}
@media(min-width:900px){
  .hero-rule{grid-template-columns:1fr auto auto;align-items:center;
    column-gap:clamp(18px,2.4vw,40px)}
  .hero-rule hr{order:1}.hero-place{order:2}.hero-sign{order:3}
}

.hero-foot{margin-top:clamp(28px,3.4vw,50px);display:grid;gap:18px}
.hero-links{display:flex;gap:clamp(20px,3vw,38px)}
.hero-links .text-link>span:last-child{transform:none}
.hero-links .text-link:hover>span:last-child{transform:translateY(2px)}
.hero-current{margin:0;font-size:15px;line-height:1.6;max-width:42ch}
@media(min-width:900px){
  .hero-foot{grid-template-columns:auto 1fr;align-items:end;gap:var(--gap)}
  .hero-current{justify-self:end;text-align:right}
}

/* ---------------- vitrine em órbita ----------------
   Uma marca em foco, as demais em segundo plano. Placas 3:2 com logos
   oficiais; os criativos ficam nos cases. A sombra mantém a sensação de
   objeto flutuante sem dominar a composição, especialmente no celular.

   Fora da órbita (tela estreita, movimento reduzido, sem JS) a mesma lista é
   uma grade. Nenhum link depende do script. */
.roll{padding-top:clamp(28px,3.4vw,52px);padding-bottom:clamp(64px,7vw,110px);
  border-top:1px solid rgba(23,23,23,.1);--roll-card:clamp(180px,15vw,250px);
  /* --roll-steps conta TRANSIÇÕES, não marcas: seis marcas são cinco passagens
     de uma para a outra, e é sobre elas que o JS distribui o progresso
     (`head = progress * (total - 1)`). Acrescentou marca? Some 1 aqui.
     --roll-pace é quanto de rolagem cada passagem custa — é este o número a
     mexer se a vitrine parecer corrida ou arrastada. */
  --roll-steps:5;--roll-pace:56vh}
.roll-head{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:12px clamp(24px,4vw,64px);
  margin-bottom:clamp(30px,4vw,60px)}
.roll-lead{margin:0;font-size:13px;line-height:1.5;color:var(--muted);max-width:46ch}
.roll-stage{width:calc(100% - var(--gutter)*2);max-width:1440px;margin-inline:auto}
.roll-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,48px) clamp(16px,2.4vw,32px);margin:0;padding:0;list-style:none}
.roll-item>a{display:block}
.roll-shot{display:grid;place-items:center;position:relative;overflow:hidden;
  background:#fff;aspect-ratio:3/2;border-radius:var(--r);box-shadow:var(--float)}
/* AMS e Syntax só existem em negativo: a placa escura é a aplicação correta
   da marca, não um efeito. As outras quatro somem no escuro. */
.roll-shot.is-reverse{background:var(--ink)}
/* Altura ótica por marca (--lh no HTML): sem isso a Reformax, que é só
   palavra e muito larga, pesaria o dobro da Evolue ao lado. */
.roll-shot img{width:76%;height:var(--lh,18%);object-fit:contain}
.roll-name{display:block;margin-top:14px}
.roll-label{display:block;font:500 clamp(19px,2.1vw,26px)/1.14 var(--sans);
  letter-spacing:-.04em}
.roll-meta{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}
@media(min-width:760px){
  .roll-items{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  /* O pin é do navegador: sticky faz o que o ScrollTrigger fazia, de graça. */
  .roll-on .roll{padding-bottom:0}
  .roll-on .roll-track{position:relative;height:calc(100vh + var(--roll-steps) * var(--roll-pace))}
  .roll-on .roll-stage{position:sticky;top:0;isolation:isolate;height:100vh;width:100%;max-width:none;
    margin:0;overflow:hidden}
  .roll-on .roll-items{display:block;height:100%;gap:0}
  .roll-on .roll-item{position:absolute;inset:0}
  .roll-on .roll-item>a{position:absolute;inset:0;pointer-events:none}
  .roll-on .roll-name,.roll-on .roll-shot{position:absolute;left:0;top:50%;margin:0;
    pointer-events:none;will-change:transform,opacity}
  .roll-on .roll-name{width:max-content;max-width:40vw;text-align:center}
  .roll-on .roll-label{font-size:clamp(36px,4vw,68px);letter-spacing:-.05em}
  .roll-on .roll-meta{margin-top:12px}
  /* na própria seção: declarada no html, a var perderia para a da seção */
  .roll-on .roll{--roll-card:clamp(260px,25vw,390px)}
  .roll-on .roll-shot{width:var(--roll-card);height:auto}
  /* Fantasma não é alvo: só a marca em foco recebe clique. */
  .roll-on .roll-item.is-focus .roll-name,.roll-on .roll-item.is-focus .roll-shot{pointer-events:auto}
}

.roll-item>a:focus-visible .roll-shot,.roll-item>a:focus-visible .roll-label{
  outline:2px solid currentColor;outline-offset:7px}
@media(hover:hover) and (pointer:fine){
  .roll-shot{transition:box-shadow var(--dur-medium) var(--ease)}
  html:not(.roll-on) .roll-shot{transition:transform var(--dur-medium) var(--ease),box-shadow var(--dur-medium) var(--ease)}
  .roll-item>a:hover .roll-shot{transform:translateY(-6px);
    box-shadow:0 20px 42px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.055)}
  .roll-item>a:hover .roll-label{text-decoration:underline;text-underline-offset:.16em;
    text-decoration-thickness:1px}
}
@media(prefers-reduced-motion:reduce){.roll-shot{transition:none}}

/* A seta de canto é o mesmo sinal que o resto do site usa para "imagem é link". */
.roll-on .roll-shot .visual-corner{opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.roll-on .roll-item.is-focus .roll-shot .visual-corner{opacity:1}

/* Seção fixada sem saída à vista desorienta: a régua diz quanto falta.
   É informação, não enfeite — por isso só existe dentro da órbita. */
.roll-progress{display:none}
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  .roll-on .roll-progress{display:block;position:absolute;left:var(--gutter);right:var(--gutter);
    bottom:clamp(26px,3.2vw,44px);height:1px;background:rgba(23,23,23,.12)}
  .roll-on .roll-progress>span{display:block;height:100%;background:var(--ink);
    transform:scaleX(var(--roll-p,0));transform-origin:0 50%}
}
@media(prefers-reduced-motion:reduce){.roll-on .roll-shot .visual-corner{transition:none}}

/* ================= página de case — 15/09/2026 =================
   Diagnóstico do Paulo: "o site fica muito grande, numa disposição muito ruim
   de leitura". Estava certo. O export do site tem 1440×2517; renderizado
   inteiro numa coluna de 1060px vira uma tira de 1850px de altura com texto
   ilegível. A correção é a janela: altura fixa e harmônica, o export rolando
   dentro dela, e o tamanho real a um clique.

   Três atos e uma espinha só de alinhamento. A página anterior usava grade de
   12 colunas com o texto começando na coluna 4, o que cria uma segunda margem
   e faz o olho perder o prumo entre um bloco e outro. */

.case-head{padding:clamp(18px,2.4vw,32px) 0 clamp(34px,4vw,56px)}
.case-top{display:grid;gap:clamp(28px,4vw,64px);align-items:end}
.case-title .case-name{font:600 clamp(48px,6.4vw,104px)/1 var(--sans);letter-spacing:-.055em}
.case-title .case-headline{margin-top:clamp(14px,1.6vw,22px);
  font:500 clamp(22px,2.6vw,38px)/1.16 var(--sans);letter-spacing:-.035em;
  max-width:20ch;text-wrap:balance;color:var(--muted)}
/* a mesma placa da vitrine: quem chegou pela órbita reencontra o objeto */
.case-plate{display:grid;place-items:center;background:#fff;aspect-ratio:3/2;
  border-radius:var(--r);box-shadow:var(--float);width:clamp(230px,26vw,350px)}
.case-plate.is-reverse{background:var(--ink)}
.case-plate img{width:74%;height:var(--lh,18%);object-fit:contain}

.case-facts{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(23,23,23,.14)}
.case-fact dt{font-size:12px;letter-spacing:.035em;color:var(--muted);margin-bottom:8px}
.case-fact dd{margin:0;font-size:15px;line-height:1.55;max-width:44ch}

.case-block{padding-block:clamp(44px,5.4vw,84px)}
.case-block>h2,.rail-head h2{font:500 clamp(22px,2.2vw,30px)/1.2 var(--sans);
  letter-spacing:-.035em;margin-bottom:clamp(20px,2.4vw,32px)}

/* a janela. proporção fixa: é ela que impede o export de esticar a página */
.screen-layout{display:grid;gap:clamp(24px,3vw,48px)}
.screen{position:relative;overflow:hidden;display:block;background:#fff;
  aspect-ratio:16/10;border-radius:var(--r);box-shadow:var(--float)}
.screen img{position:absolute;inset:0 0 auto;width:100%;height:auto;
  will-change:transform}
.screen .visual-corner{z-index:2}
.screen-note p{margin:0;font-size:15px;line-height:1.6;max-width:52ch;color:var(--muted)}
.screen-note p+p{margin-top:1.05em}
.screen-note p:first-child{color:var(--ink)}
/* Sem site, o bloco de texto ficaria sozinho numa coluna e metade da página
   vazia. Em duas colunas ele ocupa a faixa sem esticar a medida de leitura. */
.screen-note.is-split p{max-width:44ch}
@media(min-width:860px){
  .screen-note.is-split{display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(28px,4vw,64px);align-items:start}
  .screen-note.is-split p+p{margin-top:0}
}
.screen-note .text-link{margin-top:18px}

/* criativos: uma linha só, sangrando na borda direita para que a peça cortada
   seja o próprio convite a arrastar. Peça nova é um <figure> a mais. */
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.rail-head h2{margin-bottom:0}
.rail-tools{display:flex;align-items:center;gap:8px}
.rail-tools[hidden]{display:none}
.rail-step{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d8d8d8;border-radius:50%;font-size:20px}
.rail-step:disabled{opacity:.28;cursor:default}
.rail-step:focus-visible{outline-offset:3px}
.rail-hint{margin-right:8px!important}
.rail-hint{margin:0;font-size:13px;color:var(--muted);opacity:0;
  transition:opacity var(--dur-fast) var(--ease)}
.rail-hint.is-on{opacity:1}
.rail{--piece-height:clamp(300px,31vw,420px);display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding-bottom:14px;
  margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter);
  scrollbar-width:none;
  /* A peça some por trás do degradê em vez de ser cortada na borda. As duas
     faixas são zero por padrão e o JS só abre a do lado onde ainda há peça:
     um degradê fixo à esquerda no início mentiria, dizendo que há algo antes. */
  --fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%)}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.piece{flex:0 0 calc(var(--piece-height) * var(--piece-ratio,.75));width:calc(var(--piece-height) * var(--piece-ratio,.75));min-width:0;margin:0;scroll-snap-align:start;max-width:none}
.piece>a{display:block;position:relative;overflow:hidden;background:var(--soft);
  width:100%;height:var(--piece-height)}
/* Altura comum, proporção original e legenda na largura da peça. */
.piece img{width:100%;height:100%;object-fit:contain;object-position:50% 0}
/* O filete é o mesmo recurso da faixa de fatos lá em cima: ele dá à legenda o
   estatuto de campo, não de texto solto, e alinha todas as peças numa linha de
   base comum ao longo da fileira. */
.piece figcaption{margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(23,23,23,.14);
  font-size:12px;line-height:1.45;letter-spacing:.01em;color:var(--muted)}

@media(min-width:860px){
  .case-top{grid-template-columns:minmax(0,1fr) auto}
  .case-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .screen-layout{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}
}
@media(max-width:600px){
  .case-plate{width:200px}
  .rail{--piece-height:clamp(270px,78vw,340px)}
  .rail-hint{display:none}
  .case-title .case-name{font-size:clamp(40px,10vw,56px)}
  .case-title .case-headline{font-size:24px;max-width:25ch}
}
@media(hover:hover) and (pointer:fine){
  .rail{cursor:grab}
  .screen{transition:box-shadow var(--dur-medium) var(--ease)}
  .screen:hover{box-shadow:0 20px 42px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.055)}
}

/* Interface: a proporção do arquivo é parte da leitura do produto. */
.interface-block{margin-top:clamp(48px,5vw,72px)}
.interface-block h3{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.035em;margin-bottom:24px}
.interface-preview{display:block;position:relative;background:#ecf2f9;border-radius:var(--r);overflow:hidden;box-shadow:var(--float)}
.interface-preview img{width:100%;height:auto}
.creative-single{display:grid;gap:var(--gap);align-items:center}
.creative-single .screen-note{max-width:44ch}
@media(min-width:860px){.creative-single{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.creative-single .rail{margin-right:0;padding-right:0;justify-content:center;background:var(--soft);padding:clamp(24px,3vw,44px)}}
@media(max-width:600px){.roll-shot{border-radius:12px}.roll-shot img{height:calc(var(--lh,18%) * 1.24)}.case-top{gap:24px}.case-plate{width:164px}.case-facts{margin-top:32px}.hero-links .text-link{font-size:14px}}
/* Nada no desktop deve forçar palavras ou o convite a sair da grade. */
.case-title{min-width:0}
.case-title .case-headline{font-size:clamp(24px,2.6vw,38px);max-width:24ch}
.roll-exit{display:none}
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
 .roll-on .roll-exit{display:flex;position:absolute;bottom:52px;left:var(--gutter);right:var(--gutter);justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
 .roll-exit a{display:inline-flex;align-items:center;gap:20px;min-height:44px}
}

/* Família vetorial própria: mesma grade, peso e terminais em todas as ações. */
/* O sprite é só um depósito de símbolos. Em `display:inline` ele gera uma
   caixa de linha e empurra a página inteira — 25px, medidos. Fora do fluxo. */
.ui-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon{display:block;width:18px;height:18px;flex:none;overflow:visible;stroke-width:1.6}
.visual-corner .ui-icon{width:22px;height:22px}
.next-project .ui-icon{width:clamp(28px,3vw,44px);height:clamp(28px,3vw,44px)}
.menu-symbol,.zoom-symbol{display:grid;place-items:center;width:18px;height:18px}
.menu-symbol .ui-icon,.zoom-symbol .ui-icon{grid-area:1/1}
.menu-symbol .icon-close,.zoom-symbol .icon-fit{display:none}
.menu-toggle[aria-expanded=true] .icon-menu{display:none}
.menu-toggle[aria-expanded=true] .icon-close{display:block}
.lightbox-zoom{display:inline-flex;align-items:center;gap:12px}
.lightbox.is-zoomed .zoom-symbol .icon-expand{display:none}
.lightbox.is-zoomed .zoom-symbol .icon-fit{display:block}
.back-link:hover>span:last-child{transform:translateX(-2px)}
@media(prefers-reduced-motion:reduce){.text-link>span:last-child,.back-link>span:last-child{transition:none}}

/* Refino móvel: desenho menor, área de toque preservada. */
@media(max-width:700px){
 .ui-icon{width:16px;height:16px}
 .menu-symbol,.zoom-symbol{width:16px;height:16px}
 .visual-corner{right:14px;bottom:12px}
 .visual-corner .ui-icon{width:18px;height:18px}
 .next-project .ui-icon{width:26px;height:26px}
 .rail-step{width:44px;height:44px}
 .text-link,.back-link{min-height:44px}
}

/* O retrato apresenta a autoria depois da seleção de projetos. */
.about-person{grid-column:1/5;min-width:0}
.about-person>.eyebrow{padding-top:8px;margin-bottom:28px}
.about-portrait{width:100%;max-width:320px}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.about-portrait figcaption{margin-top:16px;line-height:1.45}
.portrait-name{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em}
.portrait-role{display:block;margin-top:4px;font-size:13px;color:var(--muted);max-width:22ch}
.portfolio-home .about-content{grid-column:5/13}
@media(max-width:700px){
 .about-person{margin-bottom:32px}
 .about-person>.eyebrow{padding:0;margin-bottom:24px}
 .about-portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px;align-items:end;max-width:360px}
 .about-portrait img{max-width:180px}
 .about-portrait figcaption{margin:0;padding-bottom:2px}
}

/* Recorte editorial: uma decisão, sua aplicação e acesso ao case. */
.study{padding-block:clamp(64px,7vw,110px) clamp(80px,9vw,140px);scroll-margin-top:32px}
.study-intro{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(28px,4vw,56px)}
.study-index{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.study-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.study-copy h2{font-size:clamp(36px,3.7vw,58px);line-height:1.05;letter-spacing:-.05em;max-width:15ch;text-wrap:balance}
.study-deck{margin-top:20px;font-size:18px;line-height:1.45;max-width:30ch;color:var(--muted)}
.study-decisions{margin-block:32px;display:grid;gap:22px;max-width:40ch}
.study-decisions dt{font-size:12px;color:var(--muted);margin-bottom:6px}
.study-decisions dd{font-size:16px;line-height:1.5}
.study-board{display:block;position:relative;background:#e9e4f5;padding:clamp(20px,3vw,44px);padding-bottom:clamp(38px,4vw,60px);overflow:hidden}
.study-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,54px)}
.study-brand img{width:clamp(72px,8vw,112px);height:auto}
.study-brand span{font-size:11px;color:#494157;text-align:right}
.study-dashboard{display:block;width:100%;height:auto;box-shadow:0 14px 30px rgba(40,22,74,.12);border-radius:5px}
.study-open{position:absolute;right:18px;bottom:15px}
.study-visual figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:14px;max-width:52ch}
.study-board:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.portfolio-home .about{row-gap:28px}
.about>.about-heading{grid-column:1/-1;padding:0;margin:0}
.about-person{align-self:start}
.about-portrait{max-width:300px}
.about-portrait figcaption{border-top:1px solid rgba(23,23,23,.12);padding-top:14px}
.portfolio-home .about-content{align-self:start}
@media(max-width:859px){
 .study-layout{display:flex;flex-direction:column;align-items:stretch;gap:24px}
 .study-copy{display:contents}
 .study-copy h2{order:0;max-width:21ch;font-size:clamp(34px,6vw,48px)}
 .study-deck{order:1;margin:0;max-width:40ch}
 .study-visual{order:2;align-self:center;max-width:640px;width:100%;margin-block:8px}
 .study-decisions{order:3;margin:0;max-width:none;grid-template-columns:1fr 1fr;gap:24px}
 .study-copy>.text-link{order:4;align-self:flex-start}
}
@media(max-width:700px){
 .about>.about-heading{margin-bottom:24px}
 .about-person{margin-bottom:32px}
 .about-portrait{align-items:center}
}
@media(max-width:440px){
 .study-decisions{grid-template-columns:1fr;gap:18px}
 .study-copy h2{max-width:16ch}
 .study-brand{gap:14px}
 .study-brand span{max-width:12ch}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .study-dashboard{transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}
 .study-board:hover .study-dashboard{transform:translateY(-4px);box-shadow:0 20px 40px rgba(40,22,74,.16)}
}

/* ===== Páginas de case, layout v2 =====================================
   Referência trazida pelo Paulo: a entrega abre a página em corpo grande,
   dois trabalhos exemplificam, o resumo explica e os demais exemplares
   fecham. Vale só para os cases marcados em LAYOUT_V2 no gerador.
   Peça criativa fica chapada: a sombra flutuante (--float) é da placa de
   marca e das telas, não da obra. */
.case-hero{padding:clamp(28px,5vw,64px) 0 clamp(64px,11vw,150px);text-align:center}
.case-hero .back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(40px,8vw,110px)}
.case-hero .case-name{margin:0;font-size:13px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.case-deliverable{margin:14px 0 0;font-size:clamp(46px,7.6vw,132px);font-weight:600;
  letter-spacing:-.045em;line-height:.94}

/* Dois trabalhos lado a lado; a linha de meta fecha o bloco. */
.case-pair{padding-bottom:clamp(56px,8vw,110px)}
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.pair-item{position:relative;margin:0;overflow:hidden;border-radius:10px;background:#efefed}
.pair-item a{display:block;position:relative}
.pair-item img{display:block;width:100%;height:auto}  /* obra inteira: recorte só em prévia */
.pair-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;
  margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(23,23,23,.12)}
.pair-meta div{display:flex;gap:10px;align-items:baseline;min-width:0}
.pair-meta dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pair-meta dd{margin:0;font-size:14px}

/* Resumo: rótulo e marca de um lado, o argumento do outro. */
.case-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,80px);padding-bottom:clamp(64px,10vw,130px);align-items:start}
.summary-name{margin:10px 0 0;font-size:clamp(34px,5vw,76px);font-weight:600;
  letter-spacing:-.04em;line-height:1}
.summary-body .case-plate{width:min(100%,190px);margin-bottom:22px;border-radius:var(--r);
  box-shadow:var(--float)}
.summary-lead{margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.45}
.summary-body p+p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--muted)}

/* Demais exemplares, em largura cheia. */
.case-more{padding-bottom:clamp(56px,8vw,110px)}
.more-title{margin:0 0 clamp(20px,3vw,38px);font-size:13px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.more-item{position:relative;margin:0 0 clamp(16px,2.4vw,34px)}
.more-item a{display:block;position:relative;overflow:hidden;border-radius:10px}
.more-item img{display:block;width:100%;height:auto}
.more-item figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted)}

@media(max-width:859px){
  .case-summary{grid-template-columns:1fr}
}
@media(max-width:600px){
  .pair-grid{grid-template-columns:1fr}
  .pair-meta{flex-direction:column;gap:10px}
}

/* Rede global de movimento reduzido. As regras especificas espalhadas pelo CSS
   continuam valendo — elas desligam transform e filter, nao so o tempo. Esta
   aqui e o piso: nenhuma animacao escapa, inclusive as que vierem depois. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}