/* ============================================================
   Flint card — linked only from the framework pages that carry it.
   Built by scripts/flint_block.py. Cache-busted via ?v= on the link.

   Design intent: this should read as a different product sitting on
   the page, not as another article module. So it borrows nothing from
   the Which Framework module styling (no amber, no slate, no serif
   title) and uses Flint's own palette instead: warm ink, paper, and a
   single ember accent. The hard offset shadow and the inset width do
   the rest — the gate is inset to 60rem, this card to 46rem, so the
   two never look like the same component.
   ============================================================ */

.wff {
  --flint-ink: #1a1c19;
  --flint-ink-2: #3a3d38;
  --flint-ink-3: #62655f;
  --flint-paper: #f7f8f5;
  --flint-rule: #dcddd8;
  --flint-ember: #ee4d1e;
  --flint-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  max-width: min(100%, 46rem);
  margin: var(--space-16) auto;
  background: var(--flint-paper);
  border: 2px solid var(--flint-ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--flint-ink);
  overflow: hidden;
  color: var(--flint-ink);
}

/* ---- ink band ------------------------------------------------ */
.wff__band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--flint-ink);
  color: var(--flint-paper);
}
.wff__mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  display: block;
}
.wff__word {
  margin: 0;
  font-family: var(--flint-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .42em;
  line-height: 1;
}
.wff__maker {
  margin: 0 0 0 auto;
  font-family: var(--flint-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b9bbb5;
  text-align: right;
}

/* ---- body ---------------------------------------------------- */
.wff__main { padding: var(--space-6) var(--space-8) var(--space-5); }

.wff__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--flint-ink);
}
.wff__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--flint-ink-2);
}
.wff__text-link {
  color: var(--flint-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--flint-ember);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.wff__text-link:hover { background: rgba(238, 77, 30, .10); color: var(--flint-ink); }

/* ---- grades + CTA row ---------------------------------------- */
.wff__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.wff__grades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--flint-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--flint-ink-3);
}
.wff__grades li { display: flex; align-items: center; gap: var(--space-2); }
.wff__grades li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
}
.wff__grades .is-flicker::before { background: var(--flint-ember); }
.wff__grades .is-tame::before { background: var(--flint-ink-3); }
.wff__grades .is-dud::before { border: 1.5px solid var(--flint-ink-3); }
.wff__grades b {
  min-width: 5.2em;
  color: var(--flint-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.wff__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.wff__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  background: var(--flint-ink);
  color: var(--flint-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease;
}
.wff__btn::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--flint-ember);
  flex: none;
}
.wff__btn svg { width: 1em; height: 1em; flex: none; }
.wff__btn:hover { background: var(--flint-ink-2); color: var(--flint-paper); }
.wff__btn:focus-visible,
.wff__text-link:focus-visible { outline: 3px solid var(--flint-ember); outline-offset: 2px; }

.wff__door {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--flint-ink-3);
}
.wff__door b { color: var(--flint-ink); }

.wff__fine {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--flint-rule);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--flint-ink-3);
}

/* ---- small screens ------------------------------------------- */
@media (max-width: 759px) {
  .wff {
    margin: var(--space-12) 0;
    box-shadow: 4px 4px 0 var(--flint-ink);
    max-width: calc(100% - 4px);   /* keep the offset shadow inside the column */
  }
  .wff__band { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .wff__maker { flex-basis: 100%; margin: var(--space-1) 0 0; text-align: left; }
  .wff__main { padding: var(--space-5) var(--space-4) var(--space-4); }
  .wff__title { font-size: 1.2rem; }
  .wff__foot { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .wff__btn { padding: var(--space-4) var(--space-5); }
}