
:root {
  --ink:#171813;
  --paper:#f1eee4;
  --orange:#ff5b2b;
  --muted:#bfc2b5;
  --line:#f1eee42c;
  --dark-line:#17181330;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Inter',Arial,sans-serif;
  --heading:'Inter',Arial,sans-serif;
  --serif:'Lora',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(24px,5.5vw,90px);
  --header-height:78px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 20px); scrollbar-color:var(--ink) var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.75 var(--body); -webkit-font-smoothing:antialiased; }
body.modal-open,body.menu-open { overflow:hidden; }
body::-webkit-scrollbar { width:9px; }
body::-webkit-scrollbar-track { background:var(--paper); }
body::-webkit-scrollbar-thumb { background:#696d5e; border:2px solid var(--paper); }
a { color:inherit; text-decoration:none; text-underline-offset:.25em; }
button,input,textarea { font:inherit; border-radius:0; }
button { cursor:pointer; }
button,input,textarea,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.4; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--orange); outline-offset:5px; }
::selection { background:var(--orange); color:var(--ink); }
input,textarea { caret-color:var(--orange); }
img { display:block; max-width:100%; object-fit:cover; }
h1,h2,h3,p,figure { margin:0; }
h2 { font:600 clamp(48px,6.4vw,96px)/.97 var(--display); letter-spacing:-.025em; text-wrap:balance; }
h2 em { font:italic 500 .76em/1.2 var(--serif); letter-spacing:-.035em; }
h3 { font:500 clamp(24px,2.5vw,36px)/1.2 var(--heading); letter-spacing:-.03em; text-wrap:balance; }
p { max-width:70ch; }
[hidden] { display:none!important; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; display:inline-block; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; vertical-align:middle; }
.split-title>span { display:block; }
.eyebrow { font-size:11px; font-weight:500; letter-spacing:.04em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:10px; left:10px; z-index:100; background:var(--orange); color:var(--ink); padding:10px 18px; transform:translateY(-160%); }
.skip:focus { transform:none; }

/* Bold, practical controls. */
.button { min-height:54px; padding:16px 22px; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; background:var(--orange); color:var(--ink); border:1px solid transparent; font-size:14px; font-weight:600; line-height:1.4; text-align:left; transition:background 180ms,color 180ms,transform 240ms var(--ease); }
.button:hover { background:#ff7c52; }
.button:active { transform:scale(.98); }
.button .icon { width:21px; height:21px; transition:transform 240ms var(--ease); }
.button:hover .icon { transform:translate(2px,-2px); }
.button.small { min-height:44px; padding:10px 16px; font-size:12px; gap:24px; }
.outline-button { background:transparent; color:var(--ink); border-color:var(--ink); }
.outline-button:hover { background:var(--ink); color:var(--paper); }
.light-button { background:var(--paper); }
.light-button:hover { background:#fffdf6; }
.text-link { min-height:44px; display:inline-flex; align-items:center; justify-content:space-between; gap:25px; padding:9px 0; border-bottom:1px solid currentColor; font-size:13px; font-weight:500; line-height:1.5; transition:color 180ms; }
.text-link .icon { width:18px; height:18px; transition:transform 240ms var(--ease); }
.text-link:hover { color:#a92c0a; }
.text-link:hover .icon { transform:translate(2px,-2px); }
.status-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:var(--orange); flex-shrink:0; }

/* A festival programme header, rather than a dark overlay. */
.header { position:sticky; top:0; z-index:40; height:var(--header-height); display:flex; justify-content:space-between; align-items:center; gap:24px; padding:0 3.2%; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--dark-line); }
.wordmark { display:inline-flex; align-items:center; gap:13px; flex-shrink:0; font:700 26px/1 var(--display); letter-spacing:-.015em; }
.wordmark strong { font:600 15px/1.2 var(--body); letter-spacing:-.03em; }
.wordmark .brand-mark { display:grid; place-items:center; background:var(--orange); width:38px; height:38px; font:700 34px/.8 var(--serif); letter-spacing:-.04em; padding-bottom:7px; }
.wordmark .brand-alias { padding-left:12px; border-left:1px solid var(--dark-line); font:400 11px/1.4 var(--body); max-width:64px; letter-spacing:.01em; }
.header nav { display:flex; align-items:center; gap:clamp(18px,2vw,30px); margin-left:auto; }
.header nav>a { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:6px; white-space:nowrap; }
.header nav>a:not(.button) { min-height:44px; font-size:12px; font-weight:500; }
.header nav>a:not(.button)::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform 240ms var(--ease); }
.header nav>a:hover::after,.header nav>a[aria-current]::after { transform:scaleX(1); }
.header nav>a .icon { width:13px; height:13px; }
.header nav>.button .icon { width:17px; height:17px; }
.reading-progress { position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform:scaleX(var(--read,0)); transform-origin:left; background:var(--orange); }
.menu-toggle,.menu-close,.menu-note { display:none; }

