:root {
  --leaf: #1f5c45;
  --leaf-dark: #123d2d;
  --sage: #dce8dc;
  --cream: #f7f4ec;
  --terra: #d9784a;
  --ink: #1c2421;
  --muted: #66736d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
a { color: var(--leaf); }
.hero {
  background: linear-gradient(160deg, var(--leaf), var(--leaf-dark));
  color: #fff;
  text-align: center;
  padding: 48px 16px 40px;
}
.hero .icon { border-radius: 22%; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.hero h1 { margin: 16px 0 0; font-size: 40px; }
.hero .tag { margin: 0 0 12px; color: var(--sage); font-weight: 600; }
.hero p { max-width: 560px; margin: 0 auto; }
.hero .studio { display: block; max-width: 720px; margin: -36px auto 12px; padding: 12px 0; text-align: left; color: var(--sage); font-size: 15px; font-weight: 600; text-decoration: none; }
.hero .store { display: inline-block; margin-top: 18px; padding: 10px 20px; border: 1px solid rgba(255,255,255,.6); border-radius: 14px; color: #fff; font-weight: 700; text-decoration: none; }
.hero .store svg { width: 20px; height: 20px; vertical-align: -4px; }
.hero .store.off { opacity: .8; font-weight: 600; }
main, .page { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
h2 { color: var(--leaf-dark); margin-top: 32px; }
ul { padding-left: 20px; }
details {
  background: #fff;
  border-radius: 12px;
  margin: 10px 0;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; }
.contact { border-top: 2px solid var(--sage); }
footer {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 24px 16px 40px;
}
footer a { display: inline-block; padding: 12px 4px; }
.page h1 { color: var(--leaf-dark); margin-bottom: 4px; }
.updated { color: var(--muted); margin-top: 0; }