:root {
  color-scheme: light;
  --cream: #fffaf0;
  --paper: #fffdf7;
  --green: #365b45;
  --deep-green: #203d2d;
  --sage: #dbe8d8;
  --blue: #dceaf1;
  --brown: #6f4e37;
  --raspberry: #9d3153;
  --gold: #d4a85f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: #26372d;
  background:
    radial-gradient(circle at 12% 8%, rgb(219 232 216 / 85%) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 92% 18%, rgb(220 234 241 / 90%) 0 11rem, transparent 11.1rem),
    linear-gradient(160deg, var(--cream), #f2f5e8 55%, var(--blue));
  font: 1rem/1.5 system-ui, sans-serif;
}

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, 62rem); margin: 0 auto; padding: 1rem 0; border-bottom: 1px solid rgb(54 91 69 / 22%); }
.wordmark { color: var(--deep-green); font: 700 1.15rem/1.1 Georgia, serif; text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem .9rem; }
.nav-links a { color: var(--green); font-size: .925rem; font-weight: 700; text-underline-offset: .2rem; }
.shell { width: min(100% - 2rem, 56rem); margin: 0 auto; padding: clamp(2rem, 8vw, 4.5rem) 0; }
.stack { display: grid; gap: 1.25rem; }
.masthead { margin-bottom: 1.5rem; }
.eyebrow { color: var(--raspberry); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, h3, h4 { color: var(--green); font-family: Georgia, serif; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 10vw, 4.5rem); margin: .2rem 0; }
.card { padding: clamp(1.25rem, 5vw, 2rem); border: 1px solid #b7c9b4; border-radius: 1rem; background: rgb(255 253 247 / 94%); box-shadow: 0 .75rem 2rem rgb(54 91 69 / 12%); }
.stack { margin-bottom: 1rem; }
.member-card { display: grid; gap: .75rem; padding: 1.25rem 0; border-top: 1px solid #b7c9b4; }
.member-card:first-of-type { border-top: 0; }
.break-word { overflow-wrap: anywhere; }
.role { display: inline-block; padding: .15rem .6rem; border-radius: 999px; color: var(--cream); background: var(--brown); }
button { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid rgb(77 18 44 / 30%); border-radius: .6rem; color: white; background: var(--raspberry); box-shadow: 0 .2rem 0 rgb(77 18 44 / 22%); font: inherit; font-weight: 700; cursor: pointer; }
form { display: grid; gap: .65rem; }
label { margin-top: .35rem; color: var(--green); font-weight: 700; }
input, textarea, select { width: 100%; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid #819d85; border-radius: .5rem; background: white; color: inherit; font: inherit; }
textarea { min-height: 6rem; resize: vertical; }
.setup-list { display: grid; gap: .75rem; padding-left: 1.25rem; }
.setup-item { display: grid; gap: 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid #c9d8c6; border-radius: .75rem; background: white; }
.baker-image { width: 8rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--sage); }
.shared-pick { padding: 1rem; border-left: .3rem solid var(--gold); border-radius: .35rem; background: rgb(219 232 216 / 46%); }
.notice, .score { margin: .4rem 0; padding: .65rem .8rem; border-radius: .5rem; font-weight: 700; }
.notice { border-left: .3rem solid var(--gold); background: #fff4d9; color: #624616; }
.score { border-left: .3rem solid var(--green); background: var(--sage); color: var(--deep-green); }
.hint { color: #52675a; font-size: .925rem; }
.check { display: flex; align-items: center; gap: .5rem; }
.check input { width: auto; min-height: auto; }
.secondary { border-color: #9bb39d; color: var(--deep-green); background: var(--sage); box-shadow: 0 .2rem 0 rgb(54 91 69 / 18%); }
.form-error, .field-error { color: #7c1838; font-weight: 700; }
.field-error { margin: -.35rem 0 .2rem; font-size: .925rem; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: .2rem solid var(--brown); outline-offset: .2rem; }

@media (min-width: 44rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-item { padding: 1.5rem; }
}

@media (max-width: 28rem) {
  .site-nav { align-items: flex-start; }
  .nav-links { max-width: 10rem; }
  .shell { width: min(100% - 1.25rem, 56rem); }
  .card { border-radius: .8rem; }
  button { width: 100%; }
}