/* Dove Court · public pages.
   City light smeared from a moving car, a mirror ball full of faces: the band's own two images. Night that leans
   brown-green, warm white and sodium light; the wordmark's cream, cyan and ember. One accent (ember) per screen.
   Two peaks on the home page: the wordmark over the lights, then the single. Motion is the artwork's: inks off
   register, light moving across the mirror ball, the city sliding past. Nothing fades in section by section. */

:root{
  color-scheme:dark;
  --night:#0C0A07;
  --night-2:#15120D;
  --night-3:#1E1A13;
  --paper:#F3EAD6;          /* text */
  --dim:#CBBFA6;
  --faint:#A69A83;
  --line:rgba(243,234,214,.13);
  --line-2:rgba(243,234,214,.26);
  --cream:#FFEBA2;          /* the wordmark */
  --haze:#8FB0B5;           /* the wordmark's cool shadow */
  --ember:#F0643A;          /* the accent: the one thing to press */
  --ember-hi:#FF7B52;
  --ember-ink:#160803;
  --sodium:#E39A4B;         /* streetlight, used as a line only */
  --display:'Fraunces', 'Cooper Black', Georgia, serif;
  --text:'Fraunces', Georgia, 'Times New Roman', serif;   /* the wordmark's family in its soft text cut */
  --mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pad:clamp(1rem, 5vw, 3rem);
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --sx:0em; --sy:0em;       /* the wordmark's inks, nudged by the pointer */
}
@property --gx{syntax:'<percentage>'; inherits:false; initial-value:30%}
@property --gy{syntax:'<percentage>'; inherits:false; initial-value:22%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--night); color:var(--paper); font:400 1.0625rem/1.6 var(--text); font-optical-sizing:auto; font-variation-settings:'SOFT' 100, 'WONK' 1; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration-color:rgba(255,235,162,.45); text-underline-offset:.18em; transition:color .2s, text-decoration-color .2s}
a:hover{text-decoration-color:var(--cream)}
:focus-visible{outline:2px solid var(--cream); outline-offset:3px; border-radius:2px}
::selection{background:var(--cream); color:var(--night)}
*{scrollbar-width:thin; scrollbar-color:#3A3024 var(--night)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:#3A3024; border:3px solid var(--night); border-radius:99px}
h1,h2,h3,p{margin:0}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.mono{font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:.5rem; z-index:20; background:var(--cream); color:var(--night); padding:.6rem 1rem; border-radius:2px}
.skip:focus{left:.5rem}

/* ---- the wordmark, set in type: heavy, soft and leaning, like the band's artwork ---- */
.dc{display:inline-block; font-family:var(--display); font-style:italic; font-weight:900; font-variation-settings:'SOFT' 100, 'WONK' 0, 'opsz' 144;
    text-transform:uppercase; line-height:.86; letter-spacing:-.01em; color:var(--cream); white-space:nowrap}
.dc-d,.dc-c{display:block}
.dc-d{text-shadow:calc(-.055em + var(--sx)) calc(.035em + var(--sy)) 0 var(--haze), 0 0 .28em rgba(255,235,162,.28)}
.dc-c{font-size:.6em; padding-left:.95em; margin-top:.06em;
      text-shadow:calc(-.07em - var(--sx)) calc(.025em - var(--sy)) 0 var(--ember), 0 0 .35em rgba(240,100,58,.5)}
.dc.line .dc-d,.dc.line .dc-c{display:inline}
.dc.line .dc-c{font-size:1em; padding-left:.28em; margin:0}

/* On load: the two shadows slide out from under the letters, a print going off register. After that the pointer
   moves them (public.js writes --sx and --sy on the hero mark). */
@keyframes misreg-d{from{text-shadow:0 0 0 var(--haze), 0 0 0 rgba(255,235,162,0)}}
@keyframes misreg-c{from{text-shadow:0 0 0 var(--ember), 0 0 0 rgba(240,100,58,0)}}
.hero-mark:not(.landed) .dc-d{animation:misreg-d 1.1s var(--ease) .25s both}
.hero-mark:not(.landed) .dc-c{animation:misreg-c 1.1s var(--ease) .4s both}
@media (prefers-reduced-motion:reduce){.hero-mark .dc-d,.hero-mark .dc-c{animation:none}}

/* ---- buttons and chips ---- */
.btns{display:flex; flex-wrap:wrap; gap:.65rem}
.btns.center{justify-content:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:50px; padding:.7rem 1.4rem;
     border:1px solid var(--line-2); border-radius:999px; background:transparent; color:var(--paper);
     font:500 .8rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer;
     transition:border-color .2s, background .2s, color .2s, transform .15s var(--ease)}
.btn:hover{border-color:var(--cream); background:var(--cream); color:var(--night)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--ember); border-color:var(--ember); color:var(--ember-ink); font-weight:500}
.btn.solid:hover{background:var(--ember-hi); border-color:var(--ember-hi); color:var(--ember-ink)}
.btn[disabled]{opacity:.5; cursor:default}
.chip{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.55rem 1rem; border:1px solid var(--line-2);
      border-radius:999px; font:500 .76rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--dim);
      transition:border-color .2s, color .2s, background .2s}
