/* ITAALIA LOOD — itaallase pilguga
   Ambra Editions OÜ · Tallinn
   Palette e tipografia dalla demo approvata il 28/07/2026:
   carta #F7F3EC · inchiostro #1B1714 · terracotta #A0402A · Didot + Futura */

:root{
  --paper:#F7F3EC;
  --paper-2:#EFE9DE;
  --ink:#1B1714;
  --ink-soft:#4A423A;
  --ink-faint:#8C8074;
  --terra:#A0402A;
  --rule:#D8CFC0;
  --serif-display:"Didot","Bodoni 72","Playfair Display",Georgia,"Times New Roman",serif;
  --serif-text:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Futura","Avenir Next","Gill Sans",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-text);
  font-size:19px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px}

/* ---------- MASTHEAD ----------
   Compatta: deve lasciare i titoli sopra la piega, non riempire lo schermo. */
header.masthead{padding:30px 0 0; text-align:center}

.kicker-top{
  font-family:var(--sans); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}

h1.logo{
  font-family:var(--serif-display); font-weight:400;
  font-size:clamp(32px,5.4vw,62px); line-height:.96; letter-spacing:.04em;
  margin:0; text-transform:uppercase;
}

.tagline{
  font-family:var(--serif-display); font-style:italic;
  font-size:clamp(15px,1.7vw,19px); color:var(--terra);
  margin:8px 0 0; letter-spacing:.02em;
}

/* il logo della testata riporta alla home */
h1.logo a{color:inherit; text-decoration:none}

/* navigazione: due voci sole, entrambe portano a qualcosa che esiste */
nav.sections{
  display:flex; justify-content:center; gap:34px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; margin-top:20px; padding:12px 0;
  border-top:1px solid var(--rule); border-bottom:3px double var(--ink);
}
nav.sections a{
  color:var(--ink); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
nav.sections a:hover{border-bottom-color:var(--terra); color:var(--terra)}
nav.sections a[aria-current="page"]{border-bottom-color:var(--ink)}
nav.sections a.sisse{color:var(--terra); border-bottom-color:var(--terra)}

/* ---------- IMPAGINAZIONE A DUE COLONNE ----------
   Testo a sinistra, colonna dei titoli a destra: la forma che un lettore
   si aspetta da un giornale online. Su schermo piccolo diventa una colonna. */
.rivista{
  display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:54px;
  padding:38px 0 10px; align-items:start;
}
.colonna{min-width:0}

/* --- l'apertura: tavola a fianco del titolo, non a tutta pagina --- */
.apertura{display:grid; grid-template-columns:300px minmax(0,1fr); gap:30px; align-items:center}
.apertura .figura{display:block}
.apertura .figura img{width:100%; height:auto; display:block}
.apertura .rubrica{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--terra); margin-bottom:12px;
}
.apertura h2{
  font-family:var(--serif-display); font-weight:400;
  font-size:clamp(28px,3.6vw,42px); line-height:1.1; margin:0 0 12px;
}
.apertura h2 a{color:inherit; text-decoration:none}
.apertura h2 a:hover{color:var(--terra)}
.apertura .data{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;
}
.apertura .attacco{font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px}

a.avanti{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--terra);
  padding-bottom:4px;
}
a.avanti:hover{color:var(--terra)}

/* --- i racconti precedenti, in righe con miniatura --- */
h2.sezione{
  font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-faint);
  margin:52px 0 0; padding-bottom:14px; border-bottom:3px double var(--ink);
}
.riga{border-bottom:1px solid var(--rule)}
.riga > a{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px;
  align-items:center; padding:22px 2px; text-decoration:none; color:var(--ink);
}
.riga > a:hover{background:var(--paper-2)}
.riga img.mini{width:100%; height:auto; display:block}
.riga .data{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;
}
.riga h3{
  font-family:var(--serif-display); font-weight:400;
  font-size:clamp(21px,2.6vw,27px); line-height:1.16; margin:0 0 8px;
}
.riga > a:hover h3{color:var(--terra)}
.riga p{margin:0; font-size:16.5px; line-height:1.55; color:var(--ink-soft)}

