/* Bishop Boxing Promotions — Africa Gift Box.
   Black poster, bone type, championship gold. The red and green are the
   chart's own category colours (they are the Ghana flag), so the map and the
   ticket list cannot disagree about what a tier looks like. */
:root {
  --ink: #0a0a0b;          /* page */
  --ink-2: #121214;        /* raised */
  --ink-3: #1b1b1f;        /* card */
  --line: #2a2a30;
  --line-soft: #202026;
  --bone: #f4f1ea;         /* body text */
  --bone-dim: #a9a49a;
  --bone-faint: #7a756c;
  --gold: #d9b24c;         /* VIP + primary accent */
  --gold-deep: #a8842f;
  --red: #ce1126;          /* Reserved */
  --green: #006b3f;        /* General Admission */
  --display: 'Archivo Narrow', 'Montserrat', Impact, sans-serif;
  --text: 'Montserrat', system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --step--1: 13.5px; --step-0: 15.5px; --step-1: 18px; --step-2: 26px;
}
@media (min-width: 900px) { :root { --step-2: 34px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--text); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700;
                 letter-spacing: .01em; line-height: 1.02; text-transform: uppercase; }
h1 { font-size: clamp(38px, 7vw, 84px); }
h2 { font-size: clamp(26px, 3.4vw, 42px); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: .02em; }
p { margin: 0; }

.wrap { width: min(1220px, 100% - 40px); margin-inline: auto; }
.wrap--narrow { width: min(880px, 100% - 40px); }
.kicker { font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
          color: var(--gold); font-weight: 700; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0 0; }
.muted { color: var(--bone-dim); }

/* Masthead */
.mast { position: sticky; top: 0; z-index: 40; background: rgba(10,10,11,.86);
        backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.mast[data-stuck] { border-bottom-color: var(--line-soft); }
.mast .wrap { display: flex; align-items: center; justify-content: space-between;
              gap: 20px; padding: 13px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand b { font-family: var(--display); font-size: 15px; letter-spacing: .14em; }
.brand span { display: block; font-size: 9.5px; letter-spacing: .2em; color: var(--gold);
              font-weight: 600; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
         text-decoration: none; color: var(--bone-dim); font-weight: 600; }
.nav a:hover { color: var(--bone); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
       font-family: var(--display); font-size: 13.5px; letter-spacing: .14em;
       text-transform: uppercase; font-weight: 700; padding: 14px 26px;
       border-radius: 8px; border: 1px solid var(--gold); background: var(--gold);
       color: #14100a; cursor: pointer; text-decoration: none; transition: all .15s ease; }
.btn:hover { background: #e6c260; border-color: #e6c260; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink-3); border-color: var(--bone-faint); }
.btn--block { width: 100%; }

/* Hero */
.hero { position: relative; min-height: 76vh; display: flex; align-items: flex-end;
        overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.hero__art { position: absolute; inset: 0; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
                 filter: grayscale(.25) contrast(1.05); }
.hero__art::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,.2) 35%, rgba(10,10,11,.96) 100%); }
.hero__in { position: relative; padding: 60px 0 46px; }
.hero__flag { display: flex; gap: 5px; margin-bottom: 18px; }
.hero__flag i { display: block; width: 34px; height: 5px; border-radius: 2px; }
.hero h1 { margin-top: 10px; max-width: 16ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 26px; }
.hero__meta div span { display: block; font-size: 10px; letter-spacing: .2em;
                       text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.hero__meta div b { font-weight: 600; font-size: var(--step-1); }
.hero__meta div i { font-style: normal; display: block; color: var(--bone-dim);
                    font-size: var(--step--1); margin-top: 2px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Sections */
.sec { padding: 72px 0; }
.sec--tight { padding: 52px 0; }
.head { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-end;
        justify-content: space-between; }
.head p { max-width: 54ch; color: var(--bone-dim); font-size: var(--step--1); }

/* Cards */
.card { background: var(--ink-3); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.cards { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 820px) { .cards--2 { grid-template-columns: 1fr 1fr; } }

.pick { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.pick:hover .pick__art img { transform: scale(1.03); }
/* The art box owns its proportions; the photograph fills it from inside, so a
   portrait shot cannot stretch one card taller than the other. */
.pick__art { position: relative; aspect-ratio: 16 / 10; background: var(--ink-2); overflow: hidden; }
.pick__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 filter: grayscale(.2); transition: transform .4s ease; }
.pick__tag { position: absolute; left: 14px; top: 14px; background: var(--gold);
             color: #14100a; font-family: var(--display); font-size: 11px; font-weight: 700;
             letter-spacing: .16em; padding: 6px 11px; border-radius: 5px; }
.pick__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pick__body p { color: var(--bone-dim); font-size: var(--step--1); }
.pick__foot { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end;
              justify-content: space-between; gap: 16px; border-top: 1px solid var(--line-soft); }

/* Price, in cedis first */
.price b { font-family: var(--display); font-size: var(--step-2); color: var(--gold);
           display: block; line-height: 1; }
.price span { display: block; font-size: 11.5px; color: var(--bone-faint); margin-top: 5px;
              letter-spacing: .04em; }

/* Ticket rows */
.tiers { display: grid; gap: 14px; margin-top: 26px; }
.tier { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
        justify-content: space-between; padding: 20px 22px; }
.tier[data-gone] { opacity: .45; }
.tier__main { flex: 1 1 320px; }
.tier__main h4 { display: flex; align-items: center; gap: 10px; }
.tier__main p { margin-top: 7px; color: var(--bone-dim); font-size: var(--step--1); max-width: 52ch; }
.tier__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.tier__buy { display: flex; align-items: center; gap: 18px; }
.pill { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
        padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--bone-dim); }
.pill--gold { border-color: var(--gold-deep); color: var(--gold); }
.pill--gone { border-color: var(--line); color: var(--bone-faint); }

.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--ink-2);
           border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.stepper button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--bone);
                  font-size: 18px; cursor: pointer; border-radius: 6px; }
.stepper button:hover:not(:disabled) { background: var(--ink-3); color: var(--gold); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper output { min-width: 30px; text-align: center; font-family: var(--display);
                  font-size: var(--step-1); }

/* Basket */
.basket { position: sticky; top: 86px; padding: 24px 26px; }
.basket h4 { margin-bottom: 4px; }
.line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
        font-size: var(--step--1); color: var(--bone-dim); }
.line b { color: var(--bone); font-weight: 600; }
.line--total { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft);
               font-family: var(--display); font-size: var(--step-1); color: var(--bone); }
