/* ============================================================================
   Feed the Camera — components
   Every class is namespaced ftc-. Every colour comes from a token.
   ========================================================================== */

/* ── layout ───────────────────────────────────────────────────────────── */

/* The page measure. A full-bleed band takes the background; the shell inside
   it holds the content. */
.ftc-shell {
  width: 100%;
  max-width: var(--ftc-shell);
  margin-inline: auto;
  padding-inline: var(--ftc-gutter);
}

.ftc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .ftc-split { grid-template-columns: 1fr; } }

.ftc-rule-t { border-top: 1px solid var(--ftc-rule); }
.ftc-rule-b { border-bottom: 1px solid var(--ftc-rule); }
.ftc-rule-double { border-bottom: 3px double var(--ftc-ink); }
.ftc-tint { background: var(--ftc-sheet); }

/* A panel raised off the page. The system has no shadows — a panel is sheet
   ground plus a hairline, and that is the whole vocabulary of elevation. */
.ftc-panel { background: var(--ftc-sheet); border: 1px solid var(--ftc-rule); padding: clamp(20px, 3.5vw, 32px); }

.ftc-section { padding-block: clamp(30px, 5vw, 54px); border-bottom: 1px solid var(--ftc-rule); }
.ftc-section:last-of-type { border-bottom: 0; }

/* ── type ─────────────────────────────────────────────────────────────── */

/* The masthead slug — the row of small caps above the title, borrowed from a
   call sheet header. */
.ftc-slug {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .15em;
  font-size: 10.5px; color: var(--ftc-ink-3); font-weight: 500;
  border-bottom: 1px solid var(--ftc-rule-2); padding-bottom: 10px;
}
.ftc-slug b { color: var(--ftc-ink-2); font-weight: 600; }

.ftc-eyebrow {
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; color: var(--ftc-ink-3); font-weight: 500; margin: 0 0 14px;
}
.ftc-eyebrow--accent { color: var(--ftc-gold-text); }

.ftc-display {
  font-family: var(--ftc-display);
  font-size: clamp(46px, 11.5vw, 132px); line-height: .92; letter-spacing: -.022em;
}
.ftc-h2 { font-family: var(--ftc-display); font-size: clamp(28px, 4.2vw, 44px); line-height: 1.06; letter-spacing: -.018em; margin: 0 0 .55em; max-width: 22ch; }
.ftc-h3 { font-family: var(--ftc-caps); font-size: 12.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--ftc-ink-2); font-weight: 600; }

.ftc-prose { max-width: var(--ftc-measure); }
.ftc-prose p { color: var(--ftc-ink-2); }
.ftc-body { color: var(--ftc-ink-2); }
.ftc-note { font-size: 14.5px; color: var(--ftc-ink-3); }

/* Opening paragraph. The drop cap is the one flourish the system allows, and
   only once per page — it marks where the reading starts. */
.ftc-lead { color: var(--ftc-ink); font-size: 1.09em; }
.ftc-lead::first-letter {
  font-family: var(--ftc-display); font-size: 3.5em; float: left; line-height: .8;
  padding: .05em .1em 0 0; color: var(--ftc-gold-text); font-weight: 600;
}

.ftc-pull {
  font-family: var(--ftc-display); font-size: clamp(22px, 3vw, 31px); line-height: 1.25;
  color: var(--ftc-ink); border-left: 3px solid var(--ftc-gold);
  padding: 2px 0 2px 22px; margin: clamp(24px, 4vw, 38px) 0; max-width: 40ch;
}
.ftc-pull cite {
  display: block; font-family: var(--ftc-caps); font-style: normal; font-size: 11px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ftc-ink-3); margin-top: 12px;
}

/* An inline link inside prose. Underlined in gold at the same weight as the
   text it sits in — the accent marks the link without the link shouting. */
.ftc-textlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ftc-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ftc-textlink:hover { color: var(--ftc-gold-text); text-decoration-color: var(--ftc-gold-text); }

.ftc-colophon {
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .15em;
  font-size: 10.5px; color: var(--ftc-ink-3); display: flex; flex-wrap: wrap; gap: 6px 24px;
}

/* ── records ──────────────────────────────────────────────────────────── */

/* A numbered run of records — hairline separators, the number where a bullet
   would be. Used for the crew call-out and anywhere a list is a set of
   entries rather than prose. */
.ftc-records { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--ftc-rule); border: 1px solid var(--ftc-rule); }
.ftc-records > li { background: var(--ftc-sheet); padding: 15px 18px; display: flex; gap: 14px; align-items: baseline; }
.ftc-records__n { font-family: var(--ftc-data); font-size: 12px; color: var(--ftc-gold-text); flex: 0 0 auto; }
.ftc-records__t { color: var(--ftc-ink-2); font-size: 17px; }

