/* galvokraevdrift.com — a player-piano music roll: manila paper punched with slot tracks, a red tempo line, a leader label, tin spools, a mahogany spool box */
:root {
  --ink: #2B1A12; --ink2: #4A3528; --paper: #EFE3C8; --paper2: #F8F0DE; --lit: #C7A975;
  --box: #4A1C14; --box2: #2E0F09; --red: #B42D1C; --light: #FFECBA;
  --brass: #A8834A; --brass2: #E1C17C; --tin: #BFA97E; --tin2: #8C7550; --board: #7A5634; --cream: #F3E7CC;
  --pad: 72px; --w: 1368px;
  --display: "Abril Fatface", "Georgia", serif;
  --body: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cutive Mono", ui-monospace, "Courier New", monospace;
  --slots-ink: url(/assets/img/slots-ink.png);
  --slots-light: url(/assets/img/slots-light.png);
  --grain: url(/assets/img/grain.png);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--ink) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); overflow-x: hidden; }
::selection { background: var(--red); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
kbd { font: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.in { position: relative; width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); }

/* ---------- materials ---------- */
.paper2 { position: relative; background: var(--paper2); }
.band, .paper2, .ground, .strip, .rb-l, .sec--box, .hero, .footer, .quote { isolation: isolate; }
.band::after, .paper2::after, .ground::after, .strip::after, .rb-l::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 256px 256px; mix-blend-mode: multiply; opacity: .28; pointer-events: none; }
.hero::after, .footer::after, .sec--box::after, .quote::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 256px 256px; mix-blend-mode: overlay; opacity: .3; pointer-events: none; }
/* paper ground of a section: faint slot tracks bleed in from the bottom edge */
.ground { position: relative; background: var(--paper); }
.ground::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: -1; background: var(--slots-ink) 0 0 / 720px 120px; opacity: .07; }
.rule-red { display: block; width: 120px; height: 3px; background: var(--red); }
.ar { width: 18px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; color: var(--red); transition: transform .2s ease-out; }
.pill { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid rgba(43, 26, 18, .55); border-radius: 999px; font: 400 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border: 0; border-radius: 4px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn .ar { color: var(--light); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper .ar { color: var(--red); }
.btn:hover .ar, .more:hover .ar, a:hover .more .ar { transform: translateX(6px); }
.more { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* a roll band: lit paper with slot tracks top and bottom, a printed line, the red tempo line */
.band { position: absolute; overflow: hidden; background: var(--lit); box-shadow: 0 18px 40px rgba(46, 15, 9, .55); }
.trk { position: absolute; left: 0; right: 0; background: var(--slots-light) 0 0 / 720px 120px; opacity: .85; filter: drop-shadow(0 0 2px rgba(255, 236, 186, .6)); }
.band .tempo { position: absolute; left: 0; right: 0; height: 3px; background: var(--red); }
.b-text { position: absolute; white-space: nowrap; font: 400 196px/1 var(--display); color: var(--ink); }

/* ---------- header (split-centre logo) ---------- */
.top { position: relative; z-index: 30; background: var(--paper); }
.top--dark { background: none; color: var(--cream); }
.top-in { display: flex; align-items: center; justify-content: space-between; padding-top: 26px; padding-bottom: 26px; }
.nav { display: flex; gap: 40px; width: 300px; }
.nav-r { justify-content: flex-end; }
.nav a { display: grid; justify-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
.nav a::after { content: ""; width: 22px; height: 8px; border-radius: 4px; background: var(--red); opacity: 0; }
.nav a[aria-current] { font-weight: 600; }
.nav a[aria-current]::after { opacity: 1; }
.nav a:hover::after { opacity: .4; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 400 26px/1 var(--display); text-decoration: none; }
.lg-s { width: 26px; height: 26px; flex: none; }
.lg-s .s1 { fill: var(--board); } .lg-s .s2 { stroke: var(--ink); } .lg-s .s3 { fill: var(--ink); } .lg-s .s4 { fill: var(--paper); }
.top--dark .lg-s .s1 { fill: var(--tin); } .top--dark .lg-s .s2 { stroke: var(--tin2); } .top--dark .lg-s .s3 { fill: var(--box2); } .top--dark .lg-s .s4 { fill: var(--tin); }
.menu-btn { display: none; width: 28px; padding: 0; background: none; border: 0; cursor: pointer; }
.menu-btn i { display: block; height: 6px; margin: 5px 0; border-radius: 3px; background: currentColor; }
.menu-btn i:nth-child(2) { width: 20px; margin-left: auto; margin-right: auto; }
.mnav { position: absolute; left: 16px; right: 16px; top: calc(100% - 8px); padding: 10px 18px; border-radius: 4px; background: var(--paper2); color: var(--ink); box-shadow: 0 14px 30px rgba(46, 15, 9, .35); }
.mnav[hidden] { display: none; }
.mnav li + li { border-top: 1px solid rgba(43, 26, 18, .2); }
.mnav a { display: block; padding: 12px 0; font: 400 26px/1.1 var(--display); text-decoration: none; }
.mnav a[aria-current] { color: var(--red); }

/* ---------- hero: two roll bands crossing the lit spool box ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(75% 75% at 55% 42%, rgba(138, 61, 39, .95) 0%, rgba(74, 28, 20, .4) 55%, rgba(46, 15, 9, .9) 100%), var(--box); color: var(--cream); }
.stage { position: absolute; left: 50%; top: 0; width: 1368px; height: 1010px; margin-left: -684px; pointer-events: none; }
.band--up { left: 0; top: 110px; width: 1408px; height: 300px; }
.band--up .trk--a { top: 12px; height: 62px; }
.band--up .trk--b { top: 266px; height: 26px; }
.band--up .tempo { left: 300px; top: 256px; }
.band--up .b-text { left: 300px; top: 66px; }
.band--low { left: -40px; top: 480px; width: 1408px; height: 236px; }
.band--low .trk--a { top: 10px; height: 44px; }
.band--low .trk--b { top: 198px; height: 30px; }
.band--low .tempo { top: 190px; }
.band--low .b-text { left: -30px; top: 50px; font-size: 160px; }
/* the two bands drift towards each other, ~40 s a cycle */
.band--up .trk { animation: roll-l 40s linear infinite; }
.band--low .trk { animation: roll-r 40s linear infinite; }
@keyframes roll-l { to { background-position-x: -720px; } }
@keyframes roll-r { to { background-position-x: 720px; } }
.spool { position: absolute; filter: drop-shadow(10px 16px 15px rgba(46, 15, 9, .6)); }
.sp-l { left: 40px; top: 70px; width: 191px; height: 380px; }
.sp-r { left: 1218px; top: 430px; width: 165px; height: 330px; }
.tracker { position: absolute; left: 96px; top: 438px; width: 1068px; height: 26px; filter: drop-shadow(0 6px 7px rgba(46, 15, 9, .5)); }
.hero-in { position: relative; z-index: 2; height: 919px; }
.hero-t { position: absolute; left: var(--pad); top: 649px; width: 790px; display: grid; gap: 18px; justify-items: start; }
.h1 { font: 400 86px/1 var(--display); letter-spacing: -.01em; color: var(--cream); }
.sf { max-width: 600px; font-size: 19px; line-height: 1.5; opacity: .92; }
.leader { position: absolute; left: calc(var(--pad) + 812px); top: 509px; width: 420px; padding: 22px 26px 20px 46px; border-radius: 4px; background: var(--paper2); color: var(--ink); box-shadow: 0 20px 40px rgba(46, 15, 9, .5), 0 6px 12px rgba(46, 15, 9, .3); }
.leader::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--grain) 0 0 / 256px 256px; mix-blend-mode: multiply; opacity: .22; pointer-events: none; border-radius: 4px; }
.ld-pt { position: absolute; left: -33px; top: 0; bottom: 0; width: 34px; background: radial-gradient(circle at 16px 50%, var(--box) 0 6px, var(--brass) 6.5px 9.5px, transparent 10px), var(--paper2); clip-path: polygon(100% 0, 100% 100%, 88% 100%, 0 calc(50% + 26px), 0 calc(50% - 26px), 88% 0); }
.ld-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--red); }
.ld-t { font: 400 30px/1 var(--display); }
.ld-o { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.leader li + li { border-top: 1px solid rgba(43, 26, 18, .18); }
.leader a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 11px 0; text-decoration: none; }
.leader b { flex: 1; font-size: 16px; font-weight: 600; }
.leader .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.leader a:hover b { color: var(--red); }
.leader a:hover .ar { transform: translateX(4px); }

