/* engage.css ============================================================
   The website patterns: announcement bar, full-height hero, bento grid,
   scroll story, pack picker, rails, counters, "seen on TV" strip.
   ====================================================================== */

/* ------------------------------------------------------------ announcement */
.announce {
  position: relative; z-index: 101;
  background: var(--msu-green); color: var(--cream);
  font-family: var(--font-display); font-size: .875rem; font-weight: 700; text-align: center;
}
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; flex-wrap: wrap; padding-block: 6px; }
.announce a { color: var(--maize); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.announce .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px rgba(0, 182, 81, .3); }

/* ------------------------------------------------------------ hero (full) */
.hero--full { min-height: calc(100svh - var(--header-h) - 40px); display: grid; align-items: center; padding-block: clamp(32px, 4vw, 64px) clamp(80px, 8vw, 120px); }
.hero--full .split { grid-template-columns: 1.05fr .95fr; }
.proof-row { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: var(--space-5); list-style: none; padding: 0; }
.proof-row li {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 8px 8px;
  border: var(--stroke) solid var(--ink); border-radius: var(--pill); background: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
}
.proof-row li b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--pill); background: var(--ink); color: var(--maize); font-size: .8rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-5); font-family: var(--font-display); font-weight: 800; font-size: .85rem; text-decoration: none; }
.scroll-cue span { width: 26px; height: 40px; border: var(--stroke) solid var(--ink); border-radius: 14px; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ------------------------------------------------------------ bento */
.bento {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  grid-template-areas:
    "ghee ghee honey stat"
    "ghee ghee honey video"
    "story story where video";
}
.bento > * { min-width: 0; position: relative; overflow: hidden; border: var(--stroke) solid var(--ink); border-radius: var(--rad); box-shadow: var(--pop); transition: transform var(--dur-slow) var(--spring), box-shadow var(--dur) var(--ease); }
.bento > *:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--pop-lg); }
.b-ghee { grid-area: ghee; background: var(--maize); isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5); min-height: 460px; }
.b-ghee::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/tex/ghee-swirls.webp") center / 700px auto; opacity: .55; }
.b-ghee .b-jar { position: absolute; right: 4%; bottom: -6%; width: min(46%, 300px); filter: drop-shadow(8px 10px 0 rgba(18, 71, 52, .85)); transition: transform var(--dur-slow) var(--spring); }
.b-ghee:hover .b-jar { transform: rotate(-6deg) translateY(-12px); }
.b-honey { grid-area: honey; background: var(--honey-deep); color: var(--on-dark-soft); display: flex; flex-direction: column; justify-content: space-between; }
.b-honey .b-img { height: 58%; }
.b-honey .b-img img { width: 100%; height: 100%; object-fit: cover; }
.b-honey .b-body { padding: var(--space-4); }
.b-honey h3 { color: var(--cream); }
.b-stat { grid-area: stat; background: var(--coral-soft); padding: var(--space-4); display: flex; flex-direction: column; justify-content: flex-end; }
.b-stat b { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1; }
.b-video { grid-area: video; background: #000; padding: 0; }
.b-video .film { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.b-video .film:hover { transform: none; box-shadow: none; }
.b-video .b-label { position: absolute; left: 14px; top: 14px; z-index: 2; pointer-events: none; }
.b-story { grid-area: story; background: #fff; display: grid; grid-template-columns: 1fr 1.1fr; }
.b-story .b-img img { width: 100%; height: 100%; object-fit: cover; }
.b-story .b-body { padding: var(--space-5); align-self: center; }
.b-where { grid-area: where; background: var(--mint); padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-between; }
.bento h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; margin-bottom: .3em; }
.bento .stretch { text-decoration: none; }
.bento .stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.bento > *:has(.stretch:focus-visible) { outline: 3px solid var(--coral); outline-offset: 4px; }
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "ghee ghee" "honey stat" "honey video" "story story" "where where"; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "ghee" "honey" "stat" "video" "story" "where"; grid-auto-rows: auto; }
  .b-ghee { min-height: 420px; }
  .b-honey .b-img { height: 220px; }
  .b-video { aspect-ratio: 16 / 10; }
  .b-story { grid-template-columns: 1fr; }
  .b-story .b-img { height: 220px; }
}

