@font-face{font-family:"Host Grotesk";src:url(/assets/fonts/host-grotesk-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Baskervville";src:url(/assets/fonts/baskervville-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --white:#fff;--black:#000;
  /* 1u = 1px del diseño (2000×1125) */
  --u:min(calc(100vw / 2000),calc(100svh / 1125));
  --pad:calc(48 * var(--u));
  --ease:cubic-bezier(.65,0,.25,1);
  --t:.8s;
  --sans:"Host Grotesk",system-ui,sans-serif;
  --serif:"Baskervville",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--white);color:var(--black)}
body{font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:1px solid var(--black);outline-offset:4px}

.app{position:fixed;inset:0;height:100svh;overflow:hidden}
.is-loading .menu,.is-loading .menu *{transition:none!important}
.is-loading .menu{opacity:0}

/* Cabecera */
.top{position:absolute;left:var(--pad);right:calc(52 * var(--u));top:calc(18 * var(--u));display:flex;justify-content:space-between;align-items:baseline;
  font-size:calc(205 * var(--u));line-height:1;letter-spacing:-.02em;white-space:nowrap}
.title{font:inherit}
.num{display:inline-flex}
/* /01 lleva a home desde cualquier vista: la cabecera va por encima de todo (también de ABOUT) y la zona que se pulsa
   es solo la de las cifras (de su parte de arriba a la línea base), para no comerse los clics de Posters, que va justo debajo */
.top{z-index:4;pointer-events:none}
.num{position:relative;pointer-events:none}
.num::after{content:"";position:absolute;left:0;right:0;top:8%;bottom:14%;pointer-events:auto}

