/* =====================================================================
   THE FOOTER  —  restructured 2026-09-10

   Loaded after jrs-design-system.css and jrs-base-corrections.css, so it
   overrides the footer rules in the base layer. A SEPARATE FILE, not an
   edit of the 118KB base: two hand-merges into that file vanished
   silently on 2026-09-04 (troubleshooting log).

   ---------------------------------------------------------------------
   WHY THIS EXISTS  (Monica, 2026-09-10):

     "you just never designed it on the site in the way that it looks on
      your mockup"

   Correct. What shipped on 2026-09-09 was the OLD footer with three
   things added to it — the green band, a fourth link column, two contact
   lines — while the shape underneath stayed as it was: logo, punchline,
   newsletter, ISSN and contacts all stacked inside one 300px column on
   the left, with the menus crowded into what was left. That is why it
   still read as the old footer however many times it was purged.

   The restructure, after mumblebydesign.com:

     B  identity across the top   logo + statement | newsletter
     C  five equal link tracks    journal · browse · about · libraries · contact
     D  one fine-print row        ISSN · copyright · credit
     E  the wordmark              set large, clipped by the bottom edge

   The green call-to-action band that shipped on 09-09 is GONE (Monica,
   2026-09-10: "Also I dont want the green band"). The letters above keep
   their mockup labels so the design and this file stay readable together.

   Everything is capped at --width-content so the footer lines up with
   the CTA above it and with every other band on the site.
   ===================================================================== */

/* ---------------------------------------------------------------
   Bricks gives every block a container max-width, padding and a flex
   column. Neutralise it once for the whole footer, then lay out. Each
   component rule below carries the .jrs-foot prefix so it outranks
   this reset on specificity as well as on source order.
   --------------------------------------------------------------- */
.jrs-foot .brxe-block {
  width: 100%;
  max-width: none;
  padding: 0;
  align-items: stretch;
}

.jrs-foot {
  background: var(--black);
  color: var(--on-black-text);
  padding: var(--space-xl) var(--jrs-gutter) 0;
  overflow: hidden;              /* the wordmark is clipped by this edge */
}
.jrs-foot .jrs-foot__in {
  max-width: var(--width-content);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------
   B — IDENTITY ACROSS THE TOP
   The statement is a measure rather than a full-width line, which is
   legitimate here because a real second column occupies the rest of
   the row (the newsletter). See jrs-base-corrections.css.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-l);
  border-bottom: 1px solid #2B2B2B;
}
.jrs-foot .jrs-foot__mark {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
/* A flex column stretches its children. An image with a fixed height and
   a stretched width distorts, which is exactly what it did in the first
   mockup. Pin it to the start and let the width follow the height. */
.jrs-foot .jrs-foot__mark .brxe-image,
.jrs-foot .jrs-foot__mark img {
  height: 62px;
  width: auto;
  max-width: none;
  align-self: flex-start;
  object-fit: contain;
  display: block;
}
.jrs-foot .jrs-foot-punch {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--white);
  max-width: 46ch;
  margin: 0;
}

.jrs-foot .jrs-foot-news {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;      /* was 340px in the base, too narrow to type into */
  width: 100%;
}
.jrs-foot .jrs-foot-news__hint {
  font-size: var(--text-micro);
  line-height: 1.7;
  color: var(--on-black-mute);
  max-width: 46ch;
  margin: 0;
}

/* ---------------------------------------------------------------
   C — FIVE EQUAL LINK TRACKS
   Four menus plus the direct routes, all on one grid. "Get in touch"
   is a column rather than two lines buried under the ISSN.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
  padding: var(--space-l) 0;
  border-bottom: 1px solid #2B2B2B;
}
.jrs-foot .jrs-foot__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.jrs-foot .jrs-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jrs-foot .jrs-foot__col li { margin: 0; }
.jrs-foot .jrs-foot__col a {
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--on-black-text);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-foot .jrs-foot__col a:hover { color: var(--brand); }

/* The base sheet gives .jrs-foot-contact its own paragraph spacing,
   which is wrong now that it is a column of links like any other. */
.jrs-foot .jrs-foot-contact ul { margin: 0; padding: 0; }
.jrs-foot .jrs-foot-contact a { color: var(--on-black-text); }
.jrs-foot .jrs-foot-contact a:hover { color: var(--brand); }

