/**
 * Pride Flag Database — Styles
 * Archival, research-based, museum-quality aesthetic.
 * Neutral interface — the flags provide the color.
 */

/* ── Layout ────────────────────────────────────────────────────────── */

.fp-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.fp-page-header {
  margin-bottom: 2rem;
}

.fp-page-title {
  font-family: Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.fp-page-subtitle {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.fp-page-lede {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.6;
  margin-bottom: 0;
}

/* ── Purpose & Positionality Statement ───────────────────────────── */

.fp-statement {
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  padding: 1.5rem 0;
  margin-bottom: 2.5rem;
}

.fp-statement-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.fp-statement-list li {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.45;
  font-style: italic;
  padding: 0.3rem 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(128, 128, 128, 0.15);
  margin-bottom: 0.25rem;
}

.fp-statement-contact {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  opacity: 0.5;
  margin: 0;
}

.fp-statement-contact a {
  opacity: 0.8;
}

/* ── Toolbar ───────────────────────────────────────────────────────── */

.fp-toolbar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  align-items: center;
}

.fp-toolbar .fp-btn {
  font-size: 0.85rem;
}

.fp-import-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}

.fp-import-label:hover {
  text-decoration-color: currentColor;
}

.fp-import-input {
  display: none;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.fp-btn {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
}

.fp-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.fp-btn-save {
  font-weight: bold;
}

.fp-btn-remove {
  opacity: 0.6;
}

.fp-btn-remove:hover {
  opacity: 1;
}

.fp-btn-add {
  border-style: dashed;
  opacity: 0.7;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.fp-btn-add:hover {
  opacity: 1;
}

/* ── Entry List ────────────────────────────────────────────────────── */

.fp-empty {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  opacity: 0.6;
  padding: 2rem 0;
}

/* Card: thumbnail + body side by side */
.fp-entry-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  padding: 1.25rem 0;
}

.fp-entry-card:last-child {
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

/* ── Thumbnail ─────────────────────────────────────────────────────── */

.fp-entry-thumb-link {
  flex-shrink: 0;
  text-decoration: none;
  display: block;
}

.fp-entry-thumb {
  width: 120px;
  height: 80px;
  border: 1px solid currentColor;
  opacity: 0.85;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease, border-width 0.15s ease;
}

.fp-entry-thumb-link:hover .fp-entry-thumb {
  opacity: 1;
  border-width: 1.5px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
}

.fp-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fp-entry-thumb-stripes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fp-entry-thumb-stripe {
  flex: 1;
}

.fp-entry-thumb-empty {
  font-size: 1.8rem;
  opacity: 0.12;
}

/* ── Body ──────────────────────────────────────────────────────────── */

.fp-entry-body {
  flex: 1;
  min-width: 0;
}

.fp-entry-family {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-bottom: 0.1rem;
}

.fp-entry-title {
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.fp-entry-title-link {
  color: inherit;
  text-decoration: none;
}

.fp-entry-title-link:hover {
  text-decoration: underline;
}

.fp-entry-meta {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.5;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}

.fp-entry-desc {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
  opacity: 0.8;
}

/* ── Actions ───────────────────────────────────────────────────────── */

.fp-entry-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.fp-entry-actions-group {
  display: flex;
  gap: 0.3rem;
}

/* Private actions: dimmed by default with a separator dot, visible but
   clearly secondary. They brighten on hover to indicate interactivity. */
.fp-entry-actions-private {
  opacity: 0.3;
  transition: opacity 0.25s ease;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(128, 128, 128, 0.15);
}

.fp-entry-actions-private:hover {
  opacity: 0.75;
}

.fp-entry-action {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  transition: background 0.15s ease, opacity 0.15s ease;
}

/* ── Form ──────────────────────────────────────────────────────────── */

.fp-form {
  max-width: 800px;
}

.fp-section {
  border: none;
  border-top: 1px solid currentColor;
  padding: 1rem 0 0.5rem;
  margin: 0 0 0.5rem;
}

.fp-section-title {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0;
  margin-bottom: 0.75rem;
}

.fp-section-toggle {
  user-select: none;
  padding-left: 1.2em;
  position: relative;
}

.fp-section-toggle::before {
  content: '\25BE';
  position: absolute;
  left: 0;
  transition: transform 0.15s ease;
}

.fp-section-collapsed .fp-section-toggle::before {
  transform: rotate(-90deg);
}

.fp-section-collapsed .fp-field,
.fp-section-collapsed .fp-json-field,
.fp-section-collapsed textarea[data-field="sources"],
.fp-section-collapsed textarea[data-field="claims"] {
  display: none;
}

.fp-field {
  margin-bottom: 0.6rem;
}

.fp-label {
  display: block;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.2rem;
}

.fp-input {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding: 0.35rem 0.5rem;
  width: 100%;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease;
}

.fp-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.fp-input[readonly] {
  opacity: 0.5;
  border-style: dashed;
}

.fp-textarea {
  resize: vertical;
  min-height: 3rem;
}

.fp-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpolygon points='0,0 8,0 4,5' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 1.5rem;
}

.fp-checkbox {
  width: auto;
  margin-right: 0.5rem;
  accent-color: currentColor;
}

.fp-json-field {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.8rem;
  white-space: pre;
  tab-size: 2;
}

/* ── Array fields ──────────────────────────────────────────────────── */

.fp-array-field {
  margin-top: 0.15rem;
}

.fp-array-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.fp-array-row .fp-input {
  flex: 1;
}

.fp-array-row .fp-btn-remove {
  flex-shrink: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
}

/* ── Form actions ──────────────────────────────────────────────────── */

.fp-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

/* ── Homepage: Lineage / Genealogy Map ─────────────────────────────── */

.fp-lineage-viewport {
  position: relative;
  width: 100%;
  min-height: 70vh;
  overflow: hidden;
  margin-bottom: 2rem;
  /* Subtle dot-grid background for archival/map feel */
  background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  opacity: 1;
}

.fp-lineage-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.fp-lineage-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  z-index: 1;
}

.fp-panning {
  cursor: grabbing !important;
}

.fp-lineage-viewport:not(.fp-panning) {
  cursor: grab;
}

/* Zoom controls */
.fp-lineage-controls {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 10;
}

.fp-zoom-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* ── SVG Connectors ────────────────────────────────────────────────── */

.fp-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.fp-connector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.25;
  transition: opacity 0.35s ease, stroke-width 0.2s ease;
}

.fp-connector-parent {
  stroke-dasharray: none;
  stroke-width: 1.25;
  opacity: 0.3;
}

.fp-connector-sibling {
  stroke-dasharray: 6 8;
  stroke-width: 0.75;
  opacity: 0.15;
}

.fp-connector-related {
  stroke-dasharray: 2 6;
  stroke-width: 0.5;
  opacity: 0.08;
}

/* Hover highlighting states */
.fp-connector-highlighted {
  opacity: 0.55 !important;
  stroke-width: 1.75 !important;
}

.fp-connector-dimmed {
  opacity: 0.06 !important;
}

/* ── Orphan separator ──────────────────────────────────────────────── */

.fp-orphan-separator {
  position: absolute;
  height: 0;
  border-top: none;
  opacity: 0;
}

.fp-orphan-label {
  position: absolute;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.25;
  white-space: nowrap;
}

/* ── Thumbnail Node ────────────────────────────────────────────────── */

.fp-node {
  position: absolute;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 2;
}

.fp-node:hover {
  z-index: 5;
  transform: translateY(-2px);
}

/* Hover highlighting */
.fp-node-dimmed {
  opacity: 0.15;
  transition: opacity 0.4s ease;
}

.fp-node-highlighted {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.fp-node-descendant {
  opacity: 0.78;
  transition: opacity 0.2s ease;
}

.fp-node-ancestor {
  opacity: 0.78;
  transition: opacity 0.2s ease;
}

.fp-node a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 8px;
  transition: background 0.2s ease;
}

.fp-node a:hover {
  text-decoration: none;
}

.fp-node-thumb {
  width: 180px;
  height: 120px;
  margin: 0 auto 0.5rem;
  border: 1px solid currentColor;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, border-width 0.15s ease;
}

.fp-node:hover .fp-node-thumb {
  border-width: 1.5px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
}

.fp-node-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fp-node-color-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fp-node-color-stripe {
  flex: 1;
}

.fp-node-thumb-placeholder {
  font-size: 2.5rem;
  opacity: 0.15;
}

.fp-node-family {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.4;
  margin-bottom: 0.05rem;
}

.fp-node-title {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.35;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}

