/* ==========================================================================
   Lena Barber Photography - homepage
   Brand: Deep Espresso / Porcelain / Blush / Muted Rose / Vintage Taupe
   Type:  Bodoni Moda (headings), Italianno (script accents), Quicksand (body)
   The layout is scaled from the 1920px design: --vw is 1vw, capped at 1920px.
   ========================================================================== */

/* Fonts are self-hosted (no requests to Google at page load) */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Italianno";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/italianno-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/quicksand-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Quicksand";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/quicksand-latin-400-normal.woff2") format("woff2");
}

:root {
  --espresso: #3a261d;
  --porcelain: #f7f5f3;
  --blush: #e8d8d0;
  --rose: #c9afa5;
  --taupe: #a58b7d;
  --body-text: #3f2b22; /* near-espresso, comfortably AA on porcelain and blush */

  --font-heading: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-script: "Italianno", "Snell Roundhand", cursive;
  --font-body: "Quicksand", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --vw: min(1vw, 19.2px);
  --header-h: calc(var(--vw) * 9.6);
  --page-max: 1920px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--espresso);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 { margin: 0; font-weight: 400; }

.script {
  font-family: var(--font-script);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--espresso);
  color: var(--porcelain);
  font-size: .9rem;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--espresso);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Intro: logo fades in on espresso, then the screen lifts to reveal the page.
   Only active when <html class="intro-active"> is set (see the script in <head>).
   -------------------------------------------------------------------------- */
.intro { display: none; }

html.intro-active,
html.intro-active body { overflow: hidden; }

html.intro-active .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--espresso);
  cursor: pointer;
  animation: intro-lift .85s cubic-bezier(.77, 0, .18, 1) 1.9s forwards;
}
.intro__logo {
  width: min(230px, 52vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  animation: intro-logo 1s ease .25s forwards;
}

@keyframes intro-logo { to { opacity: 1; transform: none; } }
@keyframes intro-lift { to { transform: translateY(-100%); visibility: hidden; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 3;
  max-width: var(--page-max);
  height: var(--header-h);
  margin-inline: auto;
  border-bottom: 1px solid var(--espresso);
}

/* The header rule continues across the espresso panel in porcelain, as in the design */
.site-header::after {
  content: "";
  position: absolute;
  left: 60.6%;
  width: 28.4%;
  bottom: -1px;
  height: 1px;
  background: var(--porcelain);
}

.nav-toggle { display: none; }

.site-nav a {
  font-size: max(13px, calc(var(--vw) * 1.4));
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 400;
  transition: opacity .2s ease;
}
.site-nav a:hover { opacity: .65; }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}

.site-nav__group {
  position: absolute;
  top: 0;
  height: 100%;
  padding-top: calc(var(--vw) * 1);
  display: flex;
  align-items: center;
  gap: calc(var(--vw) * 3.4);
}
.site-nav__group--left  { left: 10.2%; }
.site-nav__group--right {
  left: 64.2%;
  color: var(--porcelain);
  gap: calc(var(--vw) * 6);
}
.site-nav__book {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Inner pages have no espresso panel behind the right-hand links */
.site-header--plain::after { display: none; }
/* Same espresso tab behind Contact / Book now as the homepage, so the menu never changes */
.site-header--plain::before {
  content: "";
  position: absolute;
  left: 60.6%;
  width: 28.4%;
  top: calc(var(--header-h) - var(--vw) * 7.7);
  bottom: -1px;
  background: var(--espresso);
}

.site-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: calc(var(--vw) * 8.7);
  min-width: 108px;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   Page container
   -------------------------------------------------------------------------- */
main {
  max-width: var(--page-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--vw) * 58.4);
  padding-block: calc(var(--vw) * 4.6);
}

/* Espresso column: starts just inside the header, runs to the bottom of the hero */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 60.6%;
  width: 28.4%;
  top: calc(var(--vw) * -7.7);
  bottom: 0;
  background: var(--espresso);
}

.hero__copy {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--vw) * 3);
  margin-left: 10.2%;
  width: 38%;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 2.98);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--espresso);
}
.hero__title .script { font-size: 1.28em; line-height: 1; padding-inline: .06em; }

.hero__copy p {
  margin-top: calc(var(--vw) * 1.3);
  max-width: calc(var(--vw) * 36);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.25;
  color: var(--body-text);
  hyphens: manual;
}
.hero__copy p + p { margin-top: calc(var(--vw) * 1.85); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--vw) * 1.25);
  margin-top: calc(var(--vw) * 2.7);
  padding: calc(var(--vw) * 1.1) calc(var(--vw) * 2.3);
  min-height: 44px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--espresso);
  font-family: var(--font-heading);
  font-size: max(13px, calc(var(--vw) * 1.05));
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--espresso); color: var(--porcelain); }
.btn__arrow { width: calc(var(--vw) * 2.3); min-width: 22px; height: auto; }

