/* ============ Slow Moss Press ============
   Carta e inchiostro. Il fondo è un foglio,
   il colore entra nel disegno come un pennarello. */

@font-face{font-family:Fraunces;src:url(../fonts/fraunces-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-400.woff2)format('woff2');font-weight:400;font-display:swap}

:root{
  --paper:#FAF7F0;      /* carta */
  --paper-deep:#F1EBDE; /* carta in ombra */
  --ink:#1E2A20;        /* inchiostro */
  --ink-soft:#5A6459;
  --moss:#2F6B3A;       /* verde muschio, il marchio */
  --moss-lit:#6F8B5F;   /* muschio chiaro, le campiture */
  --line:#D9D2C2;
  --maxw:36rem;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.65 Newsreader,Georgia,serif;
  /* grana di carta, dipinta e non caricata */
  background-image:
    radial-gradient(circle at 18% 12%, #fff 0, transparent 60%),
    radial-gradient(circle at 82% 78%, #fff 0, transparent 55%);
  overflow-x:hidden;
}
body::before{ /* velo di grana */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{position:relative;z-index:1;width:min(100% - 2.25rem,var(--maxw));margin-inline:auto}

/* ---------- marchio ---------- */
.brand{padding:2.25rem 0 .5rem;text-align:center}
.brand img{width:min(15rem,62vw);height:auto}

/* ---------- titolo ---------- */
h1{
  font:600 clamp(2.1rem,9vw,3rem)/1.08 Fraunces,Georgia,serif;
  margin:.9rem 0 .65rem;letter-spacing:-.015em;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--moss);position:relative;white-space:nowrap}
h1 em::after{ /* sottolineatura disegnata a mano */
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.34em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 3 78 9 118 5s62-1 80 2' fill='none' stroke='%236F8B5F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.lede{font-size:1.125rem;color:var(--ink-soft);margin:0 0 1.75rem;text-wrap:pretty}

/* ---------- le tre tavole, fogli appena stampati ---------- */
.plates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  margin:0 0 1.9rem;perspective:900px;
}
.plate{
  position:relative;margin:0;aspect-ratio:1;border-radius:2px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(30,42,32,.05),0 10px 22px -14px rgba(30,42,32,.5);
  transform:rotate(var(--r,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.plate:nth-child(1){--r:-2.4deg}
.plate:nth-child(2){--r:.9deg;z-index:2}
.plate:nth-child(3){--r:2.1deg}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
/* il pennarello: una macchia che entra nel disegno, scura le linee e colora il bianco */
.plate::after{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(58% 52% at 38% 62%,var(--moss-lit) 0,rgba(111,139,95,.85) 55%,transparent 72%);
  mix-blend-mode:multiply;opacity:0;transform:scale(.55);transform-origin:38% 62%;
  transition:opacity .55s var(--ease),transform .75s var(--ease);
}
.plate:hover,.plate:focus-within{transform:rotate(0) translateY(-4px);box-shadow:0 18px 34px -18px rgba(30,42,32,.55)}
.plate:hover::after,.plate:focus-within::after{opacity:1;transform:scale(1)}
@media (hover:none){ /* su telefono il colore c'è già: nessuno passa il dito per scoprirlo */
  .plate:nth-child(2)::after{opacity:1;transform:scale(1)}
}
.plates-note{margin:-1.4rem 0 1.9rem;font-size:.9375rem;color:var(--ink-soft);text-align:center}

/* ---------- il modulo ---------- */
.get{
  background:var(--paper-deep);border:1px solid var(--line);border-radius:4px;
  padding:1.4rem 1.25rem 1.3rem;margin-bottom:1.5rem;
  box-shadow:inset 0 1px 0 #fff;
}
.get h2{font:600 1.35rem/1.25 Fraunces,Georgia,serif;margin:0 0 .3rem}
.get p{margin:0 0 1rem;font-size:.9375rem;color:var(--ink-soft)}
.field{display:flex;flex-direction:column;gap:.6rem}
input[type=email]{
  font:400 1.0625rem/1.2 Newsreader,Georgia,serif;color:var(--ink);
  padding:.85rem .9rem;background:#fff;border:1px solid var(--line);border-radius:3px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
input[type=email]::placeholder{color:#9aa398}
input[type=email]:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(47,107,58,.16)}
button,.button{
  font:600 1.0625rem/1.2 Fraunces,Georgia,serif;color:var(--paper);cursor:pointer;
  padding:.9rem 1.1rem;background:var(--moss);border:1px solid var(--moss);border-radius:3px;
  transition:background .2s,transform .12s;
}
/* .button e' un <a>: gli servono le due cose che un <button> ha per natura */
.button{display:inline-block;text-decoration:none;text-align:center}
button:hover,.button:hover{background:#25562f;color:var(--paper)}
button:active,.button:active{transform:translateY(1px)}
button[disabled]{opacity:.6;cursor:progress}
.get-download{margin:0 0 .25rem}
.get-download .button{width:100%}
.fineprint{margin:.85rem 0 0;font-size:.8125rem;color:var(--ink-soft)}
.fineprint a{color:var(--ink-soft)}
.msg{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:3px;font-size:.9375rem;border:1px solid}
.msg[data-kind=ok]{background:#EDF3EA;border-color:#BBD2B4;color:#25562f}
.msg[data-kind=err]{background:#FBEEEA;border-color:#E3C3B8;color:#8A3B22}
[hidden]{display:none !important}

/* ---------- il libro in arrivo ---------- */
.coming{display:flex;gap:.9rem;align-items:flex-start;padding:0 0 2.25rem}
.coming .leaf{flex:0 0 2.4rem;width:2.4rem;opacity:.85}
.coming h2{font:600 1.05rem/1.3 Fraunces,Georgia,serif;margin:.1rem 0 .25rem}
.coming p{margin:0;font-size:.9375rem;color:var(--ink-soft)}

/* ---------- piede ---------- */
footer{border-top:1px solid var(--line);padding:1.4rem 0 2.5rem;font-size:.8125rem;color:var(--ink-soft)}
footer a{color:var(--ink-soft);text-decoration-thickness:1px;text-underline-offset:2px}
footer p{margin:.2rem 0}

/* ---------- pagine di testo (privacy) ---------- */
.prose h1{font-size:clamp(1.8rem,7vw,2.4rem)}
.prose h2{font:600 1.2rem/1.3 Fraunces,Georgia,serif;margin:2rem 0 .5rem}
.prose p,.prose li{color:var(--ink-soft)}
.prose a{color:var(--moss)}
.back{display:inline-block;margin:2rem 0 3rem;font-size:.9375rem;color:var(--moss)}

/* ---------- comparsa all'ingresso ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(10px);animation:rise .7s var(--ease) forwards}
  .rise:nth-child(1){animation-delay:.02s}
  .rise:nth-child(2){animation-delay:.10s}
  .rise:nth-child(3){animation-delay:.18s}
  .rise:nth-child(4){animation-delay:.26s}
  .rise:nth-child(5){animation-delay:.34s}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media (min-width:34rem){ .plates{gap:.85rem} .brand{padding-top:3rem} }

/* ---------- il marchio, costruito in pagina ---------- */
.mark{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--ink)}
.mark__leaf{width:2.7rem;height:auto;flex:0 0 auto;color:var(--moss);transform:translateY(-.12em)}
.mark__type{display:flex;flex-direction:column;align-items:stretch;line-height:1}
.mark__name{font:600 1.7rem/1 Fraunces,Georgia,serif;letter-spacing:-.01em}
.mark__press{
  font:400 .68rem/1 Newsreader,Georgia,serif;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.38rem;padding-top:.34rem;border-top:1px solid var(--line);
  text-indent:.42em; /* compensa lo spazio finale della spaziatura */
}
.coming .leaf{flex:0 0 2.2rem;width:2.2rem;height:auto;color:var(--moss);margin-top:.15rem}