/* The footer, as the thing Zineps makes.

   Six live product footers were measured before this was drawn (stripe, linear,
   clerk, vercel, shippo, resend). Four of the six set every word at one size and
   carry rank in colour and column position instead, so this one does too: 16
   throughout, which also keeps the page at its three sizes. Their block runs 0
   to 15% of the page height, median 6.5%. None of the six uses the giant
   wordmark that three of the five board pins use, so that move is a board
   convention rather than a product one and is not taken.

   The shape is a shipping label, because a label is the product: the site says
   "print labels in 1 click" and the cards section already draws one. A label's
   FROM block holds a company's address, which is what a footer holds anyway, so
   the conceit carries real content rather than decorating it. It stays a layout,
   not a costume: no monospace, no paper texture, no uppercase, our own type and
   our own hairlines. */

/* The footer sits on the page's own ground, on the captain's instruction: "bg
   color of footer same as rest of site". Stripe puts its footer one step off the
   page (#f8fafd against white); this one does not, so the label sheet's hairline
   is the only thing separating it from the page and has to carry that alone. */
.ship {
  padding: var(--s-9) var(--s-8);
}

/* The label sheet. A white face on the section's ground, edged the way the
   dashboard picture is edged. With the section now on the page's own ground that
   line is the only separation the sheet has, so it steps from --g-200 to --g-300
   to stay readable against --g-25 rather than against --g-50. */
.label {
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--g-0);
  border: var(--hairline) solid var(--g-300);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The carrier band a label carries across its top. */
.label-band {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border-bottom: var(--hairline) solid var(--g-200);
}

.label-mark { height: var(--logo-h); width: auto; display: block; }
.label-band .meta { color: var(--g-500); }
.label-route { margin-inline-start: auto; }

/* The body: the FROM block, then the three zones of links. The from block is
   wider because an address sets longer lines than a link does. */
.label-body {
  display: grid;
  grid-template-columns: var(--from-col) repeat(3, minmax(0, 1fr));
}

.zone {
  padding: var(--s-6);
  border-inline-start: var(--hairline) solid var(--g-200);
}

.zone-from { border-inline-start: 0; }
.zone-name { color: var(--g-500); margin-bottom: var(--s-4); }

.zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.from-lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-style: normal;   /* <address> renders slanted by default; the house rules refuse that */
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  color: var(--g-600);
}

.from-name { color: var(--g-900); }

/* Links are ink, labels are grey. With one type size that colour step is the
   whole hierarchy, so it does the work an extra size would have done. */
.zone-link {
  display: inline-block;
  color: var(--g-900);
  font-size: var(--t-ui);
  line-height: var(--lh-meta);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.zone-link:hover { color: var(--m-800); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--s-1); }
.zone-link:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); border-radius: var(--radius-inner); }

/* The bottom band, where a label carries its barcode and the line under it.
   The bars are generated from "ZINEPS SHIP EVERY ORDER", one bar width per bit
   of each letter, so the pattern is the sentence and not noise. */
.label-foot {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) var(--s-6);
  border-top: var(--hairline) solid var(--g-200);
}

.barcode {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--barcode-h);
  display: block;
  fill: var(--g-900);
}

.label-code {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  color: var(--g-500);
  font-variant-numeric: tabular-nums;   /* the aligned figures a label has, without a mono face */
}

@media (prefers-reduced-motion: reduce) {
  .zone-link { transition: none; }
}

@media (max-width: 960px) {
  .ship { padding: var(--s-8) var(--s-5); }
  /* The from block takes the full width and the three zones share the row under
     it, so no column falls below a readable line. */
  .label-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zone-from { grid-column: 1 / -1; border-bottom: var(--hairline) solid var(--g-200); }
  .zone-from + .zone { border-inline-start: 0; }
}

@media (max-width: 560px) {
  .label-band { flex-wrap: wrap; gap: var(--s-3); }
  .label-route { margin-inline-start: 0; flex-basis: 100%; }
  .label-body { grid-template-columns: minmax(0, 1fr); }
  .zone { border-inline-start: 0; }
  .zone + .zone { border-top: var(--hairline) solid var(--g-200); }
  /* The barcode goes above its line rather than beside it, which is how a label
     sets them when it is narrow. */
  .label-foot { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .barcode { flex: none; width: 100%; }
  .label-code { flex-wrap: wrap; gap: var(--s-3); }
}