.hero__collage {
  position: absolute;
  z-index: 2;
  left: 49.27%;
  top: calc(var(--vw) * 7.24);
  width: calc(var(--vw) * 42.7);
  height: calc(var(--vw) * 46.35);
}
.hero__collage-img { position: absolute; display: block; object-fit: cover; }
.hero__collage-img--main   { left: 0;     top: 0;     width: 64.4%; height: 91.6%; }
.hero__collage-img--lift   { left: 70.1%; top: 15.2%; width: 29.9%; height: 34.5%; }
.hero__collage-img--couple { left: 55.2%; top: 58.8%; width: 29.8%; height: 41.2%; }

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */
.banner {
  position: relative;
  aspect-ratio: 2400 / 1004;
  overflow: hidden;
  background: #777;
}
.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, .28) 70%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
}
.banner__copy {
  position: absolute;
  z-index: 2;
  left: 60.6%;
  top: 48.5%;
  color: var(--porcelain);
}
.banner__title {
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 2.85);
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.banner__title .script { font-size: 1.28em; line-height: 1; }

.link-light,
.link-dark {
  display: inline-block;
  font-size: max(13px, calc(var(--vw) * 1.35));
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 400;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}
.link-light:hover,
.link-dark:hover { opacity: .65; }
.link-light { margin-top: calc(var(--vw) * 1.2); font-size: max(14px, calc(var(--vw) * 1.6)); font-weight: 400; letter-spacing: .02em; }
.link-light:focus-visible { outline-color: var(--porcelain); }

