/* =========================================================
   Heritage sections — one design for every content page
   (customs, figures, peoples, rulers, events, influential
   people, handicrafts, architecture, music, instruments).
   Warm Iranian minimal: paper, brick, saffron, turquoise.
   Rendered by assets/js/heritage.js from one content file
   per section (edited in the operators' panel).
   ========================================================= */

@font-face { font-family: 'Vazirmatn'; src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* Marcellus without its digits (its 1 and 0 read as I and O): numbers fall back to Vazirmatn. */
@font-face { font-family: 'Marcellus'; src: url('../fonts/Marcellus-Regular.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }

:root {
  --night: #2a1712; --night2: #3a2119; --brick-d: #6b3424;
  --saffron: #d9952b; --saffron-l: #f0c77a; --saffron-d: #a8701c;
  --pom: #a3262a; --brick: #b5562d; --tur: #1f8a86; --pist: #8fa35a;
  --paper: #faf5ec; --paper2: #f1e7d6; --card: #fffdf8;
  --ink: #2b1d16; --ink2: #7a6656; --line: #ebdfcb;
  --accent: var(--tur);
  --r: 18px; --r-s: 12px;
  --shadow: 0 1px 2px rgba(60, 30, 15, .06), 0 8px 24px rgba(60, 30, 15, .07);
  --shadow-h: 0 2px 4px rgba(60, 30, 15, .08), 0 16px 40px rgba(60, 30, 15, .14);
  --display: 'Marcellus', 'Vazirmatn', Georgia, serif;
  --body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1d120e; --paper2: #26170f; --card: #2a1a13;
    --ink: #f3e8d8; --ink2: #b9a48f; --line: #3d2a1f;
    --accent: #45b5ae;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-h: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1d120e; --paper2: #26170f; --card: #2a1a13;
  --ink: #f3e8d8; --ink2: #b9a48f; --line: #3d2a1f;
  --accent: #45b5ae;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-h: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.hx-lock { overflow: hidden; }
body.hx {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
:where(.hx) img { max-width: 100%; display: block; }
:where(.hx) a { color: inherit; }
.hx :focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 6px; }
.hx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.hx-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(217, 149, 43, .28), transparent 55%),
    radial-gradient(90% 120% at -10% 120%, rgba(163, 38, 42, .35), transparent 60%),
    var(--night);
  color: #f7ecdc;
  padding: clamp(40px, 7vw, 84px) 16px clamp(34px, 5vw, 60px);
}
.hx-hero::before {           /* an eight-pointed star lattice, very faint */
  content: ''; position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f0c77a' stroke-width='1.2'%3E%3Cpath d='M32 8l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
}
.hx-hero::after {            /* the tile band */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--pom) 0 25%, var(--saffron) 25% 50%, var(--tur) 50% 75%, var(--brick) 75%);
}
.hx-hero__in { position: relative; max-width: 1180px; margin: 0 auto; }
.hx-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--saffron-l);
  text-decoration: none; margin-bottom: 14px;
}
.hx-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; }
a.hx-kicker:hover { color: #fff; }
.hx-hero h1 {
  font: 400 clamp(32px, 5.4vw, 58px)/1.08 var(--display);
  margin: 0 0 14px; letter-spacing: .01em; max-width: 18ch;
}
.hx-hero p.hx-intro { margin: 0; max-width: 62ch; font-size: clamp(15.5px, 1.6vw, 18px); color: #e6d6c2; }
.hx-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hx-stat {
  font-size: 13px; padding: 5px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(240, 199, 122, .25); color: #f3e3cc;
}
.hx-stat b { font-weight: 700; color: var(--saffron-l); }

/* ---------- layout ---------- */
.hx-main { max-width: 1180px; margin: 0 auto; padding: 26px 16px 72px; }
.hx-h2 {
  font: 400 clamp(22px, 2.6vw, 28px)/1.2 var(--display); margin: 34px 0 6px;
  display: flex; align-items: center; gap: 12px;
}
.hx-h2::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.hx-lead { color: var(--ink2); margin: 0 0 18px; max-width: 70ch; }

/* ---------- category tiles (hubs) ---------- */
.hx-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 18px 0 8px; }
.hx-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px; border-radius: var(--r); overflow: hidden; text-decoration: none;
  background: var(--night2); color: #fff; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hx-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 23, 18, 0) 30%, rgba(42, 23, 18, .88)); }
.hx-tile__t { position: relative; z-index: 1; padding: 18px; }
.hx-tile h3 { margin: 0 0 4px; font: 400 22px/1.2 var(--display); }
.hx-tile p { margin: 0; font-size: 14px; color: #ead9c4; }
.hx-tile .hx-count { position: absolute; z-index: 1; top: 14px; right: 14px; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(42, 23, 18, .7); border: 1px solid rgba(240, 199, 122, .35); color: var(--saffron-l); }
.hx-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.hx-tile:hover img { transform: scale(1.05); }

/* ---------- toolbar ---------- */
.hx-tools {
  position: sticky; top: 61px; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 12px 0; margin: 4px 0 8px;
  background: linear-gradient(var(--paper) 78%, transparent);
}
.hx-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.hx-search input {
  width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; box-shadow: var(--shadow);
}
.hx-search input::placeholder { color: var(--ink2); }
.hx-search input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(217, 149, 43, .25); }
.hx-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink2); pointer-events: none; }
.hx-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; max-width: 100%; }
.hx-chips::-webkit-scrollbar { display: none; }
.hx-chip {
  flex: none; height: 38px; padding: 0 15px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.hx-chip small { font-size: 12px; color: var(--ink2); }
.hx-chip:hover { border-color: var(--saffron); }
.hx-chip[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fbeedd; }
.hx-chip[aria-pressed="true"] small { color: var(--saffron-l); }
:root[data-theme="dark"] .hx-chip[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #2a1712; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-chip[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #2a1712; } :root:not([data-theme="light"]) .hx-chip[aria-pressed="true"] small { color: #5b3a12; } }
.hx-found { font-size: 13.5px; color: var(--ink2); margin-left: auto; white-space: nowrap; }

/* ---------- cards ---------- */
.hx-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.hx-group + .hx-group { margin-top: 10px; }
.hx-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.hx-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); border-color: rgba(217, 149, 43, .55); }
.hx-card__img { position: relative; aspect-ratio: 4 / 3; background: var(--paper2); overflow: hidden; }
.hx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hx-card:hover .hx-card__img img { transform: scale(1.045); }
.hx-tag {
  position: absolute; left: 12px; top: 12px; font-size: 11.5px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 99px; background: rgba(42, 23, 18, .78); color: #f7e6cc;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hx-card__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hx-card__sub { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--saffron-d); }
:root[data-theme="dark"] .hx-card__sub { color: var(--saffron-l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-card__sub { color: var(--saffron-l); } }
.hx-card h3 { margin: 0; font: 400 21px/1.25 var(--display); }
.hx-card p { margin: 0; font-size: 14.5px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hx-more { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }
.hx-card:hover .hx-more span { transform: translateX(3px); }
.hx-more span { transition: transform .2s; }
/* link cards (hubs that lead to other pages) */
.hx-card--link .hx-card__img { aspect-ratio: 16 / 9; }
.hx-card--link .hx-card__img img { object-position: 50% 22%; }
.hx-icon {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 46px;
  background:
    radial-gradient(circle at 30% 20%, rgba(240, 199, 122, .35), transparent 60%),
    linear-gradient(135deg, var(--night2), var(--brick-d));
}
/* no picture yet */
.hx-ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font: 400 52px/1 var(--display); color: rgba(240, 199, 122, .9);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 4l5 13 13 5-13 5-5 13-5-13-13-5 13-5z' fill='none' stroke='%23f0c77a' stroke-opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--night2), var(--brick-d));
}

/* ---------- states ---------- */
.hx-empty, .hx-error { text-align: center; padding: 56px 16px; color: var(--ink2); }
.hx-empty b, .hx-error b { display: block; font: 400 22px/1.3 var(--display); color: var(--ink); margin-bottom: 6px; }
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.hx-btn:hover { border-color: var(--saffron); }
.hx-btn--main { background: var(--night); border-color: var(--night); color: #fbeedd; }
.hx-btn--main:hover { background: var(--brick-d); border-color: var(--brick-d); }
.hx-skel { border-radius: var(--r); background: linear-gradient(90deg, var(--paper2), var(--card), var(--paper2)); background-size: 300% 100%; animation: hx-sh 1.4s infinite linear; aspect-ratio: 4 / 4.3; border: 1px solid var(--line); }
@keyframes hx-sh { to { background-position: -150% 0; } }

/* ---------- the detail dialog ---------- */
.hx-dialog {
  width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(20, 8, 4, .45);
}
.hx-dialog::backdrop { background: rgba(28, 14, 9, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hx-dialog[open] { animation: hx-in .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes hx-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.hx-d { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-height: inherit; }
.hx-d__media { position: relative; background: var(--night); min-height: 260px; }
.hx-d__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hx-d__media .hx-ph { position: absolute; inset: 0; font-size: 80px; }
.hx-d__body { overflow-y: auto; padding: 30px 32px 26px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.hx-d__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 44px; }
.hx-badge { font-size: 12px; padding: 3px 11px; border-radius: 99px; background: var(--paper2); color: var(--ink2); border: 1px solid var(--line); }
.hx-badge--cat { background: rgba(31, 138, 134, .12); border-color: rgba(31, 138, 134, .3); color: var(--accent); }
.hx-d h2 { font: 400 clamp(26px, 3.2vw, 36px)/1.15 var(--display); margin: 0 0 12px; }
.hx-d__sum p { margin: 0 0 12px; font-size: 16px; }
.hx-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; margin: 18px 0; padding: 0; }
.hx-meta div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 13px; }
.hx-meta dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin: 0 0 2px; }
.hx-meta dd { margin: 0; font-size: 14.5px; font-weight: 500; }
.hx-d h3 { font: 400 19px/1.3 var(--display); margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.hx-d h3::before { content: ''; width: 9px; height: 9px; transform: rotate(45deg); background: var(--saffron); flex: none; }
.hx-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-facts li { position: relative; padding: 10px 14px 10px 40px; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); font-size: 15px; counter-increment: f; }
.hx-facts { counter-reset: f; }
.hx-facts li::before { content: counter(f); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--night); color: var(--saffron-l); }
.hx-bars { display: grid; gap: 9px; }
.hx-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr 34px; gap: 10px; align-items: center; font-size: 14px; }
.hx-bar i { display: block; height: 9px; border-radius: 99px; background: var(--paper2); border: 1px solid var(--line); overflow: hidden; }
.hx-bar b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--saffron), var(--pom)); }
.hx-bar em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--ink2); text-align: right; }
.hx-gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -2px; }
.hx-gal figure { margin: 0; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.hx-gal .hx-gal__img { aspect-ratio: 1; background: var(--paper2); }
.hx-gal img { width: 100%; height: 100%; object-fit: cover; }
.hx-gal figcaption { padding: 9px 11px 11px; font-size: 13px; color: var(--ink2); }
.hx-gal figcaption b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.hx-map { margin: 6px 0 0; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); }
.hx-map img { width: 100%; height: auto; }
.hx-d__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.hx-d__nav { margin-left: auto; display: flex; gap: 8px; }
.hx-x {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 22px; line-height: 1; box-shadow: var(--shadow);
}
.hx-x:hover { border-color: var(--saffron); }
.hx-round { width: 44px; padding: 0; }

