/* ==========================================================================
   FAME components
   --------------------------------------------------------------------------
   Chrome, the evidence database, and the assignment page.
   Everything reads from tokens.css; no colour or spacing literals here.
   ========================================================================== */

/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Sticky, condensing, with mega-panels on the three sections that have depth
   behind them. Below 1040px the whole thing becomes a drawer and the panels
   become sections inside it — one markup, two layouts, no duplicate nav.

   The height is a custom property rather than a literal because three things
   read it: the sticky offset, the panel's top edge, and the drawer's height
   calculation. Condensing then means changing one number.
   ========================================================================== */

.fame-header {
  --h: var(--header-h);
  --top: 0px;

  position: sticky;
  top: var(--top);
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}

/* The WordPress toolbar is fixed at the top of the window for signed-in users
   and sits above everything. A header stuck to 0 slides underneath it, which is
   how FAME saw their own site: wordmark clipped, nav links half-covered. Every
   editor and every reviewer sees this; a reader never does. */
.admin-bar .fame-header { --top: 32px; }

@media (max-width: 782px) {
  /* The toolbar is taller on a phone, and it stops being fixed. */
  .admin-bar .fame-header { --top: 0px; }
}

/* Only once the page has actually moved. A shadow under a header that is still
   at the top of an unscrolled document is decoration pretending to be depth. */
.fame-header--condensed {
  --h: 60px;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(14, 16, 48, .5);
}

@supports (backdrop-filter: blur(1px)) {
  .fame-header--condensed {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(14px);
  }

  /*
   * The frosting stands down whenever something is open behind the header.
   *
   * backdrop-filter makes an element the containing block for its
   * fixed-position descendants, and two of the header's children are fixed to
   * the window on purpose: the mobile drawer and the panel scrim, both of which
   * measure themselves from the bottom of the header down to the bottom of the
   * screen. Once the header condensed they were measured from its own 60px box
   * instead. The drawer computed to zero height, ten thousand pixels above the
   * viewport, while the scroll lock still held the page — so tapping Menu after
   * scrolling gave no menu and a page that would not move. Reported from the
   * live site, and invisible at the top of the page, which is why it survived
   * launch.
   *
   * A header with a drawer or a panel open has an opaque surface behind it and
   * nothing left to frost, so dropping the filter in those two states costs
   * nothing and hands the window back as the containing block.
   */
  .fame-header--condensed.fame-header--drawer,
  .fame-header--condensed.fame-header--panelled {
    background: var(--paper);
    backdrop-filter: none;
  }
}

/* The IntersectionObserver target. Zero-height, above the header, and the thing
   that decides whether the page has scrolled. */
.fame-header__sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.fame-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--h);
  transition: min-height .2s ease;
}

/* flex: none, not the default. The brand, the menu button and the search all
   sit in one flex row, and at 390px an expanded search box shrank the logo to
   half its width — the wordmark rendered squashed rather than merely small. */
.fame-header__brand {
  display: flex;
  flex: none;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
  font-weight: var(--w-bold);
}

/* 46px in a 72px header. The wordmark is a 3.1:1 lockup with its own internal
   padding, so at the 34px it was set to the letterforms measured about 11px cap
   height and the mark read as a favicon sitting in a lot of white — small
   enough that FAME called it shrunken, and they were right. 46 leaves 13px of
   breathing room top and bottom, which is the least a sticky header wants. */
.fame-header__logo {
  width: auto;
  max-width: none;
  height: 46px;
  transition: height .2s ease;
}

.fame-header--condensed .fame-header__logo { height: 38px; }

@media (max-width: 480px) {
  /* The row also holds a 44px menu button and a 44px search control, and the
     logo is the only elastic thing in it. */
  .fame-header__logo { height: 38px; }
  .fame-header--condensed .fame-header__logo { height: 32px; }
}

/* --------------------------------------------------------------------------
   Nav strip
   -------------------------------------------------------------------------- */

