/* ==========================================================
   Marcus Ribeiro · v5 (estrutura Rami Voss, ID própria)
   4 páginas: Início · O trabalho · Processo · Aplicar
   Neue Haas Grotesk Display 300/700 · #000 · #F6E9DD · #6A0000
   ========================================================== */

@font-face {
  font-family: "Neue Haas";
  src: url("../fonts/neuehaas-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: block;
  ascent-override: 81.8%; descent-override: 18.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "Neue Haas";
  src: url("../fonts/neuehaas-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
  ascent-override: 81.8%; descent-override: 18.2%; line-gap-override: 0%;
}

:root {
  --ink: #000;
  --paper: #F6E9DD;
  --wine: #6A0000;
  --bg: var(--paper);
  --fg: var(--ink);
  --f: "Neue Haas", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* medidas da Rami em 1440px, convertidas em vw */
  --m: 24px;
  --navh: 72px;
  --nav: clamp(22px, 2.36vw, 34px);       /* 34 */
  --home: min(11.6vw, calc((100svh - var(--navh) - 40px) / 4.5)); /* nome + profissão: cabe na largura e na altura */
  --lead: clamp(30px, 4.58vw, 66px);       /* 66 */
  --row: clamp(28px, 3.9vw, 56px);         /* 56 */
  --list: min(11.5vw, calc((100vw - 2 * var(--m)) / 8.6)); /* 166 */
  --block: clamp(56px, 8.13vw, 117px);     /* 117 */
  --field: clamp(26px, 3.75vw, 54px);
  --label: clamp(16px, 1.67vw, 24px);      /* 24 */
  --body: clamp(18px, 1.67vw, 24px);       /* 24 */
  --year: 14.6vw;                          /* 210 */
  --small: 14px;
  --rule: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.page-aplicar { --bg: var(--wine); --fg: var(--paper); }
.page-home { --bg: var(--ink); --fg: var(--paper); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f);
  font-weight: 700;
  font-size: var(--body);
  line-height: 1.1;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
main { flex: 1; }
h1, h2, h3, p, ol, ul, blockquote, figure, fieldset, legend { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
b { font-weight: 700; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--fg); color: var(--bg); }
[hidden] { display: none !important; }
[data-pending] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lab { font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1; }
.ico { display: inline-block; flex: none; width: 0.62em; height: 0.62em; margin-left: 0.28em; transition: transform .45s var(--ease), opacity .3s; }

/* ==========================================================
   NAV (igual em todas as páginas)
   ========================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--navh);
  padding: 0 var(--m);
  font-size: var(--nav);
  line-height: 1;
  background: var(--bg);
}
.nav__brand { padding: 6px 0; }
.nav__links { display: flex; gap: clamp(28px, 4.3vw, 62px); }
.nav__links a { display: inline-flex; align-items: center; padding: 6px 0; }
/* a seta deixa claro que é clicável; na página atual o link fica sublinhado */
.nav__links .ico { opacity: .35; }
.nav__links a:hover .ico, .nav__links a[aria-current="page"] .ico { opacity: 1; transform: translateX(3px); }
.nav__links a[aria-current="page"] .roll > span { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: 6px; }

/* troca de texto no hover: a palavra sobe e uma cópia entra por baixo */
.roll { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.3em; margin-bottom: -0.3em; }
.roll > span { display: inline-block; text-shadow: 0 1.5em currentColor; transition: transform .6s var(--ease); }
a:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-1.5em); }
[data-mag] { transition: transform .6s var(--ease); will-change: transform; }
.burger { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--navh) var(--m) 32px;
  background: var(--fg); color: var(--bg);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s .7s;
}
.menu-open .menu { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s 0s; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  padding: 10px 0 12px;
  border-top: var(--rule) solid currentColor;
  font-size: 14vw;
  line-height: 1;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}
.menu nav a:last-child { border-bottom: var(--rule) solid currentColor; }
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu__foot { margin-top: 24px; font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.5; }

/* ==========================================================
   INÍCIO (Rami: "RAMI VOSS / DESIGN / & ART / DIRECTION")
   ========================================================== */
