:root {
  --bg-warm: #EDE5D8;      /* lite mörkare än #F2E8DC, mer djup */
  --bg-light: #FAF7F3;     /* nästan samma, marginellt varmare */
  --accent-light: #D4B896; /* mörkare än #E8C9A0, bättre kontrast på ljus bg */
  --accent-green: #4A8070; /* mörkare än #5C9485, klarar WCAG AA på ljus bg */
  --text-dark: #1E1510;    /* lite mörkare än #2A1F1A, skarpare läsbarhet */
  --text-light: #FAF7F3;   /* matchar ny --bg-light */
  --text-link: #4A8070;    /* samma som accent-green, konsekvent */
  --shadow-light: rgba(30, 21, 16, 0.08);  /* något starkare, mer synlig */
  --shadow-dark: rgba(30, 21, 16, 0.45);
}
/* ─── RESET ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
  padding-top: 100px;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-light);
}

body {
  font-family: 'Quicksand', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "main" "footer";
  font-style: italic;
}

/* ─── Main (pictures.html) ─── */
main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  grid-area: main;
  display: flex;
  flex-direction: column;
}

/* ─── Main (index.html) fullbredd ─── */
main.index-main {
  max-width: 100%;
}

/* ─── Typografi ─── */
h1,
h2,
h3 {
  font-family: 'Playfair Display', serif;
  color: var(--text-dark);
}

header h1 {
  font-size: 2.2rem;
  margin: 0;
  font-style: italic;
}

h1 {
  font-size: 3.0rem;
  text-align: center;
  margin: 5px 0;
  letter-spacing: 0.05em;
  font-style: italic;
}

h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

p {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto 20px auto;
  line-height: 1.7;
}