/* ==========================================================================
   Honormaker Template Library
   One markup contract (.hm-plaque) rendered in six commemorative designs.
   Every template supports an event logo lockup and an optional event photo.
   Variants only re-declare custom properties + their signature ornament.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base contract — shared geometry, typography scale and material layers
   -------------------------------------------------------------------------- */

.hm-plaque {
  /* Design tokens every template overrides */
  --tpl-frame:      #33230F;
  --tpl-frame-hi:   rgba(255, 226, 183, 0.28);
  --tpl-bevel:      linear-gradient(150deg, #F0DDA8, #B78F3C 30%, #7A5A1C 60%, #D9C077 85%, #8A6822);
  --tpl-paper:      #FDFBF6;
  --tpl-paper-2:    #F4EFE3;
  --tpl-ink:        #1A1815;
  --tpl-muted:      #6E675B;
  --tpl-faint:      #A79E8C;
  --tpl-accent:     #B4903F;
  --tpl-accent-2:   #F6E9BC;
  --tpl-rule:       #C2A054;
  --tpl-seal-a:     #E4472F;
  --tpl-seal-b:     #A61C0D;
  --tpl-radius:     5px;
  --plaque-w:       320px;

  position: relative;
  width: var(--plaque-w);
  padding: 13px;
  border-radius: var(--tpl-radius);
  isolation: isolate;
  background-color: var(--tpl-frame);
  box-shadow:
    inset 0 1px 0 var(--tpl-frame-hi),
    inset 0 -2px 5px rgba(0, 0, 0, 0.65),
    inset 2px 0 4px rgba(0, 0, 0, 0.3),
    inset -2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Chamfered metal rim between frame and sheet */
.hm-plaque__bevel {
  position: relative;
  padding: 3px;
  border-radius: 2px;
  background: var(--tpl-bevel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hm-plaque__paper {
  position: relative;
  overflow: hidden;
  padding: 18px 16px 14px;
  color: var(--tpl-ink);
  text-align: center;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.75), transparent 55%),
    linear-gradient(var(--tpl-paper), var(--tpl-paper-2));
  box-shadow: inset 0 0 22px rgba(120, 100, 66, 0.14);
}

/* Paper tooth so the sheet never reads as flat white */
.hm-plaque__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(0deg, rgba(150, 130, 95, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(150, 130, 95, 0.04) 0 1px, transparent 1px 4px);
}

/* Large ghosted monogram behind the citation */
.hm-plaque__watermark {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 132px;
  font-weight: 900;
  line-height: 1;
  color: var(--tpl-accent);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.hm-plaque__rule {
  position: relative;
  z-index: 2;
  padding: 14px 12px 12px;
  border: 1px solid var(--tpl-rule);
  outline: 3px solid color-mix(in srgb, var(--tpl-rule) 18%, transparent);
  outline-offset: 2px;
}

.hm-plaque__rule::before,
.hm-plaque__rule::after {
  content: "❖";
  position: absolute;
  padding: 0 2px;
  font-size: 9px;
  line-height: 1;
  color: var(--tpl-accent);
  background: var(--tpl-paper);
}

.hm-plaque__rule::before { top: -5px; left: -4px; }
.hm-plaque__rule::after  { bottom: -5px; right: -4px; }

/* ---- Masthead: event logo lockup ---------------------------------------- */

.hm-plaque__masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hm-plaque__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  flex: none;
}

.hm-plaque__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fallback crest drawn from the organiser's initials */
.hm-plaque__crest {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--tpl-paper);
  background: linear-gradient(150deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 60%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hm-plaque__org {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tpl-muted);
}

/* ---- Event photo band ---------------------------------------------------- */

.hm-plaque__photo {
  position: relative;
  height: 84px;
  margin: 11px 0 2px;
  overflow: hidden;
  border: 1px solid var(--tpl-rule);
  background: #1A1815;
}

.hm-plaque__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-plaque__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.hm-plaque[data-photo="off"] .hm-plaque__photo { display: none; }

/* ---- Divider ------------------------------------------------------------- */

.hm-plaque__divider {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0;
  font-size: 7px;
  color: var(--tpl-accent);
}

.hm-plaque__divider::before,
.hm-plaque__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tpl-rule) 25%, var(--tpl-accent) 50%, var(--tpl-rule) 75%, transparent);
}

/* ---- Body ---------------------------------------------------------------- */

.hm-plaque__event {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tpl-ink);
}

.hm-plaque__event-sub {
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tpl-faint);
}

.hm-plaque__tier {
  display: inline-block;
  margin: 10px 0 8px;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3A2A08;
  background: linear-gradient(150deg, var(--tpl-accent-2), var(--tpl-accent) 55%, color-mix(in srgb, var(--tpl-accent) 65%, #000));
  box-shadow: 0 1px 3px rgba(60, 45, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hm-plaque__preamble {
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 9.5px;
  color: var(--tpl-muted);
}

/* Hot-stamped foil lettering for the honouree */
.hm-plaque__sponsor {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--tpl-ink);
}

.hm-plaque--foil .hm-plaque__sponsor {
  background-image: linear-gradient(178deg, #7E5F18 0%, #B08F35 26%, #F6E9BC 47%, #C3A050 62%, #7A5B16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6)) drop-shadow(0 1px 1px rgba(70, 52, 10, 0.28));
}

.hm-plaque__sponsor-zh {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tpl-muted);
}

.hm-plaque__citation {
  max-width: 232px;
  margin: 9px auto 0;
  font-size: 8.5px;
  line-height: 1.55;
  color: var(--tpl-muted);
}

/* ---- Footer: signatures flank a centred seal ----------------------------- */

.hm-plaque__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--tpl-rule) 45%, transparent);
}

.hm-plaque__sig { text-align: center; }

.hm-plaque__sig-name {
  margin-bottom: 2px;
  font-family: var(--font-hand);
  font-size: 12px;
  line-height: 1.1;
  color: var(--tpl-ink);
}