.line--total span:last-child { color: var(--gold); }
.empty { color: var(--bone-faint); font-size: var(--step--1); padding: 14px 0; }

.buy { display: grid; gap: 26px; margin-top: 28px; }
@media (min-width: 1000px) { .buy { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

/* Venue plan */
.plan { background: var(--ink-2); border: 1px solid var(--line-soft);
        border-radius: var(--radius); padding: 14px; }
.plan svg { width: 100%; height: auto; display: block; }
/* The groups come from the platform's rendered chart; only the behaviour is ours. */
.plan .sect { cursor: pointer; transition: opacity .12s ease, filter .12s ease; }
.plan .sect:hover { opacity: .88; filter: brightness(1.25); }
.plan .sect[data-picked] { filter: brightness(1.5) drop-shadow(0 0 6px rgba(217,178,76,.8)); }
.plan .sect[data-gone] { opacity: .28; pointer-events: none; }
.plan text { pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 11.5px;
              letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }

/* Notices */
.notice { border-left: 3px solid var(--gold); background: var(--ink-3); padding: 16px 20px;
          border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--step--1);
          color: var(--bone-dim); }
.notice b { color: var(--bone); }
.notice--bad { border-left-color: var(--red); }

/* Paystack step */
.pay { display: grid; gap: 20px; }
.paybox { padding: 26px; }
.paybox__head { display: flex; align-items: center; gap: 14px; }
.paybox__head img { height: 26px; width: auto; }
.methods { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.method { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
          font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--bone-dim); }

dialog { border: 1px solid var(--line); background: var(--ink-3); color: var(--bone);
         border-radius: var(--radius); padding: 0; max-width: 520px; width: calc(100% - 40px); }
dialog::backdrop { background: rgba(0,0,0,.72); }
.modal { padding: 28px; }
.modal h3 { margin-bottom: 12px; }
.modal p { color: var(--bone-dim); font-size: var(--step--1); margin-bottom: 14px; }

/* On a phone the masthead was wrapping "BISHOP BOXING" onto two lines and
   squeezing the nav against it. */
@media (max-width: 560px) {
  .mast .wrap { padding: 10px 0; gap: 12px; }
  .brand img { height: 32px; }
  .brand b { font-size: 12.5px; letter-spacing: .1em; }
  .brand span { display: none; }
  .nav { gap: 14px; }
  .nav a { font-size: 10px; letter-spacing: .12em; }
  /* A venue plan shown at phone width needs the height to be legible at all. */
  .plan svg { min-height: 52vh; }
  .basket { position: static; }
}

/* Footer */
.foot { border-top: 1px solid var(--line-soft); padding: 44px 0 30px; margin-top: 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
              justify-content: space-between; }
.foot img { height: 44px; opacity: .85; }
.foot__legal { margin-top: 26px; text-align: center; color: var(--bone-faint); font-size: 11.5px; }