/* =========================================================================
   /founding/ — Founding Membership (redesigned 2026-10-11)
   Loaded only by founding/index.njk via `pageCss:`. Every class is prefixed
   fd- so nothing reaches the shared homepage / guild-page / marketing sets.

   Layout: walnut hero with the brass plate (barn mark blind-embossed, bleeding
   off the edges, one sheen on load), the five steps from checkout to the
   Guild, six nursery hang tags with pressed specimens on forest green, the
   founder's letter, the terms on walnut, FAQ, and a close back to /join/.

   Brand colors come from tokens.css. The brass plate is a material, not a
   brand color, so its tones are declared once below as --fd-brass-* custom
   properties and used nowhere else on the site.
   ========================================================================= */

.fd {
  --fd-paper: color-mix(in srgb, var(--cream) 55%, white);
  --fd-rule: var(--color-rule);
  --fd-gutter: clamp(16px, 4vw, 48px);
  --fd-on-dark-muted: color-mix(in srgb, var(--cream) 78%, transparent);
  --fd-on-dark-rule: color-mix(in srgb, var(--cream) 22%, transparent);
  /* Brass plate material */
  --fd-brass-1: #C9A866;
  --fd-brass-2: #E6CF95;
  --fd-brass-3: #B98F4A;
  --fd-brass-4: #DCC07F;
  --fd-brass-5: #A9823F;
  --fd-brass-ink: #4A3616;
  --fd-brass-hi: rgba(255, 249, 228, .7);
  --fd-brass-lo: rgba(84, 56, 16, .38);
  --fd-twine: #D9C29B;
  color: var(--walnut);
}
.fd-wrap { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--fd-gutter); }

.fd h1, .fd h2, .fd h3 { font-family: var(--font-serif); font-weight: var(--font-weight-serif-heading); text-wrap: balance; }
.fd h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--walnut); }

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

/* ---- Hero ---------------------------------------------------------------- */
.fd-hero { background: var(--walnut); color: var(--cream); padding-block: clamp(56px, 8vw, 112px); }
.fd-hero .fd-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (max-width: 880px) { .fd-hero .fd-wrap { grid-template-columns: 1fr; } }
.fd .fd-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -0.03em; margin: 0 0 26px; color: var(--cream); }
.fd-lede { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--fd-on-dark-muted); max-width: 32em; margin: 0 0 32px; }
.fd-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-bottom: 30px; }
.fd-actions .fd-link { color: var(--cream); text-underline-offset: 4px; font-weight: 500; }
.fd-llc { font-size: .9rem; line-height: 1.55; color: var(--fd-on-dark-muted); max-width: 34em; margin: 0; padding-top: 16px; border-top: 1px solid var(--fd-on-dark-rule); }

