*, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: #f7f5ef; color: #17211b; line-height: 1.6;
         font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                      "Segoe UI", Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
  a { color: #17211b; text-decoration-color: #9ca99f; text-underline-offset: 3px; }
  a:hover { text-decoration-color: #17211b; }

  nav { border-bottom: 1px solid #ddd8cc; background: #f7f5ef; }
  nav .wrap { display: flex; align-items: baseline; gap: 1.75rem;
              padding-top: 1.1rem; padding-bottom: 1.1rem; }
  nav .brand { font-weight: 700; letter-spacing: .01em; text-decoration: none;
               font-size: 1.05rem; }
  nav a:not(.brand) { font-size: .9rem; color: #55605a; text-decoration: none; }
  nav a:not(.brand):hover, nav a[aria-current] { color: #17211b; }
  nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px;
                        text-decoration-color: #9ca99f; }
  nav .spacer { flex: 1; }
  nav a.signin { border: 1px solid #cfc9ba; border-radius: 3px;
                 padding: .3rem .7rem; }
  nav a.signin:hover { border-color: #9ca99f; color: #17211b; }

  header.hero { padding: 4.5rem 0 2.5rem; }
  h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500;
       font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08;
       letter-spacing: -.03em; margin: 0 0 1.1rem; max-width: 18ch; }
  .lede { font-size: 1.15rem; color: #3a4640; margin: 0; max-width: 40rem; }

  section { padding: 2.25rem 0; border-top: 1px solid #e6e1d5; }
  section:first-of-type { border-top: 0; }
  h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500;
       font-size: 1.5rem; letter-spacing: -.015em; margin: 0 0 .9rem; }
  h3 { font-size: .95rem; font-weight: 700; margin: 1.5rem 0 .35rem;
       letter-spacing: .005em; }
  p { margin: 0 0 1rem; max-width: 40rem; }
  p:last-child { margin-bottom: 0; }
  ul { margin: 0 0 1rem; padding-left: 1.15rem; max-width: 40rem; }
  li { margin-bottom: .5rem; }
  strong { font-weight: 650; }
  .quiet { color: #55605a; }

  .kicker { display: inline-block; margin-bottom: 1.6rem; padding: .35rem .7rem;
            border: 1px solid #9ca99f; border-radius: 999px; font-size: .7rem;
            font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            color: #3a4640; }

  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr;
           margin: 1.25rem 0 0; }
  @media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
  .card { border: 1px solid #ddd8cc; border-radius: 10px; padding: 1.1rem 1.15rem;
          background: #fffdf7; }
  .card h3 { margin-top: 0; }
  .card p { font-size: .93rem; color: #3a4640; margin-bottom: 0; }
  .card .state { display: block; margin-top: .7rem; font-size: .75rem;
                 font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .state.live { color: #3f6b4a; }
  .state.soon { color: #8a6a3a; }

  .note { border-left: 3px solid #9ca99f; padding: .1rem 0 .1rem 1rem;
          margin: 1.25rem 0; color: #3a4640; }

  footer { border-top: 1px solid #ddd8cc; margin-top: 3.5rem;
           padding: 1.75rem 0 3rem; font-size: .87rem; color: #55605a; }
  footer p { margin-bottom: .5rem; }