@font-face { font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/zalando-sans-expanded-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/zalando-sans-expanded-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/zalando-sans-expanded-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/zalando-sans-expanded-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/archivo-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --orange: #E6460C;   --orange-rgb: 230 70 12;
  --orange-text: #C43C0A;
  --dark:   #131317;
  --card:   #EAEAE2;   --card-rgb: 234 234 226;
  --paper:  #EFEFE7;   --paper-rgb: 239 239 231;

  --font-display: "Zalando Sans Expanded", "Archivo", system-ui, sans-serif;
  --font-body:    "Zalando Sans Expanded", "Archivo", system-ui, sans-serif;
  --font-text:    "Archivo", system-ui, sans-serif;

  --vh: 1vh;
  --screen: calc(100 * var(--vh));

  --nav-h: 72px;
  --footer-h: 60px;
  --word-h: 20vw;
  --title-h: 15vw;

  --page-x: clamp(16px, 2.5vw, 36px);
  --grid-gap: clamp(16px, 2vw, 28px);
  --grid-top: 14px;
  --grid-scale: 1;

  --page-pad: calc(var(--nav-h) + var(--grid-top)) var(--page-x) calc(var(--footer-h) + var(--grid-gap));

  --fill-h: calc(var(--screen) - var(--nav-h) - var(--footer-h) - var(--grid-top) - var(--grid-gap));

  --head-size: min(clamp(245px, 30vw, 450px), calc(38 * var(--vh)));

  --title-fs: clamp(2.3rem, 7.3vw, 7.2rem);
  --subtitle-fs: clamp(1rem, 2.75vw, 2.7rem);
  --hero-top: clamp(76px, 7.5vw, 80px);

  --head-top: calc(var(--hero-top) + var(--title-fs) * .95 + var(--subtitle-fs) * 1.25 + clamp(-14px, -0.4vw, -4px));

  --icon-insta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M292.9,3.5c-53.2,2.5-89.5,11-121.3,23.5-32.9,12.8-60.7,30-88.4,57.8-27.7,27.8-44.8,55.7-57.5,88.6-12.3,31.8-20.6,68.2-23,121.4C.3,348.1-.2,365.2,0,501s.9,152.8,3.4,206.1c2.5,53.2,11,89.5,23.5,121.3,12.8,32.9,30,60.7,57.8,88.5,27.8,27.7,55.7,44.8,88.7,57.5,31.8,12.3,68.2,20.7,121.4,23,53.2,2.3,70.4,2.9,206.1,2.6,135.7-.3,152.8-.9,206.2-3.4s89.5-11,121.2-23.5c32.9-12.9,60.7-30,88.5-57.8s44.8-55.7,57.5-88.7c12.3-31.8,20.7-68.2,23-121.3,2.3-53.4,2.9-70.4,2.6-206.2s-.9-152.8-3.4-206.1-11-89.5-23.5-121.3c-12.8-32.9-30-60.7-57.8-88.4s-55.7-44.8-88.7-57.5c-31.8-12.3-68.2-20.7-121.4-23S634.8-.2,499,0s-152.8.8-206.1,3.4M298.8,907.4c-48.8-2.1-75.2-10.2-92.9-17-23.4-9-40-19.9-57.6-37.3s-28.4-34.1-37.5-57.4c-6.8-17.6-15.1-44.1-17.4-92.8-2.5-52.7-3-68.5-3.3-202s.2-149.3,2.5-202c2.1-48.7,10.2-75.2,17-92.8,9-23.4,19.8-40,37.3-57.6s34.1-28.4,57.4-37.5c17.6-6.9,44.1-15.1,92.8-17.4,52.7-2.5,68.5-3,202-3.3,133.5-.3,149.3.2,202.1,2.5,48.7,2.1,75.2,10.2,92.8,17,23.4,9,40,19.8,57.6,37.3s28.4,34.1,37.5,57.4c6.9,17.6,15.1,44,17.4,92.8,2.5,52.7,3.1,68.5,3.3,202,.2,133.5-.2,149.3-2.5,202-2.1,48.8-10.2,75.2-17,92.9-9,23.3-19.8,40-37.3,57.6s-34.1,28.4-57.4,37.5c-17.6,6.9-44.1,15.1-92.8,17.4-52.7,2.5-68.5,3-202,3.3s-149.3-.2-202-2.5M706.4,232.8c0,33.1,27,60,60.1,59.9s60-27,59.9-60.1c0-33.1-27-60-60.1-59.9,0,0,0,0,0,0-33.1,0-59.9,27-59.9,60.1M243.3,500.5c.3,141.8,115.4,256.5,257.2,256.2s256.5-115.4,256.3-257.2-115.5-256.5-257.2-256.2-256.5,115.5-256.2,257.2M333.3,500.3c-.2-92,74.3-166.8,166.3-167,92-.2,166.8,74.3,167,166.3.2,92-74.3,166.8-166.3,167-92,.2-166.8-74.3-167-166.3h0'/%3E%3C/svg%3E");

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -.1063 -.3576 -.0361 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

@media (max-width: 991.98px) {
  :root {
    --title-fs: clamp(2.2rem, 11vw, 5.6rem);
    --subtitle-fs: clamp(1.2rem, 4.5vw, 2.3rem);
    --text-fs: clamp(1.0625rem, 2.5vw, 1.35rem);
    --head-min: 150px;
    --head-max: 76vw;
    --hero-rest: 388px;
    --head-size: max(var(--head-min), min(var(--head-max), 440px,
                 calc((var(--screen) - var(--footer-h) - var(--word-h) * .55 - var(--hero-rest)) / 1.318)));
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  :root { --head-min: 260px; --head-max: 52vw; --hero-rest: 470px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
p, ul { margin-top: 0; margin-bottom: 1rem; }
ul { padding-left: 2rem; }
figure { margin: 0 0 1rem; }
img, svg, video { vertical-align: middle; }
button { margin: 0; border-radius: 0; font: inherit; color: inherit; text-transform: none; }
button:not(:disabled) { cursor: pointer; }
[hidden] { display: none !important; }

.container-fluid { width: 100%; margin-inline: auto; padding-inline: .75rem; }
.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-inline: .75rem; }
.col-12 { flex: 0 0 auto; width: 100%; }
.order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .order-md-2 { order: 2; } .order-md-3 { order: 3; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; }
}

.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.ms-auto { margin-left: auto !important; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: .6em 1em; background: var(--dark); color: var(--paper); text-decoration: none;
  transform: translateY(-200%); transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--orange); outline-offset: 2px; }

.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-block: .5rem; }
.navbar > .container-fluid { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; }
.navbar-brand { margin-right: 1rem; white-space: nowrap; text-decoration: none; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; text-decoration: none; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.navbar-toggler { background: transparent; line-height: 1; }
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
@media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } }
@media (min-width: 768px) {
  .navbar-expand-md { flex-wrap: nowrap; justify-content: flex-start; }
  .navbar-expand-md .navbar-nav { flex-direction: row; }
  .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-md .navbar-toggler { display: none; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.px-page { padding-inline: var(--page-x) !important; }

main { position: relative; z-index: 1; }

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}
.page-bg::before,
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-bg::before { background: linear-gradient(var(--paper), rgb(var(--paper-rgb) / 0) 140px); }

.page-bg::after {
  background: var(--grain) 0 0 / 150px;
  opacity: .22;
}

.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: var(--anim) ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
}