/* ── filmography ──────────────────────────────────────────────────────────
   Ported out of flowspire-site's globals.css, where these lived as .fs-ftc*
   and .fs-ftclist*. Same geometry, rebuilt on Feed the Camera's own tokens.

   One substantive change: the accent was --fs-accent, a terracotta that is a
   RULE colour. Gold is the same kind of colour — it fails contrast as small
   text on paper — so the year and the via marker take --ftc-gold-text, the
   darkened text variant, not --ftc-gold.
   ------------------------------------------------------------------------ */

/* A short sample — a handful of titles with room to breathe. */
.ftc-credits { margin: 0; padding: 0; list-style: none; }
.ftc-credits__row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
  border-top: 1px solid var(--ftc-rule); padding: 18px 0;
}
.ftc-credits__row:last-child { border-bottom: 1px solid var(--ftc-rule); }
.ftc-credits__year { font-family: var(--ftc-data); font-size: 11px; letter-spacing: .16em; color: var(--ftc-gold-text); }
.ftc-credits__title { font-size: clamp(18px, 2vw, 24px); font-weight: 600; letter-spacing: -.025em; }
.ftc-credits__director { font-family: var(--ftc-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ftc-ink-3); }
@media (max-width: 640px) { .ftc-credits__row { grid-template-columns: 1fr; gap: 6px; } }

/* The whole filmography. Every row now carries a year and a country, so it
   reads as a record of columns rather than a run of names: number, title and
   director, year, country. One column, because four fields in two columns on a
   laptop is a crossword. */
.ftc-filmlist { list-style: none; margin: 0; padding: 0; }
.ftc-filmlist__row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 5.5rem 10rem;
  gap: 2px 18px; align-items: baseline;
  border-top: 1px solid var(--ftc-rule); padding: 11px 0;
}
.ftc-filmlist__row:last-child { border-bottom: 1px solid var(--ftc-rule); }
.ftc-filmlist__n { font-family: var(--ftc-data); font-size: 10px; letter-spacing: .12em; color: var(--ftc-ink-3); }
.ftc-filmlist__title { font-size: 16px; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
/* Marks a director sourced from IMDb rather than the family's own record — a
   name we went and found is a different kind of fact from a name the family
   put there, and the page has to keep saying so. */
.ftc-filmlist__via { color: var(--ftc-gold-text); margin-left: 3px; }
.ftc-filmlist__director {
  grid-column: 2; font-family: var(--ftc-data); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ftc-ink-3);
}
.ftc-filmlist__year { font-family: var(--ftc-data); font-size: 12.5px; color: var(--ftc-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A derived year is an estimate wearing the same clothes as a documented one
   unless it is marked. "c." is the mark; the legend says what it means. */
.ftc-filmlist__year--derived { color: var(--ftc-ink-3); }
.ftc-filmlist__country { font-family: var(--ftc-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ftc-ink-3); }
/* A row the record keeps but does not count — a job not taken, or work that
   was not a film. It stays in order and says why. */
.ftc-filmlist__row--aside .ftc-filmlist__title { color: var(--ftc-ink-3); font-style: italic; font-weight: 400; }
@media (max-width: 860px) {
  .ftc-filmlist__row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .ftc-filmlist__country { grid-column: 2; }
}
@media (max-width: 560px) {
  .ftc-filmlist__row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ftc-filmlist__year { grid-column: 2; }
}

/* ══ filter bar ═══════════════════════════════════════════════════════════ */

.ftc-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; align-items: end;
  background: var(--ftc-sheet); border: 1px solid var(--ftc-rule);
  padding: 16px; margin-bottom: 18px;
}
.ftc-controls .ftc-field { margin-bottom: 0; }
.ftc-select {
  width: 100%; font-size: 15px; color: var(--ftc-ink); font-family: var(--ftc-read);
  background: var(--ftc-sunk); border: 1px solid var(--ftc-edge); border-radius: 2px; padding: 10px 11px;
}
.ftc-controls__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--ftc-rule-2); padding-top: 13px;
}

/* ── controls ─────────────────────────────────────────────────────────── */

