:root{
  --s: calc(100vw / 1920);
  --grid: calc(48 * var(--s));

  --ink:      #262626;
  --paper:    #f9fff9;
  --olive:    #27301d;
  --brown:    #30291d;
  --yellow:   #ffe202;
  --yellow-2: #ffe57b;

  --hero-ink: #262626;
  --grass-y: 0px;

  --font-dot: 'DotGothic16', 'Courier New', monospace;
  --font-hand: 'Handjet', 'DotGothic16', monospace;
  --hand-axes: "ELGR" 1, "ELSH" 2;
}

@font-face{
  font-family: 'MisterPixel';
  src: url('../assets/fonts/MisterPixel.woff2') format('woff2'),
       local('Mister Pixel 16 pt - ToolsOne');
  font-display: swap;
}

@font-face{
  font-family: 'MisterPixelText';
  src: url('../assets/fonts/MisterPixelRegular.woff2') format('woff2'),
       local('Mister Pixel 16 pt - Regular');
  font-display: swap;
}

.greenbg{
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  background-color: var(--olive);
  pointer-events: none;
}
.gridbg{
  --fade-from: var(--grass-drop, 0px);
  background-image:
    linear-gradient(180deg,
      var(--olive) 0,
      var(--olive) calc(var(--fade-from) + 30 * var(--s)),
      rgba(39,48,29,0) calc(var(--fade-from) + 370 * var(--s))),
    repeating-linear-gradient(0deg,  rgba(249,255,249,.055) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, rgba(249,255,249,.055) 0 1px, transparent 1px var(--grid));
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--olive);
  color: var(--ink);
  font-family: var(--font-dot);
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}

img, video, canvas{ display: block; max-width: 100%; }
picture{ display: contents; }

body{ cursor: default; user-select: none; -webkit-user-select: none; }
a, button, .btn, .works__folder, .pix, .pix--rider{ cursor: pointer; }
img[src$=".png"], img[src$=".gif"]{ image-rendering: pixelated; }
a{ color: inherit; text-decoration: none; }
.pix-font{ font-family: 'MisterPixel', var(--font-dot); }

.nav{
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(68 * var(--s));
  background: var(--paper);
  z-index: 100;
  overflow: hidden;
}
.nav__pix{
  position: absolute;
  top: 0;
  height: calc(68 * var(--s));
  width: calc(260 * var(--s));
  image-rendering: pixelated;
}
.nav__pix--left{ left: 0; }
.nav__pix--right{ right: 0; }

.nav__burger{
  display: none;
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  padding: 0; border: 0; background: none;
  z-index: 3;
}
/* Menu ANIM: duas filas de cinco quadrados que se cruzam num X.
   Abrir = animacao para a frente e para no fim; fechar = a mesma ao contrario,
   para no primeiro frame. A transicao do CSS faz as duas coisas sozinha. */
.nav__burger-x{ display: block; width: 100%; height: 100%; overflow: visible; }
.nav__burger-x .mx{
  fill: var(--ink);
  transition: transform .2s cubic-bezier(.333, 0, .667, 1);
}
.nav__burger.is-open .mx--t0,
.nav__burger.is-open .mx--t4{ transform: translateY(-18.652px); }
.nav__burger.is-open .mx--t2{ transform: translateY(18.652px); }
.nav__burger.is-open .mx--b0,
.nav__burger.is-open .mx--b4{ transform: translateY(18.652px); }
.nav__burger.is-open .mx--b2{ transform: translateY(-18.652px); }

.nav__links{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1066 * var(--s));
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(44 * var(--s));
  line-height: .83;
  color: var(--ink);
}
.nav__links a{ position: relative; }
.nav__links a::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-10 * var(--s));
  height: calc(6 * var(--s));
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s steps(4);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform: scaleX(1); }

.sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sky img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
.sky.is-off, .grassband.is-off{ visibility: hidden; }

.grassband{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--grass-h, 20vh);
  z-index: 20;
  pointer-events: none;
  transform: translate3d(0, var(--grass-ease, 0px), 0);
  will-change: transform;
}

.grassband.is-landed{
  position: absolute; bottom: auto; top: var(--grass-top, 0px);
  height: var(--grass-full, var(--grass-h));
}

.grassband__clip{ position: absolute; inset: 0; overflow: hidden; }
.grassband__clip img{ position: absolute; left: 50%; top: 0; width: var(--grass-img-w, 100%); max-width: none; height: auto; transform: translateX(-50%); }