/* --------------------------------------------------------------------------
   Homepage carousel
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: calc(var(--vw) * 6) 6.04% calc(var(--vw) * 5);
}
.carousel__track {
  position: relative;
  display: flex;
  gap: calc(var(--vw) * 5.4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item {
  flex: 0 0 calc((100% - var(--vw) * 10.8) / 3);
  scroll-snap-align: start;
}
.carousel__track:focus-visible { outline-offset: 6px; }
.carousel .card__media { aspect-ratio: 491 / 585; }
.carousel .card p { color: var(--espresso); font-weight: 400; }
.carousel__btn {
  position: absolute;
  top: calc(var(--vw) * 21.2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(var(--vw) * 3);
  min-width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--espresso);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}
.carousel__btn[hidden] { display: none; }
.carousel__btn svg { width: calc(var(--vw) * 1.6); min-width: 24px; height: auto; }
.carousel__btn--prev { left: 1.2%; }
.carousel__btn--prev svg { transform: scaleX(-1); }
.carousel__btn--next { right: 1.2%; }
.carousel__btn:hover:not(:disabled) { opacity: .6; }
.carousel__btn:disabled { opacity: .25; cursor: default; }

/* --------------------------------------------------------------------------
   Gallery cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 29.09%);
  justify-content: space-between;
  padding: calc(var(--vw) * 6) 6% calc(var(--vw) * 9);
}

.card { text-align: center; }

.card__media {
  display: block;
  aspect-ratio: 201 / 239;
  background: var(--espresso);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.card__media:hover img { transform: scale(1.03); }

.card__title {
  margin-top: calc(var(--vw) * 3.5);
  font-size: calc(var(--vw) * 3.6);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--espresso);
}
.card p {
  max-width: calc(var(--vw) * 24.8);
  margin: calc(var(--vw) * 1.5) auto 0;
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.27;
  color: var(--body-text);
}
.card .link-dark { margin-top: calc(var(--vw) * 2.6); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: max(12px, calc(var(--vw) * 1.05));
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--body-text);
}

.about {
  display: grid;
  grid-template-columns: 31.9% 1fr;
  column-gap: 8%;
  align-items: center;
  padding: calc(var(--vw) * 8) 10.2%;
  background: var(--blush);
}
.about__photo {
  aspect-ratio: 4 / 5;
  background: var(--rose);
  overflow: hidden;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.about__title,
.testimonials__title {
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 3);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--espresso);
}
.about__title .script,
.testimonials__title .script { font-size: 1.28em; line-height: 1; padding-inline: .05em; }
.about__title { margin-top: calc(var(--vw) * 1); }

.about__copy p:not(.eyebrow) {
  max-width: 34em;
  margin-top: calc(var(--vw) * 1.6);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.5;
  color: var(--body-text);
}
.about__copy .link-dark { margin-top: calc(var(--vw) * 2.6); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
  padding: calc(var(--vw) * 8) 6% calc(var(--vw) * 5.5);
  text-align: center;
}
.testimonials__title { margin-top: calc(var(--vw) * 1); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8%;
  max-width: calc(var(--vw) * 68);
  margin: calc(var(--vw) * 4.5) auto 0;
  align-items: stretch;
}
.quote { margin: 0; display: flex; flex-direction: column; }
.quote figcaption { margin-top: auto; padding-top: calc(var(--vw) * 2); }
.quote__mark {
  display: block;
  height: calc(var(--vw) * 3.2);
  font-size: calc(var(--vw) * 7);
  line-height: 1;
  color: var(--rose);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  max-width: 24em;
  margin-inline: auto;
  font-size: max(16px, calc(var(--vw) * 1.5));
  line-height: 1.55;
  color: var(--espresso);
}
.quote figcaption {
  font-size: max(12px, calc(var(--vw) * 1.05));
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--espresso);
}
.quote figcaption span {
  display: block;
  margin-top: .5em;
  letter-spacing: .03em;
  text-transform: none;
  font-weight: 300;
  color: var(--body-text);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 34% 1fr;
  column-gap: 9%;
  align-items: start;
  padding: calc(var(--vw) * 8) 12% calc(var(--vw) * 10);
}
.contact--thanks { grid-template-columns: 1fr; min-height: 55vh; align-content: center; text-align: center; }
.contact__title {
  margin-top: calc(var(--vw) * 1);
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 3);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--espresso);
}
.contact__title .script { font-size: 1.28em; line-height: 1; padding-inline: .05em; }
.contact__intro p:not(.eyebrow) {
  margin-top: calc(var(--vw) * 1.6);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.4;
  color: var(--body-text);
}
.contact__intro .contact__direct { font-size: max(14px, calc(var(--vw) * 1.3)); }
.contact__direct a { color: var(--espresso); text-decoration: underline; text-underline-offset: .2em; }
.contact--thanks .link-dark { margin-top: calc(var(--vw) * 3); }

.form { display: grid; row-gap: calc(var(--vw) * 2.2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--vw) * 2.5); row-gap: calc(var(--vw) * 2.2); }
.field label {
  display: block;
  margin-bottom: .35rem;
  font-size: max(12px, calc(var(--vw) * .95));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--espresso);
}
.field label small { font-size: .9em; letter-spacing: .06em; text-transform: none; color: var(--taupe); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--taupe);
  border-radius: 0;
  background: transparent;
  color: var(--espresso);
  font: inherit;
  font-size: max(16px, calc(var(--vw) * 1.3));
  font-weight: 300;
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.45; }
.field select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233a261d'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .2rem center; padding-right: 1.6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-bottom-color: var(--espresso); box-shadow: 0 1px 0 var(--espresso); }
.field [aria-invalid="true"] { border-bottom-color: #a23b2a; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { min-height: 1.4em; font-size: max(14px, calc(var(--vw) * 1.2)); color: var(--body-text); }
.form__status.is-error { color: #a23b2a; }
.form__status a { color: inherit; }
.form .btn { justify-self: start; margin-top: 0; cursor: pointer; border: 0; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form-success { padding-block: calc(var(--vw) * 3); }

/* --------------------------------------------------------------------------
   Inner page heading, gallery and packages
   -------------------------------------------------------------------------- */
.page-head {
  padding: calc(var(--vw) * 7) 6% calc(var(--vw) * 3);
  text-align: center;
}
.page-head__title {
  margin-top: calc(var(--vw) * 1);
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 3.6);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--espresso);
}
.page-head__title .script { font-size: 1.28em; line-height: 1; padding-inline: .05em; }
.page-head p:not(.eyebrow) {
  max-width: calc(var(--vw) * 44);
  margin: calc(var(--vw) * 1.6) auto 0;
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.4;
  color: var(--body-text);
}
.cards--page { row-gap: calc(var(--vw) * 6); padding-top: calc(var(--vw) * 3); padding-bottom: calc(var(--vw) * 6); }
.cards--page .card:last-child:nth-child(3n + 1) { grid-column: 2; }

/* Placeholders until Lena's photos are added */
.card__media--placeholder,
.gallery-item.gallery-item--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blush);
  color: var(--body-text);
  text-decoration: none;
  font-size: max(12px, calc(var(--vw) * 1.05));
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
}
.gallery-item.gallery-item--placeholder { aspect-ratio: 4 / 5; }

