/* DESIGN ROLL
   stacked seed-packet fan · soft-rounded frames · paper grain (pith)
   · rounded friendly display (Nunito) · image mask reveal on scroll
   · dual CTA (shop + aisle index)
   Signature: cambium ring on the front packet; this month’s segment swells lime
   Family with Xylem Cookie / Stump Ledger: charcoal #1C261E · sprout #2F9B44
   · lime #C8F04A · pith #EAF6E4 · bark #6A4A2C · Nunito
   Not Running-in enamel plate · Sunrise polaroid row (A114) · Greenhouse magazine/arch (A113)
   · Layered blob (A108) · Overlay cutouts (A110) · Full-bleed forest scrim (A109)
   · Arch snap (A112) · centered stock photo + blue button */

.page-a115-cambiumfan {
  --pf-charcoal: var(--xy-charcoal);
  --pf-charcoal-deep: var(--xy-charcoal-deep);
  --pf-sprout: var(--xy-sprout);
  --pf-sprout-ink: var(--xy-sprout-ink);
  --pf-lime: var(--xy-lime);
  --pf-pith: var(--xy-pith);
  --pf-bark: var(--xy-bark);
  --pf-mute: var(--xy-mute);
  --pf-font: var(--xy-font);
  --pf-ease: var(--xy-ease);
}

.page-a115-cambiumfan .pf-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(12px, 2vw, 22px) 0 clamp(28px, 4vw, 48px);
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(106, 74, 44, 0.035) 2px,
      rgba(106, 74, 44, 0.035) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(28, 38, 30, 0.03) 3px,
      rgba(28, 38, 30, 0.03) 4px
    ),
    var(--pf-pith);
  color: var(--pf-charcoal);
  font-family: var(--pf-font);
}

.pf-inner {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
}

.pf-copy { max-width: 40rem; }

.pf-kicker {
  margin: 0 0 8px;
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pf-bark);
}

.pf-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pf-copy h1 span { color: var(--pf-sprout-ink); }

.pf-lede {
  margin: 0 0 16px;
  max-width: 46ch;
  color: var(--pf-mute);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.12rem);
}

.pf-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}
.pf-btn--shop {
  background: var(--pf-charcoal);
  color: var(--pf-lime);
}
.pf-btn--shop:hover,
.pf-btn--shop:focus-visible { background: var(--pf-charcoal-deep); }
.pf-btn--guide {
  background: transparent;
  color: var(--pf-charcoal);
  padding-inline: 4px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pf-btn--guide:hover,
.pf-btn--guide:focus-visible { color: var(--pf-sprout-ink); }
.pf-btn:focus-visible {
  outline: 3px solid var(--pf-sprout);
  outline-offset: 3px;
}

.pf-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--pf-mute);
}
.pf-proof li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-proof li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-lime);
  box-shadow: 0 0 0 3px var(--pf-charcoal);
}

.pf-fan {
  position: relative;
  min-height: clamp(260px, 58vw, 380px);
  display: grid;
  place-items: center;
}

.pf-card {
  --pf-tilt: calc((var(--pf-i) - 2) * 11deg);
  --pf-shift: calc((var(--pf-i) - 2) * 18%);
  position: absolute;
  width: min(168px, 42vw);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pf-charcoal);
  box-shadow: 0 14px 28px rgba(18, 24, 16, 0.18);
  color: var(--pf-pith);
  text-decoration: none;
  transform: translateX(var(--pf-shift)) rotate(var(--pf-tilt));
  clip-path: circle(0% at 50% 80%);
  transition:
    clip-path 280ms var(--pf-ease),
    transform 200ms var(--pf-ease);
  z-index: calc(10 + var(--pf-i));
}
.pf-card.is-front { z-index: 20; }
.pf-card.is-in { clip-path: circle(140% at 50% 80%); }
.pf-card:hover,
.pf-card:focus-visible {
  transform: translateX(var(--pf-shift)) rotate(var(--pf-tilt)) translateY(-6px);
  z-index: 24;
}
.pf-card:focus-visible {
  outline: 3px solid var(--pf-sprout);
  outline-offset: 3px;
}
.pf-card img {
  width: 100%;
  height: 72%;
  object-fit: cover;
  display: block;
}
.pf-card-meta {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
}
.pf-card-meta strong {
  font-size: 0.78rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-card-meta em {
  font-style: normal;
  color: var(--pf-lime);
  font-weight: 800;
}

.pf-cambium {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
}
.pf-cambium-seg {
  stroke: rgba(234, 246, 228, 0.35);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.pf-cambium-seg.is-now {
  stroke: var(--pf-lime);
  stroke-width: 4.4;
}

.pf-search {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(28, 38, 30, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(18, 24, 16, 0.06);
}
.pf-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--pf-charcoal);
  font: inherit;
  padding: 0 14px;
}
.pf-search input:focus { outline: none; }
.pf-search:focus-within {
  box-shadow: 0 0 0 3px rgba(47, 155, 68, 0.35);
}
.pf-search button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pf-sprout);
  color: #f4fff6;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.pf-search button:hover,