.hm-plaque__sig-line {
  height: 1px;
  margin-bottom: 3px;
  background: color-mix(in srgb, var(--tpl-ink) 70%, transparent);
}

.hm-plaque__sig-role {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tpl-faint);
}

.hm-plaque__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #FFF2EE;
  background: radial-gradient(circle at 34% 30%, var(--tpl-seal-a), var(--tpl-seal-b) 68%, #000 160%);
  border: 2px solid color-mix(in srgb, var(--tpl-seal-b) 78%, #000);
  box-shadow: 0 3px 8px rgba(90, 20, 8, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transform: rotate(-7deg);
}

.hm-plaque__seal-top {
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.hm-plaque__seal-char {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.hm-plaque__hash {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.08em;
  color: var(--tpl-faint);
}

/* Cast-acrylic specular sweep over the whole face */
.hm-plaque__glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.07) 26%,
    rgba(255, 255, 255, 0) 46%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

/* ==========================================================================
   Template 1 · HERITAGE — lacquered walnut, hot-stamped gold foil
   ========================================================================== */

.tpl-heritage {
  --tpl-frame: #33230F;
  --tpl-bevel: linear-gradient(150deg, #F0DDA8, #B78F3C 30%, #7A5A1C 60%, #D9C077 85%, #8A6822);
}

/* Real wood grain layered over the base tone */
.tpl-heritage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(87deg, rgba(255, 233, 200, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(155deg, #513A26, #33230F 40%, #42301E 65%, #241810);
}

/* ==========================================================================
   Template 2 · LAUREL — ivory and navy, laurel crest, double keyline
   ========================================================================== */

.tpl-laurel {
  --tpl-frame: #101F3C;
  --tpl-frame-hi: rgba(190, 214, 255, 0.22);
  --tpl-bevel: linear-gradient(150deg, #E9D9A4, #C0A24F 35%, #8A6C24 65%, #DCC583);
  --tpl-paper: #FFFDF8;
  --tpl-paper-2: #F6F2E7;
  --tpl-ink: #14284B;
  --tpl-muted: #4A5B79;
  --tpl-faint: #93A0B6;
  --tpl-accent: #A8862F;
  --tpl-accent-2: #F2E4B6;
  --tpl-rule: #14284B;
  --tpl-seal-a: #2A4C86;
  --tpl-seal-b: #14284B;
}

/* Second, inset keyline for the formal double-border look */
.tpl-laurel .hm-plaque__rule {
  outline-width: 1px;
  outline-offset: 4px;
  outline-color: var(--tpl-accent);
}

.tpl-laurel .hm-plaque__rule::before,
.tpl-laurel .hm-plaque__rule::after { content: "✦"; }

/* Laurel branches flanking the crest */
.tpl-laurel .hm-plaque__logo::before,
.tpl-laurel .hm-plaque__logo::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.75;
}

.tpl-laurel .hm-plaque__logo {
  position: relative;
  overflow: visible;
}

.tpl-laurel .hm-plaque__logo::before {
  left: -24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E%3Cg fill='none' stroke='%23A8862F' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M16 32C8 26 6 16 9 3'/%3E%3Cpath d='M13 26c-4 1-6-1-7-4M14 21c-4 1-6-1-7-4M14 16c-4 0-6-2-6-5M15 11c-3-1-5-3-5-6'/%3E%3C/g%3E%3C/svg%3E");
}

.tpl-laurel .hm-plaque__logo::after {
  right: -24px;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E%3Cg fill='none' stroke='%23A8862F' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M16 32C8 26 6 16 9 3'/%3E%3Cpath d='M13 26c-4 1-6-1-7-4M14 21c-4 1-6-1-7-4M14 16c-4 0-6-2-6-5M15 11c-3-1-5-3-5-6'/%3E%3C/g%3E%3C/svg%3E");
}

.tpl-laurel .hm-plaque__crest {
  border-radius: 4px;
  color: #FFFDF8;
  background: linear-gradient(150deg, #24406E, #14284B);
}

/* ==========================================================================
   Template 3 · ONYX — black lacquer, guilloche engine-turning, gold type
   ========================================================================== */

.tpl-onyx {
  --tpl-frame: #0C0C0D;
  --tpl-frame-hi: rgba(255, 255, 255, 0.16);
  --tpl-bevel: linear-gradient(150deg, #6E6E72, #2A2A2D 40%, #101012 70%, #55555A);
  --tpl-paper: #17171A;
  --tpl-paper-2: #101012;
  --tpl-ink: #F3E7C6;
  --tpl-muted: #A79A78;
  --tpl-faint: #6E6858;
  --tpl-accent: #D4B45E;
  --tpl-accent-2: #F7ECC4;
  --tpl-rule: #7C6A38;
  --tpl-seal-a: #D4B45E;
  --tpl-seal-b: #8A6D24;
}

/* Engine-turned guilloche rosette instead of paper tooth */
.tpl-onyx .hm-plaque__paper::before {
  opacity: 0.5;
  background-image:
    repeating-radial-gradient(circle at 50% 46%, rgba(212, 180, 94, 0.11) 0 1px, transparent 1px 7px),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(212, 180, 94, 0.07) 0deg 2deg, transparent 2deg 6deg);
}

.tpl-onyx .hm-plaque__paper {
  background:
    radial-gradient(circle at 50% 8%, rgba(212, 180, 94, 0.14), transparent 58%),
    linear-gradient(var(--tpl-paper), var(--tpl-paper-2));
}

.tpl-onyx .hm-plaque__rule::before,
.tpl-onyx .hm-plaque__rule::after { background: #141417; }

.tpl-onyx .hm-plaque__watermark { opacity: 0.08; }

.tpl-onyx .hm-plaque__seal { color: #221A06; }

.tpl-onyx .hm-plaque__tier { color: #1A1508; }

/* ==========================================================================
   Template 4 · PORTRAIT — photo-led, the event image carries the piece
   ========================================================================== */

.tpl-portrait {
  --tpl-frame: #1C1A18;
  --tpl-bevel: linear-gradient(150deg, #D9D3C6, #9A9184 45%, #5E574C 75%, #C7C0B2);
  --tpl-paper: #FFFFFF;
  --tpl-paper-2: #F7F4EF;
  --tpl-ink: #141413;
  --tpl-muted: #5E5D58;
  --tpl-faint: #A8A49C;
  --tpl-accent: #DE4B39;
  --tpl-accent-2: #FFD9D2;
  --tpl-rule: #DDD6CA;
  --tpl-seal-a: #E4472F;
  --tpl-seal-b: #A61C0D;
}

/* Photo becomes a full-bleed hero band above the keyline */
.tpl-portrait .hm-plaque__rule {
  padding: 0;
  border: 0;
  outline: 0;
}

.tpl-portrait .hm-plaque__paper { padding: 0; }

.tpl-portrait .hm-plaque__photo {
  height: 132px;
  margin: 0;
  border: 0;
}

.tpl-portrait .hm-plaque__photo::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 38%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: none;
}

/* Masthead overlays the photo */
.tpl-portrait .hm-plaque__masthead {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 3;
}

.tpl-portrait .hm-plaque__org { color: rgba(255, 255, 255, 0.92); }

.tpl-portrait .hm-plaque__crest {
  background: rgba(255, 255, 255, 0.94);
  color: var(--tpl-accent);
}

.tpl-portrait .hm-plaque__body-pad { padding: 14px 16px 14px; }

.tpl-portrait .hm-plaque__tier {
  color: #FFF;
  background: var(--tpl-accent);
  box-shadow: 0 2px 5px rgba(160, 45, 30, 0.3);
}

.tpl-portrait .hm-plaque__event { font-size: 13px; }

.tpl-portrait .hm-plaque__watermark { display: none; }

/* ==========================================================================
   Template 5 · CIVIC — deep green proclamation with a gold ribbon banner
   ========================================================================== */

.tpl-civic {
  --tpl-frame: #14342A;
  --tpl-frame-hi: rgba(198, 236, 218, 0.2);
  --tpl-bevel: linear-gradient(150deg, #E7D8A6, #BE9E46 35%, #7E6320 65%, #D9C282);
  --tpl-paper: #FCFBF4;
  --tpl-paper-2: #F0EEE0;
  --tpl-ink: #14342A;
  --tpl-muted: #4C6156;
  --tpl-faint: #91A196;
  --tpl-accent: #A88A2C;
  --tpl-accent-2: #F1E3B0;
  --tpl-rule: #A88A2C;
  --tpl-seal-a: #2F6B4F;
  --tpl-seal-b: #14342A;
}

/* Ribbon banner carrying the tier, with folded tails */
.tpl-civic .hm-plaque__tier {
  position: relative;
  margin: 14px 0 10px;
  padding: 4px 18px;
  border-radius: 0;
  color: #FFFBEC;
  background: linear-gradient(180deg, #2F6B4F, #14342A);
  box-shadow: 0 2px 5px rgba(10, 40, 28, 0.35);
}

.tpl-civic .hm-plaque__tier::before,
.tpl-civic .hm-plaque__tier::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  background: #0E241C;
}

.tpl-civic .hm-plaque__tier::before {
  left: -11px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%);
}

.tpl-civic .hm-plaque__tier::after {
  right: -11px;
  clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}

.tpl-civic .hm-plaque__rule::before,
.tpl-civic .hm-plaque__rule::after { content: "❦"; }

/* ==========================================================================
   Template 6 · MODERN — editorial, flush-left lockup, coral rule
   ========================================================================== */

.tpl-modern {
  --tpl-frame: #E8E3D9;
  --tpl-frame-hi: rgba(255, 255, 255, 0.9);
  --tpl-bevel: linear-gradient(150deg, #FFFFFF, #DAD4C8 50%, #B8B2A6);
  --tpl-paper: #FFFFFF;
  --tpl-paper-2: #FBFAF7;
  --tpl-ink: #141413;
  --tpl-muted: #5E5D58;
  --tpl-faint: #A8A49C;
  --tpl-accent: #DE4B39;
  --tpl-accent-2: #FFDDD6;
  --tpl-rule: #141413;
  --tpl-seal-a: #E4472F;
  --tpl-seal-b: #A61C0D;
  --tpl-radius: 3px;
}

.tpl-modern { box-shadow: inset 0 0 0 1px #CFC8BA; }

/* Flush-left masthead and body — the editorial signature of this template */
.tpl-modern .hm-plaque__rule {
  border: 0;
  outline: 0;
  padding: 4px 2px 2px;
  text-align: left;
}

.tpl-modern .hm-plaque__rule::before,
.tpl-modern .hm-plaque__rule::after { display: none; }

.tpl-modern .hm-plaque__masthead {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tpl-ink);
  text-align: left;
}

.tpl-modern .hm-plaque__crest { border-radius: 3px; background: var(--tpl-accent); }

.tpl-modern .hm-plaque__divider { display: none; }

.tpl-modern .hm-plaque__event,
.tpl-modern .hm-plaque__event-sub,
.tpl-modern .hm-plaque__preamble,
.tpl-modern .hm-plaque__sponsor,
.tpl-modern .hm-plaque__sponsor-zh,
.tpl-modern .hm-plaque__citation { text-align: left; }

.tpl-modern .hm-plaque__event { margin-top: 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: -0.01em; }

.tpl-modern .hm-plaque__sponsor { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.035em; }

.tpl-modern .hm-plaque__citation { margin-left: 0; max-width: none; }

.tpl-modern .hm-plaque__tier {
  border-radius: 3px;
  color: #FFF;
  background: var(--tpl-accent);
  box-shadow: none;
}

.tpl-modern .hm-plaque__watermark { display: none; }

.tpl-modern .hm-plaque__footer { border-top-color: #E2DDD5; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 680px) {
  .hm-plaque { --plaque-w: 254px; padding: 10px; }
  .hm-plaque__paper { padding: 14px 12px 11px; }
  .tpl-portrait .hm-plaque__paper { padding: 0; }
  .hm-plaque__sponsor { font-size: 17px; }
  .hm-plaque__citation { display: none; }
  .hm-plaque__photo { height: 68px; }
  .tpl-portrait .hm-plaque__photo { height: 104px; }
  .hm-plaque__watermark { font-size: 104px; }
}

/* ==========================================================================
   Hero — real field photograph
   Replaces the illustrated plaque mockup with a verified photograph from a
   merchant counter. Same tilt/glare interaction, now applied to a real
   photo instead of a synthetic render.
   ========================================================================== */

.hero-photo-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #1C1917;
  border: 6px solid #FAF8F5;
  box-shadow:
    0 30px 60px -18px rgba(20, 20, 19, 0.5),
    0 12px 24px -8px rgba(20, 20, 19, 0.35),
    0 0 0 1.5px var(--ink);
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  transition: opacity 0.22s ease;
}

.hero-photo-frame.is-switching img { opacity: 0; }

/* Cast-glass specular sweep, matching the plaque's original acrylic glare */
.hero-photo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 22%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.hero-photo-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #FFF;
  background: rgba(222, 75, 57, 0.94);
  transition: opacity 0.15s ease;
}

.hero-photo-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  color: #201A10;
  background: rgba(250, 244, 230, 0.96);
  border: 1.5px solid #14110B;
  box-shadow: 2px 2px 0 rgba(20, 17, 11, 0.85);
  transition: opacity 0.15s ease;
}

.hero-photo-pin b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #A8340F;
}

.hero-photo-pin--a { top: 16px; right: 16px; }
.hero-photo-pin--b { bottom: 68px; right: 16px; }

.hero-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.82) 60%);
  transition: opacity 0.15s ease;
}

.hero-photo-caption strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #FFF;
  line-height: 1.3;
}

.hero-photo-caption span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #E9C46A;
}

.hero-photo-frame.is-switching .hero-photo-tag,
.hero-photo-frame.is-switching .hero-photo-pin,
.hero-photo-frame.is-switching .hero-photo-caption {
  opacity: 0;
}

@media (max-width: 900px) {
  .hero-photo-frame { max-width: 520px; }
  .hero-photo-pin--b { bottom: 60px; }
}

@media (max-width: 680px) {
  .hero-photo-frame { border-width: 4px; }
  .hero-photo-pin { font-size: 9px; padding: 4px 9px; }
  .hero-photo-caption strong { font-size: 12px; }
}

/* ==========================================================================
   Reality Lens v3 — real field photography as the "after," not a synthetic
   render. Four verified shop-floor photographs cycle behind the divider;
   dots switch between them. Appended after styles.css loads, so these win
   over the v1 comparison rules.
   ========================================================================== */

/* ---- "After": the real photographs -------------------------------------- */

.compare-pane-after {
  background: #0C0A08;
  display: block;
  padding: 0;
}

.proof-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.proof-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.proof-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.proof-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Ground the photo so overlaid type stays legible without hiding the shot */
.proof-carousel__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.55) 0%, transparent 22%, transparent 62%, rgba(10, 8, 6, 0.72) 100%),
    linear-gradient(90deg, rgba(10, 8, 6, 0.35) 0%, transparent 30%);
}