/* ---------- sections ---------- */
.sec { position: relative; padding: 112px 0 120px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 48px; }
.head { display: grid; gap: 14px; }
.h2 { max-width: 700px; font: 400 64px/1 var(--display); letter-spacing: -.01em; }
.lead { max-width: 420px; font-size: 18px; color: var(--ink2); }
.lead--ink { max-width: 720px; color: var(--ink); }
.h3 { font: 400 40px/1.05 var(--display); }
.h4 { font: 400 28px/1.15 var(--display); }
.p { font-size: 18px; line-height: 1.6; }
.p + .p { margin-top: 12px; }

/* card: a cut length of roll — punched left edge, cover on top */
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.ticket > a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(43, 26, 18, .22); border-radius: 4px; background: var(--paper2); box-shadow: 0 10px 24px rgba(43, 26, 18, .12); text-decoration: none; transition: box-shadow .2s ease-out, transform .2s ease-out, border-color .2s; }
.t-top { display: flex; }
.edge { width: 28px; flex: none; background: var(--slots-ink) 0 0 / 720px 120px, var(--paper); transition: background-color .2s; }
.t-top img { flex: 1; min-width: 0; aspect-ratio: 1 / .62; object-fit: cover; }
.t-tall .t-top img { aspect-ratio: 1 / .9; }
.t-b { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px 24px 52px; }
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-row .mono { font-size: 12px; color: var(--ink2); }
.t-h { font: 400 32px/1.04 var(--display); }
.t-l { font-size: 16px; line-height: 1.5; color: var(--ink2); }
.t-d { font-size: 12px; color: var(--ink2); }
.t-b .more { margin-top: auto; padding-top: 12px; }
/* hover: the card lifts and its punched edge is held to the light */
.ticket > a:hover, .ticket > a:focus-visible { transform: translateY(-4px); border-color: rgba(43, 26, 18, .6); box-shadow: 0 24px 40px rgba(43, 26, 18, .22), 0 6px 12px rgba(43, 26, 18, .12); }
.ticket > a:hover .edge, .ticket > a:focus-visible .edge { background: var(--slots-light) 0 0 / 720px 120px, var(--box); filter: drop-shadow(0 0 2px rgba(255, 236, 186, .7)); }