.pf-search button:focus-visible { background: #38b352; }
.pf-search button:focus-visible {
  outline: 3px solid var(--pf-charcoal);
  outline-offset: 2px;
}

.pf-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.pf-chips a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--pf-charcoal);
  color: var(--pf-pith);
  font-weight: 800;
  text-decoration: none;
}
.pf-chips a:hover,
.pf-chips a:focus-visible { background: var(--pf-sprout); color: #f4fff6; }
.pf-chips a:focus-visible {
  outline: 3px solid var(--pf-lime);
  outline-offset: 2px;
}

.pf-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pf-strip-head a {
  color: var(--pf-sprout-ink);
  font-weight: 800;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pf-strip-head a:hover,
.pf-strip-head a:focus-visible { text-decoration: underline; }
.pf-strip-head a:focus-visible {
  outline: 3px solid var(--pf-sprout);
  outline-offset: 3px;
}

.pf-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.pf-tile {
  flex: 0 0 min(168px, 72vw);
  scroll-snap-align: start;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--pf-charcoal);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(18, 24, 16, 0.08);
}
.pf-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--pf-pith);
}
.pf-tile span {
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-tile strong { color: var(--pf-sprout-ink); }
.pf-tile:hover,
.pf-tile:focus-visible { transform: translateY(-3px); }
.pf-tile:focus-visible {
  outline: 3px solid var(--pf-sprout);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .pf-inner {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.05fr);
    grid-template-areas:
      "copy fan"
      "search search"
      "chips chips"
      "striphead striphead"
      "strip strip";
    align-items: center;
  }
  .pf-copy { grid-area: copy; }
  .pf-fan { grid-area: fan; min-height: 400px; }
  .pf-search { grid-area: search; width: min(520px, 100%); }
  .pf-chips { grid-area: chips; }
  .pf-strip-head { grid-area: striphead; }
  .pf-strip { grid-area: strip; }
  .pf-card { width: 178px; }
}

/* PAGE DESIGN ROLL — Cambium meadow (index below-fold)
   editorial grid · soft rounded with shadow · hairline with sprout · staggered fade-up
   Signature: 12-month stump wheel; live month sap-fills
   Not Home meadow kraft trough (A114) · Field Guide calendar · Sow dial (A108) */

.pf-meadow {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 3vw, 36px) 0 var(--a115-space-6);
}
.pf-block h2 {
  margin: 0 0 8px;
  font-size: var(--a115-type-xl);
  font-weight: 800;
}
.pf-aisles,
.pf-best {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pf-aisle {
  display: grid;
  gap: 4px;
  padding: 18px;
  min-height: 88px;
}
.pf-aisle strong { font-size: 1rem; }
.pf-aisle span { color: var(--pf-mute); font-size: 0.82rem; font-weight: 800; }
.pf-best-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.pf-best-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.pf-best-card span { font-weight: 800; font-size: 0.9rem; }
.pf-best-card strong { color: var(--pf-sprout-ink); }

.pf-wheel {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pf-wheel-item {
  display: grid;
  gap: 2px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--xy-radius-sm);
  background: var(--xy-surface);
  border-left: 6px solid var(--xy-line);
}
.pf-wheel-item.is-now {
  border-left-color: var(--xy-lime);
  box-shadow: var(--xy-shadow);
}
.pf-wheel-item strong { font-size: 0.88rem; }
.pf-wheel-item span { color: var(--pf-mute); font-size: 0.86rem; }

.pf-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pf-trust p {
  margin: 0;
  padding: 14px;
  border-radius: var(--xy-radius-sm);
  background: var(--xy-charcoal);
  color: var(--xy-lime);
  font-weight: 800;
}
.pf-note { padding-bottom: 8px; }

@media (min-width: 800px) {
  .pf-aisles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-best { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-wheel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card {
    clip-path: none;
    transition: none;
  }
  .pf-tile { transition: none; }
}