.b1 { --c: rgb(var(--orange-rgb) / .28); --anim: drift1 18s; width: 70vmax; height: 60vmax; left: -15vmax;  top: -10vmax; }
.b2 { --c: rgb(var(--orange-rgb) / .25); --anim: drift2 26s; width: 60vmax; height: 65vmax; right: -20vmax; bottom: -25vmax; }
.b3 { --c: rgb(var(--orange-rgb) / .19); --anim: drift3 32s; width: 45vmax; height: 40vmax; left: 30%;      top: 35%; }
.b4 { --c: rgb(var(--paper-rgb) / .9);   --anim: drift4 24s; width: 50vmax; height: 45vmax; right: -5vmax;  top: -15vmax; }
.b5 { --c: rgb(var(--orange-rgb) / .16); --anim: drift5 36s; width: 40vmax; height: 50vmax; left: -10vmax;  bottom: -20vmax; }

@keyframes drift1 {
  33%  { transform: translate(12vw, 8vh) scale(1.12) rotate(25deg); }
  66%  { transform: translate(4vw, 18vh) scale(.92) rotate(-10deg); }
  100% { transform: translate(18vw, 4vh) scale(1.05) rotate(15deg); }
}
@keyframes drift2 {
  40%  { transform: translate(-14vw, -10vh) scale(1.15) rotate(-20deg); }
  100% { transform: translate(-6vw, -22vh) scale(.95) rotate(12deg); }
}
@keyframes drift3 {
  30%  { transform: translate(-18vw, -12vh) scale(1.2); }
  70%  { transform: translate(10vw, -6vh) scale(.85); }
  100% { transform: translate(-6vw, 10vh) scale(1.1); }
}
@keyframes drift4 {
  50%  { transform: translate(-16vw, 14vh) scale(1.15); }
  100% { transform: translate(-28vw, 4vh) scale(.95); }
}
@keyframes drift5 {
  45%  { transform: translate(20vw, -8vh) scale(1.1) rotate(30deg); }
  100% { transform: translate(34vw, -16vh) scale(.9) rotate(-15deg); }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 40px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    rgb(var(--paper-rgb) / .95),
    rgb(var(--paper-rgb) / .85) 45%,
    rgb(var(--paper-rgb) / .4) 75%,
    rgb(var(--paper-rgb) / 0));
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
          mask-image: linear-gradient(#000 45%, transparent);
  opacity: 0;
  transition: opacity .5s ease;
}
.site-header.is-scrolled::before,
.site-header.menu-open::before { opacity: 1; }
.site-header.menu-open { background-color: var(--paper); }

