/* Mcava landing v1, HQ R-181: Confetti's website notes of 5 Nov (sent by Simran). Loaded after r179.css (home page and
   recipe pages). Brand palette only (main.css tokens). One block per note:
   1 Hero: tight, low-blur sticker shadows (their "Like this"), and Ava's drumstick clear of the clock.
   2 Our story: a clearer hierarchy, lede / body / closing line at distinct sizes, tighter line spacing.
   3 Our promise: Indigo Coop panel (7.3:1 against the Eggshell page), thinner icon strokes, the arrows centred on the
     dotted line between each two badges, the feed line as a ticket.
   4 Today's chicken: the clock, Ava, the notes and the ticket never overlap; Your kitchen on Eggshell, not Rooster Red
     (assets/js/main.js), so Ava stands out.
   5 Where to find us: From farm with love on Indigo Coop (assets/svg/st-farmwithlove-indigo.svg), tight shadow. */

/* ---------- 1 + 5: one sticker shadow, tight and barely blurred ---------- */
:root {
  --stk-shadow: drop-shadow(0 3px 1px rgba(25, 25, 25, .2));
  --stk-shadow-lg: drop-shadow(0 4px 1.5px rgba(25, 25, 25, .22));
  --stk-shadow-lift: drop-shadow(0 7px 2px rgba(25, 25, 25, .18));
}
.hero-stk img, .hero-sticker img, .pr-shape { filter: var(--stk-shadow); }
.notify-sticker img, .close-sticker img, .app-sticker img { filter: var(--stk-shadow-lg); }
/* The hover lift (shared stickers.css): a little higher, still crisp. */
.stk-on.is-lift > .stk-fx { filter: var(--stk-shadow-lift); }
.stk-on.is-lift img, .stk-on.is-lift .pr-shape { filter: none; }

/* ---------- 1: Ava's drumstick (and its motion marks) clear of the clock's rim ---------- */
/* The clock moves up and right a little and Ava down and left, so the raised drumstick sits beside the clock, not on it.
   The check (check-r181.mjs) measures the gap. */
.hero-clock { width: 74%; right: 0; top: 0; }
.hero-fox { left: -13%; bottom: -1%; }
@media (max-width: 640px) {
  .hero-clock { width: 72%; right: 0; top: 0; }
  .hero-fox { left: -3%; width: 55%; bottom: 0; }
}

/* ---------- 2: Our story, a clearer hierarchy ---------- */
/* Title, then the lede a clear step down, the body smaller and tighter, and the closing line set like the page's other
   short statements (Barlow Condensed, caps). */
.story-copy .h-xl { margin-bottom: .36em; }
.story-copy .lede { max-width: 30ch; font-weight: 600; font-size: clamp(23px, .55vw + 18px, 30px); line-height: 1.08; }
.story-copy .body { max-width: 50ch; margin-top: .85em; font-weight: 500; font-size: clamp(18px, .12vw + 16.5px, 19.5px); line-height: 1.16; }
.story-end {
  max-width: 24ch; margin-top: 1.05em; font: 700 clamp(22px, .7vw + 15px, 30px)/1 var(--f-display);
  text-transform: uppercase; letter-spacing: .005em;
}
@media (max-width: 640px) {
  .story-panel { padding-bottom: 88px; } /* the closing line clear of the leaf shape at the foot */
  .story-copy .lede { font-size: 22px; }
  .story-copy .body { font-size: 18px; }
  .story-end { font-size: 23px; }
}

/* ---------- 3: Our promise on Indigo Coop ---------- */
/* Butter on Indigo Coop 7.7:1; the badges keep their die-cut edges, so each still reads as a sticker. */
.process { background: var(--indigo); color: var(--butter); }
.process :focus-visible { outline-color: var(--butter); }
.process ::selection { background: var(--butter); color: var(--ink); }
.process .pt-dot { color: var(--pink); } /* Hen Pink 4.3:1 on Indigo (Rooster Red is 2.5:1) */
.process .pr-n { opacity: .85; }
/* 01 was Indigo Coop, the panel's own colour now: Butter, ink icon. */
.pr-badge--butter .stk-fill { fill: var(--butter); }
/* Thinner strokes, a fine line like the brand's line art. */
.pr-ic { stroke-width: 1.9; }

/* The way through: one dotted line between each two badges, the same gap from each badge, and its arrow at the exact
   middle of that line (it used to be one long line behind the badges, the arrows placed apart from it). */
