@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&display=swap');

/* ============================================
   TOKENS — Tra Ricerca e Tavola / editorial
============================================ */
:root{
  --paper:      #FDFBF7;   /* warm white paper */
  --card:       #FFFDF9;   /* barely lifted surface */
  --ink:        #17311E;   /* deep forest green */
  --ink-soft:   #526052;   /* muted botanical grey-green */
  --line:       #C9C1B4;   /* warm editorial hairline */
  --green:      #173D25;   /* primary brand green */
  --green-soft: #D7E0D2;   /* pale sage */
  --rust:       #C24F2F;   /* terracotta brick */
  --ochre:      #B58A55;   /* restrained warm accent */

  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --shadow-soft: 0 12px 30px rgba(34, 47, 37, 0.07);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:1px solid var(--rust);
  outline-offset:4px;
}
.wrap{ width:min(1180px, 90%); margin:0 auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ============================================
   HEADER
============================================ */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(253,251,247,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(23,49,30,0.16);
}
nav{
  height:82px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  line-height:1;
  letter-spacing:-0.03em;
}
.brand span{
  color:var(--rust);
  font-style:italic;
  font-weight:500;
}
.nav-links{
  display:flex; gap:34px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav-links a{ position:relative; padding-bottom:5px; }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--rust);
  transition:right .25s ease;
}
.nav-links a:hover::after{ right:0; }
.nav-toggle{ display:none; }

/* ============================================
   HERO
============================================ */
.hero{ padding:92px 0 112px; }
.hero-grid{
  display:grid; grid-template-columns:1.12fr 0.88fr;
  gap:72px; align-items:center;
}
.kicker{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  color:var(--rust);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:20px;
}
h1{
  font-family:var(--serif);
  font-weight:500;
  font-style:normal;
  font-size:clamp(52px, 6vw, 82px);
  line-height:1.02;
  letter-spacing:-0.02em;
  max-width:10.8em;
  margin-bottom:28px;
}
h1 em, h1 i{ color:var(--rust); font-style:italic; }
.hero-lede{
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  max-width:34em;
  margin-bottom:38px;
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 21px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-solid:hover{ background:var(--rust); border-color:var(--rust); }
.btn-line:hover{ background:var(--ink); color:var(--paper); }

.specimen{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}
.specimen svg,
.specimen img{
  width:100%; height:auto;
  filter:drop-shadow(0 16px 24px rgba(27,43,29,.08));
}
.specimen-caption{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; justify-content:space-between;
}

/* ============================================
   SECTION SHELL
============================================ */
section{ padding:102px 0; }
.section-head{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  margin-bottom:58px;
  align-items:end;
}
h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(40px, 4.4vw, 58px);
  line-height:1;
  letter-spacing:-0.015em;
}
.section-head p{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
  max-width:34em;
}

/* ============================================
   JOURNAL / BLOG
============================================ */
.journal{ border-top:1px solid var(--line); }
.journal-grid{
  display:grid; grid-template-columns:1.28fr 1fr;
  gap:40px;
}
.post{
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.journal-grid > .post:first-child{
  grid-row:1 / span 3;
  padding-top:0;
  padding-right:36px;
  border-right:1px solid var(--line);
  border-bottom:none;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.tag i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
.tag.ricerca i, .tag.packaging i{ background:var(--green); }
.tag.ricerca, .tag.packaging{ color:var(--green); }
.tag.sicurezza i{ background:var(--rust); }
.tag.sicurezza{ color:var(--rust); }
.tag.azienda i, .tag.curiosita i{ background:var(--ochre); }
.tag.azienda, .tag.curiosita{ color:var(--ochre); }

.post h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:29px;
  line-height:1.12;
  letter-spacing:-0.012em;
  margin-bottom:12px;
  max-width:20em;
}
.journal-grid > .post:first-child h3{
  font-size:42px;
  max-width:12em;
}
.post p{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.72;
  max-width:34em;
}
.post .read{
  display:inline-block;
  margin-top:16px;
  padding-bottom:3px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--rust);
}