.proof-carousel__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #FFF;
  background: rgba(222, 75, 57, 0.92);
}

.proof-carousel__pin {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #201A10;
  background: rgba(250, 244, 230, 0.95);
  border: 1.5px solid #14110B;
  box-shadow: 2px 2px 0 rgba(20, 17, 11, 0.85);
}

.proof-carousel__pin b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #A8340F;
}

.proof-carousel__caption {
  position: absolute;
  left: 18px;
  bottom: 52px;
  z-index: 3;
  max-width: 70%;
}

.proof-carousel__caption strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #FFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.proof-carousel__caption span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #E9C46A;
}

.proof-carousel__dots {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.proof-dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease;
}

.proof-dot.is-active { background: #FFF; }
.proof-dot:hover { background: rgba(255, 255, 255, 0.65); }

/* ---- "Before": the thank-you buried in a cold, crowded inbox ------------ */

.compare-pane-before {
  flex-direction: column;
  gap: 14px;
  background: radial-gradient(ellipse 70% 70% at 50% 40%, #2C2A27 0%, #191817 70%);
}

.deadmail-phone {
  display: flex;
  flex-direction: column;
  width: 292px;
  height: 392px;
  overflow: hidden;
  border-radius: 26px;
  background: #0E0D0C;
  border: 3px solid #3B3833;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  /* Cold and lifeless next to the warm counter */
  filter: saturate(0.55);
}

.deadmail-notch {
  flex: none;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.deadmail-notch::after {
  content: "";
  width: 62px;
  height: 7px;
  border-radius: 4px;
  background: #2A2825;
}

.deadmail-screen {
  flex: 1;
  overflow: hidden;
  background: #F2F1EE;
  color: #141413;
}

.deadmail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #83807A;
  background: #E7E5E1;
  border-bottom: 1px solid #D6D3CD;
}

.deadmail-row {
  display: flex;
  gap: 9px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #E4E2DE;
}

.deadmail-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #2F6FD0;
}

.deadmail-row--read .deadmail-dot { background: transparent; }

.deadmail-from {
  font-size: 9.5px;
  font-weight: 800;
  color: #34322E;
}

.deadmail-subj {
  margin-top: 1px;
  font-size: 9px;
  color: #6E6B65;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deadmail-time {
  flex: none;
  margin-left: auto;
  font-size: 8px;
  color: #A29F99;
}

/* The sponsor thank-you: greyed, archived, indistinguishable from the noise */
.deadmail-row--target {
  background: #EAE8E4;
  opacity: 0.72;
}

.deadmail-row--target .deadmail-from,
.deadmail-row--target .deadmail-subj { color: #8A8781; }

.deadmail-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A8781;
  background: #D9D6D0;
}

.deadmail-verdict {
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-radius: 8px;
  color: #FFC7BD;
  background: rgba(58, 20, 16, 0.62);
  border: 1px solid #7A2A20;
}

.deadmail-verdict div { text-align: center; }

.deadmail-verdict b {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  color: #FF8D7A;
}

.deadmail-verdict span {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #C99C93;
}

/* ==========================================================================
   Template picker (Live Studio)
   ========================================================================== */

.tpl-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.tpl-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  text-align: left;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: all var(--trans-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tpl-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  border-color: var(--accent-coral);
}

.tpl-chip.active {
  background: var(--paper);
  border-color: var(--accent-coral);
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 1px var(--accent-coral), 2px 2px 0 var(--ink);
}

.tpl-chip__card {
  height: 48px;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--trans-fast);
}

.tpl-chip:hover .tpl-chip__card {
  transform: scale(1.02);
}

.tpl-chip__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tpl-chip__card-icon {
  font-size: 13px;
  line-height: 1;
}

.tpl-chip__card-badge {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFF;
}

.tpl-chip__card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tpl-chip__card-line {
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.6;
}

.tpl-chip__card-line.short {
  width: 55%;
  opacity: 0.35;
}

.tpl-chip__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tpl-chip__name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.tpl-chip__sub {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tpl-photo-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-cream);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.tpl-photo-btn:hover {
  background: var(--line);
  color: var(--ink);
}

.tpl-photo-btn.active {
  color: #FFF;
  background: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 680px) {
  .tpl-picker { grid-template-columns: repeat(2, 1fr); }
  .deadmail-phone { width: 232px; height: 318px; }
  .deadmail-verdict { gap: 10px; padding: 7px 12px; }
  .deadmail-verdict b { font-size: 13px; }
}

/* ==========================================================================
   Template library — corrections from the first proof sheet
   ========================================================================== */

/* Long honouree names broke awkwardly ("Saint Germain / Bakery"). Balance the
   line breaks instead of letting the last word drop alone. */
.hm-plaque__sponsor,
.hm-plaque__event,
.hm-plaque__org {
  text-wrap: balance;
}