.fame-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.fame-nav__link,
.fame-nav__pending {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.fame-nav__link:hover { color: var(--accent-text); background: var(--indigo-50); }

/* The current section, marked with a rule rather than a colour change — the
   colour is already doing hover. */
.fame-nav__link[aria-current] { color: var(--accent-text); }

.fame-nav__link[aria-current]::after {
  position: absolute;
  right: var(--s-3);
  bottom: 6px;
  left: var(--s-3);
  height: 2px;
  border-radius: 2px;
  background: var(--grad-rule);
  content: "";
}

/* Nav destinations that are not built yet. Rendered as plain text rather than
   dead links — a 404 in primary navigation reads worse than an honest gap. */
.fame-nav__pending {
  color: var(--muted);
  opacity: .55;
  cursor: default;
}

.fame-nav__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 44px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}

.fame-nav__chev {
  width: 12px;
  height: 12px;
  transition: transform .18s ease;
}

.fame-nav__disc[aria-expanded="true"] { color: var(--accent-text); }
.fame-nav__disc[aria-expanded="true"] .fame-nav__chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Mega-panel
   -------------------------------------------------------------------------- */

.fame-megapanel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  width: min(980px, calc(100vw - var(--s-6) * 2));

  /* --shift is written by nav.js when a panel would otherwise run off the edge
     of the window. "Partner with us" is the last item in the strip, and a 980px
     panel centred on it hung about 300px past the right edge of a 1400px
     window; the reader saw a menu with its right-hand column cut off. */
  transform: translateX(calc(-50% + var(--shift, 0px)));

  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* Closed by default the moment we know the page is scripted. Without this the
   server-rendered panels — which exist so the nav works with no JavaScript —
   are all visible until the deferred script arrives. */
.fame-js .fame-megapanel { display: none; }
.fame-js .fame-nav__item.is-open .fame-megapanel { display: block; }

/* A hairline of brand across the top edge, so an open panel reads as attached
   to the header rather than floating over the page. */
.fame-megapanel::before {
  display: block;
  height: 3px;
  background: var(--grad-rule);
  content: "";
}

.fame-megapanel__inner {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-6);
}

/* No lede column on a panel that has none: the grid collapses to one track
   rather than leaving a 250px hole. */
.fame-megapanel__inner:not(:has(.fame-megapanel__lede)) { grid-template-columns: 1fr; }

.fame-megapanel__blurb {
  max-width: 34ch;
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}

.fame-megapanel__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-text);
}

.fame-megapanel__all::after { content: "→"; }
.fame-megapanel__all:hover  { text-decoration: underline; text-underline-offset: .3em; }

/* One row, however many columns there are.
   auto-fit with a 190px minimum was wrapping the Our work panel's three
   columns to two, stacking "By region" under "The database" and making the
   panel 860px tall to show sixteen links. Columns flow across; the panel is as
   tall as its longest column and no taller. */
.fame-megapanel__cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.fame-megacol--wide .fame-megacol__list { columns: 2; column-gap: var(--s-6); }

.fame-megacol__head {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
}

.fame-megacol__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-megacol__link {
  display: block;
  padding: 7px var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  break-inside: avoid;
}

.fame-megacol__link:hover { background: var(--indigo-50); }

.fame-megacol__label {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

/* How many assignments sit behind this route. The number is the reason a
   procurement officer clicks one filter and not another, so it is on the link
   and not one page further in. */
.fame-megacol__count {
  margin-left: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.fame-megacol__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--muted);
}

/* Dismiss layer behind an open panel. Transparent — it exists to catch a click,
   not to dim the page; a mega-panel is navigation, not a modal. */
.fame-header__scrim {
  position: fixed;

  /* --top as well as --h: both are fixed to the window, so the toolbar's height
     has to be counted once for the header and once for anything measured from
     the bottom of it. */
  inset: calc(var(--top) + var(--h)) 0 0;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Header tools: search and the call to action
   -------------------------------------------------------------------------- */

.fame-header__tools {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: var(--s-4);
}

.fame-hsearch {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--mist);
  transition: width .22s ease, border-color .16s ease, background-color .16s ease;
}

