/* ═══════════════════════════════════════════════════════════════
   ORDER: the signpost. Three arrow boards nailed to a timber post.
   Mobile first: the post is a left rail, boards stack down its side.
   From 760px the post stands centred and the boards alternate sides.
   Pure CSS, no script.
   ═══════════════════════════════════════════════════════════════ */

.order {
  --post-w: 14px;             /* rail width on mobile */
  --tip: 24px;                /* arrow point depth */
  --nail: 9px;                /* nail head diameter */
  --overlap: 0px;             /* how far the flat end reaches past the post */
  --nail-x: calc(var(--overlap) + var(--post-w) / 2);
  --board-shadow: 4px 4px 0 rgba(26, 20, 16, .35);
}

/* ── Heading ───────────────────────────────────────────────────── */
.order__head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.order__lede { margin: 1rem 0 0; }

/* ── Composition ───────────────────────────────────────────────── */
.order__signpost {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  padding: 36px 0 30px;
}

/* The post: blonde timber with a darker seam, pointed cap, sign corners */
.order__post {
  position: absolute;
  left: 0; top: 16px; bottom: 0;
  width: var(--post-w);
  border-radius: 0 0 3px 3px; /* square shoulders under the cap, barely eased foot */
  background-color: var(--timber);
  background-image:
    linear-gradient(90deg, transparent 0 60%, var(--timber-2) 60% 74%, transparent 74%),
    linear-gradient(90deg, rgba(74, 46, 24, .12), transparent 32%, transparent 78%, rgba(74, 46, 24, .18)),
    var(--grain);
  background-size: auto, auto, var(--grain-size);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.order__post::before {
  /* pointed cap, cut from the seam timber */
  content: '';
  position: absolute;
  left: -3px; right: -3px; bottom: calc(100% - 2px); /* cap sits on the post */
  height: 16px;
  background: var(--timber-2);
  clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%);
}
.order__post::after {
  /* the ground it stands in: a foot on mobile, a wider pool on desktop */
  content: '';
  position: absolute;
  left: 50%; bottom: -10px;
  width: 110px; height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26, 20, 16, .75), rgba(26, 20, 16, 0) 70%);
  z-index: -1;
}

/* ── Boards ────────────────────────────────────────────────────── */
.order__arm { position: relative; z-index: 1; }

.order__board {
  --rot: 0deg;
  --rot-h: 0deg;
  position: relative;
  display: block;
  min-height: 64px;
  transform: rotate(var(--rot));
  transform-origin: var(--nail-x) 50%;
  -webkit-tap-highlight-color: transparent;
  /* points right: flat end (with the 2px nail notch) on the left.
     Shared by the painted face and the shadow plank below it. */
  --arrow: polygon(
    0 0,
    calc(100% - var(--tip)) 0,
    100% 50%,
    calc(100% - var(--tip)) 100%,
    0 100%,
    0 calc(50% + 4px),
    2px 50%,
    0 calc(50% - 4px)
  );
}

/* The 4px offset shadow is its own plank behind the face, so the link
   (and its gold focus ring) is never run through a filter and hover
   frames move a flat layer instead of re-rasterising a drop-shadow. */
.order__board::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(4px, 4px);
  clip-path: var(--arrow);
  background: rgba(26, 20, 16, .35);
  z-index: -1;
  pointer-events: none;
}

/* The painted face carries the arrow shape. The link itself stays
   rectangular so the gold focus ring is never clipped away. */
.order__face {
  display: grid;
  gap: .2rem;
  min-height: 64px;
  padding: .75rem calc(var(--tip) + .8rem) .8rem calc(var(--nail-x) + var(--nail) / 2 + .8rem);
  align-content: center;
  border-radius: var(--r-sign);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%, rgba(26, 20, 16, 0) 70%, rgba(26, 20, 16, .10)),
    var(--grain);
  background-size: auto, var(--grain-size);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(26, 20, 16, .14);
  clip-path: var(--arrow);
}

.order__board--pickup .order__face {
  background-color: var(--red); /* fallback */
  background-color: color-mix(in srgb, var(--red) 90%, var(--char)); /* #C71E24: cream sub line 5.0:1 (AA), pure red was 4.33:1 */
  color: var(--cream);
}
.order__board--uber   .order__face { background-color: var(--uber);  color: var(--char); }
.order__board--call   .order__face { background-color: var(--cream); color: var(--brown); }

