/* Draft template. Palette, type and layout follow the reference site, measured at 1920, 1280 and 375 px.
   Mobile first; the desktop composition (a 1200 px grid, like the reference) starts at 980 px.
   Desktop geometry is written in grid units (--u): 1px when the composition fits the window, smaller when it does not. */
:root {
  --bg: #f2f2f2;
  --text: #4f4f4f;
  --muted: #828282;
  --faint: #bdbdbd;
  --line: #4f4f4f;
  --ph: #e0e0e0;
  --tile: #ffffff;
  --sans: "Jost", "Futura", Arial, sans-serif; /* light geometric sans, set thin */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --header-h: 80px;
  --u: min(1px, calc((100vw - 48px) / 1200));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 300 13px/19px var(--sans);
  min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
main { flex: 1; padding-top: var(--header-h); }

.m-wrap { width: min(100% - 60px, 620px); margin: 0 auto; }
.ph { background: var(--ph); width: 100%; position: relative; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph picture { display: block; width: 100%; height: 100%; }
.fade { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.fade.in { opacity: 1; transform: none; }
.no-bar { scrollbar-width: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* ---------- header (mobile) ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--bg); }
/* the logo is the VV + name lockup (assets/js/logo.js, viewBox 298.5 x 49); --logo-w follows its height */
.site-header { --logo-h: 36px; --logo-w: calc(var(--logo-h) * 6.092); }
.site-header .logo { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 3; color: var(--text); line-height: 0; }
.site-header .logo .mono { height: var(--logo-h); width: var(--logo-w); }
.burger {
  position: absolute; right: 20px; top: 30px; z-index: 3;
  width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
}
.burger i, .burger::before, .burger::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--text);
  transition: transform .3s, opacity .3s, top .3s;
}
.burger::before { top: 0; }
.burger i { top: 9px; }
.burger::after { top: 18px; }
.open .burger::before { top: 9px; transform: rotate(45deg); }
.open .burger i { opacity: 0; }
.open .burger::after { top: 9px; transform: rotate(-45deg); }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 2; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 100px 20px 46px;
  transform: translateY(-100%); transition: transform .4s ease;
}
.nav a { font-size: 14px; line-height: 16px; color: var(--text); }
/* switch to the other language, top right (left of the burger on phones) */
.lang { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; gap: 10px; }
.lang a { font: 400 15px/16px var(--sans); letter-spacing: 1px; color: var(--text); padding: 4px 2px; }
.lang a:hover { color: var(--muted); }
@media (max-width: 340px) { .site-header { --logo-h: 30px; } }
.nav a:hover, .nav a[aria-current="page"] { color: var(--muted); }
.menu-overlay {
  position: fixed; inset: 0; z-index: 1; background: #000; opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.open .nav { transform: none; }
.open .menu-overlay { opacity: .5; visibility: visible; }

/* ---------- footer (mobile) ---------- */
.site-footer {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 34px 16px 30px;
  font-size: 12px; line-height: 12px; letter-spacing: 1.4px; color: #a8a8a8; text-align: center;
}

/* ---------- common (mobile) ---------- */
.page-title {
  margin: 55px 0 0; text-align: center;
  font: 400 14px/19px var(--sans); letter-spacing: 4px; text-transform: uppercase; color: var(--text);
}

/* ---------- splash + home ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .9s ease, visibility .9s;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash .mono { width: min(84vw, 520px); height: auto; color: var(--text); }
.hero { display: block; margin: 90px 12px 0; }
.hero .ph { aspect-ratio: 352 / 266; }
.hero img { object-position: 50% 45%; }

/* ---------- about ---------- */
.about-photo { aspect-ratio: 3 / 4; margin-top: 62px; }
.facts { display: grid; grid-template-columns: 30.5% 41% 1fr; margin-top: 30px; }
.fact b { display: block; font-size: 18px; line-height: 18px; font-weight: 400; }
.fact span { display: block; margin-top: 13px; padding-right: 8px; font-size: 13px; line-height: 18px; letter-spacing: .6px; }
.about-text { margin-top: 40px; }
.about-text p { margin: 0 0 17px; }

/* ---------- projects ---------- */
.masonry { display: flex; flex-direction: column; margin-top: 80px; }
.masonry .col { display: contents; }
.card { display: block; margin-bottom: 60px; }
.card .ph { aspect-ratio: 300 / 395; }
.card.mL .ph { aspect-ratio: 300 / 240; }
.card-cap { display: block; margin-top: 18px; font-size: 16px; line-height: 19px; color: var(--text); }
.card:hover .card-cap { color: var(--muted); }

/* ---------- project ---------- */
.project { position: relative; margin-top: 52px; }
.side-label {
  display: block; text-align: center;
  font: 400 12px/12px var(--sans); letter-spacing: 3px; text-transform: uppercase;
}
.slider { position: relative; margin: 35px 8px 0; }
.slides { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.slides .ph { flex: 0 0 100%; aspect-ratio: 360 / 200; scroll-snap-align: start; }
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(242, 242, 242, .8);
  display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--text);
}
.slider-btn.prev { left: 8px; }
.slider-btn.next { right: 8px; }
.slider-btn svg { width: 10px; height: 18px; }
.project-info { margin: 24px 8px 0; display: flex; flex-direction: column; }
.project-info h1 { margin: 0; font-size: 20px; line-height: 22px; font-weight: 400; }
.project-info .place { margin-top: 7px; font-size: 15px; line-height: 16px; font-weight: 300; }
.project-info .desc { margin: 20px 0 0; transition: opacity .25s ease; }
.project-info .desc p { margin: 0 0 12px; }
.project-info .desc.swap { opacity: 0; }
.pager { margin-top: 26px; display: flex; flex-direction: row-reverse; justify-content: space-between; font-size: 16px; line-height: 16px; color: var(--muted); }
.pager a { display: inline-flex; align-items: center; gap: 8px; }
.pager a:hover { color: var(--text); }
.pager svg { width: 22px; height: 10px; flex: none; }

