/* ============================================================
   home-ll.css — the front page

   The front page is the one page that has to sell the site rather
   than serve a record, so it is allowed two things no other page
   gets: a full-width dark masthead, and the silo colours shown all
   together. Everything below the masthead is the ll- system as it
   stands: the section heading, the table, the coverage note.

   index3.css is no longer loaded. It carried six uppercase
   letterspaced label treatments and six pastel icon-tile colours
   taken from a framework's default palette, neither of which
   belongs to this site.
   ============================================================ */

/* the masthead breaks the page wrap to the full viewport, so the
   page must not be allowed to scroll sideways to meet it */
.ll-body {
  overflow-x: clip;
}

/* --- the masthead ---------------------------------------------------
   The masthead sits on the page's own paper. The only dark element is
   the band of figures that closes it: a strip the width of the window,
   which is enough weight to stop the page opening on plain text and
   far less of it than a full field of navy.
   -------------------------------------------------------------- */
.home-head {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-bottom: 54px;
  width: 100vw;
  padding-top: 58px;
}

.home-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 52px;
  align-items: end;
  width: var(--ll-wrap);
  margin: 0 auto;
}

/* the chart column: the same .ll-chart the analytics pages use, so
   what fills the right of the masthead is the record, not a picture
   of a building */
.home-head-chart {
  margin: 0 0 6px;
}

/* taller than the component's own large size: this one is carrying a
   whole column of the masthead, and the rise across thirteen
   Congresses is the point of showing it */
.home-head-chart .ll-chart {
  height: 218px;
  gap: 5px;
  margin-top: 10px;
}

/* the note on the current Congress's column, under its name */
.home-head-chart .ll-bar-tip em {
  display: block;
  margin-top: 2px;
  color: #b9c6d6;
  font-size: 0.7rem;
  font-style: normal;
}

.home-head-chart figcaption {
  margin-top: 14px;
  color: var(--ll-ink-3);
  font-size: 0.88rem;
  line-height: 1.5;
}

.home-head .ll-h1 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
}

.home-lede {
  max-width: 56ch;
  margin: 0;
  color: var(--ll-ink-2);
  font-size: 1.1rem;
  line-height: 1.62;
}

/* --- the search control --------------------------------------------
   The old page put a button here that went to a search page. The
   search is the reason most people arrive, so it is the control
   itself, and it posts plainly: no typeahead, because the nav
   already carries that component and its element ids cannot appear
   twice on one page.
   -------------------------------------------------------------- */
.home-search {
  margin: 30px 0 42px;
}

.home-search label {
  display: block;
  margin-bottom: 9px;
  color: var(--ll-ink-3);
  font-size: 0.9rem;
}

.home-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 660px;
}

.home-search-row input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 9px;
  background: var(--ll-surface);
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 1.02rem;
}

.home-search-row input::placeholder {
  color: var(--ll-ink-4);
}

.home-search-row input:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

