.catalogue { background: var(--surface-raised); padding-block: var(--space-9); border-block: 1px solid var(--surface-line); }
.catalogue__inner { display: grid; gap: var(--space-7); align-items: center; }
.catalogue__copy h2 { font-size: clamp(1.8rem, 4vw, var(--size-2xl)); margin-bottom: var(--space-4); }
.catalogue__copy p { color: var(--steel-300); max-width: 48ch; margin-bottom: var(--space-6); }
.catalogue__preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
/* Fewer than three pages keep the same sheet size, centred; four sit in one
   row; five or more wrap four to a row. The count is set by Catalogue.js. */
.catalogue__preview[data-pages='1'],
.catalogue__preview[data-pages='2'] {
  grid-template-columns: repeat(var(--pages), calc((100% - 2 * var(--space-3)) / 3)); justify-content: center;
}
.catalogue__preview[data-many] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .catalogue__preview[data-many] { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); } }
.catalogue__sheet {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--surface-panel);
  border: 1px solid var(--surface-line);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.catalogue__sheet picture,
.catalogue__sheet img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.catalogue__sheet:nth-child(2) { translate: 0 -12px; border-color: var(--red-deep); }
.catalogue__sheet:hover { border-color: var(--red); }
.catalogue__sheet-label {
  position: absolute; inset: auto 0 0 0; padding: var(--space-2) var(--space-3);
  background: linear-gradient(0deg, rgba(0,0,0,.85), transparent);
  color: #fff; font-size: var(--size-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.contact { padding-block: var(--space-9) var(--space-10); }
.contact__inner { display: grid; gap: var(--space-8); }
.contact__details h2 { font-size: clamp(1.8rem, 4vw, var(--size-2xl)); margin-bottom: var(--space-5); }
.contact__address { font-style: normal; color: var(--steel-300); margin-bottom: var(--space-5); }
.contact__lines { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.contact__lines a { color: var(--steel-200); justify-self: start; }
.contact__lines a:hover { color: var(--red-text); }
.contact__map {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--surface-panel); border: 1px solid var(--surface-line);
  display: grid; place-items: center; gap: var(--space-4);
}
.contact__map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  /* Above the fallback panel; if the embed never loads, the panel shows. */
  z-index: 1;
}
.contact__map-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; align-content: center; gap: var(--space-4);
  padding: var(--space-5); text-align: center;
}
/* Sits over the embed so it stays reachable. */
.contact__map--live .contact__map-link { position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 2; }
.contact__map-place {
  font-size: var(--size-sm); color: var(--steel-300); text-align: center;
  padding-inline: var(--space-5);
}
[data-theme='light'] .contact__map iframe { filter: none; }

.form { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.form__field { display: grid; gap: var(--space-2); }
.form__field--wide, .form > .btn, .form__status { grid-column: 1 / -1; }
.form label { font-size: var(--size-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--steel-400); }
.form input, .form textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--surface-panel); border: 1px solid var(--surface-line);
  color: var(--text-primary); font: inherit; border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form input:focus, .form textarea:focus { border-color: var(--red); outline: none; }
.form textarea { resize: vertical; }
.form > .btn { justify-self: start; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__status { font-size: var(--size-sm); min-height: 1.4em; color: var(--steel-400); }
.form__status.is-ok { color: #58c47a; }
.form__status.is-error { color: var(--red-hot); }

@media (min-width: 900px) {
  .catalogue__inner { grid-template-columns: 1fr 1fr; }
  .contact__inner { grid-template-columns: 1fr 1.2fr; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* ── Email addresses: look clickable, and are ── */
.email-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.email-link svg { flex: none; color: var(--red-text); }
.email-link:hover .email-link__text, .email-link[aria-expanded='true'] .email-link__text { text-decoration: underline; }
.email-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.emailmenu {
  position: fixed; z-index: 1000; min-width: 230px; max-width: calc(100vw - 16px);
  display: grid; padding: var(--space-2);
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--surface-line); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.emailmenu__address { padding: var(--space-2) var(--space-3); font-size: var(--size-xs); color: var(--text-secondary); overflow-wrap: anywhere; border-bottom: 1px solid var(--surface-line); margin-bottom: var(--space-1); }
.emailmenu__item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); min-height: 38px; font-size: var(--size-sm); color: var(--text-primary); border-radius: var(--radius-sm); }
.emailmenu__item:hover, .emailmenu__item:focus-visible { background: var(--surface-panel); color: var(--red-text); outline: none; }
.emailmenu__status { font-size: var(--size-xs); color: var(--text-secondary); padding: 0 var(--space-3); min-height: 0; }
.emailmenu__status:not(:empty) { padding-block: var(--space-2); }