.fame-hsearch:focus-within {
  border-color: var(--accent);
  background: var(--paper);
}

.fame-hsearch__input {
  width: 190px;
  min-width: 0;
  height: 100%;
  padding-inline: var(--s-4) 0;
  background: none;
  border: 0;
  font: inherit;

  /* 16px exactly. Below it, iOS Safari zooms the viewport the moment the field
     takes focus and does not zoom back out — from the reader's side the site
     simply breaks when they tap search. */
  font-size: 16px;
  color: inherit;
  transition: width .22s ease, padding .22s ease, opacity .16s ease;
}

.fame-hsearch__input:focus { outline: none; }

.fame-hsearch__submit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}

.fame-hsearch__submit svg { width: 18px; height: 18px; }
.fame-hsearch__submit:hover { color: var(--accent-text); }

/* Collapsed to the glyph once the script confirms it can expand it again.
   Never applied by the server: a search box that shrinks to nothing before its
   opener works is a search box nobody can use. */
.fame-hsearch--collapsible .fame-hsearch__input {
  width: 0;
  padding-inline: 0;
  opacity: 0;
}

.fame-hsearch--collapsible {
  background: none;
  border-color: transparent;
}

.fame-hsearch--collapsible.is-open {
  background: var(--paper);
  border-color: var(--accent);
}

.fame-hsearch--collapsible.is-open .fame-hsearch__input {
  width: 210px;
  padding-inline: var(--s-4) 0;
  opacity: 1;
}

/* The drawer's search. Absent above the breakpoint, where the header row has
   the space for one of its own. */
.fame-hsearch--drawer { display: none; }

.fame-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--s-4);
  border-radius: 999px;
  background: var(--grad-brand);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px -10px var(--indigo-700);
}

/* The label is restated on hover rather than left to inherit. Belt and braces
   against the global link colour, which is what turned it dark here. */
