/* ============================================================
   Brass Ring Media — classic sports-media theme
   ============================================================ */

:root {
  --ink: #16130f;          /* near-black headers/nav */
  --ink-2: #2a2520;
  --paper: #ffffff;
  --paper-2: #f6f4f0;      /* light section background */
  --line: #e3ddd3;         /* hairline borders */
  --brass: #f6c500;        /* yellow — matches logo ring */
  --brass-dark: #9c6f00;   /* darker gold for link text on white */
  --red: #c8102e;          /* category / highlight red */
  --text: #1a1714;
  --muted: #6f675d;
  --maxw: 1160px;
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --body: "PT Serif", Georgia, "Times New Roman", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass-dark); text-decoration: none; }
a:hover { color: var(--red); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Top bar ---------- */
.topbar {
  background: #000;
  color: #fff;
  border-bottom: 3px solid var(--brass);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.brand:hover { color: #fff; }
.brand img.logo { height: 184px; width: auto; display: block; }
.brand .ring {
  width: 30px; height: 30px;
  border: 4px solid var(--brass);
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.brand .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}
.brand .name span { color: var(--brass); }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.nav a { color: #d9d3c8; }
.nav a:hover, .nav a.active { color: var(--brass); }
.nav .btn { color: var(--ink); }

.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 11px 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: #fff; color: var(--ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { background: var(--ink); color: #fff; }
.btn.ghost { background: transparent; border: 2px solid var(--brass); color: var(--brass); }
.btn.ghost:hover { background: var(--brass); color: var(--ink); }

/* ---------- Mobile nav ---------- */
.navtoggle { display: none; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 70px;
  border-bottom: 1px solid #000;
}
.kicker {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 16ch;
}
.hero p {
  font-size: 20px;
  color: #cfc8bc;
  max-width: 52ch;
  margin: 0 0 28px;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Section headers ---------- */
.section { padding: 56px 0; }
.section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.sec-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}
.sec-head h2::before {
  content: "";
  display: inline-block;
  width: 14px; height: 22px;
  background: var(--red);
  margin-right: 12px;
  vertical-align: -3px;
}
.sec-head .more { font-family: var(--ui); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Card grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.grid.two { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-3px); }
.card .thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--paper-2) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.card .body { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.card .tag {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 10px;
}
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--red); }
.card .excerpt { font-size: 15.5px; color: var(--muted); margin: 0 0 14px; }
.card .meta { margin-top: auto; font-family: var(--ui); font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.card .meta .dot { width: 4px; height: 4px; background: var(--brass); border-radius: 50%; }

/* text-forward column cards (no feed image) */
.card.card-text { border-top: 4px solid var(--red); }
.card.card-text .body { padding: 22px 20px 24px; }
.card.card-text h3 { font-size: 23px; line-height: 1.12; }
.card.card-text .excerpt { font-size: 16px; }

/* featured (first item large) */
.lead {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 26px;
}
.lead .thumb { aspect-ratio: auto; height: 100%; min-height: 320px; border-bottom: none; border-right: 1px solid var(--line); }
.lead .body { padding: 30px; justify-content: center; }
.lead h3 { font-size: 32px; }

/* text-forward featured panel (no feed image) */
.lead.lead-text {
  display: block;
  background: var(--ink);
  border: none;
}
.lead.lead-text .body { padding: 34px 40px; }
.lead.lead-text.has-img {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 0;
}
.lead.lead-text.has-img .body { padding: 30px 36px; }
/* when the opening paragraphs show, stack image on top, text below */
.lead.lead-text.has-img.has-excerpt { grid-template-columns: 1fr; align-items: stretch; }
.lead.lead-text.has-img.has-excerpt .body { padding: 6px 40px 34px; }
/* inset, 35% smaller cover image on the featured card */
.lead.lead-text.has-excerpt .lead-img {
  max-width: 75%;
  margin: 32px auto 0;
  border-radius: 3px;
}
.lead.lead-text .lead-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
}
.lead-excerpt { margin: 4px 0 22px; }
.lead-excerpt p {
  font-family: var(--body);
  color: #cfc8bc;
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.lead-excerpt p:last-child { margin-bottom: 0; }
.lead-excerpt .lead-sub {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin: 20px 0 10px;
}
.lead-excerpt .lead-sub-h1 { font-size: 26px; }
.lead-excerpt .lead-sub-h2 { font-size: 24px; }
.lead-excerpt .lead-sub-h3 { font-size: 20px; }
.lead-excerpt .lead-sub-h4 { font-size: 18px; }
.lead-excerpt .lead-sub-h5,
.lead-excerpt .lead-sub-h6 { font-size: 16.5px; }
.lead-excerpt > .lead-sub:first-child { margin-top: 0; }
.lead .lead-more { display: inline-block; }
.lead.lead-text .tag { color: var(--brass); }
.lead.lead-text h3 { font-size: 36px; line-height: 1.06; margin-bottom: 14px; }
.lead.lead-text h3 a { color: #fff; }
.lead.lead-text h3 a:hover { color: var(--brass); }
.lead.lead-text .excerpt { color: #cfc8bc; font-size: 17.5px; }
.lead.lead-text .meta { color: #9a9286; }
.lead .meta { font-family: var(--ui); font-size: 12.5px; display: flex; gap: 10px; align-items: center; }
.lead .meta .dot { width: 4px; height: 4px; background: var(--brass); border-radius: 50%; flex: none; }
@media (max-width: 760px) {
  .lead.lead-text.has-img { grid-template-columns: 1fr; }
  .lead.lead-text.has-excerpt .lead-img { max-width: 85%; }
}
@media (max-width: 620px) {
  .lead.lead-text .body { padding: 26px 24px; }
  .lead.lead-text h3 { font-size: 28px; }
}

/* ---------- Podcast episode row ---------- */
.ep {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.ep .epnum {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  color: var(--brass);
  width: 54px;
  flex: none;
  line-height: 1;
  padding-top: 4px;
}
.ep .epbody { flex: 1; }
.ep h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0 0 6px; }
.ep h3 a { color: var(--ink); }
.ep .meta { font-family: var(--ui); font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.ep .excerpt { font-size: 15.5px; color: var(--muted); margin: 0 0 14px; }
.ep audio { width: 100%; max-width: 520px; height: 38px; }

/* ---------- Ad slots ---------- */
.ad {
  margin: 30px auto;
  text-align: center;
  overflow: hidden;
}
.ad .adsbygoogle { display: block; }
.ad.rect { max-width: 336px; }

/* Ad slots hidden while the site is pending AdSense approval. AdSense serves
   nothing until the site is approved, so the slots render as empty gaps. To turn
   ads back on the moment you're approved, delete the single rule below. */
.ad { display: none !important; }

/* ---------- States ---------- */
.state {
  text-align: center;
  padding: 50px 20px;
  font-family: var(--ui);
  color: var(--muted);
  grid-column: 1 / -1;
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--brass);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Subscribe band ---------- */
.band {
  background: var(--ink);
  color: #fff;
  padding: 52px 0;
  text-align: center;
}
.band h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.band p { color: #cfc8bc; max-width: 48ch; margin: 0 auto 26px; }

/* ---------- Feature columns (homepage) ---------- */
.hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.hubcard {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.hubcard .label { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.hubcard h3 { font-family: var(--display); font-weight: 700; font-size: 28px; text-transform: uppercase; margin: 8px 0 12px; }
.hubcard p { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.hubcard .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Guide / article pages ---------- */
.guide { max-width: 760px; }
.guide p { margin: 0 0 18px; }
.guide h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.guide h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 26px 0 8px; }
.guide .lede { font-size: 21px; color: var(--ink-2); }
.guide ul { padding-left: 20px; }
.guide li { margin-bottom: 8px; }
.guide blockquote {
  border-left: 4px solid var(--brass);
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--ink-2);
}
.guide { overflow-wrap: break-word; }
/* Imported Substack columns: keep heading size/weight, drop the rule line,
   and match heading spacing to the normal paragraph rhythm. */
.guide.column-body h2 { border-bottom: none; padding-bottom: 0; }
.guide.column-body h2,
.guide.column-body h3,
.guide.column-body h4,
.guide.column-body h5,
.guide.column-body h6 { margin: 18px 0 10px; }
/* Paywall call-to-action on imported paid columns. */
.paywall-cta { margin: 28px 0 8px; text-align: center; }
/* Hide Substack's image zoom/expand control that rides along in imported HTML. */
.guide [class*="image-link-expand"],
.guide [class*="pencil-icon"] { display: none !important; }
.guide img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; display: block; }
.guide iframe, .guide video { max-width: 100%; border: 0; margin: 12px 0; }
.guide table { max-width: 100%; border-collapse: collapse; }
.guide pre { overflow-x: auto; }
.guide figure { margin: 16px 0; }
.guide figcaption { font-family: var(--ui); font-size: 13px; color: var(--muted); margin-top: 6px; }
.brm-orig {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 18px;
}
.brm-orig a { color: var(--brass-dark); }
.term {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.term:last-child { border-bottom: none; }
.term .word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
}
.term .word .also { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-left: 8px; }
.term p { margin: 6px 0 0; }
.jumpbox {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 22px;
  margin: 0 0 30px;
  font-family: var(--ui);
  font-size: 14px;
}
.jumpbox strong { display: block; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.jumpbox a { margin-right: 14px; line-height: 2; display: inline-block; }
.crumb { font-family: var(--ui); font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumb a { color: var(--muted); }

/* related guides */
.related { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 14px; }
.related a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
  background: var(--paper);
}
.related a:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.related .label { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.related .t { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 6px; line-height: 1.15; }
@media (max-width: 700px) { .related { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #b7ad9d;
  padding: 46px 0 30px;
  font-family: var(--ui);
  font-size: 14px;
  border-top: 3px solid var(--brass);
}
.footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 26px; }
.footer a { color: #d9d3c8; }
.footer a:hover { color: var(--brass); }
.footer .fbrand { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; color: #fff; }
.footer .fbrand span { color: var(--brass); }
.footer h4 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--brass); margin: 0 0 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; line-height: 2; }
.footer .copy { border-top: 1px solid #2c2823; padding-top: 18px; font-size: 12.5px; color: #8a8175; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .lead { grid-template-columns: 1fr; }
  .lead .thumb { border-right: none; border-bottom: 1px solid var(--line); min-height: 220px; }
  .hubs { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  .nav { display: none; position: absolute; top: 200px; left: 0; right: 0; background: #000; flex-direction: column; padding: 16px 22px; gap: 16px; border-bottom: 3px solid var(--brass); z-index: 50; }
  .nav.open { display: flex; }
  .navtoggle { display: block; }
  .topbar .wrap { position: relative; }
  .hero { padding: 44px 0 48px; }
}