.site-header .navbar { padding-block: clamp(14px, 1.8vw, 20px); }

.navbar-brand img { height: auto; margin-top: -5px; }

.navbar-brand,
.site-header .nav-link {
  color: var(--orange-text) !important;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  padding: 0 !important;
  margin: 0;
}

.site-header .nav-link { position: relative; }
.site-header .nav-link::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.site-header .nav-link:is(:focus-visible, .active, .is-current)::after { transform: none; }

@media (hover: hover) {
  .site-header .nav-link:hover::after { transform: none; }
}

@media (min-width: 768px) {
  .site-header .navbar-nav { gap: clamp(2rem, 10vw, 9.5rem); }
}
@media (max-width: 991.98px) {
  .navbar-brand,
  .site-header .nav-link { font-size: 1.15rem; }
}
@media (max-width: 767.98px) {
  .site-header .navbar-nav {
    gap: .9rem;
    padding: 1.25rem 0 .5rem;
    align-items: flex-end;
  }
}

.navbar-toggler {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  padding: 6px 0;
  box-shadow: none !important;
}
.toggler-bar {
  width: 28px;
  height: 2px;
  background: var(--orange);
  transition: transform .3s ease;
}
.navbar-toggler[aria-expanded="true"] .toggler-bar:first-child { transform: translateY(4px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bar:last-child  { transform: translateY(-4px) rotate(-45deg); }

.title,
.subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}
.title {
  font-size: var(--title-fs);
  line-height: .95;
  letter-spacing: -0.01em;
}
.subtitle {
  font-size: var(--subtitle-fs);
  line-height: 1.1;
  color: var(--orange);
  margin-top: .15em;
}

.head {
  display: block;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.head:not(a) { cursor: default; }
.head:focus-visible { outline: 2px solid var(--dark); outline-offset: 8px; border-radius: 50%; }

.head-wrapper {
  position: relative;
  display: block;
  will-change: transform;
  width: var(--head-size);

  aspect-ratio: 1210 / 1595;
  overflow: hidden;
}
.layer-tete {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.layer-tete-alt { opacity: 0; }
.head.is-pressed .layer-tete-alt { opacity: 1; }
.head.is-pressed .layer-tete:not(.layer-tete-alt) { opacity: 0; }

.eyes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --ex: 0;
  --ey: 0;
}
.eye {
  position: absolute;
  left: calc(var(--x) - var(--w) / 2);
  top: calc(var(--y) - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  border-radius: 50%;
  background: var(--paper);
  transform: rotate(var(--rot, 0deg));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eye   { --w: 17%; --h: 5%; }
.eye-l { --x: 35.87%; --y: 50.66%; }
.eye-r { --x: 69.46%; --y: 50.00%; }

.iris {
  flex: none;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate3d(calc(var(--ex) * var(--ax, 42%)), calc(var(--ey) * 10%), 0) scaleX(var(--isx, 1));
  will-change: transform;
}
.pupil {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
}

.head-34 .head-wrapper { aspect-ratio: 1084 / 1811; width: calc(var(--head-size) * var(--face-scale, 1.1)); }

.head-34 { transform: rotate(var(--face-rot, 5deg)); }

.head-34 .head-wrapper {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 80%);
}
.head-34 .eye-l { --x: 66.25%; --y: 36.32%; --w: 15%; --h: 4.7%; --rot: -16deg; --isx: .78; --ax: 58%; }
.head-34 .eye-r { --x: 89.42%; --y: 32.32%; --w: 9%;  --h: 4.5%; --rot: -26deg; --isx: .55; --ax: 35%; }
.head-34 .eye-l .iris { width: 36%; }
.head-34 .eye-r .iris { width: 55%; }

.head.is-pressed { animation: press .28s cubic-bezier(.4, 0, .2, 1); }
@keyframes press {
  45% { transform: scale(.94); }
}

.giant {
  padding-inline: var(--page-x);
  margin: 0;
  user-select: none;
}
.giant span {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg,
    rgb(var(--orange-rgb) / .55),
    var(--orange) 40%,
    rgb(var(--orange-rgb) / .85) 75%,
    rgb(var(--orange-rgb) / .6));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero {
  position: relative;

  min-height: calc(var(--screen) * 1.45);
  display: flex;
  flex-direction: column;

  padding-bottom: calc(var(--footer-h) + var(--word-h) * .5);
  isolation: isolate;
  overflow: hidden;
}

.hero-inner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1;
  min-height: calc(var(--screen) - var(--footer-h) - var(--word-h) * .5);
  display: flex;
  flex-direction: column;
  padding-top: var(--hero-top);
}

.hero-row {
  flex: 1 0 auto;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 1.25rem;
}

.hero-intro p,
.hero-hint p {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  margin: 0;
}
.hero-intro p { max-width: 26ch; }

.hero-intro .hero-scroll-wrap { margin-top: 1.4em; }
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--orange-text);
  text-decoration: none;
}

