/* ═══════════════════════════════════════════════════════════════
   HERO: the barn, drawn as the smokehouse it is.
   A three quarter view gambrel barn in a flat screen print style,
   doors shut, smoke drifting off the cupola.
   Colours: palette tokens only, plus rgba blacks for shadow.
   ═══════════════════════════════════════════════════════════════ */

#topSentinel { position: absolute; top: 0; left: 0; width: 1px; height: 14px; }

.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(.75rem, 2.5vw, 2rem) 0 clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}

.hero__grid { display: grid; gap: clamp(1.25rem, 4vw, 2.5rem); }
.hero__grid > * { min-width: 0; }

/* ── Copy ──────────────────────────────────────────────────────── */
.hero__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: .98;
  color: var(--brown);
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--lead { font-size: 1.45em; }
.hero__line--small {
  display: flex; align-items: center; gap: .55em;
  margin: .32em 0 .14em;
  font-family: var(--font-cond); font-weight: 700;
  font-size: .42em;
  letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.1;
  color: var(--red-2);
}
.hero__line--small::after {
  content: ''; flex: 1 1 0; max-width: 7em; min-width: 1rem; height: 3px;
  background: var(--brown); border-radius: 2px;
}
.hero__line-in { flex: none; margin-right: -.2em; }   /* the trailing letter spacing */
.hero__line--small .hero__word { padding: .1em 0 .12em; margin: -.1em 0 -.12em; }
.hero__line--big { font-size: 1.62em; }
.hero__word {
  display: inline-block;
  overflow: hidden;
  padding: .06em .04em .14em 0;
  margin: -.06em 0 -.14em 0;
  vertical-align: bottom;
}
.hero__word i { display: inline-block; font-style: normal; }
/* "fire": comb red marker pen, like the hand written labels on the shop's sauce
   tub lids (Riley's pick from six options). Permanent Marker has one weight, so a
   same colour outline makes it bolder. Tried and cut: a red to gold gradient, a
   leaning word with print shadows on a brush stroke, a flame on the i. */
.hero__fire {
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: 1.14em;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--red);
  -webkit-text-stroke: .045em var(--red);
  white-space: nowrap;
}
/* In the marker font the F's arm reaches over the I and the I's foot into the R:
   give the I room on both sides, and the E a little, so no letters touch */
.hero__fire-i { margin: 0 .1em 0 .2em; }
.hero__fire-e { margin-left: .09em; }
/* the marker strokes reach past the letter boxes: room inside the rise mask */
.hero__line--big .hero__word { padding: .14em .14em .16em; margin: -.14em -.14em -.16em; }
.hero__lede { margin-bottom: 1.4rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── The barn ───────────────────────────────────────────────────── */
.hero__barn {
  --fence-room: 30px;
  position: relative;
  padding-bottom: var(--fence-room);
}
.hero__barnbox { position: relative; aspect-ratio: 660 / 640; }
.hero__barnsvg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; }

/* Illustration inks */
.c-front  { fill: var(--cream); }
.c-side   { fill: var(--cream-2); }
.c-trim   { fill: var(--brown); }
.c-roof   { fill: var(--brown); }
.c-fascia { fill: var(--brown); }
.c-apron  { fill: var(--paper-soft); }
.c-pebble { fill: var(--timber-2); }
.c-door   { fill: var(--red-2); }
.c-glass  { fill: var(--char); }
.c-iron   { fill: var(--char); }
.c-cream  { fill: var(--cream); }
.c-frame  { fill: none; stroke: var(--brown); stroke-width: 5; stroke-linejoin: round; }
.c-muntin { fill: none; stroke: var(--cream); stroke-width: 3; }
.c-brace  { fill: none; stroke: var(--cream); stroke-width: 6; stroke-linecap: butt; stroke-linejoin: round; }
.c-brace-shadow { fill: none; stroke: rgba(0, 0, 0, .22); stroke-width: 6; }
.c-brace-in { fill: none; stroke: var(--brown); stroke-width: 6; }
.c-strap  { fill: var(--char); }
.c-strapline { fill: none; stroke: var(--char); stroke-width: 4; stroke-linecap: round; }
.c-handle { fill: var(--char); }
.c-loftrail { fill: none; stroke: var(--cream); stroke-width: 4; }
.c-loftbrace { fill: none; stroke: var(--cream); stroke-width: 4; }