.ftc-btn {
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .13em;
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--ftc-ink); color: var(--ftc-paper);
  border: 1px solid var(--ftc-ink); border-radius: 2px; padding: 13px 26px;
}
.ftc-btn:hover { background: var(--ftc-gold-text); border-color: var(--ftc-gold-text); color: #fff; }
.ftc-btn--ghost { background: none; color: var(--ftc-ink-2); border-color: var(--ftc-edge); }
.ftc-btn--ghost:hover { background: none; color: var(--ftc-ink); border-color: var(--ftc-axis); }

.ftc-field { margin-bottom: 17px; }
.ftc-field:last-of-type { margin-bottom: 22px; }
.ftc-label {
  display: block; font-family: var(--ftc-caps); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ftc-ink-3); font-weight: 500; margin-bottom: 6px;
}
.ftc-label__opt { text-transform: none; letter-spacing: .02em; font-size: 11.5px; opacity: .85; }
.ftc-input {
  width: 100%; font-size: 17px; color: var(--ftc-ink);
  background: var(--ftc-sunk); border: 1px solid var(--ftc-edge); border-radius: 2px; padding: 11px 12px;
}
textarea.ftc-input { min-height: 130px; resize: vertical; line-height: 1.5; }
.ftc-input::placeholder { color: var(--ftc-ink-3); opacity: .75; }
.ftc-input[aria-invalid="true"] { border-color: var(--ftc-urgent); }
.ftc-drop { background: none; border: 1px dashed var(--ftc-axis); padding: 13px; font-family: var(--ftc-caps); font-size: 13px; color: var(--ftc-ink-2); }
.ftc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
@media (max-width: 620px) { .ftc-row { grid-template-columns: 1fr; } }

.ftc-err {
  display: block; font-family: var(--ftc-caps); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ftc-urgent); margin-top: 6px;
}

/* ── notices ──────────────────────────────────────────────────────────── */

.ftc-notice { font-size: 15px; margin: 16px 0 0; padding: 12px 15px; background: var(--ftc-band); border-left: 3px solid var(--ftc-gold); color: var(--ftc-ink); }
.ftc-notice a { color: var(--ftc-gold-text); font-weight: 600; }
.ftc-notice[data-tone="bad"] { border-left-color: var(--ftc-urgent); }

.ftc-pill {
  display: inline-block; font-family: var(--ftc-caps); font-size: 10px; text-transform: uppercase;
  letter-spacing: .11em; padding: 2px 8px; border: 1px solid var(--ftc-edge);
  border-radius: 99px; color: var(--ftc-ink-2); white-space: nowrap;
}

/* ══ navigation ═══════════════════════════════════════════════════════════ */

