/* ============================================================================
   Heritage — traditional. Ivory, charcoal, deep wine, stone.
   ----------------------------------------------------------------------------
   The reference is a printed order of service, not a web page: a centred
   masthead between double rules, small caps for structure, a notices column,
   and a genuine <table> for the timetable. Denser and more formal than Grace
   by design — the two templates are sold to congregations who would each find
   the other's website slightly wrong.
   ========================================================================== */

.demo-body--heritage {
  --ivory: #f5f1e8;
  --paper: #fbf9f3;
  --stone: #d8cfc0;
  --stone-soft: #ece5d8;
  --ink: #20252b;
  --ink-mute: #565d66;
  --wine: #7a2e33;
  --wine-deep: #5f2327;
  --rule: rgba(32, 37, 43, 0.22);

  background: var(--ivory);
  color: var(--ink);
  font-family: "Hoefler Text", "Times New Roman", Times, "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", SimSun, serif;
  font-size: 17.5px;
  line-height: 1.62;
}

.h-shell {
  width: 100%;
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.h-kicker, .h-nav, .h-topbar, .h-button, .h-index__date, .h-index__meta,
.h-notices__heading, .h-footer h3, .h-wordmark__pre, .h-wordmark__post,
.h-table thead th, .h-link {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; }

/* ── Top bar and masthead ────────────────────────────────────────────────── */

.h-topbar {
  background: var(--wine-deep);
  color: #f0e3e0;
  font-size: 0.76rem;
  letter-spacing: var(--track-label, 0.05em);
}
.h-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.55rem;
}
.h-topbar__contact { display: flex; gap: 0.75rem; }
.h-topbar a { color: inherit; text-decoration: none; }
.h-topbar a:hover { text-decoration: underline; }

.h-masthead { background: var(--paper); padding-block: 1.4rem 0; }
.h-rule { height: 1px; background: var(--rule); }
.h-rule--double {
  height: 4px;
  background:
    linear-gradient(var(--rule), var(--rule)) top / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat;
}

.h-wordmark {
  display: block;
  padding-block: 1.6rem 1.4rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.h-wordmark__pre, .h-wordmark__post {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.26em);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.h-wordmark__name {
  display: block;
  margin-block: 0.35rem 0.45rem;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 600;
  letter-spacing: var(--track-label, 0.01em);
  color: var(--wine);
}
.h-wordmark__post { color: var(--ink-mute); }

.h-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem clamp(1rem, 3vw, 2.4rem);
  padding-block: 0.85rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
}
.h-nav a { color: var(--ink); text-decoration: none; padding-block: 0.35rem; }
.h-nav a:hover { color: var(--wine); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.h-hero { background: var(--paper); padding-block: clamp(3rem, 7vw, 5.5rem); }
.h-hero__inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.h-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.24em);
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 1.1rem;
}
.h-kicker--light { color: #e3b9b4; }
.h-hero__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1.6rem;
}
.h-hero__scripture {
  max-width: 34rem;
  margin-inline: auto;
  font-style: italic;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 1.1rem;
}
.h-hero__scripture span {
  display: block;
  margin-top: 0.5rem;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.18em);
  text-transform: uppercase;
}
.h-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.9rem;
}

.h-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--wine);
  background: var(--wine);
  color: #fdf7f6;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.h-button:hover { background: var(--wine-deep); border-color: var(--wine-deep); }
.h-button--plain { background: transparent; color: var(--wine); }
.h-button--plain:hover { background: rgba(122, 46, 51, 0.08); color: var(--wine); }
.h-button--light { background: #f0e3e0; border-color: #f0e3e0; color: var(--wine-deep); }
.h-button--light:hover { background: #fff; border-color: #fff; color: var(--wine-deep); }

.h-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wine);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 46, 51, 0.35);
}
.h-link:hover { border-bottom-color: currentColor; }

/* ── Body sections ───────────────────────────────────────────────────────── */

.h-section { padding-block: clamp(3rem, 7vw, 5rem); }
.h-section--stone { background: var(--stone-soft); }

.h-heading {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 400;
  margin-bottom: 1rem;
}
.h-heading--center { text-align: center; margin-bottom: 0.5rem; }
/* Drawn rather than typed. A printer's-ornament character renders as a tiny
   unrecognisable mark in most of the fonts this template falls back to, and as
   nothing at all in some. */
.h-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  color: var(--wine);
}
.h-ornament::before, .h-ornament::after {
  content: "";
  width: clamp(2rem, 8vw, 4.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.h-ornament span {
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

.h-lead { font-size: 1.1rem; color: var(--ink-mute); margin-bottom: 1.1rem; }
.h-main p + p { margin-top: 1.05rem; }
.h-main p { color: var(--ink-mute); }
.h-more { margin-top: 1.4rem; }

.h-columns {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.h-columns--even { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
@media (max-width: 820px) { .h-columns { grid-template-columns: 1fr; } }

/* The notices column: a parish noticeboard, ruled like one. */
.h-notices {
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.h-notices__heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.2em);
  text-transform: uppercase;
  color: var(--wine);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.h-notices li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(32, 37, 43, 0.1); }
.h-notices h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 0.25rem; }
.h-notices p { font-size: 0.92rem; color: var(--ink-mute); }

/* ── The timetable ───────────────────────────────────────────────────────── */

.h-table-wrap { overflow-x: auto; }
.h-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--paper);
}
.h-table caption { text-align: start; }
.h-table th, .h-table td {
  padding: 0.85rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--rule);
}
.h-table thead th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.16em);
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid var(--wine);
}
.h-table tbody th { font-weight: 600; white-space: nowrap; }
.h-table tbody tr:last-child th, .h-table tbody tr:last-child td { border-bottom: 0; }
.h-note {
  margin-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--ink-mute);
}

