/* Contact (from option 3, "Structured") — title | lede; a ruled directory of three rows (email, how to order, follow),
   the last one ending on whitespace; closing. The kit below cuts this page's head, rows and closing on one
   38.2 | 61.8 line (this page only; the shared .page-head / .closing in style.css are unchanged).
   How to order is a row here, so the footer's how-to-order line is hidden on this page. */

/* ========== opt-3 kit: the same block opens every opt-3 page file, so pages can be mixed ==========
   Every row is cut on one line: rail 38.2 | main 61.8 (1fr | 1.618fr, 55px gap), the line the footer columns stand on.
   A section is a ruled index row (.ix): title on the rail, content on the main side, everything flush left.
   Numbers appear only where they index a real sequence: a page index and the sections it lists, the process steps,
   the mottos. A section ends on whitespace and the next section's rule opens it, so rules never stack into empty bands.
   Product cards and tiles keep the shared 3- and 4-across grids (12 columns: 3 x 4, 4 x 3). */
.ix, .page-head, .closing { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); column-gap: var(--split-gap); }
.ix { display: grid; row-gap: var(--s-3); align-items: start; border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }
.ix-head { grid-column: 1; min-width: 0; }
.ix-head > .num { display: block; margin-bottom: var(--s-1); }
.ix-head h2 { margin: 0; }
.ix-body { grid-column: 2; min-width: 0; }
.ix-body > :last-child { margin-bottom: 0; }
.ix-body > .link-arrow:first-child { margin-top: -12px; } /* keeps the 44px target, sits on the title's first line */
.ix + .grid, .ix + .tiles { margin-top: var(--s-5); }
/* .ix-end: one section link at the right edge, standing on the title's last baseline */
.ix-end { align-items: last baseline; }
.ix-end > .ix-body { justify-self: end; }
.ix-end > .ix-body > .link-arrow:first-child { margin-top: 0; }
.page-head { row-gap: var(--s-4); align-items: start; padding-block: var(--s-6) var(--s-5); }
.page-head:not(.page-head-solo) { background-image: none; } /* the first section rule closes the head */
.page-head > h1, .page-head > .page-head-rail { grid-column: 1; }
.page-head-aside { grid-column: 2; padding: 0; }
.closing { row-gap: var(--s-4); }
.closing > h2 { grid-column: 1; }
.closing-aside { grid-column: 2; padding-top: 0; }
.closing-aside .actions .btn { margin-top: 0; } /* the pair keeps one 13px gap, side by side or stacked */
/* running text keeps to about 70 characters a line */
.prose p, .closing-aside p { max-width: 30em; }
/* a credit that wraps hangs under the name, not under the dash */
.quote figcaption { padding-left: 34px; text-indent: -34px; }
@media (max-width: 999px) {
  .ix, .page-head, .closing { grid-template-columns: minmax(0, 1fr); }
  .ix > *, .page-head > *, .closing > * { grid-column: 1; }
  .ix-end > .ix-body { justify-self: start; }
}
@media (max-width: 759px) {
  .ix-end { row-gap: var(--s-2); }
  /* actions on phones: one column, every button the full width */
  .actions { flex-direction: column; }
  .actions .btn, .closing-aside .btn { width: 100%; }
}
/* ========== end of kit ========== */

/* ---------- page head: title | lede, set on the title's first line ---------- */
.page-head .lede { padding-top: .5em; margin: 0; }

/* ---------- the directory: three ruled rows; the closing's rule follows the last one ---------- */
.contact-row { padding-bottom: var(--s-4); }
.contact-row + .contact-row { border-top-color: var(--rule); }
.contact-row .ix-body p { font-size: var(--t-1); max-width: 30em; }
.contact-email { font-size: clamp(var(--t-2), 1.2rem + 1.4vw, var(--t-4)); line-height: 1.2; margin: 0 0 var(--s-4); overflow-wrap: anywhere; color: var(--cream); }
.contact-row .ix-body .contact-email { font-size: clamp(var(--t-2), 1.2rem + 1.4vw, var(--t-4)); }
.contact-email a { display: inline-block; min-height: 44px; padding-block: 6px; margin-block: -6px; text-decoration: none; }
.contact-email a:hover { text-decoration: underline 1px var(--orange); text-underline-offset: .18em; }
.link-list { list-style: none; margin: -12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); } /* 44px targets, text on the title's first line */
.site-footer .footer-base p:last-child { display: none; } /* "How to order" is a row above */

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .page-head .lede { padding-top: 0; }
  .contact-row { row-gap: var(--s-2); }
  .contact-row .ix-body p { font-size: var(--t-0h); }
  .contact-row .btn { width: 100%; }
  .link-list { flex-direction: column; margin-top: 0; }
}