/* ------------------------------------------------------------ scroll story */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-media { position: sticky; top: calc(var(--header-h-stuck) + 32px); height: min(76vh, 640px); }
.story-pics { position: relative; height: 100%; border: var(--stroke) solid var(--ink); border-radius: 999px 999px var(--rad) var(--rad); overflow: hidden; box-shadow: var(--pop-lg); background: #fff; }
.on-dark .story-pics { border-color: var(--cream); box-shadow: 8px 8px 0 var(--maize); }
.story-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
.story-pics img.is-on, .story-pics:not(:has(.is-on)) img:first-child { opacity: 1; transform: none; }
.story-dots { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); display: flex; gap: 8px; }
.story-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(18, 71, 52, .25); transition: width var(--dur) var(--spring), background-color var(--dur); }
.story-dots span.is-on { width: 28px; border-radius: 6px; background: var(--coral); }
.on-dark .story-dots span { background: rgba(255, 240, 220, .3); }
.on-dark .story-dots span.is-on { background: var(--maize); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-steps li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; margin: 0; opacity: .35; transition: opacity var(--dur-slow) var(--ease); }
.story-steps li.is-on { opacity: 1; }
.story-steps:not(:has(.is-on)) li { opacity: 1; }
.story-steps .n { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--maize); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.on-dark .story-steps .n { border-color: var(--cream); }
.story-steps li:nth-child(2) .n { background: var(--coral-soft); }
.story-steps li:nth-child(3) .n { background: var(--mint); }
.story-steps li:nth-child(4) .n { background: #fff; }
.story-steps h3 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); font-weight: 800; }
.story-steps p { font-size: 1.08rem; max-width: 42ch; }
.story-steps li:first-child { min-height: 48vh; justify-content: flex-start; padding-top: 6vh; }
.story-steps li:last-child { min-height: 70vh; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-media { position: sticky; top: calc(var(--header-h-stuck) + 12px); height: 42vh; z-index: 1; }
  .story-steps { position: relative; z-index: 2; }
  .story-steps li { min-height: 52vh; padding: 24px; margin-top: 16px; border-radius: var(--rad); background: var(--bg, var(--cream)); border: var(--stroke) solid var(--ink); opacity: 1; }
  .on-dark .story-steps li { border-color: rgba(255, 240, 220, .4); }
  .story-steps li:first-child, .story-steps li:last-child { min-height: 46vh; padding-top: 24px; }
}

/* ------------------------------------------------------------ pack picker */
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.picker-stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto;
  border-radius: 50%; border: var(--stroke) solid var(--ink); background: radial-gradient(circle at 50% 60%, #fff 0%, #fff 45%, var(--cream) 100%); box-shadow: var(--pop-lg);
}
.picker-stage img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(8px 10px 0 rgba(18, 71, 52, .85)); }
.picker-stage img.is-swap { animation: swap 520ms var(--spring); }
@keyframes swap { from { transform: scale(.7) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.picker-stage .size-badge {
  position: absolute; right: 2%; top: 8%; display: grid; place-items: center; min-width: 108px; height: 108px; padding: 0 10px; border-radius: 50%;
  background: var(--maize); color: var(--ink); border: var(--stroke) solid var(--ink); transform: rotate(10deg);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; text-align: center; line-height: 1;
}
.picker-tabs { display: inline-flex; gap: 6px; padding: 6px; margin-bottom: var(--space-4); border: var(--stroke) solid var(--ink); border-radius: var(--pill); background: #fff; }
.picker-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--pill); background: transparent; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); cursor: pointer; }
.picker-tabs button[aria-selected="true"] { background: var(--ink); color: var(--maize); }
.sizes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.sizes button {
  min-height: 48px; min-width: 76px; padding: 0 16px; border: var(--stroke) solid var(--ink); border-radius: var(--pill); background: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); cursor: pointer;
  transition: transform var(--dur) var(--spring), background-color var(--dur), box-shadow var(--dur);
}
.sizes button:hover { transform: translateY(-3px); }
.sizes button[aria-pressed="true"] { background: var(--maize); box-shadow: 4px 4px 0 var(--ink); transform: translateY(-3px) rotate(-2deg); }
.picker-note { margin-top: var(--space-4); min-height: 3.4em; font-size: 1.05rem; }
@media (max-width: 900px) { .picker { grid-template-columns: 1fr; } .picker-stage { max-width: 360px; } .picker-stage .size-badge { min-width: 84px; height: 84px; font-size: 1.1rem; } }

