:root {
  --bg: #f3f5ef;
  --bg-soft: #eef4ef;
  --surface: #ffffff;
  --surface-alt: #f7faf7;
  --ink: #19342d;
  --ink-2: #26483f;
  --muted: #61756e;
  --line: #d9e4dd;
  --accent: #2f8b67;
  --accent-dark: #236c50;
  --accent-soft: #dff2e9;
  --warm: #f1a15f;
  --warm-soft: #ffe4cf;
  --shadow: 0 24px 80px rgba(25, 52, 45, 0.10);
  --shadow-soft: 0 14px 40px rgba(25, 52, 45, 0.08);
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --section-space: 5.5rem;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(241, 161, 95, 0.12), transparent 24%),
    linear-gradient(180deg, #fbfdf9 0%, #f3f5ef 100%);
  color: var(--ink);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: 1em;
  letter-spacing: -0.01em;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.module--main {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.module,
.module--header,
.module--footer,
.module__content,
.module__inner {
  width: 100%;
}

.module--section {
  flex: 1 1 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); margin-bottom: 0.7em; line-height: 1.08; }
h3 { font-size: 1.3rem; line-height: 1.18; }
p  { font-size: 1rem; line-height: 1.75; margin-bottom: 0.75em; }

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

a:hover { color: var(--accent-dark); }

.container {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.module--section > .module__inner {
  padding: var(--section-space) 1rem;
}

.decoration,
.secondary-content { display: block; }

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .secondary-content { display: none; }
  .decoration { display: none; }
  .module--section > .module__inner { padding: 4rem 1rem; }
}