.chip:hover{color:var(--night); background:var(--cream); border-color:var(--cream)}
.row-links{display:flex; flex-wrap:wrap; gap:.55rem}
.ico{width:20px; height:20px; flex:none}

/* ---- top bar: sits on the lights, then darkens once the page scrolls ---- */
.top{position:fixed; inset:0 0 auto; z-index:5; border-bottom:1px solid transparent; background:rgba(12,10,7,0);
     transition:background .3s, border-color .3s}
.top.scrolled{background:rgba(12,10,7,.78); border-bottom-color:var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
@supports (animation-timeline: scroll()){
  .top{animation:topbar linear both; animation-timeline:scroll(root); animation-range:0 180px; transition:none}
  @keyframes topbar{to{background:rgba(12,10,7,.78); border-bottom-color:var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}}
}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.top-mark{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:1.05rem}
.top-mark .dc{font-size:1.05rem}
.top nav{display:flex; gap:.1rem}
.top nav a{position:relative; font:500 .74rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-decoration:none;
           padding:.95rem .6rem; min-height:44px; display:inline-flex; align-items:center}
.top nav a::after{content:''; position:absolute; left:.6rem; right:.6rem; bottom:.7rem; height:1px; background:var(--cream); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.top nav a:hover{color:var(--cream)}
.top nav a:hover::after{transform:scaleX(1)}
@media (max-width:420px){.top nav a{padding:.95rem .45rem; letter-spacing:.1em}}

/* ---- hero: the wordmark across the whole width, the city sliding past behind it ---- */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; padding:clamp(6.5rem,16vh,10rem) 0 clamp(2rem,5vh,3.5rem);
      overflow:hidden; isolation:isolate}
.hero-lights{position:absolute; inset:-14% 0; z-index:-1}
.hero-lights i{position:absolute; inset:0; background:url(/assets/lights-top.jpg) center 42% / cover no-repeat; opacity:.92;
               animation:drift 46s var(--ease-io) infinite alternate; will-change:transform}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)} to{transform:scale(1.12) translate3d(-2.5%,1.5%,0)}}
.hero-lights.off i{animation-play-state:paused}
/* a wash under the type: enough to hold contrast, the streaks still bright around it */
.hero-lights::after{content:''; position:absolute; inset:0;
                    background:linear-gradient(180deg,rgba(12,10,7,.78) 0,rgba(12,10,7,.45) 14%,rgba(12,10,7,0) 32%),
                               linear-gradient(0deg,var(--night) 0,rgba(12,10,7,.82) 22%,rgba(12,10,7,0) 58%),
                               radial-gradient(ellipse 70% 60% at 30% 70%,rgba(12,10,7,.6),rgba(12,10,7,0) 70%)}