@media (max-width: 760px) {
  .hx-d { grid-template-columns: 1fr; }
  .hx-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .hx-d { max-height: none; height: 100%; overflow-y: auto; display: block; }
  .hx-d__media { min-height: 0; aspect-ratio: 16 / 11; }
  .hx-d__body { max-height: none; overflow: visible; padding: 22px 18px 30px; }
  .hx-tools { top: 0; position: relative; }
  .hx-found { margin-left: 0; }
  .hx-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .hx-search { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
}

/* ---------- footer ---------- */
.hx-foot { border-top: 1px solid var(--line); color: var(--ink2); font-size: 13.5px; text-align: center; padding: 26px 16px 34px; }
.hx-foot a { color: var(--accent); text-decoration: none; }
.hx-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 10px; }

/* ---------- explore hubs (History / Culture / Art) ---------- */
.hx-tiles--hub { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-top: 4px; }
.hx-tile--big { min-height: 340px; }
.hx-tile--big h3 { font-size: 26px; }
.hx-tile--big p { font-size: 15px; }
.hx-also { margin: 26px 0 0; text-align: center; color: var(--ink2); }
.hx-also a { color: var(--accent); font-weight: 600; text-decoration: none; }
@media (max-width: 760px) { .hx-tile--big { min-height: 220px; } }

