/* Two views of the same painting keep the lantern and the oak in frame at every width. */
.chronicle-footer {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 126px;
  padding: 12px 10px;
  color: #efe4bd;
  text-align: center;
  font: 14px/1.35 Georgia, 'Times New Roman', serif;
  --forest-paint: url('chronicle-woodland.webp');
}
.chronicle-footer::before,
.chronicle-footer::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-block: 0;
  width: 50%;
  background-image: var(--forest-paint);
  background-repeat: no-repeat;
  background-size: auto clamp(215px, 22vw, 354px);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent),
              linear-gradient(var(--fade), #000 48%, transparent);
  mask-composite: intersect;
}
.chronicle-footer::before { left: 0; background-position: left 10%; --fade: to right; }
.chronicle-footer::after { right: 0; background-position: right 57%; --fade: to left; }
.chronicle-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: #ffe4a3;
  text-align: left;
  text-decoration: none;
  text-shadow: 0 1px 2px #08170f;
}
.chronicle-footer__brand::before, .chronicle-footer__brand::after {
  content: '';
  width: clamp(24px, 5vw, 82px);
  height: 6px;
  margin-inline: 5px;
  background: linear-gradient(to right, transparent, #ac8b4a 76%, #edca81);
  clip-path: polygon(0 42%, 88% 42%, 94% 0, 100% 50%, 94% 100%, 88% 58%, 0 58%);
}
.chronicle-footer__brand::after { transform: scaleX(-1); }
.chronicle-footer__brand img { width: 34px; height: 31px; object-fit: contain; }
.chronicle-footer__brand strong { display: block; font-size: 20px; line-height: 1.05; }
.chronicle-footer__brand span span { display: block; color: #e1d2ac; font-size: 13px; }
.chronicle-footer__links { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 20px; }
.chronicle-footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: #f7e9c8;
  text-shadow: 0 1px 2px #08170f;
  text-decoration: underline;
  text-decoration-color: #a08b61;
  text-underline-offset: 4px;
}
.chronicle-footer__links a + a::before {
  content: '';
  position: absolute;
  left: -12px;
  top: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background: #b19354;
  transform: rotate(45deg);
}
.chronicle-footer a:hover { color: #fff4d7; text-decoration-color: currentColor; }
.chronicle-footer a:focus-visible { outline: 2px solid #ffe29b; outline-offset: 2px; }
.chronicle-footer__credit { color: #d5d8c4; text-shadow: 0 1px 2px #08170f; font: 13px/1.5 'Segoe UI', Arial, sans-serif; }
.chronicle-footer__credit span + span::before { content: '·'; margin-inline: 5px; }

.gate-wrap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.gate-wrap > .gate-interior { width: calc(100% - 12px); align-self: center; }
.gate-interior + .chronicle-footer { width: 100%; max-width: 1012px; align-self: center; }
.rg-scene-base + .chronicle-footer { margin-top: -10px; }
@media (max-width: 1099.98px) {
  .rg-scene-base + .chronicle-footer { margin-top: 0; }
  .chronicle-footer__brand, .chronicle-footer__links a { min-height: 44px; }
}
@media (max-width: 640px) {
  .chronicle-footer { min-height: 124px; padding: 8px; }
  .chronicle-footer::before, .chronicle-footer::after { background-size: auto 145px; }
  .chronicle-footer::before { background-position: -14px 36%; }
  .chronicle-footer::after { background-position: calc(100% + 12px) 57%; }
}
@media print { .rg-shell .chronicle-footer { display: none; } }