.grassdither{
  position: absolute;
  left: 0;
  display: grid;
  pointer-events: none;
  z-index: 2;
}
.grassdither i{ display: block; background: var(--olive); opacity: 0; }
.grassband .pix--rider{
  position: absolute;
  left: calc(1116 * var(--s));
  top: calc(-78.5 * var(--s));
  font-family: 'MisterPixel', var(--font-dot);
  font-size: calc(var(--size) * var(--s));
  line-height: .83;
  color: var(--color);
  --rx: 0px; --ry: 0px;
  transform: translate3d(var(--rx), var(--ry), 0) rotate(1.1deg);
  pointer-events: auto;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: transform .75s cubic-bezier(.2,1.5,.35,1);
}
.grassband .pix--rider:hover{ filter: brightness(1.15); }
.grassband .pix--rider.is-dragging{ cursor: grabbing; transition: none; }

.hero{
  position: relative;
  z-index: 2;
  height: calc(2202 * var(--s));
  overflow: hidden;
}

.hero__anim{
  position: absolute;
  left: calc(-413 * var(--s));
  top: calc(570 * var(--s));
  width: calc(1600 * var(--s));
  height: calc(900 * var(--s));
  transform: rotate(90deg);
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

.hero__hi, .hero__name, .hero__iam, .hero__role, .hero__basedin, .hero__country{
  position: absolute;
  margin: 0;
  z-index: 3;
}

.hero__hi{
  left: 50%; transform: translateX(-50%);
  top: calc(308.69 * var(--s));
  font-size: calc(115.083 * var(--s));
  line-height: .83;
  color: var(--hero-ink);
  white-space: nowrap;
}
.hero__name{
  left: 50%; transform: translateX(-50%);
  top: calc(424.69 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 600;
  --hand-w: 600;
  font-size: calc(282.745 * var(--s));
  line-height: .83;
  color: var(--hero-ink);
  white-space: nowrap;
}
.hero__iam{
  left: calc(160 * var(--s));
  top: calc(1027 * var(--s));
  font-size: calc(59.797 * var(--s));
  line-height: .83;
  color: var(--paper);
}
.hero__role{
  left: calc(160 * var(--s));
  top: calc(1097 * var(--s));
  width: calc(1052 * var(--s));
  font-size: calc(179.864 * var(--s));
  line-height: .92;
  color: var(--paper);
}
.hero__basedin{
  left: calc(1520 * var(--s));
  top: calc(1402 * var(--s));
  width: calc(240 * var(--s));
  text-align: center;
  font-size: calc(59.797 * var(--s));
  line-height: .83;
  color: var(--paper);
}
.hero__country{
  left: calc(1040 * var(--s));
  top: calc(1472 * var(--s));
  font-size: calc(179.864 * var(--s));
  line-height: .92;
  color: var(--paper);
  white-space: nowrap;
}

.hero__hint{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(940 * var(--s));
  z-index: 3;
  font-size: max(13px, calc(28 * var(--s)));
  letter-spacing: .3em;
  color: var(--paper);
  text-shadow: 0 calc(3 * var(--s)) 0 rgba(0,0,0,.35);
  animation: blink 1.4s steps(2, jump-none) infinite;
}
@keyframes blink{ 50%{ opacity: .15; } }

.physics{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  z-index: 30;
  pointer-events: none;
}
.physics--sky{ z-index: 3; }
.pix{
  position: absolute;
  left: 0; top: 0;
  font-family: 'MisterPixel', var(--font-dot);
  font-size: calc(var(--size) * var(--s));
  line-height: .83;
  color: var(--color);
  pointer-events: auto;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
}
.pix.is-dragging{ cursor: grabbing; }

.pxwipe{
  position: relative;
  z-index: 1;
  height: 100vh;
  background: var(--olive);
}
.pxwipe-grid{
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: grid;
  visibility: hidden;
}
.pxwipe-grid.is-live{ visibility: visible; }
.pxwipe-grid i{
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  opacity: 0;
  transition: opacity 90ms linear;
}
.pxwipe-grid i.on{ opacity: 1; }

.pxframe{
  margin-inline: auto;
  --sq: calc(14 * var(--s));
  --frame-bg: var(--card-bg, var(--paper));
  --frame-void: var(--olive);
  padding: calc(var(--sq) * 2);
  background-image: conic-gradient(from 90deg at 50% 50%,
    var(--frame-bg) 25%, var(--frame-void) 0 50%, var(--frame-bg) 0 75%, var(--frame-void) 0);
  background-size: calc(var(--sq) * 2) calc(var(--sq) * 2);
  background-position: 0 0;
}

.works{
  position: relative;
  overflow-x: clip;
  background: transparent;

  padding: calc(var(--grass-drop, 0px) + 145 * var(--s)) 0 0;
}
.works__head{
  position: relative;
  z-index: 7;
  height: calc(126 * var(--s));
  padding: 0 calc(160 * var(--s));
}
.works__title{ position: absolute; left: calc(160 * var(--s)); top: calc(30 * var(--s)); }
.works__title{
  margin: 0;
  font-size: calc(96.175 * var(--s));
  line-height: .83;
  color: var(--paper);
}
.works__folder{
  font-size: calc(96.175 * var(--s));
  line-height: .83;
  color: var(--paper);
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,1.6,.4,1);
}
.works__folder:hover{ transform: translateY(calc(-8 * var(--s))) rotate(-4deg); }
.works__folder:active{ transform: translateY(calc(2 * var(--s))); }

.stack{ padding: 0 calc(160 * var(--s)); position: relative; }

.stack__pin{ position: sticky; top: 0; height: 100vh; z-index: 6; pointer-events: none; }

.card{
  position: absolute;
  pointer-events: auto;
  left: 0; right: 0; top: 0;
  transform: translate3d(0, 100vh, 0) rotate(var(--tilt));
  will-change: transform;
}
.card:nth-of-type(1){ z-index: 1; }
.card:nth-of-type(2){ z-index: 2; }
.card:nth-of-type(3){ z-index: 3; }

.circanim{
  position: absolute;
  z-index: 4;

  right: calc(-1252 * var(--s));
  top: calc(-828 * var(--s));
  width: calc(2800 * var(--s));
  height: calc(1575 * var(--s));
  max-width: none;
  image-rendering: pixelated;
  pointer-events: none;
}

.card__inner{
  background: var(--card-bg);
  display: grid;
  grid-template-columns: calc(530 * var(--s)) 1fr;
  gap: calc(72 * var(--s));
  padding: calc(32 * var(--s)) calc(64 * var(--s)) calc(56 * var(--s));
}
.card__title{
  margin: 0 0 calc(24 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 500;
  --hand-w: 500;
  font-size: calc(161.957 * var(--s));
  line-height: .92;
  color: var(--ink);
}
.card__text{
  margin: 0 0 calc(28 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-size: max(14px, calc(30 * var(--s)));
  line-height: .92;
  color: var(--ink);
}
.card__inner > *{ min-width: 0; }
.card__col--media{ display: flex; flex-direction: column; gap: calc(28 * var(--s)); min-width: 0; }
.card__text{ overflow-wrap: anywhere; }
/* Caixa de imagem do card. Fica com a proporcao do Figma (708x382), mas o
   que la entra e 16:9, que nao e a mesma coisa. A imagem (ou o video) entra
   inteira, encolhida ate caber (contain) e centrada — nunca e cortada. O que
   sobra nas margens fica da cor do proprio card, por isso nao se ve.
   Enquanto nao houver nada, a caixa fica com o cinzento do Figma. */
.card__media{
  aspect-ratio: 708 / 382;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #949494;
  position: relative;
  overflow: hidden;
}
.card__media--img{ background: var(--card-bg, #949494); }
.card__media picture{ position: absolute; inset: 0; display: block; }
.card__media img,
.card__media video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.card__media video{ position: absolute; inset: 0; }
.btn{
  display: flex; align-items: center; width: 100%;
  min-width: 0; max-width: 100%;
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 500;
  --hand-w: 500;
  font-size: calc(68.374 * var(--s));
  line-height: .83;
  color: var(--olive);
}
.btn__gap{ flex: 0 0 calc(40 * var(--s)); transition: flex-basis .45s cubic-bezier(.22,.9,.25,1); }
.btn:hover .btn__gap{ flex: 1 1 auto; }

.btn__arrow{
  width: calc(46 * var(--s));
  min-width: 0;
  height: auto;
  flex: none;
  shape-rendering: crispEdges;
  transition: transform .2s steps(3);
}
.btn:hover .btn__arrow{ transform: none; }

.about{
  position: relative;
  overflow-x: clip;
  background: transparent;
  padding: calc(232 * var(--s)) 0 0;
}

.about__band{
  position: relative;
  height: calc(1037 * var(--s));
  background: var(--paper);
  color: var(--ink);
  clip-path: polygon(0 0, 100% calc(20 * var(--s)), 100% calc(100% - 22 * var(--s)), 0 100%);
}

.about__edge{
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  --sq: calc(14 * var(--s));
  height: calc(var(--sq) * 2);
  background-image: conic-gradient(from 90deg at 50% 50%,
    var(--paper) 25%, transparent 0 50%, var(--paper) 0 75%, transparent 0);
  background-size: calc(var(--sq) * 2) calc(var(--sq) * 2);
  pointer-events: none;
}
.about__edge--top{
  top: calc(232 * var(--s) - var(--sq) * 2);
  transform-origin: 0 100%;
  transform: rotate(.597deg);
}
.about__edge--bottom{
  top: calc(1269 * var(--s));
  transform-origin: 0 0;
  transform: rotate(-.656deg);
}

.about__grid{
  position: absolute;
  left: 0; top: 0; right: 0;
  padding: calc(110.73 * var(--s)) calc(162 * var(--s)) 0 calc(155 * var(--s));
  display: grid;
  grid-template-columns: calc(1060 * var(--s)) 1fr;
  gap: calc(118 * var(--s));
  align-items: start;
}
.about__title{
  margin: calc(32 * var(--s)) 0 calc(30 * var(--s));
  font-size: calc(96.175 * var(--s));
  line-height: .83;
  color: var(--ink);
}
.about__text{
  margin: 0 0 calc(38 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-size: calc(45 * var(--s));
  line-height: .92;
  text-align: justify;
  color: var(--ink);
}
.about__text:last-child{ margin-bottom: 0; }
.about__portrait{ position: relative; }
.about__portrait-frame{
  width: calc(425 * var(--s));
  margin-left: auto;
  --card-bg: var(--ink);
  --frame-void: var(--paper);
}
.about__portrait-inner{ background: #6f6f6f; }

.cvbtn{
  position: absolute;
  left: calc(722 * var(--s));
  top: calc(774.5 * var(--s));
  width: calc(427 * var(--s));
  height: calc(104 * var(--s));
  display: block;
  color: var(--ink);
  transition: transform .18s cubic-bezier(.2,1.5,.4,1);
}
.cvbtn__bar{ position: absolute; background: currentColor; }
.cvbtn__bar--t{ left: calc(10 * var(--s)); top: 0; width: calc(407 * var(--s)); height: calc(10 * var(--s)); }
.cvbtn__bar--b{ left: calc(10 * var(--s)); top: calc(94 * var(--s)); width: calc(407 * var(--s)); height: calc(10 * var(--s)); }
.cvbtn__bar--l{ left: 0; top: calc(10 * var(--s)); width: calc(10 * var(--s)); height: calc(84 * var(--s)); }
.cvbtn__bar--r{ left: calc(417 * var(--s)); top: calc(10 * var(--s)); width: calc(10 * var(--s)); height: calc(84 * var(--s)); }
.cvbtn__fill{
  position: absolute;
  left: calc(10 * var(--s)); top: calc(10 * var(--s));
  width: calc(407 * var(--s)); height: calc(84 * var(--s));
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.2,.85,.25,1);
}
.cvbtn__label{
  position: absolute;
  left: calc(31.29 * var(--s));
  top: calc(20.91 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 500;
  --hand-w: 500;
  font-size: calc(69.019 * var(--s));
  line-height: .92;
  white-space: nowrap;
  transition: color .2s linear;
}
.cvbtn__arrow{
  position: absolute;
  left: calc(360.5 * var(--s));
  top: calc(38.2 * var(--s));
  width: calc(38.45 * var(--s));
  height: auto;
  transform: rotate(89.23deg);
  transition: color .2s linear;
}
.cvbtn:hover{ transform: translateY(calc(-4 * var(--s))); }
.cvbtn:hover .cvbtn__fill{ transform: scaleY(1); }
.cvbtn:hover .cvbtn__label, .cvbtn:hover .cvbtn__arrow{ color: var(--paper); }
.cvbtn:hover .cvbtn__arrow{ animation: cvdrop .62s steps(4) infinite; }
.cvbtn:active{ transform: translateY(calc(2 * var(--s))); }
@keyframes cvdrop{
  0%   { transform: rotate(89.23deg) translateX(0); }
  55%  { transform: rotate(89.23deg) translateX(calc(16 * var(--s))); }
  100% { transform: rotate(89.23deg) translateX(0); }
}

.w{ display: inline-block; white-space: pre; }
.ch{
  display: inline-block;
  transition: transform .18s cubic-bezier(.2,1.7,.4,1);
}
.ch:hover{
  transform: translateY(-.07em);
  -webkit-text-stroke: .035em currentColor;
}

.hero__name .ch, .card__title .ch, .contact__mail .ch{
  transition: transform .18s cubic-bezier(.2,1.7,.4,1), font-variation-settings .18s linear;
}
.hero__name .ch:hover, .card__title .ch:hover, .contact__mail .ch:hover{
  -webkit-text-stroke: 0;
  font-variation-settings: "ELGR" 2, "ELSH" 2, "wght" 900;
  font-weight: 900;
}

.hero__hi .ch, .hero__name .ch{
  transition: transform .18s cubic-bezier(.2,1.7,.4,1), color .22s linear, font-variation-settings .18s linear;
}
.ch.is-lit{ color: var(--paper); }

.portdither{
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.portdither i{
  display: block;
  background: var(--paper);
  opacity: 0;
  transition: opacity .28s linear;
  transition-delay: 0ms;
}
.about__portrait-inner{ position: relative; overflow: hidden; }
.about__portrait-inner img{ transition: filter .35s linear, transform .35s cubic-bezier(.2,.9,.3,1); }
.about__portrait-frame:hover .about__portrait-inner img{ filter: contrast(1.55) saturate(.15); transform: scale(1.03); }
.about__portrait-frame:hover .portdither i{ opacity: .55; transition-delay: calc(var(--d) * 1ms); }

.reveal{ opacity: 0; transform: translateY(calc(40 * var(--s))); transition: opacity .6s linear, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in{ opacity: 1; transform: none; }

.contact{
  position: relative;
  height: calc(644 * var(--s));
  background: #3d2d17;
  overflow: hidden;
  color: var(--paper);
}
.contact__bg{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.contact__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  max-width: none;
}

.contact__anim{
  position: absolute;
  left: calc(355 * var(--s));
  top: calc(134 * var(--s));
  width: calc(1764.46 * var(--s));
  height: calc(802.87 * var(--s));
  transform: rotate(175.9deg) scaleY(-1);
  overflow: hidden;
  pointer-events: none;
}
.contact__anim canvas{
  position: absolute;
  left: 9.55%;
  top: 0;
  width: 80.89%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
}

.contact__title{
  position: absolute;
  left: calc(161 * var(--s));
  top: calc(59 * var(--s));
  margin: 0;
  font-family: var(--font-dot);
  font-size: calc(86.944 * var(--s));
  line-height: normal;
  color: #f7dd6d;
}
.contact__mail{
  position: absolute;
  left: calc(161 * var(--s));
  top: calc(198 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 500;
  --hand-w: 500;
  font-size: calc(157.806 * var(--s));
  line-height: normal;
  color: var(--paper);
  white-space: nowrap;
}
.contact__mail:hover{ color: #f7dd6d; }
.contact__social{ position: absolute; left: 0; top: calc(362 * var(--s)); width: 100%; }
.contact__link{
  position: absolute;
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-weight: 500;
  --hand-w: 500;
  font-size: calc(91.716 * var(--s));
  line-height: normal;
  text-transform: lowercase;
  color: var(--paper);
  white-space: nowrap;
}
.contact__link--be{ left: calc(161 * var(--s)); }
.contact__link--in{ left: calc(530.06 * var(--s)); }
.contact__link:hover{ color: #f7dd6d; }
.contact__dot{
  position: absolute;
  left: calc(465 * var(--s));
  top: calc(43.66 * var(--s));
  width: calc(15.056 * var(--s));
  height: calc(15.056 * var(--s));
  background: #f7dd6d;
}
.copied{
  position: fixed;
  z-index: 120;
  padding: calc(8 * var(--s)) calc(18 * var(--s));
  background: #f7dd6d;
  color: var(--olive);
  font-family: var(--font-dot);
  font-size: max(14px, calc(30 * var(--s)));
  line-height: 1;
  letter-spacing: .08em;
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s linear;
}
.copied.is-on{ opacity: 1; }

/* ==========================================================================
   BASE DE TELEMOVEL - frame de 710 do Figma (FIRST SCENE TEL / SCROLLED TEL)
   Todas as medidas sao os numeros do Figma multiplicados por --m,
   onde --m = largura do ecra / 710. Mesma logica do --s de 1920.
   ========================================================================== */
/* ============ CREDITOS ============
   Barra por baixo do rodape. Base de computador (1920) aqui, base de
   telemovel (710) no bloco dos 900px. O desenho dos quadrados e o mesmo
   nas duas, so muda o tamanho da celula (--cell). */
.credits{
  position: relative;
  overflow-x: clip;
  background: #1e1e1e;
  height: calc(111 * var(--s));
  --cell: calc(15 * var(--s));
}
.credits__t{
  position: absolute;
  margin: 0;
  top: calc(20 * var(--s));
  font-family: var(--font-hand);
  font-variation-settings: var(--hand-axes), "wght" var(--hand-w, 400);
  font-size: calc(64.607 * var(--s));
  line-height: normal;
  color: #ffffff;
  white-space: nowrap;
}
.credits__t--a{ left: calc(161 * var(--s)); }
.credits__t--b{ left: calc(682.06 * var(--s)); }
.credits__t--c{ left: calc(1047.11 * var(--s)); }

.credits__sep{
  position: absolute;
  display: block;
  top: calc(39 * var(--s));
  width: calc(45.056 * var(--s));
  height: calc(45.056 * var(--s));
}
.credits__sep i{
  position: absolute;
  display: block;
  background: #ffffff;
  width: calc(15.056 * var(--s));
  height: calc(15.056 * var(--s));
}
.credits__sep--1{ left: calc(602 * var(--s)); }
.credits__sep--2{ left: calc(967.06 * var(--s)); }

/* os dois separadores tem desenhos diferentes */
.credits__sep--1 i:nth-child(1){ left: var(--cell);            top: var(--cell); }
.credits__sep--1 i:nth-child(2){ left: 0;                      top: calc(var(--cell) * 2); }
.credits__sep--1 i:nth-child(3){ left: calc(var(--cell) * 2);  top: calc(var(--cell) * 2); }
.credits__sep--1 i:nth-child(4){ left: calc(var(--cell) * 2);  top: 0; }

.credits__sep--2 i:nth-child(1){ left: var(--cell);            top: var(--cell); }
.credits__sep--2 i:nth-child(2){ left: var(--cell);            top: calc(var(--cell) * 2); }
.credits__sep--2 i:nth-child(3){ left: 0;                      top: var(--cell); }
.credits__sep--2 i:nth-child(4){ left: calc(var(--cell) * 2);  top: 0; }

@media (max-width: 900px){

  /* ---------- barra de topo ---------- */
  .nav{ height: calc(68 * var(--m)); }
  .nav__pix{ height: calc(68 * var(--m)); width: calc(170 * var(--m)); }
  .nav__pix--right{ display: none; }
  .nav__burger{
    display: block;
    left: auto; right: calc(19 * var(--m));
    width: calc(58 * var(--m));
    height: calc(58 * var(--m));
  }

  .nav__links{
    position: fixed;
    left: 0; top: calc(68 * var(--m));
    width: 100%; height: calc(100dvh - 68 * var(--m));
    transform: none;
    flex-direction: column;
    justify-content: center;
    gap: 5vh;
    background: var(--paper);
    font-size: calc(88 * var(--m));
    clip-path: inset(0 0 100% 0);
    transition: clip-path .3s steps(7);
  }
  .nav__links.is-open{ clip-path: inset(0 0 0 0); }
  .nav__links a::after{ bottom: calc(-14 * var(--m)); height: calc(8 * var(--m)); }

  /* ---------- hero ---------- */
  /* altura definida pelo JS; --hero-anchor = topo do relvado depois de aterrar */
  .hero{ overflow: hidden; }

  .hero__anim{
    left: calc(-689 * var(--m));
    top: calc(680 * var(--m));
    width: calc(1600 * var(--m));
    height: calc(900 * var(--m));
    transform: rotate(90deg);
  }

  .hero__hi{
    left: 50%; transform: translateX(-50%);
    top: var(--hero-hi, calc(270 * var(--m)));
    font-size: calc(64.662 * var(--m));
    line-height: .83;
  }
  .hero__name{
    left: 50%; transform: translateX(-50%);
    top: calc(var(--hero-hi, calc(270 * var(--m))) + 82 * var(--m));
    width: calc(644 * var(--m));
    font-size: calc(224.797 * var(--m));
    line-height: .71;
    text-align: center;
    white-space: normal;
  }

  /* estes quatro estao presos ao relvado, nao ao topo: e o ceu que estica */
  .hero__iam{
    left: calc(44 * var(--m));
    top: calc(var(--hero-anchor, 0px) - 772 * var(--m));
    font-size: calc(59.797 * var(--m));
    line-height: .83;
  }
  .hero__role{
    left: calc(44 * var(--m));
    top: calc(var(--hero-anchor, 0px) - 712 * var(--m));
    width: calc(614 * var(--m));
    font-size: calc(147.642 * var(--m));
    line-height: .92;
  }
  .hero__basedin{
    left: calc(426 * var(--m));
    top: calc(var(--hero-anchor, 0px) - 228 * var(--m));
    width: calc(240 * var(--m));
    text-align: center;
    font-size: calc(59.797 * var(--m));
    line-height: .83;
  }
  .hero__country{
    left: calc(75 * var(--m));
    top: calc(var(--hero-anchor, 0px) - 168 * var(--m));
    font-size: calc(147.642 * var(--m));
    line-height: .92;
  }
  .hero__hint{ display: none; }

  /* ---------- glifos ---------- */
  .pix{ font-size: calc(var(--msize, var(--size)) * var(--m)); }
  .grassband .pix--rider{
    left: calc(522.11 * var(--m));
    top: calc(-35 * var(--m));
    font-size: calc(70.07 * var(--m));
  }

  /* ---------- works ---------- */
  .works{ padding: 0 0 calc(190 * var(--m)); }
  .works__head{ height: calc(430 * var(--m)); padding: 0 calc(44 * var(--m)); }
  .works__title{
    left: calc(44 * var(--m));
    top: calc(200 * var(--m));
    font-size: calc(81.75 * var(--m));
  }
  .stack{ padding: 0 calc(44 * var(--m)); }

  .card__inner{
    grid-template-columns: 1fr;
    gap: 0;
    padding: calc(53 * var(--m)) calc(53 * var(--m)) calc(60 * var(--m));
  }
  .card__title{
    font-size: calc(139.235 * var(--m));
    line-height: .92;
    margin: 0 0 calc(14 * var(--m));
  }
  .card__text{
    font-size: calc(25.791 * var(--m));
    line-height: .92;
    margin: 0 0 calc(20 * var(--m));
    text-align: left;
  }
  .card__col--media{ gap: calc(30 * var(--m)); margin-top: calc(24 * var(--m)); }
  .card__media{ aspect-ratio: 453 / 328.4; }
  .btn{ font-size: calc(58.55 * var(--m)); line-height: .83; }
  .btn__gap{ flex-basis: calc(34.253 * var(--m)); }
  .btn__arrow{ width: calc(31.684 * var(--m)); }

  /* animacao do circulo: mesma posicao relativa do Figma (por tras dos cards,
     a direita, a entrar um pouco no about) */
  /* a tela e maior que o circulo: estes numeros poem o circulo desenhado
     exactamente em (218, -691) com 994 de lado, como no Figma de 710 */
  .circanim{
    right: auto;
    left: calc(-873 * var(--m));
    top: calc(-1087 * var(--m));
    width: calc(3176 * var(--m));
    height: calc(1786 * var(--m));
  }

  /* ---------- about ---------- */
  .about{ padding: calc(76 * var(--m)) 0 0; }
  .about__band{
    height: auto;
    display: flex;
    flex-direction: column;
    padding: calc(90 * var(--m)) calc(46.5 * var(--m)) calc(120 * var(--m));
    clip-path: polygon(0 0,
                       100% calc(7.4 * var(--m)),
                       100% calc(100% - 8.13 * var(--m)),
                       0 100%);
  }
  .about__edge{ --sq: calc(18 * var(--m)); }
  .about__edge--top{ top: calc(76 * var(--m) - var(--sq) * 2); }
  .about__edge--bottom{ top: auto; bottom: calc(var(--sq) * -2); }

  /* o Figma poe titulo, texto, botao e retrato uns por baixo dos outros:
     em fluxo nada fica cortado, seja qual for a altura que o texto ocupe */
  .about__grid{ display: contents; }
  .about__col{ order: 1; }
  .about__title{
    margin: 0 0 calc(72 * var(--m));
    font-size: calc(81.75 * var(--m));
    line-height: .83;
  }
  .about__text{
    font-size: calc(45 * var(--m));
    line-height: 1.12;
    margin: 0 0 calc(52 * var(--m));
    text-align: justify;
  }
  .about__text:last-child{ margin-bottom: 0; }

  .cvbtn{
    order: 2;
    position: relative;
    left: auto; top: auto;
    flex: none;
    width: calc(427 * var(--m));
    height: calc(104 * var(--m));
    margin: calc(96 * var(--m)) auto 0;
  }
  .cvbtn__bar--t{ left: calc(10 * var(--m)); top: 0; width: calc(407 * var(--m)); height: calc(10 * var(--m)); }
  .cvbtn__bar--b{ left: calc(10 * var(--m)); top: calc(94 * var(--m)); width: calc(407 * var(--m)); height: calc(10 * var(--m)); }
  .cvbtn__bar--l{ left: 0; top: calc(10 * var(--m)); width: calc(10 * var(--m)); height: calc(84 * var(--m)); }
  .cvbtn__bar--r{ left: calc(417 * var(--m)); top: calc(10 * var(--m)); width: calc(10 * var(--m)); height: calc(84 * var(--m)); }
  .cvbtn__fill{ left: calc(10 * var(--m)); top: calc(10 * var(--m)); width: calc(407 * var(--m)); height: calc(84 * var(--m)); }
  .cvbtn__label{ left: calc(31.29 * var(--m)); top: calc(20.91 * var(--m)); font-size: calc(69.019 * var(--m)); }
  .cvbtn__arrow{ left: calc(360.5 * var(--m)); top: calc(38.2 * var(--m)); width: calc(38.45 * var(--m)); }
  @keyframes cvdropm{
    0%   { transform: rotate(89.23deg) translateX(0); }
    55%  { transform: rotate(89.23deg) translateX(calc(16 * var(--m))); }
    100% { transform: rotate(89.23deg) translateX(0); }
  }

  .about__portrait{
    order: 3;
    position: static;
    flex: none;
    width: calc(411 * var(--m));
    margin: calc(104 * var(--m)) auto 0;
  }
  .about__portrait-frame{ width: 100%; margin: 0 auto; }
  .about__portrait-inner.is-missing::after{ font-size: calc(24 * var(--m)); }
  /* sem interaccao na foto em ecras de toque */
  .portdither{ display: none; }
  .about__portrait-frame:hover .about__portrait-inner img,
  .about__portrait-frame.is-touched .about__portrait-inner img{ filter: none; transform: none; }

  /* ---------- contact ---------- */
  .contact{ height: calc(417 * var(--m)); padding: 0; }
  .contact__bg img{ object-position: center 46%; }
  .contact__anim{
    left: calc(-122 * var(--m));
    top: calc(168 * var(--m));
    width: calc(1081.872 * var(--m));
    height: calc(551.883 * var(--m));
  }
  .contact__title{
    left: calc(46 * var(--m));
    top: calc(79 * var(--m));
    font-size: calc(59.63 * var(--m));
  }
  .contact__mail{
    left: calc(46 * var(--m));
    top: calc(191 * var(--m));
    font-size: calc(61.424 * var(--m));
  }
  .contact__social{ top: calc(254.83 * var(--m)); }
  .contact__link{ font-size: calc(61 * var(--m)); }
  .contact__link--be{ left: calc(46 * var(--m)); }
  .contact__link--in{ left: calc(289.43 * var(--m)); }
  .contact__dot{
    left: calc(248 * var(--m));
    top: calc(29.17 * var(--m));
    width: calc(9.426 * var(--m));
    height: calc(9.426 * var(--m));
  }

  /* entrada do verde depois do relvado, na escala de 710 */
  .gridbg{
    --grid: calc(48 * var(--m));
    --fade-from: 0px;
    background-image:
      linear-gradient(180deg,
        var(--olive) 0,
        var(--olive) calc(40 * var(--m)),
        rgba(39,48,29,0) calc(430 * var(--m))),
      repeating-linear-gradient(0deg,  rgba(249,255,249,.055) 0 1px, transparent 1px var(--grid)),
      repeating-linear-gradient(90deg, rgba(249,255,249,.055) 0 1px, transparent 1px var(--grid));
  }

  /* ---------- creditos ---------- */
  .credits{ height: calc(73 * var(--m)); --cell: calc(9.4 * var(--m)); }
  .credits__t{ top: calc(14.12 * var(--m)); font-size: calc(40.475 * var(--m)); }
  .credits__t--a{ left: calc(45 * var(--m)); }
  .credits__t--b{ left: calc(371.43 * var(--m)); }
  .credits__t--c{ left: calc(600.13 * var(--m)); }
  .credits__sep{
    top: calc(26.02 * var(--m));
    width: calc(28.227 * var(--m));
    height: calc(28.227 * var(--m));
  }
  .credits__sep i{ width: calc(9.433 * var(--m)); height: calc(9.433 * var(--m)); }
  .credits__sep--1{ left: calc(321.28 * var(--m)); }
  .credits__sep--2{ left: calc(549.98 * var(--m)); }

  .copied{ font-size: calc(30 * var(--m)); padding: calc(8 * var(--m)) calc(18 * var(--m)); }
  .pxwipe{ height: 60vh; }
}

@media (max-width: 900px) and (max-height: 620px){
  .stack{ margin-top: 24px !important; height: auto !important; }
  .stack__pin{ position: static; height: auto; }
  .card{ position: static; margin-bottom: 32px; transform: rotate(var(--tilt)) !important; }
}

/* ecras sem rato: o hover passa a ser toque */
@media (hover: none){
  .ch:hover{ transform: none; }
  .about__portrait-frame:hover .about__portrait-inner img{ filter: none; transform: none; }
  .about__portrait-frame:hover .portdither i{ opacity: 0; }
  .about__portrait-frame.is-touched .about__portrait-inner img{ filter: contrast(1.55) saturate(.15); transform: scale(1.03); }
  .about__portrait-frame.is-touched .portdither i{ opacity: .55; transition-delay: calc(var(--d) * 1ms); }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__hint{ animation: none; }
  .pxwipe-grid i{ transition: none; }
}