/* The field frame: Recursive Dynamics, and the three surfaces it holds.
 *
 * Owned by scripts/build-field-frame.py. The block is stamped between markers on
 * every page that carries it, and this file is the single home for its styles.
 * Before 4 September 2026 the styles were inline on research/recursive-creation/
 * alone, which is why the block could not travel: copying it to a dozen surfaces
 * would have copied the CSS a dozen times.
 *
 * The idiom is the research site's own, not the app's: Source Serif 4 for the
 * name, IBM Plex Mono for the small uppercase label, warm paper #fbfaf5 on the
 * cards, #e0ddd5 rules, gold #8a6508 for the label, radius 10. The one thing
 * added is the containment: the field card is full width and the three sit
 * beneath it, joined by a short spine, so the taxonomy is visible rather than
 * asserted. A reader should be able to see that the field holds the rest without
 * being told.
 *
 * Mobile is co-equal (G-MOBILE-PARITY): one column below 720, the spine keeps
 * its meaning at 390, and every card clears a 44px touch target by padding.
 */

/* Self-constraining, so the block needs no wrapper and the five targets can
 * differ: index and eden-protocol use .container, arc-theory uses .at-wrap,
 * recursive-dynamics and recursive-creation use neither. Inside a narrower
 * column the max-width simply never binds. */
.ff {
  max-width: 900px;
  margin: 2rem auto 1.6rem;
  padding: 0 1.2rem;
}

.ff-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8a6508;
  margin: 0 0 .55rem;
  line-height: 1.5;
}

/* The field card. Distinguished from the three by width and by the gold rule on
 * its leading edge, never by shouting: it is the frame, not the headline. */
.ff-field {
  display: block;
  border: 1px solid #e0ddd5;
  border-left: 3px solid #8a6508;
  border-radius: 10px;
  padding: 1.05rem 1.2rem;
  background: #f7f5ee;
  text-decoration: none;
  min-height: 44px;
}

.ff-field b,
.ff-trio b {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  color: #1c1c19;
  margin-bottom: .35rem;
}

.ff-field b {
  font-size: 1.08rem;
}

.ff-field span,
.ff-trio span {
  display: block;
  font-size: .9rem;
  color: #3b3b34;
  line-height: 1.6;
  font-style: italic;
}

.ff-field em,
.ff-trio em {
  display: block;
  margin-top: .5rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a6508;
}

/* The spine. It carries the whole argument of the block: these three are inside
 * that one. Short, centred on the left rule of the field card so the eye reads
 * descent rather than sequence. */
.ff-spine {
  width: 3px;
  height: 1.15rem;
  margin: 0 0 0 calc(1.2rem - 1px);
  background: linear-gradient(#8a6508, #d8cfae);
  border-radius: 0 0 2px 2px;
}

.ff-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  margin: 0;
}

.ff-trio > * {
  border: 1px solid #e0ddd5;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: #fbfaf5;
  text-decoration: none;
  display: block;
  min-height: 44px;
}

/* The page's own card is a div rather than a link, so it must not look clickable
 * and must not invite a click that goes nowhere. */
.ff-trio > div,
.ff-field.ff-here {
  background: #f2efe6;
  cursor: default;
}

@media (min-width: 720px) {
  .ff-trio {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (hover: hover) {
  a.ff-field:hover,
  .ff-trio a:hover {
    border-color: #c9c0a6;
    background: #fdfcf8;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a.ff-field,
  .ff-trio a {
    transition: border-color .18s ease, background-color .18s ease;
  }
}

/* Outside the field, and drawn as outside it. No spine reaches this card: the
 * registration records Recursive Creation as reachable from the field and never
 * contained by it, and a layout that tucked it under the spine would assert the
 * containment the document denies. It sits below, separated by a rule, with the
 * relation written into its own label. It is also the most speculative of the
 * four, which is the reason the field excludes it: a field defined to include
 * its most speculative neighbour would be graded by that neighbour. */
.ff-outside {
  display: block;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px dashed #d8cfae;
  text-decoration: none;
}

.ff-outside b {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  color: #1c1c19;
  margin-bottom: .35rem;
}

.ff-outside span {
  display: block;
  font-size: .9rem;
  color: #3b3b34;
  line-height: 1.6;
  font-style: italic;
}

.ff-outside em {
  display: block;
  margin-top: .5rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a6508;
}

@media (hover: hover) {
  a.ff-outside:hover b {
    color: #8a6508;
  }
}