/* Paper grain, clipped to the barn's silhouette */
.hero__grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--grain);
  background-size: var(--grain-size);
  opacity: .9;
  clip-path: polygon(5.45% 54.06%, 15.15% 29.06%, 37.88% 18.44%, 60.61% 10.63%, 82.12% 20.63%, 93.03% 44.06%, 91.21% 45.63%, 91.21% 76.88%, 68.48% 86.88%, 7.27% 86.88%, 7.27% 54.06%);
}

/* The doorway behind the shut doors: dark, with firelight inside */
.hero__doorway {
  position: absolute; z-index: 1;
  left: 16.061%; top: 55%; width: 43.636%; height: 30.625%;
  background: var(--char);
}

/* The doors: two hinged panels with a front and a back */
.hero__doors {
  position: absolute; z-index: 4;
  left: 16.061%; top: 55%; width: 43.636%; height: 30.625%;
  display: flex;
  perspective: 1200px;
}
.hero__door { position: relative; flex: 1; transform-style: preserve-3d; }
.hero__door-face, .hero__door-back { position: absolute; inset: 0; backface-visibility: hidden; }
.hero__door-face {
  background-color: var(--red-2);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 1.5px, transparent 1.5px 16px),
    var(--grain);
  background-size: auto, var(--grain-size);
  box-shadow: inset 0 0 0 6px var(--cream), inset 0 0 0 7.5px rgba(0, 0, 0, .18);
}
.hero__door-back {
  transform: rotateY(180deg);
  background-color: var(--timber-2);
  background-image:
    linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 1.5px, transparent 1.5px 16px);
}
.hero__door svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__door--l { transform-origin: left center; }
.hero__door--r { transform-origin: right center; }

/* The hen, on the front of the ridge */
.hero__hen {
  position: absolute; z-index: 5;
  left: 37.9%; top: 20.6%;
  width: 13.6%;
  transform: translate(-44%, -100%);
  transform-origin: 50% 100%;
}
.hero__hen svg { display: block; width: 100%; height: auto; aspect-ratio: 1256 / 1440; overflow: visible; }
.hero__hen-body { fill: var(--brown); }
.hero__hen-comb { fill: var(--red); }

/* Fence in front of the apron */
.hero .hero__fence {
  position: absolute; left: -3%; right: -3%; bottom: 0; z-index: 6;
  margin: 0;
}

/* ── Chimney smoke: soft puffs, transform and opacity only ──────── */
.hero__smoke { position: absolute; z-index: 5; pointer-events: none; width: 0; height: 0; }
.hero__smoke--cupola { left: 56%; top: 5%; }
.hero__smoke span {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 84, 66, .62) 0, rgba(107, 84, 66, .34) 42%, transparent 70%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__smoke span { animation: smoke 6.6s linear var(--d, 0s) infinite; }
  @keyframes smoke {
    0%   { transform: translate(0, 0) scale(.3); opacity: 0; }
    10%  { opacity: .85; }
    70%  { opacity: .22; }
    100% { transform: translate(78px, -128px) scale(2.5); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__smoke span { animation: none !important; }
  .hero__smoke--cupola span:nth-child(1) { opacity: .7; transform: translate(10px, -22px) scale(.9); }
  .hero__smoke--cupola span:nth-child(2) { opacity: .5; transform: translate(34px, -70px) scale(1.6); }
  .hero__smoke--cupola span:nth-child(3) { opacity: .28; transform: translate(66px, -128px) scale(2.3); }
}

/* ── Desktop layout ─────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 47%) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
  /* the barn bleeds a little past the shell on wide screens so it can stand taller */
  .hero__barn { margin-inline: 0 clamp(-4rem, calc((1100px - 100vw) * .2), 0px); }
}