/* The foil gradient peaked too light to read against cream paper — pull the
   whole ramp down so the letterforms hold their edge. */
.hm-plaque--foil .hm-plaque__sponsor {
  background-image: linear-gradient(178deg, #5C4310 0%, #927219 24%, #D9C070 46%, #A8862C 60%, #5A400E 100%);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75)) drop-shadow(0 1px 1px rgba(50, 36, 6, 0.4));
}

/* ---- Portrait Band: rebuild the masthead ------------------------------- */

/* The keyline ornaments have no border to sit on in this template and were
   leaving a stray glyph in the corner. */
.tpl-portrait .hm-plaque__rule::before,
.tpl-portrait .hm-plaque__rule::after { display: none; }

/* White-on-photograph was unreadable. Drop the masthead into the sheet and
   let the crest straddle the photo edge instead. */
.tpl-portrait .hm-plaque__masthead {
  position: static;
  padding: 0 16px;
  margin-top: -21px;
}

.tpl-portrait .hm-plaque__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tpl-portrait .hm-plaque__org {
  margin-top: 2px;
  color: var(--tpl-muted);
}

/* Scrim only at the very top of the photo, so the image itself stays clean */
.tpl-portrait .hm-plaque__photo::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 34%, rgba(0, 0, 0, 0.28) 100%);
}

.tpl-portrait .hm-plaque__body-pad { padding: 10px 16px 14px; }

/* ---- Onyx: the photo was muddy under the dark overlay ------------------ */

.tpl-onyx .hm-plaque__photo {
  border-color: var(--tpl-rule);
  background: #000;
}

.tpl-onyx .hm-plaque__photo img {
  filter: brightness(1.12) contrast(1.06) saturate(1.05);
}

.tpl-onyx .hm-plaque__photo::after {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
}

