/* ==========================================================================
   Homepage ("homey" theme) — everything scoped under body.home
   Light-blue page, with white wax paper, brown and butter-yellow accents.
   Soft, hand-made shapes instead of geometric ones: torn edges, tape,
   wobbly corners, handwriting, notebook paper.
   ========================================================================== */

.home {
  --wrinkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .016' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='4.4'%3E%3CfeDistantLight azimuth='50' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23w)'/%3E%3C/svg%3E");
  --wax-wash: linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52));
  --paper-shadow: 0 14px 26px -16px rgba(58,35,21,.55), 0 2px 5px rgba(58,35,21,.12);
  background-color: var(--sky);
  background-image: var(--grain);
}
.home .section--sky, .home .benefits { background: transparent; }

/* ---- wax paper (the main texture) ---- */
.wax {
  background-color: #fff;
  background-image: var(--wax-wash), var(--wrinkle);
  background-size: auto, 700px 700px;
  box-shadow: var(--paper-shadow);
}
.band-wax { background-color: #fff; background-image: var(--wax-wash), var(--wrinkle), var(--grain); background-size: auto, 700px 700px, auto; }

/* ---- torn paper edge on top of a solid band ---- */
.torn-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 23px; background: inherit; background-position: top; z-index: 1; pointer-events: none;
  clip-path: polygon(0 100%, 0 52%, 2% 38%, 4% 58%, 7% 30%, 9% 46%, 12% 62%, 15% 34%, 18% 50%, 20% 28%, 24% 55%, 27% 40%, 30% 64%, 33% 36%, 36% 52%, 39% 26%, 42% 48%, 45% 60%, 48% 32%, 52% 54%, 55% 38%, 58% 62%, 61% 30%, 64% 48%, 68% 36%, 71% 58%, 74% 28%, 77% 50%, 80% 64%, 83% 38%, 86% 54%, 89% 30%, 92% 52%, 95% 40%, 98% 60%, 100% 44%, 100% 100%);
}

/* ---- washi tape ---- */
.tape {
  position: absolute; z-index: 5; width: 96px; height: 30px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(253,232,165,.92) 0 9px, rgba(253,232,165,.62) 9px 18px);
  box-shadow: 0 1px 3px rgba(58,35,21,.22);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 14%, 100% 28%, 96% 42%, 100% 56%, 96% 70%, 100% 86%, 96% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%, 3% 60%, 0 30%);
}
.tape--blue { background: repeating-linear-gradient(135deg, rgba(141,180,204,.9) 0 9px, rgba(203,224,238,.75) 9px 18px); }
.tape--brown { background: repeating-linear-gradient(135deg, rgba(212,166,117,.92) 0 9px, rgba(212,166,117,.65) 9px 18px); }

/* ---- hero: the statement on a sheet of wax paper ---- */
.home .hero { padding: 38px 0 0; }
.sheet {
  position: relative; overflow: visible; isolation: isolate;
  padding: clamp(34px, 5vw, 76px) clamp(26px, 5vw, 76px) clamp(40px, 5vw, 70px);
  border-radius: 34px 46px 30px 52px / 44px 30px 50px 34px;
  transform: rotate(-.45deg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; min-height: 660px;
}
.sheet::before {   /* crinkle highlight along the top edge, like a sheet laid down */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 28%, rgba(141,180,204,.14) 52%, rgba(255,255,255,.55) 78%, rgba(255,255,255,0) 100%);
}
.sheet__hand { font-family: var(--font-hand); font-size: 1.7rem; color: var(--caramel); margin: 0 0 .2rem; transform: rotate(-2deg); display: inline-block; }

