/* =========================================================================
   /join/ — "Support the Guild" (redesigned 2026-10-11)
   Loaded only by join/index.njk via `pageCss:`. Every class is prefixed
   sp- so nothing here can reach the shared homepage / guild-page vocabulary.

   Layout: left-aligned hero with a "free for everyone" index card, then the
   three ways to pay as seed packets laid on a kraft table (face, perforation,
   back), then where the money goes, the FAQ and a free Window Box close.
   Colors are tokens only; tints are color-mix() of tokens, never raw hex.
   ========================================================================= */

.sp {
  --sp-paper: color-mix(in srgb, var(--cream) 55%, white);
  --sp-rule: var(--color-rule);
  --sp-shadow: color-mix(in srgb, var(--walnut) 18%, transparent);
  --sp-gutter: clamp(16px, 4vw, 48px);
  color: var(--walnut);
}
.sp-wrap {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

/* ---- Hero ------------------------------------------------------------- */
.sp-hero { padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 80px); }
.sp-hero .sp-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 860px) { .sp-hero .sp-wrap { grid-template-columns: 1fr; } }

.sp-mark { display: block; width: 96px; height: auto; color: var(--walnut); margin-bottom: 28px; }
.sp-mark svg { display: block; width: 100%; height: auto; }

.sp-hero h1 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: clamp(2.5rem, 5.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  text-wrap: balance;
  color: var(--walnut);
}
.sp-hero h1 span { display: block; color: var(--forest-pine); }

.sp-lede {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  max-width: 34em;
  margin: 0 0 28px;
}
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 36px; }

.sp-btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-sans-emphasis);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  border-radius: 100px;
  padding: 14px 26px;
  background: var(--forest-pine);
  color: var(--cream);
  transition: filter var(--transition-default);
}
.sp-btn:hover { filter: brightness(1.15); color: var(--cream); }
.sp-btn:focus-visible,
.sp a:focus-visible,
.sp summary:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

.sp-textlink {
  font-weight: 500;
  color: var(--forest-pine);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.sp-llc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--aged-ink);
  max-width: 36em;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--sp-rule);
}
.sp-llc strong { color: var(--walnut); font-weight: var(--font-weight-sans-emphasis); }

/* Free-for-everyone index card */
.sp-card {
  background: var(--sp-paper);
  border: 1px solid var(--sp-rule);
  border-top: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 28px 28px 22px;
  box-shadow: 0 18px 40px -24px var(--sp-shadow);
  transform: rotate(1.2deg);
}
@media (max-width: 860px) { .sp-card { transform: none; } }
.sp-card h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--terracotta);
}
.sp-card p { margin: 0 0 14px; font-size: 0.95rem; color: var(--aged-ink); }
.sp-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.3;
  border-top: 1px solid color-mix(in srgb, var(--forest-pine) 22%, transparent);
}
.sp-card li { padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--forest-pine) 22%, transparent); }
.sp-card li a { text-decoration: none; color: var(--walnut); }
.sp-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Seed packets ----------------------------------------------------- */
.sp-table { background: var(--kraft); padding-block: clamp(56px, 8vw, 104px); }
.sp-table__head { max-width: 40em; margin-bottom: clamp(36px, 5vw, 56px); }
.sp-table__head h2,
.sp-goes h2,
.sp-faq h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
  color: var(--walnut);
}
.sp-table__head p { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; color: var(--aged-ink); }

.sp-packets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
@media (max-width: 940px) { .sp-packets { grid-template-columns: minmax(0, 520px); justify-content: center; } }

.sp-packet {
  --face: var(--terracotta);
  --on: var(--cream);
  --sprig: color-mix(in srgb, var(--cream) 85%, var(--terracotta));
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 16px 22px var(--sp-shadow));
  transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
}
.sp-packet:nth-child(1) { transform: rotate(-1.4deg); }
.sp-packet:nth-child(2) { transform: translateY(-14px) rotate(.6deg); }
.sp-packet:nth-child(3) { transform: rotate(1.5deg); }
.sp-packet:hover,
.sp-packet:focus-within { transform: translateY(-18px) rotate(0); }
@media (max-width: 940px) { .sp-packet:nth-child(n) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-packet { transition: none; } }