/* full picture over the page (project photos) */
/* the magnifier cursor: drawn, larger and sharper than the system one */
:root { --zoom-in: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%224.5%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%2F%3E%3Cpath%20d%3D%22M22.8%2022.8l9.2%209.2%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%20fill%3D%22rgba%28255%2C255%2C255%2C.35%29%22%2F%3E%3Cg%20stroke%3D%22%233a3a3a%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%2F%3E%3Cpath%20d%3D%22M22.8%2022.8l9.2%209.2%22%20stroke-width%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M10%2015h10M15%2010v10%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, zoom-in; --zoom-out: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%224.5%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%2F%3E%3Cpath%20d%3D%22M22.8%2022.8l9.2%209.2%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%20fill%3D%22rgba%28255%2C255%2C255%2C.35%29%22%2F%3E%3Cg%20stroke%3D%22%233a3a3a%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%2F%3E%3Cpath%20d%3D%22M22.8%2022.8l9.2%209.2%22%20stroke-width%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M10%2015h10%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, zoom-out; }
.slides.zoomable .ph { cursor: var(--zoom-in); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(28, 28, 28, .55); }
.lightbox.open { display: grid; }
body.lb-on { overflow: hidden; }
.lb-frame { position: relative; overflow: hidden; background: #fff; box-shadow: 0 18px 60px rgba(0, 0, 0, .35); }
.lb-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lb-frame.can-zoom img { cursor: var(--zoom-in); }
.lb-frame.actual { overflow: hidden; }
.lb-frame.actual img { width: auto; height: auto; max-width: none; cursor: var(--zoom-out); }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: rgba(242, 242, 242, .85); color: var(--text); border-radius: 50%; transition: background .2s;
}
.lb-close:hover, .lb-nav:hover { background: #fff; }
.lb-close { top: 12px; right: 12px; width: 38px; height: 38px; }
.lb-close::before, .lb-close::after { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 1.5px; background: var(--text); }
.lb-close::before { transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }
.lb-nav { top: 50%; width: 42px; height: 42px; margin-top: -21px; }
.lb-nav svg { width: 10px; height: 18px; }
.lb-nav.prev { left: 12px; }
.lb-nav.next { right: 12px; }
.lb-count {
  position: absolute; z-index: 2; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px;
  background: rgba(242, 242, 242, .85); border-radius: 12px; font-size: 12px; letter-spacing: 1.5px; color: var(--text);
}
.lb-frame.actual .lb-nav, .lb-frame.actual .lb-count { opacity: 0; pointer-events: none; }
@media (hover: none) { .lb-frame.actual { overflow: auto; } } /* touch screens: drag the zoomed picture */

/* ---------- collaborations ---------- */
.rail { display: flex; flex-direction: column; margin-top: 58px; }
.collab { margin-bottom: 45px; }
.collab .ph { aspect-ratio: 300 / 254; }
.collab-title { display: inline-block; margin-top: 19px; font-size: 15px; line-height: 18px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.collab-city { margin-top: 7px; font-size: 14px; line-height: 14px; }


/* ---------- antiques (laid out like About) ---------- */
.ant-photo { margin-top: 62px; }
.ant-photo .ph { aspect-ratio: 3 / 4; }
.ant-photo .ph img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.ant-photo .ph img.on { opacity: 1; }
.gallery-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.count { font-size: 13px; letter-spacing: 1.5px; color: var(--muted); }
.g-btns { display: flex; gap: 10px; }
.g-btn {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer;
  border: 1px solid var(--text); border-radius: 50%; background: none; color: var(--text); transition: background .2s, color .2s;
}
.g-btn svg { width: 18px; height: 9px; }
.g-btn:hover { background: var(--text); color: var(--bg); }
.ant-intro { margin-top: 36px; }
.ant-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 300; }
.ant-sub { margin: 14px 0 0; font-size: 15px; line-height: 23px; }
.ant-label { margin: 44px 0 16px; font-size: 12px; line-height: 14px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; }
.ant-cols p { margin: 0 0 14px; }
.principles { display: grid; gap: 36px; }
.principle svg { width: 46px; height: 46px; color: var(--text); }
.principle h3 { margin: 16px 0 10px; font-size: 17px; line-height: 22px; font-weight: 400; }
.principle p { margin: 0; }
.ant-principles { margin-bottom: 20px; }

/* ---------- contacts ---------- */
.contacts { display: flex; flex-direction: column; margin: 68px 16px 0 11px; }
.contacts .ph { order: -1; aspect-ratio: 338 / 244; }
.contacts h2 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 300; }
#contact-form h2 { margin: 45px 0 29px; max-width: 300px; }
.field { display: block; height: 75px; }
.field span { display: block; font-size: 14px; line-height: 25px; }
.field input, .field textarea {
  display: block; width: 100%; height: 26px; border: 0; border-bottom: 1px solid var(--text); background: none;
  font: 300 16px/22px var(--sans); color: var(--text); padding: 0; outline: none; resize: none; border-radius: 0;
}
.send {
  margin-top: 26px; display: inline-flex; align-items: center;
  height: 51px; padding: 0 0 0 16px; border: 1px solid var(--text); border-radius: 30px;
  background: none; font: 300 16px/16px var(--sans); color: var(--text); cursor: pointer;
}
.send i { margin-left: 34px; width: 51px; height: 51px; margin-right: -1px; border: 1px solid var(--text); border-radius: 50%; display: grid; place-items: center; }
.send svg { width: 18px; height: 9px; }
.send:hover { background: var(--text); color: var(--bg); }
.send:hover i { border-color: var(--bg); }
.form-done { display: none; margin-top: 26px; font-size: 16px; line-height: 20px; }
form.sent .send { display: none; }
form.sent .form-done { display: block; }
.letter { margin-top: 67px; }
.letter h2 { margin-bottom: 11px; }
.letter a { font-size: 16px; line-height: 22px; }
.letter a:hover { color: var(--muted); }