/* ── The lecture index ───────────────────────────────────────────────────── */

.h-index { border-top: 1px solid var(--rule); }
.h-index__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 640px) {
  .h-index__row { grid-template-columns: 1fr; gap: 0.35rem; }
}
.h-index__date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  color: var(--wine);
}
.h-index__body a { font-size: 1.1rem; text-decoration: none; }
.h-index__body a:hover { color: var(--wine); text-decoration: underline; }
.h-index__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

/* ── The confession band ─────────────────────────────────────────────────── */

.h-creed { background: var(--wine); color: #f7ebe9; padding-block: clamp(3rem, 6vw, 4.5rem); }
.h-creed__inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.h-creed blockquote {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-style: italic;
  line-height: 1.55;
}
.h-creed__foot { margin-top: 1.9rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.h-footer { background: var(--paper); border-top: 3px double var(--rule); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.h-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  font-size: 0.92rem;
  color: var(--ink-mute);
}
.h-footer__name { font-size: 1.1rem; color: var(--ink); margin-bottom: 0.4rem; }
.h-footer h3 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-label, 0.18em);
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 0.5rem;
}

/* ── Tap targets ─────────────────────────────────────────────────────────────
   Same finding as Grace: the masthead navigation and the top bar's contact
   links were 20–30px tall. Heritage is the most typographically compact of the
   three templates, which is the look, but a small link is still a small link. */
.h-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}
.h-topbar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.h-topbar__inner { padding-block: 0; }
.h-link { display: inline-flex; align-items: center; min-height: 44px; }

/* The photograph plate. A parish magazine sets a picture as a plate with a
   rule above and below it, not bled to the page edge — so this one does too. */