.home {
  position: relative;
  display: flex;
  min-height: calc(100svh - var(--navh));
  padding: 0 var(--m) var(--m);
}
.home__title { position: relative; z-index: 1; flex: 1; display: flex; }
.home__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  font-size: var(--home);
  line-height: 0.78;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  padding-top: 2vh;
}
.hw { display: block; white-space: nowrap; padding-top: 0.06em; }
.hw--1 { grid-row: 1; grid-column: 1; }
.hw--2 { grid-row: 1; grid-column: 2; justify-self: end; }
.hw--3 { grid-row: 2; grid-column: 1 / -1; padding-top: 0.17em; }
.hw--4 { grid-row: 4; grid-column: 1; }
.hw--5 { grid-row: 4; grid-column: 2; justify-self: end; }
.hw--6 { grid-row: 5; grid-column: 1 / -1; justify-self: end; }

/* foto em tela cheia; o texto por cima usa mesclagem por diferença (negativo) */
.page-home .nav { position: fixed; left: 0; right: 0; background: transparent; mix-blend-mode: difference; color: var(--paper); }
.page-home .home { min-height: 100svh; padding-top: var(--navh); overflow: hidden; }
.home__bg { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.home__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.home__title { mix-blend-mode: difference; color: var(--paper); }

/* ==========================================================
   O TRABALHO (Rami About)
   ========================================================== */
.about { padding: 0 var(--m); }
.about__hero {
  --about: min(4.7vw, calc((100svh - var(--navh)) / 11));
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--m);
  height: calc(100svh - var(--navh));
  min-height: 560px;
  padding: 1vh 0 var(--m);
}
.about__title {
  grid-column: 7 / -1; grid-row: 1;
  font-size: var(--about);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  text-wrap: balance;
}
.about__media { grid-column: 1 / 6; grid-row: 1 / -1; position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.about__media img {
  position: absolute; left: -3%; top: -3%;
  display: block; width: 106%; height: 106%;
  object-fit: cover; object-position: 50% 28%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.about__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 0 18px 16px;
  mix-blend-mode: difference;
  font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1;
}
.about__cols { grid-column: 7 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); }
.about__col { padding-top: 12px; border-top: var(--rule) solid currentColor; }
.about__col .lab { display: flex; gap: 0.6em; margin-bottom: 18px; }
.about__col p { font-weight: 300; }
.about__list { margin-top: 20vh; }
.list__intro { max-width: 30em; margin-bottom: 24px; font-weight: 300; }

/* Linhas com fio (Rami: 56px, número à direita) */
.rows { border-top: var(--rule) solid currentColor; }
.row { border-bottom: var(--rule) solid currentColor; }
.row__head {
  display: flex; align-items: baseline; gap: 20px;
  width: 100%;
  padding: 6px 0 8px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--row);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}
.row__t { flex: 1; transition: transform .45s var(--ease); }
.row__head:hover .row__t { transform: translateX(0.25em); }
.row__plus { position: relative; flex: none; width: 0.55em; height: 0.55em; align-self: center; }
.row__plus::before, .row__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.09em; margin-top: -0.045em; background: currentColor; transition: transform .45s var(--ease); }
.row__plus::after { transform: rotate(90deg); }
.row.open .row__plus::after { transform: rotate(0deg); }
.row__head:focus-visible { outline-offset: -4px; }

.row__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease), visibility 0s; }
.js .row:not(.open) > .row__body, .js .work:not(.open) > .row__body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--ease), visibility 0s .6s; }
.row__in { overflow: hidden; min-height: 0; }
.row__c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px var(--m);
  padding: 8px 0 32px;
  font-weight: 300;
}
.row__c > p, .tags { grid-column: 2; max-width: 26em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 7px 12px 6px; border: var(--rule) solid currentColor; font-weight: 700; font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1; }

/* Link grande de próximo passo (fim das páginas internas) */
.next {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18vh;
  padding: 10px 0 12px;
  border-top: var(--rule) solid currentColor;
  border-bottom: var(--rule) solid currentColor;
  font-size: var(--row);
  line-height: 1;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  transition: background-color .3s, color .3s, padding .45s var(--ease);
}
.next .ico { width: 1em; height: 1em; }
.next:hover { background: var(--wine); color: var(--paper); padding-left: 0.3em; padding-right: 0.3em; }

