@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=VT323&display=swap');

html, body { overscroll-behavior-y: none; }

/* ---------- A11y helpers ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:root {
  --theTicketWatermark: "NO FUTURE";
  --ticketInkColor: #000000;
}

/* Strong, consistent focus ring */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

#theContent { background-image:url(/permanent_images/cork_5_col.gif); }

#vignettex { display: none; }

#vignette {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  box-shadow: 0 0 min(10vw, 10vh) min(10vw, 10vh) rgba(0,0,0,0.5) inset;
  z-index:1008; pointer-events:none;
}

#gigs-container {
  display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh;
}

/* Messages */
#gigs-message-first, #gigs, #gigs-message-last { text-align:center; }
#gigs-message-first { margin-top:200px; order:-1; transform: rotate(-1deg); }
#gigs { order:0; }
#gigs-message-last { order:1; margin-top:20px; margin-bottom:100px; transform: rotate(1deg); }

#gigs-message-first::before, #gigs-message-last::before {
  content:""; position:absolute; top:40px; right:20px; bottom:20px; left:20px;
  box-shadow:0 0 40px rgba(0,0,0,0.7); z-index:-1; border-radius:inherit;
}

.gigs-message {
  font-family:"1913_Typewriter","Special Elite",courier !important; font-variant-ligatures:none;  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  color:#000; text-align:center; font-size:1rem; line-height:1.5rem;
  width:80vw; max-width:600px; margin-top:-1px; margin-bottom:-1px;
  background-color:#f5f5f5; padding:20px; z-index:calc(var(--vignetteX) + 1);
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 30px, rgba(0, 90, 255, 0.2) 30px, rgba(0, 90, 255, 0.2) 32px);
  background-size:100% auto;
}

.gigs-message u{
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: auto;
  text-decoration-style: dashed;
}

.top-paper { padding-top:50px; }
.bottom-paper { padding-bottom:50px; }

.year-filter { margin-top:20px; }

a.gig-message-button, .gigs-message a, .year-filter a {
  color:inherit; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px;
}

.past { width:60vw; max-width:500px; }
.future { width:70vw; max-width:600px; }

.ticket-ink { color:var(--ticketInkColor); opacity:var(--ticket-ink); }

.do-border { position:absolute; background-color:var(--ticket-fg-color); left:0; }
.do-border-top { top:0; width:100%; }
.do-border-left { top:0; height:100%; }
.do-border-bottom { bottom:0; width:100%; }

.misprint { position:absolute; width:100%; height:1px; background-color:var(--ticket-bg-color); }

.gig-shadow-past, .gig-shadow-future {
  position:absolute; left:20px; top:0; width:calc(100% - 60px); height:100%; z-index:0; box-shadow:0 0 20px rgba(0,0,0,0.7);
}

#gigs {
  display:flex; width:100vw; flex-direction:column; gap:2rem; padding:0vh 4vw 4vh; align-items:center;
  overflow-x:hidden; padding-top:100px;
}

.gig-ticket {
  display:flex; font-family:'VT323', monospace; font-weight:800; position:relative; align-items:right;
}

.gig-wrapper { background-color:transparent; position:relative; width:100%; height:100%; display:flex; }

.do-scallop { mask: radial-gradient(20px at 20px 20px, #0000 98%, #000) -20px -20px; }

.gig-ticket-left {
  flex:1; position:relative; padding:1rem; z-index:1; background:var(--ticket-bg-color); margin-right:-1px;
}

.gig-ticket-left-perforation,
.gig-ticket-right-perforation {
  opacity:0.5; position:absolute; top:0; height:100%; width:1px; border-left:1px dashed var(--ticket-bg-color);
}

.gig-ticket-left-perforation { left:-1px; }
.gig-ticket-right-perforation { right:0; z-index:10; }

.torn-left::after { /* populated via colour variants */ }

.torn-left-ff4e02::after  { background:url('/xch/images/xch_tickets/rip_right_ff4e02.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-e8ba00::after  { background:url('/xch/images/xch_tickets/rip_right_e8ba00.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-9d369d::after  { background:url('/xch/images/xch_tickets/rip_right_9d369d.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-1f754e::after  { background:url('/xch/images/xch_tickets/rip_right_1f754e.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-ca485e::after  { background:url('/xch/images/xch_tickets/rip_right_ca485e.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-1cbbce::after  { background:url('/xch/images/xch_tickets/rip_right_1cbbce.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }

.torn-left-fcf8ec::after  { background:url('/xch/images/xch_tickets/rip_right_fcf8ec.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-fefaee::after  { background:url('/xch/images/xch_tickets/rip_right_fefaee.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }
.torn-left-fefae6::after  { background:url('/xch/images/xch_tickets/rip_right_fefae6.svg') repeat-y right top; content:""; position:absolute; top:0; right:-9px; width:11px; height:100%; background-size:cover; background-height:var(--tear-height); z-index:20; pointer-events:none; }

.offset_printing { position:absolute; right:0; top:0; width:5px; height:100%; background-color:var(--ticket-fg-color); }

.gig-ticket-content { text-align:center; position:relative; z-index:2; }

.gig-ticket-right {
  display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; position:relative; z-index:2; overflow:hidden;
}

.torn-left { background-color:var(--ticket-fg-color); width:0; height:100%; position:absolute; left:0; top:0; }
.torn-right { background-color:transparent; width:30px; height:100%; position:absolute; left:20px; top:0; }

.perforation { position:absolute; top:0; right:1px; width:6px; height:100%; border-right:6px dotted #333; opacity:.8; z-index:10000; }
.perforation-1 { right:1px; border-right:6px dotted #333; }
.perforation-2 { right:3px; border-right:4px dotted #333; }
.perforation-3 { right:4px; border-right:3px dashed #333; }

.gig-ticket.future .gig-ticket-right {
  width: var(--ticket-right-width);
  background: var(--ticket-fg-color);
  color: var(--ticket-bg-color);
  font-family:'helvetica neue', helvetica, arial, sans-serif;
}

.gig-ticket.past .gig-ticket-right { width:40px; }

.gig-ticket-stub-inside { background:var(--ticket-fg-color); width:100%; height:80%; text-align:center; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; z-index:0; }

.gig-date {
  font-size:1.2rem; font-weight:bold; margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:0; border:0; border-radius:10px; padding:5px;
}

.gig_to_date {
  margin-top:-0.5rem;
}

.date_mdash {
  display: block;
  margin-top:-0.5rem;
}

.gig-city { font-size:2rem; text-transform:uppercase; }
.gig-venue { font-size:1rem; margin-bottom:.25rem; text-transform:uppercase; }

.pretenders-logo { background-color:var(--ticket-bg-color); }
.ticket-logo { width:33.3333%; image-rendering:pixelated; image-rendering:crisp-edges; mix-blend-mode:multiply; }

.gig-links { margin-top:1rem; font-size:.85rem; }

/* Button (not div) for toggle, keep your look */
.setlist-toggle, .ticket-link {
  display:inline-block; margin-top:1rem; cursor:pointer; font-size:1.5rem; text-decoration:none; padding:0;
  color:var(--ticket-bg-color); background-color:var(--ticketInkColor); text-transform:uppercase; line-height:.9rem;
  border:none; font-family:'VT323', monospace; 
}

.setlist-content {
  margin-top:0.5rem; text-align:center; font-size:1rem; padding-top:0.5rem; max-width:90%; margin-left:auto; margin-right:auto; line-height:1.2;
}

.setlist-content[hidden] { display:none !important; }

.setlist-list { list-style: none; padding: 0; margin: .5rem auto 0; display:inline-block; text-align:center; }
.setlist-list li { white-space:normal; margin:.1rem 0; display:inline; }

.setlist-content a { color:var(--ticketInkColor); margin:0 3px; }
.setlist-content a:hover { color:var(--ticket-bg-color); background-color:var(--ticketInkColor); }

.next-gig-label {
  position:absolute; top:30px; left:0; width:100px; border:2px solid #f00; padding:10px; transform: rotate(-40deg);
  color:#f00; font-size:1rem; text-transform:uppercase; text-align:center; font-family:'helvetica neue', helvetica, arial, sans-serif;
  transform-origin:center center; z-index:10000;
      mix-blend-mode: multiply;
      opacity: .3;
      pointer-events: none;
  
}

.gig-ticket.past { filter: grayscale(var(--ticket-grayscale)) brightness(var(--ticket-brightness)); }

/* Tears / holes */
.tear_bottom { position:relative; height:20px; width:100%; background:url(/xch/images/xch_backgrounds/rip.svg) bottom; background-size:100%; }
.tear_top    { position:relative; height:20px; width:100%; background:url(/xch/images/xch_backgrounds/rip_top.svg) top; background-size:100%; }
.holes_top   { position:relative; height:40px; width:100%; background:url(/xch/images/xch_backgrounds/holes_top.png) top; background-size:100%; }

/* Keep the swipe visibly ON for the selected link */
.years-nav .highlight-swipe-link.is-on::before { opacity:1 !important; width:100% !important; transition:none !important; }
.years-nav .highlight-swipe-link.is-on::after  { opacity:1 !important; transition:none !important; }

@media (max-width: 768px) {
  #vignette { margin-top:-100px; box-shadow:0 0 10vw 10vw rgba(0,0,0,0.7) inset; display:none; }

  .holes_top { height:20px; }

  .ticket-logo { width:80%; }
  .gig-date { font-size:1rem; }
  .gig-city { font-size:1.2rem; margin-top:.2rem; }
  .gig-venue { font-size:1.1rem; margin-top:0; }

  .setlist-toggle, .ticket-link { margin-top:.5rem; font-size:1rem; }
  .setlist-content { margin-top:0; font-size:.8rem; max-width:100%; padding-top:.1rem; }

  .gig-ticket.future .gig-ticket-right { width: var(--ticket-right-width-mobile); }
  .gig-ticket.past .gig-ticket-right   { width: 20px; }
  .gig-ticket-stub-inside { font-size:.7rem; }

  .gigs-message { padding:10px; padding-top:30px; font-size:.8rem; line-height:1.1rem; }
  #gigs-message-first { margin-top:70px; }
}