.fp-node-date {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.fp-node-creator {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.6rem;
  opacity: 0.4;
  margin-top: 0.1rem;
}

.fp-node-lineage-cue {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.6rem;
  opacity: 0.35;
  margin-top: 0.15rem;
  letter-spacing: 0.04em;
}

/* ── Mobile: Lineage map touch hint ───────────────────────────────── */

.fp-lineage-touch-hint {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.75rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
}

.fp-lineage-touch-hint.fp-hint-visible {
  opacity: 1;
}

@media (max-width: 768px) {
  .fp-lineage-touch-hint.fp-hint-visible {
    opacity: 1;
  }
}

/* ── Cluster Labels ───────────────────────────────────────────────── */

.fp-cluster-label {
  position: absolute;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.3;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

/* ── Fullscreen mode ──────────────────────────────────────────────── */

.fp-lineage-viewport.fp-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  z-index: 9999;
  margin: 0;
  background-color: var(--bg, #111);
  background-image: radial-gradient(circle, currentColor 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

.fp-fullscreen-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fp-fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* ── Hover info dialog ───────────────────────────────────────────── */

/* Info dialog — only visible in fullscreen mode (JS gates this) */

.fp-node-info {
  position: absolute;
  z-index: 20;
  width: 320px;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem 1.15rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Anonymous Pro', monospace;
  line-height: 1.5;
}

.fp-node-info.fp-info-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Preview thumbnail inside the info dialog */
.fp-node-info-thumb {
  width: 100%;
  height: 120px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.fp-node-info-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fp-node-info-thumb .fp-node-color-preview {
  width: 100%;
  height: 100%;
}

.fp-node-info-name {
  font-family: Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.fp-node-info-meta {
  font-size: 0.74rem;
  opacity: 0.55;
  margin-bottom: 0.45rem;
}

.fp-node-info-desc {
  font-size: 0.78rem;
  opacity: 0.82;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.fp-node-info-lineage {
  font-size: 0.68rem;
  opacity: 0.42;
  font-style: italic;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * ENTRY PAGE — Museum / Wikipedia / Archive hybrid
 * All classes prefixed fpe- (flag page entry)
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Page Container ───────────────────────────────────────────────── */

.fpe-page {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.fpe-back {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 1.5rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.fpe-back:hover {
  opacity: 1;
}

/* ── Top Area: Figure + Infobox ───────────────────────────────────── */

.fpe-top {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: flex-start;
}

/* ── Figure ────────────────────────────────────────────────────────── */

.fpe-figure {
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  padding: 0;
}

.fpe-figure-frame {
  border: 1px solid currentColor;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  aspect-ratio: 3 / 2;
}

.fpe-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fpe-figure-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.15;
}

/* Stripe preview inside figure frame */
.fpe-stripe-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fpe-stripe {
  flex: 1;
}

/* Caption */
.fpe-caption {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  margin-top: 0.6rem;
  padding: 0;
  opacity: 0.75;
}

.fpe-caption-note {
  font-style: italic;
  opacity: 0.7;
}

/* ── Infobox ──────────────────────────────────────────────────────── */

.fpe-infobox {
  flex: 1;
  min-width: 0;
  border: 1px solid currentColor;
  padding: 1.25rem 1.5rem;
}

.fpe-infobox-family {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-bottom: 0.25rem;
}

.fpe-infobox-title {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.fpe-infobox-rows {
  margin: 0;
  padding: 0;
}

.fpe-ib-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin: 0;
  padding: 0.5rem 0 0.1rem;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.fpe-ib-label:first-child {
  border-top: none;
  padding-top: 0;
}

.fpe-ib-value {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  margin: 0;
  padding: 0 0 0.35rem;
  line-height: 1.5;
}

.fpe-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  padding: 0.1rem 0.4rem;
  opacity: 0.8;
}

.fpe-ib-alt {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.6;
}

.fpe-ib-alt-label {
  font-style: italic;
}

/* ── Body (article sections) ──────────────────────────────────────── */

.fpe-body {
  max-width: 780px;
}

/* ── Section ──────────────────────────────────────────────────────── */

.fpe-section {
  margin-bottom: 0;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.fpe-section:first-child {
  border-top: none;
  padding-top: 0;
}

.fpe-section-heading {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
}

.fpe-section-body {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.65;
}

.fpe-subheading {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.03em;
}

/* ── Key/Value Rows ───────────────────────────────────────────────── */

.fpe-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.fpe-row-label {
  flex-shrink: 0;
  width: 180px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
  padding-top: 0.1rem;
  font-family: 'Anonymous Pro', monospace;
}

.fpe-row-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── Prose Paragraphs ─────────────────────────────────────────────── */

.fpe-prose {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0.5rem 0 0.75rem;
}

.fpe-prose:first-child {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
 * UNIFIED COLOR TABLE — swatch · name · hex · meaning · note
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-color-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75rem 0;
  font-size: 0.82rem;
  border: 1.5px solid rgba(128, 128, 128, 0.4);
  border-radius: 6px;
  overflow: hidden;
}

.fpe-color-table thead {
  border-bottom: 1.5px solid rgba(128, 128, 128, 0.2);
  background: rgba(128, 128, 128, 0.03);
}

.fpe-ct-th {
  text-align: left;
  padding: 0.45rem 0.7rem;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  border-right: 1px solid rgba(128, 128, 128, 0.12);
}

.fpe-ct-th:last-child {
  border-right: none;
}

.fpe-ct-th:first-child {
  width: 36px;
  padding-right: 0;
}

.fpe-ct-th-note {
  text-align: right;
}

.fpe-ct-row {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.fpe-ct-row:last-child {
  border-bottom: none;
}

.fpe-ct-row td {
  padding: 0.5rem 0.7rem;
  vertical-align: middle;
  border-right: 1px solid rgba(128, 128, 128, 0.12);
}

.fpe-ct-row td:last-child {
  border-right: none;
}

.fpe-ct-swatch-cell {
  width: 36px;
  padding-right: 0;
}

.fpe-ct-swatch {
  display: inline-block;
  width: 26px;
  height: 18px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 3px;
  vertical-align: middle;
}

.fpe-ct-swatch-unknown {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 3px,
    rgba(128,128,128,0.1) 3px, rgba(128,128,128,0.1) 6px
  );
}

.fpe-ct-name {
  font-weight: 600;
  white-space: nowrap;
}

.fpe-ct-hex {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.6;
  white-space: nowrap;
}

.fpe-ct-meaning {
  opacity: 0.85;
}

.fpe-ct-note {
  font-size: 0.75rem;
  opacity: 0.45;
  text-align: right;
  max-width: 180px;
}

.fpe-palette-caveat {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
  margin: 0.4rem 0 0.75rem;
}

/* ── Lists ─────────────────────────────────────────────────────────── */

.fpe-list {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.25rem;
}

.fpe-list li {
  margin-bottom: 0.35rem;
  line-height: 1.6;
  font-size: 0.85rem;
}

/* ── Revisions ─────────────────────────────────────────────────────── */

.fpe-revision {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.fpe-revision:last-of-type {
  border-bottom: none;
}

.fpe-revision-date {
  font-weight: bold;
  margin-right: 0.75rem;
  font-size: 0.82rem;
}

.fpe-revision-desc {
  font-size: 0.82rem;
  opacity: 0.85;
}

/* ── Image Credit Block (below figure) ─────────────────────────────── */

.fpe-img-credit {
  margin-top: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(128, 128, 128, 0.12);
  font-family: 'Anonymous Pro', monospace;
}

.fpe-img-credit-caption {
  font-size: 0.8rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.fpe-img-credit-meta {
  font-size: 0.72rem;
  opacity: 0.65;
  line-height: 1.5;
}

.fpe-img-credit-by {
  /* credit line */
}

.fpe-img-credit-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.4);
  transition: text-decoration-color 0.15s ease;
}

.fpe-img-credit-link:hover {
  text-decoration-color: currentColor;
}

.fpe-img-credit-status {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(128, 128, 128, 0.35);
  padding: 0.05rem 0.4rem;
  margin-top: 0.35rem;
  opacity: 0.7;
}

.fpe-img-credit-notes {
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.5;
  font-style: italic;
  margin-top: 0.3rem;
}

/* ── Lineage Links (text section → entry pages) ──────────────────── */

.fpe-lineage-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
  transition: text-decoration-color 0.15s ease;
}

.fpe-lineage-link:hover {
  text-decoration-color: currentColor;
}

/* ── Footnote Reference Links (in claims, prose) ──────────────────── */

.fpe-fn-ref {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.fpe-fn-ref:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Footnotes & Citations Footer ─────────────────────────────────── */

/* Override the global footer{display:flex} from style.css which turns
   direct children into horizontal flex items (the "skinny columns" bug).
   This wrapper forces a single-column vertical stack at readable width. */
.fpe-footer {
  display: block;
  margin-top: 3rem;
  padding: 2rem 0 0;
  border-top: 2px solid rgba(128, 128, 128, 0.25);

  max-width: 780px;
  gap: 0;
  align-items: initial;
  text-align: initial;
claude/redesign-website-fKlGN
}

.fpe-fn-section {
  margin-bottom: 2.5rem;
}

.fpe-fn-heading {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  opacity: 0.8;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.fpe-fn-group-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  margin: 1.25rem 0 0.25rem;
  padding-bottom: 0;
  border-bottom: none;
}

.fpe-fn-group-label:first-of-type {
  margin-top: 0;
}

.fpe-fn-list {
  margin: 0 0 0.5rem;
  padding-left: 0;
  list-style: none;
}

.fpe-fn-item {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  margin-bottom: 0.85rem;
  padding: 0;
  scroll-margin-top: 2rem;
}

/* Highlight footnote on jump */
.fpe-fn-item:target {
  background: rgba(128, 128, 128, 0.06);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  margin-left: -0.5rem;
}

.fpe-fn-id {
  font-family: 'Anonymous Pro', monospace;
  font-weight: bold;
  font-size: 0.7rem;
  opacity: 0.4;
  margin-right: 0.4rem;
}

.fpe-fn-title {
  font-weight: bold;
}

a.fpe-fn-title {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
  transition: text-decoration-color 0.15s ease;
}

a.fpe-fn-title:hover {
  text-decoration-color: currentColor;
}

.fpe-fn-pub {
  opacity: 0.85;
}

.fpe-fn-accessed {
  font-size: 0.72rem;
  opacity: 0.4;
}

.fpe-fn-archive {
  font-size: 0.72rem;
  opacity: 0.55;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.3);
}

.fpe-fn-archive:hover {
  opacity: 0.85;
  text-decoration-color: currentColor;
}

.fpe-fn-note {
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.5;
  line-height: 1.55;
}

/* ── Image Sources (footer section) ───────────────────────────────── */

.fpe-img-sources-section {
  padding-top: 0;
}

.fpe-img-sources-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.fpe-img-sources-item {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.06);
}

.fpe-img-sources-item:last-child {
  border-bottom: none;
}

.fpe-img-sources-caption {
  font-weight: bold;
  font-size: 0.84rem;
}

.fpe-img-sources-credit {
  font-size: 0.75rem;
  opacity: 0.6;
}

.fpe-img-sources-link {
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
}

.fpe-img-sources-link:hover {
  text-decoration-color: currentColor;
}

.fpe-img-sources-status {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* ── Claims ────────────────────────────────────────────────────────── */

.fpe-claim {
  border-left: 3px solid rgba(128, 128, 128, 0.3);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.fpe-claim-disputed {
  border-left-color: #cc4444;
}

.fpe-claim-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.fpe-claim-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.fpe-claim-conf {
  font-size: 0.7rem;
  opacity: 0.4;
}

.fpe-claim-disputed-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cc4444;
  border: 1px solid #cc4444;
  padding: 0.05rem 0.3rem;
}

.fpe-claim-text {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.fpe-claim-sources {
  font-size: 0.72rem;
  opacity: 0.45;
}

.fpe-claim-dispute-notes {
  font-size: 0.78rem;
  opacity: 0.7;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── Bottom Metadata Zone (Rights, Tags, Last Updated) ────────────── */

.fpe-rights {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.55;
  line-height: 1.6;
  padding: 1rem 0;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.fpe-rights-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.fpe-rights-note {
  margin-top: 0.25rem;
  font-style: italic;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
 * CREATOR SPOTLIGHT — Museum-quality archival creator profile
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-creator-spotlight {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

/* ── Creator Stack — single-column, full-width stacked blocks ───── */

.fpe-creator-portraits {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Creator Card ─────────────────────────────────────────────────── */

.fpe-creator-card {
  border: 1px solid rgba(128, 128, 128, 0.2);
  padding: 1.5rem;
}

/* ── Portrait ─────────────────────────────────────────────────────── */

.fpe-creator-portrait {
  width: 120px;
  height: 120px;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpe-creator-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.fpe-creator-portrait-placeholder {
  font-size: 2.5rem;
  opacity: 0.1;
}

/* ── Name Block ───────────────────────────────────────────────────── */

.fpe-creator-nameblock {
  margin-bottom: 0.75rem;
}

.fpe-creator-name {
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 0.15rem;
}

.fpe-creator-role {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* ── Biography ────────────────────────────────────────────────────── */

.fpe-creator-bio {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.75;
  margin: 0 0 0.75rem;
  opacity: 0.85;
}

/* ── Quotes ────────────────────────────────────────────────────────── */

.fpe-creator-quote {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid rgba(128, 128, 128, 0.35);
  font-style: italic;
  opacity: 0.8;
}

/* ── Subsection Labels (Motivations / Inspirations) ───────────────── */

.fpe-creator-subsection-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  margin: 0.75rem 0 0.35rem;
}

.fpe-creator-detail-list {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.fpe-creator-detail-list li {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

/* ── Interpretive Inspirations ────────────────────────────────────── */

.fpe-creator-inspirations-interpretive .fpe-creator-detail-list li {
  font-style: italic;
  opacity: 0.65;
}

/* ── Attribution Footer ───────────────────────────────────────────── */

.fpe-creator-attribution {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(128, 128, 128, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════
 * CONFIDENCE METER — 10-box archival confidence indicator
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fpe-confidence-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-transform: capitalize;
  opacity: 0.7;
}

.fpe-confidence-meter {
  display: inline-flex;
  gap: 2px;
}

.fpe-conf-box {
  display: inline-block;
  width: 8px;
  height: 12px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: transparent;
}

.fpe-conf-filled {
  background: currentColor;
  border-color: currentColor;
  opacity: 0.6;
}

/* Inside claim headers, keep the meter compact */
.fpe-claim-head .fpe-confidence {
  gap: 0.35rem;
}

.fpe-claim-head .fpe-confidence-label {
  font-size: 0.7rem;
  opacity: 0.5;
}

.fpe-claim-head .fpe-conf-box {
  width: 6px;
  height: 10px;
}

/* ── Tags ──────────────────────────────────────────────────────────── */

.fpe-tags {
  padding: 0.75rem 0;
  border-top: 1px solid rgba(128, 128, 128, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fpe-tag {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  border: 1px solid rgba(128, 128, 128, 0.3);
  padding: 0.15rem 0.5rem;
  opacity: 0.5;
}

/* ── Last Updated ─────────────────────────────────────────────────── */

.fpe-last-updated {
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(128, 128, 128, 0.1);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.35;
  letter-spacing: 0.02em;
}

.fpe-last-updated-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  margin-right: 0.35rem;
}

/* ══════════════════════════════════════════════════════════════════════
 * FAMILY TREE SNAPSHOT — Compact visual lineage
 * Thumbnail cards grouped by relationship type
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-ft-section {
  /* Sits within .fpe-body flow */
}

.fpe-ft-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Relationship Group ───────────────────────────────────────────── */

.fpe-ft-group-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.4;
  margin-bottom: 0.5rem;
}

.fpe-ft-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Card ─────────────────────────────────────────────────────────── */

.fpe-ft-card {
  flex: 0 0 auto;
  width: 130px;
}

.fpe-ft-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.fpe-ft-link:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* ── Thumbnail ────────────────────────────────────────────────────── */

.fpe-ft-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid currentColor;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.fpe-ft-link:hover .fpe-ft-thumb {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.fpe-ft-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* Color stripe fallback */
.fpe-ft-stripes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fpe-ft-stripe {
  flex: 1;
}

.fpe-ft-placeholder {
  font-size: 1.5rem;
  opacity: 0.12;
}

/* ── Info (title + year) ──────────────────────────────────────────── */

.fpe-ft-info {
  margin-top: 0.35rem;
}

.fpe-ft-name {
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fpe-ft-unresolved {
  opacity: 0.45;
  font-weight: normal;
  font-style: italic;
}

.fpe-ft-year {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.62rem;
  opacity: 0.45;
  margin-top: 0.1rem;
}

/* ── Relationship-type accent (subtle left border on group) ───────── */

.fpe-ft-predecessor .fpe-ft-thumb {
  border-color: rgba(128, 128, 128, 0.5);
}

.fpe-ft-descendant .fpe-ft-thumb {
  border-color: rgba(128, 128, 128, 0.35);
}

.fpe-ft-sibling .fpe-ft-thumb {
  border-style: dashed;
}

.fpe-ft-related .fpe-ft-thumb {
  border-style: dotted;
}

/* ══════════════════════════════════════════════════════════════════════
 * DOCUMENTARY GALLERY — Horizontal scroll + Lightbox
 * "In the World" section: real-world photographic evidence
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Gallery Section ──────────────────────────────────────────────── */

.fpe-gallery-section {
  /* Gallery sits within .fpe-body but its scroller handles overflow */
}

.fpe-gallery-track {
  position: relative;
}

.fpe-gallery-scroller {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.25) transparent;
  padding-bottom: 0.75rem;
}

.fpe-gallery-scroller::-webkit-scrollbar {
  height: 4px;
}

.fpe-gallery-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.fpe-gallery-scroller::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.25);
}

/* ── Gallery Card ─────────────────────────────────────────────────── */

.fpe-gallery-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}

.fpe-gallery-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.fpe-gallery-frame:hover {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.fpe-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.3s ease;
}

.fpe-gallery-frame:hover img {
  transform: scale(1.03);
}

/* ── Gallery Caption ──────────────────────────────────────────────── */

.fpe-gallery-caption {
  font-family: 'Anonymous Pro', monospace;
  margin-top: 0.5rem;
}

.fpe-gallery-caption-text {
  font-size: 0.78rem;
  line-height: 1.55;
  margin-bottom: 0.2rem;
}

.fpe-gallery-caption-meta {
  font-size: 0.68rem;
  opacity: 0.5;
  line-height: 1.4;
}

.fpe-gallery-caption-link {
  text-decoration: underline;
  text-decoration-color: rgba(128, 128, 128, 0.35);
}

.fpe-gallery-caption-link:hover {
  text-decoration-color: currentColor;
}

.fpe-gallery-caption-context {
  font-size: 0.7rem;
  line-height: 1.5;
  opacity: 0.4;
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── Gallery Nav Buttons ──────────────────────────────────────────── */

.fpe-gallery-nav {
  position: absolute;
  top: 0;
  height: calc(100% - 5rem); /* Align with image frames, not captions */
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 3;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.fpe-gallery-nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.65);
  color: #FF8C00;
}

.fpe-gallery-nav-prev {
  left: 0;
}

.fpe-gallery-nav-next {
  right: 0;
}

/* ══════════════════════════════════════════════════════════════════════
 * GALLERY LIGHTBOX
 * Matches the existing flags-lightbox aesthetic: dark overlay, ☜/☞ nav,
 * × close, orange hover accents.
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.fpe-lightbox.active {
  display: flex;
}

/* ── Content ──────────────────────────────────────────────────────── */

.fpe-lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.fpe-lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpe-lightbox-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* ── Info Panel ───────────────────────────────────────────────────── */

.fpe-lightbox-info {
  text-align: center;
  max-width: 640px;
  padding: 0 1rem;
}

.fpe-lightbox-caption {
  color: #fff;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.35rem;
}

.fpe-lightbox-credit {
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  margin: 0 0 0.25rem;
}

.fpe-lightbox-context {
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

.fpe-lightbox-counter {
  display: inline-block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Close Button ─────────────────────────────────────────────────── */

.fpe-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 10000;
  transition: color 0.15s ease;
}

.fpe-lightbox-close:hover {
  color: #FF8C00;
}

/* ── Navigation ───────────────────────────────────────────────────── */

.fpe-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 1rem;
  z-index: 10000;
  transition: color 0.15s ease;
}

.fpe-lightbox-prev {
  left: 2rem;
}

.fpe-lightbox-next {
  right: 2rem;
}

.fpe-lightbox-nav:hover {
  color: #FF8C00;
}

/* ══════════════════════════════════════════════════════════════════════
 * AUTH — Password Modal
 * All classes prefixed fpa- (flag page auth)
 * ══════════════════════════════════════════════════════════════════════ */

.fpa-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fpa-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2rem 2.25rem;
  max-width: 360px;
  width: 90%;
}

.fpa-modal-title {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.fpa-modal-action {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.fpa-modal-input {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  outline: none;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.fpa-modal-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

.fpa-modal-error {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  color: #cc4444;
  margin-bottom: 0.5rem;
}

.fpa-modal-btns {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.fpa-modal-submit {
  font-weight: bold;
}

.fpa-modal-cancel {
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════
 * Responsive
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .fp-page {
    padding: 0 1rem 3rem;
  }

  .fp-page-title {
    font-size: 1.3rem;
  }

  /* Interactive lineage map: adapted for mobile */
  .fp-lineage-viewport {
    min-height: 55vh;
  }

  /* Entry list responsive */
  .fp-entry-card {
    gap: 0.85rem;
    padding: 1rem 0;
  }

  .fp-entry-thumb {
    width: 80px;
    height: 54px;
  }

  .fp-entry-title {
    font-size: 0.95rem;
  }

  .fp-entry-desc {
    font-size: 0.78rem;
  }

  .fp-entry-actions {
    gap: 0.5rem;
  }

  /* Entry page responsive */
  .fpe-page {
    padding-bottom: 3rem;
  }

  .fpe-top {
    flex-direction: column;
    gap: 1.25rem;
  }

  .fpe-figure {
    width: 100%;
  }

  .fpe-infobox {
    padding: 1rem;
  }

  .fpe-infobox-title {
    font-size: 1.2rem;
  }

  .fpe-row {
    flex-direction: column;
    gap: 0.1rem;
  }

  .fpe-row-label {
    width: auto;
  }

  .fpe-ct-th-note,
  .fpe-ct-note {
    display: none;
  }

  .fpe-color-table {
    font-size: 0.78rem;
  }

  .fpe-ct-swatch {
    width: 20px;
    height: 14px;
  }

  /* Family tree responsive */
  .fpe-ft-card {
    width: 100px;
  }

  .fpe-ft-name {
    font-size: 0.65rem;
  }

  /* Gallery responsive */
  .fpe-gallery-card {
    width: 220px;
  }

  .fpe-gallery-nav {
    display: none;
  }

  /* Lightbox responsive */
  .fpe-lightbox-prev {
    left: 0.5rem;
    font-size: 2rem;
  }

  .fpe-lightbox-next {
    right: 0.5rem;
    font-size: 2rem;
  }

  .fpe-lightbox-img {
    max-height: 60vh;
  }

  .fpe-lightbox-caption {
    font-size: 0.8rem;
  }

  /* Creator spotlight responsive */
  .fpe-creator-portrait {
    width: 96px;
    height: 96px;
  }

  .fpe-creator-card {
    padding: 1rem;
  }

  /* Footer responsive */
  .fpe-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .fpe-fn-section {
    margin-bottom: 1.75rem;
  }

  .fpe-fn-heading {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .fpe-fn-item {
    font-size: 0.78rem;
    margin-bottom: 0.65rem;
  }

  .fpe-img-sources-item {
    font-size: 0.78rem;
  }

  .fpe-rights {
    font-size: 0.72rem;
  }

  .fpe-last-updated {
    font-size: 0.68rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * UNKNOWN-VALUE ROWS & INLINE CONTRIBUTE BUTTONS
 * ══════════════════════════════════════════════════════════════════════ */

.fpe-row-unknown .fpe-row-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fpe-unknown-text {
  opacity: 0.35;
  font-style: italic;
  font-size: 0.82rem;
}

.fpc-inline-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.25);
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, border-color 0.15s;
  white-space: nowrap;
  vertical-align: middle;
}

.fpc-inline-btn:hover {
  opacity: 0.85;
  border-color: currentColor;
}

/* ══════════════════════════════════════════════════════════════════════
 * GLOBAL CONTRIBUTE BUTTON — fixed corner trigger
 * ══════════════════════════════════════════════════════════════════════ */

.fpc-global-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 900;
  background: rgba(30, 30, 30, 0.85);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.55rem 1rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}

.fpc-global-btn:hover {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════
 * CONTRIBUTION MODAL
 * ══════════════════════════════════════════════════════════════════════ */

.fpc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fpc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.fpc-modal {
  position: relative;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.75rem 2rem;
  color: #d0d0d0;
}

.fpc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.fpc-title {
  font-family: 'Anonymous Pro', monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.fpc-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  cursor: pointer;
  opacity: 0.5;
  padding: 0;
  line-height: 1;
}

.fpc-close:hover {
  opacity: 1;
}

.fpc-desc {
  font-size: 0.78rem;
  opacity: 0.55;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.fpc-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fpc-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fpc-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.fpc-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
}

.fpc-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.fpc-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

textarea.fpc-input {
  resize: vertical;
  min-height: 80px;
}

.fpc-media-hint {
  font-size: 0.72rem;
  opacity: 0.4;
  margin: 0 0 0.4rem;
}

.fpc-file-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.fpc-file-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}

.fpc-file-label:hover {
  background: rgba(255, 255, 255, 0.12);
}

.fpc-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.fpc-file-name {
  font-size: 0.72rem;
  opacity: 0.4;
  font-family: 'Anonymous Pro', monospace;
}

.fpc-context-row {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  opacity: 0.65;
}

.fpc-context-label {
  font-family: 'Anonymous Pro', monospace;
}

.fpc-submit {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 0.25rem;
}

.fpc-submit:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.fpc-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.fpc-status {
  font-size: 0.78rem;
  padding: 0.5rem 0.65rem;
  line-height: 1.4;
}

.fpc-status-ok {
  background: rgba(100, 200, 100, 0.08);
  border-left: 3px solid rgba(100, 200, 100, 0.4);
  color: #b0d8b0;
}

.fpc-status-err {
  background: rgba(200, 100, 100, 0.08);
  border-left: 3px solid rgba(200, 100, 100, 0.4);
  color: #d8b0b0;
}

/* ── Modal responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .fpc-modal {
    width: 95%;
    padding: 1.25rem 1.25rem;
  }

  .fpc-global-btn {
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    padding: 0.45rem 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BROWSE TOOLBAR — sorting / filtering / search / pagination
   ═══════════════════════════════════════════════════════════════════════ */

.fp-browse-toolbar {
  margin: 2.5rem 0 1rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  padding-bottom: 0.75rem;
}

/* ── Decade chips ──────────────────────────────────────────────────── */

.fp-browse-decades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.fp-decade-chip {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(128, 128, 128, 0.25);
  background: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.fp-decade-chip:hover {
  opacity: 0.85;
  border-color: rgba(128, 128, 128, 0.5);
}

.fp-decade-chip-active {
  opacity: 1;
  border-color: currentColor;
  font-weight: bold;
}

/* ── Main row: search + sort + view ────────────────────────────────── */

.fp-browse-row-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.fp-browse-search-wrap {
  flex: 1;
  min-width: 140px;
}

.fp-browse-search {
  width: 100%;
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.2);
  color: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.fp-browse-search:focus {
  border-color: rgba(128, 128, 128, 0.5);
}

.fp-browse-search::placeholder {
  opacity: 0.4;
}

.fp-browse-label {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-right: 0.3rem;
}

.fp-browse-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.fp-browse-select {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.2);
  color: inherit;
  cursor: pointer;
  outline: none;
}

.fp-browse-select:focus {
  border-color: rgba(128, 128, 128, 0.5);
}

.fp-browse-select-sm {
  width: auto;
  min-width: 3.5rem;
}

/* ── View toggle ───────────────────────────────────────────────────── */

.fp-browse-view-wrap {
  display: flex;
  gap: 0.15rem;
}

.fp-view-btn {
  font-size: 1rem;
  padding: 0.25rem 0.45rem;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.2);
  color: inherit;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.fp-view-btn:hover {
  opacity: 0.7;
}

.fp-view-btn-active {
  opacity: 1;
  border-color: currentColor;
}

/* ── Filters row ───────────────────────────────────────────────────── */

.fp-browse-row-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.fp-browse-filter-wrap {
  position: relative;
}

.fp-browse-filter-select {
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
}

.fp-browse-filter-active .fp-browse-filter-select {
  border-color: currentColor;
  font-weight: bold;
}

.fp-browse-clear {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.5rem;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.25);
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.fp-browse-clear:hover {
  opacity: 1;
}

/* ── Pagination ────────────────────────────────────────────────────── */

.fp-browse-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.fp-browse-pagination-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.fp-browse-result-count {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.fp-browse-perpage-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.fp-browse-page-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fp-browse-page-btn {
  font-size: 1.6rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  transition: color 0.15s ease, opacity 0.15s ease;
  line-height: 1;
}

.fp-browse-page-btn:hover:not(:disabled) {
  color: #FF8C00;
}

.fp-browse-page-disabled {
  opacity: 0.2;
  cursor: default;
}

.fp-browse-page-indicator {
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* ── Compact list view ─────────────────────────────────────────────── */

.fp-compact-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.78rem;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background 0.1s ease;
}

a.fp-compact-row:hover {
  background: rgba(128, 128, 128, 0.06);
}

.fp-compact-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  padding-bottom: 0.3rem;
  margin-bottom: 0.1rem;
  cursor: default;
}

.fp-compact-year {
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.fp-compact-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-compact-identity,
.fp-compact-creator {
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-compact-lineage {
  opacity: 0.4;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .fp-browse-row-main {
    flex-direction: column;
    align-items: stretch;
  }

  .fp-browse-search-wrap {
    min-width: 100%;
  }

  .fp-browse-sort-wrap {
    width: 100%;
  }

  .fp-browse-sort-wrap .fp-browse-select {
    flex: 1;
  }

  .fp-browse-view-wrap {
    align-self: flex-end;
  }

  .fp-browse-row-filters {
    gap: 0.25rem;
  }

  .fp-browse-filter-select {
    font-size: 0.68rem;
    padding: 0.2rem 0.3rem;
  }

  .fp-browse-decades {
    gap: 0.25rem;
  }

  .fp-decade-chip {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
  }

  .fp-browse-pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .fp-browse-page-nav {
    align-self: center;
  }

  .fp-compact-row {
    grid-template-columns: 3rem 1fr 1fr;
    font-size: 0.72rem;
  }

  .fp-compact-creator,
  .fp-compact-lineage {
    display: none;
  }
}