/* Gold seal on a gold-flecked sheet needed a defined rim */
.tpl-onyx .hm-plaque__seal {
  border-color: #F0DFA8;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}

/* The crest straddles the photo edge, so it has to paint above the image
   overlay rather than under it. */
.tpl-portrait .hm-plaque__masthead {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Reality Lens — sizing
   The photo carousel and the inbox mockup share one taller stage so the
   real evidence reads at a size where its detail is actually legible.
   ========================================================================== */

.compare-container {
  height: 660px;
}

/* Keep the inbox column inside the taller stage without stretching it */
.deadmail-phone { height: 404px; }

@media (max-width: 680px) {
  .compare-container { height: 560px; }
  .deadmail-phone { height: 330px; }
}

/* ==========================================================================
   Reality Lens — composition
   The inbox mockup centres in the left share of the frame; the real-photo
   carousel fills the rest edge-to-edge, since it is the actual proof rather
   than an isolated object that needs breathing room around it.
   ========================================================================== */

.compare-pane-before {
  justify-content: center;
  padding-right: 50%;
}

/* ==========================================================================
   Header fit
   Between 769px and ~1080px the nav links, the sound toggle and the CTA
   together were wider than the header, pushing the page 140px wide.
   Tighten first, then drop the inline nav before anything overflows.
   ========================================================================== */

@media (max-width: 1120px) {
  .nav-links { gap: 14px; font-size: 12px; }
  .sfx-toggle-btn .sfx-label { display: none; }
  .sfx-toggle-btn { padding: 6px 10px; }
  .brand-subtitle { display: none; }
}

@media (max-width: 980px) {
  /* The section links live in the footer too, and the page is a single
     scroll, so dropping the inline nav here costs nothing. */
  .nav-links { display: none; }
}

/* The header CTA does not shrink, so at 390px it ran 4px wider than the
   viewport and the page clipped the right edge. Swap in a short label. */
.cta-compact { display: none; }

@media (max-width: 560px) {
  .cta-full { display: none; }
  .cta-compact { display: inline; }
  .nav-cta .btn { padding: 8px 12px; font-size: 12px; }
  .brand-title { font-size: 15px; }
}

/* The closing CTA button carries inline padding and a long label, so at 390px
   it ran 4px past the viewport and clipped the whole page. Let it wrap. */
@media (max-width: 560px) {
  .section > .container > .btn[data-open-modal] {
    padding: 14px 20px !important;
    font-size: 13px !important;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Hero plaque footer
   The wax seal was absolutely positioned bottom-right, so it sat on top of
   the right-hand signature block ("AUTHENTICATED CITATION" / the date) at
   every width, and collided badly on mobile. Put it back in flow, centred
   between the two signature blocks, the way the template library does it.
   ========================================================================== */

.plaque-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
}

.plaque-seal-wrap {
  position: static;
  width: 56px;
  height: 56px;
  justify-self: center;
  align-self: center;
}

.plaque-signature-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plaque-sig-label {
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.plaque-date {
  font-size: 7.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .plaque-seal-wrap { width: 46px; height: 46px; }
  .plaque-footer { gap: 6px; }
}

/* Seal lettering was sized for the 72px desktop seal and spilled past the
   rim once the seal scaled down. */
@media (max-width: 680px) {
  .plaque-seal-wrap .seal-text-top,
  .plaque-seal-wrap .seal-text-sub { font-size: 5px; letter-spacing: 0.06em; }
  .plaque-seal-wrap .seal-crest-char { font-size: 15px; }
}

/* ==========================================================================
   Reality Lens — wider frame
   The inbox mockup keeps a fixed share of the frame; that share grows as
   the frame narrows so the real photo still has room to read on a tablet.
   ========================================================================== */

.compare-container {
  max-width: 1180px;
  height: 680px;
}

.compare-labels {
  max-width: 1180px;
}

.compare-pane-before {
  padding-right: 30%;
}

@media (max-width: 1100px) {
  .compare-container { height: 640px; }
  .compare-pane-before { padding-right: 34%; }
}

@media (max-width: 860px) {
  .compare-container { height: 600px; }
  .compare-pane-before { padding-right: 42%; }
}

@media (max-width: 680px) {
  .compare-container { height: 560px; }
  .compare-pane-before { padding-right: 46%; }
}

/* ==========================================================================
   Seal — English by default, one word, emblem configurable
   ========================================================================== */

.hm-plaque__seal-word {
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.hm-plaque__seal-char {
  font-size: 15px;
}

/* A CJK emblem needs the serif face and a little more room than a star */
.hm-plaque__seal-char:lang(zh),
.hm-plaque[data-seal="cjk"] .hm-plaque__seal-char {
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 16px;
}

/* ==========================================================================
   Header nav — four links, one line, never wrapping
   ========================================================================== */

.nav-links {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav-links a {
  white-space: nowrap;
}

/* Evidence metric rows were butting into each other when both labels ran
   long. Let them wrap instead of colliding. */
.evidence-metric {
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* ==========================================================================
   FLOOD TEMPLATES — colour-flooded, dark, immersive
   Modelled on the real pieces on the merchant's wall: the Yee Hong Dragon
   Ball 龍宴 plaque is a full jade flood with an arch cartouche and a white
   sponsor nameplate; the Markham Stouffville Hospital piece is a full blue
   flood with the event photo dissolving into it under a gold headline.
   The paper templates keep a cream sheet; these flood the sheet entirely.
   ========================================================================== */

.hm-plaque--flood .hm-plaque__paper {
  padding: 0;
  background: linear-gradient(170deg, var(--tpl-paper) 0%, var(--tpl-paper-2) 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}

/* Paper tooth would read as noise on a flood; swap it for a soft vignette. */
.hm-plaque--flood .hm-plaque__paper::before {
  opacity: 1;
  background-image: radial-gradient(ellipse 80% 60% at 50% 22%, rgba(255, 255, 255, 0.1), transparent 70%);
}

.hm-plaque--flood .hm-plaque__rule {
  margin: 9px;
  padding: 16px 14px 14px;
  border-color: color-mix(in srgb, var(--tpl-accent) 55%, transparent);
  outline-color: color-mix(in srgb, var(--tpl-accent) 16%, transparent);
}

/* Ornament glyphs sat on a cream chip; on a flood they sit on the flood. */
.hm-plaque--flood .hm-plaque__rule::before,
.hm-plaque--flood .hm-plaque__rule::after {
  background: transparent;
  color: var(--tpl-accent);
}

.hm-plaque--flood .hm-plaque__watermark {
  color: #FFF;
  opacity: 0.055;
}

.hm-plaque--flood .hm-plaque__org { color: rgba(255, 255, 255, 0.82); }

.hm-plaque--flood .hm-plaque__crest {
  color: var(--tpl-paper);
  background: linear-gradient(150deg, #FFFFFF, #E4DFD2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hm-plaque--flood .hm-plaque__photo {
  border-color: color-mix(in srgb, var(--tpl-accent) 45%, transparent);
}

.hm-plaque--flood .hm-plaque__preamble { color: rgba(255, 255, 255, 0.72); }
.hm-plaque--flood .hm-plaque__citation { color: rgba(255, 255, 255, 0.8); }
.hm-plaque--flood .hm-plaque__event-sub { color: rgba(255, 255, 255, 0.62); }
.hm-plaque--flood .hm-plaque__hash { color: rgba(255, 255, 255, 0.4); }

.hm-plaque--flood .hm-plaque__event {
  color: var(--tpl-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.hm-plaque--flood .hm-plaque__footer {
  border-top-color: color-mix(in srgb, var(--tpl-accent) 35%, transparent);
}

.hm-plaque--flood .hm-plaque__sig-name { color: #FFF; }
.hm-plaque--flood .hm-plaque__sig-line { background: rgba(255, 255, 255, 0.55); }
.hm-plaque--flood .hm-plaque__sig-role { color: rgba(255, 255, 255, 0.55); }

/* The white sponsor nameplate — the move the Dragon Ball piece makes, and
   the reason the sponsor's name reads first on a dark ground. */
.hm-plaque--flood .hm-plaque__nameplate {
  margin: 4px 0 2px;
  padding: 10px 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #FFFFFF, #F4F0E6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 #FFF;
}

.hm-plaque--flood .hm-plaque__sponsor { color: #1A1815; }
.hm-plaque--flood .hm-plaque__sponsor-zh { color: #5A544A; }

/* ==========================================================================
   Template 7 · JADE BANQUET — the Dragon Ball 龍宴 language
   ========================================================================== */

.tpl-jade {
  --tpl-frame: #07332C;
  --tpl-frame-hi: rgba(186, 240, 224, 0.22);
  --tpl-bevel: linear-gradient(150deg, #E9D9A4, #C0A24F 35%, #7E6320 65%, #DCC583);
  --tpl-paper: #12665A;
  --tpl-paper-2: #06322B;
  --tpl-ink: #FFFFFF;
  --tpl-muted: rgba(255, 255, 255, 0.78);
  --tpl-faint: rgba(255, 255, 255, 0.55);
  --tpl-accent: #E9C46A;
  --tpl-accent-2: #F7E7B6;
  --tpl-rule: #E9C46A;
  --tpl-seal-a: #E4472F;
  --tpl-seal-b: #96170A;
}

/* Scalloped arch cartouche holding the event title */
.tpl-jade .hm-plaque__crown {
  position: relative;
  margin: 10px 0 12px;
  padding: 18px 14px 16px;
  border-radius: 48% 48% 10% 10% / 32% 32% 8% 8%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.16));
  border: 1.5px solid rgba(233, 196, 106, 0.55);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.28);
}

.tpl-jade .hm-plaque__event {
  font-size: 17px;
  letter-spacing: 0.01em;
}

/* Plum-blossom sprays in the lower corners */
.tpl-jade .hm-plaque__paper::after,
.tpl-crimson .hm-plaque__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: left 100%, right 100%;
  background-size: 46% auto, 40% auto;
  opacity: 0.9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%23A8492F' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M4 118C16 96 22 74 20 50'/%3E%3Cpath d='M20 74c10 4 18 2 26-4M18 56c9 5 17 4 25-1'/%3E%3C/g%3E%3Cg fill='%23E8695A'%3E%3Cg transform='translate(48 46) scale(0.22)'%3E%3Ccircle cx='50' cy='34' r='13'/%3E%3Ccircle cx='66' cy='45' r='13'/%3E%3Ccircle cx='60' cy='64' r='13'/%3E%3Ccircle cx='40' cy='64' r='13'/%3E%3Ccircle cx='34' cy='45' r='13'/%3E%3C/g%3E%3Cg transform='translate(22 82) scale(0.3)'%3E%3Ccircle cx='50' cy='34' r='13'/%3E%3Ccircle cx='66' cy='45' r='13'/%3E%3Ccircle cx='60' cy='64' r='13'/%3E%3Ccircle cx='40' cy='64' r='13'/%3E%3Ccircle cx='34' cy='45' r='13'/%3E%3C/g%3E%3Cg transform='translate(4 58) scale(0.19)'%3E%3Ccircle cx='50' cy='34' r='13'/%3E%3Ccircle cx='66' cy='45' r='13'/%3E%3Ccircle cx='60' cy='64' r='13'/%3E%3Ccircle cx='40' cy='64' r='13'/%3E%3Ccircle cx='34' cy='45' r='13'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23F5C542'%3E%3Ccircle cx='59' cy='57' r='2.4'/%3E%3Ccircle cx='37' cy='97' r='3'/%3E%3Ccircle cx='14' cy='69' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate(120 0) scale(-1 1)'%3E%3Cg stroke='%23A8492F' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M4 118C16 96 22 74 20 50'/%3E%3Cpath d='M20 74c10 4 18 2 26-4'/%3E%3C/g%3E%3Cg fill='%23E8695A'%3E%3Cg transform='translate(40 52) scale(0.24)'%3E%3Ccircle cx='50' cy='34' r='13'/%3E%3Ccircle cx='66' cy='45' r='13'/%3E%3Ccircle cx='60' cy='64' r='13'/%3E%3Ccircle cx='40' cy='64' r='13'/%3E%3Ccircle cx='34' cy='45' r='13'/%3E%3C/g%3E%3Cg transform='translate(16 86) scale(0.28)'%3E%3Ccircle cx='50' cy='34' r='13'/%3E%3Ccircle cx='66' cy='45' r='13'/%3E%3Ccircle cx='60' cy='64' r='13'/%3E%3Ccircle cx='40' cy='64' r='13'/%3E%3Ccircle cx='34' cy='45' r='13'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23F5C542'%3E%3Ccircle cx='52' cy='63' r='2.4'/%3E%3Ccircle cx='31' cy='101' r='2.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Template 8 · SAPPHIRE BENEFIT — the hospital foundation language
   ========================================================================== */

.tpl-sapphire {
  --tpl-frame: #061A44;
  --tpl-frame-hi: rgba(180, 210, 255, 0.22);
  --tpl-bevel: linear-gradient(150deg, #D8DEE9, #8C97AC 45%, #4E5769 75%, #C3CBD9);
  --tpl-paper: #1B4FA8;
  --tpl-paper-2: #071F52;
  --tpl-ink: #FFFFFF;
  --tpl-muted: rgba(255, 255, 255, 0.82);
  --tpl-faint: rgba(255, 255, 255, 0.58);
  --tpl-accent: #F5C542;
  --tpl-accent-2: #FFE9A8;
  --tpl-rule: rgba(245, 197, 66, 0.5);
  --tpl-seal-a: #3B78D8;
  --tpl-seal-b: #0B2A66;
}

/* No keyline — this piece is edge-to-edge, like the original */
.tpl-sapphire .hm-plaque__rule {
  margin: 0;
  padding: 0 16px 14px;
  border: 0;
  outline: 0;
}

.tpl-sapphire .hm-plaque__rule::before,
.tpl-sapphire .hm-plaque__rule::after { display: none; }

/* The event photo dissolves into the flood instead of sitting in a box */
.tpl-sapphire .hm-plaque__photo {
  height: 128px;
  margin: 0 -16px 0;
  border: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 38%, transparent 96%);
}

.tpl-sapphire .hm-plaque__photo::after {
  background: linear-gradient(180deg, rgba(6, 26, 68, 0.25) 0%, transparent 45%);
  box-shadow: none;
}

.tpl-sapphire .hm-plaque__masthead {
  position: relative;
  z-index: 3;
  padding-top: 14px;
}

/* Gold "thank you" headline, the loudest element on the piece */
.tpl-sapphire .hm-plaque__crown { margin-top: -14px; }

.tpl-sapphire .hm-plaque__event {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tpl-sapphire .hm-plaque__divider { display: none; }

.tpl-sapphire .hm-plaque__nameplate {
  background: none;
  box-shadow: none;
  padding: 2px 0 0;
}

.tpl-sapphire .hm-plaque__sponsor { color: #FFF; }
.tpl-sapphire .hm-plaque__sponsor-zh { color: var(--tpl-accent); }

.tpl-sapphire .hm-plaque__tier {
  color: #08245C;
  background: linear-gradient(150deg, #FFE9A8, #F5C542 55%, #C99A1E);
}

/* Soft snow/bokeh field, as on the original */
.tpl-sapphire .hm-plaque__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 62%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 54%, rgba(255, 255, 255, 0.42) 0 2px, transparent 2.5px),
    radial-gradient(circle at 34% 82%, rgba(255, 255, 255, 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 68% 88%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 44%, rgba(255, 255, 255, 0.3) 0 1px, transparent 1.5px);
}

/* ==========================================================================
   Template 9 · CRIMSON LUNAR — lacquer red and gold
   ========================================================================== */

.tpl-crimson {
  --tpl-frame: #3E0A07;
  --tpl-frame-hi: rgba(255, 200, 180, 0.2);
  --tpl-bevel: linear-gradient(150deg, #F0DDA8, #B78F3C 30%, #7A5A1C 60%, #D9C077);
  --tpl-paper: #8E1D16;
  --tpl-paper-2: #4E0C08;
  --tpl-ink: #FFFFFF;
  --tpl-muted: rgba(255, 255, 255, 0.8);
  --tpl-faint: rgba(255, 255, 255, 0.55);
  --tpl-accent: #E9C46A;
  --tpl-accent-2: #F8EAC0;
  --tpl-rule: #E9C46A;
  --tpl-seal-a: #F2D98B;
  --tpl-seal-b: #B08A2A;
}

.tpl-crimson .hm-plaque__seal { color: #4A2A06; }

.tpl-crimson .hm-plaque__crown {
  margin: 8px 0 10px;
  padding: 12px 10px 10px;
  border-top: 1px solid rgba(233, 196, 106, 0.5);
  border-bottom: 1px solid rgba(233, 196, 106, 0.5);
}

/* Blossoms read as gold on lacquer rather than coral */
.tpl-crimson .hm-plaque__paper::after {
  opacity: 0.42;
  filter: hue-rotate(-18deg) saturate(0.7) brightness(1.5);
}

/* ==========================================================================
   Flood templates: responsive
   ========================================================================== */

@media (max-width: 680px) {
  .tpl-jade .hm-plaque__crown { padding: 13px 10px 11px; }
  .tpl-jade .hm-plaque__event { font-size: 14px; }
  .tpl-sapphire .hm-plaque__photo { height: 96px; }
  .tpl-sapphire .hm-plaque__event { font-size: 16px; }
  .hm-plaque--flood .hm-plaque__nameplate { padding: 8px 10px; }
}

/* Blossom sprays were reaching into the signature row. Keep them hugging the
   very bottom corners, behind the text. */
.tpl-jade .hm-plaque__paper::after,
.tpl-crimson .hm-plaque__paper::after {
  background-size: 34% auto, 29% auto;
  background-position: left -6px bottom -4px, right -4px bottom -6px;
}

/* On lacquer red the desaturated blossoms washed out; let them read as gold. */
.tpl-crimson .hm-plaque__paper::after {
  opacity: 0.55;
  filter: hue-rotate(-24deg) saturate(1.1) brightness(1.25);
}

/* ==========================================================================
   Horizontal (Landscape 11" × 8.5") Plaque Geometry & Flow
   ========================================================================== */

.hm-plaque.hm-plaque--horizontal {
  --plaque-w: 480px;
  max-width: 100%;
  padding: 13px 16px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__paper {
  padding: 16px 20px 14px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__rule {
  padding: 14px 18px 12px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__masthead {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__logo {
  width: 36px;
  height: 36px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__org {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-align: left;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__photo {
  max-width: 320px;
  height: 90px;
  margin: 6px auto;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__event {
  font-size: 16px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__tier {
  margin: 6px 0 6px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__sponsor {
  font-size: 24px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__sponsor-zh {
  font-size: 14px;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__citation {
  max-width: 380px;
  margin: 6px auto 0;
  font-size: 9px;
  line-height: 1.5;
}

.hm-plaque.hm-plaque--horizontal .hm-plaque__footer {
  margin-top: 10px;
  padding-top: 8px;
  gap: 16px;
}

@media (max-width: 680px) {
  .hm-plaque.hm-plaque--horizontal {
    --plaque-w: 100%;
    padding: 10px;
  }
  .hm-plaque.hm-plaque--horizontal .hm-plaque__paper {
    padding: 12px 10px;
  }
  .hm-plaque.hm-plaque--horizontal .hm-plaque__sponsor {
    font-size: 18px;
  }
  .hm-plaque.hm-plaque--horizontal .hm-plaque__citation {
    font-size: 8px;
  }
}