/* ==========================================================
   PROCESSO (Rami Work: lista gigante)
   ========================================================== */
.works { padding: 0 var(--m); }
.works__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px var(--m);
  align-items: end;
  min-height: calc(34vh - var(--navh));
  padding: 6vh 0 3vh;
}
.works__title { font-size: var(--nav); text-transform: uppercase; font-feature-settings: "case" 1; }
.works__head p { max-width: 26em; font-weight: 300; }
.works__list { border-top: var(--rule) solid currentColor; }
.work { border-bottom: var(--rule) solid currentColor; }
.work__head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%;
  position: relative;
  padding: 0.16em 0 0.06em;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--list);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}
.work__t { transition: transform .5s var(--ease); }
.work__head .ico { position: absolute; right: 0; top: 50%; width: 0.5em; height: 0.5em; margin: -0.2em 0 0; opacity: 0; transform: translateX(-20px); }
.work__head:hover .work__t { transform: translateX(0.18em); }
.work__head:hover .ico, .work__head:focus-visible .ico { opacity: 1; transform: none; }
.work.open .work__head .ico { opacity: 1; transform: rotate(90deg); }
.work__head:hover .work__t, .work.open .work__t { color: var(--wine); }
.work__head:focus-visible { outline-offset: -4px; }
.work__c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px var(--m);
  padding: 20px 0 40px;
  font-weight: 300;
}
.work__meta { font-weight: 700; font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1; }
.work__text { max-width: 26em; }
.imm { grid-column: 1 / -1; margin-top: 16px; border-top: 1px solid currentColor; }
.imm li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--m); align-items: center; padding: 10px 0 8px; border-bottom: 1px solid currentColor; }
.imm__name { font-weight: 700; font-size: var(--row); line-height: 1; text-transform: uppercase; font-feature-settings: "case" 1; }
.imm p { max-width: 26em; }

.statement { margin-top: 22vh; }
.statement p { max-width: 11em; font-size: var(--block); line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; font-feature-settings: "case" 1; text-wrap: balance; }
.statement footer { margin-top: 24px; font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; }

/* ==========================================================
   APLICAR (Rami Contact)
   ========================================================== */
.contact { padding: 0 var(--m); }
.contact__top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 26em);
  gap: 32px var(--m);
  align-items: end;
  padding-top: 20vh;
}
.contact__title {
  font-size: var(--block);
  line-height: 0.78;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}
.cl { display: block; padding-top: 0.04em; }
.contact__info { display: grid; gap: 20px; font-weight: 300; }
.contact__info .lab { font-weight: 700; }
.contact__links { display: flex; flex-direction: column; margin-top: 14vh; }
.contact__links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0 8px;
  border-bottom: var(--rule) solid currentColor;
  font-size: var(--nav);
  line-height: 1;
}
.contact__links .ico { transform: rotate(-45deg); }
.contact__links a:hover .ico { transform: translate(4px, -4px) rotate(-45deg); }

/* Formulário: rótulo pequeno, campo gigante, fio */
.form { margin-top: 18vh; }
.form__top { margin-bottom: 18px; }
.field { position: relative; margin-bottom: 40px; border-bottom: var(--rule) solid currentColor; }
.field label, .field legend { display: block; padding: 0; font-size: var(--label); line-height: 1.1; }
.field legend { float: left; width: 100%; }
.field legend + * { clear: both; }
.field input:not([type="radio"]), .field textarea {
  display: block; width: 100%;
  padding: 12px 0 14px;
  background: transparent; border: 0; border-radius: 0; outline: none;
  font-size: var(--field);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: inherit;
}
.field textarea { resize: none; min-height: 3.4em; }
.field input::placeholder, .field textarea::placeholder { color: inherit; opacity: .5; text-transform: uppercase; font-feature-settings: "case" 1; }
.field input:not([type="radio"]):focus, .field textarea:focus { box-shadow: inset 0 -4px 0 currentColor; }
.field.is-invalid { border-bottom-width: 6px; }
.err { position: absolute; right: 0; top: 0; font-size: var(--small); letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1; }

