:root {
  color-scheme: light;
  --bpi-ink: #222c40;
  --bpi-blue: #244ab8;
  --bpi-blue-deep: #183c9d;
  --bpi-cornflower: #86a8f2;
  --bpi-pink: #f0a6cb;
  --bpi-peach: #f5b58c;
  --bpi-milk: #fffcf8;
  --bpi-faint: #edf2ff;
  --bpi-slab: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --bpi-body: "Trebuchet MS", "Gill Sans", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--bpi-milk);
  color: var(--bpi-ink);
  font-family: var(--bpi-body);
  font-size: 18px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
a { color: var(--bpi-blue-deep); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible, main:focus-visible {
  outline: 3px solid var(--bpi-blue-deep);
  outline-offset: 5px;
}
h1, h2, h3 { font-family: var(--bpi-slab); font-weight: 700; }
h1 { margin: 1rem 0 1.2rem; font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: 1.13; letter-spacing: -.025em; text-wrap: balance; }
h2 { margin: 0 0 1.2rem; font-size: clamp(1.65rem, 3vw, 2.6rem); line-height: 1.22; text-wrap: balance; }
h3 { margin: 1.8rem 0 .8rem; font-size: 1.4rem; line-height: 1.35; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin-top: .8rem; }
img { display: block; max-width: 100%; height: auto; font-size: 16px; line-height: 1.5; }
figure { margin: 0; }
::selection { background: #f5d8e9; color: var(--bpi-ink); }

.bpi-skip {
  position: absolute;
  top: .5rem;
  left: 1rem;
  z-index: 5;
  padding: .7rem 1rem;
  border-radius: 22px;
  background: white;
  transform: translateY(-200%);
  min-height: 48px;
}
.bpi-skip:focus { transform: translateY(0); }
.bpi-mast { background: var(--bpi-cornflower); padding: 1rem 1.1rem 1.3rem; }
.bpi-mast-inner { max-width: 1240px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.bpi-name { display: flex; flex-direction: column; justify-content: center; min-height: 60px; color: var(--bpi-ink); text-decoration: none; line-height: 1.1; flex-shrink: 0; }
.bpi-name-place { font-family: var(--bpi-slab); font-size: 1.6rem; font-weight: 700; }
.bpi-name-kind { margin-top: .35rem; font-size: 16px; }
.bpi-mast-note { display: none; font-size: 17px; margin: 0; }
.bpi-question-tabs { max-width: 1240px; margin: 1.1rem auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bpi-question-tabs a { display: flex; align-items: center; justify-content: center; text-align: center; padding: .65rem .6rem; min-height: 56px; border-radius: 28px; background: var(--bpi-milk); color: var(--bpi-ink); font-size: 16px; line-height: 1.3; text-decoration: none; }
.bpi-question-tabs a[aria-current="page"], .bpi-question-tabs a[data-current-topic] { background: var(--bpi-blue); color: white; }
.bpi-question-tabs a:hover { background: #f9d6e8; color: var(--bpi-ink); }

.bpi-opening { padding: 2rem 1.25rem 2.7rem; background: #fbe0ed; }
.bpi-opening-inner { max-width: 1240px; margin: auto; display: grid; gap: 2rem; align-items: center; }
.bpi-opening-copy { min-width: 0; max-width: 900px; }
.bpi-guide-tag { display: inline-block; border-radius: 30px; padding: .35rem .9rem; background: var(--bpi-milk); color: var(--bpi-ink); font-size: 16px; line-height: 1.5; }
.bpi-lead { max-width: 65ch; font-size: 19px; }
.bpi-still-life { background: var(--bpi-peach); border-radius: 26px; padding: .85rem; align-self: center; }
.bpi-still-life img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 19px; background: #e8ecfa; color: var(--bpi-ink); }
.bpi-still-life figcaption { padding: .8rem .35rem .15rem; font-size: 16px; }
.bpi-band { padding: 2.8rem 1.25rem; }
.bpi-band--blue { background: var(--bpi-cornflower); }
.bpi-band--pink { background: var(--bpi-pink); }
.bpi-band--peach { background: var(--bpi-peach); }
.bpi-band--milk { background: var(--bpi-milk); }
.bpi-band-inner { max-width: 1120px; margin: auto; }
.bpi-band h2 { max-width: 22ch; }
.u-bpi-measure { max-width: 68ch; }
.bpi-bullets { padding-left: 1.3rem; margin-bottom: 0; }
.bpi-bullets li { padding-left: .35rem; margin-top: .75rem; font-size: 18px; }
.bpi-bullets li::marker { color: var(--bpi-ink); }
.bpi-answer-part { padding-top: .2rem; }
.bpi-note-call { display: inline-flex; vertical-align: baseline; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .3rem; font-size: 16px; line-height: 1; border-radius: 24px; background: rgba(255, 255, 255, .58); color: var(--bpi-blue-deep); text-decoration: none; }
.bpi-note-call:hover { background: white; text-decoration: underline; }

.bpi-path { padding: 3rem 1.25rem; max-width: 1280px; margin: auto; }
.bpi-path-groups { display: grid; gap: 1.2rem; }
.bpi-path-group { padding: 1.3rem; border-radius: 26px; background: var(--bpi-faint); }
.bpi-path-group:nth-child(2) { background: #fbe0ed; }
.bpi-path-group:nth-child(3) { background: #ffdfc9; }
.bpi-path-group h3 { margin: 0 0 .9rem; }
.bpi-path-links { padding: 0; margin: 0; list-style: none; }
.bpi-path-links li + li { margin-top: .5rem; }
.bpi-path-links a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: .2rem .5rem; align-items: center; padding: .95rem .4rem; border-radius: 18px; min-height: 80px; line-height: 1.45; text-decoration: none; }
.bpi-path-links a:hover { background: white; }
.bpi-path-links a > span:first-child { font-size: 19px; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.bpi-path-summary { grid-column: 1; color: var(--bpi-ink); font-size: 17px; }
.bpi-path-arrow { grid-row: 1 / span 2; grid-column: 2; font-size: 22px; }

.bpi-source-notes { padding: 2.7rem 1.25rem; background: var(--bpi-faint); }
.bpi-source-inner { max-width: 1120px; margin: auto; }
.bpi-source-inner h2 { font-size: 1.6rem; }
.bpi-note-list { list-style: none; padding: 0; margin: 0; max-width: 78ch; }
.bpi-note-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .5rem; align-items: center; margin-top: .5rem; scroll-margin-top: 1rem; }
.bpi-note-list li:target { background: #f6d1e5; border-radius: 18px; }
.bpi-source-letter { display: grid; place-items: center; width: 44px; height: 44px; font-size: 16px; }
.bpi-note-list a { display: flex; align-items: center; min-height: 48px; padding: .65rem .25rem; font-size: 17px; line-height: 1.5; }
.bpi-next { max-width: 1240px; margin: auto; padding: 2rem 1.25rem; display: grid; gap: .55rem; }
.bpi-next > span { font-size: 17px; }
.bpi-next a { display: inline-flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; padding: .85rem 1.3rem; border-radius: 32px; background: var(--bpi-blue); color: white; font-size: 18px; line-height: 1.4; text-decoration: none; }
.bpi-next a:hover { background: var(--bpi-blue-deep); }
.bpi-site-foot { background: var(--bpi-peach); padding: 2rem 1.25rem; }
.bpi-site-foot-inner { max-width: 1240px; margin: auto; }
.bpi-site-foot p { max-width: 65ch; font-size: 17px; }
.bpi-site-foot nav { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.bpi-site-foot a { display: flex; align-items: center; min-height: 48px; padding: .6rem .15rem; font-size: 16px; }

@media (min-width: 650px) {
  .bpi-mast { padding: 1.15rem 2rem 1.4rem; }
  .bpi-mast-note { display: block; }
  .bpi-question-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
  .bpi-opening { padding: 3.5rem 2rem; }
  .bpi-band { padding: 3.8rem 2rem; }
  .bpi-band-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; }
  .bpi-band h2 { margin: .25rem 0; }
  .bpi-path { padding: 4rem 2rem; }
  .bpi-path-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpi-path-group:last-child { grid-column: 1 / -1; }
  .bpi-path-group:last-child .bpi-path-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .bpi-path-group:last-child .bpi-path-links li + li { margin-top: 0; }
  .bpi-source-notes, .bpi-site-foot { padding: 3rem 2rem; }
  .bpi-next { padding: 2.5rem 2rem; grid-template-columns: 1fr minmax(270px, auto); align-items: center; }
}

@media (min-width: 1000px) {
  .bpi-question-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bpi-question-tabs a { padding: .8rem .55rem; }
  .bpi-opening-inner:has(.bpi-still-life) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: 3rem; }
  .bpi-opening:has(.bpi-still-life) h1 { font-size: clamp(2.9rem, 4.5vw, 4.2rem); }
  .bpi-opening--home { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .bpi-path-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bpi-path-group:last-child { grid-column: auto; }
  .bpi-path-group:last-child .bpi-path-links { display: block; }
  .bpi-path-group:last-child .bpi-path-links li + li { margin-top: .5rem; }
  .bpi-site-foot-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
  .bpi-site-foot nav { margin-top: 0; justify-content: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  body { background: white; color: black; font-size: 12pt; line-height: 1.45; }
  h1 { font-size: 26pt; }
  h2 { font-size: 19pt; }
  h3 { font-size: 15pt; }
  a { color: black; }
  .bpi-skip, .bpi-question-tabs, .bpi-still-life, .bpi-next, .bpi-site-foot nav { display: none; }
  .bpi-mast, .bpi-opening, .bpi-band, .bpi-source-notes, .bpi-site-foot, .bpi-path { background: white; padding: 1rem 0; }
  .bpi-band-inner, .bpi-path-groups, .bpi-site-foot-inner { display: block; }
  .bpi-opening-copy, .bpi-reading { max-width: none; }
  .bpi-path-group { background: white; padding: .7rem 0; }
  .bpi-note-call { min-width: 0; min-height: 0; padding: 0 .2rem; }
  h2, h3 { break-after: avoid; }
  li { break-inside: avoid; }
}