[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Cinzel+Decorative:wght@700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

.hrld-wrap {
  box-sizing: border-box;
  --ink:        #e7e1d4;
  --ink-dim:    #948a78;
  --bg-card:    #201e1c;
  --bg-card-2:  #2a2724;
  --bg-card-3:  #141312;
  --brass:      #c9a15f;
  --brass-dim:  #6e5c39;
  --blood:      #5c1a1f;
  --blood-br:   #b0403f;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--ink);
  padding: 20px 12px;
}
.hrld-wrap *, .hrld-wrap *::before, .hrld-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  line-height: normal;
}

/* текстура */
.hrld-wrap .hrld-texture {
  background-color: var(--bg-card);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(ellipse at 88% 95%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(160deg, var(--bg-card-2), var(--bg-card) 55%, var(--bg-card-3) 100%);
  background-blend-mode: overlay, soft-light, multiply, normal;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 140px 140px, cover, cover, cover;
}

/* баннер */
.hrld-wrap .hrld-banner {
  max-width: 900px;
  margin: 0 auto 20px;
  text-align: center;
  border: 1px solid var(--brass-dim);
  padding: 26px 20px 22px;
  position: relative;
}
.hrld-wrap .hrld-banner::before,
.hrld-wrap .hrld-banner::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--brass);
  opacity: 0.6;
}
.hrld-wrap .hrld-banner::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.hrld-wrap .hrld-banner::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.hrld-wrap .hrld-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 4px;
  color: var(--brass);
  text-shadow: 0 0 18px rgba(201,161,95,0.25);
}
.hrld-wrap .hrld-subtitle {
  font-style: italic;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 0.3px;
  margin-top: 8px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hrld-wrap .hrld-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.hrld-wrap .hrld-stat {
  border: 1px solid var(--brass-dim);
  padding: 10px 8px;
  text-align: center;
}
.hrld-wrap .hrld-stat-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
  display: block;
}
.hrld-wrap .hrld-stat-value {
  font-size: 13px;
  color: var(--ink-dim);
  font-style: italic;
  display: block;
}

/* навигация */
.hrld-wrap .hrld-tab-input { display: none; }

.hrld-wrap .hrld-nav {
  max-width: 900px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.hrld-wrap .hrld-nav label {
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--brass-dim);
  padding: 9px 14px;
  background: var(--bg-card-2);
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}
.hrld-wrap .hrld-nav label:hover {
  color: var(--ink);
  border-color: var(--brass);
}

/* панели */
.hrld-wrap .hrld-panels { max-width: 900px; margin: 0 auto; }
.hrld-wrap .hrld-panel { display: none; }
.hrld-wrap .hrld-panel-inner {
  border: 1px solid var(--brass-dim);
  padding: 26px 26px 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55), inset 0 0 80px rgba(0,0,0,0.5);
}

#hrld-t1:checked ~ .hrld-nav label[for="hrld-t1"],
#hrld-t2:checked ~ .hrld-nav label[for="hrld-t2"],
#hrld-t3:checked ~ .hrld-nav label[for="hrld-t3"],
#hrld-t4:checked ~ .hrld-nav label[for="hrld-t4"],
#hrld-t5:checked ~ .hrld-nav label[for="hrld-t5"] {
  color: var(--ink);
  background: var(--bg-card);
  border-color: var(--brass);
  box-shadow: 0 0 12px rgba(201,161,95,0.3);
}

#hrld-t1:checked ~ .hrld-panels #hrld-p1,
#hrld-t2:checked ~ .hrld-panels #hrld-p2,
#hrld-t3:checked ~ .hrld-panels #hrld-p3,
#hrld-t4:checked ~ .hrld-panels #hrld-p4,
#hrld-t5:checked ~ .hrld-panels #hrld-p5 {
  display: block;
}

/* типографика */
.hrld-wrap .hrld-h2 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--brass);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brass-dim);
}
.hrld-wrap .hrld-h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin: 18px 0 8px;
}
.hrld-wrap .hrld-h3:first-child { margin-top: 0; }

.hrld-wrap .hrld-text {
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
  color: var(--ink);
  margin-bottom: 12px;
}
.hrld-wrap .hrld-text:last-child { margin-bottom: 0; }
.hrld-wrap .hrld-text b { color: var(--brass); font-weight: 600; }
.hrld-wrap .hrld-text i { color: var(--ink-dim); }

