/* ============================================================
   Blackstone Tickets — shared styles
   Matches blackstonepubs.co.uk and the Quarry Club booking page:
   limestone background, slate header, baize green actions,
   brass highlights, Bitter headings, Public Sans body text.
   ============================================================ */

:root{
  --limestone:#EDECE6;
  --chalk:#FFFFFF;
  --slate:#2A2F33;
  --slate-soft:#5A6166;
  --baize:#1E5B44;
  --baize-dark:#164333;
  --brass:#B5832A;
  --brass-soft:#F6EBD3;
  --line:#D6D4CC;
  --muted-bg:#F6F5F1;
  --error:#9B2C22;
  --display:"Bitter", Georgia, serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--limestone);color:var(--slate);font:400 16px/1.55 var(--body)}
a{color:var(--baize)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
[hidden]{display:none !important}

/* ---------- header ---------- */
header.site{background:var(--slate);color:#F2F1EC}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.mark{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.mark .b{width:38px;height:38px;border-radius:8px;background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;font:800 20px/1 var(--display)}
.mark .name{font:800 21px/1 var(--display);letter-spacing:-.01em}
.mark .name em{font-style:italic;font-weight:700}
.mark small{display:block;font:500 13px/1.3 var(--body);color:#B9BEC1;margin-top:3px}
.toplink{color:#fff;text-decoration:none;font-weight:600;font-size:15px;border:1px solid #545B60;padding:9px 14px;border-radius:6px;white-space:nowrap}
.toplink:hover{border-color:#fff}

/* ---------- headings ---------- */
.intro{padding:40px 0 24px}
.eyebrow{font:600 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin:0 0 10px}
.intro h1{font:800 clamp(34px,6vw,56px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 12px}
.intro h1 em{font-style:italic;font-weight:700}
.intro p{margin:0;max-width:60ch;color:var(--slate-soft);font-size:17px}

/* ---------- event list ---------- */
.events{display:grid;gap:16px;padding-bottom:56px}
.ev{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;background:var(--chalk);border:1px solid var(--line);border-radius:10px;padding:16px;text-decoration:none;color:inherit}
.ev:hover{border-color:var(--baize)}
.date{background:var(--slate);color:#fff;border-radius:8px;text-align:center;padding:10px 6px}
.date .d{font:800 30px/1 var(--display)}
.date .m{font:600 13px/1.4 var(--body);text-transform:uppercase;letter-spacing:.08em;color:#D8D6CE}
.ev h2{font:700 22px/1.2 var(--display);margin:0 0 4px}
.ev .meta{color:var(--slate-soft);font-size:15px;margin:0}
.badge{display:inline-block;font:600 13px/1 var(--body);padding:7px 10px;border-radius:99px;white-space:nowrap}
.badge.on{background:#E3EEE8;color:var(--baize)}
.badge.few{background:var(--brass-soft);color:#7A5512}
.badge.out{background:#ECEAE3;color:#77756E}
@media (max-width:620px){
  .ev{grid-template-columns:72px 1fr}
  .ev .badge{grid-column:2;justify-self:start}
  .date .d{font-size:24px}
}

/* ---------- panels ---------- */
.card{background:var(--chalk);border:1px solid var(--line);border-radius:10px;padding:24px}
.grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start;padding-bottom:56px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.sticky{position:sticky;top:20px}
@media (max-width:860px){.sticky{position:static}}
.hero-img{border-radius:10px;overflow:hidden;margin-bottom:20px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;width:100%}
.facts{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.facts li{display:flex;gap:10px}
.facts strong{min-width:84px;font-weight:600}
.desc{white-space:pre-line;color:var(--slate)}
.section-h{font:700 20px/1.2 var(--display);margin:0 0 12px}

/* ---------- ticket picker ---------- */
.tt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.tt:last-child{border-bottom:0}
.tt .n{font-weight:600}
.tt .p{color:var(--slate-soft);font-size:15px}
.tt .tag{display:inline-block;margin-left:6px;font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--brass);color:#fff;padding:4px 6px;border-radius:4px;vertical-align:2px}
.tt.locked .n,.tt.locked .p{opacity:.55}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--slate);font-size:20px;cursor:pointer}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty output{min-width:22px;text-align:center;font:700 18px/1 var(--display)}

/* ---------- forms ---------- */
form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
label .opt{font-weight:400;color:var(--slate-soft)}
input{width:100%;font:400 16px/1.4 var(--body);color:var(--slate);padding:11px 12px;border:1px solid #BDBBB3;border-radius:7px;background:#fff}
input:focus{outline:3px solid var(--brass);outline-offset:0;border-color:var(--brass)}
.member{background:var(--muted-bg);border-radius:8px;padding:16px;margin:18px 0}
.member h3{font:700 17px/1.3 var(--display);margin:0 0 4px}
.member p{margin:0 0 12px;font-size:14px;color:var(--slate-soft)}
.member .row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
@media (max-width:560px){.member .row{grid-template-columns:1fr}}
.member .ok{color:var(--baize);font-weight:600;margin:0}
.btn{border:0;border-radius:8px;background:var(--baize);color:#fff;font:700 16px/1 var(--display);padding:13px 16px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:hover:not(:disabled){background:var(--baize-dark)}
.btn:disabled{background:#8FA79C;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--slate);border:1px solid var(--line)}
.btn.big{width:100%;font-size:18px;padding:17px 16px}
.terms{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;background:var(--muted-bg);border-radius:7px;padding:12px}
.terms input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--baize)}
.terms label{font-weight:400;margin:0;font-size:14px}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.total span{color:var(--slate-soft)}
.total strong{font:800 26px/1 var(--display)}
.small{font-size:13px;color:var(--slate-soft);margin:0}
.err{color:var(--error);font-weight:600;font-size:14px;margin:0}
.err:empty{display:none}

/* ---------- notices ---------- */
.notice{background:var(--chalk);border:1px solid var(--line);border-radius:10px;padding:26px;margin-bottom:28px;max-width:680px}
.notice h2{font:700 26px/1.15 var(--display);margin:0 0 10px}
.notice p{margin:0 0 10px}
.notice p:last-child{margin-bottom:0}
.notice.ok{border-left:6px solid var(--baize)}
.notice.warn{border-left:6px solid var(--brass)}
.notice.bad{border-left:6px solid var(--error)}
.loading{color:var(--slate-soft);padding:30px 0;text-align:center}

/* ---------- my tickets ---------- */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding-bottom:56px}
.tk{background:var(--chalk);border:1px solid var(--line);border-radius:10px;padding:18px;text-align:center}
.tk .qr{display:flex;justify-content:center;margin:12px 0}
.tk .qr img,.tk .qr canvas{width:220px;height:220px;image-rendering:pixelated}
.tk h3{font:700 18px/1.2 var(--display);margin:0}
.tk p{margin:4px 0 0;font-size:14px;color:var(--slate-soft)}
.tk.used{opacity:.6}
.stamp{display:inline-block;margin-top:10px;font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:6px;background:#ECEAE3;color:#5A5852}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:26px 0 40px;font-size:14px;color:var(--slate-soft)}
footer.site p{margin:0 0 6px}
footer.site a{color:var(--slate-soft)}