/* ---------- LA COLONNA DI DESTRA ---------- */
.spalla{position:sticky; top:26px}
.spalla .blocco{
  border-top:3px double var(--ink); padding:18px 0 26px; margin-bottom:8px;
}
.spalla h3{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.spalla p.testo{margin:0; font-size:16px; line-height:1.58; color:var(--ink-soft)}
.spalla p.vuoto{
  margin:0 0 14px; font-family:var(--serif-display); font-style:italic;
  font-size:17px; line-height:1.5; color:var(--ink-soft);
}
ul.spalla-lood{list-style:none; margin:0 0 16px; padding:0}
ul.spalla-lood li{border-bottom:1px solid var(--rule)}
ul.spalla-lood li:last-child{border-bottom:0}
ul.spalla-lood a{display:block; padding:11px 0; text-decoration:none; color:var(--ink)}
ul.spalla-lood a:hover .titolo{color:var(--terra)}
ul.spalla-lood .data{
  display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px;
}
ul.spalla-lood .titolo{
  font-family:var(--serif-display); font-size:19px; line-height:1.22;
}
a.tutti{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra); text-decoration:none;
}
a.tutti:hover{border-bottom:1px solid var(--terra)}

/* ---------- ELENCO DEI RACCONTI (home e archivio) ---------- */
.elenco{max-width:820px; margin:0 auto; padding:64px 0 20px}
.elenco > h3{
  font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-faint); text-align:center;
  padding-bottom:16px; margin:0 0 8px; border-bottom:1px solid var(--rule);
}
ul.lood{list-style:none; margin:0; padding:0}
ul.lood li{border-bottom:1px solid var(--rule)}
ul.lood a{
  display:flex; align-items:baseline; gap:22px; flex-wrap:wrap;
  padding:22px 4px; text-decoration:none; color:var(--ink);
}
ul.lood a:hover{background:var(--paper-2)}
ul.lood .data{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); flex:0 0 108px;
}
ul.lood .titolo{
  font-family:var(--serif-display); font-size:clamp(21px,2.8vw,26px);
  line-height:1.22; flex:1 1 320px;
}
ul.lood a:hover .titolo{color:var(--terra)}

/* ---------- PAGINE SEMPLICI (contatti) ---------- */
.pagina{max-width:660px; margin:0 auto; padding:62px 0 30px}
.pagina h2{
  font-family:var(--serif-display); font-weight:400; text-align:center;
  font-size:clamp(30px,4.4vw,44px); line-height:1.1; margin:0 0 34px;
}
.pagina p{margin:0 0 22px}
.pagina .dati{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:12.5px; letter-spacing:.06em;
  line-height:2.1; color:var(--ink-soft);
}
.pagina a{color:var(--terra); text-decoration:none; border-bottom:1px solid var(--rule)}
.pagina a:hover{border-bottom-color:var(--terra)}

/* torna indietro, in fondo a un racconto */
.indietro{
  max-width:720px; margin:34px auto 0; padding:0 0 10px; text-align:center;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.indietro a{color:var(--ink-faint); text-decoration:none}
.indietro a:hover{color:var(--terra)}

/* ---------- ARTICOLO ---------- */
article.piece{max-width:720px; margin:0 auto; padding:22px 0 20px}

.kicker{
  font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--terra); margin-bottom:20px;
  text-align:center;
}

article.piece h2{
  font-family:var(--serif-display); font-weight:400; text-align:center;
  font-size:clamp(34px,5.4vw,58px); line-height:1.08; margin:0 0 26px;
  letter-spacing:-.005em;
}

.piece-meta{
  text-align:center; font-family:var(--sans); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); padding-bottom:30px;
}

