/* ==========================================================================
   Francesca Pia Salamone — Portfolio
   Ricostruzione pixel-perfect dal design Figma.
   Font: Roboto · Lingua: IT · Base 1920 · gutter 150 · type H1 100 / H2 50
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root{
  /* spacing scale (design token) */
  --sp-10:10px;
  --sp-15:15px;
  --sp-20:20px;
  --sp-25:25px;
  --sp-50:50px;
  --sp-100:100px;
  --sp-150:150px;

  /* gutter di pagina: 150 desktop → 50 (≤1300) → 24 (mobile) */
  --gutter:clamp(24px, 8vw, 150px);

  /* typography */
  --font:'Roboto','Helvetica Neue',Arial,'Segoe UI',system-ui,sans-serif;
  /* Tipografia fluida: scala in modo continuo da mobile a desktop (transizione naturale).
     min = mobile · valore vw = interpolazione · max = desktop (Figma) */
  --fs-h1:clamp(48px, 7vw, 100px);
  --fs-h2:clamp(30px, 3.6vw, 50px);
  --fs-quote:clamp(44px, 6.4vw, 92px);
  --fs-30:clamp(20px, 2.2vw, 30px);
  --fs-body:clamp(15px, 1.15vw, 18px);
  --fs-footer:clamp(12px, 1vw, 14px);

  /* colors */
  --c-black:#000;
  --c-white:#fff;
  --c-footer-bg:#f9f8fa;
  --c-hover:#d9d9d9;
  --c-input:#f5f5f6;
  --c-box:#e9e9ea;

  /* motion */
  --ease:cubic-bezier(.42,0,1,1);
  --dur:300ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100dvh;
  display:flex; flex-direction:column;
  font-family:var(--font); font-size:var(--fs-body);
  color:var(--c-black); background:var(--c-white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.page-body{ flex:1 0 auto; display:flex; flex-direction:column; }
.site-footer{ flex-shrink:0; margin-top:auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---- Tipografia ---- */
.h1{ font-size:var(--fs-h1); font-weight:700; line-height:1; margin:0; }
.h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.1; margin:0; }
.quote{ font-size:var(--fs-quote); font-weight:700; line-height:1.05; margin:0; }
.text{ font-size:var(--fs-body); font-weight:400; line-height:1.35; margin:0; }
.light{ font-weight:300; }
.medium{ font-weight:500; }

/* ---- Utility ---- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--c-black); outline-offset:3px;
}
.underline{ position:relative; display:inline-block; padding-bottom:2px; }
.underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.underline:hover::after,.underline:focus-visible::after{ transform:scaleX(1); }

/* ---- Bottoni ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:60px; padding:0 var(--sp-25);
  font-size:var(--fs-body); font-weight:500;
  border:none; border-radius:8px;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-white{ background:var(--c-white); color:var(--c-black); }
.btn-white:hover,.btn-white:focus-visible{ background:var(--c-hover); }
.btn-dark{ background:var(--c-black); color:var(--c-white); }
.btn-dark:hover,.btn-dark:focus-visible{ background:var(--c-hover); color:var(--c-black); }
.btn:disabled{ background:var(--c-input); color:#b7b7b7; cursor:not-allowed; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  height:80px; padding:0 var(--gutter);
  background:var(--c-white); position:relative; z-index:30;
}
.navbar__logo{ display:flex; align-items:center; cursor:pointer; }
.navbar__logo img{ height:46px; width:auto; }
.navbar__right{ display:flex; align-items:center; gap:var(--sp-25); }
.navbar__links{ display:flex; align-items:center; gap:var(--sp-25); white-space:nowrap; }
.nav-link{ font-size:var(--fs-body); font-weight:400; position:relative; padding-bottom:2px; }
.nav-link.current{ font-weight:500; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav-link:hover::after,.nav-link:focus-visible::after{ transform:scaleX(1); }
.navbar__icons{ display:flex; align-items:center; gap:var(--sp-25); }
.navbar__icons a{ display:flex; align-items:center; font-weight:700; font-size:16px; }

.navbar__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; padding:0; z-index:210;
}
.navbar__burger span{
  display:block; width:26px; height:2px; background:var(--c-black);
  transition:transform 300ms var(--ease), opacity 200ms var(--ease);
}
.mobile-menu{
  position:fixed; inset:0; z-index:200; background:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 300ms var(--ease);
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu__nav{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-50); }
.mobile-menu__link{
  font-size:44px; font-weight:600; opacity:0; transform:translateY(12px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu.is-open .mobile-menu__link{ opacity:1; transform:translateY(0); }
.mobile-menu.is-open .mobile-menu__link:nth-child(1){ transition-delay:80ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2){ transition-delay:140ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3){ transition-delay:200ms; }
.mobile-menu__social{ display:flex; gap:var(--sp-25); margin-top:var(--sp-25); font-size:20px; font-weight:700; opacity:0; transition:opacity 300ms var(--ease) 260ms; }
.mobile-menu.is-open .mobile-menu__social{ opacity:1; }

/* X di chiusura dentro l'overlay (sempre sopra) */
.mobile-menu__close{
  position:absolute; top:15px; right:24px; z-index:2;
  width:32px; height:32px; background:none; border:none; padding:0; cursor:pointer;
}
.mobile-menu__close span{
  position:absolute; top:50%; left:50%; width:26px; height:2px; background:var(--c-black);
  transform-origin:center;
}
.mobile-menu__close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.mobile-menu__close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }

/* quando il menu è aperto, il burger (sotto l'overlay) scompare del tutto */
body.menu-open .navbar__burger{ opacity:0; pointer-events:none; }

/* ==========================================================================
   Homepage — filtri + lista progetti
   ========================================================================== */
.filters{
  display:flex; align-items:center; gap:var(--sp-25); flex-wrap:wrap;
  padding:0 var(--gutter); margin-top:var(--sp-50);
}
.filters__label{ font-size:var(--fs-body); font-weight:500; }
.filter-btn{
  font-size:var(--fs-body); font-weight:400; background:none; border:none;
  padding:0 0 2px; position:relative;
}
.filter-btn::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.filter-btn:hover::after,.filter-btn:focus-visible::after{ transform:scaleX(1); }
.filter-btn.active{ font-weight:500; }

.projects{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:65px var(--sp-50);
  padding:var(--sp-50) var(--gutter);
}
.project{
  display:flex; align-items:flex-end; gap:var(--sp-10); cursor:pointer;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.project__name{
  font-size:var(--fs-h1); font-weight:700; line-height:1;
  transition:opacity var(--dur) var(--ease);
}
.project__cat{ font-size:var(--fs-30); font-weight:300; white-space:nowrap; }
.project:hover .project__name{ opacity:.55; }
.project[hidden]{ display:none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--c-footer-bg); padding:var(--sp-100) var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-100);
}
.footer__back{
  display:flex; align-items:center; justify-content:center;
  gap:50px; flex-wrap:wrap;
}
.footer__back button,.footer__nav{
  background:none; border:none; padding:0;
  font-size:20px; font-weight:500; color:var(--c-black);
}
.footer__contacts{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-25); width:100%; }
.footer__row{ display:flex; gap:var(--sp-25); align-items:center; flex-wrap:wrap; justify-content:center; line-height:1; }
.footer__row a,.footer__row span{ font-size:var(--fs-body); font-weight:500; line-height:1; }
.footer__legal{ font-size:var(--fs-footer); text-align:center; max-width:900px; line-height:1.4; margin:0; }


/* ==========================================================================
   Page header (About / Contact)
   ========================================================================== */
.page-header{ padding:var(--sp-50) var(--gutter); display:flex; flex-direction:column; gap:var(--sp-25); }
.breadcrumb{ font-size:var(--fs-body); }
.breadcrumb a{ font-weight:500; }

/* ==========================================================================
   About
   ========================================================================== */
.about-hero,.about-cta{
  background:var(--c-black); color:var(--c-white); min-height:550px;
  padding:var(--sp-100) var(--gutter);
  display:flex; gap:var(--sp-50); flex-wrap:wrap;
  align-items:flex-start; justify-content:space-between;
}
.about-hero__quote{ flex:0 1 663px; max-width:663px; }
.about-hero__right{ flex:0 1 800px; max-width:800px; display:flex; flex-direction:column; gap:var(--sp-50); }
.about-block{ display:flex; flex-direction:column; gap:var(--sp-25); }
.about-block h3{ font-size:var(--fs-30); font-weight:500; margin:0; }
.about-hero__desc{ max-width:800px; }
.about-skills{ display:flex; gap:var(--sp-20); flex-wrap:wrap; }
.about-skills ul{ flex:0 1 389px; max-width:389px; display:flex; flex-direction:column; gap:var(--sp-15); }
.about-skills li{ font-size:var(--fs-30); font-weight:500; }