.h-section--plate { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.h-section--plate .demo-photo {
  border-radius: 0;
  border-block: 1px solid rgba(60, 48, 32, 0.22);
}

/* The recording link at the end of a lecture row. It had no rule at all, so it
   sat wherever the flex row left it instead of aligning to the right edge with
   the rest of the index. */
.h-index__action { margin-inline-start: auto; padding-inline-start: 1rem; white-space: nowrap; }

/* A readable text column for the inner pages. One measure, set once, so the
   about page and the giving page do not each invent their own. */
.h-prose { max-width: 40rem; }
.h-prose p + p { margin-top: 1.05rem; }
/* The inner pages set heading-and-paragraph pairs one after another. Without
   this they run together into one block of text with bold lines in it. */
.h-prose p + h2 { margin-top: 2.2rem; }
.h-prose h2 { margin-bottom: 0.5rem; }

/* ============================================================================
   The blocks a college-and-parish site has and this demonstration did not.
   ----------------------------------------------------------------------------
   Same diagnosis as Grace — five sections of prose is a wireframe, not a
   website — but answered in Heritage's own language rather than Grace's. Where
   Grace uses discs, soft shadows and generous air, this uses plates, double
   rules and small caps, because the two are sold to congregations who would
   each find the other's site slightly wrong. Nothing here is shared with any
   other template's stylesheet on purpose.
   ========================================================================== */

/* ── The sermon or lecture of the week, as a printed plate ──────────────── */

.h-plate {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(32, 37, 43, 0.1);
}
@media (max-width: 800px) { .h-plate { grid-template-columns: 1fr; } }
.h-plate__art { margin: 0; position: relative; }
.h-plate__art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h-plate__seal {
  position: absolute;
  inset-block-end: -14px;
  inset-inline-end: -14px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.1em);
  text-transform: uppercase;
  text-align: center;
  color: var(--wine);
  line-height: 1.2;
}
.h-plate__body h3 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); margin-bottom: 0.35rem; }
.h-plate__ref { font-style: italic; color: var(--ink-mute); margin-bottom: 1.1rem; }
.h-listen { display: flex; align-items: center; gap: 0.9rem; }
.h-listen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: none;
  border: 1px solid var(--wine);
  border-radius: 0;
  background: var(--wine);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.2s ease;
}
.h-listen__btn:hover { background: var(--wine-deep); }
.h-listen__btn svg { width: 15px; height: 15px; margin-inline-start: 2px; }
.h-listen__rail { flex: 1; min-width: 0; }
.h-listen__bar { height: 3px; background: rgba(122, 46, 51, 0.2); position: relative; }
.h-listen__bar span { position: absolute; inset: 0 auto 0 0; width: 28%; background: var(--wine); }
.h-listen__time {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.h-plate__links { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1rem; }

/* ── The calendar, ruled like a term card ───────────────────────────────── */

.h-diary { border-top: 1px solid var(--rule); }
.h-diary__row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 1px solid rgba(32, 37, 43, 0.12);
}
.h-diary__when {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.12em);
  text-transform: uppercase;
  color: var(--wine);
}
.h-diary__what h3 { font-size: 1.1rem; margin-bottom: 0.2rem; font-weight: 400; }
.h-diary__note { font-family: "Inter", sans-serif; font-size: 0.79rem; color: var(--ink-mute); }
@media (max-width: 700px) {
  .h-diary__row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ── Faculty and officers, set as a printed list ────────────────────────── */

.h-roll {
  display: grid;
  /* 13rem, not 15: the shell is 1020px, so 15rem forced three across and left
     the fourth officer sitting alone on a second row. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0;
  border-block: 1px solid var(--rule);
}
.h-roll > li { padding: 1.4rem 1.3rem; }
.h-roll > li + li { border-inline-start: 1px solid rgba(32, 37, 43, 0.12); }
.h-roll__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.8rem;
  border: 1px solid var(--rule);
  background: var(--stone-soft);
  font-size: 1.05rem;
  color: var(--wine);
}
.h-roll h3 { font-size: 1.05rem; font-weight: 400; margin-bottom: 0.15rem; }
.h-roll__role {
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.14em);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.45rem;
}
.h-roll p { font-size: 0.9rem; color: var(--ink-mute); }
@media (max-width: 760px) {
  .h-roll > li + li { border-inline-start: 0; border-top: 1px solid rgba(32, 37, 43, 0.12); }
}

/* ── Finding the building ───────────────────────────────────────────────── */

.h-where {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 860px) { .h-where { grid-template-columns: 1fr; } }
.h-map { border: 1px solid var(--rule); background: var(--stone-soft); }
.h-map svg { display: block; width: 100%; height: auto; }
.h-where dl { display: grid; gap: 1.2rem; margin: 0; }
.h-where dt {
  font-family: "Inter", sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: var(--track-label, 0.15em);
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 0.25rem;
}
.h-where dd { margin: 0; color: var(--ink-mute); }

/* ── Giving amounts ─────────────────────────────────────────────────────── */

.h-sums { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.2rem; }
.h-sum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 4.6rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(245, 241, 232, 0.45);
  color: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.h-sum:hover, .h-sum.is-on { background: var(--paper); color: var(--wine-deep); }

/* ── Footer: sign-up, then the whole site in four columns ───────────────── */

.h-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 3px double var(--rule);
}
@media (max-width: 820px) { .h-signup { grid-template-columns: 1fr; } }
.h-signup h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.4rem; }
.h-signup p { color: var(--ink-mute); font-size: 0.93rem; }
.h-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.h-form input {
  flex: 1 1 13rem;
  min-height: 46px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 0.94rem;
}
.h-form input:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; }
.h-form__note {
  flex: 1 0 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  color: var(--ink-mute);
}
.h-footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 900px) {
  .h-footer__inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}
.h-footer ul { display: grid; gap: 0.4rem; }
.h-footer li a { color: var(--ink-mute); text-decoration: none; }
.h-footer li a:hover { color: var(--wine); }
.h-social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.h-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.h-social a:hover { border-color: var(--wine); color: var(--wine); }
.h-social svg { width: 17px; height: 17px; }
.h-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  color: var(--ink-mute);
}
.h-footer__base a { color: inherit; }

/* The masthead crest. A formal foundation puts its arms above its name, and
   this masthead had nothing there at all — a wordmark alone on a page selling
   a hundred and fifty years of institution reads as a document, not a college.
   Engraved weight, drawn to sit between the double rules. */
.h-crest { display: block; width: 40px; height: 46px; margin: 0 auto 0.7rem; color: var(--wine); }
.h-footer__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.h-footer__brand svg { width: 26px; height: 30px; color: var(--wine); flex: none; }

/* ── Sermons ──────────────────────────────────────────────────────────────
   Heritage plates things: a rule above, a rule below, the series set small in
   caps. A printed order of service is what this template is, so the sermon
   list is set like one rather than like cards. */
.h-section--plates { padding-top: 0; }
.h-plates { display: grid; gap: 0; }
.h-plate {
  padding: 1.6rem 0;
  border-top: 1px solid rgba(28, 24, 22, 0.14);
}
.h-plate:first-child { border-top: 2px solid rgba(28, 24, 22, 0.4); }
.h-plate:last-child { border-bottom: 1px solid rgba(28, 24, 22, 0.14); }
.h-plate__series {
  margin: 0 0 0.35rem;
  font-family: var(--h-sans, inherit);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #7c1d2e;
}
.h-plate__title { margin: 0 0 0.25rem; font-size: 1.35rem; line-height: 1.3; }
.h-plate__ref { margin: 0 0 0.15rem; font-style: italic; opacity: 0.86; }
.h-plate__meta { margin: 0; font-size: 0.85rem; opacity: 0.66; }
.h-plate .demo-play__btn { border-color: rgba(28, 24, 22, 0.34); }