/* Jackpot Blueprint UK — shell shared by every interior page */

.page-hero {
  background-color: var(--paper-tint);
  background-image: url("/assets/img/band-grid.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--rule);
}

.page-hero__in { padding-block: var(--s7); }

.page-hero h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  max-width: 26ch;
}

.page-hero h1 em { font-style: normal; color: var(--mag); }

.page-hero__lede {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  max-width: 64ch;
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.page-hero__meta {
  margin-top: var(--s4);
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
}

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: var(--s7);
  align-items: start;
  padding-block: var(--s8);
}

.article__body { max-width: 68ch; }

.article__body > h2:first-child { margin-top: 0; }

.rail { display: grid; gap: var(--s5); position: sticky; top: var(--s6); }

.rail__box {
  border: 1px solid var(--rule);
  background: #fff;
  padding: var(--s5);
}
.rail__box h2 {
  font-size: 1rem;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--mag);
  display: inline-block;
  margin-bottom: var(--s3);
}
.rail__box p { font-size: 0.95rem; color: var(--ink-soft); }
.rail__box ul { list-style: none; padding: 0; margin: 0; }
.rail__box li { margin-bottom: var(--s2); font-size: 0.97rem; }
.rail__box a {
  font-family: var(--font-display);
  color: var(--blue-deep);
  text-decoration: none;
}
.rail__box a::before { content: "·"; color: var(--mag); font-weight: 700; margin-right: 0.3em; }
.rail__box a:hover { text-decoration: underline; text-underline-offset: 3px; }

.callout {
  border: 4px double var(--ink);
  background: #fff;
  padding: var(--s5);
  margin-block: var(--s6);
}
.callout h2,
.callout h3 {
  font-size: 1.1rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  margin-bottom: var(--s3);
}
.callout p:last-child { margin-bottom: 0; }

.keyfacts {
  list-style: none;
  padding: 0;
  margin: var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.keyfacts li {
  margin: 0;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s3);
  font-size: 0.97rem;
}
.keyfacts b {
  font-family: var(--font-display);
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

.inline-figure { margin-block: var(--s6); }

.pagenote {
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  margin-top: var(--s7);
  font-size: 0.88rem;
  color: var(--ink-mute);
}

@media (max-width: 960px) {
  .article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    padding-block: var(--s7);
  }
  .rail { position: static; }
}

@media (max-width: 600px) {
  .keyfacts li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}