/* Esquinas del archivo */
.cat{position:absolute;font-family:var(--serif);font-style:italic;font-size:calc(38 * var(--u));line-height:1;letter-spacing:-.02em;
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t),transform var(--t) var(--ease)}
.cat--tl{left:var(--pad);top:calc(230 * var(--u));transform:translateY(-12px)}
.cat--tr{right:calc(64 * var(--u));top:calc(230 * var(--u));transform:translateY(-12px)}
.cat--bl{left:var(--pad);top:calc(918 * var(--u));transform:translateY(12px)}
.cat--br{right:calc(64 * var(--u));top:calc(922 * var(--u));transform:translateY(12px)}
.cat::after{content:"";position:absolute;left:-.3em;right:-.45em;top:55%;height:max(1px,calc(2 * var(--u)));background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.cat.is-on::after{transform:scaleX(1)}
[data-view=archive] .cat{opacity:1;visibility:visible;transform:none;transition-delay:.25s}
[data-view=archive] .cat--tr{transition-delay:.32s}
[data-view=archive] .cat--bl{transition-delay:.39s}
[data-view=archive] .cat--br{transition-delay:.46s}

/* Series: siempre centradas en altura */
.series{position:absolute;left:var(--pad);top:calc(290 * var(--u));bottom:calc(210 * var(--u));width:calc(440 * var(--u));
  display:flex;flex-direction:column;justify-content:center;gap:calc(4 * var(--u));pointer-events:none}
.serie{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.series.is-in .serie{opacity:1;transform:none;pointer-events:auto}
.series.is-in .serie.is-gone{opacity:0;transform:translateX(-14px);pointer-events:none}
.serie button,.serie p{display:flex;align-items:baseline;text-align:left;font-size:calc(38 * var(--u));line-height:1.1;white-space:nowrap}
.serie p{font-family:var(--serif);font-style:italic}
.serie__line{display:block;width:0;height:max(1px,calc(2 * var(--u)));background:currentColor;align-self:center;margin-top:.35em;
  margin-right:0;transition:width .8s var(--ease),margin .8s var(--ease)}
.serie__t{display:inline-grid}
.serie__t>span{grid-area:1/1;transition:opacity .45s var(--ease)}
.serie__i{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.serie__g{font-family:var(--sans);letter-spacing:-.02em;opacity:0}
.serie.is-on .serie__line{width:calc(185 * var(--u));margin-right:calc(4 * var(--u))}
.serie.is-on .serie__i{opacity:0}
.serie.is-on .serie__g{opacity:1;transition-delay:.15s}

/* Galería: 3 huecos alineados */
.gallery{position:absolute;left:calc(502 * var(--u));right:calc(64 * var(--u));top:calc(286 * var(--u));bottom:calc(210 * var(--u));
  --gap:calc(9 * var(--u));--cols:3;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.gallery.is-in{opacity:1;visibility:visible}
.gallery__track{display:flex;gap:var(--gap);height:100%;align-items:flex-start;transition:transform 1s var(--ease);will-change:transform;touch-action:pan-y;cursor:grab}
.gallery__track:active{cursor:grabbing}
.pic{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));aspect-ratio:3/4;max-height:100%;background:#f2f2f2;overflow:hidden;
  opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pic.is-in{opacity:1;transform:none}
.pic{cursor:zoom-in}
.pic img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.gallery__btn{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;background:var(--white);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.gallery__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.gallery__btn--prev{left:0}.gallery__btn--next{right:0}
.gallery.can-prev .gallery__btn--prev,.gallery.can-next .gallery__btn--next{opacity:1;pointer-events:auto}

/* Photography: filtros (más pequeños, sin línea ni cambio de letra: se tacha el elegido) y cuadrícula de 2 filas */
.series--filters{width:calc(250 * var(--u))}
.serie__f{position:relative;display:inline-block;font-family:var(--serif);font-style:italic;font-size:calc(30 * var(--u));line-height:1.15;letter-spacing:-.02em}
.serie__f::after{content:"";position:absolute;left:-.3em;right:-.45em;top:55%;height:max(1px,calc(2 * var(--u)));background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.serie.is-on .serie__f::after{transform:scaleX(1)}
/* Selector de apartados (Covers   Video): en una línea, separado de los filtros por una línea en blanco */
/* Apartados (Covers / Video): series como las de Posters, uno encima del otro; los filtros, debajo tras un hueco */
.series--filters:has(.serie--sec){width:calc(440 * var(--u))}
.gallery--grid{left:calc(320 * var(--u));right:calc(150 * var(--u));top:calc(295 * var(--u));bottom:calc(220 * var(--u));--gap:calc(17 * var(--u));--cols:5}
.gallery--grid .gallery__track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));align-content:start}
.gallery--grid .pic{aspect-ratio:1;max-height:none;flex:none}

/* Protección de las imágenes (sin marca de agua): una capa transparente encima, sin arrastrar, sin seleccionar,
   sin menú de mantener pulsado en iPhone y sin imprimir. El menú contextual lo bloquea main.js. */
.pic,.about__pic{position:relative}
.pic::after,.about__pic::after{content:"";position:absolute;inset:0}
.shield{position:absolute;inset:0}
.pic img,.about__pic img,.box__img{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gallery,.about__pic,.box{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media print{.pic,.about__pic,.box{display:none!important}}

/* Covers: 3 columnas, con las celdas del mismo tamaño que en Photography (el ancho sale de la altura) */
.gallery--wide{left:calc(502 * var(--u))}
.gallery--c3{--cols:3;left:calc(502 * var(--u));right:auto;width:calc(910 * var(--u))}

/* Visor */
.box{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:var(--white);color:var(--black);
  opacity:0;transition:opacity .5s var(--ease)}
.box::backdrop{background:transparent}
.box.is-in{opacity:1}
.box__stage{position:absolute;inset:calc(110 * var(--u)) calc(180 * var(--u));display:flex;align-items:center;justify-content:center;min-height:0}
.box__img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;display:block;user-select:none;-webkit-user-drag:none;
  transition:opacity .45s var(--ease),transform .6s var(--ease)}
.box__img.is-out{opacity:0;transform:translateX(var(--dx,0))}
.box__name{position:absolute;left:var(--pad);top:calc(40 * var(--u));font-family:var(--serif);font-style:italic;font-size:max(15px,calc(38 * var(--u)))}
.box__n{position:absolute;left:var(--pad);bottom:calc(40 * var(--u));font-size:max(13px,calc(28 * var(--u)));font-variant-numeric:tabular-nums}
.box button{position:absolute;display:grid;place-items:center;width:max(44px,calc(80 * var(--u)));height:max(44px,calc(80 * var(--u)))}
.box svg{width:max(26px,calc(52 * var(--u)));height:auto;fill:none;stroke:currentColor;stroke-width:2.6}
.box__close{right:calc(40 * var(--u));top:calc(24 * var(--u))}
.box__prev{left:calc(40 * var(--u));top:50%;transform:translateY(-50%)}
.box__next{right:calc(40 * var(--u));top:50%;transform:translateY(-50%)}
.box__info{display:none}
.box.has-info .box__info{display:flex;flex-direction:column;position:absolute;left:calc(1160 * var(--u));right:calc(180 * var(--u));
  top:calc(110 * var(--u));bottom:calc(110 * var(--u));justify-content:center;font-size:calc(21 * var(--u));line-height:calc(26 * var(--u))}
.box.has-info .box__stage{right:calc(900 * var(--u))}
.box__info .lang{margin-bottom:calc(60 * var(--u))}
.box__text{display:flex;flex-direction:column;min-height:0}
.box__title{font:inherit;font-size:calc(52 * var(--u));line-height:1.05;letter-spacing:-.02em;margin-bottom:calc(30 * var(--u))}
.box__txt{overflow-y:auto;min-height:0;max-width:calc(640 * var(--u))}
.box__year{font-family:var(--serif);font-style:italic;font-size:1.1em;margin-top:calc(26 * var(--u))}
.box.is-single .box__prev,.box.is-single .box__next{display:none}
@media (hover:hover){.box__prev:hover svg{transform:translateX(-4px)}.box__next:hover svg{transform:translateX(4px)}.box svg{transition:transform .4s var(--ease)}}
@media (max-aspect-ratio:1/1){
  .box__stage{inset:calc(150 * var(--u)) var(--pad) calc(220 * var(--u))}
  .box__prev,.box__next{top:auto;bottom:calc(20 * var(--u));transform:none}
  .box__prev{left:auto;right:calc(140 * var(--u))}
}

/* Abouto */
.about{position:absolute;inset:0;pointer-events:none;visibility:hidden;transition:visibility 0s .8s}
[data-view=about] .about{visibility:visible;pointer-events:auto;transition:none}
.about__pic,.about .lang,.about__body p{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
[data-view=about] .about__pic,[data-view=about] .about .lang,[data-view=about] .about__body p{opacity:1;transform:none;transition-delay:calc(.3s + var(--i,0) * 70ms)}
.about__pic{position:absolute;left:var(--pad);top:calc(230 * var(--u));width:calc(482 * var(--u));height:calc(722 * var(--u));overflow:hidden;background:#f2f2f2}
.about__pic img{display:block;width:100%;height:100%;object-fit:cover}
.about__txt{position:absolute;left:calc(560 * var(--u));top:calc(228 * var(--u));width:calc(860 * var(--u));font-size:calc(21 * var(--u));line-height:calc(26 * var(--u))}
.about__txt .b{font-family:var(--serif);font-style:italic;font-size:1.04em;letter-spacing:-.01em;margin-left:calc(var(--l,0) * var(--u));margin-right:calc(var(--r,0) * var(--u))}
.about__body{white-space:nowrap}
/* La última línea acaba siempre a ras del borde de abajo de la foto, sea cual sea el idioma */
.about__txt{height:calc(726 * var(--u));display:flex;flex-direction:column}
.about__body:not([hidden]){flex:1;display:flex;flex-direction:column}
.about__body p:last-child{margin-top:auto;padding-top:calc(26 * var(--u))}
.about__body:not([lang=es]){white-space:normal}
.about__body p+p{margin-top:calc(26 * var(--u))}
.about__body p:first-child{margin-bottom:calc(0 * var(--u))}
.lang{display:flex;gap:calc(58 * var(--u));margin-bottom:calc(78 * var(--u))}
.lang button{position:relative;font-size:inherit;line-height:inherit}
.lang button::after{content:"";position:absolute;left:-.2em;right:-.25em;top:52%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.lang button[aria-pressed=true]::after{transform:scaleX(1)}

/* Menú */
.menu{position:absolute;right:calc(64 * var(--u));bottom:calc(36 * var(--u));--aw:calc(52 * var(--u));--agap:calc(250 * var(--u))}
.menu ul{display:flex;flex-direction:column;align-items:flex-end}
.menu li{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--t) var(--ease),opacity .55s var(--ease)}
.menu li>a{min-height:0;overflow:hidden;display:block;position:relative;font-size:calc(110 * var(--u));line-height:1.2;letter-spacing:-.02em;
  text-align:right;min-width:calc(var(--mw,0px) + var(--agap) + var(--aw));transition:min-width var(--t) var(--ease)}
.menu li>a span{display:inline-block;line-height:1.2}
.menu li.is-hidden{grid-template-rows:0fr;opacity:0;pointer-events:none}
.arrow{position:absolute;top:50%;width:var(--aw);height:var(--aw);margin-top:calc(var(--aw) / -2);fill:none;stroke:currentColor;
  stroke-width:4.2;stroke-linecap:butt;stroke-linejoin:miter;
  left:0;transition:transform .5s var(--ease)}
.menu.is-single{--agap:calc(30 * var(--u))}
@media (hover:hover){.menu a:hover .arrow{transform:translate(-4px,-4px)}}

.sym{display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.5}
.copy{position:absolute;left:calc(25 * var(--u));bottom:calc(28 * var(--u));font-size:max(10px,calc(20 * var(--u)));line-height:1.3}

/* Móvil en vertical */
@media (max-aspect-ratio:1/1){
  :root{--u:calc(100vw / 1000);--pad:calc(40 * var(--u))}
  .top{font-size:calc(112 * var(--u));top:calc(40 * var(--u));right:var(--pad)}
  .cat,.serie button,.serie p{font-size:calc(46 * var(--u))}
  .about__pic{top:calc(220 * var(--u));width:calc(400 * var(--u));height:calc(600 * var(--u))}
  .about__txt{left:var(--pad);right:var(--pad);width:auto;top:calc(860 * var(--u));bottom:calc(330 * var(--u));overflow-y:auto;font-size:calc(34 * var(--u));line-height:1.3}
  .about__body,.about__body:not([lang=es]){white-space:normal}
  .about__body br.d{display:none}
  .about__txt{height:auto;display:block}
  .about__body:not([hidden]){display:block}
  .about__body p:last-child{margin-top:calc(26 * var(--u));padding-top:0}
  .about__txt .b{margin:0 .25em}
  .lang{gap:calc(40 * var(--u));margin-bottom:calc(40 * var(--u))}
  [data-view=about] .copy{opacity:0}
  .cat--tl,.cat--tr{top:calc(240 * var(--u))}
  .cat--tr,.cat--br{right:var(--pad)}
  .cat--bl,.cat--br{top:auto;bottom:calc(250 * var(--u))}
  /* Móvil: series de Posters, Artworks y Branding fijas arriba (no se centran ni se mueven al salir filtros) */
  .series{top:calc(354 * var(--u));bottom:auto;height:calc(260 * var(--u));width:auto;right:var(--pad);justify-content:flex-start}
  .serie.is-on .serie__line{width:calc(120 * var(--u))}
  .gallery{left:var(--pad);right:var(--pad);top:calc(620 * var(--u));bottom:calc(320 * var(--u));--gap:calc(10 * var(--u))}
  .gallery{--cols:2}
  .series--filters{width:auto;top:calc(370 * var(--u));height:auto;display:block}
  .series--cols{display:block;height:auto;columns:2;column-gap:var(--pad)}
  .series--filters:has(.serie--sec){display:flex;top:calc(354 * var(--u));height:auto}
  .series--cols .serie{break-inside:avoid}
  .series--cols .serie--sec{column-span:all}
  .serie__f{font-size:calc(40 * var(--u))}
  .gallery--c3{--cols:3;right:var(--pad);width:auto}
  .box.has-info .box__stage{inset:calc(150 * var(--u)) var(--pad) auto;height:calc(560 * var(--u))}
  .box.has-info .box__info{left:var(--pad);right:var(--pad);top:calc(740 * var(--u));bottom:calc(300 * var(--u));justify-content:flex-start;font-size:calc(34 * var(--u));line-height:1.3}
  .box__info .lang{margin-bottom:calc(30 * var(--u))}
  .box__title{font-size:calc(60 * var(--u))}
  .box__txt{max-width:none}
  .gallery--grid{left:var(--pad);right:var(--pad);top:calc(640 * var(--u));bottom:calc(320 * var(--u));--gap:calc(10 * var(--u));--cols:3}
  .menu{right:var(--pad);bottom:calc(60 * var(--u) + env(safe-area-inset-bottom))}
  .menu li>a{font-size:calc(120 * var(--u))}
  .menu{--agap:calc(60 * var(--u))}
  .menu.is-single{--agap:calc(30 * var(--u))}
  .copy{left:var(--pad);bottom:calc(60 * var(--u) + env(safe-area-inset-bottom));font-size:11px}
  [data-view=archive] .copy{opacity:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}}

/* Cada desplegable sale de su botón (19-10-2026, lo pidió Javier):
   Posters baja desde Posters; Photography baja desde Photography, pegado a la derecha;
   Artworks sube desde Artworks (Covers / Video justo encima y sus filtros encima de ellos);
   Branding sube desde Branding, pegado a la derecha, con la línea y el cambio de letra de derecha a izquierda. */
.series[data-cat]{justify-content:flex-start}
.series[data-cat=photography],.series[data-cat=branding]{left:auto;right:calc(64 * var(--u));align-items:flex-end;text-align:right}
.series[data-cat=artworks],.series[data-cat=branding]{top:calc(290 * var(--u));bottom:calc(100% - 890 * var(--u));justify-content:flex-end}
.series[data-cat=photography] .serie,.series[data-cat=branding] .serie{transform:translateX(14px)}
.series.is-in[data-cat] .serie{transform:none}
.series.is-in[data-cat] .serie.is-gone{transform:translateX(-14px)}
.series[data-cat=photography] .serie.is-gone,.series[data-cat=branding] .serie.is-gone{transform:translateX(14px)}
.series[data-cat=artworks] .serie:not(.serie--sec){order:-1}
.series[data-cat=artworks] .serie--sec~.serie:not(.serie--sec):last-child{margin-bottom:calc(40 * var(--u))}
.series[data-cat=branding] .serie button{flex-direction:row-reverse}
.series[data-cat=branding] .serie__t{justify-items:end}
.series[data-cat=branding] .serie.is-on .serie__line{margin-right:0;margin-left:calc(4 * var(--u))}
.series[data-cat=photography] .serie__f::after{transform-origin:right}
/* Galerías: Photography y Branding se apartan a la izquierda para dejar su desplegable a la derecha */
.gallery[data-cat=photography]{left:calc(150 * var(--u));right:calc(320 * var(--u))}
.gallery[data-cat=branding]{left:auto;right:calc(502 * var(--u));width:calc(910 * var(--u))}

@media (max-aspect-ratio:1/1){
  .series[data-cat]{display:flex;height:auto;top:calc(354 * var(--u));bottom:auto;left:var(--pad);right:var(--pad)}
  .series[data-cat=photography]{display:block;top:calc(370 * var(--u));left:auto;right:var(--pad)}
  .series[data-cat=photography].series--cols{columns:2;column-gap:var(--pad)}
  .series[data-cat=photography] .serie{text-align:right}
  .series[data-cat=photography] .serie button{display:inline-flex}
  .series.series[data-cat=artworks],.series.series[data-cat=branding]{top:auto;bottom:calc(330 * var(--u))}
  .gallery[data-cat]{left:var(--pad);right:var(--pad);width:auto}
  .gallery[data-cat=artworks],.gallery[data-cat=branding]{top:calc(330 * var(--u));bottom:calc(630 * var(--u))}
}

/* Safari (19-10-2026, lo vio Javier en el iPhone): las líneas recogidas a cero (ancho 0 o scaleX(0)) a veces dejan un punto de 1 px
   junto a la palabra. Al terminar de recogerse se ocultan del todo con opacidad; al salir aparecen al instante y luego crecen. */
.cat::after,.serie__f::after,.lang button::after{opacity:0;transition:transform .7s var(--ease),opacity 0s linear .7s}
.cat.is-on::after,.serie.is-on .serie__f::after,.lang button.is-on::after,.lang button[aria-pressed=true]::after{opacity:1;transition:transform .7s var(--ease),opacity 0s}
.serie__line{opacity:0;transition:width .8s var(--ease),margin .8s var(--ease),opacity 0s linear .8s}
.serie.is-on .serie__line{opacity:1;transition:width .8s var(--ease),margin .8s var(--ease),opacity 0s}

/* ABOUT › tarjeta de contacto (19-10-2026, diseño aprobado por Javier: pequeña, a la derecha y a ras del pie de la foto).
   Va dentro de .about__txt (para que en el móvil baje con el texto); en ordenador se saca hasta el borde derecho. */
.contact{position:absolute;bottom:calc(2 * var(--u));right:calc(-1 * (100vw - 1420 * var(--u) - 64 * var(--u)));width:calc(300 * var(--u));
  font-size:calc(18 * var(--u));line-height:1.2;letter-spacing:-.01em;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
[data-view=about] .contact{opacity:1;transform:none;transition-delay:.75s}
.contact__title{font-family:var(--serif);font-style:italic;font-size:calc(22 * var(--u));margin-bottom:calc(12 * var(--u))}
.contact ul{list-style:none}
.contact li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:calc(4 * var(--u)) 0}
.contact__k{font-family:var(--serif);font-style:italic}
.contact a{display:inline-flex;align-items:baseline}
.contact__arrow{width:.62em;height:.62em;margin-left:.35em;fill:none;stroke:currentColor;stroke-width:4.2;transition:transform .4s var(--ease)}
@media (hover:hover){.contact a:hover .contact__arrow{transform:translate(2px,-2px)}}
@media (max-aspect-ratio:1/1){
  .contact{position:static;width:auto;margin-top:calc(70 * var(--u));font-size:calc(26 * var(--u))}
  .contact__title{font-size:calc(30 * var(--u))}
}