.order__nail {
  position: absolute;
  top: 50%; left: var(--nail-x);
  width: var(--nail); height: var(--nail);
  margin: calc(var(--nail) / -2) 0 0 calc(var(--nail) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 58%),
    var(--char);
  box-shadow: var(--board-shadow), 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 1px rgba(0, 0, 0, .5);
}

/* Type on the boards */
.order__label {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.order__sub {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.order__label--call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .55rem;
}
.order__callword {
  font-family: var(--font-cond);
  font-size: 1rem;
  letter-spacing: .14em;
  padding-bottom: .1em;
}
.order__phone {
  /* the number is the label: display slab, never animated */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* ── Fine print ────────────────────────────────────────────────── */
.order__fine {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

/* ── Rotation from 480px (text stays level on the smallest phones).
   The boards take their long, medium, short lengths here so the tips
   sit at different x and the angles can open up without touching.
   Uber Eats and Call converge on the right, so the gap is widened;
   the near full angles return at 760px. ─ */
@media (min-width: 480px) {
  .order__board--pickup { --rot: -1.6deg; --rot-h: -2.6deg; }
  .order__board--uber   { --rot: 1.1deg;  --rot-h: 2.1deg; }
  .order__board--call   { --rot: -.7deg;  --rot-h: -1.7deg; }
  .order__arm--pickup { width: 100%; }
  .order__arm--uber   { width: 92%; }
  .order__arm--call   { width: 85%; }
  .order__signpost { gap: 20px; padding-top: 40px; }
}

/* ── Desktop: post centred, boards alternate sides ─────────────── */
@media (min-width: 760px) {
  .order {
    --post-w: 22px;
    --tip: 30px;
    --nail: 10px;
    --overlap: 10px;
  }
  .order__head { margin-inline: auto; text-align: center; }
  .order__lede { margin-inline: auto; }

  .order__signpost {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: clamp(1.75rem, 3vw, 2.75rem);
    column-gap: 0;
    align-content: center;
    max-width: 900px;
    min-height: 420px;
    margin-inline: auto;
    padding: 3.25rem 0 2.75rem;
  }
  .order__post {
    left: 50%;
    top: 16px; bottom: 0;
    margin-left: calc(var(--post-w) / -2);
  }
  .order__post::after { width: 160px; }

  .order__board--pickup { --rot: -2deg;  --rot-h: -3deg; }
  .order__board--uber   { --rot: 1.5deg; --rot-h: 2.5deg; }
  .order__board--call   { --rot: -1deg;  --rot-h: -2deg; }

  .order__arm--pickup { grid-column: 2; grid-row: 1; justify-self: start; width: min(380px, 100%); margin-left: calc(-1 * (var(--overlap) + var(--post-w) / 2)); }
  .order__arm--uber   { grid-column: 1; grid-row: 2; justify-self: end;   width: min(340px, 100%); margin-right: calc(-1 * (var(--overlap) + var(--post-w) / 2)); margin-top: -.5rem; }
  .order__arm--call   { grid-column: 2; grid-row: 3; justify-self: start; width: min(330px, 100%); margin-left: calc(-1 * (var(--overlap) + var(--post-w) / 2)); }

  /* Uber Eats points left: mirror the shape, the padding and the nail */
  .order__board--uber {
    transform-origin: calc(100% - var(--nail-x)) 50%;
    --arrow: polygon(
      var(--tip) 0,
      100% 0,
      100% calc(50% - 4px),
      calc(100% - 2px) 50%,
      100% calc(50% + 4px),
      100% 100%,
      var(--tip) 100%,
      0 50%
    );
  }
  .order__board--uber .order__face {
    text-align: right;
    padding: .75rem calc(var(--nail-x) + var(--nail) / 2 + .8rem) .8rem calc(var(--tip) + .8rem);
  }
  .order__board--uber .order__nail { left: auto; right: var(--nail-x); margin-right: calc(var(--nail) / -2); }

  .order__fine { text-align: center; }
}

@media (min-width: 980px) {
  .order__signpost { row-gap: clamp(2rem, 3.2vw, 3rem); }
}

/* ── Feedback on pointer devices ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .order__board:hover { transform: rotate(var(--rot-h)) translateY(-2px); }
}
/* One :active for touch and pointer. It sits after the hover rule so a
   pressed board settles back to its resting angle on every device. */
.order__board:active { transform: rotate(var(--rot)) scale(.985); }

@media (prefers-reduced-motion: no-preference) {
  .order__board { transition: transform var(--t) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .order__board { transition: none; }
}

/* The letterbox fence below rises about 78px above the join; keep room for it. */
#order { padding-bottom: max(var(--section), 96px); }