@supports (animation-timeline: scroll()){
  .hero-lights{animation:sink linear both; animation-timeline:scroll(root); animation-range:0 100vh}
  @keyframes sink{to{transform:translate3d(0,22%,0)}}
}
.hero-in{width:100%}
.place{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.hero-mark{font-size:clamp(5rem,23.5vw,19rem); margin:0 0 clamp(1.6rem,4vh,2.6rem); line-height:.82}
.hero-mark .dc{line-height:.82}
.hero-mark .dc-c{padding-left:.9em}
.hero-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; padding-top:1.4rem; border-top:1px solid var(--line-2)}
.tag{font-family:var(--display); font-weight:600; font-style:italic; font-variation-settings:'SOFT' 100, 'opsz' 48;
     font-size:clamp(1.6rem,3.8vw,2.5rem); line-height:1.1; color:var(--paper); margin:0}
.horizon{position:absolute; left:0; right:0; bottom:0; height:1px;
         background:linear-gradient(90deg,transparent,var(--sodium) 20%,var(--sodium) 80%,transparent); opacity:.55}

/* ---- the strip under the hero: what is out ---- */
.ticker{overflow:hidden; padding:.95rem 0; border-bottom:1px solid var(--line);
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex; width:max-content; animation:tick 42s linear infinite}
.ticker-seg{display:flex; align-items:center; flex:none}
.ticker span{font:500 .76rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); white-space:nowrap; padding:0 .5rem 0 1.1rem}
.ticker span b{color:var(--cream); font-weight:500}
.ticker em{font-style:normal; color:var(--ember); font-size:.5rem; padding:0 .6rem; line-height:1}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
.ticker:hover .ticker-in{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none} .hero-lights i{animation:none}}

/* ---- sections ---- */
.sec{padding:clamp(4rem,9vw,7.5rem) 0; scroll-margin-top:3rem}
.label{display:flex; align-items:center; gap:1.2rem; font:500 .76rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:0 0 clamp(2rem,4vw,3rem)}
.label::after{content:''; flex:1; height:1px; background:var(--line)}
.sub-label{font:500 .72rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:3rem 0 1rem}

/* the single: the mirror ball, and the light that moves across it */
.music{padding-top:clamp(3.5rem,8vw,6rem)}
.rel{display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:center}
@media (min-width:760px){.rel{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,6vw,5rem)}}
.rel-cover{width:100%; border-radius:3px}
.disc{margin:0; width:min(100%,36rem); perspective:1400px; justify-self:center}
.disc-in{position:relative; border-radius:4px; overflow:hidden; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
         transform-style:preserve-3d; transition:transform .7s var(--ease);
         box-shadow:0 1px 0 rgba(255,235,162,.08) inset, 0 50px 90px -35px rgba(0,0,0,.9), 0 20px 40px -20px rgba(0,0,0,.7)}
.disc-in img{border-radius:0}
.gleam{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:var(--go,0); transition:opacity .5s;
       background:radial-gradient(46% 46% at var(--gx) var(--gy), rgba(255,235,162,.34), rgba(255,235,162,.08) 45%, rgba(255,235,162,0) 72%)}
/* no pointer to follow: the light crosses the ball on its own, and the ball turns a little */
.disc.auto .gleam{animation:sweep 9s var(--ease-io) infinite}
@keyframes sweep{0%{--gx:-25%; --gy:5%; opacity:0} 18%{opacity:1} 50%{--gx:55%; --gy:48%} 82%{opacity:1} 100%{--gx:130%; --gy:95%; opacity:0}}
.disc.auto .disc-in{animation:turn 11s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotateY(-4deg) rotateX(2deg)} to{transform:rotateY(4deg) rotateX(-2deg)}}
.disc.off .gleam,.disc.off .disc-in{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.disc.auto .gleam,.disc.auto .disc-in{animation:none}}
.rel-body{min-width:0}
.rel-title{font-family:var(--display); font-weight:800; font-variation-settings:'SOFT' 100, 'opsz' 144;
           font-size:clamp(2.7rem,6.6vw,5.4rem); line-height:.96; letter-spacing:-.015em; color:var(--cream); margin:.7rem 0 1.6rem; text-wrap:balance}