.field--opts { border-bottom: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 14px 36px; padding: 18px 0 6px; }
.field .opt { display: inline-flex; align-items: center; gap: 14px; min-height: 46px; cursor: pointer; font-size: var(--label); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box { display: inline-block; position: relative; flex: none; width: 46px; height: 46px; border: var(--rule) solid currentColor; transition: background-color .2s; }
.opt__box::after { content: ""; position: absolute; inset: 9px; background: currentColor; transform: scale(0); transition: transform .25s var(--ease); }
.opt input:checked + .opt__box::after { transform: none; }
.opt:hover .opt__box { background: rgba(246, 233, 221, .12); }
.opt input:focus-visible + .opt__box { outline: 2px solid currentColor; outline-offset: 3px; }
.field--opts.is-invalid .opt__box { border-width: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: var(--rule) solid currentColor;
}
.form__note { font-size: var(--label); }
.form__submit {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: var(--block);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
}
.form__submit .ico { width: 0.8em; height: 0.8em; }
.form__submit:hover .ico { transform: translateX(10px); }
.form__submit[aria-busy="true"] { opacity: .6; cursor: progress; }
.form__status { flex: 1 1 100%; font-size: var(--label); }

/* ==========================================================
   RODAPÉ (Rami: links à esquerda, ©ano gigante à direita)
   ========================================================== */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 22vh;
  padding: 0 var(--m);
  overflow: hidden;
}
.foot__links { display: flex; flex-direction: column; padding-bottom: var(--m); font-size: var(--nav); line-height: 1.08; }
.foot__links a { width: fit-content; }
.foot__year { font-size: var(--year); line-height: 0.76; letter-spacing: -0.05em; margin-bottom: -0.04em; }

/* ==========================================================
   OBRIGADO (depois do envio; mesma superfície vinho do Aplicar)
   ========================================================== */
.thanks {
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--navh));
  padding: 6vh var(--m) var(--m);
}
.thanks__word {
  margin-top: 2vh;
  font-size: calc((100vw - 2 * var(--m)) / 5.3);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-feature-settings: "case" 1;
  white-space: nowrap;
  padding-top: 0.06em;
}
.thanks__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px var(--m);
  align-items: end;
  margin-top: auto;
  padding-top: 10vh;
}
.thanks__msg { display: grid; gap: 16px; max-width: 26em; font-weight: 300; }
.thanks__lead { font-size: var(--nav); font-weight: 700; line-height: 1; }
.thanks__links { margin-top: 0; }
.thanks__links .lab { padding-bottom: 10px; border-bottom: var(--rule) solid currentColor; }
.thanks__links .is-int .ico { transform: none; }
.thanks__links .is-int:hover .ico { transform: translateX(6px); }

/* ==========================================================
   CURSOR (só com mouse; criado pelo main.js)
   ========================================================== */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor__dot {
  position: absolute; left: -48px; top: -48px;
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  transform: scale(.14);
  transition: transform .55s var(--ease), background-color .3s;
}
.cursor.is-link .cursor__dot { transform: scale(.55); }
.cursor.has-label .cursor__dot { transform: scale(1); }
.cursor.is-down .cursor__dot { transform: scale(.1); }
.cursor.has-label.is-down .cursor__dot { transform: scale(.88); }
.cursor.is-text { opacity: 0; }
.cursor__label { font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; font-feature-settings: "case" 1; opacity: 0; transition: opacity .2s; }
.cursor.has-label .cursor__label { opacity: 1; transition-delay: .1s; }
/* no vinho a diferença daria ciano: lá o cursor é creme puro */
.page-aplicar .cursor { mix-blend-mode: normal; }
.page-aplicar .cursor__dot { color: var(--wine); }

/* Início: a foto e o nome reagem ao mouse em profundidades diferentes */
.home__bg { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.05); }
.home__grid { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }

/* ==========================================================
   ENTRADAS
   ========================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .home__bg img { opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease), transform 2.4s var(--ease); }
.js.is-loaded .home__bg img { opacity: 1; transform: none; }

/* ==========================================================
   CELULAR E TABLET
   ========================================================== */
@media (max-width: 899px) {
  :root {
    --m: 20px;
    --navh: 64px;
    --nav: 24px;
    --home: calc((100vw - 2 * var(--m)) / 6.2);
    --list: calc((100vw - 2 * var(--m)) / 8.6);
    --block: calc((100vw - 2 * var(--m)) / 4.3);
    --field: 19px;
    --label: 16px;
    --year: calc((100vw - 2 * var(--m)) / 3.25);
  }
  .nav__links { display: none; }
  .burger { display: block; position: relative; z-index: 45; width: 48px; height: 48px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer; }
  .burger span { position: absolute; left: 10px; width: 28px; height: 3px; background: currentColor; transition: transform .5s var(--ease); }
  .burger span:nth-child(1) { top: 18px; }
  .burger span:nth-child(2) { top: 27px; }
  .menu-open .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .menu-open .nav { background: var(--fg); color: var(--bg); }

  /* Início: mesma composição do desktop; a foto ocupa o vão do meio */
  .home__grid { grid-template-rows: auto auto auto 1fr auto auto; line-height: 0.86; padding-top: 3vh; }
  .hw--1 { grid-row: 1; grid-column: 1 / -1; }
  .hw--2 { grid-row: 2; grid-column: 1 / -1; justify-self: end; }
  .hw--3 { grid-row: 3; grid-column: 1 / -1; padding-top: 0.2em; }
  .hw--4 { grid-row: 5; }
  .hw--5 { grid-row: 5; }
  .hw--6 { grid-row: 6; }
  .home__bg img { object-position: 50% 20%; }
  .menu-open .page-home .nav, .page-home.menu-open .nav { mix-blend-mode: normal; }

  .about__hero { display: flex; flex-direction: column; height: auto; min-height: 0; padding-top: 4vh; }
  .about__title { font-size: calc((100vw - 2 * var(--m)) / 9.6); }
  .about__media { aspect-ratio: 4 / 5; margin-top: 6vh; }
  .about__media figcaption { font-size: 11px; white-space: nowrap; padding: 0 14px 12px; }
  .about__cols { grid-template-columns: 1fr; gap: 40px; margin-top: 6vh; }
  .about__list { margin-top: 14vh; }
  .row__t { min-width: 0; }
  .row__n { font-size: 0.5em; align-self: center; }
  .row__c, .work__c { grid-template-columns: 1fr; }
  .statement p { font-size: calc((100vw - 2 * var(--m)) / 5.4); }
  .row__c > p, .tags { grid-column: 1; }
  .imm li { grid-template-columns: 1fr; }

  .works__head { grid-template-columns: 1fr; min-height: 0; padding: 8vh 0 4vh; }
  .work__head .ico { opacity: 1; transform: none; }

  .contact__top { grid-template-columns: 1fr; padding-top: 10vh; }
  .contact__links { margin-top: 8vh; }
  .thanks { padding-top: 5vh; min-height: 0; }
  .thanks__row { grid-template-columns: 1fr; padding-top: 8vh; }
  .form { margin-top: 12vh; }
  .opts { flex-direction: column; gap: 10px; }
  .opt { font-size: 18px; }
  .opt__box { width: 36px; height: 36px; }
  .opt__box::after { inset: 7px; }
  .err { position: static; margin: -2px 0 10px; }
  .form__submit { width: 100%; justify-content: space-between; white-space: nowrap; font-size: calc((100vw - 2 * var(--m)) / 11.5); }
  .field input::placeholder, .field textarea::placeholder { font-size: 15px; text-transform: none; letter-spacing: 0; }

  .foot { flex-direction: column; align-items: flex-start; margin-top: 14vh; }
  .foot__links { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .home__bg img { transform: none !important; transition: none !important; }
  .menu, .row__body, .ico, .row__t, .work__t, .roll > span, [data-mag] { transition: none !important; }
}