.hrld-wrap .hrld-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim), var(--blood), var(--brass-dim), transparent);
  margin: 18px 0;
}

.hrld-wrap .hrld-list { margin: 8px 0 14px; }
.hrld-wrap .hrld-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 7px;
}
.hrld-wrap .hrld-list li::before {
  content: "◆";
  position: absolute;
  left: 0; top: 2px;
  font-size: 9px;
  color: var(--blood-br);
}
.hrld-wrap .hrld-list li b { color: var(--brass); }

.hrld-wrap .hrld-quote {
  border-left: 2px solid var(--blood-br);
  background: rgba(0,0,0,0.25);
  padding: 14px 18px;
  margin: 12px 0;
  color: var(--brass);
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
}

.hrld-wrap .hrld-note {
  border: 1px solid var(--blood-br);
  background: rgba(92,26,31,0.18);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.hrld-wrap .hrld-note b { color: var(--blood-br); }

/* сворачиваемые блоки */
.hrld-wrap details.hrld-fold {
  border: 1px solid var(--brass-dim);
  margin-bottom: 12px;
}
.hrld-wrap details.hrld-fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  color: var(--brass);
  background: var(--bg-card-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hrld-wrap details.hrld-fold > summary::-webkit-details-marker { display: none; }
.hrld-wrap details.hrld-fold > summary::before {
  content: "▸";
  color: var(--blood-br);
  transition: transform 0.15s;
}
.hrld-wrap details.hrld-fold[open] > summary::before { transform: rotate(90deg); }
.hrld-wrap details.hrld-fold > .hrld-fold-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--brass-dim);
}

/* тинктуры — карточки */
.hrld-wrap .hrld-tinct-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 10px 0 6px;
}
.hrld-wrap .hrld-tinct-card {
  border: 1px solid var(--brass-dim);
  border-left: 3px solid var(--swatch, var(--brass));
  background: rgba(0,0,0,0.2);
  padding: 12px 14px;
}
.hrld-wrap .hrld-tinct-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hrld-wrap .hrld-tinct-swatch {
  width: 12px; height: 12px;
  border: 1px solid var(--brass-dim);
  background: var(--swatch, var(--brass));
  flex-shrink: 0;
  display: inline-block;
}
.hrld-wrap .hrld-tinct-desc {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.55;
}

/* фигуры — сетка символов */
.hrld-wrap .hrld-sym-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.hrld-wrap .hrld-sym-card {
  border: 1px solid var(--brass-dim);
  background: rgba(0,0,0,0.2);
  padding: 10px 8px;
  text-align: center;
}
.hrld-wrap .hrld-sym-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--brass);
  margin-bottom: 4px;
}
.hrld-wrap .hrld-sym-desc {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.hrld-wrap .hrld-sym-card.hrld-sym-locked {
  border-color: var(--blood-br);
}
.hrld-wrap .hrld-sym-card.hrld-sym-locked .hrld-sym-name {
  color: var(--blood-br);
}
.hrld-wrap .hrld-sym-lock {
  display: block;
  font-size: 10.5px;
  color: var(--blood-br);
  font-style: italic;
  margin-top: 3px;
}

/* иерархия рангов */
.hrld-wrap .hrld-hier { margin-top: 10px; }
.hrld-wrap .hrld-hier-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--brass-dim);
  font-size: 14.5px;
}
.hrld-wrap .hrld-hier-row:last-child { border-bottom: none; }
.hrld-wrap .hrld-hier-title { color: var(--ink); }
.hrld-wrap .hrld-hier-title b { color: var(--brass); }
.hrld-wrap .hrld-hier-addr {
  color: var(--ink-dim);
  font-style: italic;
  white-space: nowrap;
}

