:root {
  color-scheme: light dark;
  --canvas: #f4f2eb;
  --card: #fffdf7;
  --text: #242722;
  --muted: #656b63;
  --green: #367a57;
  --button-green: #367a57;
  --button-text: #ffffff;
  --green-soft: #dcecdf;
  --coral: #e8856c;
  --gold: #e3b64f;
  --line: rgba(36, 39, 34, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
}

a { color: var(--green); }
a:hover { text-decoration-thickness: 2px; }

.shell {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}

.mark {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--green-soft), #fff7dc);
}

.mark::before, .mark::after {
  content: "";
  position: absolute;
  background: var(--green);
  border-radius: 100% 0 100% 0;
  transform: rotate(45deg);
}

.mark::before { width: 13px; height: 20px; left: 12px; top: 7px; }
.mark::after { width: 10px; height: 16px; left: 21px; top: 11px; transform: rotate(95deg); }

nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
nav a { color: var(--muted); font-weight: 600; text-decoration: none; }

main { padding: 44px 0 72px; }

.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 44px;
  min-height: 520px;
}

.hero h1 { font-size: clamp(1.75rem, 4.8vw, 3.1rem); line-height: 1.25; }
.eyebrow { color: var(--green); font-weight: 800; letter-spacing: .08em; }
h1 { margin: 10px 0 18px; font-size: clamp(2.5rem, 8vw, 5.2rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-top: 42px; line-height: 1.35; }
h3 { line-height: 1.45; }
p, li { color: var(--muted); }
.lead { max-width: 38rem; font-size: 1.12rem; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--button-green);
  color: var(--button-text);
  font-weight: 750;
  text-decoration: none;
}

.stack-art { position: relative; height: 300px; }
.tile {
  position: absolute;
  left: 50%;
  width: 190px;
  height: 68px;
  border-radius: 24px;
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 18px 28px rgba(43, 66, 49, .13);
}
.tile.one { bottom: 32px; background: var(--coral); }
.tile.two { bottom: 96px; background: var(--gold); transform: translateX(-50%) rotate(3deg); }
.tile.three { bottom: 160px; background: var(--green); }
.sprout { position: absolute; left: 50%; bottom: 218px; width: 7px; height: 60px; background: var(--green); border-radius: 9px; }
.sprout::before, .sprout::after { content: ""; position: absolute; width: 34px; height: 22px; background: var(--green); border-radius: 100% 0 100% 0; }
.sprout::before { left: -28px; top: 4px; transform: rotate(14deg); }
.sprout::after { left: 3px; top: -3px; transform: rotate(80deg); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.card { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.card h3 { margin-top: 0; }
.plain { max-width: 720px; }
.plain h1 { font-size: clamp(2.1rem, 7vw, 3.7rem); }
.date { color: var(--muted); }

label { display: block; margin-top: 18px; font-weight: 750; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
textarea { min-height: 180px; resize: vertical; }
button { border: 0; cursor: pointer; font: inherit; }

footer { padding: 28px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }

@media (max-width: 720px) {
  header { align-items: flex-start; flex-direction: column; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .stack-art { height: 300px; }
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121411;
    --card: #1d211d;
    --text: #f4f4ed;
    --muted: #b5bbb3;
    --green: #69b98b;
    --button-green: #367a57;
    --button-text: #ffffff;
    --green-soft: #293c2f;
    --line: rgba(255, 255, 255, .12);
  }
}