/* ===================================================================
   Friends / blogroll. Cream paper. Tier-grouped roll of sites.
   =================================================================== */

.friends-hero {
  padding: var(--s-9) var(--gutter) var(--s-7);
  border-bottom: 1px solid var(--ink);
}
.friends-hero .inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 320px; gap: var(--s-7);
  align-items: end;
}
.friends-hero .label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.friends-hero h1 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.03em;
}
.friends-hero h1 em { color: var(--purple); font-style: italic; font-family: var(--font-serif); font-weight: 400; }
.friends-hero .deck {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  color: #333;
  margin-top: var(--s-5);
  max-width: 60ch;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
}
.friends-hero .scribble {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--ink);
  padding: var(--s-4);
  background: #fff;
}
.friends-hero .scribble b { color: var(--ink); }
.friends-hero .scribble .accent { color: var(--purple); }

.tier {
  padding: var(--s-9) var(--gutter);
  border-bottom: 1px solid var(--rule);
  max-width: var(--max-w);
  margin: 0 auto;
}
.tier .section-head { color: var(--ink); border-top-color: var(--ink); }
.tier .section-head .marker { color: var(--muted); }
.roll-friends {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3) var(--s-6);
}
.friend {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  align-items: baseline;
}
.friend:hover { background: #fff; }
.friend:hover .url { color: var(--purple); }
.friend .num {
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  letter-spacing: 0.18em;
  color: var(--muted);
}
.friend .body { line-height: 1.35; }
.friend .name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.friend .url {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 4px;
}
.friend .vouch {
  grid-column: 2 / span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: #555;
  margin-top: 6px;
  line-height: 1.45;
}
.friend .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid var(--muted);
  color: var(--muted);
  align-self: start;
  white-space: nowrap;
}

/* Tier 2 (civic, makers) — denser */
.tier.tier-civic .roll-friends,
.tier.tier-makers .roll-friends,
.tier.tier-misc .roll-friends { grid-template-columns: repeat(4, 1fr); gap: 0 var(--s-5); }
.tier.tier-civic .friend .vouch,
.tier.tier-makers .friend .vouch,
.tier.tier-misc .friend .vouch { display: none; }
.tier.tier-civic .friend,
.tier.tier-makers .friend,
.tier.tier-misc .friend { padding: 10px 0; }
.tier.tier-civic .friend .name,
.tier.tier-makers .friend .name,
.tier.tier-misc .friend .name { font-size: 15px; }

.reciprocity {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-9) var(--gutter);
}
.reciprocity .inner { max-width: 760px; margin: 0 auto; }
.reciprocity h3 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.reciprocity h3 em { color: var(--gold); font-style: normal; }
.reciprocity p {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.55;
  color: #d6cee8;
  max-width: 56ch;
  margin: 0 0 var(--s-5);
}
.reciprocity p a { color: var(--purple-bright); text-decoration: underline; text-underline-offset: 3px; }
.reciprocity .rules {
  border: 1px solid var(--purple-tab);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-meta); line-height: 1.8;
  letter-spacing: 0.08em;
  color: #d6cee8;
}

@media (max-width: 900px) {
  .friends-hero .inner { grid-template-columns: 1fr; }
  .roll-friends { grid-template-columns: 1fr !important; }
}