@font-face{font-family:Grato;src:url('./assets/grato-medium.otf') format('opentype');font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:light;--paper:#f4f1e8;--ink:#171713;--red:#e62c19;--space:clamp(24px,4vw,64px);--type:clamp(19px,2.15vw,32px)}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper) url('./assets/paper.png') repeat;background-size:900px auto;font-family:Grato,Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}
.flyer{position:relative;min-height:820px;height:calc(100svh - 76px);max-height:1250px;padding:var(--space);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:24px;isolation:isolate}
.top,.bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;position:relative;z-index:2}
h1,.date,.lineup{font:inherit;font-size:var(--type);line-height:.98;letter-spacing:-.045em;margin:0}
h1{transform:rotate(-.45deg)}
.date{text-align:right;white-space:nowrap;transform:rotate(.35deg)}
.art{position:absolute;width:min(55vw,calc(100svh - 300px),850px);min-width:430px;aspect-ratio:1;overflow:hidden;left:50%;top:49%;transform:translate(-50%,-50%);z-index:1}
.art img{position:absolute;width:110.43307087%;max-width:none;height:auto;left:-5.11811024%;top:-16.14173228%;display:block}
.bottom{grid-row:3;align-items:flex-end}
.logos{display:flex;gap:24px;align-items:center;transform:rotate(-.4deg)}
.logos img{display:block;width:clamp(90px,10vw,155px);height:auto}
.logos img+img{width:clamp(54px,6vw,90px)}
.lineup{padding:0;list-style:none;text-align:right;transform:rotate(.25deg)}
.lineup li{white-space:nowrap}
.actions{min-height:76px;margin:0 var(--space);padding:22px 0 max(22px,env(safe-area-inset-bottom));border-top:0;display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:14px;line-height:1.2;letter-spacing:-.025em}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
a:hover{text-decoration:underline;color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:7px}
[hidden]{display:none!important}
.event-link{color:var(--red);font-size:20px;padding:10px 18px;border:1px solid currentColor}
.event-link:hover{background:var(--red);color:var(--paper);text-decoration:none}
.service{margin:0 var(--space);padding:0 0 24px;display:flex;flex-wrap:wrap;gap:20px;font-size:12px;line-height:1.4}
#venue-address{margin-left:auto}
::selection{background:var(--red);color:var(--paper)}
@media(min-width:1500px){.art{width:min(52vw,calc(100svh - 230px),950px)}.flyer{min-height:820px}}
@media(max-width:900px){.flyer{height:auto;min-height:0;max-height:none;gap:42px;padding-top:max(36px,env(safe-area-inset-top));padding-bottom:36px}.art{position:relative;grid-row:2;width:100%;min-width:0;left:auto;top:auto;transform:none;align-self:center}.top{grid-row:1}.bottom{grid-row:3}.logos{gap:16px}.logos img{width:94px}.logos img+img{width:55px}.actions{font-size:13px}.lineup{font-size:clamp(16px,2.7vw,24px)}h1,.date{font-size:clamp(18px,2.7vw,24px)}}
@media(max-width:480px){:root{--space:20px}.flyer{gap:36px}.top{gap:12px}h1,.date{font-size:clamp(15px,4.2vw,20px)}.bottom{gap:12px;align-items:flex-end}.lineup{font-size:clamp(13px,3.6vw,17px)}.logos{gap:10px}.logos img{width:65px}.logos img+img{width:38px}.actions{gap:18px;font-size:12px}#venue-address{margin-left:0;width:100%}}
@media(prefers-reduced-motion:no-preference){a{transition:color .15s ease}.art{animation:appear .6s ease-out both}@keyframes appear{from{opacity:0}to{opacity:1}}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.filter-defs{position:absolute;overflow:hidden}
.flyer{--print-scale:1}
@media(min-width:901px){.flyer{height:auto;min-height:calc(100svh - 150px);max-height:none}.art{position:relative;grid-row:2;left:auto;top:auto;transform:none;justify-self:center;align-self:center;width:min(55vw,60svh,720px);min-width:0}.top{grid-row:1}}
.top h1,.date,.lineup,.logos{transform:none}
.print-fragment{display:block;position:relative;overflow:hidden;width:calc(var(--cw) * 1px * var(--print-scale));aspect-ratio:var(--cw) / var(--ch)}
.print-fragment img{display:block;position:absolute!important;width:calc(1122 / var(--cw) * 100%)!important;height:auto!important;max-width:none;left:calc(-1 * var(--cx) / var(--cw) * 100%);top:calc(-1 * var(--cy) / var(--ch) * 100%)}
.print-header{--cx:58;--cy:55;--cw:322;--ch:70}
.print-date{--cx:863;--cy:55;--cw:201;--ch:70}
.print-lineup{--cx:698;--cy:1188;--cw:368;--ch:154}
.print-logos{--cx:56;--cy:1250;--cw:261;--ch:98}
.actions a,.service a,.service span{filter:url(#ink-print)}
.event-link{transform:rotate(-.6deg);border-width:2px}
@media(max-width:900px){.flyer{--print-scale:.8}}
@media(max-width:600px){.flyer{--print-scale:.65}}
@media(max-width:480px){.flyer{--print-scale:.5}.bottom{gap:10px}.logos{display:block}}
@media(max-width:350px){.flyer{--print-scale:.44}}
.flyer{grid-template-rows:auto auto auto auto}
.ticket-cta{grid-row:3;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.ticket-cta .event-link{display:inline-block;filter:url(#ink-print)}
.ticket-cta #ticket-status{font-size:12px;text-align:center}
.bottom{grid-row:4}
.actions{justify-content:space-between}
#venue-address{margin-left:0}
#booking-phone{white-space:nowrap}

.actions a{filter:url(#ink-contact)}
#venue-address{transform:rotate(-.35deg)}
#booking-phone{transform:rotate(.3deg)}

/* Use Safari's smallest viewport with browser controls expanded. Keep the
   artwork square and leave scrollable room below the final contact link. */
@media(max-width:600px){
  html{scroll-padding-bottom:120px}
  .flyer{gap:18px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:16px;padding-left:max(var(--space),env(safe-area-inset-left));padding-right:max(var(--space),env(safe-area-inset-right))}
  .art{width:min(100%,max(160px,calc(100svh - 400px)));justify-self:center}
  .ticket-cta .event-link{min-height:48px;display:flex;align-items:center;justify-content:center}
  .actions{min-height:0;align-items:flex-start;gap:12px;padding-top:16px;padding-bottom:max(104px,calc(env(safe-area-inset-bottom) + 72px))}
  .actions a{line-height:1.4}
  #venue-address{width:100%}
  #booking-phone{display:inline-flex;align-items:center;min-height:44px}
}