/* ============================================
   CONSULENZA — editorial dark section
============================================ */
.consulting{
  background:var(--ink);
  color:var(--paper);
}
.consulting .section-head p{ color:#D7DED5; }
.consulting .kicker{ color:#D8896F; }
.scenario{
  display:grid; grid-template-columns:4px 1fr;
  gap:24px;
  padding:28px 0;
  border-top:1px solid rgba(253,251,247,.18);
}
.scenario:last-of-type{ border-bottom:1px solid rgba(253,251,247,.18); }
.scenario i{ background:var(--rust); border-radius:0; }
.scenario p{ font-size:18px; max-width:40em; }
.consulting-close{
  margin-top:48px;
  padding-top:10px;
  display:grid; grid-template-columns:1fr auto;
  gap:44px; align-items:center;
}
.consulting-close p{ color:#D7DED5; font-size:16px; max-width:36em; }

/* ============================================
   CHI SONO
============================================ */
.about-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:72px; }
.about-text p{
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.75;
  margin-bottom:19px;
  max-width:36em;
}
.about-text p strong{ color:var(--ink); font-weight:600; }
.facts{ display:flex; flex-direction:column; gap:0; }
.fact{
  display:grid; grid-template-columns:14px 1fr;
  gap:14px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.facts .fact:last-child{ border-bottom:1px solid var(--line); }
.fact i{
  width:6px; height:6px;
  margin-top:8px;
  border-radius:50%;
  background:var(--rust);
  display:block;
}
.fact strong{
  display:block;
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  margin-bottom:3px;
}
.fact span{ color:var(--ink-soft); font-size:13px; }

/* ============================================
   CONTATTI
============================================ */
.contact{
  background:#F7F1E9;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:68px; }
.contact h2{ margin-bottom:22px; }
.contact-lede{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
  max-width:30em;
  margin-bottom:26px;
}
.contact-mail{
  font-family:var(--serif);
  font-style:italic;
  font-size:23px;
  color:var(--rust);
}

form{ display:flex; flex-direction:column; gap:17px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
input, textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:11px 2px 12px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
}
input:focus, textarea:focus{ border-bottom-color:var(--rust); outline:none; }
textarea{ resize:vertical; min-height:120px; }
form .btn{ align-self:flex-start; cursor:pointer; }

/* ============================================
   FOOTER
============================================ */
footer{ padding:38px 0; }
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  color:var(--ink-soft);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ============================================
   MOBILE
============================================ */
@media (max-width:880px){
  .nav-links{ display:none; }
  .hero{ padding:64px 0 78px; }
  .hero-grid, .about-grid, .contact-grid, .section-head{ grid-template-columns:1fr; }
  .journal-grid{ grid-template-columns:1fr; }
  .journal-grid > .post:first-child{
    grid-row:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding-right:0;
  }
  .consulting-close{ grid-template-columns:1fr; gap:22px; }
  .form-row{ grid-template-columns:1fr; }
  section{ padding:70px 0; }
  h1{ font-size:clamp(44px, 14vw, 64px); line-height:1.03; }
}

/* ============================================
   ARTICLE PAGE
============================================ */
.article-hero{
  padding:72px 0 42px;
  border-bottom:1px solid var(--line);
}
.article-hero h1{ max-width:13.5em; }
.article-meta{
  display:flex; gap:18px;
  color:var(--ink-soft);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-top:20px;
}
.article-body{ padding:64px 0; }
.article-body .wrap{ max-width:720px; }
.article-body p{
  margin-bottom:22px;
  font-size:17px;
  line-height:1.78;
  color:var(--ink);
}
.article-body p.lede{
  font-family:var(--serif);
  font-size:25px;
  line-height:1.45;
  color:var(--ink-soft);
}
.article-body h2{ margin:46px 0 18px; }
.back-link{
  display:inline-block;
  margin-bottom:26px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
  border-bottom:1px solid var(--rust);
}