/* Reset + tokens */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size: clamp(15px, 1.1vw, 18px); }
body {
  margin:0;
  --tiamo-red:#c95649;
  --tiamo-butter:#c6e0a3da;
  --tiamo-olive:#6b7d2b;
  --ink:#222; --ink-soft:#555;
   
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.12);
  --space:clamp(.75rem,1.4vw,1.25rem);
  --maxw:72rem;
  background:var(--tiamo-butter); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--tiamo-olive); text-decoration-thickness:.08em; text-underline-offset:.15em; }
h2{ font-family:"Playfair Display","Libre Bodoni",Georgia,serif; line-height:1.2; margin:0 0 .5em; }
.container {
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(16px, 2vw, 24px);
}



/* Tight display heading for hero */
.display-tight{
  /* size stays from your existing rule; we only change spacing/behaviour */
  line-height: 1.05;           /* tighten lines */
  letter-spacing: -0.01em;     /* tiny tracking reduction */
  word-spacing: 0;             /* avoid extra gaps between words */
  margin-top: 0;
  margin-bottom: .35em;        /* reduce gap to paragraph under it */

  /* nicer line breaks for multi-line headlines */
  text-wrap: balance;          /* supported in modern browsers */
}

/* If you use a variable font (e.g., Noto Serif variable) uncomment: */
/*
.display-tight{
  font-variation-settings: "opsz" 48, "wght" 700;  // optical size + weight
  font-optical-sizing: auto;
  font-kerning: normal;
}
*/

/* Paragraph below the hero heading */
.hero p{
  line-height: 1.35;           /* a bit tighter than default */
  max-width: 48ch;             /* keep readable line length */
  margin-top: .5rem;
}
 
.hero{
  min-height:60vh;
  display:flex;
  align-items:center;     /* vertical center */
  justify-content:center; /* horizontal center */
  text-align:center;      /* center text inside */
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;     /* button centers with text */
  gap:1rem;
}
