/* White reflection cores, broad soft falloff, 60% viewport reach per side. */
:root {
  --banner-logo-metal: #4b3a1f;
  --site-dark-gold: var(--banner-logo-metal);
  --banner-logo-ink: var(--banner-logo-metal);
  --wallpaper-sand-gold: #d7c193;
}
.gold-light-target, .topbar, .wallpaper-end {
  --gold-radials:
    radial-gradient(ellipse var(--gold-reach, 60vw) var(--gold-reach, 60vw) at var(--gold-left-x, 22vw) var(--gold-light-y, 50%),
    rgba(255, 255, 255, 1.000000) 0.0000%,
    rgba(255, 255, 255, 0.998048) 3.1250%,
    rgba(255, 255, 255, 0.992203) 6.2500%,
    rgba(255, 255, 255, 0.982499) 9.3750%,
    rgba(255, 255, 255, 0.968994) 12.5000%,
    rgba(255, 255, 255, 0.951768) 15.6250%,
    rgba(255, 255, 255, 0.930923) 18.7500%,
    rgba(255, 255, 254, 0.906587) 21.8750%,
    rgba(255, 254, 252, 0.878906) 25.0000%,
    rgba(255, 254, 250, 0.848054) 28.1250%,
    rgba(255, 253, 248, 0.814224) 31.2500%,
    rgba(255, 253, 246, 0.777635) 34.3750%,
    rgba(255, 253, 244, 0.738525) 37.5000%,
    rgba(255, 252, 242, 0.697160) 40.6250%,
    rgba(255, 252, 240, 0.653824) 43.7500%,
    rgba(255, 251, 238, 0.608827) 46.8750%,
    rgba(255, 251, 236, 0.562500) 50.0000%,
    rgba(255, 250, 234, 0.515199) 53.1250%,
    rgba(255, 250, 232, 0.467300) 56.2500%,
    rgba(255, 250, 230, 0.419206) 59.3750%,
    rgba(255, 249, 228, 0.371338) 62.5000%,
    rgba(255, 249, 226, 0.324143) 65.6250%,
    rgba(255, 248, 225, 0.278091) 68.7500%,
    rgba(255, 248, 223, 0.233674) 71.8750%,
    rgba(255, 247, 221, 0.191406) 75.0000%,
    rgba(255, 247, 219, 0.151826) 78.1250%,
    rgba(255, 247, 217, 0.115494) 81.2500%,
    rgba(255, 246, 215, 0.082994) 84.3750%,
    rgba(255, 246, 213, 0.054932) 87.5000%,
    rgba(255, 245, 211, 0.031938) 90.6250%,
    rgba(255, 245, 209, 0.014664) 93.7500%,
    rgba(255, 244, 207, 0.003785) 96.8750%,
    rgba(255, 244, 205, 0.000000) 100.0000%),
    radial-gradient(ellipse var(--gold-reach, 60vw) var(--gold-reach, 60vw) at var(--gold-right-x, 78vw) var(--gold-light-y, 50%),
    rgba(255, 255, 255, 1.000000) 0.0000%,
    rgba(255, 255, 255, 0.998048) 3.1250%,
    rgba(255, 255, 255, 0.992203) 6.2500%,
    rgba(255, 255, 255, 0.982499) 9.3750%,
    rgba(255, 255, 255, 0.968994) 12.5000%,
    rgba(255, 255, 255, 0.951768) 15.6250%,
    rgba(255, 255, 255, 0.930923) 18.7500%,
    rgba(255, 255, 254, 0.906587) 21.8750%,
    rgba(255, 254, 252, 0.878906) 25.0000%,
    rgba(255, 254, 250, 0.848054) 28.1250%,
    rgba(255, 253, 248, 0.814224) 31.2500%,
    rgba(255, 253, 246, 0.777635) 34.3750%,
    rgba(255, 253, 244, 0.738525) 37.5000%,
    rgba(255, 252, 242, 0.697160) 40.6250%,
    rgba(255, 252, 240, 0.653824) 43.7500%,
    rgba(255, 251, 238, 0.608827) 46.8750%,
    rgba(255, 251, 236, 0.562500) 50.0000%,
    rgba(255, 250, 234, 0.515199) 53.1250%,
    rgba(255, 250, 232, 0.467300) 56.2500%,
    rgba(255, 250, 230, 0.419206) 59.3750%,
    rgba(255, 249, 228, 0.371338) 62.5000%,
    rgba(255, 249, 226, 0.324143) 65.6250%,
    rgba(255, 248, 225, 0.278091) 68.7500%,
    rgba(255, 248, 223, 0.233674) 71.8750%,
    rgba(255, 247, 221, 0.191406) 75.0000%,
    rgba(255, 247, 219, 0.151826) 78.1250%,
    rgba(255, 247, 217, 0.115494) 81.2500%,
    rgba(255, 246, 215, 0.082994) 84.3750%,
    rgba(255, 246, 213, 0.054932) 87.5000%,
    rgba(255, 245, 211, 0.031938) 90.6250%,
    rgba(255, 245, 209, 0.014664) 93.7500%,
    rgba(255, 244, 207, 0.003785) 96.8750%,
    rgba(255, 244, 205, 0.000000) 100.0000%);
  --gold-reflection: var(--gold-radials),
    linear-gradient(var(--wallpaper-sand-gold), var(--wallpaper-sand-gold));
  --banner-reflection: var(--gold-radials),
    linear-gradient(var(--banner-logo-metal), var(--banner-logo-metal));
}
/* Rounded frames use a hollow mask, so neither text nor the transparent
   field interior receives a coloured fill. No extra DOM children are added. */
.gold-frame-relative { position: relative; }
.gold-frame-light:not(.topbar)::after,
.gold-header-edge {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: inherit;
  padding: var(--gold-edge-top, 0px) var(--gold-edge-right, 0px)
    var(--gold-edge-bottom, 0px) var(--gold-edge-left, 0px);
  background: var(--gold-reflection);
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.site-nav a.gold-light-target::after,
.menu-toggle span.gold-light-target {
  background: var(--gold-reflection) !important;
}

/* Text receives the same broad shared reflection as the lines. Clipping the
   animated field to the glyphs keeps the original gold base and adds a soft,
   natural highlight without thin beam-like streaks. */
.gold-text-light {
  background-image: var(--banner-reflection) !important;
  /* Override older important background shorthands on panel labels:
     those also reset background-clip and otherwise paint the entire box. */
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background-color: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  /* Tighter tracking and a subtle upward stretch, excluding the image-based
     banner wordmark, which never receives this class. */
  letter-spacing: -.03em !important;
  transform: scaleY(1.08);
  transform-origin: center bottom;
}
/* Navigation labels retain the banner wordmark's black-gold without light. */
.site-nav a.gold-text-light,
.site-nav a.gold-text-light:hover {
  background-image: none !important;
  color: var(--banner-logo-metal) !important;
  -webkit-text-fill-color: var(--banner-logo-metal);
}
/* Space for rounded-font descenders inside the text-clipped light surface. */
h1.gold-text-light, h2.gold-text-light, h3.gold-text-light,
h4.gold-text-light, h5.gold-text-light, h6.gold-text-light {
  line-height: 1.25;
  padding-top: .08em;
  padding-bottom: .2em;
  overflow: visible;
}
/* Add light to previously missed text without stretching its surrounding box. */
.gold-text-light.gold-text-coverage {
  transform: none;
  letter-spacing: inherit !important;
}
.gold-text-light a,
.gold-text-light button,
.gold-text-light label,
.gold-text-light small,
.gold-text-light strong,
.gold-text-light em,
a.gold-text-light,
button.gold-text-light,
label.gold-text-light,
small.gold-text-light,
strong.gold-text-light,
em.gold-text-light {
  display: inline-block;
}

.wordmark-logo.gold-light-target {
  /* Retain layout; the mask below paints the exact black-gold silhouette. */
  visibility: hidden;
  filter: none;
  transition: none !important;
}

/* Paint the same moving reflection directly over the transparent wordmark
   silhouette; the source image remains underneath as the black-gold base. */
.topbar .wordmark.gold-light-target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--gold-radials);
  opacity: .2;
  -webkit-mask: url("eight-and-eight-banner-logo-transparent-v35.png") center / contain no-repeat;
  mask: url("eight-and-eight-banner-logo-transparent-v35.png") center / contain no-repeat;
}
.topbar .wordmark.gold-light-target::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--banner-logo-metal);
  opacity: 1;
  -webkit-mask: url("eight-and-eight-banner-logo-transparent-v35.png") center / contain no-repeat;
  mask: url("eight-and-eight-banner-logo-transparent-v35.png") center / contain no-repeat;
}

/* Recolour only the ornament; the banner paper is fully transparent.
   Keep the smaller v39 repeat scale and the menu's fixed wallpaper origin. */
.topbar::before,
.wallpaper-end::before {
  background: var(--gold-reflection);
  opacity: 1;
  mix-blend-mode: normal;
  -webkit-mask-image: url("wallpaper-ornament-mask-v45.png");
  mask-image: url("wallpaper-ornament-mask-v45.png");
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 260px 260px;
  mask-size: 260px 260px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.topbar::before {
  -webkit-mask-position: center -70px;
  mask-position: center -70px;
}
.wallpaper-end::before {
  -webkit-mask-position: center center;
  mask-position: center center;
}
@media (max-width: 900px) {
  .topbar::before,
  .topbar.menu-expanded::before {
    -webkit-mask-image: url("wallpaper-ornament-mask-v45.png");
    mask-image: url("wallpaper-ornament-mask-v45.png");
    -webkit-mask-position: center -58px;
    mask-position: center -58px;
  }
}
@media (max-width: 560px) {
  .topbar::before,
  .wallpaper-end::before {
    -webkit-mask-size: 220px 220px;
    mask-size: 220px 220px;
  }
}

/* v42: all banner ground layers are transparent; keep the masked ornament. */
.topbar,
.wallpaper-end,
.site-nav,
.topbar.menu-expanded::after {
  background: transparent !important;
}

.topbar, .wallpaper-end, .topbar::before, .wallpaper-end::before {
  opacity: 1 !important;
}

/* Same sampled gold as the wordmark. Kept outside animated lighting. */
.topbar .menu-toggle > span {
  position: relative;
  background: var(--banner-logo-metal) !important;
  background-image: none !important;
  height: 2.25px !important;
  min-height: 2.25px !important;
  border-radius: 999px !important;
}
.topbar .menu-toggle > span::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--gold-radials);
  opacity: .2;
  border-radius: 999px;
}
@media (max-width: 900px) {
  /* Centre the complete three-stroke group in the closed banner field. */
  .topbar .menu-toggle {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

/* Mobile menu edge: one exact-width rule sits on the menu's own lower edge.
   The old border was painted outside the expanded banner on some Safari sizes. */
@media (max-width: 900px) {
  .site-nav {
    border-bottom: 0 !important;
  }
  .site-nav::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    /* Match the closed banner's bottom border exactly. */
    background: var(--metallic-gold, #d7c193) !important;
    pointer-events: none;
  }
}

/* The iOS safe-area/top edge uses the same page ground as the main website. */
html,
body {
  background: var(--page-cream, #fdfcfa) !important;
}