@font-face{font-family:'Garamond';src:url(fonts/garamond.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument';src:url(fonts/instrument.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#faf8f4;
  --ink:#1a1714;
  --body:#35322c;
  --muted:#6f6a61;
  --hairline:rgba(26,23,20,.16);
  --rosso:#7d1f2e;          /* lacca bordeaux — accento */
  --velluto:#521523;        /* parete del salone rosso */
  --crema:#f6efe2;          /* testo sul velluto */
  --oro:#c7a468;            /* solo per la cornice del salone */
  --serif:'Garamond','EB Garamond','Iowan Old Style',Georgia,serif;
  --grot:'Instrument','Helvetica Neue',Helvetica,Arial,sans-serif;
}

html{background:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--grot);font-weight:400;font-size:17px;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--rosso);color:#fff}

a{color:var(--ink);text-decoration:none;transition:color .35s ease,border-color .35s ease}
a:hover{color:var(--rosso)}
a:focus-visible{outline:1.5px solid var(--rosso);outline-offset:4px}

/* ---------- barra (vetro) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.6rem;
  background:rgba(250,248,244,.74);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--hairline);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
}
header .brand{color:var(--ink);font-weight:500}
.langs{display:flex;gap:1.2rem}
.langs a{
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  transition:color .3s ease;padding:.2rem 0;
}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{color:var(--rosso);font-weight:500}

/* ---------- soglia ---------- */
.soglia{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6.5rem 1.6rem 2.2rem;box-sizing:border-box;
}
.marchio{margin-bottom:3rem}
.soglia .sopra{
  margin:0 0 1.6rem;font-size:.66rem;letter-spacing:.58em;text-indent:.58em;
  text-transform:uppercase;color:var(--muted);
}
.soglia h1{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(2.9rem,12.5vw,9.5rem);line-height:1;
  text-transform:uppercase;letter-spacing:.12em;text-indent:.12em;
  color:var(--ink);
}
.motto{
  margin:2.6rem 0 0;font-size:.72rem;font-weight:500;
  letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;color:var(--rosso);
}
.soglia .meta{
  margin-top:auto;width:min(72rem,100%);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;
  border-top:1px solid var(--hairline);padding-top:1.2rem;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.soglia .meta span:nth-child(2){text-align:center}
.soglia .meta span:nth-child(3){text-align:right}
@media(max-width:700px){
  .soglia .meta{grid-template-columns:1fr;gap:.5rem;text-align:center}
  .soglia .meta span:nth-child(2),.soglia .meta span:nth-child(3){text-align:center}
}

/* ---------- fregio delle epoche ---------- */
.fregio{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  overflow:hidden;white-space:nowrap;padding:1.05rem 0;
}
.fregio .nastro{display:inline-block;animation:scorri 60s linear infinite}
.fregio span{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  padding-right:.34em;
}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .fregio{overflow-x:auto}
  .fregio .nastro{animation:none}
}

/* ---------- sezioni ---------- */
section.pagina{
  position:relative;padding:8.5rem 1.6rem;
  display:grid;grid-template-columns:1fr min(58ch,100%) 1fr;
}
section.pagina>*{grid-column:2}
.eyebrow{
  margin:0 0 3rem;font-size:.62rem;font-weight:500;letter-spacing:.4em;
  text-transform:uppercase;color:var(--muted);
}
/* filetto doppio — segno da stamperia */
.eyebrow::after{
  content:"";display:block;width:3.4rem;height:3px;margin-top:1.1rem;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);opacity:.6;
}

/* manifesto — tutto tondo, corsivi aboliti */
.manifesto p{
  font-family:var(--serif);font-size:clamp(1.24rem,2.3vw,1.48rem);line-height:1.68;
  margin:0 0 1.6rem;color:var(--ink);max-width:58ch;
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;
}
.manifesto p:last-child{margin-bottom:0}
em{font-style:normal}

/* capolettera */
.manifesto p.capo::first-letter{
  float:left;font-family:var(--serif);font-style:normal;
  font-size:4.1em;line-height:.82;padding:.04em .14em 0 0;
  color:var(--rosso);
}

/* postille */
.postilla{display:none;font-size:.62rem;letter-spacing:.12em;line-height:2;color:var(--muted);text-transform:uppercase}
@media(min-width:1100px){
  .postilla{display:block;grid-column:3;grid-row:2;max-width:10.5rem;margin-left:3rem;align-self:start}
}

/* ---------- le tre arti ---------- */
.arti{
  grid-column:1/-1;justify-self:center;width:min(72rem,100%);
  display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem;margin-top:.5rem;
}
.arte{border-top:1px solid var(--ink);padding-top:1.6rem}
.arte .num{font-family:var(--serif);font-size:1.5rem;color:var(--rosso);display:block;line-height:1}
.arte h3{
  margin:1.2rem 0 1rem;font-family:var(--grot);font-weight:500;font-size:.82rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
}
.arte p{margin:0;font-family:var(--serif);font-size:1.16rem;line-height:1.72;color:var(--body)}
@media(max-width:899px){.arti{grid-template-columns:1fr;gap:2.6rem}}

/* ---------- il salone rosso (citazione) ---------- */
.salone{background:var(--velluto);padding:5.5rem 1.6rem}
.salone .cornice{
  max-width:52rem;margin:0 auto;text-align:center;
  border:1px solid rgba(199,164,104,.65);
  outline:1px solid rgba(199,164,104,.3);outline-offset:7px;
  padding:4.5rem 2.4rem;
}
.salone p{
  font-family:var(--serif);font-style:normal;font-weight:400;color:var(--crema);
  font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.55;
  margin:0 auto 2rem;max-width:36ch;text-wrap:balance;
}
.salone cite{
  font-style:normal;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(246,239,226,.75);
}
.salone cite em{font-family:var(--serif);font-style:normal;text-transform:none;letter-spacing:.06em;font-size:.8rem}
.salone ::selection{background:var(--crema);color:var(--velluto)}

/* ---------- la maison ---------- */
.fondatori{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.35;letter-spacing:.01em;
  margin:0 0 .7rem;color:var(--ink);text-wrap:balance;
}
.ruolo{margin:0 0 2.8rem;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.pagina .prosa{
  margin:0 0 1.3rem;max-width:58ch;
  font-family:var(--serif);font-size:1.22rem;line-height:1.68;color:var(--body);
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;
}
.pagina .prosa:last-child{margin-bottom:0}
.corrisp .prosa{text-align:center}

/* ---------- correspondance ---------- */
.corrisp{text-align:center}
.corrisp .eyebrow{margin-left:auto;margin-right:auto}
.corrisp .eyebrow::after{margin-left:auto;margin-right:auto}
.corrisp .prosa{margin-left:auto;margin-right:auto}
.mail{
  display:inline-block;margin-top:2rem;
  font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:.04em;
  border-bottom:1px solid var(--ink);padding-bottom:.3rem;
}
.mail:hover{border-color:var(--rosso)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hairline);
  padding:2.8rem 1.6rem 3.4rem;text-align:center;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
footer .porte{margin:0 0 1rem}
footer .anno{margin:0}

/* ---------- luce ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.reveal.lit{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  a{transition:none}
}

/* ---------- porta (root) ---------- */
.porta{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.4rem;text-align:center;padding:2rem;
}
.porta .lingue{display:flex;gap:2.4rem}
.porta .lingue a{
  font-size:.72rem;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  border-bottom:1px solid var(--hairline);padding-bottom:.4rem;
}