/* The footer, and only the footer.

   One file because there is one footer. It used to live in theme.css, which
   the twenty-two generated pages load and the six section studies do not, so
   the studies had no footer at all or a hand-built one of their own. Both the
   generated pages and the studies now link this, and build/studies.mjs puts
   the same markup on the studies, so there is a single source for both halves.

   Every value is LITERAL, and deliberately so. The first version of this file
   read the site tokens with fallbacks, on the theory that a generated page
   would supply them and a study would fall back. It does not work: the studies
   define --film and --gold too, with their own meanings, so the footer came out
   with a transparent ground and near-black headings on all six of them. A
   token that exists but means something else never reaches its fallback.

   The footer is the film ground on every page of the site, in both themes,
   which is what makes literals the right answer rather than a shortcut: there
   is nothing here that should ever follow the page it is sitting on. */

.foot {
  --f-film:      #0d0b08;
  --f-bone:      #f6eee1;
  --f-bone-soft: #d6cbb8;
  --f-gold:      #cba64e;
  --f-gold-ink:  #1a1409;
  --f-wrap:      74rem;
  --f-gut:       clamp(1.25rem, 4vw, 3.5rem);
  --f-serif:     Cormorant, "Cormorant Garamond", Georgia, serif;
  --f-sans:      Source, "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-family: var(--f-sans);
}

.foot { background: var(--f-film); color: var(--f-bone); padding: clamp(3rem, 8vh, 5rem) var(--f-gut) 2rem; }
.foot__wrap { width: min(100%, var(--f-wrap)); margin-inline: auto;
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.foot__brand { grid-column: span 2; }
.foot__logo { display: block; width: min(100%, 20rem); min-width: 15rem; height: auto; }
.foot__org, .foot__when { font-size: .86rem; color: var(--f-bone-soft); margin-top: .4rem; }
.foot h2 { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600; color: var(--f-gold); margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.foot a { font-size: .92rem; color: rgba(246,238,225,.82); text-decoration: none; }
.foot a:hover { color: var(--f-bone); text-decoration: underline; text-underline-offset: .25em; }
.foot__news label { margin-bottom: 0; }
.foot__legal { width: min(100%, var(--f-wrap)); margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  border-top: 1px solid rgba(246,238,225,.16); padding-top: 1.2rem;
  font-size: .8rem; color: var(--f-bone-soft); }
.foot input { background: rgba(246,238,225,.06); border-color: rgba(246,238,225,.28); color: var(--f-bone); }
.foot input::placeholder { color: rgba(214,203,184,.6); }
.foot :focus-visible { outline-color: var(--f-gold); }
.foot__legal-links { display: inline-block; margin-left: .6rem; }
.foot__legal-links a { font-size: inherit; margin-right: .8rem; text-decoration: underline; text-underline-offset: .25em; }

/* The form the footer carries. On a generated page theme.css already styles
   .btn--gold and .field; a study has neither, so both are restated here
   scoped under .foot, where they cannot reach anything else on the page. */
.foot .field { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.foot .field input { flex: 1 1 12rem; min-width: 0; }
.foot label { display: block; font-family: var(--f-sans); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--f-bone-soft); margin-bottom: .45rem; }
.foot input {
  font: inherit; font-size: .92rem; padding: .7em .9em; border-radius: .4rem;
  border: 1px solid rgba(246,238,225,.28);
}
.foot .btn--gold {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-size: .92rem; font-weight: 600; line-height: 1;
  padding: .8em 1.4em; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(180deg, #d8ad52, #b7862f); color: var(--f-gold-ink);
  text-decoration: none; cursor: pointer;
}
.foot .btn--gold:hover { background: linear-gradient(180deg, #e2b95f, #c08f34); }
.foot .field__msg { font-size: .82rem; margin-top: .5rem; color: var(--f-bone-soft); }
.foot .field__msg[data-ok]  { color: var(--f-gold); }
.foot .field__msg[data-bad] { color: #f0b8a0; }
.foot .field__msg a { color: var(--f-gold); }