/* /tag/ — Browse by subject (docs/design/tags.html). Scoped to .tgx: .stats, .shelf, .places, .az are generic names. */
.tgx { padding-bottom: 50px; }
.tgx .crumbs { font: 400 13px/1.4 var(--sans); color: var(--ink-soft); padding: 24px 0 0; }
.tgx .ph { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(24px, 4vw, 56px); align-items: end; padding: 18px 0 22px; }
@media (max-width: 960px) { .tgx .ph { grid-template-columns: 1fr; } }
.tgx .kick { display: block; margin: 0 0 14px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); }
.tgx h1 { font: 600 clamp(40px, 5.4vw, 64px)/1 var(--serif); letter-spacing: -.03em; margin: 0 0 14px; }
.tgx .lead, .tgx .lead p { font: 400 19px/1.55 var(--serif); color: #3e3830; margin: 0; max-width: 56ch; }
.tgx .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: 14px; background: var(--white); overflow: hidden; margin: 0; }
.tgx .stats > div { padding: 14px; border-right: 1px solid var(--rule); }
.tgx .stats > div:last-child { border-right: 0; }
.tgx .stats dt { font: 600 10px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.tgx .stats dd { margin: 6px 0 0; font: 600 24px/1 var(--serif); }

.tgx .jump { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: sticky; top: var(--hd-h, 0px); background: var(--paper); z-index: 10; overflow-x: auto; scrollbar-width: none; }
.tgx .jump::-webkit-scrollbar { display: none; }
.tgx .jump > * { flex: none; }
.tgx .find { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 99px; background: var(--white); width: 240px; margin: 0; }
.tgx .find svg { width: 15px; height: 15px; color: var(--ink-soft); flex: none; }
.tgx .find input { border: 0; background: none; outline: none; font: 400 14px/1 var(--sans); width: 100%; color: var(--ink); }
.tgx .ch { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 99px; background: var(--white); font: 500 13px/1 var(--sans); text-decoration: none; color: var(--ink); }
.tgx .ch:hover { border-color: var(--ink); }
.tgx .nothing { font: 400 14px/1.5 var(--sans); color: var(--ink-soft); margin: 18px 0 0; }

.tgx .sec2 { padding: 34px 0 6px; scroll-margin-top: 64px; }
.tgx .sh2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; border-top: 2px solid var(--ink); padding-top: 12px; margin: 0 0 18px; }
.tgx .sh2 .no { font: 600 11px/1 var(--sans); letter-spacing: .08em; color: var(--seal); }
.tgx .sh2 h2 { font: 600 26px/1.15 var(--serif); margin: 0; }
.tgx .sh2 .d { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); }
.tgx .sh2 .r { margin-left: auto; font: 600 14px/1 var(--sans); }
.tgx .swipe { display: none; font: 500 12px/1 var(--sans); color: var(--ink-faint); margin: -6px 0 10px; }

.tgx .shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tgx .occ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) {
  .tgx .shelf, .tgx .occ { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 2px 2px 12px; scrollbar-width: none; }
  .tgx .shelf > * { flex: 0 0 42%; scroll-snap-align: start; }
  .tgx .occ > * { flex: 0 0 70%; scroll-snap-align: start; }
  .tgx .swipe { display: block; }
}
.tgx .bk { text-decoration: none; display: block; color: var(--ink); }
.tgx .bk .cv { aspect-ratio: 17 / 22; width: 100%; position: relative; overflow: hidden; border-radius: 2px 5px 5px 2px; box-shadow: 0 1px 0 rgba(36, 32, 27, .08), 0 16px 26px -18px rgba(36, 32, 27, .6); }
.tgx .bk .cv.ph { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 12px 16px; }
.tgx .bk .cv.ph b { font: 600 14px/1.15 var(--serif); margin: 0; align-self: stretch; text-align: left; }
.tgx .bk .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgx .bk > b { display: block; font: 600 15px/1.3 var(--serif); margin-top: 10px; }
.tgx .bk > small { display: block; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); margin-top: 2px; }