:is(.hero-scroll, .btn-cv):is(:hover, :focus-visible) .link-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.hero-scroll-arrow { display: inline-block; animation: scroll-nudge 1.8s ease-in-out infinite; }
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(4px); }
}
.hero-intro p + p { margin-top: 1.2em; }
.hero-hint { text-align: right; }

@media (min-width: 992px) {
  .hero-intro,
  .hero-hint {
    align-self: flex-end;
    padding-bottom: calc(var(--head-size) * .64);
  }
}
@media (max-width: 991.98px) {
  .hero-row {
    flex: 0 0 auto;
    margin-top: clamp(1.75rem, 6vw, 3rem);
    row-gap: 0;
  }
  .hero-intro p,
  .hero-hint p { font-size: var(--text-fs); line-height: 1.35; }

  .hero-title :is(.title, .subtitle),
  .about-name :is(.title, .subtitle) { white-space: nowrap; }
  .hero-intro p { max-width: 30ch; }
}

@media (max-width: 767.98px) {
  .hero-row {
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: clamp(2.5rem, 11vw, 3.5rem);
  }
  .hero-hint {
    text-align: center;
    margin-top: clamp(.6rem, 2.5vw, 1rem);
  }
  .hero-intro {
    margin-top: clamp(1.6rem, 7vw, 2.1rem);
  }
  .hero-intro p + p { margin-top: 1em; }
  .hero-intro .hero-scroll-wrap { margin-top: .5em; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-intro,
  .hero-hint {
    align-self: flex-end;
    margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
    padding-bottom: 2rem;
  }
}

.hero-title .title,
.hero-title .subtitle,
.hero-head,
.hero-intro,
.hero-hint,
.portfolio-word { will-change: transform, opacity; }
.hero-head { transform-origin: 50% 50%; }

.is-intro :where(.navbar-brand, .nav-item, .hero-title .title, .hero-title .subtitle,
              .hero-head .head, .hero-intro p, .hero-hint p, .portfolio-word span, .footer-inner a) {
  animation: intro-up .6s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.is-intro .navbar-brand              { --d: 0;   animation-name: intro-down; }
.is-intro .nav-item                  { animation-name: intro-down; }
.is-intro .nav-item:nth-child(1)     { --d: 30; }
.is-intro .nav-item:nth-child(2)     { --d: 60; }
.is-intro .nav-item:nth-child(3)     { --d: 90; }
.is-intro .hero-title .title         { --d: 60; }
.is-intro .hero-title .subtitle      { --d: 130; }
.is-intro .hero-head .head           { --d: 180; animation-name: intro-scale; }

.is-intro .hero-intro p              { --d: 250; animation-name: intro-left; }
.is-intro .hero-intro p + p          { --d: 300; }
.is-intro .hero-intro p + p + p      { --d: 360; }
.is-intro .hero-hint p               { --d: 300; animation-name: intro-right; }
.is-intro .portfolio-word span       { --d: 340; animation-duration: .75s; }
.is-intro .footer-inner a            { --d: 150; animation-name: intro-fade; }

@keyframes intro-up    { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes intro-down  { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes intro-scale { from { opacity: 0; transform: scale(.94); } }
@keyframes intro-fade  { from { opacity: 0; } }
@keyframes intro-left  { from { opacity: 0; transform: translate3d(-100px, 0, 0); } }
@keyframes intro-right { from { opacity: 0; transform: translate3d(100px, 0, 0); } }

.portfolio-word {
  position: fixed;
  inset: auto 0 var(--footer-h);
  z-index: 0;
  line-height: .8;
  margin-bottom: -.2em;
  font-size: 22vw;
  pointer-events: none;
}

.project-grid,
.labo-grid {
  display: grid;

  border-top: 1px solid var(--dark);
  border-left: 1px solid var(--dark);
}

:is(.project-grid, .labo-grid):has(.project[data-aos]) {
  border-color: transparent;
  transition: border-color .5s ease;
}
:is(.project-grid, .labo-grid):has(.project.aos-animate) { border-color: var(--dark); }

.project {
  position: relative;
  aspect-ratio: var(--tile-ratio, 4 / 3);
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--card);
  color: var(--dark);
  text-decoration: none;
  border-right: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
}

.project-bg {
  position: absolute;
  inset: 0;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.project::before,
.project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.project::before {
  background: linear-gradient(to top,
    rgb(var(--card-rgb) / .97) 0%,
    rgb(var(--card-rgb) / .85) 15%,
    rgb(var(--card-rgb) / .1) 40%);
}
.project::after  { background: var(--grain); opacity: .045; }

.project-text {
  position: relative;
  z-index: 2;
  padding: 0 clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 20px);
}
.project-title,
.project-sub { display: block; }
.project-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.35rem);
  line-height: 1.05;
  transition: color .3s ease;
}
.project-sub {
  font-size: clamp(.95rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  margin-top: .1em;
}

.project-bg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--img-pos, center);
}

.project:is(:hover, :focus-visible) .project-bg    { transform: scale(1.05); }
.project:is(:hover, :focus-visible) .project-title { color: var(--orange-text); }
.project:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

.projects {
  position: relative;
  z-index: 2;
  padding: var(--grid-gap) var(--page-x) calc(var(--footer-h) + var(--grid-gap));
}
#travaux { scroll-margin-top: calc(var(--nav-h) + var(--grid-top)); }

.project-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .project-grid { grid-template-columns: 1fr; } }

@media (min-width: 992px) {
  :root {
    --grid-w: min(calc(100vw - 2 * var(--page-x)),
                  calc(2 * (var(--fill-h) + var(--grid-gap) - var(--grid-top)) * var(--grid-scale)));
    --grid-h: calc(var(--grid-w) / 2);
  }
  .project-grid {
    width: var(--grid-w);
    margin-inline: auto;
  }

  .projects {
    padding-bottom: max(calc(var(--footer-h) + var(--grid-gap)),
                        calc(var(--screen) - var(--nav-h) - var(--grid-top) - var(--grid-h)));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .projects {
    min-height: var(--screen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--nav-h) + var(--grid-top));
    padding-bottom: calc(var(--footer-h) + var(--grid-top));
  }
}

:is(.project-grid, .labo-grid) .project[data-aos="fade-up"]:not(.aos-animate) {
  transform: translate3d(0, 18px, 0);
}

.labo-grid .project-bg > img { object-fit: cover; }

@media (max-width: 767.98px) {
  .labo-grid .project-bg > img { object-position: var(--img-pos-mobile, var(--img-pos, center)); }
}
.labo { padding: var(--page-pad); }
@media (min-width: 768px) {
  .labo-grid {
    --tile-ratio: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    height: max(380px, var(--fill-h));
  }
}

.about {
  min-height: var(--screen);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) * .3);
  padding-bottom: calc(var(--footer-h) + var(--grid-gap));
}