.statement {
  font-family: var(--font-display); font-weight: 560; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; color: var(--cocoa);
  margin: 0 0 .5em; isolation: isolate;
}
.statement > span { display: block; white-space: nowrap; }
.statement .l2 { padding-left: .9em; }
.statement .l3 { padding-left: .3em; }
.butter { position: relative; z-index: 0; display: inline-block; }
.butter::before {   /* butter pat */
  content: ""; position: absolute; z-index: -1; inset: .14em -.2em .02em -.16em;
  background: linear-gradient(170deg, #FFF0B8, var(--butter) 55%, #F7D97E);
  border-radius: 46% 54% 40% 60% / 56% 40% 60% 44%; transform: rotate(-2.2deg);
  box-shadow: 0 .06em .12em rgba(143,85,48,.25);
}
.butter::after {    /* melting drip */
  content: ""; position: absolute; z-index: -1; left: 30%; bottom: -.32em; width: .2em; height: .46em;
  background: linear-gradient(var(--butter), #F7D97E); border-radius: 0 0 50% 50% / 0 0 70% 70%;
}
.love { font-family: var(--font-hand); font-weight: 500; font-size: 1.32em; color: var(--caramel); position: relative; display: inline-block; line-height: .8; letter-spacing: 0; padding-right: .6em; }
.love::after {      /* hand-drawn squiggle underline */
  content: ""; position: absolute; left: 0; right: .95em; bottom: -.1em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5' fill='none' stroke='%238F5530' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 3.4em 100%;
}
.love .heart { position: absolute; right: .05em; top: -.12em; width: .62em; height: .58em; transform: rotate(12deg); }
/* crack: whole until you touch it, then it snaps and stays broken */
.crack-wrap { position: relative; display: inline-block; cursor: pointer; }
.cr { display: inline-block; }
.cr--l { color: var(--cocoa); }
.cr--r { position: absolute; left: 0; top: 0; color: var(--cocoa); opacity: 0; pointer-events: none; }
.crack-wrap.is-cracked .cr--l {
  clip-path: polygon(-10% -10%, 50% -10%, 43% 26%, 54% 48%, 41% 72%, 48% 110%, -10% 110%);
  transform: translate(-.02em, 0) rotate(-1.5deg); transform-origin: 0 100%;
}
.crack-wrap.is-cracked .cr--r {
  opacity: 1; color: var(--caramel);
  clip-path: polygon(50% -10%, 110% -10%, 110% 110%, 48% 110%, 41% 72%, 54% 48%, 43% 26%);
  transform: translate(.1em, .1em) rotate(4.5deg); transform-origin: 100% 100%;
}
.crack-line { position: absolute; left: 38%; top: -6%; width: .32em; height: 1.12em; overflow: visible; pointer-events: none; opacity: 0; }
.crack-line path { fill: none; stroke: var(--toffee); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; vector-effect: non-scaling-stroke; }
.crumb { position: absolute; left: 46%; top: 52%; width: .1em; height: .075em; border-radius: 40% 60% 50% 50%; background: var(--toffee); opacity: 0; pointer-events: none; }

.crack-wrap.snap { animation: shake .34s ease-out; }
.crack-wrap.snap .cr--l { animation: snapL .66s cubic-bezier(.2, .9, .3, 1.15) both; }
.crack-wrap.snap .cr--r { animation: snapR .66s cubic-bezier(.2, .9, .3, 1.15) both; }
.crack-wrap.snap .crack-line { animation: lineFade .8s ease-out both; }
.crack-wrap.snap .crack-line path { animation: lineDraw .22s ease-out both; }
.crack-wrap.snap .crumb { animation: crumb .85s cubic-bezier(.2, .7, .4, 1) both; }
@keyframes shake { 0%, 100% { translate: 0 0; } 18% { translate: -3px 1px; } 36% { translate: 3px -1px; } 54% { translate: -2px 0; } 72% { translate: 2px 1px; } }
@keyframes snapL { 0% { transform: none; } 22% { transform: translate(-.06em, 0) rotate(-3.5deg); } 100% { transform: translate(-.02em, 0) rotate(-1.5deg); } }
@keyframes snapR { 0% { transform: translate(0, 0) rotate(0); } 28% { transform: translate(.21em, -.05em) rotate(8.5deg); } 52% { transform: translate(.06em, .15em) rotate(2.5deg); } 74% { transform: translate(.12em, .08em) rotate(5.5deg); } 100% { transform: translate(.1em, .1em) rotate(4.5deg); } }
@keyframes lineDraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes lineFade { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crumb { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }

.sheet__sub { max-width: 34ch; font-size: 1.12rem; margin: 0 0 1.4rem; }
.sheet__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.home .btn { border-radius: 999px 900px 999px 920px / 900px 999px 920px 999px; box-shadow: 0 6px 0 var(--toffee), 0 10px 14px -6px rgba(58,35,21,.4); border-width: 0; padding: 16px 30px; }
.home .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--toffee), 0 14px 18px -8px rgba(58,35,21,.45); }
.home .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--toffee); }
.home .btn--ghost { background: #fff; color: var(--cocoa); box-shadow: 0 6px 0 var(--sky-deep), 0 10px 14px -6px rgba(58,35,21,.3); }
.home .btn--ghost:hover { background: var(--butter); box-shadow: 0 8px 0 var(--sky-deep), 0 14px 18px -8px rgba(58,35,21,.35); }
.home .btn--light { background: var(--butter); color: var(--cocoa); box-shadow: 0 6px 0 var(--caramel), 0 10px 14px -6px rgba(0,0,0,.35); }

/* toffee scattered on the paper */
.scene { position: relative; aspect-ratio: 1 / .98; width: 112%; max-width: 640px; margin: 96px 0 0 -6%; }
.scene img { position: absolute; mix-blend-mode: multiply; height: auto; }
.scene .s1 { width: 80%; right: 2%; top: -2%; }
.scene .s2 { width: 62%; left: -6%; bottom: 0; transform: rotate(-4deg); }
.scene .s3 { width: 42%; right: 0; bottom: -4%; transform: rotate(6deg); }
.note { position: absolute; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.05; color: var(--cocoa); margin: 0; z-index: 3; }
.note svg { width: 70px; height: 54px; color: var(--cocoa); display: block; }
.note--1 { left: 4%; top: 2%; transform: rotate(-5deg); }
.note--1 svg { margin: 2px 0 0 56px; transform: rotate(8deg); }
.note--2 { left: 4%; bottom: -3%; transform: rotate(3deg); font-size: 1.3rem; display: none; }

.polaroid { position: absolute; z-index: 4; width: 172px; padding: 9px 9px 34px; background: #fff; box-shadow: var(--paper-shadow); transform: rotate(5deg); right: 26px; top: -34px; border-radius: 3px; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 22%; border-radius: 2px; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--font-hand); font-size: 1.15rem; color: var(--cocoa); line-height: 1; }
.polaroid .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); width: 74px; height: 24px; }