.home-search-row button {
  padding: 15px 30px;
  border: 1px solid var(--ll-accent);
  border-radius: 9px;
  background: var(--ll-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.home-search-row button:hover {
  background: #26467f;
  border-color: #26467f;
}

/* --- the figure band -----------------------------------------------
   Four figures, counted live, in the one dark strip on the page. The
   ochre hairline underneath is the colour the nav and the footer
   already use, so the page is bracketed by it top and bottom.
   -------------------------------------------------------------- */
/* The band was a navy gradient of its own, which read as a second,
   brighter blue against the nav. It is now the nav's exact colour,
   flat: the same furniture at both ends of the page rather than a
   colour the site uses nowhere else. The ochre is a hairline. */
.home-figures {
  background: #121d2b;
  border-bottom: 1px solid #d9a05b;
}

.home-scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: var(--ll-wrap);
  margin: 0 auto;
  padding: 0;
}

.home-scale > div {
  padding: 22px 24px 24px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.home-scale > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.home-scale > div + div {
  padding-left: 24px;
}

.home-scale dt {
  color: #93a4b8;
  font-size: 0.86rem;
  line-height: 1.35;
}

.home-scale dd {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* --- the latest records --------------------------------------------
   The source column is what makes one list work in place of three,
   so it is set to read as a label without shouting: the body face,
   not uppercase, and quiet enough that the record's own title leads.
   -------------------------------------------------------------- */
.home-source {
  display: block;
  color: var(--ll-ink-3);
  font-size: 0.84rem;
  white-space: nowrap;
}

.home-ident {
  display: block;
  margin-top: 2px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
}

.home-record a {
  color: var(--ll-ink);
  font-weight: 600;
  text-decoration: none;
}

.home-record a:hover {
  color: var(--ll-accent);
  text-decoration: underline;
}

/* --- the six sections ----------------------------------------------
   Not cards. The six sit in one ruled field, the way a directory page
   is set: hairlines between them and nothing around the outside. Each
   one sets its own --acc inline, and the accent is spent on the name
   and the figures, where it tells a reader which section they are
   about to land on.
   -------------------------------------------------------------- */
/* The rules are drawn by the cells, not by a gap in a ruled
   background: a background showing through gaps also shows at the
   right edge whenever the column arithmetic leaves a fraction of a
   pixel over. Cell borders mean the field is open on both sides —
   the last column simply has no rule — and the column count is set
   explicitly so the rule can be dropped from the right one. */
.home-silos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  border-top: 1px solid var(--ll-line);
}

.home-silo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px 0;
  border-right: 1px solid var(--ll-line);
  border-bottom: 1px solid var(--ll-line);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease;
}

/* the first cell of each row starts on the page margin, in line with
   the heading above the field; the last has no rule to its right */
.home-silo:nth-child(3n + 1) {
  padding-left: 0;
}

.home-silo:nth-child(3n) {
  border-right: 0;
  padding-right: 0;
}

.home-silo:not(:nth-child(3n + 1)) {
  padding-left: 26px;
}

.home-silo:hover {
  background: var(--ll-surface);
}

/* a rule that draws itself under the name on hover, in that section's
   colour: the colour arrives when a reader goes looking, instead of
   sitting on every cell at once */
/* the accents are dark and low-chroma by design, so what makes them
   read as colour rather than as black is area: the name is set large
   enough to carry the hue, and the figures are large enough to be
   read as figures first */
.home-silo h3 {
  margin: 0;
  color: var(--acc);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.home-silo h3::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 7px;
  background: var(--acc);
  transition: width 180ms ease;
}

.home-silo:hover h3::after,
.home-silo:focus-visible h3::after {
  width: 46px;
}

.home-silo-scope {
  margin: 4px 0 0;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

.home-silo-desc {
  margin: 13px 0 0;
  color: var(--ll-ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* the figures are pushed to the foot of the card so that six cards
   of unequal copy still line up along their numbers */
.home-silo-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--ll-ink-3);
  font-size: 0.86rem;
}

.home-silo-figs b {
  color: var(--acc);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* --- the weekly briefing -------------------------------------------
   The briefing has its own slate accent elsewhere on the site; it is
   used here as the surface, which is what sets this block apart from
   the white cards above it without needing a second typeface.
   -------------------------------------------------------------- */
.home-brief {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
  margin-top: 58px;
  padding: 38px 40px 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, #37474f 0%, #2b3840 100%);
  color: #eceff1;
}

.home-brief-copy h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.home-brief-copy p {
  max-width: 50ch;
  margin: 14px 0 0;
  color: #bfc9ce;
  font-size: 1rem;
  line-height: 1.6;
}

.home-brief-latest a {
  color: #f0c38a;
  text-decoration: underline;
  text-decoration-color: rgba(240, 195, 138, 0.45);
  text-underline-offset: 3px;
}

.home-brief-latest a:hover {
  text-decoration-color: #f0c38a;
}

.home-brief-form {
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
}

.home-brief-form label {
  display: block;
  margin-bottom: 8px;
  color: #cfd8dc;
  font-size: 0.9rem;
}

.home-brief-form input[type="email"] {
  display: block;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: #ffffff;
  color: #0f1b2a;
  font-family: inherit;
  font-size: 1rem;
}

.home-brief-form input[type="email"]:focus-visible {
  outline: 2px solid #f0c38a;
  outline-offset: 2px;
}

.home-brief-form button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 7px;
  background: #d9a05b;
  color: #1b2537;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}

.home-brief-form button:hover {
  background: #e7b374;
}

.home-brief-fine {
  margin: 13px 0 0;
  color: #a5b2b8;
  font-size: 0.81rem;
  line-height: 1.5;
}

/* the honeypot: present for a bot, gone for a reader and a screen
   reader alike. The subscribe endpoint rejects any post that fills it. */
.home-brief-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- phone ---------------------------------------------------------- */
@media (max-width: 980px) {
  /* two across: the rule now falls after every second cell */
  .home-silos {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-silo:nth-child(3n),
  .home-silo:nth-child(3n + 1) {
    border-right: 1px solid var(--ll-line);
    padding-right: 26px;
    padding-left: 26px;
  }

  .home-silo:nth-child(2n + 1) {
    padding-left: 0;
  }

  .home-silo:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
}

@media (max-width: 660px) {
  /* one column: no vertical rules at all */
  .home-silos {
    grid-template-columns: 1fr;
  }

  .home-silos .home-silo {
    border-right: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  /* the chart drops under the copy rather than beside it, and comes
     back to the component's own height */
  .home-head-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-head-chart .ll-chart {
    height: 150px;
  }

  /* the figures go two across: the rules move with them, and the top
     pair gains a rule underneath */
  .home-scale {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-scale > div:nth-child(2n + 1) {
    padding-left: 0;
  }

  .home-scale > div:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }

  .home-scale > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .home-scale > div:nth-child(n + 3) {
    padding-top: 22px;
  }

  .home-brief {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 30px 24px 32px;
  }
}

@media (max-width: 720px) {
  .home-head {
    padding-top: 40px;
    margin-bottom: 40px;
  }

  .home-search {
    margin: 24px 0 34px;
  }

  .home-search-row input,
  .home-search-row button {
    flex: 1 1 100%;
  }

  .home-scale > div,
  .home-scale > div:nth-child(n + 3) {
    padding: 16px 16px 18px 0;
  }

  .home-scale > div:nth-child(2n) {
    padding-left: 16px;
  }

  /* the date column is the first thing to go: the list is already
     in date order, so the exact day is detail rather than structure */
  .home-date {
    display: none;
  }
}