/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Newsreader-400.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Newsreader-500.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Newsreader-600.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Newsreader-700.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Newsreader-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Newsreader-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/InstrumentSans-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/InstrumentSans-500.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/InstrumentSans-600.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/InstrumentSans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/DMMono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/DMMono-500.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --ivory: #F6F2E9;
  --ink: #121512;
  --deep-green: #0F2E26;
  --gold: #B58B3C;
  --text-secondary: #5A5E58;
  --hairline: #D9D3C4;

  --page-bg: var(--ivory);
  --chapter-bg: var(--ivory);
  --chapter-text: var(--ink);
  --chapter-secondary: var(--text-secondary);
  --chapter-hairline: var(--hairline);
  --card-shadow: 0 1px 2px rgba(18, 21, 18, 0.06);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-ui: 'Instrument Sans', -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 6px;
}

:root[data-theme="dark"] {
  --page-bg: var(--ink);
  --chapter-bg: var(--ink);
  --chapter-text: var(--ivory);
  --chapter-secondary: #A7ACA4;
  --chapter-hairline: #2B332E;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  font-family: var(--font-ui);
  color: var(--chapter-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 200ms ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: 620px; margin: 0 auto; }

/* ---------- Masthead ---------- */
.masthead {
  background: var(--deep-green);
  padding: 18px 16px;
}

.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
}

.masthead__logo-plate {
  background: var(--ivory);
  border-radius: var(--radius);
  padding: 6px 10px;
  display: flex;
  align-items: center;
}

.masthead__logo-plate img { height: 28px; width: auto; display: block; }

.masthead__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
  text-align: right;
  opacity: 0.85;
}

.stripe {
  height: 3px;
  display: flex;
}
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: #0F2E26; }
.stripe span:nth-child(2) { background: #F6F2E9; }
.stripe span:nth-child(3) { background: #B5433C; }

/* Sticky slim bar */
.stickybar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--deep-green);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 220ms var(--ease-out-expo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar img { height: 20px; width: auto; }

/* ---------- Chapter shell ---------- */
.chapter {
  background: var(--chapter-bg);
  color: var(--chapter-text);
  padding: 56px 16px 8px;
  transition: background 200ms ease, color 200ms ease;
}
.chapter--dark {
  background: var(--deep-green);
  color: var(--ivory);
}

.chapter__head {
  max-width: 620px;
  margin: 0 auto 40px;
}
.chapter__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.chapter__number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.chapter__rule {
  flex: 1;
  height: 1px;
  background: var(--chapter-hairline);
}
.chapter--dark .chapter__rule { background: rgba(246, 242, 233, 0.18); }

.chapter__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  margin: 0;
}
.chapter__strap {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--chapter-secondary);
  margin: 10px 0 0;
  max-width: 48ch;
}
.chapter--dark .chapter__strap { color: #C9CFC7; }

.chapter__body { max-width: 620px; margin: 0 auto; }

/* ---------- Reveal (fade-up) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms var(--ease-out-expo), transform 650ms var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Press state / image zoom ---------- */
.tap-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap-card:active { transform: scale(0.99); }
.tap-card__media { overflow: hidden; background: var(--deep-green); }
.tap-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transition: transform 400ms var(--ease-out-expo), opacity 400ms ease;
  opacity: 0;
}
.tap-card__media img.is-loaded { opacity: 1; }
.tap-card:active .tap-card__media img { transform: scale(1.03); }

/* ======================================================
   Chapter 1 — In evidenza
   ====================================================== */
.lead-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-green);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.lead-card { margin-bottom: 48px; }
.lead-card__media { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.lead-card__panel { padding-top: 18px; }
.lead-card__headline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.22;
  margin: 0 0 12px;
}
.lead-card__preview {
  font-size: 16px;
  line-height: 1.6;
  color: var(--chapter-secondary);
  margin: 0 0 12px;
  max-width: 60ch;
}
.lead-card__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gold);
}

.list-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--chapter-hairline);
}
.list-row:last-child { border-bottom: none; }
.list-row__media {
  flex: none;
  width: 92px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}
.list-row__body { flex: 1; min-width: 0; }
.list-row__headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.32;
  margin: 0;
}