/* мобильная адаптация */
@media (max-width: 700px) {
  .hrld-wrap { padding: 14px 8px; }
  .hrld-wrap .hrld-title { font-size: 23px; letter-spacing: 2px; }
  .hrld-wrap .hrld-stats { grid-template-columns: 1fr 1fr; }
  .hrld-wrap .hrld-banner { padding: 18px 14px 16px; }

  .hrld-wrap .hrld-nav { flex-direction: column; }
  .hrld-wrap .hrld-nav label { width: 100%; text-align: center; padding: 11px 10px; }

  .hrld-wrap .hrld-panel-inner { padding: 18px 14px 16px; }
  .hrld-wrap .hrld-h2 { font-size: 18px; }
  .hrld-wrap .hrld-text { font-size: 14.5px; text-align: left; }

  .hrld-wrap .hrld-tinct-grid { grid-template-columns: 1fr; }
  .hrld-wrap .hrld-sym-grid { grid-template-columns: repeat(2, 1fr); }
  .hrld-wrap .hrld-hier-row { flex-direction: column; gap: 2px; }
}
</style>

<div class="hrld-wrap">

  <div class="hrld-banner hrld-texture">
    <div class="hrld-title">Геральдика</div>
    <div class="hrld-subtitle">Язык гербов, тинктур и блазонов — то, как знать заявляет о власти, землях и родстве там, где грамотность редка, а знак читается издалека.</div>
    <div class="hrld-stats">
      <div class="hrld-stat"><span class="hrld-stat-label">Металлы</span><span class="hrld-stat-value">золото, серебро</span></div>
      <div class="hrld-stat"><span class="hrld-stat-label">Цвета</span><span class="hrld-stat-value">5 основных тинктур</span></div>
      <div class="hrld-stat"><span class="hrld-stat-label">Меха</span><span class="hrld-stat-value">горностай, беличий</span></div>
      <div class="hrld-stat"><span class="hrld-stat-label">Правило</span><span class="hrld-stat-value">металл на металл не кладётся</span></div>
    </div>
  </div>

  <input type="radio" name="hrld-tab" id="hrld-t1" class="hrld-tab-input" checked>
  <input type="radio" name="hrld-tab" id="hrld-t2" class="hrld-tab-input">
  <input type="radio" name="hrld-tab" id="hrld-t3" class="hrld-tab-input">
  <input type="radio" name="hrld-tab" id="hrld-t4" class="hrld-tab-input">
  <input type="radio" name="hrld-tab" id="hrld-t5" class="hrld-tab-input">

  <nav class="hrld-nav">
    <label for="hrld-t1">Роль и значение</label>
    <label for="hrld-t2">Реестр и блазон</label>
    <label for="hrld-t3">Тинктуры</label>
    <label for="hrld-t4">Фигуры и символы</label>
    <label for="hrld-t5">Композиция</label>
  </nav>

  <div class="hrld-panels">

    <!-- 1. РОЛЬ И ЗНАЧЕНИЕ -->
    <section id="hrld-p1" class="hrld-panel">
      <div class="hrld-panel-inner hrld-texture">
        <div class="hrld-h2">Роль геральдики</div>
        <p class="hrld-text">Геральдика — это инструмент легитимации власти и собственности, язык военной идентификации и система статуса для сословий, орденов и фракций. Там, где грамотность редка и доступна не всем, символы и регалии нередко играют куда большую роль в обществе, чем письмо: герб узнают быстрее, чем прочитают имя.</p>
        <p class="hrld-text">Наиболее развита геральдика в классических феодальных королевствах, где чётко выстроена лестница титулов — как, например, в <b>Моленгарде</b>, где ранг короны отражает место в иерархии: от короля до безземельного барона. Здесь герб — это одновременно и заявление о правах на землю, и знак верности сюзерену.</p>

        <div class="hrld-h3">Как это выглядит в разных землях</div>
        <p class="hrld-text">Единого свода геральдики на весь материк не существует — каждое государство ведёт собственный учёт и придаёт символике свой смысл.</p>
        <ul class="hrld-list">
          <li><b>Моленгард</b> — классическая феодальная геральдика с блазонами, реестром и «Гербовой книгой»; герб закреплён за домом и передаётся по праву крови или пожалования.</li>
          <li><b>Империя Саргос</b> — рыцарства как понятия не существует, но дворянские дома всё равно несут гербы: здесь это исключительно знак рода и его положения при дворе, а не воинской чести.</li>
          <li><b>Ландвиди</b> — вместо европейского блазона восемь великих Домов используют собственные родовые знаки, тесно сплетённые с кастовой принадлежностью и почитанием покровителей; такие эмблемы ближе к тотему, чем к щиту с делением на металл и цвет.</li>
          <li><b>Республика Фортида</b> — устроена как сенатская республика, а не феодальная монархия, поэтому классическая геральдика здесь не прижилась: вместо гербов в ходу родовые знаки отдельных семей и государственные символы власти (фасции, инсигнии магистратов).</li>
        </ul>
        <p class="hrld-text">Ниже описана система, наиболее полно оформленная в феодальных королевствах материка — на её основе легче всего понять общие принципы блазона, тинктур и композиции, применимые (с поправками) и к другим землям.</p>
      </div>
    </section>

    <!-- 2. РЕЕСТР И БЛАЗОН -->
    <section id="hrld-p2" class="hrld-panel">
      <div class="hrld-panel-inner hrld-texture">
        <div class="hrld-h2">Реестр и утверждение герба</div>
        <p class="hrld-text">В феодальных королевствах геральдику вассалов утверждают их непосредственные сюзерены — герцоги и маркграфы. Затем эти сведения передаются выше, в королевскую канцелярию, где заносятся в общий свод — «Гербовую книгу».</p>

        <div class="hrld-h3">Королевская канцелярия</div>
        <ul class="hrld-list">
          <li>принимает блазоны (словесные описания гербов) и рисунки;</li>
          <li>проверяет права заявителя на титул и земли;</li>
          <li>проверяет уникальность герба — двух одинаковых существовать не может;</li>
          <li>выдаёт заверение с королевской печатью и издаёт «Кодекс Геральдики» для герольдов и придворных — своего рода справочник по всем знатным родам и их отличительным знакам.</li>
        </ul>

        <div class="hrld-h3">Блазон</div>
        <p class="hrld-text">Блазон — это словесное описание герба, которое герольд зачитывает вслух, представляя людям его носителя. Каждый элемент, или «сущность герба», имеет собственное значение — порой весьма нелестное.</p>

        <details class="hrld-fold">
          <summary>Блазон на примере — дом Хейт (графский род Моленгарда)</summary>
          <div class="hrld-fold-body">
            <p class="hrld-text"><i>Лазоревое поле; вепрь серебряный восстающий. В левом углу — три дубовых листа, сопровождаемые желудем.</i></p>
            <p class="hrld-text"><b>Вепрь</b> — ярость и воинская сила рода.</p>
            <p class="hrld-text"><b>Синее поле</b> — честь, долг, верность присяге.</p>
            <p class="hrld-text"><b>Дубовые листья</b> — связь с землёй и старым лесом, на котором стоит родовой замок.</p>
            <p class="hrld-text"><b>Желудь</b> — надежда на продолжение рода.</p>
          </div>
        </details>

        <div class="hrld-h3">Базовые «сущности герба»</div>
        <p class="hrld-text">Минимальный набор элементов, из которых складывается заверенная канцелярией геральдика:</p>
        <ul class="hrld-list">
          <li><b>щит</b> — основной носитель знака (выставленные щиты служат универсальным символом власти и статуса); бывают разных форм;</li>
          <li><b>поле</b> — фон щита; одноцветный или «делёный» на несколько частей;</li>
          <li><b>фигуры</b> — главный символ (животное, предмет, узор) и второстепенные, как правило геометрические;</li>
          <li><b>тинктуры</b> — ограниченный набор цветов и металлов, за каждым из которых закреплено значение;</li>
          <li><b>короны и коронеты</b> — маркер ранга: король, эрцгерцог, герцог, маркграф, граф, виконт, барон;</li>
          <li><b>девиз</b> — короткая формула ценностей, памяти рода или клятвы сюзерену; идти ему наперекор считается зазорным.</li>
        </ul>

        <div class="hrld-note"><b>Правило композиции.</b> Главный символ герба всегда один. У гербов «верхнего уровня» — правящей династии или герцогского дома — он должен быть доминирующим и однозначно узнаваемым. Второстепенные символы отвечают на другой вопрос: «чем мы отличаемся от родовой ветви или соседей» — и особенно полезны малым домам-вассалам.</div>
      </div>
    </section>

    <!-- 3. ТИНКТУРЫ -->
    <section id="hrld-p3" class="hrld-panel">
      <div class="hrld-panel-inner hrld-texture">
        <div class="hrld-h2">Тинктуры: цвета и металлы</div>
        <p class="hrld-text">В геральдике цвета называются тинктурами. Их набор ограничен намеренно — чтобы герб безошибочно узнавался издалека, в гуще любых событий, будь то турнир или поле боя.</p>

        <div class="hrld-h3">Металлы — благородство, власть, достоинство</div>
        <div class="hrld-tinct-grid">
          <div class="hrld-tinct-card" style="--swatch:#d9c37a;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Золото (Or)</div>
            <div class="hrld-tinct-desc">Благородство, богатство, королевская милость, щедрость. Часто — у домов, близких короне.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#c9c4b8;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Серебро (Argent)</div>
            <div class="hrld-tinct-desc">Чистота, честность, справедливость, верность данному слову.</div>
          </div>
        </div>

        <div class="hrld-h3">Цвета</div>
        <div class="hrld-tinct-grid">
          <div class="hrld-tinct-card" style="--swatch:#b0403f;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Красный (Gules)</div>
            <div class="hrld-tinct-desc">Воинская доблесть, кровь, жертва, храбрость.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#3d5a80;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Синий (Azure)</div>
            <div class="hrld-tinct-desc">Честь, верность, долг, служение.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#2a2724;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Чёрный (Sable)</div>
            <div class="hrld-tinct-desc">Стойкость, решимость; порой скорбь и память о трагедии рода, а иногда — и бесчестье.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#4c6b3f;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Зелёный (Vert)</div>
            <div class="hrld-tinct-desc">Земля, рост, плодородие, связь с природой.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#6e3b6e;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Пурпурный (Purpure)</div>
            <div class="hrld-tinct-desc">Редкий цвет: королевская власть, духовный сан или особый статус.</div>
          </div>
        </div>

        <div class="hrld-h3">Меха — категория с ограниченным допуском</div>
        <p class="hrld-text">Меха выступают в геральдике по правилам «цвета», но их использование строго контролируется: дом, не относящийся к королевскому или герцогскому уровню, не имеет права нести горностай; дом низкого происхождения — беличий мех.</p>
        <div class="hrld-tinct-grid">
          <div class="hrld-tinct-card" style="--swatch:#e7e1d4;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Горностай (Ermine)</div>
            <div class="hrld-tinct-desc">Белый фон с чёрными хвостиками. Символ королевского достоинства и высшей знати.</div>
          </div>
          <div class="hrld-tinct-card" style="--swatch:#7d93a8;">
            <div class="hrld-tinct-name"><span class="hrld-tinct-swatch"></span>Беличий мех (Vair)</div>
            <div class="hrld-tinct-desc">Голубо-белый узор. Символ богатства и благородства.</div>
          </div>
        </div>

        <div class="hrld-divider"></div>
        <div class="hrld-h3">Главное правило тинктур</div>
        <p class="hrld-text">Металл не кладётся на металл, цвет не кладётся на цвет.</p>
        <ul class="hrld-list">
          <li>золотая фигура на синем поле — допустимо;</li>
          <li>серебряная фигура на красном поле — допустимо;</li>
          <li>красная фигура на синем поле — читается плохо, не одобряется;</li>
          <li>золотая фигура на серебряном поле — не различима вовсе.</li>
        </ul>
        <p class="hrld-text">Правило родилось не из эстетики, а из необходимости: герб должен быть различим на расстоянии и в пыли сражения, под чьим бы то ни было знаменем ни шли бы войска.</p>
      </div>
    </section>

    <!-- 4. ФИГУРЫ И СИМВОЛЫ -->
    <section id="hrld-p4" class="hrld-panel">
      <div class="hrld-panel-inner hrld-texture">
        <div class="hrld-h2">Фигуры и символы</div>
        <p class="hrld-text">Ниже — примерные значения некоторых распространённых фигур. Дом не обязан им строго соответствовать: смысл может по-своему переосмысляться в конкретном блазоне.</p>

        <div class="hrld-sym-grid">
          <div class="hrld-sym-card hrld-sym-locked"><div class="hrld-sym-name">Лев</div><div class="hrld-sym-desc">королевская власть, храбрость<span class="hrld-sym-lock">только дома, близкие к правящей династии</span></div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Орёл</div><div class="hrld-sym-desc">имперская сила, власть</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Волк</div><div class="hrld-sym-desc">хитрость, выносливость</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Медведь</div><div class="hrld-sym-desc">грубая сила</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Олень</div><div class="hrld-sym-desc">благородство</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Кабан</div><div class="hrld-sym-desc">ярость, воинская сила</div></div>
          <div class="hrld-sym-card hrld-sym-locked"><div class="hrld-sym-name">Дракон</div><div class="hrld-sym-desc">древняя сила, власть<span class="hrld-sym-lock">в Моленгарде — только правящая династия Липпе</span></div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Грифон</div><div class="hrld-sym-desc">страж, бдительность</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Гидра</div><div class="hrld-sym-desc">неуничтожимость</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Феникс</div><div class="hrld-sym-desc">возрождение</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Единорог</div><div class="hrld-sym-desc">чистота, благородство</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Меч</div><div class="hrld-sym-desc">воинственность, служба</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Копьё</div><div class="hrld-sym-desc">рыцарство</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Ключ</div><div class="hrld-sym-desc">власть над крепостью</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Весы</div><div class="hrld-sym-desc">закон, правосудие</div></div>
          <div class="hrld-sym-card"><div class="hrld-sym-name">Книга</div><div class="hrld-sym-desc">тяга к познанию, меценатство</div></div>
        </div>

        <div class="hrld-note"><b>Исключения.</b> Символы с плашкой выше нельзя использовать, если дом не соответствует указанному условию — это касается и мехов из раздела «Тинктуры».</div>

        <div class="hrld-h3">Положение фигур</div>
        <p class="hrld-text">Важно не только что изображено, но и как расположено. Чаще всего фигуры смотрят вправо (с точки зрения носителя щита) — это считается «правильным» направлением. Фигуры, смотрящие влево, могут означать вторичную ветвь рода, оппозицию, особую традицию или политический акцент.</p>
      </div>
    </section>

    <!-- 5. КОМПОЗИЦИЯ -->
    <section id="hrld-p5" class="hrld-panel">
      <div class="hrld-panel-inner hrld-texture">
        <div class="hrld-h2">Композиционные фигуры</div>
        <p class="hrld-text">Помимо главного и второстепенных символов, значение несёт и сама разбивка щита полосами и линиями.</p>
        <ul class="hrld-list">
          <li><b>Перевязь</b> — диагональная полоса через щит. Идущая из левого верхнего угла в правый нижний означает внебрачное происхождение; идущая из правого верхнего в левый нижний — воинскую доблесть.</li>
          <li><b>Пояс</b> — горизонтальная полоса в центре щита. Прямое указание на рыцарский пояс: надёжность, стабильность.</li>
          <li><b>Столб</b> — вертикальная полоса в центре щита. Отмечает вассалов, которые помогли правящему дому прийти к власти.</li>
          <li><b>Шеврон</b> — фигура в форме перевёрнутой буквы «V». Символизирует защиту или строительство; часто встречается у родов, отличившихся в армейской службе или обороне родных земель.</li>
        </ul>

        <div class="hrld-divider"></div>

        <div class="hrld-h3">Короны и ранг</div>
        <p class="hrld-text">Коронеты на гербе служат мгновенно читаемым маркером ранга — в классической феодальной лестнице, принятой в Моленгарде, она выглядит так:</p>
        <div class="hrld-hier">
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Король</b></span><span class="hrld-hier-addr">королевская корона</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Эрцгерцог</b></span><span class="hrld-hier-addr">только ближайшая родня короля</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Герцог</b></span><span class="hrld-hier-addr">герцогская корона</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Маркграф</b></span><span class="hrld-hier-addr">коронет маркграфа</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Граф</b></span><span class="hrld-hier-addr">графский коронет</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Виконт</b></span><span class="hrld-hier-addr">коронет виконта</span></div>
          <div class="hrld-hier-row"><span class="hrld-hier-title"><b>Барон</b></span><span class="hrld-hier-addr">коронет барона</span></div>
        </div>
        <p class="hrld-text" style="margin-top:14px;">В империи Саргос, где рыцарства и герцогской лестницы нет, ранг дома при дворе обычно подчёркивается не короной над щитом, а богатством тинктур и допуском к мехам — что тоже строго регламентировано и завязано на близость к императорскому роду.</p>
      </div>
    </section>

  </div>
</div>[/html]