/* Brass plate */
.fd-plate {
  position: relative; overflow: hidden; aspect-ratio: 7 / 4; max-width: 460px; width: 100%; justify-self: center; border-radius: 6px;
  background: linear-gradient(135deg, var(--fd-brass-1) 0%, var(--fd-brass-2) 28%, var(--fd-brass-3) 55%, var(--fd-brass-4) 78%, var(--fd-brass-5) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 225, .45), inset 0 0 0 7px rgba(90, 62, 20, .22), 0 30px 60px -20px rgba(0, 0, 0, .6);
  transform: rotate(-2deg);
}
.fd-plate__emboss { position: absolute; width: 110%; left: 12%; top: 3%; height: auto; pointer-events: none; }
.fd-plate__emboss use { fill: none; stroke-width: 3.2; stroke-linejoin: round; }
.fd-plate__emboss .hi { stroke: var(--fd-brass-hi); }
.fd-plate__emboss .lo { stroke: var(--fd-brass-lo); }
.fd-plate__emboss .face { stroke: rgba(150, 112, 48, .18); stroke-width: 1.5; }
.fd-plate__screw {
  position: absolute; width: 12px; height: 12px; border-radius: 50%; top: 50%; margin-top: -6px; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #F3E2B0, #7A5A25 70%);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .4), 0 1px 1px rgba(255, 240, 200, .5);
}
.fd-plate__screw--l { left: 16px; }
.fd-plate__screw--r { right: 16px; }
.fd-plate__label {
  position: absolute; left: 44px; top: 26px; z-index: 2;
  font-family: var(--font-sans); font-weight: var(--font-weight-sans-emphasis); font-size: 12px; line-height: 1;
  letter-spacing: .32em; text-transform: uppercase; color: var(--fd-brass-ink); text-shadow: 0 1px 0 rgba(255, 245, 215, .55);
}
.fd-plate::after {
  content: ""; position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 250, 230, .55) 50%, transparent 60%);
  transform: translateX(-70%); animation: fd-sheen 1.6s .4s cubic-bezier(.3, .6, .2, 1) forwards;
}
@keyframes fd-sheen { to { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .fd-plate::after { animation: none; opacity: 0; } }
.fd-plate-cap { margin: 22px auto 0; text-align: center; font-size: .9rem; color: var(--fd-on-dark-muted); max-width: 460px; }

/* ---- Steps: checkout to the Guild ---------------------------------------- */
.fd-steps { padding-block: clamp(56px, 8vw, 104px); }
.fd-head { max-width: 40em; margin-bottom: clamp(32px, 4vw, 52px); }
.fd-head p { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; color: var(--aged-ink); }
.fd-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: fd-s; position: relative; }
.fd-steps ol::before {
  content: ""; position: absolute; left: 28px; right: calc(20% - 6px); top: 27px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--terracotta) 0 8px, transparent 8px 14px);
}
.fd-steps li { position: relative; padding-right: 22px; }
.fd-steps li::before {
  counter-increment: fd-s; content: counter(fd-s); position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--cream); border: 2px solid var(--terracotta); color: var(--terracotta);
  font-family: var(--font-serif); font-weight: var(--font-weight-serif-heading); font-size: 1.35rem; line-height: 1; margin-bottom: 20px;
}
.fd-steps li:last-child::before { background: var(--terracotta); color: var(--cream); }
.fd .fd-steps h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 6px; }
.fd-steps p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--aged-ink); }
.fd-steps p a { color: var(--forest-pine); text-underline-offset: 3px; }
.fd-when { display: block; font-family: var(--font-sans); font-weight: var(--font-weight-sans-emphasis); font-size: 13px; line-height: 1.3; color: var(--forest-pine); margin-bottom: 6px; }
@media (max-width: 900px) {
  .fd-steps ol { grid-template-columns: 1fr; gap: 26px; }
  .fd-steps ol::before { left: 27px; right: auto; top: 28px; bottom: 90px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--terracotta) 0 8px, transparent 8px 14px); }
  .fd-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding-right: 0; }
  .fd-steps li::before { margin: 0; grid-row: 1 / 4; }
}