.tgx .oc { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; background: var(--white); padding: 14px 16px; }
.tgx .oc:hover { border-color: var(--ink); }
.tgx .oc .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tgx .oc b { font: 600 17px/1.2 var(--serif); }
.tgx .oc .n { font: 600 13px/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tgx .oc .p { display: block; margin: 6px 0 10px; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); }
.tgx .oc .sp { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 10px; }
.tgx .oc .sp i { flex: 1; background: var(--rule); border-radius: 1px; }
.tgx .oc .sp i.h { background: var(--seal); }

.tgx .dmx { border: 1px solid var(--rule); border-radius: 14px; background: var(--white); overflow: hidden; }
.tgx .dmx table { width: 100%; border-collapse: collapse; font: 400 14px/1.3 var(--sans); }
.tgx .dmx thead th { text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 14px; border-bottom: 2px solid var(--ink); }
.tgx .dmx td, .tgx .dmx tbody th { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; }
.tgx .dmx tbody tr:last-child td, .tgx .dmx tbody tr:last-child th { border-bottom: 0; }
.tgx .dmx tbody th { font: 600 16px/1 var(--serif); width: 110px; }
.tgx .cell { display: flex; align-items: center; gap: 10px; }
.tgx .cell a { font-weight: 600; min-width: 46px; text-align: right; text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.tgx .cell i { display: block; height: 8px; border-radius: 4px; background: var(--seal); }
.tgx .cell.p i { background: #2E4A6B; }
.tgx .cell em { font-style: normal; color: var(--ink-faint); }
@media (max-width: 600px) { .tgx .dmx tbody th { width: 64px; font-size: 14px; } .tgx .dmx td, .tgx .dmx th { padding: 10px; } }

.tgx .places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .tgx .places { grid-template-columns: 1fr 1fr; } }
.tgx .pl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); text-decoration: none; color: var(--ink); }
.tgx .pl:hover { border-color: var(--ink); }
.tgx .pl b { font: 600 15px/1.25 var(--serif); }
.tgx .pl small { display: block; font: 400 12px/1.3 var(--sans); color: var(--ink-soft); }
.tgx .pl .n { font: 600 13px/1 var(--sans); color: var(--ink-soft); }

.tgx .top12 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tgx .top12 a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 14px/1 var(--sans); }
.tgx .top12 a em { font-style: normal; opacity: .6; font-size: 12px; }
.tgx .az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.tgx .az a, .tgx .az span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--rule); background: var(--white); text-decoration: none; font: 600 13px/1 var(--sans); color: var(--ink); }
.tgx .az span { border-style: dashed; color: var(--ink-faint); background: none; }
.tgx .tidx { columns: 4 220px; column-gap: 28px; }
.tgx .tl { break-inside: avoid; margin: 0 0 16px; scroll-margin-top: 64px; }
.tgx .tl h3 { font: 600 20px/1 var(--serif); color: var(--seal); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tgx .tl a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--ink); font: 400 14px/1.35 var(--sans); border-bottom: 1px dotted var(--rule); }
.tgx .tl a small { font: 500 10px/1.8 var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-right: auto; padding-left: 6px; }
.tgx .tl a span { color: var(--ink-faint); font: 500 12px/1.6 var(--sans); font-variant-numeric: tabular-nums; }

.tgx .enc { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; border-radius: 16px; background: var(--ink); color: var(--paper); padding: 20px 22px; text-decoration: none; }
.tgx .enc .g { font: 700 34px/1 var(--kr); }
.tgx .enc b { display: block; font: 600 20px/1.2 var(--serif); }
.tgx .enc small { display: block; font: 400 14px/1.45 var(--sans); opacity: .8; margin-top: 4px; }
.tgx .enc .go { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--seal); font: 600 14px/1 var(--sans); }
@media (max-width: 600px) { .tgx .enc { grid-template-columns: auto 1fr; } .tgx .enc .go { grid-column: 1 / -1; justify-self: start; } }
.tgx [hidden] { display: none !important; }
/* prayer themes on the Prayers page */
.prayer-themes { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 14px 0 0; }
.prayer-themes > span { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.prayer-themes .chips a span { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }