/* malkasem — site stylesheet (the thin layer over the two generated files).
 *
 * WHY THIS FILE EXISTS. `tokens.css` and `components.css` are generated from
 * designs/malkasem/site.css and are never hand-edited. Everything they cover
 * comes from the design; anything the TEMPLATES need that the design's own
 * markup did not use has to live somewhere that survives regeneration, and
 * that is here.
 *
 * ⚠️ NO RAW HEX, AND NO COLOURS AT ALL. Every value below is either a token
 * (`var(--…)`) or a spacing/size that is already a token. The site's
 * acceptance checklist is "no raw hex outside the token files"; a hex literal
 * here would also silently escape the dark theme, which is the practical
 * reason the rule exists.
 *
 * WHAT IS IN HERE, AND WHY IT IS NOT A DESIGN CHOICE:
 *
 *   .pagefoot-grid   `templates/base.html` (the page shell, written separately)
 *                    wraps the footer brand block and the footer nav in this
 *                    element. The design's own footer markup has no such
 *                    wrapper, so components.css has no rule for it and the two
 *                    blocks would stack instead of sitting side by side.
 *   .pagefoot-meta   the © line, same situation.
 *
 * Both reproduce the design's footer proportion — brand at the left with a
 * rule beneath it, nav at the right — using the design's own tokens. They are
 * layout for a shell element, not a new component.
 *
 * If either class ever gains a rule in a future generated components.css, the
 * duplicate here should be deleted rather than kept as an override.
 */

.pagefoot-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-lg);
}

.pagefoot-grid img {
  width: min(100%, 108px);
  height: auto;
}

.pagefoot-grid > div {
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--border);
}

.pagefoot-meta {
  margin: var(--gap-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--meta);
}