/* Post types on a post's page (M602 to M606): a gallery's shapes, a video post's player and chapters,
   a live post's updates and its mark. Colours are the site's tokens, so a site's own scheme carries through. */
.po-type { margin-bottom: 36px; }
@media (min-width: 1080px) { .po-type--gallery .gx, .po-type--video .vx { margin-left: calc((var(--text-w) - var(--wide-w)) / 2); margin-right: calc((var(--text-w) - var(--wide-w)) / 2); } }
.gx-t { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--surface); }
a.gx-t { cursor: zoom-in; }
a.gx-t:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gx-i, .gx-i picture, .gx-i img { display: block; width: 100%; height: 100%; }
.gx-grid .gx-i, .gx-one .gx-i { position: absolute; inset: 0; }
.gx-i img { object-fit: cover; }
.gx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gx-grid .gx-t { aspect-ratio: 3 / 2; }
.gx--big .gx-t--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gx-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 20, 45, .55); color: #fff; font: 700 22px var(--font-display, inherit); }
.gx-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.gx-foot b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.gx-foot .sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.gx--strip { position: relative; }
.gx-row { display: flex; gap: 10px; height: 340px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; border-radius: 12px; }
.gx-row::-webkit-scrollbar { display: none; }
.gx-row .gx-t { flex: none; height: 100%; scroll-snap-align: start; }
.gx-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--card, #fff); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; z-index: 2; }
.gx-nav:disabled { opacity: .45; cursor: default; }
.gx--strip .gx-nav { top: 170px; }
.gx--strip .gx-nav--l { left: -22px; } .gx--strip .gx-nav--r { right: -22px; }
.gx-stage { position: relative; height: 520px; border-radius: 12px; overflow: hidden; background: var(--surface); }
.gx-slide { height: 100%; display: grid; place-items: center; }
.gx-slide[hidden] { display: none; }
.gx-one { height: 100%; width: 100%; border-radius: 0; background: none; }
.gx-one img { object-fit: contain; }
.gx-stage .gx-nav--l { left: 16px; } .gx-stage .gx-nav--r { right: 16px; }
.gx-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 15px; color: var(--ink); }
.gx-cap small { color: var(--muted); font-size: 14px; white-space: nowrap; }
.gx-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.gx-th { flex: none; width: 92px; height: 62px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; opacity: .6; background: var(--surface); cursor: pointer; }
.gx-th picture, .gx-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-th.on { opacity: 1; box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--blue); }
.at-text img.at-zoom { cursor: zoom-in; }
.vx { position: relative; margin: 0; }
.vx video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #0b1530; }
.vx-marks { position: relative; height: 4px; margin: 8px 14px 0; border-radius: 2px; background: var(--border); }
.vx-marks i { position: absolute; top: -3px; width: 2px; height: 10px; border-radius: 1px; background: var(--ink); opacity: .6; }
.vx--link .at-embed__pic { aspect-ratio: 16 / 9; }
.vx figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.vx-chap { margin: 20px 0 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; }
.vx-chap b { display: block; margin-bottom: 8px; font: 700 16px var(--font-display, inherit); color: var(--ink); }
.vx-chap ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.vx-chap button, .vx-chap .vx-t { display: flex; gap: 14px; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.vx-chap .vx-t { cursor: default; }
.vx-chap button span, .vx-chap .vx-t span { min-width: 48px; color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-chap button:hover { color: var(--blue); }
.po-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #D64545; color: #fff; font: 700 13px/1 var(--font-body, inherit); letter-spacing: .06em; text-transform: uppercase; vertical-align: .35em; }
.po-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.po-live.is-ended { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.po-live.is-ended::before { background: var(--muted); box-shadow: none; }
.lv { margin: 8px 0 40px; }
.lv-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font: 700 22px var(--font-display, inherit); color: var(--ink); }
.lv-h small { font: 400 14px var(--font-body, inherit); color: var(--muted); }
.lv-new { display: flex; align-items: center; gap: 8px; margin: 0 auto 18px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--blue); color: var(--on-blue, #fff); font: 600 14.5px var(--font-body, inherit); cursor: pointer; }
.lv-new[hidden] { display: none; }
.lv-l { position: relative; display: grid; gap: 26px; padding-left: 34px; }
.lv-l::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.lv-up { position: relative; scroll-margin-top: 90px; }
.lv-up::before { content: ''; position: absolute; left: -34px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--card, #fff); box-shadow: inset 0 0 0 3px var(--blue); }
.lv-up.is-pinned::before { box-shadow: inset 0 0 0 3px var(--gold); }
.lv-when { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; }
.lv-when a { color: var(--blue); text-decoration: none; font-weight: 600; }
.lv-pin { color: #A8761C; font-weight: 600; }
.lv-up h3 { margin: 6px 0 6px; font: 700 19px/1.3 var(--font-display, inherit); color: var(--ink); }
.lv-up p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.lv-pic { margin: 12px 0 0; }
.lv-pic img { display: block; width: 100%; max-width: 560px; border-radius: 12px; }
@media (max-width: 760px) {
    .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .gx-t { border-radius: 8px; }
    .gx--big .gx-t--big { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
    .gx-row { height: 230px; } .gx--strip .gx-nav { display: none; }
    .gx-stage { height: auto; aspect-ratio: 3 / 2; border-radius: 0; margin: 0 -20px; }
    .gx-stage .gx-nav { width: 36px; height: 36px; }
    .gx-th { width: 64px; height: 44px; }
    .vx video { border-radius: 0; margin: 0 -20px; width: calc(100% + 40px); }
    .lv-l { padding-left: 26px; } .lv-up::before { left: -26px; } .lv-l::before { left: 4px; }
}