/* Ritual Union 2027. Navy ground, Bungee display (stand-in for the wordmark face), condensed Archivo for line-ups, Barlow for body. */
:root {
  --navy: #222433;
  --navy-deep: #1A1B27;
  --panel: #2B2D40;
  --line: #3A3C52;
  --line-soft: #4A4C63;
  --paper: #F0EAEC;
  --soft: #D9D2D4;
  --muted: #C9C3C6;
  --orange: #F5A04F;
  --pink: #F05A6B;
  --blue: #3480FF;
  --cream: #F4DCAA;
  --yellow: #FDB701;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --stamp: 'Bungee', 'Arial Black', sans-serif;
  --cond: 'Archivo', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --wrap: 1360px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--navy); color: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--paper); }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (min-width: 760px) { .wrap { padding-left: 40px; padding-right: 40px; } }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--orange); color: var(--navy); padding: 10px 16px; font-weight: 700; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.95; margin: 0; }
.h1 { font-size: clamp(48px, 7vw, 104px); }
.h2 { font-size: clamp(32px, 4.2vw, 56px); }
.h3 { font-size: clamp(24px, 2.6vw, 36px); }
.eyebrow { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.lede { margin: 16px 0 0; font-size: 19px; color: var(--soft); max-width: 62ch; }
.cond { font-family: var(--cond); font-stretch: 62%; font-weight: 700; text-transform: uppercase; line-height: 1.05; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 2px solid var(--paper); color: var(--paper); text-decoration: none; font-family: var(--display); font-size: 17px; text-transform: uppercase; background: transparent; cursor: pointer; }
.btn:hover { color: var(--orange); border-color: var(--orange); }
.btn.solid { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.btn.solid:hover { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.btn.big { min-height: 60px; padding: 0 32px; font-size: 19px; }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 14px; font-family: var(--body); font-weight: 700; letter-spacing: 0.06em; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* top bar + header */
/* Ticket bar and header stay pinned to the top while the page scrolls. */
.top { position: sticky; top: 0; z-index: 30; }
html { scroll-padding-top: 130px; }
.topbar { display: block; background: var(--orange); color: var(--navy); text-align: center; padding: 10px 16px; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.topbar:hover { color: var(--navy); background: var(--cream); }
.site-head { border-bottom: 1px solid var(--line); background: var(--navy); position: relative; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: block; line-height: 0; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { color: var(--orange); }
.nav .btn { margin-left: 4px; }
.menu-btn { display: none; width: 46px; height: 46px; border: 2px solid var(--paper); background: transparent; color: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); border-bottom: 2px solid var(--orange); padding: 8px 20px 20px; }
  .nav.open { display: flex; max-height: calc(100dvh - 120px); overflow-y: auto; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--cond); font-stretch: 62%; font-weight: 700; font-size: 30px; letter-spacing: 0; }
  .nav .btn { margin: 16px 0 0; border-bottom: 2px solid var(--orange); font-family: var(--display); font-size: 17px; }
  .logo img { height: 28px; }
}

/* artwork panels: the artwork shows round the edge of a navy panel */
.art { padding: 44px max(20px, 3vw); }
/* One painting behind the whole page, held still, so the textured sections show parts of the same picture and
   join up with no seam. Everything that isn't a textured section has a solid navy background over it. A fixed
   layer (not background-attachment: fixed) so it also works on iPhones. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--navy) url(../images/ru-bg.jpg) center / cover; }
main > :not(.art), .site-head, .site-foot { background: var(--navy); }
.art > .panel { max-width: 1280px; margin: 0 auto; background: var(--navy); padding: clamp(28px, 4.4vw, 64px); }
@media (max-width: 600px) { .art { padding: 14px; } }

/* misprint wordmark: pink and blue plates slip out of register now and then, and on hover */
.wm { position: relative; display: block; line-height: 0; --sx: -0.05em; --sy: 0.03em; }
.wm img { position: relative; z-index: 1; width: 100%; height: auto; }
.wm .ink { position: absolute; inset: 0; opacity: 0; pointer-events: none; -webkit-mask: url(../images/wordmark.png) left center / contain no-repeat; mask: url(../images/wordmark.png) left center / contain no-repeat; transition: transform 0.12s steps(2), opacity 0.12s; }
.wm .ink.a { background: var(--pink); }
.wm .ink.b { background: var(--blue); }
.wm.slip .ink, .wm:hover .ink { opacity: 1; }
.wm.slip .ink.a, .wm:hover .ink.a { transform: translate(var(--sx), var(--sy)); }
.wm.slip .ink.b, .wm:hover .ink.b { transform: translate(calc(var(--sx) * -0.8), calc(var(--sy) * -1.2)); }
@media (prefers-reduced-motion: reduce) { .wm .ink { transition: none; } .billing a { transition: none; } }

/* hero */
.hero .tag { margin: 0 0 18px; font-size: clamp(15px, 1.6vw, 22px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.hero .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.hero h1 { margin: 0; flex: 0 1 600px; min-width: 0; }
.hero .helmets { flex: 0 1 460px; width: 460px; max-width: 100%; height: auto; }
.hero .date { margin: 28px 0 0; font-family: var(--display); font-size: clamp(18px, 2.6vw, 38px); text-transform: uppercase; line-height: 1.15; }
.hero .btns { margin-top: 32px; }
.hero .venues { margin: 28px 0 0; font-size: 17px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }

/* poster-style line-up */
.lineup-block { text-align: center; }
.lineup-block .eyebrow { margin: 10px 0 34px; }
/* Line-up names in 3D: white letters on a stack of the site's colours (pink, orange, blue), stepped down and
   right like a cheap poster print. --d is the step; it's registered so it can animate. The rows pop out of the
   page when the line-up scrolls into view, and a name pushes further out on hover. */
@property --d { syntax: '<length>'; inherits: true; initial-value: 0px; }
.billing a { text-decoration: none; white-space: nowrap; color: var(--paper); display: inline-block; --d: .045em;
  text-shadow: var(--d) var(--d) 0 var(--pink), calc(var(--d) * 2) calc(var(--d) * 2) 0 var(--orange), calc(var(--d) * 3) calc(var(--d) * 3) 0 var(--blue);
  transform: translate(calc(var(--d) * -1), calc(var(--d) * -1));
  transition: --d .45s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
.billing .t3 a { --d: .034em; }
.billing a:hover, .billing a:focus-visible { --d: .075em; color: var(--paper); }
.billing.flat a { --d: 0px; }
.billing > div:nth-child(2) a { transition-delay: .12s; } .billing > div:nth-child(3) a { transition-delay: .24s; }
.billing > div:nth-child(4) a { transition-delay: .32s; } .billing > div:nth-child(n+5) a { transition-delay: .4s; }
.billing a:hover { transition-delay: 0s; }
.billing .t1 { font-size: clamp(52px, 9vw, 132px); line-height: 1; }
.billing .t2 { font-size: clamp(30px, 5vw, 72px); line-height: 1.05; margin: 10px 0 18px; text-wrap: balance; }
.billing .t3 { font-size: clamp(22px, 3.2vw, 46px); line-height: 1.12; text-wrap: balance; }
.lineup-block .btns { justify-content: center; margin-top: 36px; }

/* sections */
.section { padding: clamp(56px, 7vw, 88px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.split { display: flex; flex-wrap: wrap; gap: 40px; }
.split > :first-child { flex: 1 1 300px; }
.split > :last-child { flex: 2 1 560px; min-width: 0; }

/* rooms */
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 2px solid var(--paper); margin-top: 32px; }
.room { padding: 26px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; border-right: 2px solid var(--paper); }
.room:last-child { border-right: 0; }
@media (max-width: 1050px) { .room { border-right: 0; border-bottom: 2px solid var(--paper); } .room:last-child { border-bottom: 0; } }
.room .cond { font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.room span:last-child { color: var(--soft); }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.dot.e { background: var(--orange); } .dot.r { background: var(--blue); } .dot.s { background: var(--pink); }

/* gallery: a compact strip of last year's photos, not a feature */
#gallery.section { padding: clamp(32px, 4vw, 48px) 0; }
#gallery .h2 { font-size: clamp(22px, 2.4vw, 30px); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; max-width: 720px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* alumni */
.alumni { font-size: clamp(30px, 4vw, 52px); line-height: 1.1; margin: 18px 0 0; text-wrap: balance; }
.alumni span { white-space: nowrap; }

/* sign-up */
.signup .panel { max-width: 1100px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; padding: clamp(24px, 3.4vw, 48px); }
.signup .ru { flex: 0 0 200px; width: 200px; height: auto; }
.signup .copy { flex: 1 1 260px; }
.signup .copy p { margin: 10px 0 0; color: var(--soft); }
.su-form { flex: 1 1 380px; display: grid; gap: 12px; }
.su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .su-row { grid-template-columns: 1fr; } }
.su-field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.su-field input { width: 100%; min-height: 50px; padding: 0 14px; border: 2px solid var(--paper); background: transparent; color: var(--paper); font: inherit; }
.su-field input[aria-invalid="true"] { border-color: var(--pink); }
.su-err { margin: 6px 0 0; font-size: 14px; color: var(--pink); min-height: 0; }
.su-err:empty { display: none; }
.su-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.su-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--soft); line-height: 1.45; }
.su-consent input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--orange); }
.su-msg { margin: 0; font-weight: 600; }
.su-msg:empty { display: none; }
.su-form.done .su-field, .su-form.done .su-consent-wrap, .su-form.done button[type="submit"] { display: none; }

/* line-up page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 2px solid var(--line-soft); background: transparent; color: var(--paper); font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--navy); }
.tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px 20px; margin-top: 32px; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
.tile { display: flex; flex-direction: column; gap: 10px; }
.tile[hidden] { display: none; }
.tile .shot { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel); }
.tile .noshot { aspect-ratio: 4 / 5; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: #9C9AAE; font-size: 13px; text-align: center; padding: 12px; }
.tile .noshot img { width: 70%; opacity: 0.35; }
.tile h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.tile .room-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.tile .room-tag .dot { width: 10px; height: 10px; }

/* info page */
.map { position: relative; height: 440px; background: var(--navy-deep); border: 1px solid var(--line); overflow: hidden; }
.street { position: absolute; left: 0; right: 0; height: 44px; background: var(--line); display: flex; align-items: center; padding-left: 20px; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.pin { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); }
.pin b { padding: 4px 10px; color: var(--navy); font-size: 13px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.pin i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--navy); }
.pin.e b, .pin.e i { background: var(--orange); } .pin.r b, .pin.r i { background: var(--blue); } .pin.s b, .pin.s i { background: var(--pink); }
.map small { position: absolute; right: 14px; bottom: 12px; color: var(--muted); font-size: 13px; }
.venue-list { border-top: 1px solid var(--line-soft); }
.venue-list > div { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--display); }
.num.e { background: var(--orange); } .num.r { background: var(--blue); } .num.s { background: var(--pink); }
.venue-list h3 { margin: 0; font-size: 32px; line-height: 1; }
.venue-list p { margin: 6px 0 0; color: var(--soft); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.facts > div { border: 2px solid var(--line-soft); padding: 24px; }
.facts p { margin: 10px 0 0; }
details { border-top: 1px solid var(--line-soft); padding: 20px 0; }
details:last-child { border-bottom: 1px solid var(--line-soft); }
summary { cursor: pointer; font-size: 20px; font-weight: 600; }
details p { margin: 12px 0 0; color: var(--soft); }

/* past line-ups */
.posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; margin-top: 32px; }
@media (max-width: 520px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
.poster { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.poster .frame { position: relative; aspect-ratio: 1 / 1.3; background: var(--navy-deep); border: 1px solid var(--line); }
.poster .frame img { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.poster .frame.empty { background: var(--panel); display: flex; align-items: center; justify-content: center; color: #9C9AAE; font-size: 14px; }
.poster .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.poster .cap b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); }
.poster .cap span { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: right; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.timeline li { display: flex; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.timeline b { flex: 0 0 84px; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--orange); }
.strip { height: 56px; background: url(../images/ru-bg.jpg) center / cover; }

/* footer */
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; padding-top: 44px; padding-bottom: 44px; }
.site-foot .logo img { height: 52px; }
.site-foot p { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.socials { display: flex; gap: 12px; }
.socials a { width: 50px; height: 50px; border: 2px solid var(--paper); display: flex; align-items: center; justify-content: center; }
.socials a:hover { border-color: var(--orange); }
.socials svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.socials a:hover svg { stroke: var(--orange); }

/* phone tweaks */
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .signup .ru { display: none; }
}

/* Hero logo: the misprint offsets are in em, so tie the font-size to the logo's width (logo height is about 1.7em). */
.hero h1 { container-type: inline-size; }
.hero .wm { font-size: 18cqw; }

/* Helmets with moving eyes (ported from the original build). Each visor holds an enlarged copy of the
   picture that slides about behind a soft-edged mask, so the rim never moves. Lids are cut from the photo. */
.helmets { position: relative; display: block; --ex: 0%; --ey: 0%; }
.helmets img { display: block; width: 100%; height: auto; }
.hero .helmets { flex: 0 1 460px; width: 460px; max-width: 100%; }
.eye { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --wl: 21; --ww: 21; --wt: 33.5; --wu: 8.8; --wd: 7.2; }
.eye.l { -webkit-mask: radial-gradient(ellipse 12.2% 15.8% at 32.75% 42.7%, #000 72%, transparent 98%); mask: radial-gradient(ellipse 12.2% 15.8% at 32.75% 42.7%, #000 72%, transparent 98%); }
.eye.r { --wl: 58; -webkit-mask: radial-gradient(ellipse 12.2% 15.8% at 67.25% 42.7%, #000 72%, transparent 98%); mask: radial-gradient(ellipse 12.2% 15.8% at 67.25% 42.7%, #000 72%, transparent 98%); }
.eye i { position: absolute; inset: 0; background: var(--src) 0 0 / 100% 100%; transform: translate(calc(var(--ex) + var(--fx, 0%)), calc(var(--ey) + var(--fy, 0%))) scale(1.15); transition: transform .9s cubic-bezier(.45, 0, .25, 1); }
.eye.l i, .eye.l .lids { transform-origin: 32.75% 42.7%; }
.eye.r i, .eye.r .lids { transform-origin: 67.25% 42.7%; }
.lids { position: absolute; inset: 0; transform: translate(calc(var(--ex) + var(--fx, 0%)), calc(var(--ey) + var(--fy, 0%))) scale(1.15); transition: transform .9s cubic-bezier(.45, 0, .25, 1); }
.helmets.micro .eye i, .helmets.micro .lids { transition-duration: .07s; transition-timing-function: linear; }
.helmets.quick .eye i, .helmets.quick .lids { transition-duration: .13s; transition-timing-function: ease-in-out; }
.helmets.wide .eye i, .helmets.wide .lids { transform: translate(var(--ex), var(--ey)) scale(1.4); transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.lw { position: absolute; left: calc(var(--wl) * 1%); width: calc(var(--ww) * 1%); overflow: hidden; opacity: 0; transition: opacity 0s .13s; }
.lw.up { top: calc(var(--wt) * 1%); height: calc(var(--wu) * 1%); border-radius: 50% 50% 8% 8% / 90% 90% 10% 10%; }
.lw.lo { top: calc((var(--wt) + var(--wu)) * 1%); height: calc(var(--wd) * 1%); border-radius: 8% 8% 50% 50% / 10% 10% 90% 90%; }
.skin { position: absolute; display: block; background: var(--src) 0 0 / 100% 100%; left: calc(-100% * var(--wl) / var(--ww)); width: calc(100% * 100 / var(--ww)); transition: transform .12s cubic-bezier(.4, 0, .2, 1); }
.up .skin { top: calc(-100% * var(--wt) / var(--wu)); height: calc(100% * 100 / var(--wu)); }
.lo .skin { top: calc(-100% * (var(--wt) + var(--wu)) / var(--wd)); height: calc(100% * 100 / var(--wd)); }
.lash { position: absolute; left: 4%; right: 4%; top: -6px; height: 4px; border-radius: 50%; background: color-mix(in srgb, #1E54E0, #000 55%); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); transition: top .12s cubic-bezier(.4, 0, .2, 1); }
.helmets.blink .lw { opacity: 1; transition: opacity 0s; }
.helmets.blink .up .skin { transform: translateY(calc(var(--wu) * 1%)); transition-duration: .075s; }
.helmets.blink .lo .skin { transform: translateY(calc(var(--wd) * -1%)); transition-duration: .075s; }
.helmets.blink .lash { top: calc(100% - 3px); transition-duration: .075s; }
/* Red eyes (404 page always, and briefly when the sign-up email is wrong). Only the eyes change: both layers
   live inside the moving eye picture, so they follow the gaze, and the visor mask keeps them off the helmet.
   ::before is the iris, cut to its real shape from the artwork and printed in halftone: a white-hot pupil
   going out to red ink dots at the rim (helmets-irises-red.png, made from helmets-irises.png). ::after is the light it throws on the whites around it. Iris centres in the
   picture: 31.43% / 68.57% across, 40.69% down; radius 60px of 1400 x 779 = 4.29% x 7.7%. */
.eye i::before, .eye i::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
.eye.l i { --gx: 31.43%; } .eye.r i { --gx: 68.57%; }
.eye i::before { z-index: 2; background: url(../images/helmets-irises-red.png) 0 0 / 100% 100%; }
.eye i::after { z-index: 1; mix-blend-mode: hard-light;
  background: radial-gradient(ellipse 9.5% 15% at var(--gx) 40.69%, rgba(255, 40, 60, .85) 0, rgba(255, 40, 60, .5) 38%, rgba(255, 40, 60, .15) 70%, transparent 100%); }
.helmets.angry .eye i::before, .helmets.angry .eye i::after, .helmets.glow .eye i::before, .helmets.glow .eye i::after { opacity: 1; }
.helmets.glow .eye i::before { animation: irisburn 3.2s steps(1) infinite, irispulse 2.4s ease-in-out infinite; }
.helmets.glow .eye i::after { animation: irispulse 2.4s ease-in-out infinite; }
.helmets.glow .eye.r i::before, .helmets.glow .eye.r i::after { animation-delay: -1.1s, -1.1s; }
@keyframes irispulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.2); } }
/* A light that isn't quite right: an odd stutter now and then. */
@keyframes irisburn { 0%, 61%, 64%, 66%, 100% { opacity: 1; } 62% { opacity: .35; } 65% { opacity: .6; } }

/* Artist pages: one compact screen on desktop: photo beside the details, small player, a short row of suggestions */
.tile > a { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
a.tile { color: inherit; text-decoration: none; }
.tile a:hover h3, a.tile:hover h3 { color: var(--orange); }
.tile a:hover .shot, a.tile:hover .shot { filter: brightness(1.08); }
.artist.section { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); }
.artist .crumb { margin: 0 0 20px; font-weight: 700; font-size: 14px; }
.artist .crumb a { text-decoration: none; color: var(--soft); }
.artist .crumb a:hover { color: var(--orange); }
.a-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; }
.a-shot { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel); }
.a-shot.noshot { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.a-shot.noshot img { width: 70%; opacity: .35; }
.a-name { font-size: clamp(36px, 4.6vw, 64px); line-height: .95; margin: 0; overflow-wrap: anywhere; }
.a-when { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--soft); font-size: 14px; }
.a-when .room-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--paper); }
.a-when .room-tag:hover { color: var(--orange); }
.a-when .dot { width: 10px; height: 10px; }
.a-links { display: flex; gap: 8px; margin-top: 16px; }
.a-links a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-soft); color: var(--paper); }
.a-links a:hover { color: var(--orange); border-color: var(--orange); }
.a-links svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.a-bio { margin-top: 18px; max-width: 62ch; font-size: 16px; color: var(--soft); }
.a-bio p { margin: 0 0 10px; }
.artist .player { display: block; width: 100%; max-width: 560px; border: 0; margin: 20px 0 0; border-radius: 12px; }
.a-cta { margin: 20px 0 0; }
.a-cta .btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
.a-more-h { margin: clamp(36px, 4vw, 52px) 0 0; font-size: 20px; }
.a-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 680px; margin-top: 14px; }
.a-more .shot, .a-more .noshot { aspect-ratio: 1 / 1; }
.a-more .noshot img { width: 80%; }
.a-more h3 { font-size: 16px; }
.a-more .room-tag { font-size: 11px; }
.a-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.a-pager a { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); font-size: 17px; text-decoration: none; text-transform: uppercase; }
.a-pager a:last-child { text-align: right; }
.a-pager span { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--orange); }
@media (max-width: 760px) {
  .a-head { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .a-name { font-size: clamp(28px, 8vw, 40px); }
  .a-head .a-copy { display: contents; }
  .a-head .a-shot { grid-row: span 2; }
  .a-head .a-links, .a-head .a-bio, .a-head .player, .a-head .a-cta { grid-column: 1 / -1; }
  .a-when { flex-direction: column; gap: 4px; }
  .a-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .a-more h3 { font-size: 12px; }
  .a-more .room-tag { display: none; }
}

/* 404 page */
.lost-row { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); }
.lost .helmets { flex: 0 1 520px; width: 520px; max-width: 100%; }
.lost-copy { flex: 1 1 320px; }
.lost-copy p { font-size: 20px; max-width: 34ch; margin: 14px 0 26px; }
@media (max-width: 800px) { .lost-row { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .eye i, .lids { transition: none; transform: scale(1.15); } .lw { display: none; } .helmets.glow .eye i::before, .helmets.glow .eye i::after { animation: none; } }

/* holding page countdown */
.countdown-wrap { margin-top: 32px; }
.drop { color: var(--orange); }
.hero .soon { margin: 28px 0 0; }
/* Hero: wordmark, copy and form on the left, helmets on the right (stacked under the wordmark on small screens). */
.hero h1 { max-width: 600px; }
.hero .helmets { margin-top: 24px; }
@media (min-width: 900px) {
  .hero .panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(32px, 4vw, 64px); }
  .hero .panel > * { grid-column: 1; }
  .hero .panel > .helmets { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; margin: 0; }
}
.hero-form { margin-top: 22px; max-width: 600px; gap: 10px; }
.hf-row { display: flex; gap: 12px; align-items: flex-end; }
.hf-row .su-field { flex: 1 1 auto; min-width: 0; }
.hf-row .su-field input { min-height: 58px; }
.hf-row .btn { flex: 0 0 auto; min-height: 58px; }
.hero-form + .btns { margin-top: 20px; }
@media (max-width: 520px) { .hf-row { flex-direction: column; align-items: stretch; } }
.drop span { display: block; margin-top: 8px; font-size: clamp(16px, 1.8vw, 22px); color: var(--paper); }
.countdown { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.countdown > div { min-width: 92px; padding: 14px 12px 10px; border: 2px solid var(--paper); text-align: center; }
.countdown b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1; }
.countdown span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.live-now { margin-top: 18px; }
@media (max-width: 520px) { .countdown > div { min-width: 0; flex: 1 1 0; padding: 10px 6px 8px; } }
.btn { text-align: center; }
@media (max-width: 520px) { .hero .btns .btn { width: 100%; } }
/* holding page has no menu, so keep the Tickets button visible on phones */
@media (max-width: 860px) { .site-head .nav:not(:has(a:not(.btn))) { display: flex; position: static; flex-direction: row; padding: 0; border: 0; background: none; } .site-head .nav:not(:has(a:not(.btn))) .btn { margin: 0; } }

