/* Elsies home, second pass. Loaded after site.css. Elsie comes first, each section gets its own shape,
   and the two things that are only theirs (the sprinkles and the little girl with the wooden spoon)
   run through the page. The serif from Elsie's page carries the quieter lines here too. */
.lead { font: 400 clamp(20px, 1.8vw, 24px)/1.5 var(--f-story); color: var(--mute); max-width: 46ch; }
.sec-head { margin-bottom: clamp(24px, 3.4vw, 40px); }

/* sprinkles that drift, slowly */
.hero::before { inset: -620px 0 0 -620px; animation: drift 80s linear infinite; mask-image: none; -webkit-mask-image: none; opacity: 0.5; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 34%, rgba(253, 248, 243, 0) 72%); pointer-events: none; }
.hero-in { z-index: 1; }
@keyframes drift { to { transform: translate(620px, 620px); } }
.hero-pic img { transform: rotate(var(--tilt, 2deg)); transition: transform 0.2s linear; }
@media (max-width: 860px) { .hero::after { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 46%, rgba(253, 248, 243, 0) 86%); } }

/* a sprinkle border under the hero and above the footer */
.for-elsie, .foot { position: relative; }
.for-elsie::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: url(/img/sprinkles.webp) 0 50% / 420px auto; }
.foot::before { top: -22px; background-color: var(--cream); }

/* For Elsie: straight after the hero, and quiet */
.for-elsie { background: #fff; padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.for-elsie-in { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; gap: clamp(26px, 5vw, 70px); align-items: center; }
.fe-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; border-radius: var(--r); box-shadow: 0 30px 50px -30px rgba(58, 37, 53, 0.55); }
.for-elsie .kicker { color: var(--mauve); }
.for-elsie blockquote { margin: 18px 0 0; font: 400 clamp(26px, 3.1vw, 42px)/1.3 var(--f-story); color: var(--plum); text-wrap: balance; max-width: 22em; }
.fe-by { margin: 16px 0 22px; font: 400 18px/1.4 var(--f-story); font-style: italic; color: var(--mute); }
.fe-mark { width: clamp(90px, 10vw, 140px); height: auto; align-self: end; }
@media (max-width: 860px) { .for-elsie-in { grid-template-columns: 1fr; } .fe-photo { max-width: 240px; } .fe-mark { display: none; } }

/* ways */
#find { padding-bottom: clamp(60px, 8vw, 100px); }
.ways b { transition: color 0.2s; }
.ways a:hover b { color: var(--plum); }

/* match day: the kiosk fills the section */
.match { position: relative; padding: clamp(70px, 9vw, 130px) 0 clamp(50px, 6vw, 80px); overflow: hidden; background: var(--plum); }
.match-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 28%; }
.match::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 37, 53, 0.5) 0%, rgba(58, 37, 53, 0.82) 46%, rgba(58, 37, 53, 0.97) 100%); }
.match-in { position: relative; z-index: 1; display: block; }
.match-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 5vw, 70px); align-items: end; }
.match .h-l { font-size: clamp(40px, 6vw, 84px); }
.match .lead { color: rgba(255, 255, 255, 0.9); }
.match-food { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 6px solid #fff; transform: rotate(3deg); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.8); }
.stalls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(34px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, 0.4); }
.stalls li { border: 0; padding: 24px 0 0; }
.stalls li:last-child { border: 0; }
.stalls h3 { font-size: 26px; }
@media (max-width: 860px) { .match-top { grid-template-columns: 1fr; } .match-food { max-width: 280px; } .stalls { grid-template-columns: 1fr; } .stalls li { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.26); } .stalls li:last-child { border-bottom: 0; padding-bottom: 0; } }

/* grab and go: photo beside two plain rows, then the rounds as one table */
.go { background: #f5eff8; }
.go-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.go-pic { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r); box-shadow: 0 30px 50px -30px rgba(58, 37, 53, 0.5); }
.spots { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--plum); }
.spots li { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid #dccfe2; }
.spots h3 { font: 600 26px/1.1 var(--f-disp); color: var(--mauve-deep); }
.spots p { color: var(--mute); margin-top: 4px; text-wrap: balance; }
.vans-block { margin-top: clamp(50px, 7vw, 90px); background: #fff; border-radius: var(--r); padding: clamp(22px, 3.4vw, 44px); scroll-margin-top: 96px; }
.vans-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 30px; }
.vans-head p { color: var(--mute); }
.rounds { width: 100%; border-collapse: collapse; margin-top: 20px; }
.rounds th, .rounds td { text-align: left; vertical-align: top; padding: 18px 0; border-top: 1px solid var(--line); }
.rounds th { width: 120px; font: 600 24px/1.2 var(--f-disp); color: var(--mauve-deep); white-space: nowrap; }
.rounds td { display: flex; flex-wrap: wrap; gap: 6px 0; font-weight: 600; }
.rounds td span { white-space: nowrap; }
.rounds td span:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--mauve); font-weight: 800; }
.vans-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; padding-top: 22px; border-top: 2px solid var(--plum); }
.vans-foot p { max-width: 58ch; text-wrap: balance; }
@media (max-width: 860px) { .go-in { grid-template-columns: 1fr; } .rounds th, .rounds td { display: block; width: auto; } .rounds th { padding-bottom: 0; } .rounds td { display: flex; border-top: 0; padding-top: 8px; } }

