/* about/page.css: styles only /about/ needs (zp-* names). Loaded after shared/pages.css. */
/* the hero band uses the same 980 column as the body, so the copy and the sections share one left edge (art stays right) */
.zp-main,.zp-hero .hero-grid{max-width:980px}
@media(min-width:801px){.zp-hero .hero-picture{margin-left:16px}} /* the narrower column: keep the h1 off the art */
html[data-page=about] .zp-section{scroll-margin-top:0}
.zp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.zp-facts>div{background:#fff;border:1px solid var(--zp-line);border-radius:15px;padding:16px 18px}
.zp-facts dt{font-size:22px;font-weight:760;letter-spacing:-.6px;color:var(--ink);line-height:1.25}
.zp-facts dd{margin:4px 0 0;font-size:13px;line-height:1.55;color:#5f6f7c}
.zp-prose p{font-size:15px;line-height:1.75;color:#3f4f5c;margin:0 0 12px;max-width:720px}
.zp-prose p:last-child{margin-bottom:0}
.zp-prose .zp-tag{margin-left:0;vertical-align:1px}
.zp-h3{font-size:16px;font-weight:700;letter-spacing:-.2px;margin:26px 0 10px;scroll-margin-top:96px}

/* schedule */
.zp-timeline{list-style:none;margin:0 0 12px;padding:0;border-left:2px solid #dfe9e3;max-width:720px}
.zp-timeline li{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:7px 0 7px 20px;font-size:14px;line-height:1.55;color:#3f4f5c}
.zp-timeline li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #9fcfb8}
.zp-timeline li.is-market::before{background:#0a7a62;border-color:#0a7a62}
.zp-timeline li.is-market span{font-weight:650;color:#1f3b33}
.zp-timeline time{font-variant-numeric:tabular-nums;font-weight:650;color:#26473d}

/* rules */
.zp-rules{margin:0;padding:0 0 0 18px;max-width:760px}
.zp-rules li{font-size:15px;line-height:1.7;color:#3f4f5c;margin:0 0 10px;padding-left:2px}
.zp-rules li:last-child{margin-bottom:0}

.zp-universe{max-width:620px}
.zp-universe th[scope=row]{font-weight:700;color:#26473d;text-align:left}
.zp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.zp-dot.s-tech{background:#4a8ee8}.zp-dot.s-comm{background:#9873e3}.zp-dot.s-cons{background:#f4b25c}.zp-dot.s-fin{background:#7da3cc}.zp-dot.s-broad{background:#79b975}

/* cast */
.zp-cast th[scope=row]{white-space:nowrap;text-align:left}
.zp-cast th[scope=row] .zp-avatar{margin-right:8px}
.zp-cast th[scope=row] a{color:var(--ink);font-weight:650;text-decoration:none}
.zp-cast th[scope=row] a:hover{color:var(--zp-link);text-decoration:underline}
.zp-cast td{white-space:nowrap}
.zp-cast .zp-tag.is-draft{background:#fff3dc;color:#8a5a00}
.zp-cast .zp-tag.is-status{margin-left:0}
.zp-on{font-size:12px;color:#087e63;font-weight:600}
.zp-cast-note{margin:8px 0 0}
/* ui.na's sr-only span is position:absolute; without a positioned ancestor it escapes the scroll wrapper and widens the page */
.zp-page .zp-cast-wrap,.zp-cast .zp-st{position:relative}

/* ribbons glossary */
.zp-glossary{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zp-glossary .zp-medal small{font-size:12px;color:#5f6f7c}
.zp-ribbon-slot{flex:none;width:28px;height:28px}
.zp-tag.is-draft{background:#fff3dc;color:#8a5a00}
.zp-fine p{font-size:13px;color:#5f6f7c}

@media(max-width:800px){
 .zp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .zp-facts{gap:10px}.zp-facts>div{padding:13px 14px}.zp-facts dt{font-size:19px}
 .zp-prose p,.zp-rules li{font-size:14px}
 .zp-timeline li{grid-template-columns:96px minmax(0,1fr);font-size:13px;padding-left:14px}
 .zp-glossary{grid-template-columns:minmax(0,1fr)}
}
.zp-timeline li.is-round span{font-weight:600;color:#26473d}
.zp-fix-count{margin-top:4px}
