/* blog part 2 of 3. Generated by build_blog.py; edit theme/blog/blog.css or the master prototype. */

.bp .bp-dek{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--body);margin:0 0 22px}
.bp .bp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--muted)}
.bp .bp-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--faint);margin-right:18px;vertical-align:middle;position:relative;top:-1px}
.bp .bp-meta b{color:var(--ink);font-weight:700}

/* ---- cover */
.bp .bp-cover{margin-bottom:clamp(30px,4.4vw,60px)}
.bp .bp-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--grey)}

/* ---- two-column body: contents rail + one measure-width column (the legal-page pattern) */
.bp .bp-grid{align-items:start;padding-bottom:clamp(64px,8vw,112px)}
.bp .bp-rail{grid-column:3;grid-row:1;justify-self:start;width:100%;max-width:260px;position:sticky;
  top:calc(var(--head-h) + 32px);font-size:13.5px;line-height:1.45;border-left:1px solid var(--hair);padding-left:20px}
.bp .bp-rail .bp-rail-t{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.bp .bp-rail ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:2px}
.bp .bp-rail ol a{display:block;padding:5px 0 5px 12px;margin-left:-22px;color:var(--faint);
  border-left:2px solid transparent;transition:color .15s,border-color .15s}
.bp .bp-rail ol a.is-read{color:var(--muted)}
.bp .bp-rail ol a.is-active{color:var(--ink);font-weight:600;border-color:var(--accent)}
.bp .bp-rail ol a:hover,.bp .bp-rail ol a:focus-visible{color:var(--ink);border-color:var(--accent)}

.bp .bp-body{grid-column:2;grid-row:1;min-width:0;color:var(--body)}

/* key points box ("In this article") */
.bp .bp-points{background:var(--grey);border-radius:3px;padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
  margin:0 0 clamp(28px,3.4vw,40px)}
