/* HoPB Placards v1 — velvet-rope museum signage.
   Two gold stanchions + a velvet rope swag + a hanging sign.
   Drop-in: <div class="placard"> with the structure below. */

.placard {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 320px;
  margin: 64px auto;
}

/* --- Posts (gold stanchions) --- */
.placard__post {
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 240px;
}
.placard__post--left  { left: 40px; }
.placard__post--right { right: 40px; }

.placard__pole {
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: 22px;
  width: 6px;
  background:
    linear-gradient(180deg, #d4b888 0%, #b89867 20%, #8a6a26 60%, #5a4318 100%);
  box-shadow:
    0 0 4px rgba(184, 152, 103, 0.5),
    inset  1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

.placard__base {
  position: absolute;
  left: -16px;
  bottom: -6px;
  width: 50px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, #8a6a26 0%, #5a4318 60%, #1a1207 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.placard__cap {
  position: absolute;
  left: -4px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 28%,
      #f6dca6 0%,
      #d4b888 22%,
      #b89867 45%,
      #8a6a26 75%,
      #5a4318 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  z-index: 3; /* over the rope endpoint so the rope tucks behind the cap */
}

/* --- Rope (velvet swag) ---
   Container spans from left-cap center (40+9=49) to right-cap center
   (container_width - 49). Path endpoints land at cap centers; the cap's
   z-index sits above so the rope appears tied behind the finial. */
.placard__rope {
  position: absolute;
  top: 80px;       /* aligns with the top of the posts (320 - 240) */
  left: 49px;
  right: 49px;
  height: 90px;
  pointer-events: none;
  z-index: 2;
}
.placard__rope svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* --- The sign --- */
.placard__sign {
  position: absolute;
  left: 50%;
  top: 168px;
  transform: translateX(-50%);
  width: 230px;
  padding: 14px 18px 12px;
  background:
    radial-gradient(ellipse at center, rgba(184, 152, 103, 0.05), transparent 75%),
    linear-gradient(180deg, #f4efe4 0%, #ebe1c8 100%);
  color: #2a2418;
  text-align: center;
  border: 1px solid #8a6a26;
  box-shadow:
    inset 0 1px 0 rgba(184, 152, 103, 0.4),
    0 0 0 3px #0e0c08,
    0 0 0 4px #8a6a26,
    0 10px 20px rgba(0, 0, 0, 0.6);
  z-index: 4;
}
.placard__sign::before {
  /* inner gilt double-border */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(138, 106, 38, 0.5);
  pointer-events: none;
}
.placard__sign::after {
  /* two slim brass chains hanging from rope sag to sign top */
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -18px;
  height: 18px;
  background-image:
    linear-gradient(rgba(138, 106, 38, 0.9), rgba(138, 106, 38, 0.9)),
    linear-gradient(rgba(138, 106, 38, 0.9), rgba(138, 106, 38, 0.9));
  background-size: 1.5px 100%, 1.5px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

.placard__kicker {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #8a6a26;
  margin: 0 0 6px;
}
.placard__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: #1f1a14;
}
.placard__title em {
  font-style: normal;
  color: #5a3a1c;
}
.placard__body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: #3a3328;
  margin: 0;
}
.placard__signed {
  margin: 8px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 10.5px;
  color: #8a6a26;
  letter-spacing: 0.03em;
}

@media (max-width: 580px) {
  .placard      { max-width: 100%; height: 290px; margin: 48px auto; }
  .placard__post { height: 215px; }
  .placard__rope { top: 75px; left: 45px; right: 45px; }
  .placard__post--left  { left: 36px; }
  .placard__post--right { right: 36px; }
  .placard__sign { top: 156px; width: 210px; padding: 12px 16px 10px; }
  .placard__title { font-size: 16.5px; }
}