/* ──────────────────────────────────────────────────────────────────────────────
 *  vigna.css — La Vigna, racconto editoriale Mucciolo.
 *  Mobile-first, mobile-only: una sola colonna a tutte le larghezze.
 *  Pensato come un articolo da leggere col pollice, anche da desktop.
 *  v3.0.0
 * ────────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-400-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600-normal.woff2) format('woff2');}

/* — Reset essenziale — */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* — Palette (testi quasi neri su crema chiara per max contrasto) — */
:root{
  --crema:       #F0EAD6;
  --crema-card:  #FAF7F0;
  --bordo:       #C9BC9C;
  --bordo-soft:  #E2D9C4;
  --oro:         #7A5A0F;
  --oro-chiaro:  #A07C28;
  --oro-vivo:    #D2A430;
  --testo:       #0C0400;   /* corpo: praticamente nero, sfumatura calda */
  --marrone:     #221008;   /* titoli */
  --marrone-mid: #2F1A0C;   /* corsivi/citazioni */
  --seppia:      #6B5A3E;   /* footer */
}

/* — Base — */
/* Filosofia size: mobile GRANDE (lettura a 30cm su schermo piccolo),
   desktop leggermente più contenuto via @media (min-width) in fondo. */
body{
  background:var(--crema);
  color:var(--testo);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:24px;          /* base mobile */
  line-height:1.7;
  font-weight:500;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:env(safe-area-inset-bottom);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ============================================================================
   HERO — compatto, denso, leggibile sopra il fogliame.
   ============================================================================ */
.hero{
  position:relative;
  min-height:88svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(96px,16vh,140px) 22px clamp(80px,12vh,110px);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('https://2ai.it/i/ot6p02/scorcio-del-fiume-calore-salernitano.jpg');
  background-size:cover;
  background-position:center 40%;
  transform:scale(1.04);
}
@media (prefers-reduced-motion: no-preference){
  .hero-bg{ animation:slowzoom 22s ease-in-out infinite alternate; }
}
@keyframes slowzoom{ 0%{transform:scale(1.04)} 100%{transform:scale(1.1) translateY(-1%)} }

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(15,6,1,0.68) 0%,
    rgba(20,8,2,0.74) 40%,
    rgba(8,3,1,0.86) 100%
  );
}
.hero-content{ position:relative; z-index:2; max-width:560px; }

.hero-eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#F0D080;
  margin-bottom:24px;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85);
}
.hero h1{
  font-size:clamp(34px, 9.5vw, 56px);
  font-weight:400;
  color:#F5EED8;
  line-height:1.12;
  letter-spacing:-0.01em;
  text-shadow:0 2px 6px rgba(0,0,0,.8), 0 4px 22px rgba(0,0,0,.6);
}
.hero h1 em{ font-style:italic; color:#D4A847; font-weight:500; }
.hero-sub{
  font-size:clamp(18px, 4.5vw, 21px);
  font-style:italic;
  font-weight:500;
  color:rgba(245,238,210,.96);
  margin:22px auto 0;
  max-width:36ch;
  line-height:1.55;
  text-shadow:0 1px 4px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.6);
}
.hero-line{
  width:80px; height:1px;
  background:linear-gradient(90deg, transparent, #D4A847, transparent);
  margin:32px auto 0;
}
.hero-credit{
  position:absolute;
  bottom:56px; right:14px;
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(240,230,200,.55);
  font-style:italic;
  z-index:2;
  max-width:48vw; text-align:right;
}
.scroll-cue{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#D4A847;
  z-index:2;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: no-preference){
  .scroll-cue{ animation:breathe 2.8s ease-in-out infinite; }
}
@keyframes breathe{ 0%,100%{opacity:.4} 50%{opacity:1} }

/* ============================================================================
   ARTICOLO — colonna unica, larghezza da pollice (anche su desktop).
   ============================================================================ */
.page{ display:none; }
.page.active{ display:block; }

article{
  max-width:600px;     /* colonna da lettura mobile, mai più larga */
  margin:0 auto;
  padding:clamp(56px,9vh,80px) 22px clamp(80px,12vh,110px);
}

/* — Marker di sezione: linea + etichetta dorata — */
.sec-marker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:64px 0 28px;
}
.sec-marker::before,
.sec-marker::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--bordo);
}
.sec-marker span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--oro);
  white-space:nowrap;
}

/* — Titoli — */
h2{
  font-size:clamp(30px, 7vw, 38px);
  font-weight:500;
  color:var(--marrone);
  line-height:1.2;
  margin-bottom:28px;
  letter-spacing:-.005em;
}
h2 em{ font-style:italic; color:var(--oro); }
h3{
  font-size:clamp(24px, 5.5vw, 28px);
  font-weight:600;
  color:var(--marrone);
  margin:48px 0 20px;
  line-height:1.25;
}

/* — Corpo — */
p{
  font-size:24px;
  font-weight:500;
  line-height:1.7;
  color:var(--testo);
  margin-bottom:26px;
}
p em{ font-style:italic; font-weight:600; color:var(--marrone); }

/* — Citazione enfatica — */
.pull-quote{
  border-left:4px solid var(--oro-vivo);
  padding:22px 24px;
  margin:44px 0;
  background:rgba(139,105,20,.09);
  border-radius:0 6px 6px 0;
}
.pull-quote p{
  font-size:26px;
  font-style:italic;
  font-weight:500;
  color:var(--marrone-mid);
  line-height:1.5;
  margin:0;
}

/* — Glossario: lista verticale, una voce per riga — */
.glossary{
  display:flex;
  flex-direction:column;
  border:1px solid var(--bordo);
  border-radius:8px;
  overflow:hidden;
  margin:40px 0;
}
.gloss-cell{
  background:var(--crema-card);
  padding:22px 22px 24px;
  border-bottom:1px solid var(--bordo-soft);
}
.gloss-cell:last-child{ border-bottom:0; }
.gloss-term{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--oro);
  margin-bottom:10px;
}
.gloss-meaning{
  display:block;
  font-size:22px;
  font-style:italic;
  font-weight:500;
  color:var(--marrone-mid);
  line-height:1.5;
}

/* — Luoghi: card una sopra l'altra — */
.place-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:32px 0;
}
.place-card{
  background:var(--crema-card);
  border:1px solid var(--bordo);
  border-radius:10px;
  padding:22px 22px 24px;
}
.place-name{
  font-size:25px;
  font-weight:600;
  color:var(--marrone);
  margin-bottom:10px;
  line-height:1.2;
}
.place-desc{
  font-size:22px;
  font-style:italic;
  font-weight:500;
  color:var(--marrone-mid);
  line-height:1.55;
}

/* — Timeline — */
.timeline{
  position:relative;
  padding-left:30px;
  margin:36px 0;
}
.timeline::before{
  content:'';
  position:absolute;
  left:6px; top:10px; bottom:10px;
  width:2px;
  background:linear-gradient(180deg, var(--oro-vivo), var(--marrone), var(--oro-chiaro));
}
.tl-item{ position:relative; margin-bottom:36px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-dot{
  position:absolute;
  left:-30px; top:8px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--oro-vivo);
  border:2px solid var(--crema);
  box-shadow:0 0 0 1px var(--oro);
}
.tl-dot--2{ background:var(--marrone-mid); }
.tl-dot--3{ background:var(--marrone); }
.tl-dot--4{ background:var(--oro-chiaro); }
.tl-dot--5{ background:var(--oro-vivo); }
.tl-era{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oro);
  margin-bottom:8px;
}
.tl-text{
  font-size:23px;
  font-weight:500;
  line-height:1.65;
  color:var(--testo);
}

/* — Coda — */
.coda{
  text-align:center;
  padding:48px 0 0;
  border-top:1px solid var(--bordo);
  margin-top:72px;
}
.coda p{
  font-size:24px;
  font-style:italic;
  font-weight:500;
  color:var(--marrone-mid);
  max-width:42ch;
  margin:0 auto 28px;
  line-height:1.55;
}
.coda-ornament{
  font-size:32px;
  opacity:.55;
  display:block;
  margin-top:8px;
}

/* — Footer — */
footer{
  text-align:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  font-size:13px;
  letter-spacing:.14em;
  color:var(--seppia);
  border-top:1px solid var(--bordo-soft);
}

/* ============================================================================
   CONTROLLI FISSI — back-link e toggle lingua, touch-friendly.
   ============================================================================ */
.back-link,
.lang-toggle{
  position:fixed;
  top:14px;
  z-index:200;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  font-family:'Cormorant Garamond', serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--marrone);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(160,124,40,.55);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:background .2s, color .2s, border-color .2s;
}
.back-link{
  left:14px;
  padding:10px 16px;
  border-radius:24px;
}
.lang-toggle{
  right:14px;
  min-width:48px;
  padding:0 14px;
  border-radius:50rem;
}
.back-link:hover,.back-link:focus-visible,
.lang-toggle:hover,.lang-toggle:focus-visible{
  background:#fff; color:var(--oro); border-color:var(--oro-chiaro); outline:none;
}
.back-link:focus-visible,
.lang-toggle:focus-visible{ box-shadow:0 0 0 3px rgba(160,124,40,.4); }

/* ============================================================================
   DESKTOP — solo per ridurre leggermente i font (su mobile devono restare grandi).
   La struttura resta colonna unica anche qui per coerenza con l'articolo editoriale.
   ============================================================================ */
@media (min-width: 900px){
  body{ font-size:21px; line-height:1.75; }
  p{ font-size:21px; line-height:1.75; }
  .pull-quote p{ font-size:24px; }
  .gloss-meaning{ font-size:20px; }
  .place-name{ font-size:23px; }
  .place-desc{ font-size:20px; }
  .tl-text{ font-size:21px; line-height:1.7; }
  .coda p{ font-size:22px; }
}

/* ============================================================================
   FADE-IN progressivo (solo se JS attivo e niente reduced-motion).
   ============================================================================ */
.fi{ opacity:1; transform:none; }
html.js .fi{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
html.js .fi.vis{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html.js .fi{ opacity:1; transform:none; transition:none; }
}