.page-title {
  position: relative;
  font-size: 18vw;
  line-height: .9;
}
.page-title span { padding-bottom: .08em; }

.about-row {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
  row-gap: 2rem;
}

.about-intro p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.4;
  max-width: 38ch;
  margin: 0;
}

.about-intro p + p { margin-top: .8em; }

.btn-cv {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--orange-text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.btn-cv:hover .btn-cv-icon { transform: translateY(2px); }
:is(.hero-scroll, .btn-cv):focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; border-radius: 2px; }
.btn-cv-icon { transform: translateY(2px); }
.btn-cv:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.btn-cv-icon { width: 1em; height: 1em; flex: none; transition: transform .25s ease; }

.about-name { padding-top: clamp(.75rem, 1.5vw, 1.25rem); }

@media (min-width: 992px) {
  .about-row   { margin-top: calc(var(--title-h) * -.35); }
}
@media (max-width: 991.98px) {
  .about       { padding-top: calc(var(--nav-h) * .8); }
  .about-row   { flex: 0 0 auto; margin-top: clamp(1.5rem, 6vw, 3rem); row-gap: 0; }
  .about-intro p { font-size: var(--text-fs); line-height: 1.45; max-width: none; }
  .btn-cv { font-size: var(--text-fs); }
  .about-name  { margin-top: auto; padding-top: clamp(3rem, 12vw, 5rem); }
}

@media (max-width: 991.98px) {
  .about-cv    { display: flex; justify-content: center; margin-top: clamp(1rem, 4vw, 1.5rem); }
  .about-intro { margin-top: clamp(1.75rem, 7vw, 2.25rem); }
}

.site-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  background: var(--dark);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem clamp(1.25rem, 5vw, 4.5rem);
  padding-block: clamp(12px, 1.3vw, 18px);
}

.site-footer a {
  color: var(--paper);
  text-decoration: none;
  font-size: clamp(.8rem, 1.15vw, 1.1rem);
  transition: color .25s ease;
}
.site-footer a:is(:hover, :focus-visible) { color: var(--orange); }

.footer-insta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

.footer-insta-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-insta) center / contain no-repeat;
          mask: var(--icon-insta) center / contain no-repeat;
}

@media (max-width: 991.98px) {
  .site-footer a { font-size: .9rem; }
}

@media (max-width: 767.98px) {
  .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: .3rem;
    padding-block: 12px;
  }
  .footer-insta {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob, .hero-scroll-arrow { animation: none; }
  .head.is-pressed { animation: none; }
  .is-intro * { animation: none !important; }
  .project-bg { transition: none; }
}

@media (min-width: 992px) {
  .hero .hero-head,
  .about .about-head {
    position: absolute;
    top: var(--head-top);
    left: calc(50% - var(--head-size) / 2);
    width: var(--head-size);
    max-width: none;
    flex: none;
    padding: 0;
  }
  .hero .hero-hint { margin-left: auto; }

  .about { position: relative; }
  .about .about-row { position: static; }

  .about {
    --about-line: calc(var(--head-top) + var(--head-size) * 1.318 * .75);
    --about-top: calc(var(--nav-h) * .3 + var(--title-h) + 1rem);
  }
  .about .about-intro,
  .about .about-cv {
    position: absolute;
    top: var(--about-top);
    height: max(0px, calc(var(--about-line) - var(--about-top)));
    width: calc(50% - var(--head-size) / 2 - var(--page-x) - 2.5rem);
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: safe flex-end;
    align-self: auto;
  }
  .about .about-intro { left: var(--page-x); }
  .about .about-cv    { right: var(--page-x); align-items: flex-end; }
  .about .about-head { z-index: 2; }
}

html:has(.page-project) { overscroll-behavior: none; }
.page-project { overflow: hidden; }

.pd {
  --pd-in: .7s;
  --pd-out: .38s;
  --pd-wait: .1s;
  --pd-ease: cubic-bezier(.22, .61, .36, 1);
  --pd-from: 40vw;
  height: var(--screen);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head" "stage" "dots" "text" "nav";
  padding: var(--hero-top) var(--page-x) calc(var(--footer-h) + clamp(12px, 2.5vh, 32px));
  overflow: hidden;
}
.pd-head  { grid-area: head; }
.pd-stage { grid-area: stage; }
.pd-texts { grid-area: text; }
.pd-nav   { grid-area: nav; }
.pd-dots  { grid-area: dots; }
.pd-face  { display: none; }

