/* Content blocks — the default typographic treatment for everything lib/blocks.php renders (xe_blocks, xe_md).
   Add 'assets/css/blocks.css' to $page['css'] on any page that renders blocks. Site tokens only.
   A page may restyle blocks inside its own scope (.my-page .xb-quote{…}); never edit these rules for one page.
   Measure: text runs at ~70ch inside .xb; .xb-img--wide / --full, galleries, figures and two-column break out wider. */

.xb{--xb-measure:720px;--xb-wide:1040px;max-width:var(--xb-measure);margin-inline:auto;color:var(--txt);font-family:var(--f-b);
  overflow-wrap:break-word}   /* editors paste long addresses and URLs: on a phone they break instead of running past the column */
.xb > * + *{margin-top:1.25em}
.xb > .xb-h + *{margin-top:.7em}

/* text */
.xb-p{font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.75;color:var(--txt)}
.xb-p a,.xb-list a,.xb-call a,.xb-quote a,.xb-md a,.xb-cap a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue-line);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color var(--d1) var(--e-io),color var(--d1) var(--e-io);
}
.xb-p a:hover,.xb-list a:hover,.xb-call a:hover,.xb-quote a:hover,.xb-md a:hover,.xb-cap a:hover{color:var(--blue-d);text-decoration-color:var(--blue)}
.xb strong{font-weight:600;color:var(--ink)}
.xb code{font-family:var(--f);font-size:.88em;padding:.12em .38em;border-radius:var(--r-xs);background:var(--paper-3);color:var(--ink)}

.xb-h{font-family:var(--f-h);font-weight:500;color:var(--ink);scroll-margin-top:calc(var(--nav-h) + 24px)}
.xb > .xb-h,.xb-md > .xb-h{margin-top:1.9em}
.xb-h2{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.022em}
.xb-h3{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.3;letter-spacing:-.012em}
.xb-h4,.xb-h5,.xb-h6{font-size:var(--t-h4);line-height:1.4;letter-spacing:-.006em}

.xb-list{padding-left:0;display:grid;gap:.55em;font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.7}
.xb-list li{position:relative;padding-left:1.6em}
.xb-list--bullet > li::before{content:"";position:absolute;left:.35em;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.xb-list--number{counter-reset:xb}
.xb-list--number > li{counter-increment:xb}
.xb-list--number > li::before{content:counter(xb,decimal-leading-zero);position:absolute;left:0;top:.18em;font-family:var(--f);font-size:var(--t-xs);letter-spacing:.04em;color:var(--blue-d)}
.xb-list--check > li::before{
  content:"";position:absolute;left:.15em;top:.5em;width:.7em;height:.38em;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);
}

.xb-md > * + *{margin-top:1.1em}

/* quote: a pull quote (never a testimonial) */
.xb-quote{margin-block:2em;padding-left:clamp(18px,2.4vw,28px);border-left:2px solid var(--blue)}
.xb-quote__q p{font-family:var(--f-h);font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
.xb-quote__q p + p{margin-top:.6em}
.xb-bq{padding-left:clamp(16px,2vw,24px);border-left:2px solid var(--line-3)}
.xb-bq .xb-p{color:var(--muted)}
.xb-quote__cite{margin-top:14px;font-family:var(--f);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.xb-quote__cite cite{font-style:normal}

/* figures */
.xb-img{margin-block:2em}
.xb-img img,.xb-gal img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--paper-3)}
.xb-img--wide,.xb-gal,.xb-cols,.xb-stats,.xb-embed,.xb-video{
  width:min(calc(100vw - 2 * var(--gutter)),var(--xb-wide));
  margin-inline:calc((100% - min(calc(100vw - 2 * var(--gutter)),var(--xb-wide))) / 2);
}
.xb-img--full{
  width:min(calc(100vw - 2 * var(--gutter)),var(--wrap));
  margin-inline:calc((100% - min(calc(100vw - 2 * var(--gutter)),var(--wrap))) / 2);
}
.xb-img--full img{border-radius:var(--r-lg)}
.xb-img__a{display:block}
.xb-cap{margin-top:10px;font-size:var(--t-xs);line-height:1.55;color:var(--muted)}
.xb-cap__credit{color:var(--faint)}
/* touch screens: a caption link (a credit) gets its 44px hit area from core.css section 15 (figure > figcaption a),
   which leaves out a figure whose picture is a link or which holds a video or an embed */