/* ---------- one entry as a page (the dynasty pages) ---------- */
.hx-entry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; margin-top: 8px; }
.hx-entry__img { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--night2); aspect-ratio: 4 / 5; position: sticky; top: 80px; }
.hx-entry__img img, .hx-entry__img .hx-ph { width: 100%; height: 100%; object-fit: cover; }
.hx-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.8; }
.hx-prose p:first-child::first-letter { font: 400 3.1em/0.9 var(--display); float: left; margin: 6px 10px 0 0; color: var(--brick); }
.hx-entry__text .hx-d { display: block; }
.hx-roster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); margin-top: 14px; }
.hx-roster figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.hx-roster__img { aspect-ratio: 1; background: var(--paper2); }
.hx-roster__img img, .hx-roster__img .hx-ph { width: 100%; height: 100%; object-fit: cover; }
.hx-roster figcaption { padding: 12px 14px 14px; font-size: 14px; color: var(--ink2); display: grid; gap: 4px; }
.hx-roster figcaption b { color: var(--ink); font: 400 18px/1.25 var(--display); }
.hx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.hx-pager a { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; box-shadow: var(--shadow); }
.hx-pager a:last-child { text-align: right; }
.hx-pager a:hover { border-color: var(--saffron); }
.hx-pager small { color: var(--ink2); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.hx-pager b { font: 400 19px/1.25 var(--display); }
@media (max-width: 760px) {
  .hx-entry { grid-template-columns: 1fr; gap: 18px; }
  .hx-entry__img { position: static; aspect-ratio: 16 / 11; }
  .hx-prose p { font-size: 16px; }
  .hx-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hx-roster figcaption b { font-size: 16px; }
  .hx-pager b { font-size: 16px; }
}

/* ---------- touch targets ---------- */
.hx-foot nav a { display: inline-block; padding: 10px 6px; }
a.hx-kicker { padding: 10px 0; margin-top: -10px; margin-bottom: 4px; }
.hx-also a { display: inline-block; padding: 8px 4px; }