/* OLDLIFE — vetrina pubblica.
   Stessi materiali di YMAP Fixer: le schede sono la pennellata panel.png
   stirata a riempire, il pulsante è button.png. Nessun bordo disegnato.
   Remington ovunque; l'Arial Narrow compresso è riservato al solo titolo da
   manifesto in apertura, dove il salto di carattere è una scelta voluta. */

@font-face {
  font-family: 'Remington';
  src: url('/static/fonts/remington.ttf') format('truetype');
  font-display: swap;
}

:root {
  --red: #bd291d;
  --red-soft: #d9533f;
  --paper: #dfcaa5;
  --cream: #f1e4ce;
  --muted: #b6a38d;
  --dim: #8a7358;
  --display: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;

  --ink: url('/static/images/panel.png') center / 100% 100% no-repeat;
  --ink-btn: url('/static/images/button.png') center / 100% 100% no-repeat;
  --ink-btn-hi: url('/static/images/button-hover.png') center / 100% 100% no-repeat;
}

* { box-sizing: border-box; }

/* Mai una barra orizzontale sulla pagina. */
html, body { max-width: 100%; overflow-x: hidden; }
html { background: #0a0705; scroll-behavior: smooth; }

* { scrollbar-width: thin; scrollbar-color: rgba(223,202,165,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.35); }
::-webkit-scrollbar-thumb { background: rgba(223,202,165,.26); }
::-webkit-scrollbar-thumb:hover { background: rgba(223,202,165,.45); }

body {
  margin: 0;
  color: var(--cream);
  font-family: 'Remington', 'Courier New', serif;
  font-size: 16px;
  line-height: 1.62;
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .11; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Apertura — qui il paesaggio deve vedersi
   ========================================================================== */
.hero {
  position: relative; min-height: 94vh; display: grid; align-items: center;
  background:
    linear-gradient(90deg, rgba(9,5,3,.85) 0%, rgba(9,5,3,.35) 48%, rgba(9,5,3,.06) 76%),
    linear-gradient(0deg, rgba(8,4,3,.5), transparent 45%),
    url('/static/images/background.png') center / cover no-repeat;
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0;
}
.hero-fade {
  position: absolute; inset: auto 0 0 0; height: 190px; z-index: 1;
  background: linear-gradient(180deg, transparent, #0a0705);
}
.kicker {
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--paper); margin-bottom: 24px; text-shadow: 2px 3px 10px #000;
}
/* L'unico punto in cui il carattere cambia: un titolo alto 190px non è
   più tipografia, è un manifesto. */
.hero h1 {
  font-family: var(--display);
  font-size: clamp(78px, 13vw, 190px);
  line-height: .8; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.025em; margin: 0 0 32px;
  text-shadow: 4px 8px 34px #000;
}
.hero h1 em { color: var(--red); font-style: italic; }
/* Una frase, una riga. Il racconto è diviso in periodi e ciascuno tiene la
   propria riga: niente interruzioni a metà proposizione. La colonna è larga
   quanto serve al periodo più lungo, e il corpo scala con la finestra così
   la riga regge anche su schermi stretti prima di andare a capo da sola. */
.lead {
  font-size: clamp(15px, 1.45vw, 19px);
  max-width: 64em;
  margin: 0 0 26px;
  line-height: 1.75;
  color: #ece0cb;
  text-shadow: 2px 3px 12px #000;
  text-wrap: pretty;
}
.lead p { margin: 0 0 16px; }
/* La data d'apertura non e' racconto, e' un'intestazione: prende il
   marroncino del rigo sopra invece del bianco panna del corpo. */
.lead .anno { color: var(--paper); }
.lead p:last-child { margin-bottom: 0; }
.lead em { color: var(--red-soft); font-style: normal; }
.lead-sub {
  color: var(--muted); margin: 0 0 40px; max-width: 30em;
  line-height: 1.7; text-shadow: 2px 3px 10px #000; text-wrap: pretty;
}

.cta {
  display: inline-block; text-decoration: none; color: #fff;
  font: 400 16px 'Remington', 'Courier New', serif; letter-spacing: 2px;
  padding: 22px 46px; background: var(--ink-btn);
  filter: drop-shadow(0 0 3px rgba(255,255,255,.3)); transition: .2s;
}
.cta:hover { transform: scale(.95); color: #000; background: var(--ink-btn-hi); }

/* ==========================================================================
   Indice
   ========================================================================== */
.indice {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(9, 5, 3, .96);
  box-shadow: 0 1px 0 rgba(223,202,165,.14), 0 10px 30px rgba(0,0,0,.5);
}
.indice a {
  flex: none; text-decoration: none; color: var(--muted);
  font-size: 14px; letter-spacing: 1.4px; padding: 16px 16px 14px;
  border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap;
}
.indice::-webkit-scrollbar { display: none; }
.indice a:hover { color: var(--cream); border-bottom-color: var(--red); }

/* ==========================================================================
   Domini e schede
   ========================================================================== */
main {
  width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0 40px;
  position: relative; z-index: 2;
}

.dominio { padding: 66px 0 24px; }
.dominio + .dominio { box-shadow: inset 0 1px 0 rgba(223,202,165,.12); }

.dominio-testa { position: relative; margin-bottom: 32px; }
.dominio-testa h2 {
  font-size: clamp(30px, 4vw, 44px); letter-spacing: 2px; text-transform: uppercase;
  font-weight: 400; margin: 0 0 8px; text-shadow: 2px 4px 16px #000;
}
.dominio-intro { color: var(--paper); font-size: 17px; margin: 0; max-width: 700px; }
.conta {
  position: absolute; top: 0; right: 0;
  font-family: var(--display); font-size: 58px; font-weight: 800;
  color: rgba(223, 202, 165, .1); line-height: 1;
}

.carte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.carta {
  background: var(--ink);
  padding: 34px 34px 28px; display: flex; flex-direction: column;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.55)); transition: .18s;
}
.carta:hover { transform: translateY(-4px) scale(.995); }
.carta h3 {
  font-size: 21px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 400; margin: 0 0 12px; text-shadow: 1px 2px 8px #000;
}
.gancio { color: var(--red-soft); font-size: 15.5px; margin: 0 0 14px; line-height: 1.5; }
.corpo { margin: 0 0 18px; color: #e3d6c1; font-size: 15px; flex: 1; }
.carta footer {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  box-shadow: inset 0 1px 0 rgba(223,202,165,.15); padding-top: 14px; margin-top: auto;
}
.perchi { color: var(--muted); font-size: 13px; max-width: 26em; }
/* Pennellata bianca, la stessa del pulsante premuto: il badge è un timbro
   d'inchiostro chiaro, non un rettangolo con il bordo. */
.modo {
  font-size: 11.5px; letter-spacing: 1.2px; color: #14100c;
  background: var(--ink-btn-hi); padding: 6px 14px 5px;
  margin-left: auto; white-space: nowrap;
}

/* Mestieri che si scoprono sul posto: si accennano soltanto. Il segno è un
   filo rosso sul fianco, non un simbolo dopo il titolo — quello finiva a capo
   da solo ogni volta che il titolo andava su due righe. */
.carta.velata { box-shadow: inset 3px 0 0 rgba(189, 41, 29, .75); }
.carta.velata .corpo { color: var(--muted); }

/* ==========================================================================
   Chiusura
   ========================================================================== */
.chiusura {
  position: relative; z-index: 2;
  text-align: center; padding: 76px 24px 96px;
  box-shadow: inset 0 1px 0 rgba(223,202,165,.12);
  background: rgba(0,0,0,.35);
}
.firma { letter-spacing: 3px; text-transform: uppercase; font-size: 14px; color: var(--paper); margin: 0 0 12px; }
.nota { color: var(--dim); font-size: 14px; max-width: 540px; margin: 0 auto; }
.vuoto { color: var(--muted); text-align: center; padding: 80px 0; font-style: italic; }

/* ==========================================================================
   Manifesto economico -- sta subito sotto l'apertura, prima dell'indice.
   Non e' una scheda come le altre: fondo scuro pieno e filetto rosso a
   sinistra, per leggersi come una dichiarazione e non come un contenuto.
   ========================================================================== */
.manifesto {
  position: relative; z-index: 2;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px);
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 1px 0 rgba(223,202,165,.12),
              inset 0 -1px 0 rgba(223,202,165,.12);
}
.manifesto-inner {
  max-width: 780px; margin: 0 auto;
  border-left: 3px solid var(--red);
  padding-left: clamp(20px, 4vw, 38px);
}
.manifesto h2 {
  font-family: var(--display);
  font-size: clamp(30px, 5.2vw, 50px);
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--cream); margin: 10px 0 26px; line-height: 1.05;
  letter-spacing: -.015em;
}
/* Stesso trattamento del titolo d'apertura: la seconda parola in rosso e
   inclinata, cosi' ECONOMIA STUDIATA e OLD LIFE si leggono come parenti. */
.manifesto h2 em { color: var(--red); font-style: italic; }
.manifesto-guida {
  font-size: clamp(17px, 2.1vw, 20px); line-height: 1.72;
  color: var(--paper); margin: 0 0 20px;
}
.manifesto-guida em { color: var(--red-soft); font-style: normal; white-space: nowrap; }
.manifesto-corpo {
  font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0;
}

@media (max-width: 620px) {
  .manifesto-guida em { white-space: normal; }
}

@media (max-width: 620px) {
  .conta { display: none; }
  .hero { min-height: 82vh; }
  .carta { padding: 26px 24px 22px; }
}