/* ---------- Figures strip ---------- */
.figures {
  background: var(--deep-green);
  color: var(--ivory);
  padding: 48px 16px;
}
.figures__wrap { max-width: 620px; margin: 0 auto; }
.figures__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 24px;
}
.figures__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}
.figure-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.figure-item__stat {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold);
  line-height: 1.15;
  margin-bottom: 6px;
}
.figure-item__label {
  font-size: 13.5px;
  color: #C9CFC7;
  line-height: 1.4;
}

/* ======================================================
   Chapter 2 — Ricerca e salute (dark, tall cards)
   ====================================================== */
.tall-card { margin-bottom: 64px; }
.tall-card:last-child { margin-bottom: 0; }
.tall-card__media { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.tall-card__panel { padding-top: 20px; }
.tall-card__headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.26;
  margin: 0 0 12px;
}
.tall-card__preview {
  font-size: 16px;
  line-height: 1.6;
  color: #C9CFC7;
  margin: 0 0 12px;
}
.tall-card__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gold);
}

/* ======================================================
   Chapter 3 — Imprese e industria (alternating)
   ====================================================== */
.alt-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.alt-row:last-child { margin-bottom: 0; }
.alt-row--right .alt-row__media { order: 0; }
.alt-row__media { aspect-ratio: 4 / 3; border-radius: var(--radius); position: relative; }
.alt-row__index {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 34px;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.alt-row--right .alt-row__index { left: auto; right: 10px; }
.alt-row__headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  margin: 0 0 10px;
}
.alt-row__preview {
  font-size: 15px;
  line-height: 1.55;
  color: var(--chapter-secondary);
  margin: 0;
}

@media (min-width: 560px) {
  .alt-row { flex-direction: row; align-items: center; }
  .alt-row__media { flex: 0 0 46%; }
  .alt-row__body { flex: 1; }
  .alt-row--right { flex-direction: row-reverse; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--deep-green);
  color: #C9CFC7;
  padding: 56px 16px 40px;
  text-align: center;
}
.site-footer__wrap { max-width: 560px; margin: 0 auto; }
.site-footer__logo { height: 26px; width: auto; margin: 0 auto 18px; opacity: 0.95; }
.site-footer__copy {
  font-size: 13.5px;
  color: var(--ivory);
  margin: 0 0 6px;
}
.site-footer__rights {
  font-size: 12.5px;
  color: #9FA69D;
  margin: 0 0 24px;
  line-height: 1.5;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  font-size: 13px;
  margin-bottom: 20px;
}
.site-footer__links a, .site-footer__links button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gold); font-family: var(--font-ui); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.site-footer__disclaimer {
  font-size: 11.5px;
  color: #8B9289;
  line-height: 1.5;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--deep-green);
  color: var(--ivory);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out-expo);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner__wrap { max-width: 560px; margin: 0 auto; }
.cookie-banner__text {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: #E7E3D6;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.cookie-banner__btn {
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--ivory);
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
.cookie-banner__btn--primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep-green);
}
.cookie-banner__policy-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Full-screen overlays (reader + policy) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--ivory);
  color: var(--ink);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out-expo);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
:root[data-theme="dark"] .overlay { background: var(--ink); color: var(--ivory); }
.overlay.is-open { transform: translateY(0); }

.overlay__progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--gold);
  width: 0%;
  z-index: 101;
  transition: width 80ms linear;
}

.overlay__close {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 102;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(18, 21, 18, 0.65);
  color: var(--ivory);
  border: none;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.reader__hero { width: 100%; aspect-ratio: 16 / 10; background: var(--deep-green); overflow: hidden; }
.reader__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.reader__body { max-width: 620px; margin: 0 auto; padding: 28px 20px 72px; }
.reader__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.26;
  margin: 0 0 12px;
}
.reader__meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gold);
  margin: 0 0 24px;
}
.reader__text { font-size: 17px; line-height: 1.75; max-width: 64ch; }
.reader__text p { margin: 0 0 20px; }

.policy__body { max-width: 560px; margin: 0 auto; padding: 72px 20px 60px; }
.policy__title { font-family: var(--font-serif); font-weight: 700; font-size: 26px; margin: 0 0 18px; }
.policy__text { font-size: 15.5px; line-height: 1.7; color: var(--chapter-secondary); margin: 0 0 14px; }
:root[data-theme="dark"] .policy__text { color: #C9CFC7; }
.policy__email { color: var(--gold); }

body.scroll-locked { overflow: hidden; }