:root {
  --navy: #07162b;
  --navy-2: #0c2340;
  --ink: #122033;
  --paper: #f4f1ea;
  --card: #fffdf8;
  --line: #d7cfc0;
  --saffron: #c45c12;
  --gold: #b8860b;
  --green: #1f7a46;
  --red: #b42318;
  --muted: #5c6b7a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}
.tri {
  height: 6px;
  background: linear-gradient(90deg, #ff671f 0 34%, #fff 34% 66%, #046a38 66% 100%);
}
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1120px, calc(100% - 28px)); margin: 0 auto; }
.top { background: var(--navy); color: #f6efe2; }
.bar {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.logo:hover { text-decoration: none; }
.mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: #132c4e; border: 1px solid #c9a227; color: #e8c56b;
}
.logo b { display: block; letter-spacing: 0.08em; font-size: 15px; }
.logo small { display: block; color: #b7c4d4; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
nav { display: flex; gap: 16px; font-size: 14px; }
nav a { color: #d5deea; }
nav a.on, nav a:hover { color: #fff; text-decoration: none; }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; }
.who a, .who button { color: #e8c56b; background: none; border: 0; cursor: pointer; font: inherit; }
.who .cta, .cta {
  background: var(--saffron); color: #fff;
  padding: 7px 12px; text-decoration: none; border: 0; cursor: pointer; font-weight: 600;
}
.who .cta { color: #fff; }
main.wrap { padding: 28px 0 64px; }
.hero { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 24px; margin-bottom: 28px; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; line-height: 1.15; }
.hero h1 { font-size: clamp(30px, 4.4vw, 48px); margin: 8px 0 12px; }
.kicker { color: var(--saffron); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.kicker.live::before {
  content: ""; display: inline-block; width: 8px; height: 8px; background: #e23; border-radius: 50%;
  margin-right: 8px; box-shadow: 0 0 0 4px rgba(238,34,51,.15);
}
.lede { color: var(--muted); max-width: 620px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chips span { border: 1px solid var(--line); padding: 4px 8px; font-size: 12px; background: #fff; }
.panel, .box, .card, .story, .table-wrap { background: var(--card); border: 1px solid var(--line); }
.panel { padding: 16px; }
.mini { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; }
.mini em { float: right; font-style: normal; color: var(--saffron); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.mini span { display: block; color: var(--muted); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hd { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 8px 0 14px; }
.story { display: block; padding: 14px; margin-bottom: 10px; color: inherit; }
.story h3 { font-size: 22px; margin: 4px 0; }
.story p, .card p { color: var(--muted); }
.story small, .card small, .card em { color: var(--saffron); font-size: 12px; font-style: normal; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: #f7f3ea; }
.dense td { padding: 6px 8px; font-size: 13px; }
.up { color: var(--green); } .down { color: var(--red); } .flat { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { padding: 16px; display: block; color: inherit; }
.card h3 { margin: 6px 0; }
.article { max-width: 740px; }
.article h1 { font-size: clamp(28px, 4vw, 44px); margin: 8px 0 10px; }
.standfirst { font-size: 18px; color: #334155; margin: 12px 0 16px; }
.body { font-size: 17px; white-space: normal; }
.filters, .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.filters a, .tabs a {
  border: 1px solid var(--line); padding: 5px 10px; background: #fff; color: var(--muted); font-size: 13px;
}
.filters a.on, .tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); text-decoration: none; }
.st { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); padding: 3px 7px; }
.st.playing { color: #8a1f12; border-color: #e8b0a8; background: #fff1ee; }
.st.upcoming { color: #7a4b00; border-color: #e6d3a2; background: #fff8e8; }
.st.final { color: var(--muted); }
.box { padding: 18px; margin-top: 16px; display: grid; gap: 10px; }
.box.slim { max-width: 460px; margin: 24px auto; }
label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
input, select, textarea {
  border: 1px solid var(--line); padding: 8px 10px; font: inherit; background: #fff;
}
textarea { min-height: 120px; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.flash { padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--line); }
.flash.ok { background: #e9f7ee; color: var(--green); }
.flash.err { background: #fdecea; color: var(--red); }
.profile { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.avatar {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #e8c56b; font-size: 28px;
}
.share { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); }
.share a, .share button {
  border: 1px solid var(--line); background: #fff; padding: 5px 10px; cursor: pointer; font: inherit;
}
.inline { display: inline; }
.status-form { margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status-form button { border: 1px solid var(--line); background: #fff; padding: 4px 8px; cursor: pointer; }
.dim { color: var(--muted); font-size: 13px; }
.meta { color: var(--muted); }
.crumb { color: var(--muted); margin-bottom: 6px; }
.foot { background: var(--navy); color: #c9d4e2; padding: 24px 0 36px; font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; }
.foot b { color: #fff; }
.role { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: #e8c56b; }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 36px; }
.role-card { display: block; background: #fffdf8; border: 1px solid var(--line); padding: 20px; color: inherit; }
.role-card:hover { border-color: var(--saffron); text-decoration: none; }
.role-card strong { font-family: "Source Serif 4", serif; font-size: 26px; display: block; margin-bottom: 8px; }
.role-card em { color: var(--muted); font-size: 12px; }
.role-picks { display: flex; gap: 14px; flex-wrap: wrap; }
.pick { color: var(--ink); display: flex; gap: 6px; align-items: center; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.photos figure { margin: 0; background: #fff; border: 1px solid var(--line); }
.photos img { width: 100%; height: 180px; object-fit: cover; display: block; }
.photos figcaption { padding: 6px 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .role-grid, .photos { grid-template-columns: 1fr; }
  .bar, .hero, .grid-2, .cards, .row4, .foot .wrap { grid-template-columns: 1fr; display: grid; }
  .bar { padding: 12px 0; }
  nav, .who { margin-left: 0; }
}