/* ------------------------------------------------------------------
   D'Amici — damicifood.com
   Pagina in costruzione. Identità: Archivo, crema, bordeaux.
   ------------------------------------------------------------------ */

:root{
  --cream:#EFECE6;
  --ink:#101010;
  --bord:#991915;   /* pallino del marchio su fondi chiari */
  --red:#CD212A;    /* rosso bandiera: solo tricolore e fondi scuri */
  --green:#008C45;
  --grey:#6B6760;
  --hair:#D3CEC5;
  --gutter:clamp(22px, 5vw, 76px);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ---------------------------------------------------------- impaginato */
.page{
  min-height:100svh;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(28px, 5vh, 56px) var(--gutter) clamp(26px, 4vh, 46px);
  display:flex;
  flex-direction:column;
}

/* ------------------------------------------------------------- testata */
.head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(30px, 6vh, 66px);
}

.flag{display:flex;width:64px;height:10px;flex:none}
.flag i{flex:1;display:block}
.flag i:nth-child(1){background:var(--green)}
.flag i:nth-child(2){background:#fff}
.flag i:nth-child(3){background:var(--red)}

.eyebrow{
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
}

/* ------------------------------------------------------------- marchio */
.wordmark{
  display:block;
  margin-bottom:clamp(24px, 4.4vh, 46px);
  line-height:0;
}

.mark{
  display:block;
  width:min(100%, 500px);
  height:auto;
}

.mark-letters{fill:var(--ink)}
.mark-dot{fill:var(--bord)}

/* --------------------------------------------------------------- claim */
.claim{
  font-size:clamp(23px, 3.5vw, 37px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.028em;
  max-width:34ch;
  margin-bottom:clamp(14px, 2.2vh, 22px);
}

.claim-2{
  display:block;
  margin-top:.22em;
  font-size:.74em;
  color:var(--grey);
}

.sub{
  font-size:clamp(14.5px, 1.7vw, 17px);
  line-height:1.55;
  color:var(--grey);
  max-width:46ch;
}

.rule{
  height:1px;
  background:var(--hair);
  margin:clamp(28px, 4.6vh, 48px) 0 clamp(22px, 3vh, 32px);
}

/* --------------------------------------------------------- coming soon */
/* Titolo a tracciati: larghezza esatta a ogni schermo, nessuna dipendenza dal font. */
.soon{
  margin-bottom:auto;
  display:flex;
  flex-direction:column;
  gap:clamp(4px, 1.4vw, 16px);
}

.soon-svg{
  display:block;
  width:100%;
  height:auto;
  fill:var(--bord);
}

.mail{
  display:inline-block;
  align-self:flex-start;
  margin-top:16px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--bord);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}

.mail:hover,
.mail:focus-visible{color:var(--bord)}

/* --------------------------------------------------------------- piede */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:clamp(30px, 5vh, 58px);
  padding-top:18px;
  border-top:1px solid var(--hair);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--grey);
}

.status{display:flex;align-items:center;gap:9px}

.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--bord);
  flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.82)}
}

/* ------------------------------------------------------------- 404 */
.page-404{justify-content:flex-start}
.wordmark-sm .mark{width:min(100%, 330px)}
.claim-sm{font-size:clamp(22px, 3.6vw, 34px);margin-top:8px}
.page-404 .mail{border-bottom-color:var(--bord)}

/* -------------------------------------------------------- animazioni */
.reveal{
  opacity:0;
  transform:translateY(14px);
  animation:rise .72s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:var(--d, 0ms);
}

@keyframes rise{
  to{opacity:1;transform:none}
}

:focus-visible{
  outline:2px solid var(--bord);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;animation:none}
  .dot{animation:none}
  *{transition-duration:.01ms !important}
}