/* Block 7: visit + footer, after Lando's closing panel. Out of the gold glow that ends Block 6 stands a night panel
   with a tab on top, already laid out: signature and Ed's last line on top, the night Sphinx in the middle,
   pages left, contact right, a ribbon of the bar's details behind her, the booking button and two gold tabs below */
.b7 { position: relative; padding: 48px 14px 14px; background: var(--gold); color: var(--cream); }
/* the gold comes up over the night above, as on the reference: faint at first, slowly gathering, full only where the
   footer begins. A flat, eased fade: a bowl-shaped one leaves the middle reading as a dark hump against the gold */
.b7::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 56vh; pointer-events: none; background: var(--gold);
  --fade: linear-gradient(transparent, rgba(0, 0, 0, .03) 22%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .42) 70%, rgba(0, 0, 0, .7) 85%, #000);
  -webkit-mask: var(--fade); mask: var(--fade); }
.b7__stage { position: relative; height: calc(100vh - 62px); min-height: 640px; }
.b7__panel { position: absolute; inset: 0; border-radius: 26px; background: var(--night); }

.b7__head { position: absolute; z-index: 3; left: 0; right: 0; top: 9%; text-align: center; }
.b7__sig { position: absolute; left: 50%; top: -62%; width: clamp(200px, 18vw, 320px); translate: -2% 0; rotate: -8deg; color: var(--gold); pointer-events: none; }
.b7__sig svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(13, 10, 8, .8)); }
.b7__h { position: relative; font: 900 clamp(46px, 6vw, 116px)/.92 var(--sans); text-transform: uppercase; letter-spacing: -.03em; }
/* the line sits back a little in a darker gold so the bright signature written over it reads first */
.b7__h em { font: 400 1.02em/1 var(--serif); font-style: normal; color: color-mix(in srgb, var(--gold) 70%, var(--night)); letter-spacing: -.01em; }
.b7__sphinx { position: absolute; z-index: 2; left: 50%; bottom: 0; height: 78%; width: auto; max-width: none; translate: -50% 0; pointer-events: none; }

.b7__col { position: absolute; z-index: 3; top: 43%; display: grid; justify-items: center; gap: 2px; width: 22%; text-align: center; }
.b7__col--l { left: 4%; }
.b7__col--r { right: 4%; }
.b7__t { font: 600 11px/1 var(--sans); color: color-mix(in srgb, var(--cream) 70%, transparent); margin-bottom: 12px; }
.b7__col a { font: 800 clamp(22px, 2vw, 34px)/1.04 var(--sans); text-transform: uppercase; letter-spacing: -.02em; color: var(--cream); text-decoration: none; transition: color .3s; }
.b7__col a:hover, .b7__col a:focus-visible { color: var(--gold); }
.b7__col .b7__gold { margin-top: 18px; color: var(--gold); font-size: clamp(16px, 1.3vw, 22px); }
.b7__col .b7__gold:hover { color: var(--cream); }
.b7__open { margin-top: 18px; font: 600 13px/1.4 var(--sans); }

/* the bar's details run behind her, the way the partners' logos do in the reference */
.b7__ribbon { position: absolute; z-index: 1; left: 0; right: 0; bottom: 15%; overflow: hidden; }
.b7__track { display: flex; align-items: center; gap: 34px; width: max-content; animation: b7-marq 60s linear infinite; }
.b7__track span { font: 600 clamp(18px, 1.6vw, 26px)/1 var(--serif); text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--cream) 82%, transparent); white-space: nowrap; }
.b7__track .mark { font-size: 26px; color: var(--gold); }
@keyframes b7-marq { to { transform: translateX(-50%); } }

.b7__book { position: absolute; z-index: 4; left: 50%; bottom: 6%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 3px;
  background: var(--gold); color: var(--night); font: 700 14px/1 var(--sans); text-transform: uppercase; text-decoration: none; transition: background .3s; }
.b7__book:hover, .b7__book:focus-visible { background: var(--cream); }
.b7__book svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the small print sits on two gold tabs that rise out of the frame at the lower corners */
.b7__tab { position: absolute; z-index: 4; bottom: 0; padding: 12px 26px 10px; background: var(--gold); color: var(--night); font: 600 12px/1 var(--sans); }
.b7__tab--l { left: 0; border-radius: 0 22px 0 26px; }
.b7__tab--r { right: 0; border-radius: 22px 0 26px 0; }

@media (max-width: 760px) {
  .b7 { height: auto; padding: 34px 10px 10px; }
  .b7__stage { position: relative; height: auto; overflow: visible; }
  .b7__stage { min-height: 0; }
  .b7__panel { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; padding: 84px 18px 0; text-align: center; }
  .b7__head, .b7__col, .b7__book, .b7__sphinx, .b7__ribbon, .b7__tab { position: relative; inset: auto; translate: none; }
  .b7__sig { top: -58px; width: 190px; }
  .b7__h { font-size: 12vw; }
  .b7__sphinx { order: 2; width: 116%; height: auto; margin: 18px 0 0; }
  .b7__ribbon { order: 3; z-index: 3; width: calc(100% + 36px); margin-top: 0; padding: 14px 0; background: var(--night); }
  .b7__col { order: 4; width: auto; margin-top: 30px; }
  .b7__book { order: 6; margin: 34px 0 30px; }
  .b7__tab { order: 7; width: calc(100% + 36px); border-radius: 0; text-align: center; }
  .b7__tab--l { padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .b7__track { animation: none; } }