.play{display:inline-flex; align-items:center; gap:.9rem; min-height:64px; padding:.4rem 1.6rem .4rem .45rem; margin:0 0 1.2rem;
      border:1px solid var(--ember); border-radius:999px; background:var(--ember); color:var(--ember-ink); cursor:pointer;
      font:500 .82rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; transition:background .2s, border-color .2s, transform .15s var(--ease)}
.play:hover{background:var(--ember-hi); border-color:var(--ember-hi)}
.play:active{transform:scale(.97)}
.play .disc-btn{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--night); color:var(--cream); transition:transform .3s var(--ease)}
.play:hover .disc-btn{transform:scale(1.06)}
.play .disc-btn svg{width:17px; height:17px; margin-left:3px}
iframe.player{display:block; width:100%; max-width:36rem; height:152px; border:0; border-radius:12px; margin:0 0 1.2rem; animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){iframe.player{animation:none}}

/* live */
.shows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.shows li{display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.shows b{font-family:var(--display); font-weight:700; font-variation-settings:'SOFT' 100; font-size:1.35rem}
.empty{font-family:var(--display); font-weight:700; font-variation-settings:'SOFT' 100, 'opsz' 96; font-size:clamp(1.9rem,5vw,3.6rem); line-height:1.02; color:var(--paper); text-wrap:balance}
.empty[hidden]{display:none}
.live-note{margin-top:1rem; color:var(--dim); font-size:1.05rem}
.bills{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:56rem}
.bills li{display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.bills .y{font:500 .8rem/1.8 var(--mono); color:var(--faint)}
.bills .w{color:var(--paper)}
.bills .w a{font-family:var(--display); font-weight:700; font-variation-settings:'SOFT' 100; font-size:1.3rem; line-height:1.3; text-decoration-thickness:1px}
.bills .w small{display:block; color:var(--dim); font-size:.95rem; margin-top:.15rem}

/* the list: the second light image, the second peak of the scroll */
.list-sec{position:relative; isolation:isolate; overflow:hidden; padding:clamp(5rem,12vw,9rem) 0}
.list-lights{position:absolute; inset:-12% 0; z-index:-1}
.list-lights i{position:absolute; inset:0; background:url(/assets/lights-bottom.jpg) center / cover no-repeat; opacity:.42}
.list-lights::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,var(--night),rgba(12,10,7,.55) 45%,var(--night))}
@supports (animation-timeline: view()){
  .list-lights{animation:pass linear both; animation-timeline:view(); animation-range:entry 0% exit 100%}
  @keyframes pass{from{transform:translate3d(0,-8%,0)} to{transform:translate3d(0,8%,0)}}
}
.signup{max-width:40rem}
.s-head{font-family:var(--display); font-weight:800; font-variation-settings:'SOFT' 100, 'opsz' 144; font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:.96; letter-spacing:-.015em; color:var(--cream); margin:0 0 .8rem}
.s-sub{color:var(--dim); font-size:1.1rem; margin:0 0 1.6rem}
.s-row{display:flex; gap:.5rem; flex-wrap:wrap}
.s-row input{flex:1 1 14rem; min-width:0; min-height:56px; padding:.7rem 1.3rem; border-radius:999px; border:1px solid rgba(243,234,214,.4);
             background:rgba(12,10,7,.8); color:var(--paper); font:inherit; font-size:16px; transition:border-color .2s, box-shadow .2s}
