/* Studio Calm. Change the colors here. */
:root {
  --bg: #efe8dc;
  --paper: #f7f2e9;
  --ink: #2f2a24;
  --muted: #6c6256;
  --line: #d9cfbf;
  --olive: #5d6b4a;
  --clay: #b7795a;
  --clay-dark: #8f5a3f;
  --sky: #e8d6bf;
  --sun: #d9a37e;
  --hill-back: #a7ae8e;
  --hill-front: #7d8a65;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--clay-dark); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page { width: min(620px, 100% - 40px); margin: 0 auto; padding: 48px 0 32px; text-align: center; }

.brand { margin-bottom: 36px; }
.logo { margin: 0; font-size: 1.9rem; font-style: italic; letter-spacing: 0.02em; }
.sub { margin: 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; }

.arch {
  width: min(300px, 70vw);
  aspect-ratio: 300 / 380;
  margin: 0 auto 40px;
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px var(--line);
}
.arch svg { display: block; width: 100%; height: 100%; }
.sky { fill: var(--sky); }
.sun { fill: var(--sun); animation: rise 3s ease-out both; }
.hill-back { fill: var(--hill-back); }
.hill-front { fill: var(--hill-front); }
.stalk { stroke: var(--olive); stroke-width: 3; fill: none; }
.leaf { fill: var(--olive); }
.sprig { transform-origin: 150px 380px; animation: sway 7s ease-in-out infinite; }

.eyebrow { margin: 0 0 10px; color: var(--clay-dark); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 400; line-height: 1.15; }
.lead { margin: 0 auto 48px; max-width: 520px; color: var(--muted); }

h2 { margin: 0 0 18px; font-size: 1.5rem; font-weight: 400; font-style: italic; }

.classes { padding: 40px 0; border-top: 1px solid var(--line); }
.classes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin: 0; padding: 0; list-style: none; text-align: left; }
.classes li { display: flex; gap: 14px; }
.classes svg { flex: none; width: 24px; height: 24px; margin-top: 4px; color: var(--olive); }
.classes h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.classes p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.offer { margin: 8px 0 40px; padding: 36px clamp(20px, 5vw, 44px); background: var(--paper); border: 1px solid var(--line); border-radius: 200px 200px 16px 16px; }
.offer-tag { margin: 0 0 6px; color: var(--olive); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.offer h2 { margin-bottom: 10px; font-size: 2rem; }
.offer h2 span { color: var(--clay-dark); font-style: normal; }
.offer > p { margin: 0 0 22px; color: var(--muted); }

.signup { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.signup input { height: 50px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 16px var(--serif); text-align: center; }
.signup input:focus-visible { outline-offset: 0; border-color: var(--olive); }
.signup button { height: 50px; border: 0; border-radius: 999px; background: var(--olive); color: var(--paper); font: 600 16px ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.04em; cursor: pointer; transition: background-color 0.3s; }
.signup button:hover { background: #4b573b; }
.note { min-height: 1.6em; margin: 12px 0 0; color: var(--olive); font-style: italic; }

.foot { padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.foot p { margin: 0; }

@media (max-width: 520px) {
  .classes ul { grid-template-columns: 1fr; }
  .offer { border-radius: 120px 120px 16px 16px; }
}

@keyframes rise { from { transform: translateY(60px); opacity: 0.4; } }
@keyframes sway { 50% { transform: rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .sun, .sprig { animation: none; }
}