.gallery-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem calc(var(--vw) * 3);
  margin-top: calc(var(--vw) * 2.4);
}
.gallery-nav a {
  padding: .5rem 0;
  font-size: max(13px, calc(var(--vw) * 1.1));
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--taupe);
}
.gallery-nav a:hover { color: var(--espresso); }
.gallery-nav a[aria-current="page"] { color: var(--espresso); border-bottom: 1px solid var(--espresso); }

.gallery { padding: calc(var(--vw) * 2) 6% calc(var(--vw) * 5); }
.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: calc(var(--vw) * 1.6);
}
/* A small set of photos sits centred; once there are more than three it flows into columns */
.gallery__grid--few { display: flex; justify-content: center; gap: calc(var(--vw) * 1.6); }
.gallery__grid--few li { flex: 0 1 calc(var(--vw) * 30); margin-bottom: 0; }
.gallery--main { padding-left: 1.6%; padding-right: 1.6%; }
.gallery__grid--main { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--vw) * 1.6); }
.gallery__grid li { break-inside: avoid; margin-bottom: calc(var(--vw) * 1.6); }
.gallery-item { display: block; overflow: hidden; background: var(--blush); }
.gallery-item img { display: block; width: 100%; height: auto; transition: transform .8s ease; }
a.gallery-item { cursor: zoom-in; }
a.gallery-item:hover img { transform: scale(1.03); }
.gallery-item--empty { width: 100%; }

/* Feature gallery: colour photos in the outer columns, black and white set in the middle */
.page-head--rule { padding-bottom: 0; }
.page-head--rule::after {
  content: "";
  display: block;
  width: calc(var(--vw) * 13);
  height: 1px;
  margin: calc(var(--vw) * 2.6) auto 0;
  background: var(--espresso);
}
.gallery--feature { padding-left: 1.5%; padding-right: 1.5%; }
.gallery__grid--feature {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  columns: auto;
  gap: calc(var(--vw) * 1.5);
  align-items: start;
}
.gallery__grid--feature li { margin-bottom: 0; }
.gallery__grid--feature li.is-bw { align-self: center; width: 80%; justify-self: center; }
.gallery__grid--feature li.gallery__divider {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(var(--vw) * 14);
  height: 1px;
  margin: calc(var(--vw) * 3.4) 0;
  background: var(--espresso);
}


.lightbox {
  width: 100vw; max-width: none; height: 100vh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(30, 20, 15, .94);
}
.lightbox::backdrop { background: rgba(30, 20, 15, .94); }
.lightbox__stage { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 100%; padding: 4rem 4.5rem; }
.lightbox__img {
  width: auto; height: auto;
  max-width: calc(100vw - 9rem);
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
}
.lightbox button {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--porcelain);
  font-size: 1.9rem; line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(247, 245, 243, .14); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: .8rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: .8rem; top: 50%; transform: translateY(-50%); }
.lightbox[data-single] .lightbox__prev,
.lightbox[data-single] .lightbox__next { display: none; }

.options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--vw) * 2);
  padding: calc(var(--vw) * 3) 6% calc(var(--vw) * 5);
}
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--vw) * 4.2) calc(var(--vw) * 2.5) calc(var(--vw) * 3.6);
  background: var(--blush);
  color: var(--espresso);
  text-align: center;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.option:last-child:nth-child(3n + 1) { grid-column: 2; }
.option__price {
  font-size: max(12px, calc(var(--vw) * 1.05));
  letter-spacing: .24em;
  text-transform: uppercase;
}
.option__title {
  margin-top: calc(var(--vw) * 1.6);
  font-size: calc(var(--vw) * 3.6);
  line-height: 1.1;
  text-wrap: balance;
}
.option__text {
  max-width: calc(var(--vw) * 24.8);
  margin-top: calc(var(--vw) * 1.5);
  margin-bottom: calc(var(--vw) * 3);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.27;
}
.option__cta {
  margin-top: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: max(13px, calc(var(--vw) * 1.35));
  letter-spacing: .1em;
  text-transform: uppercase;
}
.option:hover { background: var(--rose); }
.option.is-selected,
.option.is-selected:hover { background: var(--espresso); color: var(--porcelain); }

.package-panels { padding-inline: 12%; }
.package-panel {
  max-width: calc(var(--vw) * 52);
  margin: 0 auto;
  padding-block: calc(var(--vw) * 5);
  border-top: 1px solid var(--rose);
  text-align: center;
}
.package-panels.is-enhanced .package-panel[hidden] { display: none; }
.package-panels.is-enhanced { padding-bottom: 0; }
.package-panel__price {
  font-size: max(12px, calc(var(--vw) * 1.05));
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--body-text);
}
.package-panel__title { margin-top: calc(var(--vw) * 1); font-size: calc(var(--vw) * 4.6); line-height: 1.1; color: var(--espresso); }
.package-panel__intro {
  margin-top: calc(var(--vw) * 1.6);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.4;
  color: var(--body-text);
}
.package-panel ul { list-style: none; margin: calc(var(--vw) * 2) 0 0; padding: 0; }
.package-panel li {
  padding: .45rem 0;
  font-size: max(15px, calc(var(--vw) * 1.4));
  line-height: 1.35;
  color: var(--body-text);
}
.package-panel .btn { margin-top: calc(var(--vw) * 3); }