.s-row input::placeholder{color:var(--faint)}
.s-row input:focus{outline:none; border-color:var(--cream); box-shadow:0 0 0 3px rgba(255,235,162,.14)}
.s-row input[aria-invalid="true"]{border-color:#FF9C7A}
.s-row .btn{min-height:56px; padding-inline:1.7rem}
.s-note{min-height:1.6em; margin-top:.8rem; font-size:.98rem; color:var(--dim)}
.s-note.err{color:#FF9C7A}
.signup.done .s-row{display:none}
.signup.done .s-note{color:var(--cream); font-family:var(--display); font-weight:700; font-size:1.5rem; animation:rise .5s var(--ease) both}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* contact */
.contacts{display:grid; gap:2.2rem}
@media (min-width:760px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem}}
.contact{border-top:1px solid var(--line-2); padding-top:1.1rem}
.contact .role{margin-bottom:.6rem}
.contact .who{color:var(--dim); margin-bottom:.35rem}
.contact .mail{display:inline-block; font-family:var(--display); font-weight:700; font-variation-settings:'SOFT' 100, 'opsz' 96; font-size:clamp(1.35rem,3.2vw,2.1rem);
               line-height:1.15; color:var(--paper); word-break:break-word; margin-bottom:1rem; padding:.5rem 0; min-height:44px; text-decoration-color:rgba(255,235,162,.3)}
.contact .mail:hover{color:var(--cream)}
.contact .btns{gap:.5rem}
.contact .btn{min-height:44px; padding:.6rem 1rem; font-size:.72rem}
.copied{min-height:1.4em; margin-top:.5rem; font-size:.9rem; color:var(--cream)}
.contact.small .mail{font-size:1.1rem; margin-bottom:.6rem}

/* footer */
.foot{border-top:1px solid var(--line); padding:2.5rem 0 3rem}
.foot-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; color:var(--faint); font-size:.92rem}
.foot .dc{font-size:1.5rem}
.foot p{margin:0}
.foot a{color:var(--dim); display:inline-block; padding:.6rem .1rem}

