/* Lawn Roster: the app's own look. Mown green, soft greys, Varela Round over Nunito Sans. */
.lawn {
  --bg: #f7f9f8; --surface: #fff; --surface-2: #f0f4f2; --fg: #0f1a14; --fg-muted: #4b5b53; --border: #e1e8e4; --border-strong: #c5d1cb;
  --primary: #15803d; --primary-soft: #dcfce7; --primary-soft-fg: #14532d; --night: #0c1410; --night-2: #13201a; --leaf: #4ade80;
  margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/1.6 "Nunito Sans", system-ui, sans-serif;
}
.lawn ::selection { background: var(--primary); color: #fff; }
.lawn main :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.lawn main .wrap { max-width: 1040px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.lawn main :is(h1, h2, h3) { font-family: "Varela Round", "Nunito Sans", sans-serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance; }

.lawn-hero { background: radial-gradient(70% 90% at 50% 0%, #173524 0%, var(--night) 70%); color: #e6efe9; padding-block: clamp(56px, 9vw, 120px); }
.lawn-hero .icon { width: 64px; height: 64px; }
.lawn-hero h1 { margin-top: 24px; font-size: clamp(48px, 6.4vw, 84px); color: #fff; }
.lawn-hero .lede { margin-top: 18px; max-width: 36ch; font-size: clamp(20px, 1.8vw, 24px); color: #cfe0d6; }
.lawn-hero .private { margin-top: 28px; display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px;
  background: rgb(74 222 128 / 0.12); color: #bbf7d0; font-size: 16px; }
.lawn-hero .private b { color: #fff; font-weight: 700; }

.week { padding-block: clamp(56px, 8vw, 96px); }
.week h2 { font-size: clamp(32px, 3.6vw, 46px); }
.week > .wrap > p { margin-top: 10px; color: var(--fg-muted); max-width: 56ch; }
.days { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.days li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
.days .when { font: 400 15px/1.3 "Varela Round", sans-serif; color: var(--primary-soft-fg); background: var(--primary-soft); border-radius: 999px; padding: 6px 12px; text-align: center; }
.days h3 { font-size: 22px; }
.days p { margin-top: 4px; color: var(--fg-muted); }

.lawn-notes { padding-bottom: clamp(56px, 8vw, 96px); }
.lawn-notes .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lawn-notes section { background: var(--surface-2); border-radius: 16px; padding: 24px; }
.lawn-notes h2 { font-size: 24px; }
.lawn-notes p { margin-top: 8px; color: var(--fg-muted); }

@media (max-width: 720px) {
  .days li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .days .when { justify-self: start; }
  .lawn-notes .wrap { grid-template-columns: minmax(0, 1fr); }
}