/* ============================================================
   THE POUR — front page
   Coffee & Trades · scoped to .fp
   Newspaper structure, editorial typography.
   ============================================================ */

.fp {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  margin: 14px 0 0;
}

.fp *, .fp *::before, .fp *::after { box-sizing: border-box; }

.fp-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.fp :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- folio ---------- */

.fp-folio {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 28px; flex-wrap: wrap;
}

.fp-folio-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 700; letter-spacing: -.03em; line-height: .95;
}

.fp-folio-line {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3);
  margin-left: auto; text-align: right;
}

.fp-live::before {
  content: '\25CF'; margin-right: 5px; color: var(--rule2); font-size: 8px;
}

.fp-live.live::before { color: var(--green); }
.fp-live.error::before { color: var(--red); }

/* thick-thin, the newspaper rule */
.fp-rule {
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 4px; margin: 7px 0 0;
}

/* ---------- grind ---------- */

.fp-grind { display: inline-flex; align-items: center; gap: 9px; }

.fp-grind-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3);
}

.fp-grind-set {
  display: inline-flex; background: var(--paper2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px; gap: 2px;
}

.fp-grind-set button {
  border: 0; background: transparent; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); padding: 5px 13px; border-radius: 999px; line-height: 1;
  transition: background .18s, color .18s;
}

.fp-grind-set button:hover { color: var(--ink); }
.fp-grind-set button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.fp-refresh {
  background: none; border: 1px solid var(--rule2);
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--ink3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all .15s;
}

.fp-refresh:hover { border-color: var(--ink); color: var(--ink); transform: rotate(90deg); }
.fp-refresh.spin { animation: fpSpin .7s linear infinite; }
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* ---------- shared type ---------- */

.fp-kick {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}

.fp-kick::after { content: ''; flex: 1; border-top: 1px solid var(--paper3); }

.fp-hed {
  font-family: 'Playfair Display', serif;
  font-weight: 600; letter-spacing: -.25px; color: var(--ink);
  font-size: 17.5px; line-height: 1.26; margin: 0 0 8px;
}

.fp-deck {
  font-size: 12.5px; line-height: 1.62;
  color: var(--ink2); margin: 0 0 10px;
}

.fp-meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .06em;
  color: var(--ink3);
  display: flex; gap: 15px; flex-wrap: wrap; align-items: baseline;
}

.fp-meta a, .fp-tk {
  color: var(--ink2); text-decoration: none;
  border-bottom: 1px solid var(--rule2);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  padding: 0 0 1px; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .06em;
  transition: color .14s, border-color .14s;
}

.fp-meta a:hover, .fp-tk:hover { color: var(--ink); border-bottom-color: var(--ink); }
.fp-up { color: var(--green); }
.fp-dn { color: var(--red); }

/* ---------- the lead ---------- */

.fp-lead {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 20px;
}

.fp-lead:has(.fp-lead-side) {
  grid-template-columns: minmax(0, 2.2fr) minmax(220px, 0.9fr);
}

.fp-lead-side { border-left: 1px solid var(--paper3); padding-left: 22px; }

.fp-hed-lead {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12; margin-bottom: 14px; max-width: 28em;
}

.fp-deck-lead {
  font-size: 15.5px; line-height: 1.76; margin-bottom: 13px;
  column-count: 3; column-gap: 32px;
  column-rule: 1px solid var(--paper3);
}

.fp-lead:has(.fp-lead-side) .fp-deck-lead {
  column-count: 2; column-gap: 26px;
}

/* one column if there isn't enough copy to fill two */
.fp-deck-lead:first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 3.2em; line-height: .82; float: left;
  padding: 5px 9px 0 0; color: var(--gold);
}

.fp-lead .fp-meta { clear: both; }

/* ---------- filters ---------- */

.fp-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }

.fp-filters button {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); background: var(--white);
  border: 1px solid var(--rule); padding: 4px 11px;
  border-radius: 999px; cursor: pointer; line-height: 1.4;
  transition: border-color .18s, color .18s;
}

.fp-filters button:hover { border-color: var(--ink2); color: var(--ink); }
.fp-filters button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.fp-n { color: var(--rule2); margin-left: 5px; }
.fp-filters button[aria-pressed="true"] .fp-n { color: var(--ink3); }

/* ---------- body: ruled columns + briefs rail ---------- */

.fp-body { display: grid; grid-template-columns: 3fr 0.9fr; gap: 0 24px; }

/* CSS columns rather than a grid, so hiding a filtered story reflows
   the remaining ones instead of leaving a hole. */
.fp-cols {
  column-count: 3;
  column-gap: 22px;
  column-rule: 1px solid var(--paper3);
}

.fp-story {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--paper3);
}

.fp-story[hidden] { display: none; }

.fp-rail {
  border-left: 1px solid var(--paper3);
  padding-left: 22px;
}

/* ---------- briefs ---------- */

.fp-brief {
  display: block; padding: 8px 0;
  border-bottom: 1px solid var(--paper2);
  text-decoration: none; color: inherit;
  transition: background .12s;
}

.fp-brief:hover { background: var(--paper2); }
.fp-brief[hidden] { display: none; }

.fp-brief-src {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 7.5px; letter-spacing: .1em;
  color: var(--rule2); margin-bottom: 3px;
}

.fp-brief-t {
  display: block; font-size: 11.5px; line-height: 1.44;
  color: var(--ink2);
  transition: color .6s linear;
}

.fp-more {
  background: none; border: 0; padding: 10px 0 0; cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}

.fp-more:hover { color: var(--ink); }

/* ---------- close ---------- */

.fp-scallop { color: var(--rule2); line-height: 0; margin: 22px 0 0; }
.fp-scallop svg { width: 100%; height: 7px; display: block; }

.fp-empty {
  padding: 30px 0; text-align: center;
  font-style: italic; color: var(--ink3); font-size: 13px;
}

/* ---------- fine grind ---------- */

.fp[data-density="fine"] .fp-deck { display: none; }
.fp[data-density="fine"] .fp-deck-lead { display: block; column-count: 1; font-size: 13.5px; }
.fp[data-density="fine"] .fp-story { padding-bottom: 12px; margin-bottom: 12px; }
.fp[data-density="fine"] .fp-hed { font-size: 15.5px; }
.fp[data-density="fine"] .fp-cols { column-count: 4; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .fp-cols { column-count: 2; }
  .fp[data-density="fine"] .fp-cols { column-count: 3; }
}

@media (max-width: 980px) {
  .fp-lead, .fp-lead:has(.fp-lead-side) { grid-template-columns: 1fr; gap: 18px; }
  .fp-lead-side { border-left: 0; border-top: 1px solid var(--paper3); padding-left: 0; padding-top: 16px; }
  .fp-body { grid-template-columns: 1fr; gap: 22px; }
  .fp-rail { border-left: 0; border-top: 1px solid var(--ink); padding-left: 0; padding-top: 18px; }
  .fp-deck-lead, .fp-lead:has(.fp-lead-side) .fp-deck-lead { column-count: 2; column-gap: 24px; }
}

@media (max-width: 680px) {
  .fp-cols, .fp[data-density="fine"] .fp-cols { column-count: 1; }
  .fp-hed-lead { font-size: 25px; }
  .fp-deck-lead, .fp-lead:has(.fp-lead-side) .fp-deck-lead { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fp *, .fp *::before { transition-duration: .01ms !important; animation: none !important; }
}

@media print {
  .fp-grind, .fp-filters, .fp-more, .fp-refresh { display: none; }
}