/* A closing colophon: original white Olive Court curves on Sealskin. */
.logo-finale {
  margin: 66px calc(-1 * var(--gutter)) 44px;
  padding: clamp(60px, 7vw, 112px) max(var(--gutter), 7vw) 26px;
  background: #48423c;
  color: #fff;
  isolation: isolate;
  position: relative;
}
.logo-finale-stage { max-width: 1130px; margin: 0 auto; }
.logo-finale-art { display: block; width: 100%; height: auto; overflow: visible; }
.logo-finale-primary { display: none; }
.logo-finale-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 48px; margin-top: 24px; }
.logo-finale .motion-toggle { position: static; background: transparent; box-shadow: none; color: #fff; border-color: #b1aaa2; font-size: 15px; margin: 0; }
.logo-finale .motion-toggle:focus-visible { outline-color: #fff; }
.logo-finale .motion-toggle[hidden] { display: none; }
.logo-replay {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 10px 16px;
  min-height: 48px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.logo-replay[hidden] { display: none; }
.logo-replay span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.logo-replay svg { flex: 0 0 22px; transition: transform 250ms ease; }
.logo-replay:hover svg { transform: rotate(-24deg); }
.logo-replay:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
.logo-replay:disabled { cursor: default; opacity: .62; }
.logo-replay:disabled svg { transform: none; }
@media (max-width: 700px) {
  .logo-finale { margin-top: 44px; margin-bottom: 32px; padding: 58px max(var(--gutter), 7vw) 20px; }
  .logo-finale-horizontal { display: none; }
  .logo-finale-primary { display: block; }
  .logo-finale-controls { margin-top: 30px; }
  .logo-replay, .logo-finale .motion-toggle { font-size: 14px; }
  .logo-finale-controls { gap: 16px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-replay svg { transition: none; }
  .logo-replay:hover svg { transform: none; }
}
@media print {
  .logo-finale { print-color-adjust: exact; break-inside: avoid; }
  .logo-finale-controls { display: none; }
}

@media (max-width:360px) {
 .logo-finale-controls { flex-direction:column; align-items:flex-start; gap:0; }
 .logo-replay { padding-left:0; }
}