/* Cookie choice: pinned to the bottom until the visitor accepts or rejects. */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; background: var(--navy); border: 2px solid var(--orange); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.cookies[hidden] { display: none; }
.cookies p { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.45; }
.cookie-btns { display: flex; gap: 10px; }
.cookie-btns .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.site-foot p a { color: inherit; }
.site-foot .presented { display: flex; align-items: center; gap: 12px; }
.site-foot .presented a { display: block; line-height: 0; }
.site-foot .presented img { height: 40px; width: auto; }
.site-foot .foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.site-foot .foot-line p { margin: 0; }
.site-foot .foot-line .logo img { height: 44px; }
.site-foot .legal { font-size: 13px; }
.site-foot .wrap { align-items: center; }

/* Sign-up success: right helmet winks; the form is replaced by the "You're in" box. */
.helmets.wink .eye.r .lw { opacity: 1; transition: opacity 0s; }
.helmets.wink .eye.r .up .skin { transform: translateY(calc(var(--wu) * 1%)); transition-duration: .1s; }
.helmets.wink .eye.r .lo .skin { transform: translateY(calc(var(--wd) * -1%)); transition-duration: .1s; }
.helmets.wink .eye.r .lash { top: calc(100% - 3px); transition-duration: .1s; }
.su-form.done .su-msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-form.done + .btns { display: none; }
.su-done .h3 { margin: 0; color: var(--orange); outline: none; }
.su-done p:not(.h3) { margin: 8px 0 0; }
.su-done .btns { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (prefers-reduced-motion: no-preference) { .su-done { animation: su-in .45s cubic-bezier(.2, 1.4, .4, 1); } }
@keyframes su-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* 2027 poster type: headings, buttons and names in narrow bold Archivo; Bungee kept for the small date and
   venue lines, as on the poster. */
.display, .btn, .hero .date, .num, .poster .cap b, .timeline b, .a-pager a, .countdown b, .nav .btn { font-stretch: 62%; font-weight: 700; letter-spacing: 0.03em; }
.cond { letter-spacing: 0.03em; }
.btn.small { font-family: var(--body); }
.h1 { font-size: clamp(56px, 8vw, 120px); }
.h2 { font-size: clamp(38px, 5vw, 66px); }
.h3 { font-size: clamp(28px, 3vw, 42px); }
.btn { font-size: 19px; }
.btn.big { font-size: 22px; }
.hero .tag, .hero .venues { font-family: var(--stamp); font-weight: 400; letter-spacing: 0.02em; }
.hero .venues { font-size: 15px; }
/* Line-up names: flat white, as on the poster (no 3D stack). */
.billing a, .billing.flat a { text-shadow: none; transform: none; transition: color .2s; }
.billing a:hover, .billing a:focus-visible { color: var(--orange); }
/* Wordmark: orange and blue plates printed slightly out of register, as on the poster; they still slip now and then. */
.wm .ink { opacity: 1; }
.wm .ink.a { background: var(--orange); transform: translate(0.035em, -0.03em); }
.wm .ink.b { background: var(--blue); transform: translate(-0.035em, 0.03em); }
.wm.slip .ink.a, .wm:hover .ink.a { transform: translate(calc(0.035em + var(--sx)), calc(-0.03em + var(--sy))); }
.wm.slip .ink.b, .wm:hover .ink.b { transform: translate(calc(-0.035em - var(--sx)), calc(0.03em - var(--sy))); }
.logo img { filter: drop-shadow(1px -1px 0 var(--orange)) drop-shadow(-1px 1px 0 var(--blue)); }
.site-foot .logo img { filter: drop-shadow(2px -2px 0 var(--orange)) drop-shadow(-2px 2px 0 var(--blue)); }