/* ------------------------------------------------------------ rails */
.rail { position: relative; }
.rail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: var(--space-5); }
.rail-head > div:first-child { max-width: 680px; }
.rail-head h2 { margin-bottom: .2em; }
.rail-head p { margin: 0; }
.rail-nav { display: flex; gap: 10px; }
.rail-nav button {
  width: 52px; height: 52px; display: grid; place-items: center; border: var(--stroke) solid var(--ink); border-radius: 50%;
  background: var(--maize); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform 160ms var(--ease), box-shadow 160ms;
}
.rail-nav button:active { transform: translate(3px, 3px); box-shadow: none; }
.rail-nav button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.rail-nav svg { width: 20px; height: 20px; }
.rail-nav [data-prev] svg { transform: rotate(180deg); }
.on-dark .rail-nav button { border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 78vw); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding: 8px var(--gut) 28px; margin-inline: calc(var(--gut) * -1);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-track--wide { grid-auto-columns: min(440px, 84vw); }
.use-card { position: relative; display: flex; flex-direction: column; border: var(--stroke) solid var(--ink); border-radius: var(--rad); background: #fff; overflow: hidden; box-shadow: var(--pop); transition: transform var(--dur-slow) var(--spring); }
.use-card:hover { transform: translateY(-6px) rotate(-1deg); }
.use-card .u-img { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--stroke) solid var(--ink); }
.use-card .u-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.use-card:hover .u-img img { transform: scale(1.06); }
.use-card .u-body { padding: var(--space-4); }
.use-card .u-tag { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: var(--pill); border: var(--stroke) solid var(--ink); font-family: var(--font-display); font-size: .8rem; font-weight: 800; }
.use-card:nth-child(4n+1) .u-tag { background: var(--maize); }
.use-card:nth-child(4n+2) .u-tag { background: var(--mint); }
.use-card:nth-child(4n+3) .u-tag { background: var(--coral-soft); }
.use-card:nth-child(4n+4) .u-tag { background: var(--gold); }
.use-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: .3em; }
.use-card p { margin: 0; font-size: var(--type-small); }

/* Year cards on the heritage rail. */
.year-card { position: relative; padding: var(--space-5); border: var(--stroke) solid var(--cream); border-radius: var(--rad); background: rgba(255, 240, 220, .06); min-height: 360px; display: flex; flex-direction: column; }
.year-card .yr { display: inline-block; align-self: flex-start; margin-bottom: 18px; padding: 6px 18px; border-radius: var(--pill); border: var(--stroke) solid var(--ink); background: var(--maize); color: var(--ink); box-shadow: 4px 4px 0 var(--cream); font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.year-card:nth-child(3n+2) .yr { background: var(--coral-soft); }
.year-card:nth-child(3n) .yr { background: var(--mint); }
.year-card .circle { width: 96px; margin-top: auto; border: 3px solid var(--maize); align-self: flex-end; }
.year-card h3 { font-size: 1.3rem; color: var(--cream); }
.year-card p { font-size: var(--type-small); }

/* ------------------------------------------------------------ counters strip */
.counter-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: var(--space-6); }
.counter-strip > div { padding: var(--space-4); border-radius: var(--rad); border: var(--stroke) solid var(--cream); text-align: left; }
.counter-strip b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--maize); font-variant-numeric: tabular-nums; }
.counter-strip span { display: block; margin-top: 8px; font-size: var(--type-small); }
.counter-strip--light > div { border-color: var(--ink); background: #fff; box-shadow: var(--pop); }
.counter-strip--light b { color: var(--ink); }
@media (max-width: 860px) { .counter-strip { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ chapter (alternating image + text) */
.chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.chapter + .chapter { margin-top: clamp(56px, 8vw, 120px); }
.chapter:nth-child(even) > :first-child { order: 2; }
.chapter > * { min-width: 0; }
.chapter .num { display: inline-block; font-family: var(--font-display); font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--ink); margin-bottom: 8px; }
.chapter h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; } .chapter:nth-child(even) > :first-child { order: 0; } }

/* ------------------------------------------------------------ CTA split */
.cta-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.cta-split > * { min-width: 0; }
.cta-split h2 { font-size: var(--type-display); }
@media (max-width: 900px) { .cta-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ section heads, compact */
.kicker-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: var(--space-6); }
.kicker-row h2 { margin: 0; max-width: 16ch; }
.kicker-row p { max-width: 42ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .story-pics img { transition: none; }
  .scroll-cue span::after { animation: none; }
}
.sizes[hidden], [data-sizes][hidden] { display: none !important; }
.rail-track figure { margin: 0; min-width: 0; scroll-snap-align: start; }
.rail-track figcaption { padding-top: 14px; font-family: var(--font-display); font-weight: 800; }
.rail-track figcaption span { display: block; font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--ink-soft); }
.proof-row li, .btn { white-space: nowrap; }
.actions > * { flex: none; }
.announce a { display: inline-flex; align-items: center; min-block-size: 32px; }