/* la tavola a china: fondo trasparente, il disegno galleggia sulla carta della pagina.
   Niente cornice, niente rettangolo: è la linea visiva decisa il 29/07.
   Contenuta a 520px: dentro un articolo accompagna il testo, non lo sovrasta. */
figure.plate{margin:0 auto 38px; max-width:520px}
figure.plate img{width:100%; height:auto; display:block; background:transparent}

article.piece p{margin:0 0 24px}

/* l'attacco: la prima frase in corpo maggiore, senza capolettera
   (una riga sola + capolettera flottante spingerebbe il paragrafo seguente) */
p.opening{
  font-size:clamp(21px,2.6vw,23px); line-height:1.5;
  margin:0 0 26px; color:var(--ink);
}

article.piece p.first::first-letter{
  font-family:var(--serif-display); float:left; font-size:76px; line-height:.76;
  padding:6px 12px 0 0; color:var(--terra);
}

blockquote{
  margin:44px 0; padding:0 0 0 26px; border-left:3px solid var(--terra);
  font-family:var(--serif-display); font-style:italic;
  font-size:clamp(23px,3.2vw,29px); line-height:1.34; color:var(--ink);
}

h3.crosshead{
  font-family:var(--serif-display); font-weight:400;
  font-size:clamp(24px,3.2vw,30px); line-height:1.2;
  margin:48px 0 22px; letter-spacing:.005em;
}

/* fregio di separazione fra i movimenti del pezzo */
.ornament{
  border:0; text-align:center; margin:44px 0;
  color:var(--terra); font-family:var(--serif-display); font-size:20px;
  letter-spacing:.7em;
}
.ornament::before{content:"✳"}

p.envoi{
  font-family:var(--serif-display); font-size:clamp(25px,3.4vw,32px);
  line-height:1.3; margin:40px 0 0; text-align:center;
}

.sign{
  margin-top:52px; padding-top:26px; border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); text-align:center;
}
.sign strong{
  display:block; font-family:var(--serif-display); font-size:22px;
  letter-spacing:.02em; text-transform:none; color:var(--ink);
  margin-bottom:6px; font-weight:400;
}

/* ---------- TELLI: resta in contatto (riquadro iscrizione) ---------- */
.blocco.telli{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-top:3px solid var(--terra);
  padding:20px 18px;
}
.blocco.telli h3{margin-top:0}
.blocco.telli .testo{margin-bottom:14px}
.telli-vorm{display:flex; flex-direction:column; gap:9px}
.telli-vorm input[type="email"]{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  padding:10px 12px; border:1px solid var(--rule); border-radius:2px;
  background:#fff; width:100%;
}
.telli-vorm input[type="email"]::placeholder{color:var(--ink-faint)}
.telli-vorm input[type="email"]:focus{outline:none; border-color:var(--terra)}
.telli-vorm button{
  font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper);
  background:var(--terra); border:0; border-radius:2px;
  padding:11px 12px; cursor:pointer; transition:opacity .15s ease;
}
.telli-vorm button:hover{opacity:.88}
.telli-nupp{
  display:inline-block; font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper); text-decoration:none;
  background:var(--terra); border-radius:2px; padding:11px 16px; transition:opacity .15s ease;
}
.telli-nupp:hover{opacity:.88; color:var(--paper)}
.telli-privaatsus{margin:11px 0 0; font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase}
.telli-privaatsus a{color:var(--ink-faint); text-decoration:none}
.telli-privaatsus a:hover{color:var(--terra)}
.footer-links{margin-top:12px}
.footer-links a{color:inherit; text-decoration:none; opacity:.7}
.footer-links a:hover{opacity:1}

