/* ============================================================
   Sevenish — shared base styles
   Design tokens & visual values live inline on each element
   (source of truth from the handoff). This file only carries
   the global base, interactive transitions, the waitlist modal
   states, and light responsive fallbacks.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F8F4EC; color: #2F4734; font-family: 'Bricolage Grotesque', sans-serif; }
img { max-width: 100%; }
a { color: #2F4734; text-decoration: none; }
a:hover { color: #F26A4B; }
::selection { background: #F2D067; }

/* Smooth the JS-driven hover/focus state swaps */
a, button, input, summary, [data-hover], [data-focus] {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .2s ease, box-shadow .2s ease;
}
button { font-family: 'Bricolage Grotesque', sans-serif; }
details summary::-webkit-details-marker { color: rgba(47,71,52,0.4); }
section[id], header[id] { scroll-margin-top: 84px; }

/* ---------------- Waitlist modal ---------------- */
.wl-overlay { display: none; }
.wl-overlay.open { display: flex; }
.wl-success { display: none; }
.wl-overlay.submitted .wl-success { display: block; }
.wl-overlay.submitted .wl-form { display: none; }

/* ---------------- Article (blog detail) layout ---------------- */
.article-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; }
.article-rail-inner { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.article-body > p:first-of-type::first-letter {
  font-family: 'Instrument Serif', serif; font-size: 3.4em; line-height: 0.72;
  float: left; margin: 10px 12px 0 0; color: #F26A4B;
}
h2[id] { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; gap: 26px; max-width: 720px; }
  .article-rail-inner { position: static; }
  .article-toc { display: none; }
}

/* ---------------- Responsive fallbacks ----------------
   The designs are desktop-first (fixed grid columns). These
   collapse the multi-column bands gracefully on narrower
   screens without altering any of the desktop visual values. */
@media (max-width: 960px) {
  .r-hero { grid-template-columns: 1fr !important; }
  .r-2 { grid-template-columns: 1fr !important; }
  .r-3 { grid-template-columns: 1fr 1fr !important; }
  .r-5 { grid-template-columns: 1fr 1fr !important; }
  .nav-menu { display: none !important; }
  .nav-logo { height: 26px !important; }
}
@media (max-width: 620px) {
  .r-3, .r-5 { grid-template-columns: 1fr !important; }
  .pad-x { padding-left: 22px !important; padding-right: 22px !important; }
  .week-row { grid-template-columns: 96px 1fr !important; }
  .week-row .week-where { display: none !important; }
}