/* ==========================================================================
   f-behind-the-fire.css — CAT-16 only. Tokens only: no colours, no radii,
   no fonts declared here that are not already in tokens.css.
   ========================================================================== */

.btf-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.btf-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.btf-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.btf-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.btf-block > * + * { margin-top: var(--s-4); }
.btf-foot { padding: var(--s-5) var(--gutter) var(--s-8); }
.btf-foot > * + * { margin-top: var(--s-3); }
.btf-backline { padding: var(--s-4) var(--gutter) 0; }
.btf-honest {
  margin: 0 var(--gutter) var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

/* ---- the closure banner --------------------------------------------------- */

.btf-banner {
  margin: 0 var(--gutter);
  padding: var(--s-3) var(--s-4);
  border-left: var(--frame) solid var(--ink-alarm);
  border-top: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--wash);
}
.btf-banner > * + * { margin-top: var(--s-2); }

/* ---- frames, cards, alarms ------------------------------------------------ */

.btf-frame { border: 1px solid var(--hairline); padding: var(--s-4); }
.btf-frame > * + * { margin-top: var(--s-2); }
.btf-alarm { border-left: var(--frame) solid var(--ink-alarm); }
.btf-amber { color: var(--ink-alarm); }

.btf-card { border: 1px solid var(--hairline); padding: var(--s-4); }
.btf-card + .btf-card { margin-top: var(--s-4); }
.btf-card > * + * { margin-top: var(--s-2); }
.btf-card[data-outlined="true"] { border-color: var(--ink); border-left-width: var(--frame); }
.btf-card-line { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.btf-card-title { text-decoration: none; }

.btf-cert { border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
.btf-cert > * + * { margin-top: var(--s-1); }

.btf-trace { border-top: 1px solid var(--hairline); padding: var(--s-4) 0; }
.btf-trace > * + * { margin-top: var(--s-2); }
.btf-trace[data-stale="true"] { border-left: var(--frame) solid var(--ink-alarm); padding-left: var(--s-3); }

.btf-gate { border-top: 1px solid var(--hairline); padding: var(--s-3) 0; }
.btf-part { border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
.btf-part > * + * { margin-top: var(--s-2); }

/* ---- key/value lists ------------------------------------------------------- */

.btf-kv { display: block; }
.btf-kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.btf-kv-row:last-child { border-bottom: 0; }
.btf-kv-row dt, .btf-kv-row > span:first-child { flex: 0 0 42%; }
.btf-kv-row dd, .btf-kv-row > span:last-child { margin: 0; text-align: right; }

.btf-plain { list-style: none; padding: 0; margin: 0; }
.btf-plain li { padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); }
.btf-plain li:last-child { border-bottom: 0; }

/* ---- the index rows -------------------------------------------------------- */

.btf-index { list-style: none; padding: 0; margin: 0; }
.btf-index-row[data-stale="true"] .row-trail { color: var(--ink-alarm); }
.btf-index-row[data-outlined="true"] {
  border-left: var(--frame) solid var(--ink);
  padding-left: var(--s-3);
}

/* ---- counts and codes ------------------------------------------------------ */

.btf-count {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-variant-numeric: tabular-nums;
}
.btf-code {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: 0.12em;
}

/* ---- bars ------------------------------------------------------------------ */

.btf-bar {
  display: block;
  height: 3px;
  background: var(--scrim-soft);
  margin-top: var(--s-2);
}
.btf-bar-fill { display: block; height: 100%; background: var(--ink); }

/* ---- toggles and checks ----------------------------------------------------- */

.btf-toggle, .btf-check {
  display: flex;
  width: 100%;
  min-height: var(--tap);
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.btf-toggle-main { display: flex; flex-direction: column; gap: 2px; }
.btf-toggle-state {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}
.btf-toggle[aria-checked="true"] .btf-toggle-state,
.btf-check[aria-pressed="true"] .btf-toggle-state {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---- expanding rows --------------------------------------------------------- */

.btf-zone, .btf-dishrow {
  display: flex;
  width: 100%;
  min-height: var(--tap);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.btf-zone { flex-direction: column; }
.btf-zone-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.btf-zone-panel { padding: var(--s-3) 0 var(--s-4); }
.btf-zone-panel > * + * { margin-top: var(--s-3); }

.btf-dishrow { align-items: flex-start; }
.btf-dishrow-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.btf-band {
  flex: 0 0 auto;
  width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
}

.btf-figure {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.btf-figure-value { font-family: var(--font-display); font-size: var(--t-sub); }

/* ---- producer furniture ------------------------------------------------------ */

.btf-figure-wrap { margin: 0; }
.btf-figure-wrap figcaption { margin-top: var(--s-2); }
.btf-nophoto {
  border: 1px solid var(--hairline);
  background: var(--wash);
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
  justify-content: center;
  padding: var(--s-4);
}

.btf-map {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.btf-map-dot { width: 9px; height: 9px; background: var(--ink); }
.btf-map-line { height: 1px; background: var(--hairline); }
.btf-map-a, .btf-map-b {
  position: absolute;
  bottom: var(--s-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ink-muted);
}
.btf-map-a { left: 0; }
.btf-map-b { right: 0; text-align: right; }

.btf-months { display: flex; gap: 2px; margin-top: var(--s-2); }
.btf-month {
  flex: 1 1 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  font-size: var(--t-label);
  color: var(--ink-muted);
}
.btf-month[data-on="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btf-month[data-now="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }

.btf-off { opacity: 0.55; }

/* ---- people -------------------------------------------------------------------- */

.btf-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
.btf-person { border: 1px solid var(--hairline); padding: var(--s-3); }
.btf-person > * + * { margin-top: var(--s-1); }
.btf-quote { font-family: var(--font-display); font-style: italic; }

/* ---- tips ---------------------------------------------------------------------- */

.btf-tip-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.btf-tip-btn {
  min-height: var(--tap);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.btf-tip-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btf-tip-btn[aria-pressed="true"] .muted { color: var(--paper); }
.btf-tip > * + * { margin-top: var(--s-3); }

/* ---- badges, press --------------------------------------------------------------- */

.btf-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btf-badge {
  border: 1px solid var(--ink);
  padding: var(--s-2) var(--s-3);
  min-height: var(--tap);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.btf-press .row-main { gap: var(--s-1); }

.btf-rescue-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink);
  text-decoration: none;
  color: inherit;
}
.btf-rescue-badge .t-label { text-transform: uppercase; letter-spacing: var(--tr-label); }

.btf-inline-link { display: block; padding: var(--s-2) 0; min-height: var(--tap); }

/* ---- the fire ---------------------------------------------------------------------- */

.btf-section { color: var(--ink); }
.btf-svg { width: 100%; height: auto; display: block; }
.btf-ember { opacity: 0.28; }
.btf-svg.is-alive .btf-ember { animation: btf-breathe 4.5s var(--ease-inout) infinite; }
@keyframes btf-breathe {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.46; }
}
@media (prefers-reduced-motion: reduce) {
  .btf-svg.is-alive .btf-ember { animation: none; opacity: 0.28; }
}
.btf-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.btf-legend .chip { min-height: var(--tap); }

.btf-frame-shot { margin: 0; }
.btf-frame-shot figcaption { margin-top: var(--s-2); }

/* ---- the thirty-night strip ---------------------------------------------------------- */

.btf-strip30 { display: flex; gap: 2px; }
.btf-night {
  flex: 1 1 0;
  height: 26px;
  border: 1px solid var(--hairline);
}
.btf-night[data-on="true"] { background: var(--ink); border-color: var(--ink); }

/* ---- table ----------------------------------------------------------------------------- */

.btf-table-wrap { overflow-x: auto; }
.btf-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.btf-table th, .btf-table td {
  text-align: left;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.btf-table thead th { text-transform: uppercase; letter-spacing: var(--tr-label); font-size: var(--t-label); color: var(--ink-muted); }
.btf-table td span { display: block; }
.btf-table td .t-label { text-transform: uppercase; letter-spacing: var(--tr-label); }

/* ---- misc ------------------------------------------------------------------------------- */

.btf-steps { margin: 0; padding-left: var(--s-5); }
.btf-steps li { padding: var(--s-2) 0; }
.btf-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.btf-canvas { width: 100%; height: auto; border: 1px solid var(--hairline); display: block; }

/* ---- print --------------------------------------------------------------------------------
   FR-404 and FR-405 both print. Keep the table, the method notes, the
   ingredients and the method; drop the imagery and the controls.            */

@media print {
  .btf-banner,
  .btf-legend,
  .btf-toggle,
  .btf-check,
  .btf-tip-row,
  .btf-canvas,
  .btf-strip30,
  .btf-map,
  .btf-months,
  .btf-nophoto,
  .btf-figure-wrap,
  .btf-frame-shot,
  .btf-svg,
  .btf-backline,
  .btf-foot { display: none !important; }

  .btf-block { padding: 0; border-top: 0; margin-bottom: 4mm; break-inside: avoid; }
  .btf-head { padding: 0 0 3mm; }
  .btf-table { font-size: 9.5pt; }
  .btf-table-wrap { overflow: visible; }
  .btf-zone-panel { display: block !important; }
  .btf-steps li { break-inside: avoid; }
  .btf-card { border: 0; padding: 0 0 2mm; }
  .btf-kv-row { padding: 1mm 0; }
}