:root { color-scheme: light; --paper: #fff; --ink: #000; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.crop { display: block; position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.crop img { position: absolute; max-width: none; width: calc(1343 / var(--w) * 100%); height: auto; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }
.invitation-source img { width: calc(1342 / var(--w) * 100%); }
a { color: inherit; touch-action: manipulation; }
a:focus-visible { outline: 4px solid var(--ink); outline-offset: 8px; }
.hero { max-width: 1500px; margin: auto; padding: 64px 5vw 72px; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.brand { width: 100%; }
.event { display: grid; gap: 22px; padding-left: 28px; border-left: 2px solid var(--ink); }
.date { width: 87%; margin: auto; }
.venue { width: 100%; }
.tickets { display: block; background: var(--ink); padding: 17px; transition: transform 160ms ease; }
.tickets .crop { width: 51%; margin: auto; filter: invert(1); }
.tickets:hover { transform: translateY(-3px); }
.lineup { background: var(--ink); padding: 65px 5vw; }
.lineup-inner { max-width: 1172px; margin: auto; display: grid; gap: 9px; }
.lineup .crop { filter: invert(1); }
.secondary { margin-top: 24px; }
.genres { margin-top: 24px; }
.stallholders { max-width: 1172px; margin: auto; padding: 76px 5vw; }
.stallholders h2 { margin: 0 0 32px; }
.intro { margin-bottom: 36px; }
.stall-details { display: grid; grid-template-columns: 2.3fr 1fr; gap: 50px; align-items: center; }
.booking { border: 2px solid transparent; }
.booking:hover { border-color: var(--ink); }
footer { border-top: 2px solid var(--ink); padding: 30px 24px; }
footer a { max-width: 460px; margin: auto; }
@media (min-width: 1600px) { .hero { gap: 80px; padding-left: 80px; padding-right: 80px; } }
@media (max-width: 700px) {
  .hero { padding: 28px 20px 36px; grid-template-columns: 1fr; gap: 30px; }
  .event { border-left: 0; border-top: 2px solid var(--ink); padding: 24px 0 0; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
  .date { width: 100%; grid-row: span 2; }
  .tickets { padding: 12px; }
  .tickets .crop { width: 65%; }
  .lineup { padding: 35px 15px; }
  .lineup-inner { gap: 12px; }
  .secondary, .genres { margin-top: 12px; }
  .stallholders { padding: 36px 20px; }
  .stallholders h2 { margin-bottom: 24px; }
  .intro { margin-bottom: 24px; }
  .stall-details { gap: 20px; grid-template-columns: 1.8fr 1fr; }
  footer a { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tickets { transition: none; } }