/* ===== Variabili (8 colonne) ===== */
:root{
  --bg:#E1E2D8;
  --text:#56453F;        
  --cols:8;
  --gutter:20px;
  --pad-x:40px;
  --maxw:1440px;
}

/* ===== Reset minimo ===== */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== Font locali ===== */
@font-face{
  font-family: "Aujournuit";
  src:
    local("Aujournuit Condensed"),
    local("Aujournuit-Condensed"),
    url("fonts/Aujournuit-Condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Ronzino";
  src:
    local("Ronzino"),
    url("fonts/Ronzino.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Base ===== */
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Ronzino", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
em{font-style:italic}

.container{
  width:100%;                 /* evita shrink-to-fit */
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:0;
}

/* ===== Navbar ===== */
header{padding-block:18px 24px}
nav{display:flex; gap:32px}
nav a{font-weight:600; letter-spacing:.02em}
nav a.active{font-style:italic}

/* ===== Blocchi top ===== */
.intro{margin-block:12px 64px}
.intro p{
  grid-column:span 2;
  margin:0;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.55;
}

/* ===== Titolo ===== */
.title-wrap{
  display:grid;
  place-items:center;
  padding-block:clamp(40px, 8vw, 120px);
  text-align:center;
}
.title{
  font-family: "Aujournuit","Ronzino",Georgia,serif;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 80px);
  line-height: 1.2;
  letter-spacing: .005em;
  margin: 0;
}

/* ===== Blocchi bottom ===== */
.bottom{margin-block:64px 80px}
.bottom p{
  grid-column:span 2;
  margin:0;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.55;
}

/* ===== Responsività ===== */
@media (max-width:1100px){
  .intro p, .bottom p{grid-column:span 4}
}
@media (max-width:700px){
  :root{--cols:4}
  .intro p, .bottom p{grid-column:span 4}
  nav{gap:16px; flex-wrap:wrap}
  header{padding-block:14px 20px}
  .title{font-size:clamp(36px, 10vw, 72px)}
}

/* Navbar: link attivo = corsivo + sottolineato (come nel mockup) */
nav a.active {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== Contacts page ===== */
.contacts-page a { text-decoration: underline; }
.contacts-page nav a { text-decoration: none; } /* navbar resta pulita */
nav a.active { font-style: italic; }

.contacts-hero {
  margin-block: 16px 180px;
}

.contacts-title {
  font-family: "Aujournuit","Ronzino",Georgia,serif;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 80px);
  line-height: 1.2;
  letter-spacing: .005em;
  margin: 0;
}
.contacts-grid { margin-block: 8px 80px; }
.contacts-grid .left  { grid-column: span 6; }
.contacts-grid .right { grid-column: span 2; }

.contacts-grid p {
  margin: 0 0 18px 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1100px){
  .contacts-grid .left,
  .contacts-grid .right { grid-column: 1 / -1; }
}

/* --- Fix underline solo per contacts --- */
.contacts-page .contacts-grid a,
.contacts-page .contacts-hero a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Navbar in contacts: niente underline (tranne l'attivo) */
.contacts-page header nav a { text-decoration: none !important; }
.contacts-page header nav a.active {
  font-style: italic;
  text-decoration: underline !important;
}

/* ===== Projects page ===== */
.projects-page .section-label{
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: normal;
  color: var(--text);

  margin-block: 36px 24px;   /* più spazio sopra e soprattutto sotto */
  padding-top: 10px;

  border-top: 1px solid var(--text);
}


.projects-page .pub-grid{
  row-gap: 18px;
}

.projects-page .pub{
  grid-column: span 2;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
}

.projects-page .pub a{
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}

.projects-page .notice{
  margin: 0 0 24px 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: inherit;
  line-height: inherit;
}

@media (max-width:1100px){
  .projects-page .pub{ grid-column: span 4; }
}
@media (max-width:700px){
  .projects-page .pub{ grid-column: 1 / -1; }
}