/* Inner-page (article) layer. Loads after restaurant.css and reuses its tokens,
   type systems and nav, so a page inherits whichever typeface is selected. */

.article { padding-block: var(--gap); }

/* ---------- head ---------- */
.art-head { max-width: 860px; margin-inline: auto; }
.crumbs {
  font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px;
}
.crumbs a { color: var(--red); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 6px; opacity: .5; }

.art-head h1 {
  font-size: calc(clamp(30px, 4.2vw, 52px) * var(--h-scale));
  margin-bottom: 8px;
}

/* ---------- body ----------
   A single measured column. 68 characters is the comfortable reading width;
   headings and lists share it so the left edge never moves. */
.art-body {
  max-width: 860px; margin-inline: auto;
  padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--line);
}
.art-body > * { max-width: 68ch; }

.art-body p {
  font-size: 16.5px; line-height: 1.78; color: var(--ink-2); margin: 0 0 20px;
}
/* the live pages open with a standfirst-style line; give the first one weight */
.art-body > p:first-of-type { font-size: 18.5px; line-height: 1.7; color: var(--ink); }

.art-body h2 {
  font-size: calc(clamp(22px, 2.6vw, 30px) * var(--h-scale));
  margin: 42px 0 14px; color: var(--ink);
}
.art-body h3 {
  font-size: calc(clamp(17px, 2vw, 21px) * var(--h-scale));
  margin: 30px 0 10px; color: var(--ink);
}
.art-body h4 {
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 26px 0 8px; color: var(--ink-2);
}
.art-body > *:first-child { margin-top: 0; }

.art-body ul.ticks { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.art-body ul.ticks li {
  position: relative; padding-left: 26px; font-size: 16px; line-height: 1.7; color: var(--ink-2);
}
.art-body ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 7px;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg);
}

.art-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red);
  font-family: var(--display); font-size: 20px; line-height: 1.5; color: var(--ink);
}

.art-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.art-body a:hover { color: var(--red-deep); }

/* ---------- closing actions ---------- */
.art-cta {
  max-width: 860px; margin: 46px auto 0; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; gap: 14px; flex-wrap: wrap;
}

@media (max-width: 700px) {
  .art-body p { font-size: 16px; }
  .art-body > p:first-of-type { font-size: 17.5px; }
  .art-cta .btn { flex: 1 1 100%; }
}

/* ---------- order request form (/order-lechon-online) ----------
   Same fields, labels and order as the live form. */
.order-form { max-width: 68ch; margin-top: 8px; }
.field-row { margin-bottom: 22px; }
.field-row > label,
.field-row legend {
  display: block; font-family: var(--ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink); margin-bottom: 8px; padding: 0;
}
.field-row input[type="text"],
.field-row input[type="email"],
.field-row textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 13px; font-family: var(--body); font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .15s;
}
.field-row input:focus, .field-row textarea:focus { border-color: var(--red); }
.field-row textarea { resize: vertical; min-height: 96px; }
.field-row fieldset { border: 0; margin: 0; padding: 0; }
.field-row .opt {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px;
  font-size: 15px; color: var(--ink-2); cursor: pointer;
}
.field-row .opt input { margin-top: 4px; accent-color: var(--red); flex: none; }
.order-form .btn { width: auto; min-width: 200px; }
.form-note { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }

/* ---------- publish date (articles only) ---------- */
.art-date {
  font-family: var(--ui); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-3); margin: 10px 0 0;
}

/* ---------- related pages ----------
   Every page needs a way out. Seven pages never mention a linkable phrase in
   their copy, so this block gives them outbound links without altering a word. */