.sticker {   /* bag-label style sticker, wobbly edge */
  position: absolute; z-index: 6; right: clamp(20px, 5vw, 70px); bottom: -38px; width: 120px; height: 120px; display: grid; place-items: center; text-align: center;
  background: var(--cocoa); color: var(--butter); font: 700 .66rem/1.25 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 50% 48% 52% 50% / 52% 50% 48% 50%; transform: rotate(-10deg); box-shadow: 0 8px 14px -6px rgba(58,35,21,.55);
}
.sticker::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; border: 1.5px dashed rgba(253,232,165,.7); }
.sticker b { display: block; font: 600 1.1rem/1 var(--font-display); letter-spacing: 0; text-transform: none; color: #fff; margin: 3px 0; }

/* ---- note cards (benefits) ---- */
.home .benefits { padding: 120px 0 30px; margin-top: 0; border: 0; }
.notes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.notecard { position: relative; background: #fff; padding: 36px 26px 28px; text-align: center; border-radius: 6px 12px 8px 14px; box-shadow: var(--paper-shadow); }
.notecard:nth-child(1) { transform: rotate(-1.6deg); } .notecard:nth-child(2) { transform: rotate(1.1deg) translateY(10px); } .notecard:nth-child(3) { transform: rotate(-.8deg); }
.notecard .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); }
.notecard svg.ic { width: 48px; height: 48px; margin: 0 auto 8px; color: var(--caramel); }
.notecard h3 { font-family: var(--font-hand); font-weight: 500; font-size: 2rem; margin: 0 0 .15em; line-height: 1; }
.notecard p { margin: 0; font-size: .98rem; }