/* ---- /links ---- */
.links-page{background:var(--night)}
.links-page::after{content:''; position:absolute; inset:0 0 auto; height:min(30rem,95vw); z-index:-2; pointer-events:none;
                   background:radial-gradient(ellipse 62% 40% at 50% 40%,rgba(12,10,7,.82),rgba(12,10,7,.5) 60%,rgba(12,10,7,0) 100%),
                              linear-gradient(180deg,rgba(12,10,7,0) 55%,rgba(12,10,7,.85) 100%),
                              url(/assets/lights-top.jpg) center top / cover no-repeat;
                   -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
.lk{max-width:30rem; margin:0 auto; padding:2rem 1rem 3rem; position:relative; isolation:isolate}
.lk-head{position:relative; text-align:center; display:grid; justify-items:center; gap:.55rem; padding-bottom:1.4rem}
.lk-mark{font-size:2.6rem; margin:.4rem 0 .1rem}
.lk-head .tag{font-size:1.35rem; margin:0}
.share{position:absolute; right:0; top:0; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
       border:1px solid var(--line-2); background:rgba(12,10,7,.7); color:var(--paper); cursor:pointer}
.share svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.share-note{min-height:0}
.stack{display:grid; gap:1.4rem}
.stack-h{margin:0 0 .65rem}
.pads{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
.pads > :only-child{grid-column:1 / -1}
.plate{display:flex; align-items:center; gap:.75rem; min-height:60px; padding:.8rem 1rem; border:1px solid var(--line-2); border-radius:14px;
       background:rgba(21,18,13,.92); color:var(--paper); text-decoration:none; font-weight:500; transition:border-color .2s, color .2s, background .2s}
.plate:hover{border-color:var(--cream); color:var(--cream)}
.plate.primary{background:var(--ember); border-color:var(--ember); color:var(--ember-ink)}
.plate.primary:hover{background:var(--ember-hi); color:var(--ember-ink)}
.card{border:1px solid var(--line-2); border-radius:16px; padding:1.1rem; background:rgba(21,18,13,.92)}
.card .rel{grid-template-columns:5.5rem minmax(0,1fr); gap:1rem; align-items:start}
.card .rel-cover{width:5.5rem}
.card .rel-title{font-size:1.6rem; margin:.35rem 0 .8rem; letter-spacing:0}
.card .play{min-height:48px; margin-bottom:.8rem; font-size:.76rem}
.card .play .disc-btn{width:38px; height:38px}
.card .s-head{font-size:1.5rem; letter-spacing:0}
.card .s-sub{font-size:1rem}
.card .s-row input,.card .s-row .btn{min-height:48px}
.card iframe.player{grid-column:1 / -1}
.lk-book .contacts{gap:1.2rem; grid-template-columns:minmax(0,1fr)}
.lk-foot{text-align:center; margin-top:2rem; color:var(--faint); font-size:.9rem}
.lk-foot a{color:var(--dim); display:inline-block; padding:.6rem .1rem}

/* ---- 404 ---- */
.lost{min-height:100svh; display:grid; place-items:center; text-align:center; padding:2rem 1rem}
.lost-mark{font-size:clamp(3rem,12vw,6rem); margin:1rem 0 1.5rem}
.lost h1{font-family:var(--display); font-weight:600; font-variation-settings:'SOFT' 100; font-size:1.5rem; margin:0 0 1.6rem}

/* ---- press kit ---- */
.epk-head{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem); border-bottom:1px solid var(--line)}
.epk-grid{display:grid; gap:2.2rem}
@media (min-width:820px){.epk-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:3.5rem; align-items:start}}
.epk-mark{font-size:clamp(3.4rem,11vw,6.6rem); margin:1rem 0 1.2rem}
.print-mark{display:none}
.epk-id .tag{margin-bottom:.4rem}
.genre{color:var(--dim); margin:0 0 1.6rem}
.kv{margin:0 0 1.8rem; border-top:1px solid var(--line)}
.kv > div{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:.3rem 1.2rem; padding:.8rem 0; border-bottom:1px solid var(--line)}
@media (max-width:560px){.kv > div{grid-template-columns:minmax(0,1fr)}}
.kv dt{font:500 .7rem/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.kv dd{margin:0; color:var(--paper); word-break:break-word}
.epk-cover{margin:0}
.epk-cover img{border-radius:3px}
.epk-cover figcaption{margin-top:.7rem}
.epk-sec{padding:clamp(2.2rem,5vw,3.2rem) 0; border-bottom:1px solid var(--line)}
.epk .label{margin:0; display:block}
.epk .label::after{display:none}
.two{display:grid; gap:1rem}
@media (min-width:820px){.two{grid-template-columns:12rem minmax(0,1fr); gap:3rem}}
.two .label{margin:0}
.prose{max-width:40rem}
.prose p{margin:0 0 1rem}
.one{border-top:1px solid var(--line); padding-top:1rem; font-family:var(--display); font-style:italic; font-weight:600; font-variation-settings:'SOFT' 100; font-size:1.25rem}
.one .mono{display:block; font-style:normal; margin-bottom:.4rem}
.note{color:var(--dim); font-size:.97rem; margin-top:1rem}
.epk .rel-title{font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:0}
.epk .empty{font-size:clamp(1.35rem,3vw,1.8rem)}
.epk .bills .w a{font-size:1.1rem}
.epk .sub-label{margin-top:2.6rem}
/* phones: who and how to book before the artwork */
@media (max-width:819px){.epk-cover{max-width:20rem}}


/* stage plot and inputs */
.rider{display:grid; gap:1.6rem}
.sp-fig{max-width:44rem}
.rider table.inputs{max-width:30rem}
.sp-fig{margin:0}
.stage-plot{display:block; width:100%; height:auto}
.stage-plot text{font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.sp-stage{fill:var(--night-2); stroke:var(--line-2); stroke-width:1.5}
.sp-riser{fill:var(--night-3); stroke:var(--line-2); stroke-dasharray:4 3}
.sp-kit{fill:none; stroke:var(--dim); stroke-width:1.5}
.sp-amp{fill:var(--night-3); stroke:var(--dim); stroke-width:1.2}
.sp-wedge{fill:var(--haze); opacity:.85}
.sp-p{fill:var(--cream); stroke:none}
.sp-n{font-size:17px; font-weight:500; fill:var(--night)}
.sp-n-s{font-size:14px}
.sp-l{font-size:16px; fill:var(--paper)}
.sp-s{font-size:13px; fill:var(--faint)}
.sp-edge{font-size:14px; fill:var(--faint)}
.sp-pw{fill:var(--sodium)}
.sp-mic{stroke:var(--dim); stroke-width:1.5}
.sp-fig figcaption{margin-top:.7rem; font-size:.92rem; color:var(--dim)}
table.inputs{width:100%; border-collapse:collapse; font-size:.95rem}
table.inputs caption{text-align:left; margin-bottom:.6rem}
table.inputs th{font:500 .68rem/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-align:left; padding:.35rem .5rem .35rem 0; border-bottom:1px solid var(--line-2)}
table.inputs td{padding:.4rem .5rem .4rem 0; border-bottom:1px solid var(--line); color:var(--paper)}
table.inputs td.n{font-family:var(--mono); color:var(--faint); width:2rem; font-variant-numeric:tabular-nums}
.inputs-inline{display:none}

@media print{
  @page{size:letter; margin:0}
  :root{--paper:#F3EAD6}
  html,body{background:var(--night); -webkit-print-color-adjust:exact; print-color-adjust:exact}
  body{font-size:8.6pt; line-height:1.45}
  .no-print,.play,iframe.player,.btns{display:none !important}
  .epk{padding:.45in .5in}
  .wrap{padding:0; max-width:none}
  .epk-head{padding:0 0 .16in; border-bottom:1px solid var(--line-2)}
  .epk-grid{grid-template-columns:minmax(0,1fr) 2.2in; gap:.35in; align-items:start}
  /* the shadows would print as extra copies of the name in the PDF's text: print the mark as an image instead */
  .epk-mark .dc{display:none}
  .print-mark{display:block; width:2.6in; height:1.21in; margin:.04in 0 .08in; background:url(/assets/mark-print.png) left center / contain no-repeat}
  .epk-id .tag{font-size:15pt}
  .genre{margin-bottom:.12in}
  .kv{margin:0}
  .kv > div{grid-template-columns:1.5in minmax(0,1fr); padding:.05in 0}
  .epk-sec{padding:.13in 0; break-inside:avoid}
  .two{grid-template-columns:1.2in minmax(0,1fr); gap:.25in}
  .epk .rel-title{font-size:17pt; margin:.03in 0 .06in}
  .note{margin-top:.06in; font-size:9pt}
  .empty{font-size:12pt}
  .sub-label{margin:.1in 0 .05in}
  .bills li{padding:.05in 0}
  .bills .w small,.bills .w a{font-size:8.6pt}
  .one{display:none}
  a{text-decoration:none}
  .rider{grid-template-columns:3in minmax(0,1fr); gap:.25in}
  table.inputs{display:none}
  .inputs-inline{display:block; margin:0; font-size:7.8pt; line-height:1.5}
  .inputs-inline .mono{display:block; margin-bottom:.03in}
  .epk-sec{padding:.1in 0}
  .epk .row-links,.epk-cover figcaption{display:none}
  .epk-grid{grid-template-columns:minmax(0,1fr) 1.9in}
  .sp-fig figcaption{font-size:7.5pt; margin-top:.04in}
  table.inputs{font-size:7.6pt}
  table.inputs td,table.inputs th{padding:.015in .06in .015in 0}
  table.inputs caption{margin-bottom:.03in}
}

/* the player spans the card; the signup's Join stays on the field's row */
.card iframe.player{margin-top:.9rem}
.card .s-row input{flex-basis:9rem}