/* ---- Benefits as nursery hang tags --------------------------------------- */
.fd-benefits { background: var(--forest-pine); color: var(--cream); padding-block: clamp(56px, 8vw, 104px); }
.fd .fd-benefits h2 { color: var(--cream); }
.fd-benefits .fd-head p { color: var(--fd-on-dark-muted); }
.fd-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); padding-top: 28px; }
@media (max-width: 900px) { .fd-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fd-tags { grid-template-columns: minmax(0, 340px); justify-content: center; gap: 44px; } }
.fd-tag-wrap { position: relative; width: 100%; max-width: 290px; justify-self: center; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .18)); }
.fd-tag-wrap .fd-twine { position: absolute; left: 50%; top: -30px; width: 60px; height: 46px; margin-left: -30px; z-index: 2; pointer-events: none; }
.fd-twine path { fill: none; stroke: var(--fd-twine); stroke-width: 2; stroke-linecap: round; }
.fd-tag {
  position: relative; background: var(--kraft); color: var(--walnut); text-align: center; min-height: 330px; padding: 56px 24px 30px;
  clip-path: polygon(22% 0, 78% 0, 100% 11%, 100% 100%, 0 100%, 0 11%);
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 0; transition: transform .5s cubic-bezier(.3, .7, .2, 1);
}
.fd-tag-wrap:hover .fd-tag { transform: rotate(calc(var(--r, 0deg) * -1)); }
@media (prefers-reduced-motion: reduce) { .fd-tag { transition: none; } .fd-tag-wrap:hover .fd-tag { transform: rotate(var(--r, 0deg)); } }
.fd-tag::before { content: ""; position: absolute; left: 50%; top: 16px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--forest-pine); box-shadow: 0 0 0 3px var(--terracotta); }
.fd-tag img { display: block; height: 132px; width: auto; max-width: 170px; object-fit: contain; margin: 2px auto 16px; filter: drop-shadow(0 3px 3px rgba(42, 33, 27, .2)); }
.fd .fd-tag h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 8px; color: var(--walnut); }
.fd-tag p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--aged-ink); }
@media (max-width: 560px) { .fd-tag { min-height: 0; padding: 50px 22px 24px; } .fd-tag img { height: 96px; margin-bottom: 10px; } }

/* ---- Founder's letter ------------------------------------------------------ */
.fd-letter { padding-block: clamp(56px, 8vw, 104px); }
.fd-sheet { max-width: 720px; margin-inline: auto; background: var(--fd-paper); border: 1px solid var(--fd-rule); padding: clamp(28px, 5vw, 56px); box-shadow: 0 24px 48px -30px rgba(42, 33, 27, .45); }
.fd .fd-sheet h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.fd-sheet p { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.65; margin: 0 0 16px; }
.fd-sig { font-style: italic; margin-top: 24px; }
.fd-sig small { display: block; font-family: var(--font-sans); font-style: normal; font-size: .875rem; color: var(--aged-ink); margin-top: 4px; }

/* ---- Terms ------------------------------------------------------------------- */
.fd-terms { background: var(--walnut); color: var(--cream); padding-block: clamp(48px, 7vw, 88px); }
.fd-terms .fd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
@media (max-width: 880px) { .fd-terms .fd-wrap { grid-template-columns: 1fr; } }
.fd .fd-terms h2 { color: var(--cream); }
.fd-price { font-family: var(--font-serif); font-weight: var(--font-weight-serif-heading); font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; margin: 6px 0 22px; }
.fd-price small { font-weight: 400; font-size: 1.1rem; opacity: .8; margin-left: 8px; }
.fd-terms dl { margin: 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); border-top: 1px solid var(--fd-on-dark-rule); }
.fd-terms dt, .fd-terms dd { padding: 14px 0; margin: 0; border-bottom: 1px solid var(--fd-on-dark-rule); }
.fd-terms dt { font-family: var(--font-sans); font-weight: var(--font-weight-sans-emphasis); font-size: .94rem; line-height: 1.4; color: var(--fd-on-dark-muted); }
.fd-terms dd { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5; }
@media (max-width: 480px) { .fd-terms dl { grid-template-columns: 1fr; } .fd-terms dt { border-bottom: 0; padding-bottom: 0; } }

/* ---- FAQ ------------------------------------------------------------------------ */
.fd-faq { padding-block: clamp(56px, 8vw, 96px); }
.fd-faq .fd-wrap { max-width: 820px; }
.fd-faq h2 { margin-bottom: 28px; }
.fd-faq details { border-bottom: 1px solid var(--fd-rule); }
.fd-faq details:first-of-type { border-top: 1px solid var(--fd-rule); }
.fd-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; }
.fd-faq summary::-webkit-details-marker { display: none; }
.fd-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);
}
.fd-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .fd-faq summary::after { transition: none; } }
.fd-faq details p { margin: 0 0 20px; max-width: 62ch; }
.fd-faq details a { color: var(--forest-pine); text-underline-offset: 3px; }

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