.bp .bp-points p.bp-points-t{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.bp .bp-points ul{list-style:none;margin:0;padding:0}
.bp .bp-body .bp-points li{position:relative;padding-left:28px;margin:0 0 8px;line-height:1.55;color:var(--ink);font-size:16px}
.bp .bp-body .bp-points li:last-child{margin-bottom:0}
.bp .bp-body .bp-points li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- article prose. Written for both the new posts and the 2022 Gutenberg posts. */
.bp .bp-body p,.bp .bp-body li{font-size:18.5px;line-height:1.75}
.bp .bp-body p{margin:0 0 24px}
.bp .bp-body h2{font-size:clamp(28px,2.7vw,38px);font-weight:650;letter-spacing:-0.024em;line-height:1.08;
  margin:clamp(56px,6.5vw,92px) 0 22px;scroll-margin-top:calc(var(--head-h) + 24px)}
.bp .bp-body h3{font-size:clamp(21px,1.7vw,24px);margin:40px 0 14px;scroll-margin-top:calc(var(--head-h) + 24px)}
.bp .bp-body h4{font-size:18px;margin:26px 0 10px}
.bp .bp-body > :first-child{margin-top:0}
.bp .bp-body strong,.bp .bp-body b{color:var(--ink);font-weight:700}
.bp .bp-body ul,.bp .bp-body ol{margin:0 0 26px;padding-left:24px}
.bp .bp-body li{margin:0 0 10px;padding-left:4px}
.bp .bp-body li::marker{color:var(--accent)}
.bp .bp-body ol li::marker{font-weight:700}
.bp .bp-body a:not(.btn){color:var(--accent-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(178,138,87,.5)}
.bp .bp-body a:not(.btn):hover,.bp .bp-body a:not(.btn):focus-visible{color:var(--ink);text-decoration-color:currentColor}

/* images: WordPress figures and plain img both go full column width */
.bp .bp-body figure{margin:40px 0}
.bp .bp-body figure.bp-wide{margin-inline:calc(-1 * clamp(0px,4vw,60px))}
.bp .bp-body img{width:100%;height:auto;border-radius:3px;background:var(--grey)}
.bp .bp-body figcaption{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.bp .bp-body .wp-block-image{margin:30px 0 32px}
.bp .bp-body .wp-block-image img{height:auto}

/* two images side by side */
.bp .bp-body .bp-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 32px}
.bp .bp-body .bp-pair figure{margin:0}
.bp .bp-body .bp-pair img{aspect-ratio:4/3;object-fit:cover}

/* callout: .note on the 2022 posts, .bp-note on the new ones */
.bp .bp-body .note,.bp .bp-body .bp-note{border-left:3px solid var(--accent);background:var(--grey);
  padding:16px 20px;border-radius:0 3px 3px 0;color:var(--ink)}
.bp .bp-body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  font-size:19px;line-height:1.6;color:var(--ink)}
.bp .bp-body blockquote p{font-size:inherit}

/* tables: soft warm-grey header, zebra rows (white / light grey), no grid lines. hello-elementor's
   reset draws a border on every cell and stripes rows in its own grey; both are replaced here.
   Wide tables scroll sideways on a phone instead of squashing. */
.bp .bp-body .bp-table{overflow-x:auto;margin:32px 0 36px;-webkit-overflow-scrolling:touch;border-radius:4px;
  border:1px solid var(--hair)}
.bp .bp-body table{width:100%;border-collapse:collapse;border:0;margin:0;font-size:15.5px;line-height:1.5;min-width:520px}
.bp .bp-body th,.bp .bp-body td{text-align:left;vertical-align:top;padding:13px 16px;border:0;background:#fff}
.bp .bp-body thead th{background:#ECE8DE;color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;vertical-align:bottom;border-bottom:1px solid #DDD7CA}
.bp .bp-body tbody tr:nth-child(odd)>td,.bp .bp-body tbody tr:nth-child(odd)>th{background:#fff}
.bp .bp-body tbody tr:nth-child(even)>td,.bp .bp-body tbody tr:nth-child(even)>th{background:var(--grey)}
.bp .bp-body tbody td:first-child,.bp .bp-body tbody th{color:var(--ink);font-weight:700}

/* video embeds on the 2022 posts */
.bp .bp-body .wp-block-embed{margin:30px 0}
.bp .bp-body .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9}
.bp .bp-body .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:3px}

/* FAQ inside a post reuses details.faq from the master, just tighter */
.bp .bp-body details.faq summary{padding:18px 0}
.bp .bp-body details.faq summary .q{font-size:17.5px}
.bp .bp-body details.faq .a p{font-size:16px;margin-bottom:12px}

/* ---- end-of-post CTA: the master .pagecta, full bleed. Its h2 rule ties with the Elementor
   kit's, so the size is restated at two classes. */
.bp .bp-endcta h2{font-size:clamp(30px,3.8vw,48px);font-weight:650;letter-spacing:-0.024em;line-height:1.08;max-width:22ch}
.bp .bp-endcta .cta-btns .btn{font-size:14.5px}

/* ---- more articles */
.bp .bp-more{padding-block:clamp(44px,6vw,80px)}
.bp .bp-more h2{font-size:clamp(26px,2.6vw,36px);margin:0 0 clamp(22px,3vw,34px)}

/* ---- cards: shared by "more articles" and the index */
.bp .bp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px) clamp(16px,2vw,28px)}
.bp .bp-card{display:flex;flex-direction:column;gap:12px;color:inherit}
.bp .bp-card .bp-card-img{display:block;overflow:hidden;border-radius:3px;background:var(--grey);aspect-ratio:3/2}
.bp .bp-card .bp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bp .bp-card:hover .bp-card-img img{transform:scale(1.03)}
.bp .bp-card .bp-card-cat{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.bp .bp-card :is(h2,h3){font-size:clamp(19px,1.5vw,22px);margin:0;transition:color .2s}
.bp .bp-card:hover :is(h2,h3){color:var(--accent-d)}
.bp .bp-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.bp .bp-card .bp-card-d{font-size:13px;color:var(--faint)}

/* ---- index */
.bp .bp-ix-head{padding-block:clamp(28px,2.8vw,52px) clamp(26px,3.4vw,44px)}
.bp .bp-ix-head h1{font-size:clamp(38px,4.9vw,58px);font-weight:650;letter-spacing:-0.024em;line-height:1.0;margin:12px 0 18px;max-width:900px}
.bp .bp-ix-head p{font-size:clamp(17px,1.3vw,19px);line-height:1.6;max-width:720px;margin:0}
.bp .bp-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.bp .bp-cats a{font-size:13px;font-weight:700;letter-spacing:.04em;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--hair);color:var(--ink);transition:background .2s,border-color .2s}
.bp .bp-cats a:hover{background:var(--wash-lt)}
.bp .bp-cats a[aria-current]{border-color:var(--ink)}
.bp .bp-feat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,3.4vw,56px);
  align-items:center;margin-bottom:clamp(44px,5.6vw,76px)}
.bp .bp-feat .bp-card-img{aspect-ratio:16/10}
.bp .bp-feat h2{font-size:clamp(28px,3vw,42px);margin:8px 0 14px}
.bp .bp-feat .bp-card-d{display:block;margin-top:12px}
.bp .bp-feat p{font-size:17px}
.bp .bp-ix-list{padding-bottom:clamp(56px,7vw,100px)}
.bp .bp-card[hidden]{display:none}
.bp .bp-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(40px,5vw,60px)}
.bp .bp-pager .page-numbers{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:999px;border:1.5px solid var(--hair);font-weight:700;font-size:14px;color:var(--ink)}
.bp .bp-pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.bp .bp-pager a.page-numbers:hover{background:var(--wash-lt)}

/* Not enough margin for a floating list: text column plus a narrower rail beside it. */
@media(max-width:1280px){
  .bp .bp-head .wrap,.bp .bp-grid{grid-template-columns:minmax(0,1fr) 230px}
  .bp .bp-head-in,.bp .bp-body{grid-column:1}
  .bp .bp-rail{grid-column:2}
}
@media(max-width:1000px){
  .bp .bp-head .wrap,.bp .bp-grid{grid-template-columns:minmax(0,1fr)}
  .bp .bp-rail{grid-column:1;grid-row:auto;max-width:none;position:static;border-left:0;padding-left:0;border-bottom:1px solid var(--hair);padding-bottom:20px}
  .bp .bp-body{grid-row:auto}
  .bp .bp-rail ol{flex-direction:row;flex-wrap:wrap;gap:4px 16px;margin-bottom:0}
  .bp .bp-rail ol a{border-left:0;padding-left:0;margin-left:0}
  .bp .bp-body figure.bp-wide{margin-inline:0}
  .bp .bp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp .bp-feat{grid-template-columns:1fr}
}