.package-panel--page {
  border-top: 0;
  padding: calc(var(--vw) * 6) 6% calc(var(--vw) * 9);
}
.package-panel--page .package-panel__price { margin-top: calc(var(--vw) * 1.6); }
.package-panel__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem calc(var(--vw) * 3);
  margin-top: calc(var(--vw) * 3.2);
}
.options + .cta { padding-top: calc(var(--vw) * 1.5); }

/* --------------------------------------------------------------------------
   Collection pages (Wedding, Couple & Engagement, Family)
   -------------------------------------------------------------------------- */
.collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 9%;
  align-items: center;
  padding: calc(var(--vw) * 6) 12% calc(var(--vw) * 8);
}
.collection__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blush); }
.collection__photo img { width: 100%; height: 100%; object-fit: cover; }
.collection__title {
  margin-top: calc(var(--vw) * 1);
  font-size: calc(var(--vw) * 5.6);
  line-height: 1.1;
  color: var(--espresso);
}
.collection__copy p:not(.eyebrow) {
  max-width: calc(var(--vw) * 34);
  margin-top: calc(var(--vw) * 1.8);
  font-size: max(15px, calc(var(--vw) * 1.52));
  line-height: 1.4;
  color: var(--body-text);
}
.collection__actions { display: grid; justify-items: start; gap: calc(var(--vw) * 1.2); margin-top: calc(var(--vw) * 3.4); }
.collection__actions .btn { width: calc(var(--vw) * 19); max-width: 100%; white-space: nowrap; margin-top: 0; justify-content: space-between; }

/* Line breaks taken from the design; they only apply on wide screens */
@media (max-width: 1100px) { .br-d { display: none; } }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.site-header--flush { border-bottom: 0; }
.about-hero { position: relative; }
.about-hero__img { display: block; width: 100%; aspect-ratio: 1920 / 949; object-fit: cover; }
.about-hero__text {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 3);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--espresso);
}
.about-hero__text--left  { left: 20.4%; translate: -50% 0; }
.about-hero__text--right { left: 75.8%; translate: -50% 0; }
.about-hero__text .script { font-size: 1.28em; line-height: 0; text-transform: none; padding-inline: .05em; }