/* N — updates on a roll strip over the box */
.sec--box { padding: 104px 0 24px; background: var(--box); color: var(--cream); }
.sec--box .h2 { color: var(--cream); }
.sec--box .lead { color: var(--cream); opacity: .85; }
.strip { position: relative; overflow: hidden; padding: 52px 40px; border-radius: 2px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 30px rgba(46, 15, 9, .5); }
.strip .trk { background-image: var(--slots-ink); filter: none; opacity: .9; }
.strip .trk--a { top: 6px; height: 32px; }
.strip .trk--b { bottom: 6px; height: 28px; }
.ups li + li { border-top: 1px solid rgba(43, 26, 18, .2); }
.ups a { display: flex; align-items: center; gap: 28px; padding: 18px 0; text-decoration: none; }
.up-d { width: 110px; flex: none; font-size: 15px; color: var(--red); }
.up-t { width: 360px; flex: none; font: 400 26px/1.1 var(--display); }
.up-x { flex: 1; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.ups .ar { color: var(--ink); }
.ups a:hover .up-t { color: var(--red); }
.ups a:hover .ar { transform: translateX(6px); }

/* ---------- inner intros ---------- */
.intro { position: relative; overflow: hidden; padding: 40px 0 56px; }
.intro .in { display: grid; gap: 18px; justify-items: start; }
.band--intro { top: -20px; width: 520px; height: 360px; box-shadow: 0 12px 26px rgba(43, 26, 18, .18); }
.band--intro .trk--a { top: 12px; height: 66px; }
.band--intro .trk--b { top: 282px; height: 60px; }
.band--intro .tempo { top: 260px; height: 2px; }
.band--g { left: calc(50% + 296px); transform: rotate(-6deg); }
.band--ab { left: calc(50% + 216px); top: 30px; width: 600px; height: 300px; transform: rotate(4deg); }
.band--ab .trk--b { top: 228px; }
.band--ab .tempo { top: 212px; }
.h1-page { position: relative; max-width: 900px; font: 400 96px/1 var(--display); letter-spacing: -.01em; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; font: 400 13px/1.3 var(--mono); color: var(--ink2); }
.crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--red); }
.crumbs a { text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }
.sec--cat { padding: 24px 0 120px; }
.intro--legal { padding-bottom: 48px; }
.upd { font-size: 14px; color: var(--ink2); }

