/* Contacts: preserve the editorial design and prevent portrait layout shifts. */
/* Match the actual 1px-bordered header from the first paint, without waiting
   for hero.js to measure it and update --hero-header-height. */
body[data-page="contacts"] { --hero-header-height: 85px; }
@media (max-width: 1199px) {
  body[data-page="contacts"] { --hero-header-height: 75px; }
}
body[data-page="contacts"] .page-heading.compact-heading {
  box-sizing: border-box;
  width: min(100%, var(--max));
  padding-top: calc(var(--hero-header-height, 84px) + 35px);
  padding-bottom: 25px;
  text-align: center;
}
body[data-page="contacts"] .page-heading.compact-heading h1 {
  max-width: none;
  margin: 9px 0 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.05vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.045em;
  white-space: normal;
  text-align: center;
}
body[data-page="contacts"] .page-heading.compact-heading > p:last-child {
  max-width: 670px;
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  color: #bdc0ba;
}
/* Opening fills the screen on spacious viewports and grows naturally on
   short/narrow devices. CSS-only: no late image resizing or layout jumps. */
body[data-page="contacts"] .contacts-opening {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body[data-page="contacts"] .contacts-section {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: clamp(30px, 3.5vw, 54px);
}
body[data-page="contacts"] .contacts-grid {
  grid-template-areas:
    "portrait links"
    "person story";
  column-gap: clamp(32px, 4.5vw, 70px);
  row-gap: clamp(15px, 1.7vw, 24px);
  align-items: start;
  min-height: 0;
}
body[data-page="contacts"] .contacts-portrait { grid-area: portrait; }
body[data-page="contacts"] .contacts-list {
  grid-area: links;
  align-self: center;
}
body[data-page="contacts"] .contacts-atelier-person { grid-area: person; }
body[data-page="contacts"] .contacts-story { grid-area: story; }
body[data-page="contacts"] .contacts-grid > * {
  min-width: 0;
}
body[data-page="contacts"] .contacts-portrait {
  margin: 0;
  max-width: 100%;
}
@media (min-width: 980px) {
  body[data-page="contacts"] .contacts-portrait {
    width: min(100%, max(410px, calc((100svh - 390px) * 4 / 3)));
  }
}
body[data-page="contacts"] .contacts-portrait > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page="contacts"] .contacts-atelier-person {
  margin: 0;
}
body[data-page="contacts"] .contacts-atelier-person-name {
  margin: 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -.035em;
}
body[data-page="contacts"] .contacts-atelier-person-role {
  margin: 7px 0 0;
  color: var(--gold);
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.65;
  letter-spacing: .035em;
}
body[data-page="contacts"] .contacts-story {
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-page="contacts"] .contacts-story p {
  margin: 0;
  color: #c1c7c0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
}

/* Quiet, balanced second row: atelier on the left, working format on the right. */
body[data-page="contacts"] .contacts-atelier {
  border-top: 1px solid var(--line);
  background: #10191b;
  padding: clamp(39px, 5vw, 72px) 0 clamp(46px, 5.4vw, 86px);
}
body[data-page="contacts"] .contacts-atelier-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 86px);
  align-items: start;
}
body[data-page="contacts"] .contacts-atelier-copy,
body[data-page="contacts"] .contacts-format { min-width: 0; }
body[data-page="contacts"] .contacts-atelier-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  color: var(--ivory);
  font-size: clamp(24px, 2.35vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.035em;
}
body[data-page="contacts"] .contacts-atelier-copy > p {
  max-width: 570px;
  margin: 0;
  color: #c1c7c0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.95;
}
body[data-page="contacts"] .contacts-atelier-copy > p + p {
  margin-top: 13px;
}
body[data-page="contacts"] .contacts-format {
  margin: 0;
  border: 0;
}
body[data-page="contacts"] .contacts-format h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.35vw, 32px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ivory);
}
body[data-page="contacts"] .contacts-format dl { margin: 0; }
body[data-page="contacts"] .contacts-format-row {
  display: grid;
  grid-template-columns: minmax(95px, 27%) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
body[data-page="contacts"] .contacts-format dt {
  color: var(--gold);
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .09em;
}
body[data-page="contacts"] .contacts-format dd {
  margin: 0;
  color: #d9d9d2;
  font-size: 12px;
  line-height: 1.8;
}

/* On compact desktop/tablet landscape widths, keep the five contact rows
   shorter than the portrait so the entire list can be centred against it. */
@media (min-width: 980px) and (max-width: 1199px) {
  body[data-page="contacts"] .contact-method {
    min-height: 60px;
    padding-block: 8px;
  }
}

@media (min-width: 980px) {
  body[data-page="contacts"] .contacts-grid,
  body[data-page="contacts"] .contacts-grid.is-viewport-fit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
    align-items: start;
  }
  body[data-page="contacts"] .page-heading.compact-heading {
    padding-bottom: 8px !important;
  }
}
@media (max-width: 979px) {
  body[data-page="contacts"] .page-heading.compact-heading {
    padding: calc(var(--hero-header-height, 74px) + 29px) max(26px, 5vw) 23px;
    max-width: 910px;
  }
  body[data-page="contacts"] .page-heading.compact-heading h1 {
    font-size: clamp(30px, 3.6vw, 42px);
  }
  body[data-page="contacts"] .contacts-grid,
  body[data-page="contacts"] .contacts-grid.is-viewport-fit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "portrait"
      "person"
      "links"
      "story";
    row-gap: 0;
    align-items: start;
  }
  body[data-page="contacts"] .contacts-portrait { justify-self: start; }
  body[data-page="contacts"] .contacts-atelier-person { margin-top: 17px; }
  body[data-page="contacts"] .contacts-list {
    width: 100%;
    margin-top: 29px;
  }
  body[data-page="contacts"] .contacts-story { margin-top: 26px; }
  body[data-page="contacts"] .contacts-atelier-inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 740px;
    row-gap: clamp(32px, 5vw, 52px);
  }
}
@media (max-width: 699px) {
  body[data-page="contacts"] .page-heading.compact-heading {
    padding: calc(var(--hero-header-height, 74px) + 24px) max(20px, 5.5vw) 21px;
  }
  body[data-page="contacts"] .page-heading.compact-heading h1 {
    font-size: clamp(26px, 6.3vw, 35px);
    line-height: 1.24;
    overflow-wrap: normal;
  }
  body[data-page="contacts"] .contacts-section { padding-bottom: 35px; }
  body[data-page="contacts"] .contacts-atelier {
    padding: 39px 0 58px;
  }
  body[data-page="contacts"] .contacts-atelier-person-name {
    font-size: clamp(27px, 7vw, 34px);
  }
  body[data-page="contacts"] .contacts-story p,
  body[data-page="contacts"] .contacts-atelier-copy > p {
    font-size: 13px;
    line-height: 1.85;
  }
  body[data-page="contacts"] .contacts-format-row {
    grid-template-columns: minmax(85px, 27%) minmax(0, 1fr);
    gap: 12px;
  }
}

/* Match the 3px Vespella header wordmark/tagline spacing across pages.
   Scoped to the header: footer logos and other elements stay unchanged. */
header.site-header .simple-nav-wrap > a.logo > span {
  margin-top: 3px;
}