/* ==========================================================================
   AND – Coming soon
   Mobile first: gli stili base sono per il mobile (375px),
   il media query a 768px porta il layout desktop (frame 1440px).
   ========================================================================== */

/* --- Font in locale (Gupter Medium, licenza OFL) ------------------------ */
@font-face {
  font-family: "Gupter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/gupter-500.woff2") format("woff2");
}

/* --- Variabili (valori presi dal file Figma) ---------------------------- */
:root {
  --color-bg: #2a201f;
  --color-text: #ff4000;

  --font-main: "Gupter", Georgia, "Times New Roman", serif;

  --text-size: 0.875rem;          /* 14px mobile */
  --mail-size: 1.25rem;       /* 20px mobile */
  --letter-spacing: 0.01em;   /* 0.16px su 16px, 0.18px su 18px */

  --gap: 20px;
  --gap-section: 30px;
  --page-gutter: 30px;
}

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

body {
  margin: 0;
}

h1,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Base --------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 500;
  font-size: var(--text-size);
  letter-spacing: var(--letter-spacing);
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
}

/* --- Layout pagina: contenuto centrato in orizzontale e verticale ------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-section);
  padding: 120px var(--page-gutter);
}

.header,
.content {
  width: 100%;
  max-width: 744px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

/* --- Header: logo + claim + sottotitolo --------------------------------- */
.header__logo {
  width: 100%;
  max-width: 547.5px;
  object-fit: cover;
  object-position: top;
  aspect-ratio: 547.5 / 122.59;
}

.header__claim,
.header__subtitle {
  width: 100%;
}

.header__claim {
  max-width: 442.9px;
}

.header__subtitle {
  max-width: 444.7px;
}

/* --- Testi -------------------------------------------------------------- */
.text__line {
  display: block;
}

/* --- Footer: email + monogramma ----------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer__mail {
  color: inherit;
  font-size: var(--mail-size);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.footer__mail:hover,
.footer__mail:focus-visible {
  text-decoration-thickness: 2px;
}

.footer__monogram {
  width: 46px;
  height: 58px;
  object-fit: cover;
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --text-size: 0.875rem;    /* 14px */
    --mail-size: 1.375rem;    /* 22px */
    --gap-section: 20px;
  }
}