/* Sephora Josserand footer: curtain call. Ruby velvet curtain, a theatre marquee sign
   ringed with chasing bulbs ("Fin"), the links as ticket stubs, the notice as a programme note */
.sj-foot{
  --s-bg:#0b0b0b; --s-panel:#141110; --s-panel-2:#1a1513; --s-ruby:#5c0a18; --s-ruby-2:#8a1526; --s-ruby-3:#3a0610;
  --s-gold:#d4af37; --s-gold-2:#f0d878; --s-ink:#f3efe6; --s-soft:#c4bcad; --s-line:rgba(212,175,55,.28);
  --s-display:'Playfair Display',Georgia,'Times New Roman',serif; --s-body:'Lato',-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  position:relative; background:var(--s-bg); color:var(--s-soft); font-family:var(--s-body); line-height:1.6; text-align:center;
  border-top:1px solid var(--s-line); overflow:hidden;
}
.sj-foot *{box-sizing:border-box;}
.sj-foot p{margin:0;}
.sj-foot p:not([class]){color:inherit; font-size:inherit; line-height:inherit;}
.sj-foot a{color:var(--s-gold-2);}
.sj-foot a:focus-visible,.sj-foot .kc-link:focus-visible{outline:2px solid var(--s-gold-2); outline-offset:3px;}

/* velvet curtain with a scalloped valance */
.sj-curtain{position:absolute; inset:0 0 auto 0; height:300px; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, var(--s-bg) 100%),
    repeating-linear-gradient(90deg, var(--s-ruby-3) 0, var(--s-ruby) 22px, var(--s-ruby-2) 34px, var(--s-ruby) 46px, var(--s-ruby-3) 68px);}
.sj-curtain::after{content:""; position:absolute; left:0; right:0; top:0; height:34px;
  background:radial-gradient(circle at 34px -4px, var(--s-ruby-2) 0 30px, var(--s-gold) 30px 33px, transparent 34px) 0 0/68px 34px repeat-x;}
.sj-stage{position:relative; max-width:900px; margin:0 auto; padding:84px 16px 44px;}

/* marquee sign: bulbs live in the border box */
.sj-sign{
  --bulb:var(--s-gold-2);
  max-width:560px; margin:0 auto; padding:26px 24px 22px; border:14px solid transparent; border-radius:6px;
  background:
    linear-gradient(var(--s-panel), var(--s-panel)) padding-box,
    radial-gradient(circle, var(--bulb) 0 2.6px, rgba(240,216,120,.25) 3.2px, transparent 4.5px) 0 0/18px 18px border-box,
    linear-gradient(#2a0b10, #2a0b10) border-box;
  box-shadow:0 0 0 1px var(--s-gold), 0 24px 50px rgba(0,0,0,.6), 0 0 40px rgba(212,175,55,.12);
  animation:sj-chase 1.2s steps(2) infinite;
}
@keyframes sj-chase{to{background-position:0 0, 18px 0, 0 0;}}
.sj-fin{font-family:var(--s-display); font-style:italic; font-size:clamp(2.6rem,7vw,3.8rem); line-height:1; color:var(--s-gold-2);
  text-shadow:0 0 18px rgba(240,216,120,.35);}
.sj-name{font-family:var(--s-display); font-size:1.15rem; color:var(--s-ink); margin-top:8px !important; letter-spacing:.5px;}
.sj-copy{font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--s-soft); margin-top:10px !important;
  padding-top:10px; border-top:1px solid var(--s-line);}

/* ticket stubs */
.sj-tickets ul{list-style:none; margin:34px 0 30px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.sj-ticket{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 22px; text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#1a1108 !important;
  background:linear-gradient(160deg, var(--s-gold-2), var(--s-gold));
  -webkit-mask:radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right/51% 100% no-repeat;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.sj-ticket::before{content:""; position:absolute; top:7px; bottom:7px; left:12px; border-left:1px dashed rgba(26,17,8,.45);}
.sj-ticket:hover{transform:translateY(-3px) rotate(-1deg);}
.sj-ticket[aria-current="page"]{background:linear-gradient(160deg, var(--s-ink), #d9d1c2);}
.sj-ticket:focus-visible{outline:none; box-shadow:0 0 0 3px var(--s-bg), 0 0 0 5px var(--s-gold-2); -webkit-mask:none; mask:none;}

/* programme note */
.sj-note{max-width:560px; margin:0 auto; padding:18px 22px; font-size:.84rem; color:var(--s-soft);
  border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line); position:relative;}
.sj-note::before,.sj-note::after{content:"\25C6"; position:absolute; top:-0.75em; left:50%; transform:translateX(-50%); padding:0 10px; background:var(--s-bg); color:var(--s-gold); font-size:.8rem; line-height:1.5;}
.sj-note::after{top:auto; bottom:-0.75em;}
.sj-reviewed{margin-top:8px !important; font-size:.76rem; letter-spacing:1px; color:var(--s-soft);}
.sj-foot .kc-foot{position:relative; margin:0; padding:0 16px 34px; font-size:.8rem; color:var(--s-soft);}
@media (max-width:560px){
  .sj-stage{padding-top:72px;}
  .sj-sign{border-width:12px; padding:20px 14px 18px;}
  .sj-ticket{padding:0 18px;}
}
@media (prefers-reduced-motion:reduce){ .sj-sign{animation:none;} .sj-ticket{transition:none;} .sj-ticket:hover{transform:none;} }
/* the 404 page centres its content in a flex row: stack the footer under it */
body:has(> footer.sj-foot):not(:has(.topnav)){flex-direction:column; align-items:stretch;}
body:has(> footer.sj-foot):not(:has(.topnav)) > .wrap{margin-left:auto; margin-right:auto;}