.xb-gal{margin-block:2em}
.xb-gal__list{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
.xb-gal--2 .xb-gal__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.xb-gal--4 .xb-gal__list{grid-template-columns:repeat(4,minmax(0,1fr))}
.xb-gal__item img{aspect-ratio:4 / 3;object-fit:cover}

/* figures row */
.xb-stats{margin-block:2.2em;padding-block:clamp(18px,2vw,26px);border-block:1px solid var(--line)}
.xb-stats__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2.4vw,32px)}
.xb-stat{display:flex;flex-direction:column}
.xb-stat__v{order:-1;font-family:var(--f);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.xb-stat__l{margin-top:8px;font-size:var(--t-sm);line-height:1.45;color:var(--txt)}
.xb-stat__n{margin-top:4px;font-size:var(--t-xs);line-height:1.5;color:var(--muted)}
.xb-stats__note{margin-top:14px;font-size:var(--t-xs);color:var(--muted)}

/* callout */
.xb-call{margin-block:1.8em;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);border-radius:var(--r);border:1px solid var(--line);background:var(--paper-2)}
.xb-call--info{border-color:var(--blue-line);background:var(--blue-wash)}
.xb-call--warn{border-color:var(--line-3);box-shadow:inset 3px 0 0 var(--ink)}
.xb-call--success{border-color:var(--blue-line);box-shadow:inset 3px 0 0 var(--blue)}
.xb-call__lbl{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
.xb-call__t{margin-top:8px;font-family:var(--f-h);font-size:var(--t-h4);font-weight:500;line-height:1.3;color:var(--ink)}
.xb-call__x{margin-top:6px;font-size:var(--t-body);line-height:1.65;color:var(--txt)}

/* code */
.xb-code{position:relative;margin-block:1.8em}
.xb-code__pre{overflow-x:auto;padding:18px 20px;border-radius:var(--r);background:var(--ink);color:var(--on-ink);
  font-family:var(--f);font-size:var(--t-sm);line-height:1.65;tab-size:2}
.xb-code__pre:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.xb-code__pre code{padding:0;background:none;color:inherit;font-size:inherit}
.xb-code__lang{position:absolute;top:10px;right:14px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-3)}

/* embeds and video */
.xb-embed{margin-block:2em}
.xb-embed__box{position:relative;aspect-ratio:16 / 9;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.xb-embed--4-3 .xb-embed__box{aspect-ratio:4 / 3}
.xb-embed--1-1 .xb-embed__box{aspect-ratio:1 / 1;max-width:720px;margin-inline:auto}
.xb-embed--9-16 .xb-embed__box{aspect-ratio:9 / 16;max-width:420px;margin-inline:auto}
.xb-embed__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xb-video{margin-block:2em}
.xb-video__v{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--ink)}

.xb-hr{height:1px;border:0;background:var(--line);margin-block:2.4em}

/* two columns */
.xb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4vw,48px);margin-block:2em;align-items:start}
.xb-cols--2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.xb-cols--1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.xb-cols--center{align-items:center}
.xb-col > * + *{margin-top:1.1em}
.xb-col .xb-img,.xb-col .xb-gal,.xb-col .xb-stats,.xb-col .xb-embed,.xb-col .xb-video{width:auto;margin-inline:0}

@media (max-width:760px){
  .xb-cols,.xb-cols--2-1,.xb-cols--1-2{grid-template-columns:minmax(0,1fr)}
  .xb-gal__list,.xb-gal--4 .xb-gal__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .xb-gal__list,.xb-gal--2 .xb-gal__list,.xb-gal--4 .xb-gal__list{grid-template-columns:minmax(0,1fr)}
}