.pr-steps { --gap: clamp(16px, 2.6vw, 44px); column-gap: var(--gap); }
@media (min-width: 1101px) {
  .pr-step:not(:last-child)::before {
    content: ""; position: absolute; z-index: -1; top: calc(var(--badge) / 2 - 2px); left: calc(50% + var(--badge) / 2 + 12px);
    width: calc(100% + var(--gap) - var(--badge) - 24px); height: 4px;
    background: radial-gradient(circle, var(--butter) 1.3px, #0000 1.8px) center / 9px 4px repeat-x;
    -webkit-mask: linear-gradient(90deg, #000 calc(50% - 16px), #0000 0 calc(50% + 16px), #000 0);
    mask: linear-gradient(90deg, #000 calc(50% - 16px), #0000 0 calc(50% + 16px), #000 0);
  }
  .pr-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--badge) / 2); left: calc(100% + var(--gap) / 2); width: 12px; height: 12px;
    border-top: 2.5px solid var(--butter); border-right: 2.5px solid var(--butter); border-radius: 1.5px;
    transform: translate(-85%, -50%) rotate(45deg);
  }
}

/* The feed line as a ticket (Confetti: "a ticket-shaped design could also be explored"): a Hen Pink stub with the mill,
   a perforation, the line on Butter. Notched where it tears; a die-cut Eggshell edge like the badges'. */