.fame-header__cta:hover {
  color: var(--paper);
  filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   Menu button — hidden on desktop, the drawer's control below it
   -------------------------------------------------------------------------- */

.fame-navtoggle {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding-inline: var(--s-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
}

.fame-navtoggle__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fame-navtoggle__bars {
  position: relative;
  display: block;
  width: 17px;
  height: 11px;
}

.fame-navtoggle__bars::before,
.fame-navtoggle__bars::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
  content: "";
}

.fame-navtoggle__bars::before { top: 1px; }
.fame-navtoggle__bars::after  { top: 8px; }

/* Into a cross, so the control says what pressing it does next. */
.fame-navtoggle[aria-expanded="true"] .fame-navtoggle__bars::before { top: 5px; transform: rotate(45deg); }
.fame-navtoggle[aria-expanded="true"] .fame-navtoggle__bars::after  { top: 5px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Below 1040px: drawer
   -------------------------------------------------------------------------- */

.fame-noscroll,
.fame-noscroll body { overflow: hidden; }

@media (max-width: 1039px) {
  .fame-navtoggle { display: inline-flex; order: 3; }

  /*
   * The header is fixed for as long as the drawer is open, not sticky.
   *
   * fame-noscroll takes overflow off the root, and a sticky element needs a
   * scrollport to stick to. Without one the header dropped back to where it
   * sits in the document — ten thousand pixels above a reader who had scrolled
   * — carrying the only button that closes the drawer off the screen with it.
   * Fixed is safe here precisely because this is the one state in which the
   * page behind does not move, and the drawer's opaque ground covers the 60px
   * of reflow that taking the header out of the flow causes.
   */
  .fame-header--drawer {
    position: fixed;
    top: var(--top);
    left: 0;
    right: 0;
  }

  /* The server ships this button with the hidden attribute and nav.js removes
     it. Without this line the rule above beats the user agent's
     [hidden] { display: none } and the button appears anyway — opening nothing,
     because the script that would have wired it never ran. */
  .fame-navtoggle[hidden] { display: none; }

  .fame-header__tools { order: 2; margin-left: 0; }
  .fame-header__cta   { display: none; }

  /* The strip becomes a panel under the header, scrollable, full remaining
     height. Closed it is display:none rather than height:0 so nothing inside
     it is reachable by Tab while it is shut.

     Scoped to --drawerable, a class nav.js adds at the same moment it un-hides
     the menu button. A drawer is a thing you hide behind a control, so hiding
     it before the control exists takes the navigation off the page entirely —
     which is what happened here on a phone with the script blocked. Unscoped it
     stays a plain vertical list under the header: longer, and reachable. */
  .fame-header--drawerable .fame-nav {
    position: fixed;
    inset: calc(var(--top) + var(--h)) 0 0;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    -webkit-overflow-scrolling: touch;
  }

  .fame-header--drawerable.fame-header--drawer .fame-nav { display: block; }

  .fame-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-9);
  }

  .fame-nav__item {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .fame-nav__link {
    flex: 1;
    min-height: 56px;
    padding-inline: 0;
    font-size: 19px;
  }

  .fame-nav__link[aria-current]::after { display: none; }

  .fame-nav__disc {
    width: 56px;
    height: 56px;
    margin-left: 0;
  }

  .fame-nav__chev { width: 16px; height: 16px; }

  /* In the drawer the panel is a section of the page, not an overlay. */
  .fame-megapanel {
    position: static;
    width: auto;
    margin: 0 0 var(--s-4);
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    flex-basis: 100%;
  }

  .fame-megapanel::before { display: none; }

  .fame-megapanel__inner,
  .fame-megapanel__cols {
    display: block;
    padding: 0;
  }

  .fame-megapanel__lede { display: none; }

  .fame-megacol + .fame-megacol { margin-top: var(--s-5); }
  .fame-megacol--wide .fame-megacol__list { columns: 1; }

  .fame-megacol__link { min-height: 44px; padding-block: 11px; }

  .fame-header__scrim { display: none; }

  /* The header row's search stands down and the drawer's takes over.
     A glyph in the top bar that needs one tap to open and another to submit is
     two taps for something the menu can do in one, and it was competing with
     the menu button for the same 90px of a 390px row. */
  .fame-header__tools .fame-hsearch { display: none; }

  .fame-hsearch--drawer {
    display: flex;
    width: 100%;
    height: 52px;
    margin: var(--s-3) 0 var(--s-4);
    border-color: var(--line);
    background: var(--mist);
  }

  .fame-hsearch--drawer .fame-hsearch__input {
    width: 100%;
    min-width: 0;
    padding-inline: var(--s-5) 0;
    opacity: 1;
  }

  .fame-hsearch--drawer .fame-hsearch__submit {
    width: 52px;
    height: 52px;
    margin-right: 2px;
    color: var(--accent-text);
  }

  /* The nav's own padding starts at the list; the search sits above it and
     needs the same gutter. */
  .fame-nav { padding: 0 var(--gutter); }
  .fame-nav__list { padding-inline: 0; }
}

@media (max-width: 480px) {
  .fame-navtoggle__label { display: none; }
  .fame-navtoggle { width: 44px; padding-inline: 0; justify-content: center; }
}

/* ==========================================================================
   Page hero
   ========================================================================== */

.fame-pagehero {
  /* Same treatment as the homepage hero, so a page hero and the home hero
     read as the same surface rather than as two different darks. */
  background: var(--grad-ink);
  color: var(--on-dark);
  padding-block: var(--s-8) var(--s-7);
}

.fame-pagehero h1 {
  color: var(--on-dark);
  max-width: 22ch;
  margin-block: var(--s-2) var(--s-4);
}

.fame-pagehero__intro {
  color: var(--on-dark-2);
  max-width: 66ch;
  font-size: 16.5px;
}

/* Headline figures. Tabular numerals so the row reads as a record. */
.fame-pagehero__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.fame-figure__value {
  display: block;
  font-size: 29px;
  font-weight: var(--w-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.fame-figure__label {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

/* ==========================================================================
   Filter bar
   ========================================================================== */

.fame-filters {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-4);
}

.fame-filters__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
}

.fame-filters__grid + .fame-filters__grid {
  margin-top: var(--s-3);
  grid-template-columns: repeat(3, 1fr) 2fr auto;
}

.fame-filters label { display: block; }

.fame-filters__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.fame-filters select,
.fame-filters input[type="search"] {
  width: 100%;
  padding: 9px var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.fame-filters select:hover,
.fame-filters input[type="search"]:hover { border-color: var(--indigo-l); }

.fame-filters__clear {
  align-self: end;
  padding: 9px var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
}

.fame-filters__clear:hover {
  border-color: var(--indigo);
  background: var(--paper);
}

/* ==========================================================================
   Result bar
   ========================================================================== */

.fame-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-4);
  font-size: var(--t-xs);
  color: var(--muted);
}

.fame-resultbar__count {
  font-size: var(--t-body);
  color: var(--ink);
}

.fame-resultbar__count b {
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The database table
   --------------------------------------------------------------------------
   Tables, not cards. Cards imply marketing; tables imply records.
   ========================================================================== */

.fame-db { width: 100%; border-collapse: separate; border-spacing: 0; }

.fame-db thead th {
  position: sticky;
  /* Sits below both the header and the filter bar when scrolling. */
  top: calc(var(--header-h) + 118px);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--mist);
  border-block: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}

.fame-db thead th:first-child { border-left: 1px solid var(--line); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.fame-db thead th:last-child  { border-right: 1px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.fame-db td {
  padding: var(--s-4);
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
  transition: background-color .14s ease;
}

/* The status rail.
   A 3px edge on the first cell of every row, green where the work is live and
   invisible where it is not. It is the fastest thing on the page to read: in a
   meeting nobody scans 49 date columns, they look for the green. */
.fame-db td:first-child {
  position: relative;
  padding-left: calc(var(--s-4) + 3px);
}

.fame-db td:first-child::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: transparent;
  transition: background-color .14s ease;
  content: "";
}

.fame-db__row.is-live td:first-child::before { background: var(--live); }

.fame-db__row:hover td { background: var(--brand-50); }
.fame-db__row:hover td:first-child::before { background: var(--brand-500); }
.fame-db__row.is-live:hover td:first-child::before { background: var(--live); }

/* The whole row is not a link — the title is. A clickable <tr> is invisible to
   a screen reader and cannot be opened in a new tab. */
.fame-db__title {
  font-size: 15.5px;
  font-weight: var(--w-bold);
  line-height: 1.35;
  letter-spacing: -.006em;
  color: var(--ink);
  text-decoration: none;
}

.fame-db__row:hover .fame-db__title { color: var(--accent-text); }

/* Enlarges the click target to the row without lying to assistive tech. */
.fame-db__title::after {
  position: absolute;
  inset: 0;
  content: "";
}

.fame-db__row { position: relative; }

.fame-db__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s-2);
}

