/* dahabrate.com: трекер цен на золото. Широкий холст 1280px, RTL по умолчанию, LTR для /en/.
   Свои имена классов (префикс dh-), без заимствований с других сайтов портфеля. */
:root {
  --ink: #16202b; --ink-soft: #46525f; --muted: #6b7682; --line: #e3ddd2; --bg: #fbf9f5; --panel: #ffffff;
  --gold: #a87a10; --gold-deep: #7d5a07; --gold-tint: #f6ecd2; --up: #157a46; --down: #b42318; --silver: #6e7781;
  --radius: 10px; --wide: 1280px; --measure: 64ch;
  --sans: 'Dahab Sans', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box }
img { max-width: 100%; height: auto; display: block }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7 }
a { color: var(--gold-deep); text-underline-offset: 3px }
a:hover { color: var(--ink) }
.dh-wrap { max-width: var(--wide); margin: 0 auto; padding-inline: 20px }
.dh-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap }

/* шапка */
.dh-top { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5 }
.dh-top .dh-wrap { display: flex; align-items: center; gap: 18px; padding-block: 12px; flex-wrap: wrap }
.dh-logo { font-weight: 700; font-size: 21px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px }
.dh-logo i { width: 26px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #e3c26b, #a87a10); display: inline-block }
.dh-nav { display: flex; gap: 14px; flex-wrap: wrap; margin-inline-start: auto; font-size: 15px }
.dh-nav a { color: var(--ink-soft); text-decoration: none; padding: 4px 2px }
.dh-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold) }
.dh-lang { font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; text-decoration: none; color: var(--ink-soft) }

/* первый экран: заголовок, ответ одной фразой, главная цена */
.dh-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 28px 18px }
.dh-hero h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; margin: 0 0 10px; text-wrap: balance }
.dh-answer { font-size: 18px; color: var(--ink-soft); margin: 0 0 16px; max-width: var(--measure) }
.dh-hero figure { margin: 0 }
.dh-hero figure img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; width: 100% }
.dh-stamp { font-size: 14px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.dh-live { display: inline-flex; align-items: center; gap: 6px; color: var(--up); font-weight: 600 }
.dh-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--up) }
.dh-big { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 }
.dh-big div { background: var(--gold-tint); border-radius: var(--radius); padding: 12px 16px; min-width: 0 }
.dh-big b { display: block; font-size: 26px; line-height: 1.2 }
.dh-big span { font-size: 14px; color: var(--ink-soft) }

/* таблицы цен: шире текста, свой ритм */
.dh-section { padding-block: 26px }
.dh-section h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; margin: 0 0 8px; text-wrap: balance }
.dh-section > .dh-wrap > p, .dh-prose p, .dh-prose li { max-width: var(--measure) }
.dh-lead { color: var(--ink-soft); margin: 0 0 14px }
.dh-tablebox { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius) }
.dh-table { width: 100%; border-collapse: collapse; min-width: 560px }
.dh-table th, .dh-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start }
.dh-table thead th { font-size: 14px; color: var(--muted); font-weight: 600; background: #faf6ee }
.dh-table td.dh-num, .dh-table th.dh-num { text-align: end }
.dh-table tbody tr:last-child td { border-bottom: 0 }
.dh-k { display: inline-block; min-width: 54px; text-align: center; border-radius: 6px; padding: 2px 8px; font-weight: 600; background: var(--gold-tint); color: var(--gold-deep) }
.dh-k.ag { background: #eef0f2; color: var(--silver) }
.dh-up { color: var(--up) } .dh-down { color: var(--down) }

/* карточки стран на хабе */
.dh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.dh-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; text-decoration: none; color: var(--ink) }
.dh-card:hover { border-color: var(--gold) }
.dh-card h3 { margin: 0; font-size: 19px }
.dh-card .dh-row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--ink-soft) }
.dh-card .dh-soon { font-size: 13px; color: var(--muted) }

/* картинка рядом с текстом */
.dh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center }
.dh-split figure { margin: 0 }
.dh-split img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100% }
figcaption { font-size: 13px; color: var(--muted); margin-top: 6px }

/* калькулятор */
.dh-calc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px }
.dh-calc .dh-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px }
.dh-calc label { display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); min-width: 0 }
.dh-calc input, .dh-calc select { width: 100%; min-width: 0; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink) }
.dh-calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.dh-calc-out div { background: var(--bg); border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px }
.dh-calc-out span { font-size: 14px; color: var(--ink-soft) }
.dh-calc output { font-size: 22px; font-weight: 600 }
.dh-calc output.dh-total { font-size: 28px; font-weight: 700; color: var(--gold-deep) }
.dh-hm { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }
.dh-gap { margin-top: 14px }
.dh-pause { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 600 }
.dh-pause::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--muted) }
.dh-note { font-size: 14px; color: var(--muted) }

/* график истории (SVG строится на сервере) */
.dh-chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px }
.dh-chart svg { width: 100%; height: auto; display: block }

/* вопросы, автор, подвал */
.dh-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 6px 32px }
.dh-qa h3 { font-size: 18px; line-height: 1.4; margin: 14px 0 4px }
.dh-qa p { margin: 0 0 8px; color: var(--ink-soft); max-width: var(--measure) }
.dh-byline { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ink-soft); padding-block: 8px }
.dh-byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover }
.dh-foot { margin-top: 40px; border-top: 1px solid var(--line); background: var(--panel); font-size: 14px; color: var(--muted) }
.dh-foot .dh-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding-block: 24px }
.dh-foot a { color: var(--ink-soft) }
.dh-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.dh-crumbs { font-size: 14px; color: var(--muted); padding-top: 14px }
.dh-crumbs a { color: var(--muted) }

@media (max-width: 860px) {
  .dh-hero, .dh-split { grid-template-columns: minmax(0, 1fr) }
  body { font-size: 16px }
  .dh-nav { margin-inline-start: 0 }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important } }