@media (max-width: 991.98px) {
  .pd-head :is(.title, .subtitle) { white-space: nowrap; }
}

.pd-stage {
  position: relative;
  margin-block: clamp(6px, 1.5vh, 16px);
}
.pd-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 32px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--pd-from), 0, 0);
  will-change: transform, opacity;
}

.pd-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform var(--pd-in) var(--pd-ease) var(--pd-wait), opacity var(--pd-in) ease var(--pd-wait);
}

.pd-slide.is-leaving {
  visibility: visible;
  transition: transform var(--pd-out) cubic-bezier(.55, 0, .75, .3), opacity var(--pd-out) ease-in,
              visibility 0s linear var(--pd-out);
}
.pd.is-first .pd-slide.is-active { transition-delay: 0s; }

.pd-media {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
}
.pd-pair .pd-media { max-width: calc(50% - clamp(6px, 1vw, 16px)); }

@media (max-width: 767.98px) {
  .pd-pair { flex-direction: column; gap: 0; }
  .pd-pair .pd-media {
    height: 56%;
    max-width: 100%;
  }

  .pd-pair .pd-media:first-child { transform: translate(-30%, 11%); }
  .pd-pair .pd-media:last-child  { transform: translate(30%, -11%); }
}

.pd-dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(8px, 1.5vh, 16px);
}
.pd-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1.5px solid var(--dark);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}
.pd-dot.is-active { background: var(--dark); }
.pd-dot:hover:not(.is-active) { transform: scale(1.2); }
.pd-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.pd-dots { align-items: center; }
.pd-arrow {
  width: 32px;
  height: 32px;
  margin-block: -11px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dark);
  font-family: var(--font-text);
  font-size: 1.6rem;
  line-height: 1;
  transition: color .2s ease, transform .2s ease;
}
.pd-arrow:first-child { margin-right: 4px; }
.pd-arrow:nth-last-child(2) { margin-left: 4px; }
.pd-arrow:hover { color: var(--orange-text); }
.pd-arrow:first-child:hover { transform: translateX(-2px); }
.pd-arrow:nth-last-child(2):hover { transform: translateX(2px); }
.pd-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.pd-slide[data-tilt] {
  --tx: 0;
  --ty: 0;
  --tilt: 8deg;
  filter: drop-shadow(calc(8px - var(--tx) * 14px) calc(20px - var(--ty) * 12px) 22px rgb(19 19 23 / .26));
}
.pd-slide[data-tilt] .pd-media {
  transform: perspective(1400px)
             rotateY(calc(var(--tx) * var(--tilt))) rotateX(calc(var(--ty) * var(--tilt) * -.8))
             rotate(var(--rotate, 0deg)) scaleX(var(--flip, 1));
  will-change: transform;
}

.pd-stage {
  --pd-visible: 1;
  --pd-gap: clamp(16px, 3vw, 56px);
  --pd-move: .6s;
  --pd-ratio: 100;
}
.pd-carousel { --pd-ratio: .7073; }
@media (min-width: 768px) {
  .pd-carousel { --pd-visible: 2; }
}
.pd-stage.is-track {
  container-type: size;

  clip-path: inset(-80px -100vw -120px -12px);
}
@media (max-width: 991.98px) {
  .pd-stage.is-track { clip-path: none; }
}
.pd-stage.is-track .pd-slide {
  --slot: min((100cqw - (var(--pd-visible) - 1) * var(--pd-gap)) / var(--pd-visible),
              (100cqh - var(--pd-air-top, 0px) - var(--pd-air-bottom, 0px)) * var(--pd-ratio));

  inset: var(--pd-air-top, 0px) auto var(--pd-air-bottom, 0px)
         calc((100cqw - var(--pd-visible) * var(--slot) - (var(--pd-visible) - 1) * var(--pd-gap)) / 2);
  width: var(--slot);
  padding: 0;
  container-type: size;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--pos, 1) * (100% + var(--pd-gap)) + var(--drag, 0px)), 0, 0);
  transition: transform var(--pd-move) var(--pd-ease), opacity calc(var(--pd-move) * .6) ease;
}
.pd-stage.is-track .pd-slide.is-shown,
.pd-stage.is-track .pd-slide.is-peek { opacity: 1; pointer-events: auto; }
.pd-stage.is-track .pd-slide.is-behind { z-index: -1; }
.pd-stage.is-dragging .pd-slide { transition: none; }

.pd-slide:has(> .pd-poster) { container-type: size; }

.pd-slide .pd-poster {
  --poster-ratio: var(--pd-ratio, .7073);
  position: relative;
  display: block;
  flex: none;
  width: min(100cqw, 100cqh * var(--poster-ratio));
  height: auto;
  max-width: none;
  aspect-ratio: var(--poster-ratio);
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgb(19 19 23 / .22),
    calc(2px - var(--tx, 0) * 4px) calc(6px - var(--ty, 0) * 4px) 12px rgb(19 19 23 / .14),
    calc(10px - var(--tx, 0) * 18px) calc(28px - var(--ty, 0) * 16px) 44px -6px rgb(19 19 23 / .3);
}
.pd-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.pd-poster::before,
.pd-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.pd-poster::before { background: var(--grain) 0 0 / 140px; opacity: .3; }

.pd-poster::after {
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .06) 50%, rgb(255 255 255 / 0) 70%)
      calc(50% - var(--tx, 0) * 35%) calc(50% - var(--ty, 0) * 35%) / 300% 300% no-repeat,
    linear-gradient(160deg, rgb(255 255 255 / .04), rgb(255 255 255 / 0) 40%, rgb(19 19 23 / .05));
}
.pd-slide[data-tilt]:has(.pd-poster) { filter: none; }

.pd-texts { display: grid; }
.pd-text {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-text);
  font-weight: 400;
  max-width: 46ch;
  font-size: var(--text-fs, clamp(1rem, 1.3vw, 1.25rem));
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--pd-out) ease, transform var(--pd-out) ease, visibility 0s linear var(--pd-out);
}

.pd-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.pd-text a:is(:hover, :focus-visible) { color: var(--orange-text); }
.pd-text a:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; border-radius: 2px; }
.pd-text.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .6s ease var(--pd-wait), transform .6s var(--pd-ease) var(--pd-wait);
}

.pd-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(10px, 2vh, 22px);
}
.pd-nav a {
  color: var(--orange-text);
  text-decoration: none;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.2;
}
.pd-nav a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .2em; }

@media (min-width: 992px) {
  .pd {
    --head-size: min(28vw, calc(38 * var(--vh)));
    grid-template-columns: minmax(0, 29%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head head"
      "face stage"
      "face dots"
      "nav  text";
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .pd-face {
    grid-area: face;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 0;
    pointer-events: none;
    margin-bottom: calc(var(--head-size) * -.4);
    margin-left: calc(-1 * var(--page-x) - var(--head-size) * .3);
  }

  .pd-stage {
    --pd-air-top: calc(var(--subtitle-fs) * .55);
    --pd-air-bottom: calc(var(--subtitle-fs) * .75 + clamp(10px, 2vh, 20px));
    grid-area: auto;
    grid-column: 2;
    grid-row: 1 / 3;
    margin-block: calc(var(--title-fs) * .95 + 6px) 0;
  }
  .pd-stage:not(.is-track) .pd-slide { padding-block: var(--pd-air-top) var(--pd-air-bottom); }
  .pd-nav   { align-self: end; margin-top: 0; }
  .pd-text  { font-size: clamp(1rem, 1.3vw, 1.25rem); max-width: 72ch; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-slide, .pd-slide.is-active, .pd-slide.is-leaving, .pd-stage.is-track .pd-slide, .pd-text, .pd-text.is-active { transition: none; }
}

.pd:not(:has(.pd-dots)) .pd-stage { margin-bottom: clamp(16px, 3vh, 32px); }

@media (max-height: 560px) {
  html:has(.page-project) { overscroll-behavior: auto; }
  .page-project { overflow: auto; }
  .pd {
    height: auto;
    min-height: var(--screen);
    overflow: visible;
    grid-template-rows: auto auto auto auto auto;
  }
  .pd-stage { height: max(240px, 75vh); }
  .pd-face { display: none; }
}
@media (max-height: 560px) and (min-width: 992px) {
  .pd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "dots" "text" "nav"; }
  .pd-stage { grid-area: stage; grid-row: auto; grid-column: auto; margin-block: clamp(10px, 2vh, 22px) 0; }
  .pd-nav { align-self: auto; margin-top: clamp(10px, 2vh, 22px); }
}