/* Halaman cerita: kolom baca sempit, foto sedikit lebih lebar dari teks, keterangan foto di bawah gambar */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); --read: 820px; --wide: 820px; }
body { margin: 0; }
img { max-width: 100%; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 20px; border-bottom: 1px solid var(--line); }

.post-head { max-width: var(--wide); margin: 0 auto; padding-block: 56px 28px; display: grid; gap: 18px; }
.post-head h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 300; line-height: 1.04; }
.post-meta { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.post-meta .who i { width: 26px; height: 26px; line-height: 22px; font-size: 10px; }
.post-meta .dot::before { content: "·"; }

.cover { margin: 0 auto 8px; max-width: var(--wide); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--surface); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.series { max-width: var(--wide); margin: 24px auto 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.series .label { margin-right: 6px; }
.series a { font-size: 13px; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }
.series a:hover { border-color: var(--muted); color: var(--ink); }
.series a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.post-body { max-width: var(--read); margin: 0 auto; padding-block: 40px 24px; }
.post-body p { margin: 0 0 22px; font-size: 18px; line-height: 1.78; font-weight: 400; text-align: justify; hyphens: auto; }
.post-body p em { font-family: var(--f-display); font-size: 1.12em; }

.post-body figure { margin: 8px 0 30px; cursor: zoom-in; min-width: 0; }
.post-body figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); border-radius: 2px; }
.post-body > figure { margin-left: calc((var(--read) - var(--wide)) / 2); margin-right: calc((var(--read) - var(--wide)) / 2); }
.post-body figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.photos { display: grid; gap: 14px 12px; margin: 8px calc((var(--read) - var(--wide)) / 2) 30px; align-items: start; }
.photos figure { margin: 0; }
.photos figure img { aspect-ratio: 1 / 1; }
.photos figcaption { font-size: 12.5px; }
.p2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.closing { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.closing p { font-family: var(--f-display); font-size: 22px; line-height: 1.5; font-style: italic; }

.pager { max-width: var(--wide); margin: 24px auto 0; padding-block: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pager a { text-decoration: none; display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.pager a:hover { border-color: var(--muted); }
.pager a.next { text-align: right; grid-column: 2; }
.pager b { font-family: var(--f-display); font-size: 22px; font-weight: 500; line-height: 1.2; }

#lb[hidden] { display: none; }
#lb { position: fixed; inset: 0; z-index: 50; background: var(--scrim-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
#lb img { max-width: min(1200px, 100%); max-height: 78vh; object-fit: contain; }
#lb p { margin: 0; max-width: 70ch; text-align: center; font-size: 14px; color: var(--lb-ink); }
#lb button { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border: 0; background: none; color: var(--lb-ink); font: 300 34px/1 var(--f-body); cursor: pointer; }

:root { --scrim-strong: rgba(12, 12, 12, .94); --lb-ink: #EDEDEB; }

@media (max-width: 860px) {
  .post-body > figure, .photos { margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) {
  .p3, .p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body p { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .pager a.next { grid-column: auto; }
}