.fame-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 5px;
  white-space: nowrap;
}

.fame-chip--method {
  color: var(--chip-method-ink);
  background: var(--chip-method-bg);
  border-color: var(--chip-method-br);
}

.fame-chip--sector {
  color: var(--chip-sector-ink);
  background: var(--chip-sector-bg);
  border-color: var(--chip-sector-br);
}

.fame-chip--live {
  color: var(--live-ink);
  background: var(--live-bg);
  border-color: var(--live-br);
}

/* A filled dot rather than a "●" glyph in the label. The character was part of
   the text, so it was read out, it copied and pasted, and it could not be
   sized. */
.fame-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
}

.fame-db__meta { font-size: var(--t-xs); color: var(--muted); }

/* Who FAME contracted with — a fact in its own right, at full ink. */
.fame-db__body {
  display: block;
  font-size: 13px;
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--ink);
}

/* And whose money it was, which is a different fact and looks like one. */
.fame-db__financier {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--brand-700);
}

.fame-db__coverage {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}

.fame-db__dates {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.fame-db__row.is-live .fame-db__dates { color: var(--live-ink); font-weight: 600; }

.fame-db__empty {
  padding: var(--s-9) 0;
  text-align: center;
  color: var(--muted);
}

/* Shown only when a filter hides a row. */
.fame-db__row[hidden] { display: none; }

/* ==========================================================================
   The assignment page
   ========================================================================== */

.fame-project {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--s-8);
  align-items: start;
}