/* ---------- JAGA: condividi il racconto ---------- */
.jaga{
  max-width:720px; margin:38px auto 0; padding-top:22px;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px;
}
.jaga-silt{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.jaga-nupud{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.jaga-nupp{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13px; line-height:1;
  color:var(--ink-soft); text-decoration:none;
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .15s ease;
}
.jaga-nupp svg{width:17px; height:17px; fill:currentColor; display:block}
.jaga-nupp:hover,
.jaga-nupp:focus-visible{color:var(--terra)}
.jaga-nupp.jaga-kopeeritud{color:var(--terra)}

/* ---------- CODA: cosa sarà questo posto ---------- */
.colophon{
  margin:64px 0 0; padding:52px 40px; text-align:center;
  background:var(--paper-2);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.colophon p{
  margin:0 auto; max-width:560px; color:var(--ink-soft);
  font-family:var(--serif-display); font-style:italic;
  font-size:clamp(20px,2.6vw,25px); line-height:1.42;
}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:var(--paper); padding:52px 0 44px; text-align:center}
/* il marchio dell'editore: monogramma AE (Ambra Editions), versione negativa per fondo scuro */
footer svg.mono{width:104px; height:auto; display:block; margin:0 auto 18px}
footer .pub{font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#B9AE9F}
footer .fine{
  font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#6F675E; margin-top:26px; line-height:2;
}

/* ---------- SCHERMI MEDI: la colonna destra scende sotto ---------- */
@media (max-width:960px){
  .rivista{grid-template-columns:1fr; gap:0}
  .spalla{position:static; margin-top:44px}
  .spalla .blocco:first-child{border-top:3px double var(--ink)}
}

@media (max-width:860px){
  nav.sections{gap:20px; font-size:10px; margin-top:16px}
  .apertura{grid-template-columns:1fr; gap:20px}
  .apertura .figura{max-width:340px; margin:0 auto}
  .riga > a{grid-template-columns:96px minmax(0,1fr); gap:16px}
  h2.sezione{margin-top:40px}
  figure.plate{max-width:100%}
  .elenco{padding-top:48px}
  ul.lood a{gap:6px; padding:18px 2px}
  ul.lood .data{flex:0 0 100%}

  body{font-size:18px}
  .wrap{padding:0 22px}
  header.masthead{padding-top:40px}
  .masthead-meta{flex-direction:column; gap:8px; font-size:9.5px}
  article.piece{padding-top:44px}
  article.piece p.first::first-letter{font-size:62px}
  .colophon{padding:44px 24px}
}

/* ---------- SISSEJUHATUS: la porta d'ingresso in cima alla home ---------- */
.sissejuhatus{
  display:grid; grid-template-columns:330px minmax(0,1fr); gap:46px; align-items:center;
  margin:36px 0 6px; padding:36px 0 40px;
  border-top:1px solid var(--rule); border-bottom:3px double var(--ink);
}
.sissejuhatus .sisse-pilt{display:block}
.sissejuhatus .sisse-pilt img{width:100%; height:auto; display:block}
.sisse-silt{
  font-family:var(--sans); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--terra); margin-bottom:18px;
}
.sisse-juht{
  font-family:var(--serif-text);
  font-size:clamp(16px,1.6vw,18.5px); line-height:1.62; color:var(--ink-soft);
  margin:0 0 28px; max-width:52ch;
}
.sisse-uksed{display:flex; flex-wrap:wrap; gap:14px}
.uks{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; padding:13px 20px; border-radius:2px;
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.uks-1{color:var(--ink); border:1px solid var(--ink)}
.uks-1:hover{background:var(--ink); color:var(--paper)}
.uks-2{color:var(--paper); background:var(--terra); border:1px solid var(--terra)}
.uks-2:hover{opacity:.9; color:var(--paper)}
@media (max-width:860px){
  .sissejuhatus{grid-template-columns:1fr; gap:22px; padding:26px 0 30px}
  .sissejuhatus .sisse-pilt{max-width:280px}
  .sisse-uksed .uks{flex:1 1 auto; text-align:center}
}