.pr-feed { margin-top: clamp(40px, 6vh, 64px); padding-top: 0; border-top: 0; }
.pr-ticket { position: relative; display: inline-block; max-width: 100%; rotate: -2deg; }
.pr-ticket > .stk-fx, .pr-ticket:not(.stk-on) > .pr-tk { filter: var(--stk-shadow); }
.pr-tk {
  --stub: clamp(78px, 7vw, 108px); --notch: 13px; --edge: 5px;
  display: block; padding: var(--edge); border-radius: 18px; background: var(--egg);
  -webkit-mask: radial-gradient(circle var(--notch) at calc(var(--stub) + var(--edge)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(var(--stub) + var(--edge)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at calc(var(--stub) + var(--edge)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(var(--stub) + var(--edge)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.pr-tk-in {
  display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); align-items: stretch; border-radius: 13px; overflow: hidden;
  background: var(--butter); color: var(--ink);
  -webkit-mask: radial-gradient(circle calc(var(--notch) - var(--edge)) at var(--stub) calc(-1 * var(--edge)), #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle calc(var(--notch) - var(--edge)) at var(--stub) calc(100% + var(--edge)), #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle calc(var(--notch) - var(--edge)) at var(--stub) calc(-1 * var(--edge)), #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle calc(var(--notch) - var(--edge)) at var(--stub) calc(100% + var(--edge)), #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.pr-tk-stub { display: grid; place-items: center; background: var(--pink); border-right: 2px dashed rgba(25, 25, 25, .55); }
.pr-tk-stub .pr-ic { width: 66%; height: auto; aspect-ratio: 1; stroke-width: 2.6; }
.pr-tk .pr-feed-t { align-self: center; max-width: 34ch; padding: clamp(16px, 1.6vw, 24px) clamp(20px, 2.2vw, 34px) clamp(16px, 1.6vw, 24px) clamp(18px, 2vw, 30px); text-align: left; }

/* Ava raises an Orange Yolk drumstick here (assets/svg/fox-winner-yolk.svg): the Indigo one vanished on the panel. */

/* Phone: the badges one under the other, a short dotted line from each to the next, its arrow in the middle. */
@media (max-width: 640px) {
  .pr-steps { row-gap: 48px; }
  .pr-ic { stroke-width: 2.4; }
  .pr-step:not(:last-child)::before {
    content: ""; position: absolute; z-index: -1; left: calc(var(--badge) / 2 - 2px); top: calc(var(--badge) + 6px);
    width: 4px; height: calc(100% - var(--badge) + 48px - 12px);
    background: radial-gradient(circle, var(--butter) 1.3px, #0000 1.8px) center / 4px 8px repeat-y;
    -webkit-mask: linear-gradient(180deg, #000 calc(50% - 11px), #0000 0 calc(50% + 11px), #000 0);
    mask: linear-gradient(180deg, #000 calc(50% - 11px), #0000 0 calc(50% + 11px), #000 0);
  }
  .pr-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(100% + 24px); left: calc(var(--badge) / 2); width: 9px; height: 9px;
    border-top: 2.5px solid var(--butter); border-right: 2.5px solid var(--butter); border-radius: 1.5px;
    transform: translate(-50%, -85%) rotate(135deg);
  }
  .pr-feed { justify-content: center; margin-top: 40px; }
  .pr-ticket { rotate: -1.5deg; width: 100%; }
  .pr-tk { --stub: 74px; --notch: 11px; }
  .pr-tk .pr-feed-t { font-size: 21px; padding: 16px 16px 16px 18px; }
}

/* ---------- 4: Today's chicken, nothing on top of anything ---------- */
/* The clock sits top right, Ava under it (never on it), the handwritten notes and the Cut today ticket to the left of
   the clock face, all placed from the clock's own size (--ck), so they keep clear at any screen size. The face is
   9.6%-90.4% of the clock's box; the 9:00 sun rays reach 1.3%-98.7%. Phones on their side (under 501px tall) keep the
   live layout: there the step's words already run into the big time, which needs its own design pass. */
@media (min-width: 1101px), (min-width: 761px) and (min-height: 501px) and (orientation: landscape) {
  .motion .day-stage { --ck: min(30vw, 46vh); --ck-r: calc(var(--pad) + 2vw); --ck-t: calc(var(--sh-h) + 1.5vh); }
  .motion .day-clock { width: var(--ck); right: var(--ck-r); top: var(--ck-t); }
  .motion .ds-art {
    right: var(--ck-r); width: var(--ck); top: calc(var(--ck-t) + var(--ck) + 6px); bottom: calc(clamp(26px, 4.5vh, 48px) + 88px + 2vh);
    height: auto; transform: none; align-self: stretch; /* main.css's align-self: center would shrink it to nothing */
  }
  .motion .ds-note {
    left: auto; right: calc(var(--ck-r) + var(--ck) * .904 + 58px); top: calc(var(--ck-t) + var(--ck) * .1);
    max-width: 8.5em; text-align: right; line-height: 1.05; text-wrap: balance;
  }
  .motion .day-ticket { right: calc(var(--ck-r) + var(--ck) * .904 + 30px); top: calc(var(--ck-t) + var(--ck) * .44); }
  .motion .day-step[data-step="1"] .ds-note { top: calc(var(--ck-t) + var(--ck) * .02); }
  .motion .day-step[data-step="2"] .ds-note { right: calc(var(--ck-r) + var(--ck) * .987 + 50px); } /* clear of the 9:00 sun rays */
}
@media (min-width: 761px) and (max-width: 1279px) and (min-height: 501px) and (orientation: landscape) {
  /* a smaller clock on narrower screens, so the ticket keeps clear of the big time */
  .motion .day-stage { --ck: min(27vw, 46vh); }
  .motion .day-ticket { scale: .84; transform-origin: right center; }
}
/* Phone: the clock at the right under the time, Ava under the clock, the ticket at its left. */
@media (max-width: 760px) and (min-height: 501px) {
  .motion .day-stage { --ck: min(50vw, 25vh); --ck-t: calc(102px + min(31vw, 15.5vh) + 1.5vh); }
  .motion .day-clock { width: var(--ck); right: var(--pad); top: var(--ck-t); transform: none; }
  .motion .ds-art { left: var(--pad); right: var(--pad); width: auto; height: auto; transform: none; align-self: stretch; top: calc(var(--ck-t) + var(--ck) + 6px); bottom: 236px; }
  .motion .ds-fox { object-position: 50% 100%; }
  .motion .day-ticket {
    right: auto; left: var(--pad); top: calc(var(--ck-t) + var(--ck) * .5); translate: 0 -50%; transform-origin: left center; scale: .8;
    padding: 12px 16px 11px;
  }
  .motion .day-ticket .tk-row { flex-direction: column; gap: 5px; }
}
/* Short phones: under the clock there is no room to show Ava at a size you can see, so she stands at its left, as tall
   as the clock. At step 2 the Cut today ticket has that spot, so she goes under the clock, using all the room there. */
@media (max-width: 760px) and (min-height: 501px) and (max-height: 760px) {
  .motion .day-stage { --ck: min(44vw, 22vh); }
  .motion .ds-art { right: calc(var(--pad) + var(--ck) + 12px); top: var(--ck-t); bottom: auto; height: var(--ck); }
  .motion .day-step[data-step="1"] .ds-art { right: var(--pad); top: calc(var(--ck-t) + var(--ck) + 6px); bottom: 202px; height: auto; }
}

/* Your kitchen: Eggshell, so Ava (Rooster Red) stands clear of her ground, 2.9:1 (on Rooster Red she was 1:1).
   The pinned version changes colour in assets/js/main.js; this is the static (reduced motion) card. */
html:not(.motion) .day-step[data-step="3"] { background: var(--egg); }