/* ---- section titles, homey version ---- */
.home .sec-title { text-transform: none; letter-spacing: -.01em; font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.home .sec-title::after { border-bottom: 0; height: 12px; width: 120px; margin: .25em auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 Q15 0 30 6 T60 6 T90 6 T118 5' fill='none' stroke='%238F5530' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.home .sec-title--left::after { margin-left: 0; }
.home .section--cocoa .sec-title::after, .home .section--kraft .sec-title::after { filter: brightness(1.6); }
.home .crowd__intro h2 { text-transform: none; font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.home .eyebrow { font-family: var(--font-hand); text-transform: none; letter-spacing: 0; font-size: 1.6rem; font-weight: 500; color: var(--caramel); }
.home .section--cocoa .eyebrow { color: var(--toffee); }
.home .section--kraft .eyebrow { color: var(--cocoa); }

/* ---- product cards on blue: loose paper, no hard shadows ---- */
.home .pcard { border: 0; border-radius: 22px 18px 24px 16px; background: #fff; box-shadow: var(--paper-shadow); }
.home .pcard:nth-child(even) { border-radius: 16px 24px 18px 22px; }
.home .pcard::before { height: 12px; border-bottom: 0; border-radius: 0; }
.home .pcard__img, .home .pcard__img img { background: transparent; }
.home .pcard__foot { background: #FBF6EA; border-top: 2px dotted rgba(143,85,48,.5); }
.home .pcard__badge { background: var(--caramel); }
.home .slider__arrow { border: 0; background: #fff; box-shadow: var(--paper-shadow); }
.home .slider__bar { background: rgba(255,255,255,.7); border: 0; height: 8px; }
.home .slider__bar i { background: var(--caramel); }
.home .select, .home .pcard__foot select { border-radius: 10px 12px 9px 12px; }

/* ---- diner-menu card (find us) ---- */
.menu { position: relative; background: #fff; padding: 34px 34px 28px; border-radius: 10px 6px 14px 8px; box-shadow: var(--paper-shadow); transform: rotate(.8deg); }
.menu .tape { left: 18%; top: -14px; transform: rotate(-5deg); } .menu .tape.t2 { left: auto; right: 14%; transform: rotate(4deg); }
.menu h3 { font-family: var(--font-hand); font-weight: 500; font-size: 2.2rem; text-align: center; margin: 0 0 .6rem; }
.menu__row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.menu__row b { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; }
.menu__row small { color: var(--caramel); display: block; font-size: .85rem; font-family: var(--font-body); font-weight: 400; }
.menu__row i { flex: 1; border-bottom: 2.5px dotted rgba(143,85,48,.55); transform: translateY(-5px); min-width: 24px; }
.menu__row em { font: 500 1.35rem var(--font-hand); color: var(--caramel); white-space: nowrap; font-style: normal; }

/* ---- kraft band (build your own box) ---- */
.home .section--kraft::after { border-radius: 14px 10px 16px 12px; inset: 20px; }
.home .box__photo { border: 0; border-radius: 4px; box-shadow: var(--paper-shadow); background: #fff; padding: 12px 12px 40px; position: relative; transform: rotate(-2.4deg); }
.home .box__photo .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); }
.home .box__photo figcaption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--font-hand); font-size: 1.4rem; }
.home .section--kraft .btn { background: var(--cocoa); color: var(--butter); box-shadow: 0 6px 0 var(--caramel), 0 10px 14px -6px rgba(0,0,0,.4); }

/* ---- seasonal spotlight ---- */
.home .spot__img { background: none; position: relative; }
.home .spot__img::before { content: ""; position: absolute; inset: 6% 4% 2%; background: #fff; opacity: .85; border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; transform: rotate(-3deg); box-shadow: var(--paper-shadow); }
.home .spot__img img { position: relative; }
.home .seal { background: var(--caramel); border-radius: 50% 47% 52% 49% / 49% 52% 48% 51%; box-shadow: 0 8px 14px -6px rgba(58,35,21,.5); }
.home .seal::before { content: ""; position: absolute; inset: 6px; border-radius: inherit; border: 1.5px dashed rgba(253,232,165,.8); }

/* ---- about teaser: photo in a soft blob ---- */
.blob { position: relative; max-width: 470px; width: 100%; margin-inline: auto; padding: 14px; background: var(--butter); border-radius: 52% 48% 46% 54% / 56% 44% 56% 44%; box-shadow: var(--paper-shadow); transform: rotate(-1.5deg); }
.blob::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; border: 2px dashed rgba(143,85,48,.5); pointer-events: none; }
.blob__in { border-radius: inherit; overflow: hidden; background: var(--butter); aspect-ratio: 1; }
.blob__in img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.home .big-quote { font-family: var(--font-hand); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; color: var(--caramel); font-weight: 500; }

/* ---- flavor stickers ---- */
.home .fam__disc { background: #fff; border: 0; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--ribbon), var(--paper-shadow); }
.home .fam__tile:nth-child(odd) .fam__disc { transform: rotate(-3deg); } .home .fam__tile:nth-child(even) .fam__disc { transform: rotate(2.5deg); }
.home .fam__tile:hover .fam__disc { transform: rotate(0) scale(1.06); }
.home .fam__tile--next .fam__disc { background: rgba(255,255,255,.35); border: 2.5px dashed var(--caramel); box-shadow: none; }
.home .fam__tile b { font-family: var(--font-hand); font-weight: 500; font-size: 1.35rem; }
.home .progress__bar { border: 0; background: rgba(255,255,255,.75); height: 16px; box-shadow: inset 0 1px 3px rgba(58,35,21,.25); }

/* ---- polaroid placeholders (ingredients) ---- */
.polas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 2.4rem; }
.pola { position: relative; background: #fff; padding: 12px 12px 54px; box-shadow: var(--paper-shadow); border-radius: 3px; }
.pola:nth-child(1) { transform: rotate(-2.4deg); } .pola:nth-child(2) { transform: rotate(1.6deg) translateY(14px); } .pola:nth-child(3) { transform: rotate(-1deg); }
.pola .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); }
.pola .ph { border-radius: 2px; aspect-ratio: 4/5; border-width: 1.5px; }
.pola figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--font-hand); font-size: 1.7rem; line-height: 1; }
.home .section--butter .eyebrow { color: var(--caramel); }

/* ---- logos (white paper tiles) ---- */
.home .badge { border: 0; border-radius: 12px 8px 14px 10px; box-shadow: var(--paper-shadow); background: #fff; }
.home .badge--dark { background: var(--cocoa); box-shadow: var(--paper-shadow); }
.home .seen { text-align: center; }

/* ---- reviews on notebook paper ---- */
.home .quote-card {
  position: relative; border: 0; border-radius: 4px 10px 6px 12px; padding: 44px 26px 22px 58px; gap: 4px;
  background: repeating-linear-gradient(#fff 0 33px, rgba(141,180,204,.6) 33px 34px), #fff; background-position: 0 14px;
  box-shadow: var(--paper-shadow);
}
.home .quote-card::before { content: ""; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px; background: rgba(200,49,43,.35); }
.home .quote-card::after { content: ""; position: absolute; left: 12px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--sky); box-shadow: 0 48px 0 var(--sky), 0 96px 0 var(--sky), inset 0 1px 2px rgba(58,35,21,.35); }
.home .quote-card:nth-child(odd) { transform: rotate(-.7deg); } .home .quote-card:nth-child(even) { transform: rotate(.6deg); }
.home .quote-card .stars { color: var(--butter); -webkit-text-stroke: 1px var(--caramel); letter-spacing: .2em; font-size: 1.1rem; }
.home .quote-card p { font-family: var(--font-hand); font-size: 1.55rem; line-height: 34px; font-weight: 500; }
.home .quote-card small { font-family: var(--font-body); color: var(--caramel); }
.home .quote-card + .quote-card { }

/* ---- coming soon channels (brown) ---- */
.home .channel { border: 2px dotted var(--toffee); border-radius: 22px 16px 24px 18px; }

/* ---- newsletter ---- */
.home .news .in { border-radius: 14px 18px 12px 16px; border-width: 2px; }

/* ---- footer on blue page keeps cocoa, softened frill ---- */

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .sheet { grid-template-columns: 1fr; min-height: 0; transform: none; padding-top: 70px; }
  .statement > span { white-space: normal; }
  .scene { max-width: 420px; width: 100%; margin: 10px auto 0; }
  .scene .s2 { left: 0; }
  .polaroid { right: 14px; top: -24px; width: 130px; padding: 7px 7px 28px; }
  .sticker { width: 96px; height: 96px; right: 14px; left: auto; }
  .notes3, .polas { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .home .benefits { padding-top: 90px; }
}
@media (max-width: 760px) {
  .statement { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .menu { padding: 26px 20px; }
  .home .quote-card { padding-left: 54px; }
}

/* ---- As Seen At: gilded logo band on brown ---- */
.home .seen--gold {
  background-color: var(--cocoa);
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 55%, rgba(120,72,40,.55), rgba(58,35,21,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23D4A675' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M42 12c2 8 7 12 15 12-8 2-12 7-12 15-2-8-7-12-15-12 8-2 12-7 12-15z'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='84' cy='0' r='3'/%3E%3Ccircle cx='0' cy='84' r='3'/%3E%3Ccircle cx='84' cy='84' r='3'/%3E%3Ccircle cx='42' cy='66' r='2.2'/%3E%3C/g%3E%3C/svg%3E"),
    var(--grain);
  color: var(--cream); padding-bottom: clamp(60px, 7vw, 96px); text-align: center;
}
.home .seen--gold .eyebrow { color: var(--toffee); }
.home .seen--gold .sec-title { color: var(--butter); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.home .seen--gold .sec-title::after { filter: brightness(1.7); }
.gold-rule { position: absolute; left: 0; right: 0; height: 7px; border-block: 1px solid rgba(212,166,117,.6); pointer-events: none; }
.gold-rule--top { top: 24px; } .gold-rule--bot { bottom: 24px; }
.gold-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: var(--cocoa); border: 1.5px solid var(--toffee); transform: translate(-50%, -50%) rotate(45deg); }

.logo-band { overflow: hidden; margin-top: 2.2rem; padding: 18px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.logo-band__row { display: flex; width: max-content; animation: tick 46s linear infinite; }
.logo-band:hover .logo-band__row { animation-play-state: paused; }
.logo-set { display: flex; align-items: center; flex: none; }
.logo-set img { flex: none; width: auto; height: var(--h, 140px); margin: 0 clamp(36px, 5vw, 70px);
  /* thin cream halo lifts dark lettering off the brown, soft gold glow adds the glimmer */
  filter: drop-shadow(0 0 1.2px rgba(255,248,240,.95)) drop-shadow(0 0 14px rgba(253,232,165,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.logo-set svg.orn-gem { flex: none; width: 30px; height: 30px; color: var(--toffee); opacity: .85; }
@media (max-width: 760px) { .logo-set img { height: calc(var(--h, 140px) * .66); } }

/* ---- tags get tacked up when they scroll into view, then sway (and sway again on hover) ---- */
.notecard, .channel { --r: 0deg; --y: 0px; position: relative; transform-origin: 50% 0; transform: translateY(var(--y)) rotate(var(--r)); }
.notecard:nth-child(1) { --r: -1.6deg; --y: 0px; transform: translateY(var(--y)) rotate(var(--r)); }
.notecard:nth-child(2) { --r: 1.1deg; --y: 10px; transform: translateY(var(--y)) rotate(var(--r)); }
.notecard:nth-child(3) { --r: -.8deg; --y: 0px; transform: translateY(var(--y)) rotate(var(--r)); }
.channel:nth-child(1) { --r: -1.4deg; --y: 0px; } .channel:nth-child(2) { --r: 1deg; --y: 8px; } .channel:nth-child(3) { --r: -.9deg; --y: 0px; }
.channel .tape { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); }
.home .channel { background: #fff; border: 0; border-radius: 6px 12px 8px 14px; padding: 38px 24px 28px; box-shadow: var(--paper-shadow); }
.home .channel b { color: var(--cocoa); font-size: 1.3rem; }
.home .channel small { color: var(--caramel); }
.home .channel svg { color: var(--caramel); }

.io .notecard, .io .channel { opacity: 0; }
.io .notecard .tape, .io .channel .tape { opacity: 0; }
.io .notecard.is-stuck, .io .channel.is-stuck {
  opacity: 1;
  animation: tackOn .85s cubic-bezier(.2, .8, .3, 1) var(--d, 0s) both, sway 3.2s ease-out calc(var(--d, 0s) + .8s) both;
}
.io .notecard.is-stuck .tape, .io .channel.is-stuck .tape { opacity: 1; animation: tapeOn .4s ease-out calc(var(--d, 0s) + .5s) both; }
@keyframes tackOn {
  0%   { opacity: 0; transform: translateY(calc(var(--y) - 56px)) rotate(calc(var(--r) + 16deg)) scale(1.26); }
  42%  { opacity: 1; }
  58%  { transform: translateY(calc(var(--y) + 3px)) rotate(calc(var(--r) - 3deg)) scale(.985); }
  76%  { transform: translateY(calc(var(--y) - 1px)) rotate(calc(var(--r) + 1.5deg)) scale(1.004); }
  100% { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes sway {
  0%   { transform: translateY(var(--y)) rotate(calc(var(--r) + 5.5deg)); }
  16%  { transform: translateY(var(--y)) rotate(calc(var(--r) - 4deg)); }
  34%  { transform: translateY(var(--y)) rotate(calc(var(--r) + 2.8deg)); }
  52%  { transform: translateY(var(--y)) rotate(calc(var(--r) - 1.7deg)); }
  72%  { transform: translateY(var(--y)) rotate(calc(var(--r) + .8deg)); }
  100% { transform: translateY(var(--y)) rotate(var(--r)); }
}
@keyframes swayHover {   /* same motion, different name so it restarts on every hover */
  0%   { transform: translateY(var(--y)) rotate(calc(var(--r) + 5deg)); }
  16%  { transform: translateY(var(--y)) rotate(calc(var(--r) - 3.6deg)); }
  34%  { transform: translateY(var(--y)) rotate(calc(var(--r) + 2.4deg)); }
  52%  { transform: translateY(var(--y)) rotate(calc(var(--r) - 1.4deg)); }
  72%  { transform: translateY(var(--y)) rotate(calc(var(--r) + .7deg)); }
  100% { transform: translateY(var(--y)) rotate(var(--r)); }
}
@keyframes tapeOn {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(1.6, .2); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
}

/* ---- reviews: endless notebook-paper scroll ---- */
.quote-band { overflow: hidden; padding: 26px 0 44px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.quote-row { display: flex; width: max-content; animation: tick 90s linear infinite; }
.quote-band:hover .quote-row { animation-play-state: paused; }
.quote-set { display: flex; gap: 30px; padding-right: 30px; align-items: flex-start; flex: none; }
.home .quote-card { flex: 0 0 360px; scroll-snap-align: none; }
.home .quote-card:nth-child(3n+1) { margin-top: 10px; } .home .quote-card:nth-child(3n+2) { margin-top: 28px; } .home .quote-card:nth-child(3n) { margin-top: 0; }

/* ---- flavor library tags ---- */
.fam__tag { font: 500 1.2rem var(--font-hand); color: var(--caramel); line-height: 1; margin-top: -4px; }
.fam__tag--shop { color: var(--cocoa); border-bottom: 2px solid var(--toffee); padding-bottom: 1px; }
.fam__tile--soon { cursor: default; }
.fam__tile--soon .fam__disc { filter: saturate(.8); opacity: .92; }
.fam { grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center; }

/* ---- no yellow on brown ---- */
.home .seen--gold .sec-title { color: var(--paper); }
.sticker { color: var(--paper); }

/* library: tidy rows of four */
.fam { grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: center; gap: 30px 26px; }
@media (max-width: 900px) { .fam { grid-template-columns: repeat(2, minmax(0, 190px)); } }
.home .quote-card { padding-top: 30px; }
.home .quote-card::after { top: 16px; }

/* ==========================================================================
   Subtle pass: quieter stickers, tape, tilts, shadows and motion
   ========================================================================== */
.home { --paper-shadow: 0 8px 18px -12px rgba(58,35,21,.38), 0 1px 3px rgba(58,35,21,.1); }

/* barely-there tilts */
.sheet { transform: rotate(-.15deg); }
.sheet__hand { transform: rotate(-1deg); }
.note--1 { transform: rotate(-2deg); }
.notecard:nth-child(1) { --r: -.5deg; --y: 0px; }
.notecard:nth-child(2) { --r: .4deg; --y: 4px; }
.notecard:nth-child(3) { --r: -.3deg; --y: 0px; }
.channel:nth-child(1) { --r: -.4deg; --y: 0px; } .channel:nth-child(2) { --r: .3deg; --y: 4px; } .channel:nth-child(3) { --r: -.3deg; --y: 0px; }
.notecard:nth-child(n), .channel:nth-child(n) { transform: translateY(var(--y)) rotate(var(--r)); }
.polaroid { transform: rotate(2deg); width: 156px; padding: 8px 8px 30px; }
.polaroid figcaption { font-size: 1.05rem; }
.home .box__photo { transform: rotate(-.8deg); }
.pola:nth-child(1) { transform: rotate(-.9deg); } .pola:nth-child(2) { transform: rotate(.6deg) translateY(8px); } .pola:nth-child(3) { transform: rotate(-.4deg); }
.blob { transform: rotate(-.5deg); }
.home .quote-card:nth-child(odd) { transform: rotate(-.25deg); } .home .quote-card:nth-child(even) { transform: rotate(.25deg); }
.home .fam__tile:nth-child(odd) .fam__disc { transform: rotate(-1deg); } .home .fam__tile:nth-child(even) .fam__disc { transform: rotate(.8deg); }
.home .fam__tile:hover .fam__disc { transform: scale(1.03); }
.home .seal { transform: rotate(4deg); }

/* tape: smaller and fainter */
.tape { width: 78px; height: 24px; opacity: .6; box-shadow: none; }
.polaroid .tape { width: 62px; height: 20px; }

/* the bag-label sticker: smaller, softer, straighter */
.sticker { width: 92px; height: 92px; font-size: .56rem; transform: rotate(-3deg); opacity: .92; box-shadow: 0 5px 10px -6px rgba(58,35,21,.45); right: clamp(24px, 5vw, 80px); bottom: -30px; }
.sticker b { font-size: .92rem; }
.sticker::before { opacity: .6; }

/* tack-on: a gentle settle instead of a drop, and a tiny sway */
.io .notecard.is-stuck, .io .channel.is-stuck { animation: tackOn .7s ease-out var(--d, 0s) both, sway 1.7s ease-out calc(var(--d, 0s) + .65s) both; }
.io .notecard.is-stuck .tape, .io .channel.is-stuck .tape { animation: tapeOn .5s ease-out calc(var(--d, 0s) + .35s) both; }
.io .notecard.is-stuck .tape, .io .channel.is-stuck .tape { opacity: .6; }
@keyframes tackOn {
  0%   { opacity: 0; transform: translateY(calc(var(--y) - 12px)) rotate(calc(var(--r) + 1.6deg)) scale(1.02); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes sway {
  0%   { transform: translateY(var(--y)) rotate(calc(var(--r) + 1.2deg)); }
  30%  { transform: translateY(var(--y)) rotate(calc(var(--r) - .8deg)); }
  60%  { transform: translateY(var(--y)) rotate(calc(var(--r) + .4deg)); }
  100% { transform: translateY(var(--y)) rotate(var(--r)); }
}
@keyframes swayHover {
  0%   { transform: translateY(var(--y)) rotate(calc(var(--r) + .9deg)); }
  35%  { transform: translateY(var(--y)) rotate(calc(var(--r) - .6deg)); }
  70%  { transform: translateY(var(--y)) rotate(calc(var(--r) + .25deg)); }
  100% { transform: translateY(var(--y)) rotate(var(--r)); }
}
@keyframes tapeOn { from { opacity: 0; } to { opacity: .6; } }

/* ---- hover fix: the tack-on only ever plays once; hover sway is a one-shot class (no animation-list swapping,
        so cards can never replay from invisible when the mouse leaves) ---- */
.io .notecard.is-stuck.is-settled, .io .channel.is-stuck.is-settled { animation: none; opacity: 1; }
.io .notecard.is-stuck.is-settled.swaying, .io .channel.is-stuck.is-settled.swaying { animation: swayHover 1.3s ease-out both; }

/* ---- hero: arrow is drawn in scene coordinates, tip lands on the bag ---- */
.home .hero { padding-top: 66px; }
.note--1 { left: 2%; top: 1%; transform: rotate(-3deg); }
.note-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; color: var(--cocoa); }
.note-arrow path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

@media (max-width: 1000px) {
  .sheet { padding-top: 30px; }
  .polaroid { position: relative; right: auto; top: auto; order: -1; justify-self: end; margin: 0 4px 6px 0; width: 132px; }
}

/* ---- cute arrow: scales with the scene, chunky rounded line, loop-de-loop ---- */
.home .hero { padding-top: 56px; }
.note-arrow { width: 100%; height: 100%; }
.note-arrow path { stroke-width: .66; vector-effect: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- v2 ---- */
.statement .crack-wrap { font-size: 1.28em; line-height: .9; }
/* the no-flour sticker sits on the toffee picture */
.scene .sticker { right: auto; bottom: auto; left: 27%; top: 55%; z-index: 6; }
/* social grid */
.ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 760px; margin: 2.2rem auto 0; }
.ig a, .ig .ig__ph { position: relative; display: block; aspect-ratio: 1; background: #fff; padding: 8px; box-shadow: var(--paper-shadow); border-radius: 3px; }
.ig a:nth-child(odd) { transform: rotate(-.8deg); } .ig a:nth-child(even) { transform: rotate(.7deg); }
.ig img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.ig .ig__ph::after { content: ""; position: absolute; inset: 8px; border-radius: 2px; background: #E9DFC9; opacity: .6; }
.ig a:hover { transform: translateY(-3px); }
@media (max-width: 600px) { .ig { grid-template-columns: repeat(2, 1fr); gap: 14px; } .ig > :nth-child(n+5) { display: none; } }

.ig-embed { max-width: 1000px; margin: 2.2rem auto 0; min-height: 200px; }

/* salted-caramel bag: whole bag, top included */
.scene .s1 { width: 96%; right: -6%; top: -9%; }
.scene .sticker { left: 21%; top: 66%; }

/* ==========================================================================
   v3 hero: video background, everything centered
   ========================================================================== */
.home .hero.hero--video { position: relative; isolation: isolate; overflow: hidden; padding: 0; background: var(--cocoa);
  min-height: calc(100svh - 124px); display: grid; place-items: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(40,24,14,.34), rgba(40,24,14,.66)); }
.hero__in { text-align: center; padding: clamp(48px, 8vw, 110px) 20px; width: 100%; }
.hero__slug { font-family: var(--font-hand); font-size: clamp(3rem, 9vw, 7rem); line-height: 1; color: var(--butter); margin: 0 0 .2em; }
.hero--video .statement { color: #fff; font-size: clamp(2.4rem, 6.4vw, 5.6rem); margin: 0 0 .5em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero--video .statement > span { white-space: normal; padding-left: 0; }
.hero--video .butter { color: var(--cocoa); text-shadow: none; }
.hero--video .love { color: var(--butter); }
.hero--video .cr--l { color: #fff; }
.hero--video .cr--r { color: var(--butter); }
.hero--video .sheet__sub { color: #fff; max-width: 40ch; margin: 0 auto 1.6rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero__in { padding-block: clamp(24px, 4vw, 56px); }
.hero__slug { font-size: clamp(2.8rem, 7.5vw, 6rem); }
.hero--video .statement { font-size: clamp(2.3rem, 5.6vw, 5rem); }
.social2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 2rem; align-items: start; }
.social2 h3 { font-family: var(--font-hand); font-size: 2rem; font-weight: 500; margin: 0 0 .6rem; color: var(--caramel); }
.social2 .ig-embed { margin: 0; max-width: none; }
.fb-embed { width: 100%; max-width: 500px; height: 131px; background: #fff; border-radius: 6px; }
@media (max-width: 900px) { .social2 { grid-template-columns: 1fr; } }

#how { padding-bottom: 0; }