/* ==========================================================================
   MPM public footer — GENERATED by tools/public-footer.js, do not edit
   ==========================================================================
   SELF-SUFFICIENT ON PURPOSE.

   The four public page families do not share a palette. The blog and the
   commercial pages load design/public-header.css and have every token; the
   legal pages define their own smaller inline set with no --accent and no
   --inverse; book.html and thanks.html define a third. A footer written against
   the header's tokens rendered a transparent CTA with invisible text on the
   legal pages — the same defect the blog diagrams had when they painted with
   --ink, a variable nothing defined.

   So the footer maps every colour it needs to a local token first, preferring
   whatever the host page already defines and falling back to the canonical
   value. The fallbacks are not a second palette: they are the same values
   design/public-header.css declares, and a test asserts they still match it.

   Tokens were only half of it. The host pages also style bare ELEMENTS, and the
   footer is made of the same elements. Measured on the live legal pages:

     nav      { background: rgba(11,13,18,.85); position: sticky; z-index: 50;
                backdrop-filter: blur(12px) }   -- their own top bar
     footer   { text-align: center; margin-top: 60px }
     footer a { margin: 0 10px }

   Each link group is a labelled <nav>, so in light theme all four columns
   painted themselves near-black over the cream footer: four dark cards, sticky,
   floating above the page. Dark theme hid it because the colour happened to
   match. book.html and thanks.html have their own nav rule and did the same
   thing in their own palette.

   Hence the reset below. The component declares every property a host element
   selector can reach, so it renders identically in all four page families
   whatever the page around it does. This is a component defending itself, not a
   patch on two pages -- the next public page with a sticky <nav> would have
   reintroduced it.
   ========================================================================== */

/* --- host reset: nothing about the page may reach inside the footer ---
   The class is repeated on the column rather than relying on .mpm-foot nav,
   because book.html and thanks.html theme their top bar with html.light nav,
   which is (0,1,2) and outranks a (0,1,1) descendant selector. (0,2,0) wins
   against every host rule measured. */
.mpm-foot,
.mpm-foot nav,
.mpm-foot .mpm-foot-col {
  position: static;
  top: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  box-shadow: none;
}
.mpm-foot a { margin: 0; }
.mpm-foot h2 { border: 0; padding: 0; }

.mpm-foot {
  --f-bg:      var(--bg-1, #13161d);
  --f-line:    var(--border, #1f242e);
  --f-strong:  var(--text-strong, #f7f2e6);
  --f-dim:     var(--text-dim, #94908a);
  --f-accent:  var(--accent, #c8a679);
  --f-accent-hi: var(--accent-bright, #d6b890);
  --f-accent-tx: var(--accent-text, #c8a679);
  --f-cta:     var(--accent, #c8a679);
  --f-cta-hi:  var(--accent-bright, #d6b890);
  --f-on-accent: var(--inverse, #1a1408);
}
/* The legal pages and the booking pages switch themes by adding .light to the
   root without redefining these, so the light values are stated here too. */
html.light .mpm-foot {
  --f-bg:      var(--bg-1, #fff9ec);
  --f-line:    var(--border, #ded2bc);
  --f-strong:  var(--text-strong, #14110a);
  --f-dim:     var(--text-dim, #685f50);
  --f-accent:  var(--accent, #9c7e54);
  --f-accent-hi: var(--accent-bright, #7d633f);
  --f-accent-tx: var(--accent-text, #7d633f);
  /* The mid-gold that fills the button in dark theme is only 3.6:1 against
     cream, so light theme fills with the deeper step of the same accent and
     hovers deeper still. Both are canonical light-palette values; the button
     keeps its light-on-gold look and becomes readable. */
  --f-cta:     var(--accent-bright, #7d633f);
  --f-cta-hi:  var(--accent-deep, #6b5433);
  --f-on-accent: var(--inverse, #fff9ec);
}

.mpm-foot {
  border-top: 1px solid var(--f-line);
  background: var(--f-bg);
  padding: 56px 28px 28px;
  font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mpm-foot-inner { max-width: 1200px; margin: 0 auto; }

/* Brand column is wider than the link columns; the rest share what is left. */
.mpm-foot-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px 28px;
  padding-bottom: 40px;
}
.mpm-foot-brand p {
  margin: 14px 0 20px;
  color: var(--f-dim);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 34ch;
}
.mpm-foot-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--f-strong); font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.mpm-foot-mark img { display: block; width: 30px; height: 30px; }

.mpm-foot-cta {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 8px;
  background: var(--f-cta); color: var(--f-on-accent);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .15s;
}
.mpm-foot-cta:hover { background: var(--f-cta-hi); }
.mpm-foot-cta:focus-visible { outline: 2px solid var(--f-cta-hi); outline-offset: 3px; }

/* Small print is still small print, but it is set in --f-dim rather than the
   palette's faintest step, which measured 2.6:1 against the footer in both
   themes. Column headings and the bottom bar are 11px and 12.5px, so they need
   4.5:1 like any other body text. The hierarchy is carried by size, weight and
   letter-spacing instead of by a colour nobody can read. */
.mpm-foot-h {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--f-dim); margin: 0 0 14px;
}
.mpm-foot-col ul { list-style: none; margin: 0; padding: 0; }
.mpm-foot-col li { margin: 0 0 10px; }
.mpm-foot-col a {
  color: var(--f-dim); font-size: 13.5px; text-decoration: none;
  transition: color .15s;
}
.mpm-foot-col a:hover { color: var(--f-accent-tx); }
.mpm-foot-col a:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; border-radius: 3px; }

.mpm-foot-bottom {
  border-top: 1px solid var(--f-line);
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.mpm-foot-bottom p { margin: 0; color: var(--f-dim); font-size: 12.5px; }
.mpm-foot-note { color: var(--f-dim); }

/* Stacked, with tap targets that a thumb can hit. Nothing is hidden at any
   width — the legal links in particular stay reachable on a phone. */
@media (max-width: 900px) {
  .mpm-foot-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .mpm-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mpm-foot { padding: 44px 20px 24px; }
  .mpm-foot-top { grid-template-columns: 1fr; gap: 28px; }
  .mpm-foot-col li { margin: 0 0 4px; }
  .mpm-foot-col a { display: inline-block; padding: 8px 0; font-size: 14.5px; }
  .mpm-foot-bottom { flex-direction: column; align-items: flex-start; }
}