.related {
  max-width: 860px; margin: 46px auto 0; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.related h2 {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related li a {
  display: inline-block; font-family: var(--ui); font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  padding: 9px 16px; transition: border-color .15s, color .15s;
}
.related li a:hover { border-color: var(--red); color: var(--red); }

/* in-text links inside the article body */
.art-body p a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.art-body p a:hover { color: var(--red-deep); }

/* ---------- lead photo ----------
   One landscape photo per page, directly under the heading. 16:9 and cropped
   so a portrait source cannot stretch the layout. */
.lead-shot {
  max-width: 860px; margin: 26px auto 0; padding: 0;
  border-radius: 8px; overflow: hidden; box-shadow: var(--shadow);
}
.lead-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 700px) { .lead-shot { margin-top: 18px; border-radius: 6px; } }

/* A portrait or infographic lead image (the price list is a tall graphic) must
   not be cropped to 16:9 — it would cut the content off. Show it whole, capped
   in height so it never dominates the page. */
.lead-shot.tall { max-width: 560px; }
.lead-shot.tall img { aspect-ratio: auto; max-height: 760px; object-fit: contain; background: var(--cream-2); }

/* ---------- pages with no card shell (/blog, /404) ----------
   These two have no .shell around them, so <main> itself has to hold the
   page off the chrome. Without it the white page started hard against the
   black masthead and ended hard against the black footer, wedged between
   the two bars with no air at either end. */
.plainpage { padding-block: 54px 96px; }

/* ---------- blog index (/blog) ---------- */
.post-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
  margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line);
}
.post-card { display: flex; flex-direction: column; }
.post-card .post-img {
  display: block; border-radius: 8px; overflow: hidden; background: var(--cream-2);
  box-shadow: var(--shadow);
}
.post-card .post-img img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .5s;
}
.post-card:hover .post-img img { transform: scale(1.04); }
.post-meta { padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.post-meta time {
  font-family: var(--ui); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.post-meta h2 { font-size: calc(19px * var(--h-scale)); line-height: 1.3; margin: 0; }
.post-meta h2 a { color: var(--ink); }
.post-meta h2 a:hover { color: var(--red); }
.post-meta p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

/* form status messages */
.form-note.ok   { color: #137a3a; }
.form-note.warn { color: var(--red); }

/* ---------- key takeaways (TL;DR) ----------
   Sits above the article. Answer engines quote short self-contained lines, and a
   reader in a hurry gets the page in four lines. Deliberately plain so it reads
   as information, not as a promotional callout. */
.tldr {
  max-width: 860px; margin: 28px auto 0; padding: 22px 26px;
  background: var(--cream-2); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0;
}
.tldr h2 {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red); margin: 0 0 12px;
}
.tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tldr li {
  position: relative; padding-left: 010px; padding-left: 20px;
  font-size: 15px; line-height: 1.65; color: var(--ink);
}
.tldr li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
@media (max-width: 700px) { .tldr { padding: 18px 18px; } .tldr li { font-size: 14.5px; } }

/* ---------- size guide (visual) ----------
   A bar per size, width proportional to live weight, so the jump between sizes
   is visible instead of needing to be worked out from numbers. */
.sizeguide { max-width: 860px; margin: 34px auto 0; }
.sizeguide h2 {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.sg-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; margin-bottom: 11px; }
.sg-name { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sg-bar { height: 30px; background: #f4f4f6; box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; overflow: hidden; position: relative; }
.sg-fill { height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); display: flex; align-items: center; }
.sg-fill span { font-family: var(--ui); font-size: 11px; color: #fff; padding-left: 10px; white-space: nowrap; }
.sg-price { font-family: var(--display); font-size: 16px; font-weight: var(--h-weight); color: var(--red); white-space: nowrap; }
.sg-row.na .sg-fill { background: var(--ink-3); }
.sg-row.na .sg-price { color: var(--ink-3); font-size: 13px; font-style: italic; }
.sg-note { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
@media (max-width: 640px) {
  .sg-row { grid-template-columns: 70px 1fr; }
  .sg-price { grid-column: 2; justify-self: start; }
}

/* ---------- delivery rate bands ---------- */
.ratemap, .flow, .compare { max-width: 860px; margin: 34px auto 0; }
.ratemap h2, .flow h2, .compare h2 {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.rate-row { display: grid; grid-template-columns: 110px 90px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.rate-price { font-family: var(--display); font-size: 16px; font-weight: var(--h-weight); color: var(--red); white-space: nowrap; }
.rate-bar { height: 10px; background: #f4f4f6; box-shadow: inset 0 0 0 1px var(--line); border-radius: 5px; overflow: hidden; }
.rate-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-deep)); }
.rate-areas { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 640px) {
  .rate-row { grid-template-columns: 1fr; gap: 5px; margin-bottom: 18px; }
  .rate-bar { max-width: 140px; }
}

/* ---------- four-step order flow ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.step-n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-family: var(--ui); font-size: 14px; font-weight: 700;
}
.step h3 { font-size: 17px; margin: 4px 0 5px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* ---------- comparison table ---------- */
.compare-scroll { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.compare th, .compare td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
.compare thead th {
  background: var(--cream-2); font-family: var(--ui); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.compare tbody th {
  background: #fff; font-family: var(--ui); font-size: 12.5px; font-weight: 700;
  color: var(--ink); width: 30%;
}
.compare td { color: var(--ink-2); line-height: 1.6; }