/* ---------- game page ---------- */
.opening { padding: 32px 0 72px; overflow: hidden; }
.opening .crumbs { margin-bottom: 28px; }
.spread { display: flex; align-items: center; gap: 56px; }
.sp-t { width: 640px; flex: none; display: grid; gap: 20px; justify-items: start; }
.h1-g { font: 400 96px/.98 var(--display); letter-spacing: -.01em; }
.sp-t .lead { font-size: 21px; line-height: 1.5; }
.meta { font-size: 13px; color: var(--ink2); }
.cv-stage { position: relative; flex: 1; height: 520px; }
.band--cv { left: -60px; top: 150px; width: 760px; height: 220px; box-shadow: 0 10px 22px rgba(43, 26, 18, .2); }
.band--cv .trk--a { top: 10px; height: 40px; }
.band--cv .trk--b { top: 176px; height: 34px; }
.band--cv .tempo { top: 160px; height: 2px; }
.cv-card { position: absolute; left: 54px; top: 30px; display: flex; padding: 12px 12px 12px 0; border: 1px solid rgba(43, 26, 18, .22); border-radius: 4px; background: var(--paper2); box-shadow: 0 20px 34px rgba(43, 26, 18, .25), 0 4px 8px rgba(43, 26, 18, .15); transform: rotate(-2deg); }
.cv-card .edge { width: 24px; background-color: var(--paper2); }
.cv-card img { width: 408px; height: 420px; border-radius: 2px; object-fit: cover; }
.fstrip { display: grid; gap: 14px; padding: 26px 32px; border: 1px solid rgba(43, 26, 18, .2); border-radius: 4px; box-shadow: 0 8px 20px rgba(43, 26, 18, .1); }
.fstrip .h3 { font-size: 28px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 0; }
.facts div { padding-right: 16px; }
.facts dt { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.facts dd { margin-top: 4px; font-size: 15px; line-height: 1.45; }
.fbody { display: flex; gap: 72px; padding-top: 80px; padding-bottom: 40px; }
.fmain { width: 720px; flex: none; display: grid; gap: 44px; align-content: start; }
.gsec { display: grid; gap: 14px; }
.keys { width: 100%; }
.keys tr { border-bottom: 1px solid rgba(43, 26, 18, .18); }
.keys th, .keys td { padding: 10px 0; text-align: left; font-size: 16px; }
.keys th { width: 240px; padding-right: 20px; font-weight: 400; }
.keys kbd { display: block; padding: 6px 14px; border: 1px solid rgba(43, 26, 18, .5); border-radius: 4px; font: 400 14px/1.3 var(--mono); }
.tips, .weigh { display: grid; gap: 12px; }
.tips li, .weigh li { display: flex; gap: 14px; font-size: 17px; line-height: 1.55; }
.tips .ar { margin-top: 7px; }
.slot { width: 20px; height: 8px; flex: none; margin-top: 8px; border-radius: 4px; background: var(--ink); }
.qa { padding: 10px 0; border-bottom: 1px solid rgba(43, 26, 18, .18); }
.qa h3 { font-size: 18px; font-weight: 600; }
.qa p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--ink2); }
.fside { flex: 1; max-width: 400px; display: grid; gap: 32px; align-content: start; }
.quote { position: relative; display: grid; gap: 16px; padding: 34px 30px; border-radius: 4px; background: var(--box); color: var(--cream); }
.q-l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--light); }
.q-t { font: 400 30px/1.18 var(--display); }
.q-t a { color: var(--light); }
.quote .rule-red { width: 72px; }
.sims-w { display: grid; gap: 16px; }
.sims-w .h3 { font-size: 30px; }
.sims { display: grid; gap: 16px; }
.sim { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid rgba(43, 26, 18, .2); border-radius: 4px; background: var(--paper2); text-decoration: none; transition: box-shadow .2s; }
.sim img { width: 88px; height: 88px; flex: none; border-radius: 2px; object-fit: cover; }
.sim span { display: grid; gap: 4px; }
.sim b { font-size: 16px; font-weight: 600; }
.sim small { font-size: 14px; line-height: 1.45; color: var(--ink2); }
.sim:hover { box-shadow: 0 10px 20px rgba(43, 26, 18, .15); }
.sim:hover b { color: var(--red); }
.wsec { padding: 40px 0 96px; }
.where { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 28px 32px; border: 1px solid rgba(43, 26, 18, .3); border-radius: 4px; }
.where .h3 { font-size: 28px; }
.where p { max-width: 760px; margin-top: 6px; color: var(--ink2); }
.where .more { flex: none; }