/* sweet treats: real slices */
.treats-in { display: block; }
.treats-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 50px; align-items: end; margin-bottom: clamp(26px, 4vw, 44px); }
.treats-cta { display: grid; gap: 14px; justify-items: start; }
.treats .days { margin-top: 0; }
.flavours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.flavours li { grid-column: span 2; background: #fff; border-radius: var(--r); padding: 12px 12px 18px; border: 1px solid var(--line); transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.flavours li:hover { transform: translateY(-6px) rotate(-1deg); }
.flavours img { width: 100%; aspect-ratio: 1 / 0.82; object-fit: cover; border-radius: 9px; }
.flavours h3 { font: 600 21px/1.15 var(--f-disp); margin: 14px 6px 0; text-wrap: balance; }
.flavours p { margin: 4px 6px 0; font: 600 22px/1 var(--f-disp); color: var(--mauve-deep); display: inline-block; transition: transform 0.25s cubic-bezier(0.3, 1.8, 0.5, 1); transform-origin: left center; }
.flavours li:hover p { transform: scale(1.18); }
.flavours p.soon { font: 800 16px/1.3 var(--f-body); }
.flavours .boxed { background: var(--mauve-deep); border-color: var(--mauve-deep); color: #fff; }
.flavours .boxed h3 { font-size: 22px; }
@media (max-width: 900px) { .treats-head { grid-template-columns: 1fr; } .flavours li { grid-column: span 3; } }

/* catering */
.cater-head .lead { max-width: 30ch; }

/* wholesale: a full butter band */
.whole-band { background: var(--butter); padding: clamp(50px, 7vw, 90px) 0; }
.whole { background: none; border-radius: 0; padding: 0; }

/* why Elsies exists */
.goals-sec { background: #fff; }
.goals-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.goals-mark { width: 96px; height: auto; margin-bottom: 20px; }
.goals-lead { margin-top: 16px; font: 400 clamp(20px, 1.8vw, 24px)/1.5 var(--f-story); color: var(--mute); text-wrap: balance; }
.goals { margin-top: 0; border-bottom: 1px solid var(--line); }
.goals li { font: 400 clamp(20px, 1.8vw, 23px)/1.45 var(--f-story); padding: 20px 0 20px 58px; }
.goals li::before { top: 18px; }
.goals-sec .vow { margin: 30px 0 22px; font: 500 clamp(28px, 3.4vw, 44px)/1.2 var(--f-story); font-style: italic; color: var(--mauve-deep); text-wrap: balance; }
@media (max-width: 860px) { .goals-in { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } .hero-pic img { transform: rotate(2deg); } }

/* fixes */
.rounds td { display: table-cell; font-weight: 600; text-wrap: balance; line-height: 1.7; }
.rounds td span:not(:last-child)::after { content: ","; margin: 0 6px 0 0; color: inherit; font-weight: inherit; }
.match::after { background: linear-gradient(180deg, rgba(58, 37, 53, 0.74) 0%, rgba(58, 37, 53, 0.86) 46%, rgba(58, 37, 53, 0.97) 100%); }
.treats-head h2 span { display: block; }
@media (max-width: 860px) { .rounds td { display: block; } }
@media (max-width: 860px) { .rounds, .rounds tbody, .rounds tr, .rounds th, .rounds td { display: block; width: auto; } .rounds tr { border-top: 1px solid var(--line); padding: 16px 0; } .rounds th, .rounds td { border: 0; padding: 0; } .rounds td { margin-top: 6px; } .rounds td span { white-space: normal; } }
@media (max-width: 860px) { .rounds td span { display: block; } .rounds td span:not(:last-child)::after { content: none; } }

/* phone polish (desktop untouched) */
@media (max-width: 860px) {
  .for-elsie { padding: 54px 0 46px; }
  .for-elsie-in { gap: 26px; }
  .fe-photo { max-width: none; }
  .fe-photo img { aspect-ratio: 1 / 1; object-position: 50% 68%; }
  .for-elsie blockquote { margin-top: 14px; }
  .match { padding: 60px 0 48px; }
  .match-top { gap: 26px; }
  .match-food { max-width: none; transform: rotate(1.5deg); }
  .stalls { margin-top: 34px; }
  .go-in > div { order: -1; }
  .go-in { gap: 30px; }
  .spots li { align-items: flex-start; flex-direction: column; gap: 4px; padding: 18px 0 12px; }
  .vans-block { margin-top: 44px; padding: 24px 20px; }
  .vans-foot { align-items: flex-start; flex-direction: column; }
  .treats-head { margin-bottom: 26px; }
  .flavours { gap: 12px; }
  .flavours li { padding: 10px 10px 16px; }
  .flavours h3 { font-size: 19px; margin-top: 12px; }
  .flavours .boxed h3 { font-size: 19px; }
  .tea-pic { margin-top: 28px; }
  .occ { margin-top: 6px; }
  .goals-mark { width: 78px; margin-bottom: 14px; }
  .goals-sec .vow { margin: 26px 0 14px; }
  .foot::before { height: 18px; top: -18px; }
  .for-elsie::before { height: 18px; }
}
@media (max-width: 860px) { .hero-pic figcaption { left: 10px; bottom: 18px; max-width: calc(100% - 20px); white-space: normal; font-size: 15px; padding: 10px 14px; text-wrap: balance; } }