/* ---------------------------------------------------------------
   D — ONE FINE-PRINT ROW
   ISSN, copyright and credit on a single line. The ISSN moves out of
   the identity column, where it competed with the newsletter.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot__base {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 22px 0 var(--space-l);
}
.jrs-foot .jrs-foot-fine,
.jrs-foot .jrs-foot-issn {
  font-size: var(--text-micro);
  line-height: 1.9;
  color: var(--on-black-mute);
  margin: 0;
}

/* ---------------------------------------------------------------
   E — THE WORDMARK
   The device from the reference site: the name set very large and cut
   off by the bottom edge, in a near-black that reads as texture rather
   than a second logo. Decorative, so it is hidden from screen readers
   on the element itself.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot__wordmark {
  font-size: clamp(3.2rem, 11.2vw, 9.5rem);
  line-height: 0.78;
  font-weight: var(--fw-head);
  letter-spacing: -0.035em;
  color: #161616;
  white-space: nowrap;
  margin: 0 0 -0.17em;
  user-select: none;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .jrs-foot .jrs-foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .jrs-foot .jrs-foot__top { grid-template-columns: 1fr; }
  .jrs-foot .jrs-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .jrs-foot .jrs-foot__base { justify-content: flex-start; }
}

/* ---------------------------------------------------------------
   THE NEWSLETTER FORM  (JetFormBuilder 15878)

   JFB renders `form.jet-form-builder.layout-column` with each field in
   its own `.jet-form-builder-row`. The base sheet let it stack, which
   put a full-width green button under a white box. In the wider column
   the field and the button sit on one line, sharing an edge.

   Two traps, both found on the rendered page rather than guessed:
   the visible label is a `div.jet-form-builder__label`, NOT a <label>,
   so the base's `label` rule never touched it; and `.jfb-user-info` is
   the honeypot, which must not take a flex slot.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot-form .jet-form-builder {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  row-gap: 8px;
}
.jrs-foot .jrs-foot-form .hidden-field,
.jrs-foot .jrs-foot-form .jfb-user-info,
.jrs-foot .jrs-foot-form .jet-form-builder__label { display: none; }

/* The base sheet sets `.jet-form-builder-row { width: 100% }`, which makes
   both rows fill the line and wrap however the flex basis is set. Width has
   to come off before flex can do anything. */
.jrs-foot .jrs-foot-form .field-type-text-field { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.jrs-foot .jrs-foot-form .field-type-submit-field { flex: 0 0 auto; width: auto; margin: 0; }
.jrs-foot .jrs-foot-form .jet-form-builder-messages-wrap { flex: 1 0 100%; }
.jrs-foot .jrs-foot-form .jet-form-builder__field-wrap { height: 100%; }

.jrs-foot .jrs-foot-form input[type="email"],
.jrs-foot .jrs-foot-form input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: transparent;
  color: var(--white);
  border: 1px solid #3A3A3A;
  border-right: 0;
  border-radius: 0;
}
.jrs-foot .jrs-foot-form input[type="email"]::placeholder,
.jrs-foot .jrs-foot-form input[type="text"]::placeholder { color: var(--on-black-mute); }

/* The Subscribe button gets the site's split wipe like every other button. */
.jrs-foot .jrs-foot-form .jet-form-builder__submit,
.jrs-foot .jrs-foot-form button[type="submit"] {
  height: 48px;
  width: auto;
  padding: 0 26px;
  background-color: var(--brand);
  background-image:
    linear-gradient(var(--primary-hover), var(--primary-hover)),
    linear-gradient(var(--primary-hover), var(--primary-hover));
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  background-size: 0% 50%, 0% 50%;
  transition: background-size var(--motion-enter) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-foot .jrs-foot-form .jet-form-builder__submit:hover,
.jrs-foot .jrs-foot-form button[type="submit"]:hover {
  background-color: var(--brand);
  background-size: 100% 50%, 100% 50%;
  color: var(--white);
}

@media (max-width: 420px) {
  .jrs-foot .jrs-foot-form .field-type-text-field,
  .jrs-foot .jrs-foot-form .field-type-submit-field { flex: 1 0 100%; width: 100%; }
  .jrs-foot .jrs-foot-form input[type="email"] { border-right: 1px solid #3A3A3A; }
  .jrs-foot .jrs-foot-form .jet-form-builder__submit { width: 100%; }
}

/* ---------------------------------------------------------------
   The outward arrow on the Network link. The base sheet's rule reads
   `content: " 97"` — a mojibake of `\2197` that got baked into the
   deployed 118KB file, and it renders as a literal "97" after the
   link. Restated here properly.
   --------------------------------------------------------------- */
.jrs-foot .jrs-foot-net::after { content: " \2197"; }