/* about */
.sec--ab { padding: 24px 0 80px; }
.sec--ab .in { display: grid; gap: 48px; }
.arow { display: flex; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(43, 26, 18, .2); }
.arow .h3 { width: 380px; flex: none; font-size: 36px; line-height: 1.08; }
.arow > div { max-width: 720px; }
.faq .qa:first-child { padding-top: 0; }
.contact { display: grid; gap: 14px; padding: 32px 36px; border: 1px solid rgba(43, 26, 18, .2); border-radius: 4px; box-shadow: 0 8px 20px rgba(43, 26, 18, .1); }
.contact .h3 { font-size: 36px; }
.contact > p { color: var(--ink2); }
.reasons { display: grid; gap: 10px; }
.reasons li { display: flex; align-items: center; gap: 12px; }
.krows { display: grid; gap: 10px; }
.krows div { display: flex; gap: 20px; }
.krows dt { width: 110px; flex: none; font: 400 13px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.krows dd { overflow-wrap: anywhere; }
.krows a { text-decoration: none; }

/* legal: a sheet with a punched edge */
.sec--legal { padding: 8px 0 96px; }
.sheet { position: relative; max-width: 860px; display: grid; gap: 26px; overflow: hidden; padding: 40px 48px 40px 76px; border: 1px solid rgba(43, 26, 18, .18); border-radius: 4px; box-shadow: 0 8px 22px rgba(43, 26, 18, .1); }
.sheet > .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background-color: transparent; opacity: .8; }
.lsec { display: grid; gap: 8px; }
.lsec .p { font-size: 17px; line-height: 1.65; }
.sheet a, .arow a, .qa a, .contact a { color: var(--red); }