.about-story{
  padding:0 var(--gutter); margin-top:var(--sp-50);
  display:flex; gap:160px; flex-wrap:wrap; align-items:center;
}
.about-story__photo{
  flex:0 1 800px; max-width:800px; aspect-ratio:800/734;
  background:var(--c-box); object-fit:cover;
}
.about-story__text{ flex:0 1 660px; max-width:660px; display:flex; flex-direction:column; gap:var(--sp-25); }
.about-story__text .stack{ display:flex; flex-direction:column; gap:var(--sp-20); }

.about-cta{ margin-top:var(--sp-50); align-items:center; }
.about-cta__text{ flex:0 1 700px; max-width:700px; display:flex; flex-direction:column; gap:var(--sp-25); }
.about-cta .btn{ flex:0 0 auto; min-width:193px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-wrap{
  padding:var(--sp-50) var(--gutter) var(--sp-100);
  display:flex; gap:var(--sp-20); flex-wrap:wrap; align-items:flex-start;
}
.contact-intro{ flex:1 1 380px; max-width:410px; align-self:center; display:flex; flex-direction:column; gap:var(--sp-25); }
.contact-intro__text{ display:flex; flex-direction:column; gap:var(--sp-25); }

.contact-form{ flex:0 1 1209px; max-width:1209px; min-width:0; display:flex; flex-direction:column; }
.form-row{ display:flex; gap:var(--sp-20); margin-bottom:var(--sp-50); }
.form-field{ display:flex; flex-direction:column; gap:var(--sp-15); min-width:0; }
.form-field--a{ flex:0 0 389px; max-width:389px; }
.form-field--num{ flex:0 0 390px; max-width:390px; }
.form-field--subj{ flex:1 1 auto; }
.form-field--full{ flex:1 1 100%; }
.form-field label{ font-size:var(--fs-body); font-weight:300; }
.form-field input,.form-field textarea{
  font:inherit; font-weight:300; background:var(--c-input);
  border:1px solid transparent; border-radius:8px;
  padding:0 var(--sp-15); height:60px; color:var(--c-black);
}
.form-field textarea{ height:200px; padding:var(--sp-15); resize:vertical; }
.form-field input::placeholder,.form-field textarea::placeholder{ color:var(--c-black); opacity:.45; }
.form-field input:focus,.form-field textarea:focus{
  outline:2px solid var(--c-black); animation:field-blink 600ms var(--ease);
}
@keyframes field-blink{ 0%{background:var(--c-input);} 50%{background:#e2e2e4;} 100%{background:var(--c-input);} }

.contact-legal{ font-size:var(--fs-body); margin:0 0 var(--sp-50); }
.contact-consent{ display:flex; gap:var(--sp-10); align-items:flex-start; font-size:var(--fs-body); margin-bottom:var(--sp-50); cursor:pointer; }
.contact-consent input{ margin-top:5px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--c-black); }
.contact-consent input.is-blinking{ animation:consent-blink 300ms var(--ease) 2; }
@keyframes consent-blink{ 0%{opacity:1;} 50%{opacity:.2;} 100%{opacity:1;} }
.contact-form .btn{ min-width:169px; align-self:flex-start; }
.contact-status{ margin:var(--sp-25) 0 0; font-size:var(--fs-body); line-height:1.4; max-width:600px; }
.contact-status.is-ok{ color:#1a7f37; }
.contact-status.is-error{ color:#b3261e; }

/* ==========================================================================
   Pagine progetto (case study)
   ========================================================================== */
.case-hero .img-box{ aspect-ratio:1920/988; }

.case-info{
  padding:var(--sp-50) var(--gutter) 0;
  display:flex; gap:100px; align-items:flex-start; justify-content:space-between;
}
.case-info__main{ flex:0 1 583px; max-width:583px; display:flex; flex-direction:column; gap:var(--sp-50); }
.case-info__block{ display:flex; flex-direction:column; gap:var(--sp-25); }
.case-info__block .text + .text{ margin-top:var(--sp-20); }
.case-info__meta{
  flex:0 1 583px; max-width:583px; align-self:center;
  display:flex; justify-content:space-between; gap:var(--sp-50);
}
.case-info__meta dl{ margin:0; flex:0 0 252px; max-width:252px; display:flex; flex-direction:column; }
.case-info__meta dt{ font-size:var(--fs-body); font-weight:500; margin:0 0 var(--sp-25); }
.case-info__meta dd{ margin:0; font-size:var(--fs-body); font-weight:300; }

.case-gallery{ margin-top:var(--sp-50); display:flex; flex-direction:column; gap:var(--sp-20); }
.gallery-row{ display:flex; gap:var(--sp-20); align-items:stretch; }
.gallery-row > .img-box{ flex-grow:1; flex-shrink:1; flex-basis:0; min-width:0; }
.gallery-col{ display:flex; flex-direction:column; gap:var(--sp-20); flex-grow:1; flex-shrink:1; flex-basis:0; min-width:0; }

/* box immagine "blindato": aspect-ratio inline + cover */
.img-box{
  background:var(--c-box); width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.img-box > img,.img-box > video{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
/* righe asimmetriche: colonna impilata + foto alta; larghezze via flex-grow inline (box Figma) */
.gallery-row--asym{ align-items:stretch; }
.gallery-row--asym > .gallery-col{ flex-shrink:1; flex-basis:0; min-width:0; }
.gallery-row--asym > .img-box--fill{
  flex-shrink:1; flex-basis:0; min-width:0;
  align-self:stretch; position:relative; aspect-ratio:auto; height:auto;
}
.gallery-row--asym > .img-box--fill > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* ==========================================================================
   Modale preview progetto
   ========================================================================== */
.project-modal{ position:fixed; inset:0; z-index:100; display:flex; visibility:hidden; pointer-events:none; }
.project-modal__backdrop{ position:absolute; inset:0; background:var(--c-white); opacity:0; transition:opacity 300ms var(--ease); }
.project-modal__card{
  position:relative; width:100vw; height:100dvh; background:var(--c-white);
  display:flex; overflow:hidden; opacity:0; transform:scale(.99);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.project-modal.is-open{ visibility:visible; pointer-events:auto; }
.project-modal.is-open .project-modal__backdrop{ opacity:1; }
.project-modal.is-open .project-modal__card{ opacity:1; transform:scale(1); }
.project-modal__image{ flex:0 0 56.615%; height:100%; background:var(--c-box) center/cover no-repeat; }
.project-modal__panel{
  flex:1 1 auto; padding:100px 150px;
  display:flex; flex-direction:column; justify-content:center;
  overflow-y:auto; position:relative;
}
.project-modal__close{
  position:absolute; top:100px; right:150px;
  background:none; border:none; font-size:18px; font-weight:500; padding:0; line-height:1;
}
.project-modal__block{ display:flex; flex-direction:column; gap:var(--sp-50); max-width:583px; }
.project-modal__type{ font-size:var(--fs-body); font-weight:700; margin:0; }
.project-modal__title{ font-size:var(--fs-h1); font-weight:700; line-height:1; margin:0; }
.project-modal__desc{ font-size:var(--fs-body); font-weight:400; line-height:1.35; margin:0; }
.project-modal__meta{ display:flex; justify-content:space-between; gap:var(--sp-25); margin-top:var(--sp-50); max-width:583px; }
.project-modal__meta dl{ margin:0; display:flex; flex-direction:column; }
.project-modal__meta--area{ flex:0 0 169px; }
.project-modal__meta--item{ flex:0 0 253px; }
.project-modal__meta dt{ font-size:var(--fs-body); font-weight:500; margin:0 0 var(--sp-25); }
.project-modal__meta dd{ margin:0; font-size:var(--fs-body); font-weight:300; }
.project-modal__view{ margin-top:var(--sp-50); font-size:var(--fs-body); font-weight:500; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1840px){
  .case-info{ flex-direction:column; gap:var(--sp-50); }
  .case-info__main{ flex:1 1 auto; max-width:100%; }
  .case-info__meta{ flex:1 1 auto; max-width:583px; align-self:auto; margin:0 auto; width:100%; }
}

@media (max-width:1300px){
  .about-story{ gap:var(--sp-50); }
  .contact-form{ flex:1 1 100%; max-width:100%; }
  .form-field--a,.form-field--num,.form-field--subj{ flex:1 1 250px; max-width:none; }
}

/* Layout "mobile" esteso fino al tablet (≤1024): hamburger, gallery a colonna,
   modale con foto sopra, form impilati. Tipografia e gutter già fluidi via clamp. */
@media (max-width:1024px){
  :root{
    --sp-100:clamp(50px, 6vw, 100px);
  }
  .h1,.project__name,.project-modal__title{ font-weight:600; }
  .h2{ font-weight:500; }

  .about-hero,.about-cta{ flex-direction:column; gap:var(--sp-50); align-items:flex-start; }
  .about-hero__quote,.about-hero__right,.about-hero__desc{ flex:1 1 auto; max-width:100%; width:100%; }
  .about-story{ flex-direction:column; gap:var(--sp-50); align-items:stretch; }
  .about-story__photo,.about-story__text{ flex:1 1 auto; max-width:100%; width:100%; }
  .about-cta__text{ flex:1 1 auto; max-width:100%; }
  .contact-wrap{ flex-direction:column; gap:var(--sp-50); }
  .contact-intro{ flex:1 1 auto; max-width:100%; align-self:auto; }

  .navbar{ height:auto; padding:var(--sp-15) var(--gutter); }
  .navbar__logo img{ height:37px; }
  .navbar__right{ display:none; }
  .navbar__burger{ display:flex; }

  .filters{ gap:var(--sp-10); }
  .projects{ gap:var(--sp-25); }
  .project{ flex-direction:column; align-items:flex-start; gap:2px; width:100%; }

  .site-footer{ gap:var(--sp-50); }
  .footer__back{ gap:var(--sp-25); flex-direction:column; }
  .footer__row{ gap:var(--sp-15); }

  .about-hero,.about-cta{ min-height:0; padding:var(--sp-50) var(--gutter); }
  .about-skills{ gap:var(--sp-25); }
  .about-skills ul{ flex:1 1 auto; max-width:100%; }
  .about-cta .btn{ width:100%; }

  .case-info{ padding:var(--sp-50) var(--gutter) 0; gap:var(--sp-50); }
  .case-info__meta{ gap:var(--sp-25); }
  .case-info__meta dl{ flex:1 1 0; max-width:none; }

  .gallery-row,.gallery-row--asym{ flex-direction:column; gap:var(--sp-20); align-items:stretch; }
  .gallery-col{ gap:var(--sp-20); }
  .gallery-row > .img-box,.gallery-col > .img-box{ flex:1 1 auto; }

  /* Modale mobile: foto in alto 600x638, pannello con padding 50/25 (frame 600x1170) */
  .project-modal__card{ flex-direction:column; overflow-y:auto; }
  .project-modal__image{
    flex:0 0 auto; width:100%; height:auto;
    aspect-ratio:600/638;
    max-height:42vh;              /* la foto non supera il 42% dello schermo: il testo ha priorità */
    background-size:cover; background-position:center;
  }
  .project-modal__panel{
    flex:1 1 auto;
    padding:var(--sp-50) var(--gutter);
    justify-content:flex-start; gap:var(--sp-25);
  }
  .project-modal__close{ top:var(--sp-50); right:var(--gutter); }
  .project-modal__block{ gap:var(--sp-25); max-width:100%; }
  .project-modal__desc{ max-width:100%; }
  .project-modal__meta{ margin-top:var(--sp-25); max-width:100%; }
  .project-modal__view{ margin-top:var(--sp-25); }

  .contact-legal,.contact-consent{ margin-bottom:var(--sp-25); }
  .form-row{ flex-direction:column; gap:var(--sp-20); margin-bottom:var(--sp-25); }
  .form-field,.form-field--a,.form-field--num,.form-field--subj,.form-field--full{
    flex:1 1 auto; max-width:100%; width:100%;
  }
  .contact-form .btn{ width:100%; }

  .img-box[data-m="789x913"]{ aspect-ratio:789/913; }
  .img-box[data-m="789x448"]{ aspect-ratio:789/448; }
  .img-box[data-m="789x1080"]{ aspect-ratio:789/1080; }
  .img-box[data-m="382x448"]{ aspect-ratio:382/448; }
  .img-box[data-m="246x448"]{ aspect-ratio:246.33/448; }
  .img-box[data-m="178x913"]{ aspect-ratio:178.5/913; }
  .img-box[data-m="464x448"]{ aspect-ratio:464/448; }
  .img-box[data-m="300x448"]{ aspect-ratio:300/448; }
  .img-box[data-m="928x1080"]{ aspect-ratio:789/913; }
  .gallery-row--asym > .img-box{ aspect-ratio:789/448; }
}

@media (max-width:420px){
  :root{ --fs-h1:48px; }
}