.ftc-nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ftc-paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ftc-rule);
}
.ftc-nav__in { display: flex; align-items: baseline; gap: 22px; padding-block: 14px; }
.ftc-nav__mark { font-family: var(--ftc-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.ftc-nav__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ftc-nav__link {
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .13em;
  font-size: 10.5px; font-weight: 500; color: var(--ftc-ink-3); text-decoration: none; white-space: nowrap;
}
.ftc-nav__link:hover { color: var(--ftc-ink); }
/* The page you are on. Not a link colour — a rule under it, like a tab. */
.ftc-nav__link[aria-current="page"] { color: var(--ftc-ink); border-bottom: 2px solid var(--ftc-gold); padding-bottom: 2px; }
@media (max-width: 720px) {
  .ftc-nav__in { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ftc-nav__links { margin-left: 0; }
}

/* ══ archive figures ══════════════════════════════════════════════════════ */

.ftc-figure { margin: 0; }
/* height:auto with width/height attributes present gives the browser the
   aspect ratio up front, so a lazy image reserves its space instead of
   shoving the page down when it arrives. */
.ftc-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--ftc-rule); }
.ftc-figure__cap {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; color: var(--ftc-ink-3); margin-top: 10px;
}
/* A portrait print at full column width is 1400px tall and swallows the page.
   Cap it: the frame is the subject, not the scale. */
.ftc-figure--portrait { max-width: 560px; }

/* An archive image nobody has identified is an open question, not decoration —
   the caption carries the ask. */
.ftc-figure__ask { color: var(--ftc-gold-text); text-decoration: none; border-bottom: 1px solid var(--ftc-gold); }

/* A field that must be invisible to people and present for machines.
   Off-screen rather than display:none or visibility:hidden, because the
   cruder crawlers skip anything they can tell is not rendered. */
.ftc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══ contributors ═════════════════════════════════════════════════════════ */

/* One row per person, on the same ruled grid as the timeline, because this is
   the same kind of record: a name, what they are to the story, and what they
   gave it. The number is there so the list can be cited. */
.ftc-people { list-style: none; margin: 0; padding: 0; }
.ftc-people__row {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 2px 20px;
  border-top: 1px solid var(--ftc-rule); padding: 22px 0;
}
.ftc-people__row:last-child { border-bottom: 1px solid var(--ftc-rule); }
.ftc-people__n { font-family: var(--ftc-data); font-size: 11px; color: var(--ftc-gold-text); padding-top: 7px; }
.ftc-people__name { font-family: var(--ftc-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.ftc-people__role {
  grid-column: 3; grid-row: 1; align-self: baseline; text-align: right;
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; color: var(--ftc-ink-3); white-space: nowrap;
}
.ftc-people__what { grid-column: 2 / 4; color: var(--ftc-ink-2); margin: 4px 0 0; }
@media (max-width: 620px) {
  .ftc-people__row { grid-template-columns: 1fr; }
  .ftc-people__n { padding-top: 0; }
  .ftc-people__role { grid-column: 1; grid-row: auto; text-align: left; margin-top: 2px; }
  .ftc-people__what { grid-column: 1; }
}

/* ══ masthead lockup ══════════════════════════════════════════════════════ */

/* FEED is the artwork, not type.
   The wordmark was drawn in a face none of the four self-hosted ones match —
   its serifs are heavy slabs where Bodoni's are hairlines, and no amount of
   scaleX reconciles the two. Setting it live would put a second, different
   wordmark next to the logo on every page, so the real letterforms are used.

   It is carried as a MASK rather than an image, so the colour comes from the
   token and light and dark need one file between them rather than two that
   can drift apart. Where masks are unsupported the @supports block never
   applies and the plain text wordmark underneath is what shows — which is
   exactly the right fallback, so nothing is hidden up front. */
.ftc-nav__mark { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ftc-ink); }
.ftc-nav__feed { font-family: var(--ftc-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.ftc-nav__sub { display: none; }

@supports ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
  .ftc-nav__feed {
    display: block; width: 128px; height: 24px; font-size: 0; color: transparent;
    background: var(--ftc-ink);
    -webkit-mask: url("../images/feed-mark.png") left center / contain no-repeat;
    mask: url("../images/feed-mark.png") left center / contain no-repeat;
  }
  /* THE / CAMERA stays live text: at nine pixels, letterspaced to .38em, the
     face is past telling apart, and keeping it as text means the mark still
     reads as words to a screen reader and to anything that strips images. */
  .ftc-nav__sub {
    display: block; font-family: var(--ftc-display); font-weight: 700;
    font-size: 9px; line-height: 1.4; letter-spacing: .38em;
    color: var(--ftc-gold-text); text-transform: uppercase;
  }
}
@media (max-width: 560px) {
  .ftc-nav__mark { gap: 10px; }
  @supports ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
    .ftc-nav__feed { width: 107px; height: 20px; }
    .ftc-nav__sub { font-size: 8px; letter-spacing: .3em; }
  }
}

/* ══ outcome pages ════════════════════════════════════════════════════════ */

/* A page that exists to say one thing. The mark, then the statement at display
   size, then the two things worth doing next — and the page is sized so all
   three land together without a scroll on a laptop. */
.ftc-outcome { padding-block: clamp(30px, 7vh, 72px); }
.ftc-outcome__mark {
  font-family: var(--ftc-data); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ftc-gold-text);
  margin: 0 0 18px;
}
/* An expired link is not a failure anyone needs alarming about — nothing was
   stored, so the mark steps back to the quiet tier rather than going red. */
.ftc-outcome__mark--spent { color: var(--ftc-ink-3); }
.ftc-outcome__h { margin: 0 0 18px; }
.ftc-outcome .ftc-prose { max-width: 46ch; }

/* The two next steps, under a double rule: the same device the letter's
   masthead uses, so arriving here from the email feels like one object. */
.ftc-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 3px double var(--ftc-ink); margin-top: clamp(28px, 5vh, 48px);
}
.ftc-next__col { padding: 20px 24px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.ftc-next__col + .ftc-next__col { padding: 20px 0 4px 24px; border-left: 1px solid var(--ftc-rule); }
.ftc-next__col p { margin: 0; color: var(--ftc-ink-2); font-size: 16px; }
.ftc-next__go {
  font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .13em;
  font-size: 11.5px; font-weight: 600; color: var(--ftc-gold-text);
  text-decoration: none; border-bottom: 1px solid var(--ftc-gold); align-self: flex-start;
}
@media (max-width: 620px) {
  .ftc-next { grid-template-columns: 1fr; }
  .ftc-next__col { padding: 20px 0 4px; }
  .ftc-next__col + .ftc-next__col { padding: 20px 0 4px; border-left: 0; border-top: 1px solid var(--ftc-rule); }
}

/* ══ timeline ═════════════════════════════════════════════════════════════ */

.ftc-timeline { list-style: none; margin: 0; padding: 0; }
.ftc-timeline__row {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 4px 26px;
  border-top: 1px solid var(--ftc-rule); padding: 18px 0;
}
.ftc-timeline__row:last-child { border-bottom: 1px solid var(--ftc-rule); }
.ftc-timeline__when { font-family: var(--ftc-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ftc-timeline__tag {
  grid-column: 1; font-family: var(--ftc-caps); text-transform: uppercase;
  letter-spacing: .13em; font-size: 9.5px; color: var(--ftc-gold-text); margin-top: 2px;
}
.ftc-timeline__title { grid-column: 2; grid-row: 1; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.ftc-timeline__body { grid-column: 2; color: var(--ftc-ink-2); font-size: 16.5px; }
@media (max-width: 620px) {
  .ftc-timeline__row { grid-template-columns: 1fr; gap: 3px; }
  .ftc-timeline__title, .ftc-timeline__body { grid-column: 1; }
  .ftc-timeline__title { grid-row: auto; }
}

/* ══ index cards (the numbered run of sections) ═══════════════════════════ */

.ftc-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ftc-rule); border: 1px solid var(--ftc-rule); }
.ftc-index__item { background: var(--ftc-sheet); }
.ftc-index__link { display: grid; grid-template-columns: 3rem 1fr auto; gap: 4px 18px; padding: 17px 20px; text-decoration: none; align-items: baseline; }
.ftc-index__link:hover { background: var(--ftc-wash); }
.ftc-index__n { font-family: var(--ftc-data); font-size: 11px; color: var(--ftc-gold-text); }
.ftc-index__t { font-family: var(--ftc-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.ftc-index__d { grid-column: 2; color: var(--ftc-ink-2); font-size: 16px; }
.ftc-index__go { color: var(--ftc-ink-3); font-size: 17px; }
@media (max-width: 560px) { .ftc-index__link { grid-template-columns: 2.4rem 1fr; } .ftc-index__go { display: none; } }

/* ══ project cards ════════════════════════════════════════════════════════ */

.ftc-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ftc-rule); border: 1px solid var(--ftc-rule); }
@media (max-width: 800px) { .ftc-projects { grid-template-columns: 1fr; } }
/* A column, so the concept artwork can be pushed to the foot of the card.
   The two cards hold different amounts of prose; without this the artwork
   starts at a different height in each and the pair reads as misaligned.
   Every child already has margin-top: 0, so flex collapses no margins that
   were doing any work and the spacing above is unchanged. */
.ftc-project { background: var(--ftc-sheet); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; }
.ftc-project .ftc-figure { margin-top: auto; padding-top: clamp(20px, 3vw, 30px); }
/* The artwork is the only image on the site that is not archive material, so it
   is mounted rather than printed: the near-black ground it was drawn against.
   The two are a hair apart in ratio (2:3 against 27:40), which left their
   captions out of line across the pair. Pinning both to 2:3 and letterboxing
   rather than cropping fixes that without touching a millimetre of either
   design — the bar it adds is the same near-black as the artwork on it. */
.ftc-figure--cover img { background: #121212; aspect-ratio: 2 / 3; object-fit: contain; }
.ftc-project__meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.ftc-project__n { font-family: var(--ftc-data); font-size: 11px; color: var(--ftc-ink-3); }

/* ══ search ═══════════════════════════════════════════════════════════════ */

.ftc-search { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.ftc-search .ftc-field { flex: 1 1 260px; margin-bottom: 0; }
.ftc-search__count { font-family: var(--ftc-caps); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--ftc-ink-3); white-space: nowrap; padding-bottom: 12px; }
.ftc-search__count b { font-family: var(--ftc-display); font-size: 20px; color: var(--ftc-ink); }

/* ══ empty state ══════════════════════════════════════════════════════════ */

/* A list with nothing in it yet. The zero is the point: it says "not guessed"
   rather than hiding the fact that nobody has agreed to be named. */
.ftc-empty { border: 1px solid var(--ftc-rule); background: var(--ftc-sheet); padding: clamp(24px, 4vw, 44px); text-align: center; }
.ftc-empty__n { font-family: var(--ftc-display); font-size: clamp(44px, 7vw, 74px); line-height: 1; color: var(--ftc-ink-3); font-variant-numeric: tabular-nums; }
.ftc-empty__t { font-family: var(--ftc-display); font-size: clamp(20px, 2.6vw, 27px); margin-top: 12px; }
.ftc-empty__b { color: var(--ftc-ink-2); max-width: 48ch; margin: 12px auto 0; }