/* ---------- footer: roll boxes stacked on each other ---------- */
.footer { position: relative; padding: 72px 0 64px; background: var(--box); }
.f-in { display: grid; justify-items: start; max-width: 1204px; }
.rbox { display: flex; align-items: center; gap: 16px; width: 980px; padding: 16px 18px; border-radius: 4px; background: var(--board); box-shadow: 0 10px 18px rgba(46, 15, 9, .6); }
.rb1 { margin-left: 6px; } .rb2 { margin-left: 66px; } .rb3 { margin-left: 28px; } .rb4 { margin-left: 80px; }
.rb-end { width: 44px; height: 64px; flex: none; border-radius: 3px; background: rgba(46, 15, 9, .35); }
.rb-l { position: relative; flex: 1; display: grid; gap: 10px; padding: 16px 22px; border-radius: 2px; background: var(--paper2); }
.rb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rb-l p { font-size: 15px; color: var(--ink2); max-width: 420px; }
.logo--f { font-size: 26px; }
.f-site, .f-legal { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.f-site a { font-weight: 600; text-underline-offset: 3px; }
.f-legal a, .f-legal .linkish { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.f-site a:hover, .f-legal a:hover, .f-legal .linkish:hover { color: var(--red); }
.f-mail { font-size: 15px; color: var(--red); text-decoration: none; }
.f-soc { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; color: var(--ink2); }
.rb-l .f-fine { max-width: none; font-size: 13px; }

/* ---------- cookie: a leader label ---------- */
.cookie { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(500px, calc(100% - 32px)); display: grid; gap: 14px; justify-items: start; overflow: hidden; padding: 28px 28px 28px 52px; border: 1px solid rgba(43, 26, 18, .2); border-radius: 4px; box-shadow: 0 20px 40px rgba(46, 15, 9, .35); }
.cookie[hidden] { display: none; }
.cookie.is-open { animation: ck-in .3s ease-out; }
@keyframes ck-in { from { opacity: 0; transform: translateY(14px); } }
.cookie > .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background-color: transparent; opacity: .8; }
.ck-title { font: 400 28px/1.08 var(--display); }
.cookie .rule-red { width: 64px; }
.cookie p { font-size: 15px; line-height: 1.5; color: var(--ink2); }
.ck-link { font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.ck-acts { display: flex; gap: 10px; width: 100%; }
.ck-b { flex: 1; padding: 14px; border: 1.5px solid var(--ink); border-radius: 4px; background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; }
.ck-b--ink { background: var(--ink); color: var(--paper); }
.ck-b:hover { box-shadow: 0 6px 14px rgba(43, 26, 18, .2); }
.ck-manage { display: grid; gap: 10px; justify-items: start; width: 100%; padding: 12px; border: 1px solid rgba(43, 26, 18, .25); border-radius: 4px; font-size: 14px; }
.ck-manage[hidden] { display: none; }
.ck-manage .ck-b { flex: none; padding: 10px 16px; font-size: 14px; }
.ck-opt { display: flex; align-items: center; gap: 10px; }
.ck-opt input { width: 18px; height: 18px; accent-color: var(--red); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .leader { left: auto; right: var(--pad); }
  .hero-t { width: calc(100% - 2 * var(--pad) - 460px); }
  .h1 { font-size: clamp(56px, 6.4vw, 86px); }
  .sp-t { width: 520px; }
  .h1-g { font-size: 76px; }
  .fmain { width: 600px; }
  .fbody { gap: 48px; }
  .arow .h3 { width: 300px; }
  .up-t { width: 280px; }
}
@media (max-width: 1100px) {
  .tickets { grid-template-columns: 1fr 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .spread { flex-direction: column; align-items: flex-start; }
  .sp-t { width: auto; }
  .cv-stage { flex: none; width: 100%; max-width: 560px; }
  .fbody { flex-direction: column; }
  .fmain, .fside { width: auto; max-width: none; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .rbox { width: calc(100% - 80px); }
}
@media (max-width: 899px) {
  :root { --pad: 20px; }
  body { font-size: 15px; }
  .top-in { padding-top: 16px; padding-bottom: 16px; }
  .nav { display: none; }
  .menu-btn { display: block; }
  .top-in::before { content: ""; width: 28px; }
  .logo { font-size: 20px; }
  .lg-s { width: 20px; height: 20px; }

  /* hero: the stage shrinks to the mobile frame, text and the leader label follow in flow */
  .stage { left: 0; width: 360px; height: 420px; margin: 0; }
  .band--up { top: 82px; width: 400px; height: 156px; }
  .band--up .trk--a { top: 8px; height: 30px; }
  .band--up .trk--b { top: 136px; height: 14px; }
  .band--up .tempo { left: 46px; top: 130px; height: 2px; }
  .band--up .b-text { left: 46px; top: 46px; font-size: 52px; }
  .band--low { left: -40px; top: 272px; width: 400px; height: 128px; }
  .band--low .trk--a { top: 6px; height: 24px; }
  .band--low .trk--b { top: 110px; height: 14px; }
  .band--low .tempo { top: 104px; height: 2px; }
  .band--low .b-text { left: 56px; top: 36px; font-size: 54px; }
  .sp-l { left: -26px; top: 76px; width: 75px; height: 150px; }
  .sp-r { left: 330px; top: 262px; width: 75px; height: 150px; }
  .tracker { left: 10px; top: 248px; width: 340px; height: 16px; }
  .hero-in { height: auto; padding-top: 340px; padding-bottom: 44px; }
  .hero-t { position: static; width: auto; gap: 14px; }
  .h1 { font-size: 46px; }
  .sf { font-size: 16px; }
  .leader { position: relative; left: auto; right: auto; top: auto; width: calc(100% - 14px); margin: 32px 0 0 14px; padding: 18px 18px 16px 38px; }
  .ld-t { font-size: 26px; }
  .leader b { font-size: 15px; }

  .sec { padding: 56px 0 64px; }
  .head-row { margin-bottom: 28px; }
  .h2 { font-size: 36px; }
  .lead { font-size: 16px; }
  .rule-red { width: 72px; }
  .h3 { font-size: 30px; }
  .p { font-size: 16px; }
  .tickets { grid-template-columns: 1fr; gap: 20px; }
  .edge { width: 22px; }
  .t-b { padding: 16px 16px 18px 38px; gap: 10px; }
  .t-h { font-size: 26px; }
  .t-l { font-size: 15px; }

  .sec--box { padding: 56px 0 8px; }
  .strip { padding: 34px 16px 30px; }
  .strip .trk--a { height: 20px; }
  .strip .trk--b { height: 18px; }
  .ups a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; }
  .up-d { width: auto; font-size: 13px; }
  .up-t { width: auto; font-size: 22px; }
  .up-x { font-size: 14px; }
  .ups .ar { display: none; }

  .intro { padding: 24px 0 32px; }
  .intro .in { gap: 14px; }
  .h1-page { font-size: 46px; }
  .band--intro { width: 520px; height: 200px; top: 0; }
  .band--intro .trk--a { top: 8px; height: 40px; }
  .band--intro .trk--b { top: 152px; height: 40px; }
  .band--intro .tempo { top: 140px; }
  .band--g { left: calc(100% - 60px); }
  .band--ab { left: calc(100% - 50px); top: 10px; height: 160px; }
  .band--ab .trk--b { top: 116px; }
  .band--ab .tempo { top: 104px; }
  .sec--cat { padding: 8px 0 64px; }

  .opening { padding: 20px 0 36px; }
  .spread { gap: 24px; }
  .sp-t { gap: 14px; }
  .h1-g { font-size: 48px; }
  .sp-t .lead { font-size: 17px; }
  .cv-stage { height: 330px; }
  .band--cv { top: 90px; width: 460px; height: 150px; }
  .band--cv .trk--a { top: 6px; height: 26px; }
  .band--cv .trk--b { top: 120px; height: 22px; }
  .band--cv .tempo { top: 108px; }
  .cv-card { left: 18px; top: 14px; }
  .cv-card img { width: 268px; height: 280px; }
  .fstrip { padding: 18px 16px; }
  .fstrip .h3 { font-size: 24px; }
  .facts { grid-template-columns: 1fr; }
  .fbody { gap: 36px; padding-top: 40px; padding-bottom: 24px; }
  .fmain { gap: 32px; }
  .keys th { width: 140px; }
  .tips li, .weigh li { font-size: 16px; }
  .quote { padding: 24px 18px; }
  .q-t { font-size: 24px; }
  .sims-w .h3 { font-size: 26px; }
  .wsec { padding: 24px 0 56px; }
  .where { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 16px; }
  .where .h3 { font-size: 24px; }

  .sec--ab { padding: 8px 0 48px; }
  .sec--ab .in { gap: 32px; }
  .arow { flex-direction: column; gap: 10px; padding-bottom: 32px; }
  .arow .h3 { width: auto; font-size: 28px; }
  .contact { padding: 22px 16px; }
  .contact .h3 { font-size: 28px; }
  .krows div { flex-direction: column; gap: 4px; }

  .sec--legal { padding: 0 0 48px; }
  .sheet { padding: 24px 16px 24px 34px; }
  .sheet > .edge { width: 20px; }
  .lsec .p { font-size: 15px; }
  .h4 { font-size: 22px; }

  .footer { padding: 40px 0; }
  .f-in { gap: 4px; }
  .rbox, .rb1, .rb2, .rb3, .rb4 { width: 100%; margin-left: 0; padding: 12px; flex-direction: column; align-items: stretch; gap: 8px; }
  .rb-end { width: 10px; height: 6px; }
  .rb-l { padding: 14px 16px; }
  .rb-row { flex-direction: column; align-items: flex-start; }
  .f-site, .f-legal { flex-direction: column; gap: 10px; }
  .cookie { right: 16px; bottom: 16px; padding: 22px 18px 22px 40px; }
  .cookie > .edge { width: 20px; }
  .ck-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ticket > a:hover, .ticket > a:focus-visible { transform: none; }
}

/* social icons */
.soc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.soc-i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: inherit; opacity: .85; transition: opacity .2s, transform .2s; }
.soc-i:hover, .soc-i:focus-visible { opacity: 1; transform: translateY(-1px); }
.soc-i svg { display: block; }