.sp-packet--founding { --face: var(--forest-pine); --sprig: color-mix(in srgb, var(--cream) 80%, var(--forest-pine)); }
.sp-packet--once { --face: var(--walnut); --sprig: color-mix(in srgb, var(--cream) 75%, var(--terracotta)); }

.sp-face {
  position: relative;
  background: var(--face);
  color: var(--on);
  padding: 30px 26px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 4px 12px;
  min-height: 268px;
}
/* Crimped top edge of the packet */
.sp-face::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: var(--face);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.sp-maker {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--on) 35%, transparent);
  opacity: .9;
}
.sp-name {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: clamp(1.9rem, 2.6vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--on);
}
/* Pressed specimen (images/brand/specimens/, 2026-10-11; replaced the line-art mask). */
.sp-sprig { grid-row: 2 / 5; grid-column: 2; width: 112px; height: 200px; object-fit: contain; align-self: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.sp-price {
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: 1.6rem;
  line-height: 1.1;
}
.sp-price small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.35;
  margin-top: 6px;
  opacity: .92;
}

.sp-perf { position: relative; height: 0; border-top: 2px dashed color-mix(in srgb, var(--walnut) 30%, transparent); }
.sp-perf::before,
.sp-perf::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kraft);
}
.sp-perf::before { left: -8px; }
.sp-perf::after { right: -8px; }

.sp-back { background: var(--sp-paper); padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.sp-back h4 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-sans-emphasis);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  margin: 0 0 12px;
}
.sp-back ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 0.97rem; line-height: 1.5; }
.sp-back li { padding-left: 18px; position: relative; }
.sp-back li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--face);
}
.sp-go { margin-top: auto; display: grid; gap: 10px; }
.sp-go .sp-btn { width: 100%; background: var(--face); }
.sp-alt { font-size: 0.9rem; text-align: center; color: var(--aged-ink); margin: 0; }
.sp-alt a { color: var(--forest-pine); font-weight: var(--font-weight-sans-emphasis); text-underline-offset: 3px; }
.sp-fine { margin: clamp(36px, 5vw, 52px) auto 0; max-width: 44em; text-align: center; font-size: 0.9rem; color: var(--aged-ink); }

/* ---- Where the money goes --------------------------------------------- */
.sp-goes { padding-block: clamp(56px, 8vw, 104px); }
.sp-goes .sp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 6vw, 88px); }
@media (max-width: 860px) { .sp-goes .sp-wrap { grid-template-columns: 1fr; } }
.sp-ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--walnut); }
.sp-ledger li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sp-rule);
}
@media (max-width: 520px) { .sp-ledger li { grid-template-columns: 1fr; } }
.sp-ledger b { font-family: var(--font-serif); font-weight: var(--font-weight-serif-heading); font-size: 1.1rem; line-height: 1.35; }
.sp-ledger span { color: var(--aged-ink); }

/* ---- FAQ ---------------------------------------------------------------- */
.sp-faq { background: var(--sp-paper); border-top: 1px solid var(--sp-rule); padding-block: clamp(56px, 8vw, 96px); }
.sp-faq .sp-wrap { max-width: 820px; }
.sp-faq h2 { margin-bottom: 28px; }
.sp-faq details { border-bottom: 1px solid var(--sp-rule); }
.sp-faq details:first-of-type { border-top: 1px solid var(--sp-rule); }
.sp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: 1.15rem;
  line-height: 1.4;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--forest-pine);
  border-bottom: 2px solid var(--forest-pine);
  transform: rotate(45deg);
  transition: transform var(--transition-default);
}
.sp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .sp-faq summary::after { transition: none; } }
.sp-faq details p { margin: 0 0 20px; max-width: 62ch; }
.sp-faq details a { color: var(--forest-pine); text-underline-offset: 3px; }

/* ---- Close ---------------------------------------------------------------- */
.sp-close { padding-block: clamp(48px, 7vw, 80px); }
.sp-close .sp-wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.sp-close p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; max-width: 32em; }