/* 1.5.5 — a bevelled gold Y seal. Existing header geometry stays in control. */
.brand .mark {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  color: #f3d995;
  background:
    radial-gradient(ellipse at 24% 0%, #49504b66, transparent 70%) padding-box,
    linear-gradient(145deg, #29312f, #121c1b 57%, #080e10) padding-box,
    linear-gradient(135deg, #fff1be 0%, #ae7d35 19%, #e9c879 38%, #fff2c2 48%, #9b682c 64%, #63401d 79%, #ddbc73 100%) border-box;
  box-shadow:
    inset 0 0 0 1px #0a0d0cbf,
    inset 1px 1px 0 1px #f6dd9e38,
    inset -1px -1px 2px 1px #0009,
    0 1px 0 #f7dda36b,
    0 3px 0 #382719,
    0 5px 7px -3px #000b;
}

.brand .mark > .brand-monogram {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: #f3d995;
  text-shadow: 0 1px 0 #3b2913, 0 -1px 0 #fff1bc66, 0 2px 3px #0008;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand .mark > .brand-monogram {
    background: linear-gradient(160deg, #fff7dc 5%, #f5dc98 35%, #b58842 61%, #f6df9f 83%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 0 #65491f) drop-shadow(0 2px 1px #0008);
  }
}

/* A slow, visible upper-left glint belongs to the brand, not poster playback. */
.brand .mark::before,
.brand .mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  pointer-events: none;
  background:
    radial-gradient(circle, #fffef1 0 8%, #ffe9a899 14%, transparent 43%),
    linear-gradient(90deg, transparent 8%, #fff8d5 49%, #fff8d5 51%, transparent 92%) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent 8%, #fff8d5 49%, #fff8d5 51%, transparent 92%) center / 1px 100% no-repeat;
  filter: drop-shadow(0 0 2px #ffe8aab3);
  opacity: .3;
  transform: scale(.7) rotate(8deg);
  animation: y-seal-glint 3.8s ease-in-out infinite;
}
.brand .mark::before { top: -6px; left: -6px; }
.brand .mark::after { display: none; }

@keyframes y-seal-glint {
  0%, 12%, 88%, 100% { opacity: .25; transform: scale(.68) rotate(8deg); }
  45% { opacity: 1; transform: scale(1.15) rotate(8deg); }
  65% { opacity: .55; transform: scale(.85) rotate(8deg); }
}

/* The intro pauses content animations; this shared header seal stays alive. */
body.intro-playing #siteHeader .brand .mark::before { animation-play-state: running !important; }
html.brand-page-hidden .brand .mark::before { animation-play-state: paused !important; }
html.brand-page-hidden body.intro-playing #siteHeader .brand .mark::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .brand .mark::before, .brand .mark::after { animation: none; opacity: .65; transform: scale(.85) rotate(8deg); }
}

@media (forced-colors: active) {
  .brand .mark { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .brand .mark > .brand-monogram { background: none; color: CanvasText; filter: none; }
  .brand .mark::before, .brand .mark::after { display: none; }
}