:root {
  --ink: #14201c;
  --ink-soft: #2a3b34;
  --mist: #eef2ef;
  --paper: #f7f9f7;
  --line: rgba(20, 32, 28, 0.12);
  --brass: #a67c52;
  --brass-deep: #8a643f;
  --pine: #1f4d3a;
  --pine-soft: #2f6b52;
  --shadow: 0 18px 50px rgba(20, 32, 28, 0.1);
  --radius: 18px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Sora", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(166, 124, 82, 0.18), transparent 60%),
    radial-gradient(700px 480px at 100% 0%, rgba(47, 107, 82, 0.16), transparent 55%),
    linear-gradient(180deg, #e7eee9 0%, var(--paper) 42%, #f3f6f3 100%);
  animation: atmosphere-drift 18s ease-in-out infinite alternate;
}

@keyframes atmosphere-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(247, 249, 247, 0.78);
  border-bottom: 1px solid transparent;
  z-index: 10;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--pine);
}

main {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding-bottom: 4rem;
}

.hero {
  min-height: calc(100svh - 4.5rem);
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: clamp(2rem, 6vh, 4rem) 0 3rem;
  position: relative;
}

.brand-mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--pine);
  animation: rise-in 0.8s ease both;
}

.hero h1 {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  animation: rise-in 0.9s ease 0.08s both;
}

.lede {
  margin: 0;
  max-width: 38ch;
  font-size: 1.05rem;
  color: var(--ink-soft);
  animation: rise-in 1s ease 0.16s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  animation: rise-in 1.05s ease 0.22s both;
}

.hero-visual {
  margin-top: 1.5rem;
  height: clamp(140px, 22vh, 220px);
  border-radius: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 32, 28, 0.05) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cpath fill='%231f4d3a' fill-opacity='0.14' d='M0 180 L80 150 L160 170 L260 110 L340 145 L420 90 L520 140 L620 70 L720 130 L820 95 L920 150 L1020 120 L1120 160 L1200 130 L1200 240 L0 240 Z'/%3E%3Cpath fill='%23a67c52' fill-opacity='0.22' d='M0 200 L100 175 L200 195 L300 155 L420 185 L540 145 L660 180 L780 150 L900 190 L1020 160 L1200 185 L1200 240 L0 240 Z'/%3E%3C/svg%3E")
      center bottom / cover no-repeat;
  animation: rise-in 1.1s ease 0.28s both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.8rem 1.25rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--pine);
  color: #f4f8f5;
}

.btn-primary:hover {
  background: var(--pine-soft);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--brass);
  color: var(--brass-deep);
}

.section {
  padding: 4.5rem 0 1rem;
  border-top: 1px solid var(--line);
}

.section-intro {
  margin-bottom: 1.75rem;
  max-width: 40rem;
}

.section-intro h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: -0.03em;
}

.section-intro p {
  margin: 0;
  color: var(--ink-soft);
}

.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.crew-card {
  padding: 1.15rem 1.2rem;
  border-top: 2px solid var(--brass);
  background: rgba(255, 255, 255, 0.55);
}

.crew-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}

.crew-card .role {
  margin: 0;
  color: var(--pine);
  font-size: 0.85rem;
  font-weight: 600;
}

.crew-card .job {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.crew-card .remove {
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brass-deep);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.inline-form input,
.party-board input,
.party-board textarea,
#day-notes {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}

.inline-form input:focus,
.party-board input:focus,
.party-board textarea:focus,
#day-notes:focus {
  outline: 2px solid rgba(31, 77, 58, 0.35);
  outline-offset: 1px;
}

.party-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.party-board label {
  display: grid;
  gap: 0.4rem;
}

.party-board label span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.party-board .span-2 {
  grid-column: 1 / -1;
}

.save-hint {
  margin: 0.75rem 0 0;
  color: var(--pine);
  font-size: 0.88rem;
  font-weight: 500;
}

.progress {
  margin-bottom: 1.25rem;
}

.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pine), var(--brass));
  width: 0%;
  transition: width 0.35s ease;
  box-shadow: var(--shadow);
}

.progress-label {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.task-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.task-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--pine);
}

.task-list li.done {
  border-left-color: var(--brass);
  opacity: 0.72;
}

.task-list li.done .task-label {
  text-decoration: line-through;
}

.task-list input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--pine);
}

.task-label {
  flex: 1;
  font-size: 0.98rem;
}

.task-list .remove {
  border: 0;
  background: none;
  color: var(--brass-deep);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.section-notes #day-notes {
  min-height: 180px;
  resize: vertical;
}

.site-footer {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .party-board {
    grid-template-columns: 1fr;
  }

  .inline-form {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 2.5rem;
  }
}