/* =====================================================================
   Desktop: the reference composition on a 1200 px grid
   ===================================================================== */
@media (min-width: 980px) {
  :root { --header-h: 90px; }
  .grid { width: calc(1200 * var(--u)); margin-left: auto; margin-right: auto; }
  /* a composition wider than the grid (or shifted from it), sized by its own unit so it always fits */
  .comp {
    --u: min(1px, calc((100vw - 48px) / var(--cw)));
    width: calc(var(--cw) * var(--u));
    margin-left: max(16px, min(calc((100% - 1200px) / 2 + var(--cx) * 1px), calc(100% - 24px - var(--cw) * var(--u))));
  }

  /* header: logo and footer texts sit 120 px from the window edges, the burger in the middle opens the menu on hover */
  .site-header { border-bottom: 1px solid var(--line); }
  .site-header { --logo-h: 44px; --logo-left: 120px; }
  .site-header .logo { left: var(--logo-left); }
  /* hovering anywhere right of the logo (or the burger) shows the menu; the burger stays in the middle of the window */
  .menu-zone { position: absolute; top: 0; height: 100%; left: calc(var(--logo-left) + var(--logo-w) + 40px); right: calc(var(--logo-left) + 60px); }
  .lang { right: var(--logo-left); }
  .lang a { font-size: 16px; }
  .burger { z-index: 4; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 17px; transition: opacity .3s; }
  .burger::before { top: 2px; left: 0; right: 0; height: 2px; }
  .burger::after { top: 13px; left: 0; right: 0; height: 2px; }
  .burger i { display: none; }
  .open .burger::before, .open .burger::after { transform: none; }
  .open .burger::before { top: 2px; }
  .open .burger::after { top: 13px; }
  .nav {
    position: absolute; inset: 0; z-index: 1; padding: 0; background: none; transform: none;
    flex-direction: row; justify-content: center; align-items: center; gap: 56px;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  }
  .nav a { font-size: 16px; line-height: 16px; }
  .site-header:has(.burger:hover, .menu-zone:hover) .burger, .open .burger { opacity: 0; pointer-events: none; }
  .site-header:has(.burger:hover, .menu-zone:hover) .nav, .open .nav { opacity: 1; visibility: visible; }
  .nav { gap: 44px; }
  .menu-overlay { display: none; }

  .site-footer {
    border-top: 1px solid var(--line); height: 90px; padding: 0 119px 0 122px;
    flex-direction: row; justify-content: space-between; align-items: center; text-align: left;
  }
  .page-title { margin-top: 60px; }

  /* home */
  .hero { width: calc(960 * var(--u)); margin: 62px auto 78px; }
  .hero .ph { aspect-ratio: 960 / 660; }
  .hero img { object-position: 50% 50%; }

  /* about: photo 490x550 at the grid's left, years in a row, text in two columns under them */
  .about { --cw: 1275; --cx: 6; display: grid; grid-template-columns: calc(490 * var(--u)) 1fr; grid-template-rows: auto 1fr; column-gap: calc(68 * var(--u)); margin-top: 60px; margin-bottom: 42px; }
  .about-photo { margin: 0; aspect-ratio: 490 / 550; grid-row: 1 / 3; align-self: start; }
  .facts { grid-template-columns: calc(199 * var(--u)) calc(201 * var(--u)) 1fr; margin: 0; align-self: start; }
  .fact span { line-height: 12px; padding: 0; }
  .about-text { display: grid; grid-template-columns: calc(360 * var(--u)) minmax(0, calc(340 * var(--u))); column-gap: calc(17 * var(--u)); margin: 48px 0 0; align-self: start; }
  .about-text p { line-height: 19px; }

  /* projects: three staggered columns that scale with the window (as in the reference) */
  .masonry {
    display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.7vw;
    width: auto; padding: 0 7vw 0 6.6vw; margin: calc(77px + 2.14vw) 0 12.5vw;
  }
  .masonry .col { display: flex; flex-direction: column; gap: calc(6.1vw - 12px); }
  .masonry .col:nth-child(2) { padding-top: 5.37vw; }
  .card { margin: 0; }
  .card .ph, .card.mL .ph { aspect-ratio: 516 / 689; }
  .card.dL .ph { aspect-ratio: 516 / 349; }
  .card-cap { margin-top: 1.1vw; font-size: 12px; line-height: 14px; letter-spacing: .2px; }

  /* project: vertical label | photos (two per view, up to the reference's 1031 x 620) | title and pager.
     At 1920 the columns are the reference's 17 + 164 + 1031 + 57 + 240; on narrower windows the gaps and the
     info column shrink first, so the photos stay as large as possible (the reference pushes its title off screen) */
  .project {
    --gap-l: clamp(64px, (100vw - 1280px) * 0.156 + 64px, 164px);
    --gap-r: clamp(40px, (100vw - 1280px) * 0.027 + 40px, 57px);
    --info: clamp(165px, (100vw - 1280px) * 0.117 + 165px, 240px);
    display: grid; grid-template-columns: 17px var(--gap-l) minmax(0, 1031px) var(--gap-r) var(--info);
    width: min(100% - 24px, 1509px); margin: 46px auto 89px; align-items: start;
  }
  .project > .side-label { grid-column: 1; align-self: center; transform: rotate(180deg); writing-mode: vertical-rl; font-size: 14px; line-height: 17px; }
  .slider { grid-column: 3; margin: 0; aspect-ratio: 1031 / 620; }
  .slides { height: 100%; gap: 18px; overflow: hidden; scroll-snap-type: none; }
  .slides .ph { flex: 0 0 calc((100% - 18px) * 0.545); aspect-ratio: auto; height: 100%; }
  .slides .ph:nth-child(even) { flex-basis: calc((100% - 18px) * 0.455); }
  .slider-btn { width: 30px; height: 30px; background: none; border-radius: 0; }
  .slider-btn.prev { left: calc(var(--gap-l) / -2 - 15px); }
  .slider-btn.next { right: calc(var(--gap-r) / -2 - 15px); }
  .project-info { grid-column: 5; margin: 0; align-self: stretch; justify-content: flex-start; }
  .project-info h1 { font-size: 20px; line-height: 24px; }
  .project-info .place { font-size: 16px; line-height: 16px; }
  .project-info .desc { flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 24px 0 20px; }
  .project-info .desc.scroll { overflow-y: auto; padding-right: 6px; }
  .pager { margin-top: auto; padding-bottom: 37px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; white-space: nowrap; }
  .pager .prev-p { margin-left: -12px; }

  /* collaborations: 660x480 cards starting at the grid's left edge and running off the right edge */
  .rail {
    width: auto; flex-direction: row; gap: calc(40 * var(--u)); margin: 86px 0 53px;
    padding-left: max(16px, calc((100% - 1200px) / 2)); overflow-x: auto; cursor: grab;
  }
  .collab { flex: 0 0 calc(660 * var(--u)); margin: 0; }
  .collab .ph { aspect-ratio: 660 / 480; }

  /* antiques: photo with arrows on the left, intro and philosophy beside it, three principles in a row below */
  .antiques { margin-bottom: 0; }
  .ant-photo { margin: 0; grid-row: 1 / 3; }
  .ant-photo .ph { aspect-ratio: 490 / 550; }
  .ant-intro { margin: 0; max-width: 560px; }
  .ant-title { font-size: 30px; line-height: 38px; }
  .ant-sub { font-size: 16px; line-height: 25px; }
  .ant-text .ant-label { margin-top: 48px; }
  .ant-cols { display: grid; grid-template-columns: calc(360 * var(--u)) minmax(0, calc(340 * var(--u))); column-gap: calc(17 * var(--u)); }
  .ant-cols p { line-height: 19px; }
  .ant-principles { --cw: 1275; --cx: 6; margin-top: 70px; margin-bottom: 70px; padding-top: 44px; border-top: 1px solid #d0d0d0; }
  .ant-principles > .ant-label { margin-top: 0; margin-bottom: 30px; }
  .principles { grid-template-columns: repeat(3, 1fr); column-gap: calc(60 * var(--u)); }

  /* contacts: form on the left, photo 600x506 on the right */
  .contacts { display: grid; grid-template-columns: calc(557 * var(--u)) calc(600 * var(--u)); column-gap: 0; padding-left: calc(14 * var(--u)); margin-top: 150px; margin-bottom: 97px; }
  .contacts .ph { order: 0; grid-column: 2; grid-row: 1; aspect-ratio: 600 / 506; margin-top: 7px; }
  .contacts h2 { font-size: 26px; line-height: 33px; }
  #contact-form h2 { margin: 0 0 37px; max-width: 360px; }
  .field { width: calc(498 * var(--u)); height: 67px; }
  .field span { line-height: 22px; }
  .send { margin: 33px 0 0 -2px; height: 45px; padding-left: 12px; }
  .send i { margin-left: 30px; width: 45px; height: 45px; }
  .letter { margin: 80px 0 0 -2px; }
  .letter h2 { margin-bottom: 13px; line-height: 24px; }
  .letter a { font-size: 18px; line-height: 22px; }
}

/* 980-1199: the same composition, logo and footer closer to the edges */
@media (min-width: 980px) and (max-width: 1199px) {
  .site-header { --logo-h: 40px; --logo-left: 43px; }
  .site-footer { padding: 0 43px; }
  .nav { gap: 26px; }
  .nav a { font-size: 15px; }
}

/* tablets: the phone layout, a little roomier */
@media (min-width: 640px) and (max-width: 979px) {
  .hero { margin-left: 30px; margin-right: 30px; }
  .slider, .project-info { margin-left: 30px; margin-right: 30px; }
  .contacts { width: min(100% - 60px, 620px); margin-left: auto; margin-right: auto; }
}