/* Shared base: fonts (self-hosted, same families as the design) and a few common rules.
   Colours and fonts are described in DESIGN-SYSTEM.md. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/caveat-latin-600-normal.woff2) format("woff2");
}

body { margin: 0; background: #FBF6EE; }
a { color: #B4442E; }
a:hover { color: #8A3322; }

/* Italic accent in headings: write <em>…</em> in the texts */
h1 em { font-style: italic; color: #B4442E; }

/* Image lightbox (screenshots "click to enlarge") */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(43,35,32,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 24px 32px; box-sizing: border-box; cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #FBF6EE; color: #2B2320; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb img { max-width: 100%; max-height: 80vh; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.lb img.lb-make { background: #F7F7F7; padding: 16px; box-sizing: border-box; }
.lb img.lb-crm { background: #FFFFFF; }
.lb p { margin: 0; font-size: 15px; color: #F3EBDD; text-align: center; }

/* Contact form status line */
.form-status { margin: 0; font-size: 15px; color: #5C4F49; }
.form-status.is-error { color: #B4442E; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }