/* Round 3 (concepts 11 to 15): the deli counter, with personality.
   Fraunces gets its soft, wonky cut; things are stuck on, torn off and chalked up. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400..900,0..100,0..1&display=swap');

.r3 h1, .r3 h2, .r3 h3, .r3 .serif { font-variation-settings: "SOFT" 100, "WONK" 1; }
.r3 .label .num, .r3 .board .amt { font-variation-settings: "SOFT" 100, "WONK" 0; }

/* Stickers: deli labels stuck onto photos. They land with a little press. */
.sticker {
  --notch: 8px; --tilt: -3deg;
  position: absolute; z-index: 2; display: block; max-width: 300px;
  padding: 14px 18px 15px; background: var(--butter); color: var(--ink);
  font: 500 16px/1.3 var(--sans);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left, /* taste-skill-ignore: brand notch mask */
                radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right, /* taste-skill-ignore: brand notch mask */
                radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom left, /* taste-skill-ignore: brand notch mask */
                radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right; /* taste-skill-ignore: brand notch mask */
  -webkit-mask-size: 51% 51%; -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left, /* taste-skill-ignore: brand notch mask */
        radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right, /* taste-skill-ignore: brand notch mask */
        radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom left, /* taste-skill-ignore: brand notch mask */
        radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right; /* taste-skill-ignore: brand notch mask */
  mask-size: 51% 51%; mask-repeat: no-repeat;
  transform: rotate(var(--tilt));
}
.sticker b { display: block; font: 700 24px/1.05 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 4px; }
.sticker.sage { background: var(--sage); }
.sticker.apricot { background: var(--apricot); }
.sticker.blush { background: var(--blush); }
.sticker.oat { background: var(--oat); }
.js .sticker[data-stick] { opacity: 0; transform: rotate(calc(var(--tilt) * 3)) scale(1.18); }
.js .sticker[data-stick].is-in { opacity: 1; transform: rotate(var(--tilt)); transition: opacity 180ms ease, transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1); transition-delay: calc(var(--i, 0) * 120ms + 350ms); }

/* How it works as a collage of three shots, each with what Zyvae says stuck on it */
.how3 { padding: var(--gap-section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 2vw, 28px); }
.how3 h2 { grid-column: 1 / 8; font-size: clamp(40px, 5.2vw, 84px); line-height: 1; color: var(--forest-deep); }
.how3 .says { grid-column: 8 / 13; align-self: end; }
.how3 figure { position: relative; margin-top: clamp(40px, 6vw, 88px); }
.how3 figure .ph { overflow: hidden; border-radius: 3px; }
.how3 figure img { width: 100%; height: 100%; object-fit: cover; }
.how3 .f1 { grid-column: 1 / 6; }
.how3 .f1 .ph { aspect-ratio: 4 / 5; }
.how3 .f2 { grid-column: 6 / 10; margin-top: clamp(120px, 16vw, 240px); }
.how3 .f2 .ph { aspect-ratio: 3 / 4; }
.how3 .f3 { grid-column: 10 / 13; }
.how3 .f3 .ph { aspect-ratio: 3 / 4; }
.how3 .f1 .sticker { right: -18px; bottom: 32px; }
.how3 .f2 .sticker { left: -28px; top: 28px; --tilt: 2.5deg; }
.how3 .f3 .sticker { left: -36px; bottom: -28px; --tilt: -2deg; }
.how3 figcaption { margin-top: 18px; font-size: 17px; max-width: 30ch; color: var(--body2); }
.how3 .f3 figcaption { margin-top: 48px; }

/* The founders, in the kitchen */
.makers { padding: var(--gap-section) var(--margin) 0; display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.makers .pair { position: relative; height: clamp(420px, 46vw, 680px); }
.makers .pair figure { position: absolute; overflow: hidden; border-radius: 3px; }
.makers .pair figure img { width: 100%; height: 100%; object-fit: cover; }
.makers .pair .a { left: 0; top: 0; width: 58%; aspect-ratio: 3 / 4; transform: rotate(-2deg); }
.makers .pair .b { right: 0; bottom: 0; width: 52%; aspect-ratio: 3 / 4; transform: rotate(2.5deg); }
.makers .pair .sticker { position: absolute; }
.makers .pair .s-a { left: 4%; top: 6%; }
.makers .pair .s-b { right: 6%; top: 46%; --tilt: 3deg; }
.makers h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1; color: var(--forest-deep); max-width: 15ch; }
.makers p { margin-top: 20px; font-size: 20px; max-width: 40ch; }

/* Prices chalked up on a board, with the brand scallop along its top */
.board { margin-top: var(--gap-section); background: var(--forest-deep); color: var(--cream); padding: calc(var(--gap-section) * 0.8) var(--margin) var(--gap-section); position: relative; }
.board::before { content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: var(--forest-deep);
  -webkit-mask: radial-gradient(circle 12px at 50% 100%, #000 98%, #0000) 0 0 / 30px 16px repeat-x; /* taste-skill-ignore: brand scallop edge */
  mask: radial-gradient(circle 12px at 50% 100%, #000 98%, #0000) 0 0 / 30px 16px repeat-x; } /* taste-skill-ignore: brand scallop edge */
.board-in { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); }
.board h2 { font-size: clamp(48px, 6vw, 100px); line-height: 0.95; }
.board .note { margin-top: 18px; color: rgba(246, 240, 223, 0.86); max-width: 30ch; }
.board ul { display: grid; gap: 34px; }
.board li { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: baseline; }
.board .what { font: 700 clamp(30px, 3.4vw, 50px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; }
.board .amt { font: 900 clamp(40px, 5vw, 76px)/1 var(--serif); color: var(--saffron); }
.board .amt small { font: 500 17px var(--sans); color: rgba(246, 240, 223, 0.86); }
.board li p { grid-column: 1 / -1; color: rgba(246, 240, 223, 0.92); max-width: 52ch; }

/* Join, half photo, half saffron */
.join3 { display: grid; grid-template-columns: 1fr 1fr; min-height: 82svh; background: var(--saffron); }
.join3 .ph { position: relative; overflow: hidden; }
.join3 .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.join3 .text { padding: clamp(40px, 6vw, 96px) var(--margin); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.join3 h2 { font-size: clamp(52px, 6.8vw, 116px); line-height: 0.92; color: var(--ink); font-weight: 900; max-width: 8ch; }
.join3 p { font-size: 20px; max-width: 34ch; }
.join3 .join input { background: var(--cream); }
.join3 .join-note { color: var(--ink); }

.faq2.r3faq { padding-bottom: var(--gap-section); }

@media (max-width: 860px) {
  .how3 { grid-template-columns: 1fr 1fr; }
  .how3 h2, .how3 .says { grid-column: 1 / -1; }
  .how3 .says { margin-top: 18px; }
  .how3 .f1 { grid-column: 1 / -1; }
  .how3 .f2 { grid-column: 1 / 2; margin-top: 56px; }
  .how3 .f3 { grid-column: 2 / 3; margin-top: 120px; }
  .how3 .f1 .sticker { right: 12px; }
  .how3 .f2 .sticker { left: 8px; top: auto; bottom: -24px; }
  .how3 .f3 .sticker { left: -12px; right: 8px; }
  .sticker { max-width: 220px; font-size: 14px; padding: 10px 12px; }
  .sticker b { font-size: 19px; }
  .makers, .board-in, .join3 { grid-template-columns: 1fr; }
  .makers .pair { height: 110vw; }
  .join3 .ph { height: 70vw; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sticker[data-stick], .js .sticker[data-stick].is-in { opacity: 1; transform: rotate(var(--tilt)); transition: none; }
}