.fame-factbox {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-5);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.fame-factbox__heading {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.fame-factbox dl { margin: 0; }

.fame-factbox dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.fame-factbox dd {
  margin: 3px 0 var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
}

.fame-factbox dd:last-child { margin-bottom: 0; }

.fame-factbox__unset { color: var(--muted); font-style: italic; }

.fame-project__body h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: 21px;
}

.fame-project__body h2:first-child { margin-top: 0; }

.fame-project__body p,
.fame-project__body li {
  font-size: var(--t-body);
  line-height: var(--lh-long);
  color: #2b2e57;
}

.fame-project__objectives { padding-left: 1.1em; }
.fame-project__objectives li { margin-bottom: var(--s-2); }

/* Evidence & method — the panel no competitor publishes. */
.fame-evidence {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.fame-evidence__cell {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.fame-evidence__cell:nth-child(odd) { border-right: 1px solid var(--line); }

.fame-evidence__key {
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.fame-evidence__value { font-size: var(--t-sm); line-height: 1.5; }

/* A restricted assignment still renders as a record. */
.fame-restricted {
  padding: var(--s-5);
  background: var(--mist);
  border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #2b2e57;
}

.fame-pending {
  padding: var(--s-5);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: var(--t-sm);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fame-footer {
  margin-top: var(--s-9);
  padding-block: var(--s-8) var(--s-5);
  background: var(--ink);
  color: var(--on-dark-2);
  font-size: var(--t-sm);
}

.fame-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: var(--s-6) var(--s-5);
}

@media (max-width: 1180px) {
  .fame-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .fame-footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .fame-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}

.fame-footer__org {
  margin-bottom: var(--s-3);
  font-weight: var(--w-bold);
  color: var(--on-dark);
}

/* The wordmark, reversed out for the dark footer.
   brightness(0) crushes the blue to black and invert(1) lifts it to white, so
   the mark reads as a single-colour reversed lockup — which is what a brand's
   own reversed artwork would be. Painting the blue original on near-black
   would put the mark at about 2:1 against its ground. */
.fame-footer__logo {
  display: block;
  width: auto;
  height: 46px;
  margin-bottom: var(--s-4);
  filter: brightness(0) invert(1);
  opacity: .92;
}

.fame-footer__address {
  font-style: normal;
  line-height: 1.7;
  color: var(--on-dark-mute);
}

/* The second registered entity, under the head office. Separated by a rule
   rather than by space alone so the two read as two addresses, not as one
   address that has run on. */
.fame-footer__address + .fame-footer__address {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* --- Social ---------------------------------------------------------------
   Two accounts, and only the two FAME supplied. 44px targets: this sits at the
   very bottom of the page, which on a phone is the hardest place to hit
   accurately. */

.fame-social {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.fame-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.fame-social__link:hover {
  border-color: var(--cyan);
  background: rgba(255, 255, 255, .05);
  color: var(--cyan-l);
}

.fame-social__icon {
  width: 17px;
  height: 17px;
}

.fame-footer__heading {
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.fame-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2;
}

.fame-footer__list--plain { color: var(--on-dark-mute); font-variant-numeric: tabular-nums; }

.fame-footer a { color: var(--on-dark-2); text-decoration: none; }
.fame-footer a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: .18em; }

.fame-footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--on-dark-mute);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .fame-project { grid-template-columns: 1fr; }
  .fame-factbox { position: static; }
  .fame-filters__grid,
  .fame-filters__grid + .fame-filters__grid { grid-template-columns: repeat(2, 1fr); }
  .fame-evidence { grid-template-columns: 1fr; }
  .fame-evidence__cell:nth-child(odd) { border-right: 0; }
}

/*
 * The previous mobile nav lived here as a second @media (max-width: 860px)
 * block: an absolutely-positioned dropdown keyed to .fame-nav.is-open, paired
 * with the toggle handler that used to sit in database.js.
 *
 * It is deleted rather than adapted. Because it came later in the file than the
 * new drawer rules it won below 860px, so the drawer opened into a layout built
 * for a control that no longer existed. Two mobile navigations in one
 * stylesheet is not a conflict you resolve by adjusting specificity.
 */

@media (max-width: 860px) {
  .fame-footer__grid { grid-template-columns: 1fr 1fr; }
  .fame-footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .fame-filters__grid,
  .fame-filters__grid + .fame-filters__grid { grid-template-columns: 1fr; }

  .fame-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .fame-filters { position: static; }

  .fame-pagehero__figures { gap: var(--s-5) var(--s-7); }

  /*
   * On a phone the table becomes one card per assignment.
   *
   * It used to become a stack of labelled lines separated by a hairline, which
   * was a faithful reflow of a table and unreadable as a list: forty-nine
   * records in the same grey, no edges, nothing to tell a reader where one
   * assignment stopped and the next began. FAME's own use for this page is
   * showing the portfolio to a commissioning body inside a short meeting, and
   * that needs the shape of a record to be visible before a word of it is read.
   *
   * So: a bordered card, a status rail down its leading edge, the title as the
   * one big thing, and the three supporting fields as a labelled block under a
   * rule. The table semantics are untouched — this is presentation only, and
   * the header cells are still what a screen reader announces per field.
   */
  .fame-db thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .fame-db, .fame-db tbody, .fame-db tr, .fame-db td { display: block; width: 100%; }

  .fame-db tbody { display: flex; flex-direction: column; gap: var(--s-4); }

  .fame-db__row {
    padding: 0;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(14, 16, 48, .04);
  }

  .fame-db__row.is-live { border-left-color: var(--live); }

  /* The rail is the card's own left border here, so the desktop pseudo-element
     would double it. */
  .fame-db td:first-child::before { display: none; }

  .fame-db td {
    padding: 0 var(--s-4);
    border: 0;
    background: none;
  }

  /* The title block, on paper. No field label above it: the whole card is an
     assignment, so heading the title "ASSIGNMENT" is a word the reader has to
     step over before reaching the one that identifies the record. */
  .fame-db td:first-child { padding: var(--s-4) var(--s-4) var(--s-3); }
  .fame-db td:first-child[data-label]::before { content: none; }

  .fame-db__title { font-size: 16.5px; line-height: 1.3; }

  /* The three supporting fields share one tinted block under a rule, so the
     card reads as "what it is" and then "the particulars" rather than as four
     equal paragraphs. */
  .fame-db td + td {
    padding-block: var(--s-3);
    background: var(--mist);
  }

  .fame-db td + td + td { padding-top: 0; }

  .fame-db td:last-child {
    padding-bottom: var(--s-4);
    border-radius: 0 0 var(--r-md) var(--r-md);
  }

  .fame-db td[data-label]::before {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    content: attr(data-label);
  }

  /* No hover repaint on touch: there is no pointer to leave, so the tint sticks
     to the last row tapped and reads as a selection nobody made. */
  .fame-db__row:hover td { background: none; }
  .fame-db__row:hover td + td { background: var(--mist); }
}