/* ── Phones and tablets: barn first, full width, then the words ─── */
@media (max-width: 899px) {
  .hero { padding-top: clamp(2.6rem, 9vw, 3.6rem); }
  .hero__grid { gap: 1rem; }
  .hero__barn { --fence-room: 18px; order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .hero .hero__fence { left: -2%; right: -2%; --fence-h: 50px; }
  .hero__title { font-size: clamp(2.2rem, 9.4vw, 3.4rem); }
  .hero__lede { font-size: 1.02rem; margin-bottom: 1rem; }
  .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero__cta .btn--pickup { grid-column: 1 / -1; }
  .hero__cta .btn { min-height: 54px; padding-inline: .8rem; font-size: 1rem; }
}
@media (max-width: 419px) {
  .hero__cta { grid-template-columns: 1fr; }
}

/* ── Entrance choreography (hero.js adds .is-ready) ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__word i {
    transform: translateY(112%);
    transition: transform 640ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .js .hero.is-ready .hero__word i { transform: none; }


  /* the barn settles in, then the doors swing, then the hen lands */
  .js .hero__barnbox { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .hero.is-ready .hero__barnbox { opacity: 1; transform: none; }

  .js .hero__hen { opacity: 0; transform: translate(-44%, -100%) translateY(-34px); }
  .js .hero.is-ready .hero__hen { animation: henDrop 620ms cubic-bezier(.34, 1.56, .64, 1) 1000ms forwards; }
  @keyframes henDrop {
    0%   { opacity: 0; transform: translate(-44%, -100%) translateY(-34px); }
    60%  { opacity: 1; transform: translate(-44%, -100%) translateY(4px); }
    100% { opacity: 1; transform: translate(-44%, -100%) translateY(0); }
  }

  .js .hero__lede, .js .hero__cta {
    opacity: 0; transform: translateY(14px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .js .hero__lede { transition-delay: 560ms; }
  .js .hero__cta { transition-delay: 700ms; }
  .js .hero.is-ready .hero__lede, .js .hero.is-ready .hero__cta { opacity: 1; transform: none; }
}

/* ══ Phones: the hero as a shop poster, no barn ═══════════════════
   Under 760px the barn drawing goes. The address sits on top, then the
   red script tagline, a stacked slab headline sized to the column, the
   pickup and Uber Eats pair with the call as a text link, and the logo
   hen perched on a gold fence in front of a timber sunburst.
   The address line and the hen carry the hidden attribute, so tablet and
   desktop never show them. Delete this block and those two elements to
   go back to the barn on phones. */
@media (max-width: 759px) {
  .hero {
    --measure: min(calc(100vw - 2 * var(--gutter)), 30rem);   /* the column every line is sized to */
    --hen-h: clamp(112px, 36vw, 168px);
    display: block;
    min-height: 0;
    padding: clamp(1rem, 4.5vw, 1.75rem) 0 0;
  }
  .hero__grid { display: flex; flex-direction: column; gap: 0; }
  .hero__copy { width: 100%; max-width: 30rem; margin-inline: auto; text-align: center; }

  /* The barn goes; its wrapper stays as the ground, with the fence and the hen */
  .hero__barnbox { display: none; }
  .hero__barn {
    order: 2;
    margin: 1rem calc(-1 * var(--gutter)) 0;
    padding: 0;
    min-height: calc(var(--hen-h) * 1.25 + 44px);   /* the sunburst plus the fence and ground */
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .hero .hero__fence {
    position: relative; left: auto; right: auto; bottom: auto; z-index: 3;
    --fence-h: 54px;
    margin: 0;
  }
  .hero__barn::after {
    /* a brown ground strip under the pickets, the poster's bottom rule */
    content: ''; position: relative; z-index: 4;
    display: block; height: 10px;
    background-color: var(--brown);
    background-image: var(--grain);
    background-size: var(--grain-size);
  }

  /* The hen on the top rail, a timber sunburst rising behind her */
  .hero__perch {
    display: block;
    position: absolute; left: 50%; bottom: 10px;
    width: 0; height: 0;
  }
  .hero__perch-hen {
    position: absolute; z-index: 5;
    left: 0; bottom: 43px;   /* feet on the top rail, in front of the pickets */
    height: var(--hen-h); width: calc(var(--hen-h) * 1256 / 1440); max-width: none;
    transform: translateX(-46%);
    overflow: visible;
  }
  .hero__sun {
    position: absolute; z-index: 1;
    left: 0; bottom: 30px;
    width: min(calc(var(--hen-h) * 2.5), 100vw); height: calc(var(--hen-h) * 1.25);
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(221, 174, 94, .3) 0deg 6deg, transparent 6deg 12deg);
  }
  .hero__sun::after {
    /* a soft cream core so the hen reads cleanly against the rays */
    content: ''; position: absolute; left: 50%; bottom: 0;
    width: 62%; height: 62%;
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    background: radial-gradient(circle at 50% 100%, var(--cream) 0 55%, rgba(245, 238, 225, 0) 100%);
  }

  /* The address, set like the top line of a shop poster */
  .hero__kicker {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin: 0 0 .7rem;
    font-family: var(--font-cond); font-weight: 700;
    font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .hero__kicker::before, .hero__kicker::after {
    content: ''; flex: 1 1 0; max-width: 2.5rem; height: 1.5px;
    background: var(--wood-2); border-radius: 1px;
  }
  .hero__kicker::before { order: -1; }
  .hero__kicker .ico { width: 1em; height: 1em; margin-right: -.3rem; color: var(--red); stroke-width: 2.2; }

  /* The headline: three lines, each sized to the column. Lines may still wrap,
     so a slow or missing web font never gets clipped. */
  .hero__title {
    max-width: var(--measure);
    margin: 0 auto 1rem;
    font-size: var(--fs-hero);
    line-height: .96;
    letter-spacing: -.01em;
    text-wrap: initial;
  }
  .hero__line--lead { font-size: min(calc(var(--measure) * .179), 5.3rem); }
  .hero__line--big { font-size: min(calc(var(--measure) * .2), 5.6rem); }
  /* the small middle line: condensed caps between two rules */
  .hero__line--small {
    justify-content: center;
    margin: .2em 0 .06em;
    font-size: clamp(1.05rem, calc(var(--measure) * .066), 1.6rem);
  }
  .hero__line--small::before, .hero__line--small::after {
    content: ''; flex: 1 1 0; max-width: none; height: 3px; min-width: 1rem;
    background: var(--brown); border-radius: 2px;
  }

  .hero__lede { max-width: 32ch; margin: 0 auto 1.15rem; font-size: 1rem; line-height: 1.5; }

  /* Order pickup and Uber Eats side by side, the call as a text link */
  .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero__cta .btn {
    min-height: 54px;
    padding: .6rem .7rem;
    font-size: 1.02rem; letter-spacing: .06em;
    gap: .5rem;
    white-space: nowrap;
  }
  .hero__cta .btn--pickup { grid-column: auto; }
  .hero__cta .btn .ico { width: 1.15em; height: 1.15em; }
  .hero__cta .hero__call {
    grid-column: 1 / -1; justify-self: center;
    min-height: 44px;
    padding: .35rem .5rem;
    border: 0; background: transparent;
    font-size: .98rem; letter-spacing: .08em;
    color: var(--brown);
    text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: .3em; text-decoration-color: var(--wood-2);
    box-shadow: none;
  }
  .hero__cta .hero__call:hover { background: transparent; color: var(--red); transform: none; }
  .hero__cta .hero__call .ico { color: var(--red); }
}
@media (max-width: 359px) {
  .hero__cta .btn { font-size: .92rem; letter-spacing: .03em; padding-inline: .45rem; gap: .35rem; }
  .hero__cta .btn .ico { width: 1em; height: 1em; }
  .hero__kicker { letter-spacing: .14em; }
}
/* Phones on their side: smaller type, no hen, so the buttons stay near the top */
@media (max-width: 759px) and (max-height: 500px) {
  .hero { --measure: min(calc(100vw - 2 * var(--gutter)), 19rem); }
  .hero__perch, .hero__kicker, .hero__lede { display: none; }
  .hero__title { margin-bottom: .9rem; }
  .hero__cta { max-width: var(--measure); margin-inline: auto; }
  .hero__barn { min-height: 0; margin-top: .5rem; }
}

/* Phone entrance: the kicker fades up, the sunburst rises, the hen drops onto the fence */
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  .js .hero__kicker {
    opacity: 0; transform: translateY(10px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .js .hero.is-ready .hero__kicker { opacity: 1; transform: none; }
  .js .hero__sun {
    opacity: 0; transform: translateX(-50%) scale(.6); transform-origin: 50% 100%;
    transition: opacity 900ms var(--ease-out) 600ms, transform 1100ms var(--ease-out) 600ms;
  }
  .js .hero.is-ready .hero__sun { opacity: 1; transform: translateX(-50%) scale(1); }
  .js .hero__perch-hen { opacity: 0; transform: translateX(-46%) translateY(-40px); }
  .js .hero.is-ready .hero__perch-hen { animation: perchDrop 640ms cubic-bezier(.34, 1.56, .64, 1) 850ms forwards; }
  @keyframes perchDrop {
    0%   { opacity: 0; transform: translateX(-46%) translateY(-40px); }
    60%  { opacity: 1; transform: translateX(-46%) translateY(4px); }
    100% { opacity: 1; transform: translateX(-46%) translateY(0); }
  }
}