.about-grid {
  display: grid;
  grid-template-columns: 47.08% 52.92%;
  max-width: var(--page-max);
  margin-inline: auto;
}
.about-heading {
  font-family: var(--font-heading);
  font-size: calc(var(--vw) * 2.9);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.about-heading .script { font-size: 1.28em; line-height: 0; text-transform: none; padding-inline: .05em; }
.about-story p,
.about-approach p,
.about-travel p {
  font-size: calc(var(--vw) * 1.4);
  line-height: 1.3;
  font-weight: 300;
}

.about-story {
  grid-column: 1; grid-row: 1;
  padding: calc(var(--vw) * 6.6) 0 calc(var(--vw) * 3.8) calc(var(--vw) * 9.95);
  border-bottom: 1px solid var(--espresso);
  color: var(--body-text);
}
.about-story .about-heading { color: var(--espresso); }
.about-story p { max-width: 27.4em; margin-top: 1.4em; }
.about-story .about-heading + p { margin-top: calc(var(--vw) * 2.4); }

.about-collage {
  grid-column: 2; grid-row: 1;
  position: relative;
  align-self: start;
  width: calc(var(--vw) * 43.2);
  aspect-ratio: 829 / 1014;
  margin: calc(var(--vw) * 6.8) 0 calc(var(--vw) * -7.8) calc(var(--vw) * 5.05);
  z-index: 2;
}
.about-collage__img { position: absolute; display: block; object-fit: cover; }
.about-collage__img--a { left: 26.3%; top: 0;      width: 58.7%; height: 57.2%; }
.about-collage__img--b { left: 0;     top: 32.8%;  width: 40.5%; height: 45.7%; }
.about-collage__img--c { left: 69.2%; top: 65.9%;  width: 30.8%; height: 34.1%; }

.about-photo {
  grid-column: 1; grid-row: 2;
  position: relative;
  margin-top: calc(var(--vw) * 3.8);
  min-height: calc(var(--vw) * 68.8);
}
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.about-side { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; }
.about-approach {
  padding: calc(var(--vw) * 6.7) 6% calc(var(--vw) * 5.6) calc(var(--vw) * 5.05);
  color: var(--body-text);
}
.about-approach .about-heading { color: var(--espresso); }
.about-approach p { max-width: 27.4em; margin-top: calc(var(--vw) * 1.8); }
.about-approach .about-heading + p { margin-top: calc(var(--vw) * 2.6); }
.about-travel {
  flex: 1;
  padding: calc(var(--vw) * 4.3) 6% calc(var(--vw) * 4.8) calc(var(--vw) * 5.05);
  background: var(--espresso);
  color: var(--porcelain);
}
.about-travel .about-heading {
  position: relative;
  padding-bottom: calc(var(--vw) * 4.6);
}
.about-travel .about-heading::after {
  content: "";
  position: absolute;
  left: calc(var(--vw) * -5.05);
  bottom: 0;
  width: calc(var(--vw) * 44.6);
  height: 1px;
  background: var(--porcelain);
}
.about-travel p { max-width: 27.4em; margin-top: calc(var(--vw) * 1.8); }
.about-travel .about-heading + p { margin-top: calc(var(--vw) * 3.4); }
.about-travel .btn { margin-top: calc(var(--vw) * 2.1); }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */
.cta {
  padding: 0 6% calc(var(--vw) * 9);
  text-align: center;
}
.cta .btn { margin-top: 0; }
.btn--dark { background: var(--espresso); color: var(--porcelain); }
.btn--dark:hover { background: var(--blush); color: var(--espresso); }

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 4rem 1.5rem 2.2rem;
  background: var(--espresso);
  color: var(--porcelain);
  text-align: center;
}
.site-footer__logo { width: 150px; line-height: 0; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem clamp(1rem, 4.5vw, 2.2rem);
}
.site-footer__nav a {
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
}
.site-footer__nav a {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { background-size: 100% 1px; }
.site-footer__social {
  display: inline-flex;
  margin-top: -.2rem;
  padding: .4rem;
  line-height: 0;
  transition: opacity .2s ease;
}
.site-footer__social:hover { opacity: .65; }
.site-footer__email:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__email {
  margin-top: -.4rem;
  font-size: .9rem;
  letter-spacing: .02em;
  font-weight: 400;
  text-decoration: none;
}
.site-footer :focus-visible { outline-color: var(--porcelain); }
.site-footer__small { font-size: .8rem; color: var(--rose); }

/* --------------------------------------------------------------------------
   Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --vw: 1vw; --header-h: 72px; }

  .site-header {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    padding-inline: 12px;
  }
  .site-header::after,
  .site-header--plain::before { display: none; }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--espresso);
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: transform .25s ease, background-color .25s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  .site-logo {
    position: static;
    transform: none;
    grid-column: 2;
    justify-self: center;
    width: 92px;
    min-width: 0;
  }

  .site-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: .5rem 1.5rem 1.5rem;
    background: var(--porcelain);
    border-bottom: 1px solid var(--espresso);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__group,
  .site-nav__group--left,
  .site-nav__group--right {
    position: static;
    height: auto;
    padding-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    color: var(--espresso);
  }
  .site-nav li { width: 100%; }
  .site-nav a {
    display: block;
    padding: .9rem 0;
    font-size: .95rem;
    border-bottom: 1px solid var(--blush);
  }
  .site-nav a[aria-current="page"] { text-decoration: none; font-weight: 400; color: var(--espresso); border-bottom-color: var(--rose); }
  .site-nav__book { border-bottom: 1px solid var(--blush); padding-bottom: .9rem; }

  /* Hero stacks: copy, then the photo with an espresso block offset behind it */
  .hero {
    flex-direction: column;
    align-items: stretch;
    padding: 3rem 1.5rem 3.5rem;
  }
  .hero::before { display: none; }
  .hero__copy { margin: 0; width: auto; }
  .hero__title { font-size: clamp(26px, 7.2vw, 56px); }
  .hero__copy p { font-size: 1rem; margin-top: 1.4rem; max-width: 36em; }
  .hero__copy p + p { margin-top: 1rem; }
  .btn {
    margin-top: 2rem;
    padding: .9rem 2rem;
    font-size: .8rem;
    gap: 1.2rem;
  }
  .btn__arrow { width: 26px; }
  .hero { min-height: 0; }
  .hero__collage {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 30rem;
    height: auto;
    aspect-ratio: 820 / 890;
    margin: 3.5rem auto 0;
  }
  .hero__collage::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 26.6%;
    width: 66.3%;
    top: -6%;
    bottom: -6%;
    background: var(--espresso);
  }

  .banner {
    aspect-ratio: auto;
    min-height: min(110vw, 540px);
  }
  .banner__img { object-position: 28% center; }
  .banner::after { background: linear-gradient(180deg, rgba(30, 20, 15, 0) 30%, rgba(30, 20, 15, .55) 100%); }
  .banner__copy { left: 1.5rem; right: 1.5rem; top: auto; bottom: 2.2rem; }
  .banner__title { font-size: clamp(26px, 7.4vw, 44px); }
  .link-light { margin-top: 1.2rem; font-size: .8rem; }

  .cards {
    grid-template-columns: 1fr;
    row-gap: 3.5rem;
    padding: 3.5rem 1.5rem 4.5rem;
  }
  .carousel { padding: 3.5rem 0 3rem; }
  .carousel__track { gap: 1rem; padding-inline: 1.5rem; scroll-padding-inline: 1.5rem; }
  .carousel__item { flex-basis: min(78%, 20rem); }
  .carousel__btn { display: none; }
  .cta--gallery { padding-bottom: 4rem; }
  .card { max-width: 420px; width: 100%; margin-inline: auto; }
  .card__media { aspect-ratio: 4 / 4.4; }
  .card__title { margin-top: .6rem; font-size: clamp(48px, 13vw, 66px); }
  .card p { max-width: 21em; margin-top: .4rem; font-size: 1rem; }
  .card .link-dark { margin-top: 1.4rem; font-size: .8rem; }
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    row-gap: 2.2rem;
    padding: 3.5rem 1.5rem;
  }
  .about__photo { max-width: 420px; width: 100%; }
  .about__title,
  .testimonials__title { font-size: clamp(28px, 7.4vw, 44px); }
  .about__title { margin-top: .6rem; }
  .about__copy p:not(.eyebrow) { margin-top: 1.1rem; font-size: 1rem; }
  .about__copy .link-dark { margin-top: 1.6rem; font-size: .8rem; }

  .testimonials { padding: 4rem 1.5rem 3rem; }
  .cta { padding: 0 1.5rem 4.5rem; }
  .options + .cta { padding-top: .5rem; }
  .package-panel--page { padding: 3rem 1.5rem 4.5rem; }
  .package-panel__links { margin-top: 2rem; gap: .8rem 2rem; }
  .page-head { padding: 3rem 1.5rem 1.5rem; }
  .page-head__title { margin-top: .6rem; font-size: clamp(30px, 8vw, 46px); }
  .page-head p:not(.eyebrow) { max-width: 30em; margin-top: 1rem; font-size: 1rem; }
  .cards--page { padding-top: 1.5rem; }
  .cards--page .card:last-child:nth-child(3n + 1) { grid-column: auto; }
  .gallery-nav { gap: .2rem 1.6rem; margin-top: 1.4rem; }
  .gallery-nav a { font-size: .75rem; }
  .gallery { padding: 1rem 1.5rem 3rem; }
  .gallery__grid { columns: 1; column-gap: 0; }
  .gallery__grid--main { grid-template-columns: 1fr; }
  .gallery__grid--feature { grid-template-columns: 1fr; gap: 1rem; }
  .gallery__grid--feature li.is-bw { width: 100%; }
  .gallery__grid--feature li.gallery__divider { width: 6rem; margin: 1.5rem 0; }
  .page-head--rule::after { width: 5rem; margin-top: 1.5rem; }
  .gallery__grid--few { display: block; }
  .gallery__grid--few li { margin-bottom: 1rem; }
  .gallery__grid li { margin-bottom: 1rem; }
  .lightbox__stage { padding: 4rem .8rem; }
  .lightbox__img { max-width: calc(100vw - 1.6rem); }
  .collection { grid-template-columns: 1fr; row-gap: 2rem; padding: 1.5rem 1.5rem 4rem; }
  .collection__title { margin-top: .5rem; font-size: clamp(44px, 12vw, 64px); }
  .collection__copy p:not(.eyebrow) { max-width: 30em; margin-top: 1rem; font-size: 1rem; }
  .collection__actions { justify-items: stretch; gap: .9rem; margin-top: 1.8rem; }
  .collection__actions .btn { width: auto; justify-content: center; }
  .about-hero__img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .about-hero__text { position: static; transform: none; translate: none; padding: 0 1.5rem; }
  .about-hero__text--left { padding-top: 2.2rem; padding-bottom: 1.6rem; font-size: clamp(26px, 7.2vw, 40px); }
  .about-hero__text--right { padding-bottom: 2.4rem; padding-top: 0; font-size: clamp(26px, 7.2vw, 40px); }
  .about-hero__text--right::before { content: ""; display: block; width: 3rem; height: 1px; margin: 0 auto 1.6rem; background: var(--rose); }
  .about-grid { display: block; }
  .about-heading { font-size: clamp(28px, 7.6vw, 42px); }
  .about-story p, .about-approach p, .about-travel p { font-size: 1rem; line-height: 1.5; }
  .about-story { padding: 2.5rem 1.5rem 2.5rem; border-bottom: 0; }
  .about-story p { max-width: 32em; margin-top: 1.1rem; }
  .about-story .about-heading + p { margin-top: 1.4rem; }
  .about-collage { width: calc(100% - 3rem); max-width: 30rem; margin: 0 auto 3rem; }
  .about-photo { min-height: 0; margin: 0; aspect-ratio: 4 / 5; }
  .about-approach { padding: 3rem 1.5rem; }
  .about-approach p { max-width: 32em; margin-top: 1.1rem; }
  .about-approach .about-heading + p { margin-top: 1.4rem; }
  .about-travel { padding: 3rem 1.5rem 3.5rem; }
  .about-travel .about-heading { padding-bottom: 1.6rem; }
  .about-travel .about-heading::after { left: -1.5rem; width: calc(100% + 3rem); }
  .about-travel p { max-width: 32em; margin-top: 1.1rem; }
  .about-travel .about-heading + p { margin-top: 1.6rem; }
  .about-travel .btn { margin-top: 2rem; }
  .option:last-child:nth-child(3n + 1) { grid-column: auto; }
  .options { grid-template-columns: 1fr; row-gap: 1rem; padding: 1.5rem 1.5rem 2rem; }
  .option { padding: 2rem 1.5rem; }
  .option__price { font-size: .75rem; }
  .option__title { margin-top: .6rem; font-size: clamp(40px, 11vw, 54px); }
  .option__text { max-width: 21em; margin-top: .6rem; font-size: 1rem; }
  .option__text { margin-bottom: 1.4rem; }
  .option__cta { font-size: .8rem; }
  .package-panels { padding-inline: 1.5rem; }
  .package-panel { max-width: 30em; padding-block: 2.5rem; }
  .package-panel__title { margin-top: .5rem; font-size: clamp(40px, 11vw, 54px); }
  .package-panel__intro { margin-top: 1rem; font-size: 1rem; }
  .package-panel li { font-size: 1rem; }
  .package-panel .btn { margin-top: 1.8rem; }
  .contact { grid-template-columns: 1fr; row-gap: 2.5rem; padding: 3rem 1.5rem 4.5rem; }
  .contact__title { margin-top: .6rem; font-size: clamp(28px, 7.4vw, 44px); }
  .contact__intro p:not(.eyebrow) { margin-top: 1rem; font-size: 1rem; }
  .contact__intro .contact__direct { font-size: .95rem; }
  .form { row-gap: 1.5rem; }
  .form__row { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .field label { font-size: .75rem; }
  .field input, .field select, .field textarea { font-size: 1rem; }
  .form__status { font-size: .95rem; }
  .form .btn { justify-self: stretch; justify-content: center; }
  .testimonials__title { margin-top: .6rem; }
  .testimonials__grid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
    margin-top: 2.5rem;
  }
  .quote { max-width: 30rem; margin-inline: auto; }
  .quote__mark { height: 2.6rem; font-size: 5.5rem; }
  .quote blockquote p { font-size: 1.05rem; }
  .quote figcaption { margin-top: 1.2rem; padding-top: 0; font-size: .75rem; }
}

@media (min-width: 640px) and (max-width: 900px) {
  .about-photo { aspect-ratio: 3 / 2; }
  .about-photo img { object-position: 50% 62%; }
  .gallery__grid { columns: 2; column-gap: 1rem; }
  .gallery__grid--main { grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
  .gallery__grid--feature { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .gallery__grid--feature li.is-bw { width: 100%; }
  .gallery__grid--few { display: flex; gap: 1rem; }
  .gallery__grid--few li { flex: 1 1 0; }
  /* tablets: keep the three galleries side by side */
  .cards {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
    column-gap: 4%;
    row-gap: 0;
    padding-inline: 5%;
  }
  .card { max-width: none; }
  .card__title { margin-top: .8rem; font-size: clamp(30px, 5vw, 44px); }
  .card p { max-width: none; margin-top: .4rem; font-size: .9rem; }
  .card .link-dark { margin-top: 1.4rem; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  /* keep nav from crowding the logo on small laptops/tablets landscape */
  .site-nav__group { gap: 2.2vw; }
  .site-nav__group--right { gap: 3.2vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}