/* Cover story: the identity and the real photograph have their own space. */
.hero { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,2fr); min-height:680px; height:calc(100svh - var(--header-height)); max-height:980px; border-bottom:1px solid var(--dark-line); background:var(--paper); color:var(--ink); }
.hero-identity { display:flex; flex-direction:column; padding:clamp(30px,3vw,48px) clamp(24px,3.2vw,52px) 20px; min-width:0; }
.hero h1 { font:800 clamp(135px,13.8vw,255px)/.69 var(--display); letter-spacing:-.035em; margin:2px -4px 0; }
.hero h1>span { display:block; animation:lettering-arrive 900ms var(--ease); }
.hero h1>span:first-child { font-size:.55em; line-height:.75; }
.hero h1>span+span { margin-top:.08em; animation-duration:1050ms; }
.hero-copy { padding-top:clamp(22px,2.3vw,35px); }
.hero-line { font:500 clamp(24px,2.1vw,34px)/1.15 var(--serif); letter-spacing:-.035em; }
.hero-line em { font-weight:500; }
.hero-genres { font-size:12px; color:#53584b; max-width:25ch; line-height:1.7; margin-top:15px; }
.hero-actions { display:grid; gap:10px; margin-top:auto; padding-top:25px; }
.hero-actions .button { width:100%; min-height:51px; font-size:13px; }
.hero-actions .film-button { background:var(--ink); color:var(--paper); }
.hero-actions .film-button:hover { background:#36392e; }
.hero-actions .film-button .icon { width:20px; height:20px; }
.hero-signature { margin-top:26px; padding-top:16px; border-top:1px solid var(--dark-line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px 12px; }
.hero-signature>span { font-size:11px; letter-spacing:.06em; }
.motion-toggle { padding:5px 0; min-height:44px; border:0; background:none; color:inherit; font-size:12px; white-space:nowrap; }
.motion-toggle span { display:inline-block; margin-left:8px; }
.hero-visual { display:grid; grid-template-rows:minmax(0,1fr) 44px; min-width:0; overflow:hidden; border-left:1px solid var(--dark-line); background:var(--ink); }
.hero-photo { position:relative; height:100%; min-height:0; background:url('BANER-DJ-GABI.webp') 51.5% 53%/cover no-repeat; transform:translate3d(var(--pointer-x,0px),calc(var(--pointer-y,0px) + var(--hero-shift,0px) * .06),0) scale(calc(1.018 + var(--hero-progress,0) * .035)); transform-origin:50% 55%; animation:scene-arrive 1s var(--ease); }
.hero-photo-caption { position:relative; z-index:1; display:flex; align-items:center; gap:25px; padding:0 23px; background:var(--ink); color:var(--paper); font-size:11px; letter-spacing:.06em; }
.hero-photo-caption>span:nth-child(2) { color:#c0c3b5; margin-left:auto; }
.hero-photo-caption>a { width:36px; min-height:36px; display:grid; place-items:center; margin-left:auto; border-left:1px solid var(--line); }
.hero-photo-caption .icon { width:16px; height:16px; }
.ticker { background:var(--orange); color:var(--ink); padding:14px 0; overflow:hidden; }
.ticker>div { display:flex; width:max-content; animation:ticker 42s linear infinite; }
.ticker>div>span { display:flex; align-items:center; justify-content:space-around; gap:45px; padding-right:45px; min-width:100vw; white-space:nowrap; font:600 24px/1 var(--display); letter-spacing:.04em; }
.ticker i { width:6px; height:6px; background:var(--ink); border-radius:50%; }

/* Published music: a listening booth beside a tactile cover collection. */
.section { padding:clamp(75px,8vw,126px) var(--gutter); margin:0 auto; }
.light { background:var(--paper); color:var(--ink); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:55px; margin-bottom:47px; }
.section-heading>p { max-width:335px; font-size:15px; line-height:1.8; color:#c3c6b9; }
.music-intro { max-width:295px; padding-bottom:3px; }
.music-intro>p { color:#515649; font-size:14px; line-height:1.8; }
.music-intro .text-link { margin-top:16px; width:100%; border-color:var(--dark-line); }
.record-crate { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr); align-items:start; gap:clamp(30px,4vw,65px); }
.record-display { background:var(--ink); color:var(--paper); padding:clamp(25px,2.8vw,43px); position:sticky; top:calc(var(--header-height) + 25px); min-width:0; }
.record-cover-hit { position:relative; padding-right:22%; user-select:none; touch-action:pan-y; cursor:grab; }
.record-cover-hit:active { cursor:grabbing; }
.sleeve { width:100%; position:relative; aspect-ratio:1; isolation:isolate; }
#record-cover { position:relative; z-index:2; width:100%; height:100%; object-fit:cover; box-shadow:0 15px 35px #0005; pointer-events:none; }
.vinyl { position:absolute; z-index:1; top:2%; left:32%; width:96%; height:96%; max-width:none; object-fit:contain; transform:rotate(-22deg); transition:transform 600ms var(--ease); pointer-events:none; }
.record-cover-hit:hover .vinyl { transform:translateX(2%) rotate(-8deg); }
.record-caption { margin-top:27px; }
.record-current-title { font:500 clamp(24px,2.3vw,35px)/1.2 var(--body); letter-spacing:-.03em; }
.record-caption>span { display:block; margin-top:7px; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.record-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-top:20px; margin-top:22px; }
.record-controls button { width:40px; height:40px; display:grid; place-items:center; border:1px solid #f1eee465; border-radius:50%; color:var(--paper); background:none; transition:background 180ms,color 180ms; }
.record-controls button:hover { background:var(--paper); color:var(--ink); }
.record-controls .icon { width:18px; height:18px; }
#record-number { font-size:11px; letter-spacing:.07em; font-variant-numeric:tabular-nums; }
.record-platforms { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:17px; font-size:11px; }
.record-platforms a { display:inline-flex; align-items:center; gap:6px; min-height:30px; transition:color 180ms; }
.record-platforms a:hover { color:var(--orange); }
.record-platforms .icon { width:12px; height:12px; }
.listening-action { margin-top:18px; }
.listening-action .button { width:100%; font-size:12px; }
.player-note { color:var(--muted); font-size:11px; margin-top:11px; line-height:1.7; }
#record-description { color:#c3c6b9; font-size:13px; line-height:1.7; margin-top:18px; }
.tracklist { min-width:0; }
.tracklist-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; padding-bottom:17px; border-bottom:1px solid var(--dark-line); }
.tracklist-heading h3 { font-size:24px; }
.tracklist-heading>span { font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.04em; color:#515649; }
.tracks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 17px; }
.track { min-width:0; width:100%; position:relative; display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:start; gap:0 5px; padding:0 0 12px; border:0; background:transparent; color:var(--ink); text-align:left; transition:background 200ms,color 200ms; }
.track-art { grid-column:1/-1; width:100%; aspect-ratio:1; height:auto; object-fit:cover; margin-bottom:12px; transition:transform 350ms var(--ease),filter 250ms; }
.track:hover .track-art { transform:translateY(-4px); }
.track-num { position:absolute; top:8px; left:8px; padding:3px 6px; background:var(--paper); color:var(--ink); font:500 11px/1.5 var(--body); font-variant-numeric:tabular-nums; z-index:1; }
.track .track-info,.track>span:nth-of-type(2) { min-width:0; display:block; padding-left:0; font:500 clamp(12px,1.05vw,16px)/1.35 var(--body); letter-spacing:-.02em; }
.track small { display:block; margin-top:7px; font:400 11px/1.5 var(--body); letter-spacing:0; color:#595e51; }
.track-symbol { justify-self:end; margin-top:0; padding-right:0; }
.track-symbol .icon { width:15px; height:15px; }
.selection-check { opacity:0; transition:opacity 160ms; }
.selection-ring { transition:fill 160ms; }
.track.active .selection-ring { fill:var(--orange); }
.track.active .selection-check { opacity:1; stroke:var(--ink); }
.track.active { background:var(--ink); color:var(--paper); }
.track.active .track-info,.track.active>span:nth-of-type(2) { padding-left:10px; }
.track.active .track-symbol { padding-right:8px; color:var(--orange); }
.track.active small { color:#d0d3c5; }
.track.active .track-num { background:var(--orange); }
.track.active .track-art { outline:2px solid var(--orange); outline-offset:-2px; }
.session-line { display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; padding-top:25px; margin-top:42px; border-top:1px solid var(--dark-line); font-size:12px; }
.session-line>span { margin-right:auto; font-size:11px; color:#515649; letter-spacing:.035em; }
.session-line a { display:inline-flex; align-items:center; gap:8px; min-height:30px; }
.session-line a:hover { color:#a92c0a; }
.session-line .icon { width:14px; height:14px; }

/* Directo is a full cinema spread. The agenda has its own paper page. */
.live-section { background:var(--ink); color:var(--paper); padding-bottom:70px; }
.live-section .section-heading { align-items:end; margin-bottom:48px; }
.live-section h2 { font-size:clamp(51px,6.7vw,100px); }
.live-feature { display:block; }
.live-screen { position:relative; display:block; width:100%; aspect-ratio:16/7.7; padding:0; overflow:hidden; border:0; background:#0b0c09; color:var(--paper); text-align:left; }
.live-screen::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#17181349 0%,transparent 35%,#1718135e 100%); }
.live-screen img { width:100%; height:100%; object-position:center 54%; transform:scale(calc(1.02 + var(--scene-progress,0) * .025)); transition:transform 700ms var(--ease); }
.live-screen:hover img { transform:scale(1.065); }
.live-screen-top,.live-screen-bottom { position:absolute; z-index:1; left:27px; right:27px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.live-screen-top { top:24px; font-size:11px; letter-spacing:.06em; }
.live-screen-top>span { font-size:11px; }
.live-screen-bottom { bottom:25px; font:500 clamp(22px,2.7vw,40px)/1.2 var(--body); letter-spacing:-.025em; }
.live-screen-bottom>span { display:inline-flex; align-items:center; gap:11px; font:500 11px/1.5 var(--body); letter-spacing:.04em; }
.live-screen-bottom .icon { width:17px; height:17px; }
.big-play { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; border-radius:50%; border:1px solid #f1eee4c2; background:#17181370; display:grid; place-items:center; transition:background 200ms,color 200ms,transform 280ms var(--ease); }
.big-play .icon { width:35px; height:35px; margin-left:3px; }
.live-screen:hover .big-play { transform:translate(-50%,-50%) scale(1.1); background:var(--orange); color:var(--ink); border-color:var(--orange); }
.live-caption { display:grid; grid-template-columns:1fr 1.1fr .7fr; gap:24px 55px; align-items:start; padding-top:33px; }
.live-caption h3 { font:500 clamp(26px,2.8vw,40px)/1.12 var(--body); letter-spacing:-.03em; }
.live-caption>p { color:#c3c6b9; font-size:14px; line-height:1.9; }
.set-details { display:flex; gap:35px; padding:4px 0 0; font-size:11px; letter-spacing:.04em; }
.set-details strong { display:block; margin-top:7px; font:500 18px/1.4 var(--body); letter-spacing:-.02em; }
.live-caption .text-link { grid-column:3; margin-top:-12px; border-color:var(--line); font-size:12px; }
.live-caption .text-link:hover { color:var(--orange); }
.agenda-section { padding-top:75px; padding-bottom:84px; border-bottom:1px solid var(--dark-line); }
.agenda-intro { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.agenda-intro h2 { font-size:clamp(44px,5.5vw,80px); }
.agenda-intro>p { max-width:285px; font-size:14px; line-height:1.85; color:#515649; }
.next-dates { display:grid; grid-template-columns:170px 1fr auto; gap:27px; margin-top:34px; padding-top:25px; border-top:1px solid var(--dark-line); }
.next-label { display:flex; align-items:center; gap:9px; font-size:11px; }
.next-dates>p { font-size:15px; }
.next-dates small { display:block; margin-top:6px; font-size:13px; color:#515649; }
.next-dates .text-link { font-size:12px; align-self:start; padding-top:0; }

/* A portrait, printed at editorial scale. */
.about { padding-top:92px; padding-bottom:90px; }
.about-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(45px,7vw,110px); align-items:center; }
.about-portrait { width:100%; }
.about-portrait img { width:100%; height:auto; aspect-ratio:3/4; max-height:780px; object-position:center 25%; }
.about-portrait figcaption { padding-top:13px; font-size:11px; letter-spacing:.045em; color:#555a4d; }
.about-editorial { min-width:0; }
.about-heading { margin-bottom:29px; }
.about-heading h2 { font-size:clamp(43px,5.1vw,77px); }
.about-story .lead { color:var(--ink); font:500 clamp(21px,2.1vw,30px)/1.5 var(--serif); letter-spacing:-.025em; margin-bottom:25px; }
.about-story p:not(.lead) { color:#515649; font-size:14px; line-height:1.9; margin-bottom:17px; }
.about-story .text-link { margin-top:8px; }
.artist-notes { display:flex; flex-wrap:wrap; justify-content:space-between; gap:23px; margin:32px 0 0; border-top:1px solid var(--dark-line); padding-top:23px; }
.artist-notes dt { font-size:11px; color:#515649; letter-spacing:.04em; margin-bottom:6px; }
.artist-notes dd { font:500 15px/1.5 var(--body); letter-spacing:-.02em; margin:0; }
.artist-notes dd>span { display:block; font:400 11px/1.7 var(--body); color:#515649; margin-top:3px; letter-spacing:0; }
.social-strip { margin-top:42px; padding-top:24px; border-top:1px solid var(--dark-line); display:flex; align-items:center; flex-wrap:wrap; gap:15px 28px; font-size:13px; }
.social-strip>span { margin-right:auto; color:#515649; font-size:11px; letter-spacing:.045em; }
.social-strip a { display:inline-flex; align-items:center; gap:10px; min-height:30px; }
.social-strip .icon { width:15px; height:15px; }
.social-strip a:hover { color:#a92c0a; }
.press-banner { display:grid; grid-template-columns:130px minmax(0,1.2fr) minmax(0,1fr); gap:5%; align-items:center; background:var(--ink); color:var(--paper); padding-top:62px; padding-bottom:62px; }
.press-stamp { width:110px; height:140px; display:grid; align-content:center; justify-items:center; background:var(--orange); color:var(--ink); transform:rotate(-7deg); font:700 108px/.8 var(--display); }
.press-stamp>span { margin-top:12px; font:600 11px/1.4 var(--body); letter-spacing:.12em; }
.press-banner h2 { font-size:clamp(40px,4.5vw,66px); }
.press-copy p { color:#c7cabb; font-size:14px; line-height:1.8; margin-bottom:22px; }
.press-copy .button { width:100%; font-size:13px; }

/* Booking reads like an invitation, with a guided way to begin. */
.contact { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:8%; align-items:start; }
.contact h2 { font-size:clamp(48px,5.5vw,82px); }
.contact-copy>p { max-width:36ch; color:#515649; font-size:15px; margin:29px 0; }
.contact-email { display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:390px; border-bottom:1px solid var(--dark-line); padding-bottom:13px; font:500 clamp(20px,2vw,30px)/1.5 var(--body); letter-spacing:-.03em; }
.contact-email .icon { width:21px; height:21px; }
.shop-link { margin-top:41px; }
.shop-link>span { display:block; font-size:11px; color:#515649; letter-spacing:.04em; margin-bottom:5px; }
.shop-link a { display:inline-flex; align-items:center; gap:21px; min-height:35px; font-size:13px; }
.shop-link .icon { width:15px; height:15px; }
.booking-form { min-width:0; padding:clamp(25px,3vw,44px); background:#faf8f0; color:var(--ink); border:1px solid var(--dark-line); }
.form-intro { display:flex; align-items:start; justify-content:space-between; gap:22px; padding-bottom:27px; margin-bottom:27px; border-bottom:1px solid var(--dark-line); }
.form-intro strong { display:block; font:500 clamp(23px,2.3vw,34px)/1.15 var(--body); letter-spacing:-.035em; }
.invitation-stamp { display:grid; place-items:center; width:57px; height:69px; flex-shrink:0; border:1px dashed #17181366; color:var(--ink); font:700 46px/.9 var(--serif); transform:rotate(5deg); }
.booking-kinds { margin:0 0 28px; padding:0; border:0; }
.booking-kinds legend { font-size:12px; font-weight:500; margin-bottom:12px; }
.booking-kinds>div { display:flex; flex-wrap:wrap; gap:8px; }
.booking-kinds button { display:inline-flex; min-height:44px; align-items:center; border:1px solid #17181340; color:var(--ink); background:transparent; padding:8px 10px; font-size:12px; line-height:1.4; transition:background 180ms,border-color 180ms; }
.booking-kinds button:hover { border-color:var(--ink); }
.booking-kinds button[aria-pressed=true] { background:var(--orange); border-color:var(--orange); }
.field-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:23px; }
.booking-form label { display:block; color:var(--ink); font-size:11px; font-weight:500; margin-bottom:21px; }
.booking-form input:not([type=hidden]),.booking-form textarea { display:block; width:100%; min-width:0; padding:10px 0 11px; border:0; border-bottom:1px solid #1718135e; background:transparent; color:var(--ink); color-scheme:light; font:400 14px/1.6 var(--body); outline:none; transition:border-color 180ms; }
.booking-form input::placeholder,.booking-form textarea::placeholder { color:#686e5f; opacity:1; }
.booking-form input:focus,.booking-form textarea:focus { border-color:#a92c0a; }
.booking-form textarea { min-height:100px; resize:vertical; }
.booking-form .button { width:100%; }
.form-note,.form-status { color:#555b4d; font-size:11px; line-height:1.7; margin-top:13px; }
.field-error { display:block; color:#9c2e10; font-size:11px; line-height:1.6; margin-top:6px; }
.review-heading { display:flex; align-items:center; gap:13px; }
.review-heading h3 { font-size:27px; }
.review-check { width:32px; height:32px; display:grid; place-items:center; flex-shrink:0; background:var(--orange); border-radius:50%; }
.review-check .icon { width:18px; height:18px; }
.review-intro { color:#515649; font-size:13px; margin:17px 0 23px; }
.review-details { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.review-details>div { min-width:0; }
.review-details dt { font-size:11px; color:#555b4d; }
.review-details dd { font-size:13px; margin:4px 0 0; overflow-wrap:anywhere; }
.review-message { white-space:pre-wrap; overflow-wrap:anywhere; border-top:1px solid var(--dark-line); padding-top:18px; margin:22px 0; font-size:13px; color:#515649; }
.review-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.review-actions .button { grid-column:1/-1; }
.edit-request,.copy-request { min-height:44px; padding:9px 0; border:0; border-bottom:1px solid #17181370; background:none; color:var(--ink); font-size:12px; }

/* A signed orange back cover. */
.footer { padding:40px 4% 24px; background:var(--orange); color:var(--ink); }
.footer-main { display:grid; grid-template-columns:1fr auto; align-items:end; gap:26px 50px; }
.footer-logo { grid-column:1/-1; font:800 clamp(100px,25vw,450px)/.78 var(--display); letter-spacing:-.035em; border-bottom:1px solid #1718134a; padding-bottom:30px; white-space:nowrap; }
.footer-logo>span { font-weight:600; }
.footer-main>div { display:flex; align-items:end; justify-content:space-between; gap:35px; }
.footer-main p { font:500 clamp(24px,3vw,44px)/1.1 var(--body); letter-spacing:-.035em; }
.footer-main p em { font:italic 500 .88em/1.4 var(--serif); }
.footer-booking { display:inline-flex; align-items:center; gap:30px; font-size:13px; padding:10px 0; border-bottom:1px solid var(--ink); }
.footer-booking .icon { width:18px; height:18px; }
.footer-back { display:grid; place-items:center; width:57px; height:57px; border:1px solid var(--ink); border-radius:50%; transition:background 180ms,color 180ms; }
.footer-back .icon { transform:rotate(180deg); width:23px; height:23px; }
.footer-back:hover { background:var(--ink); color:var(--orange); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:22px; border-top:1px solid #1718134a; margin-top:31px; padding-top:19px; font-size:11px; }
.footer-bottom>span { margin-right:auto; }
.footer-bottom a { display:inline-flex; align-items:center; gap:7px; min-height:28px; }
.footer-bottom .icon { width:13px; height:13px; }

/* Full frames for media; controls remain visible while the content loads. */
.video-dialog,.photo-dialog { position:fixed; margin:auto; padding:0; border:1px solid #f1eee440; width:min(1160px,94vw); max-width:none; max-height:94svh; overflow:auto; background:var(--ink); color:var(--paper); box-shadow:0 22px 85px #0007; }
.video-dialog::backdrop,.photo-dialog::backdrop { background:#080906e8; }
.video-dialog-head,.photo-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:22px 27px; }
.media-heading { min-width:0; }
.media-category { display:block; color:var(--muted); font-size:11px; line-height:1.5; margin-bottom:6px; }
.video-dialog-head h2,.photo-dialog-head h2 { font:500 22px/1.3 var(--body); letter-spacing:-.025em; }
.close-video,.close-photo { display:inline-flex; align-items:center; justify-content:center; gap:17px; padding:10px 15px; min-height:44px; border:1px solid #f1eee455; background:none; color:var(--paper); font-size:12px; flex-shrink:0; transition:background 180ms,color 180ms; }
.close-video:hover,.close-photo:hover { background:var(--paper); color:var(--ink); }
.close-video .icon,.close-photo .icon { width:21px; height:21px; }
.video-frame { position:relative; isolation:isolate; aspect-ratio:16/9; width:100%; background:#080906; }
.video-frame iframe { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1; border:0; }
.media-loading { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:25px; font-size:13px; color:var(--muted); text-align:center; }
.loading-mark { display:none; }
.media-wait { position:absolute; z-index:2; bottom:12px; left:12px; right:12px; padding:12px 16px; color:var(--paper); background:#171813ef; border:1px solid #f1eee440; font-size:12px; line-height:1.5; }
.video-dialog-foot { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:17px 27px; font-size:12px; }
.video-dialog-foot>span { color:var(--muted); font-size:11px; letter-spacing:.05em; }
.video-dialog-foot a { display:inline-flex; align-items:center; gap:15px; min-height:35px; }
.video-dialog-foot .icon { width:17px; height:17px; }
.photo-stage { position:relative; background:#0b0c09; overflow:hidden; display:grid; place-items:center; min-height:200px; touch-action:pan-y; }
.photo-stage>img { width:100%; height:min(64svh,680px); object-fit:contain; }
.photo-dialog-foot { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:17px 25px; }
.photo-download { display:inline-flex; align-items:center; gap:12px; font-size:13px; padding:10px 0; }
.photo-counter { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Animation is a scene change, never a condition for reading the page. */
.js .reveal { opacity:1; transform:none; transition:opacity 600ms var(--ease),transform 800ms var(--ease); }
.js .reveal:not(.visible) { opacity:.65; transform:translateY(20px); }
.js [data-reveal=image] { transition:clip-path 900ms var(--ease),opacity 650ms var(--ease),transform 800ms var(--ease); }
.js [data-reveal=image]:not(.visible) { clip-path:inset(0 0 6%); }
.js [data-reveal=image].visible { clip-path:inset(-12% -12%); }
.sleeve.switching { animation:sleeve-in 450ms var(--ease); }
.paused *,.paused *::before,.paused *::after { animation:none!important; transition:none!important; }
.paused .hero-photo,.paused .hero h1,.paused .live-screen img { transform:none!important; }
.paused .reveal,.paused .reveal .split-title>span { opacity:1!important; transform:none!important; clip-path:none!important; }
@keyframes scene-arrive { from { clip-path:inset(0 0 2% 4%); } to { clip-path:inset(0); } }
@keyframes lettering-arrive { from { clip-path:inset(0 0 18%); transform:translateY(12px); } to { clip-path:inset(0); transform:none; } }
@keyframes ticker { to { transform:translateX(-50%); } }
@keyframes sleeve-in { from { opacity:.6; transform:translateX(-12px); } to { opacity:1; transform:none; } }

@media(min-width:1800px) {
  .section { padding-left:max(var(--gutter),calc((100vw - 1580px)/2)); padding-right:max(var(--gutter),calc((100vw - 1580px)/2)); }
}
@media(max-width:1150px) {
  .wordmark .brand-alias { display:none; }
  .header { gap:18px; }
  .header nav { gap:18px; }
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); min-height:660px; }
  .hero-identity { padding:32px 27px 18px; }
  .hero h1 { font-size:15vw; }
  .hero-line { font-size:29px; }
  .hero-genres { font-size:11px; }
  .hero-signature { display:block; margin-top:22px; }
  .hero-signature>span { display:block; }
  .hero-signature .motion-toggle { margin-top:3px; }
  .record-crate { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:30px; }
  .record-display { padding:27px; }
  .tracks { gap:20px 13px; }
  .track .track-info,.track>span:nth-of-type(2) { font-size:12px; }
  .track small { font-size:11px; }
  .live-caption { gap:24px 30px; grid-template-columns:1fr 1fr .7fr; }
  .set-details { gap:22px; }
  .about-body { gap:45px; }
  .about-story .lead { font-size:23px; }
  .artist-notes { gap:18px; }
  .press-banner { grid-template-columns:100px 1.2fr 1fr; gap:4%; }
  .press-stamp { width:88px; height:120px; font-size:88px; }
  .contact { gap:6%; grid-template-columns:.85fr 1.15fr; }
  .booking-form { padding:27px; }
}
@media(max-width:900px) {
  :root { --header-height:68px; }
  .header { padding:0 4%; gap:15px; }
  .wordmark strong { font-size:14px; }
  .wordmark .brand-mark { width:34px; height:34px; font-size:31px; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; border:1px solid var(--dark-line); padding:7px 12px; background:none; color:var(--ink); font-size:12px; order:3; margin-left:auto; }
  .menu-toggle .icon { width:20px; height:20px; }
  .header nav { display:none; position:fixed; inset:0; height:100dvh; overflow-y:auto; margin:0; z-index:50; background:var(--paper); padding:74px 7% 30px; flex-direction:column; align-items:stretch; justify-content:start; gap:0; transform-origin:top right; }
  .header nav.open { display:flex; }
  .header nav>a:not(.button) { padding:12px 0; min-height:66px; font:500 clamp(28px,6vw,45px)/1.2 var(--body); letter-spacing:-.035em; border-bottom:1px solid var(--dark-line); }
  .header nav>a:not(.button)::after { width:42px; right:auto; bottom:-1px; }
  .header nav>a .icon { width:22px; height:22px; }
  .header nav>.button { margin-top:24px; min-height:55px; }
  .menu-close { position:absolute; top:17px; right:7%; display:flex; align-items:center; gap:15px; border:0; padding:7px 0 7px 12px; min-height:44px; background:none; color:inherit; font-size:12px; }
  .menu-note { display:block; margin-top:auto; padding-top:27px; font-size:13px; color:#515649; }
  .menu-note em { font:italic 500 21px/1.6 var(--serif); color:var(--ink); }
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); height:690px; min-height:0; }
  .hero-identity { padding:28px 24px 17px; }
  .hero h1 { font-size:17.5vw; }
  .hero-copy { padding-top:30px; }
  .hero-line { font-size:29px; }
  .hero-photo-caption { padding:0 17px; gap:14px; }
  .hero-photo-caption>span:nth-child(2) { display:none; }
  .hero-photo { background-position:52% 51%; }
  .section-heading { gap:35px; }
  .music-intro { max-width:250px; }
  .record-crate { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:27px; }
  .record-display { padding:25px; }
  .tracks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px 15px; }
  .track .track-info,.track>span:nth-of-type(2) { font-size:13px; }
  .record-current-title { font-size:25px; }
  .tracklist-heading h3 { font-size:21px; }
  .live-section .section-heading>p { max-width:260px; font-size:14px; }
  .live-screen { aspect-ratio:16/10; }
  .live-caption { grid-template-columns:1fr 1fr; gap:24px 35px; }
  .live-caption h3 { font-size:29px; }
  .live-caption .text-link { grid-column:2; margin-top:0; }
  .set-details { border-top:1px solid var(--line); padding-top:17px; gap:50px; }
  .about-body { gap:35px; align-items:start; }
  .about-story .lead { font-size:20px; }
  .about-story p:not(.lead) { font-size:13px; }
  .artist-notes { gap:17px 25px; }
  .artist-notes dd { font-size:14px; }
  .press-banner { grid-template-columns:1.2fr 1fr; gap:6%; }
  .press-stamp { display:none; }
  .contact { grid-template-columns:1fr; gap:38px; }
  .contact-copy { display:grid; grid-template-columns:1fr 1fr; gap:21px 35px; align-items:start; }
  .contact-copy>p { margin:0; }
  .contact-email { font-size:23px; }
  .shop-link { margin-top:0; }
  .booking-form { padding:35px; }
  .footer-main>div { display:block; }
  .footer-booking { margin-top:17px; }
}
@media(max-width:650px) {
  :root { --gutter:24px; }
  h2 { font-size:clamp(47px,12vw,72px); }
  .header { padding:0 6%; gap:12px; }
  .wordmark { gap:10px; }
  .wordmark strong { font-size:13px; }
  .wordmark .brand-mark { width:32px; height:32px; font-size:29px; }
  .hero { height:auto; max-height:none; display:flex; flex-direction:column; }
  .hero-visual { order:0; border-left:0; grid-template-rows:minmax(0,1fr) 44px; height:clamp(325px,51svh,465px); }
  .hero-photo { background-position:51.5% 56%; }
  .hero-photo-caption { padding:0 20px; font-size:11px; }
  .hero-photo-caption>span:nth-child(2) { display:block; max-width:45%; font-size:11px; text-align:right; line-height:1.3; }
  .hero-photo-caption>a { display:none; }
  .hero-identity { order:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px 19px; padding:26px 6% 18px; }
  .hero h1 { font-size:clamp(64px,24vw,136px); line-height:.78; margin:0; align-self:center; }
  .hero h1>span { display:block; }
  .hero h1>span:first-child { font-size:.5em; line-height:.85; }
  .hero h1>span+span { margin:.08em 0 0; }
  .hero-copy { padding-top:0; align-self:center; }
  .hero-line { font-size:clamp(20px,5.4vw,31px); line-height:1.2; }
  .hero-genres { font-size:11px; line-height:1.6; max-width:24ch; margin-top:10px; }
  .hero-actions { grid-column:1/-1; grid-template-columns:1fr 1fr; gap:10px; padding-top:0; margin-top:0; }
  .hero-actions .button { font-size:12px; min-height:47px; padding:13px 11px; gap:8px; }
  .hero-actions .button .icon { width:17px; height:17px; }
  .hero-signature { grid-column:1/-1; margin-top:0; padding-top:11px; display:flex; align-items:center; gap:7px; }
  .hero-signature>span { font-size:11px; }
  .hero-signature .motion-toggle { margin-top:0; font-size:12px; }
  .ticker { padding:12px 0; }
  .ticker>div>span { min-width:750px; gap:29px; padding-right:29px; font-size:22px; }
  .section { padding-top:62px; padding-bottom:62px; }
  .section-heading { display:block; margin-bottom:30px; }
  .music-intro { max-width:none; margin-top:25px; }
  .music-intro>p { max-width:37ch; font-size:14px; }
  .music-intro .text-link { width:auto; margin-top:12px; }
  .record-crate { display:flex; flex-direction:column; gap:32px; }
  .record-display { position:relative; top:auto; width:100%; padding:25px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:0 23px; align-items:start; }
  .record-cover-hit { grid-column:1; grid-row:1; padding-right:20%; align-self:center; }
  .record-caption { grid-column:2; margin-top:0; }
  .record-current-title { font-size:21px; line-height:1.25; }
  .record-caption>span { font-size:11px; line-height:1.6; }
  .record-controls { grid-column:1/-1; gap:15px; padding-top:17px; margin-top:21px; }
  .record-controls button { height:44px; width:44px; }
  .record-controls .icon { width:15px; height:15px; }
  #record-number { font-size:12px; letter-spacing:.02em; white-space:nowrap; }
  .record-platforms { grid-column:1/-1; margin-top:16px; gap:8px 17px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; }
  .record-platforms a { min-height:44px; }
  .listening-action { grid-column:1/-1; margin-top:13px; }
  .listening-action .button { font-size:13px; min-height:49px; }
  .player-note { font-size:11px; }
  .tracklist { width:100%; }
  .tracklist-heading { margin-bottom:22px; }
  .tracklist-heading h3 { font-size:25px; }
  .tracklist-heading>span { font-size:11px; }
  .tracks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 18px; }
  .track .track-info,.track>span:nth-of-type(2) { font-size:15px; line-height:1.4; }
  .track small { font-size:11px; }
  .track-num { font-size:11px; top:8px; left:8px; }
  .track-art { margin-bottom:12px; }
  .track-symbol .icon { width:16px; height:16px; }
  .session-line { margin-top:31px; padding-top:22px; gap:12px 24px; font-size:12px; }
  .session-line>span { width:100%; font-size:11px; }
  .session-line a { min-height:44px; }
  .live-section .section-heading { margin-bottom:31px; }
  .live-section h2 { font-size:clamp(49px,12vw,75px); }
  .live-section .section-heading>p { max-width:38ch; margin-top:24px; font-size:14px; }
  .live-screen { margin-left:-24px; width:calc(100% + 48px); aspect-ratio:4/4.2; }
  .live-screen img { object-position:51.5% 52%; }
  .live-screen-top { top:20px; left:20px; right:20px; font-size:11px; }
  .live-screen-top>span { font-size:11px; }
  .live-screen-bottom { display:block; bottom:23px; left:23px; right:23px; font-size:26px; max-width:12ch; }
  .live-screen-bottom>span { margin-top:10px; font-size:11px; }
  .big-play { width:76px; height:76px; }
  .big-play .icon { width:29px; height:29px; }
  .live-caption { display:block; padding-top:29px; }
  .live-caption h3 { font-size:31px; }
  .live-caption>p { margin-top:21px; font-size:14px; }
  .set-details { margin-top:25px; padding-top:19px; gap:65px; }
  .live-caption .text-link { width:100%; margin-top:22px; font-size:13px; }
  .agenda-intro { display:block; }
  .agenda-intro h2 { font-size:clamp(47px,11.5vw,68px); }
  .agenda-intro>p { margin-top:24px; max-width:35ch; font-size:14px; }
  .next-dates { grid-template-columns:1fr; gap:15px; }
  .next-dates .text-link { justify-self:start; }
  .about-body { display:flex; flex-direction:column; gap:33px; }
  .about-portrait { width:87%; align-self:start; }
  .about-portrait img { max-height:650px; object-position:center 23%; }
  .about-portrait figcaption { font-size:11px; }
  .about-heading { margin-bottom:24px; }
  .about-heading h2 { font-size:clamp(47px,12vw,68px); }
  .about-story .lead { font-size:23px; line-height:1.55; }
  .about-story p:not(.lead) { font-size:14px; line-height:1.9; }
  .artist-notes { display:grid; grid-template-columns:1fr 1fr; gap:23px; padding-top:23px; margin-top:29px; }
  .artist-notes dd { font-size:16px; }
  .artist-notes dt { font-size:11px; }
  .artist-notes dd>span { font-size:11px; }
  .social-strip { margin-top:30px; padding-top:23px; gap:12px 25px; font-size:12px; }
  .social-strip>span { width:100%; font-size:11px; }
  .social-strip a { min-height:44px; }
  .press-banner { grid-template-columns:1fr; gap:25px; }
  .press-banner h2 { font-size:50px; }
  .press-copy p { max-width:39ch; font-size:14px; }
  .contact-copy { display:block; }
  .contact h2 { font-size:clamp(48px,12vw,73px); }
  .contact-copy>p { margin:26px 0; max-width:37ch; font-size:14px; }
  .contact-email { max-width:none; font-size:clamp(21px,6vw,29px); }
  .shop-link { margin-top:28px; }
  .shop-link a { min-height:44px; }
  .booking-form { padding:25px 22px; }
  .form-intro { margin-bottom:24px; padding-bottom:24px; }
  .form-intro strong { font-size:25px; }
  .invitation-stamp { width:48px; height:60px; font-size:40px; }
  .booking-kinds { margin-bottom:26px; }
  .booking-kinds legend { font-size:12px; }
  .booking-kinds button { font-size:12px; padding:9px 10px; }
  .field-pair { gap:19px; }
  .booking-form label { font-size:11px; }
  .booking-form input:not([type=hidden]),.booking-form textarea { font-size:16px; }
  .booking-form .button { font-size:13px; }
  .form-note { font-size:11px; }
  .footer { padding:31px 6% 22px; }
  .footer-logo { font-size:25.6vw; line-height:.85; padding-bottom:22px; }
  .footer-main { gap:23px; }
  .footer-main p { font-size:25px; }
  .footer-booking { font-size:12px; gap:20px; margin-top:16px; min-height:44px; }
  .footer-back { width:43px; height:43px; align-self:start; }
  .footer-back .icon { width:19px; height:19px; }
  .footer-bottom { margin-top:28px; padding-top:17px; gap:13px 22px; font-size:12px; }
  .footer-bottom a { min-height:44px; }
  .footer-bottom>span { width:100%; }
  .video-dialog,.photo-dialog { width:calc(100vw - 24px); max-height:94svh; }
  .video-dialog-head,.photo-dialog-head { padding:16px; gap:15px; }
  .video-dialog-head h2,.photo-dialog-head h2 { font-size:17px; }
  .close-video,.close-photo { padding:9px 10px; min-height:44px; gap:8px; font-size:12px; }
  .close-video .icon,.close-photo .icon { width:18px; height:18px; }
  .video-dialog-foot { flex-wrap:wrap; padding:12px 16px; gap:8px 19px; font-size:12px; }
  .video-dialog-foot a { min-height:44px; }
  .video-dialog-foot>span { font-size:11px; }
  .video-dialog-foot .icon { width:15px; height:15px; }
  .media-loading { gap:11px; font-size:12px; padding:20px; }
  .photo-stage>img { height:min(60svh,540px); }
  .photo-dialog-foot { flex-wrap:wrap; padding:14px 16px; gap:12px 18px; }
}
@media(max-width:360px) {
  :root { --gutter:20px; }
  .header { gap:8px; }
  .wordmark { gap:8px; }
  .wordmark strong { font-size:12px; }
  .hero-visual { height:330px; }
  .hero-identity { gap:18px 15px; padding-top:23px; }
  .hero h1 { font-size:24vw; }
  .hero-line { font-size:19px; }
  .hero-genres { font-size:11px; }
  .hero-actions .button { font-size:12px; padding:12px 10px; gap:6px; }
  .hero-actions .button .icon { width:15px; height:15px; }
  .hero-signature .motion-toggle { font-size:12px; }
  .record-display { padding:22px 19px; gap:0 17px; }
  .record-current-title { font-size:18px; }
  .record-caption>span { font-size:11px; }
  .record-controls button { width:44px; height:44px; }
  #record-number { font-size:12px; }
  .record-platforms { column-gap:14px; font-size:12px; }
  .tracks { gap:23px 14px; }
  .track .track-info,.track>span:nth-of-type(2) { font-size:13px; }
  .track small { font-size:11px; }
  .live-screen { margin-left:-20px; width:calc(100% + 40px); }
  .live-screen-top>span { display:none; }
  .about-story .lead { font-size:21px; }
  .booking-form { padding:23px 18px; }
  .field-pair { grid-template-columns:1fr; gap:0; }
  .form-intro strong { font-size:23px; }
  .invitation-stamp { width:43px; height:55px; font-size:36px; }
  .footer-main p { font-size:23px; }
  .footer-booking { font-size:12px; gap:13px; }
  .hero-photo-caption>span:nth-child(2) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .hero-photo,.hero h1,.live-screen img { transform:none!important; }
  .js .reveal,.js .reveal .split-title>span { opacity:1!important; transform:none!important; clip-path:none!important; }
}
@media print {
  body { background:white; color:#111; font-size:11pt; }
  .header,.press-tools,.no-print,.footer,.icon-library,dialog { display:none!important; }
  .js .reveal { opacity:1!important; transform:none!important; clip-path:none!important; }
}
