/* ==========================================================================
   27 CLUB FORMS - the talent form and the staff panel

   Same brand system as the public menu: <html data-theme="cle|mia"> picks the
   look and everything below reads the variables that theme sets.

     cle  Cleveland TV boards   pink / black / green / cream panels, heavy
                                grotesk headings, monospace details
     mia  Miami menu            light grey paper, black only, Times-style serif
                                headings, monospace everything else, hairlines
   ========================================================================== */

:root{
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.8,.3,1);
  --max:1180px;
  --gutter:16px;
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font-family:inherit;font-size:16px;color:inherit}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.05}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1:focus,h2:focus,.sheet:focus{outline:none}

/* ---------------------------------------------------------------- Themes */
[data-theme="cle"]{
  --bg:#EFE1DB;--fg:#211D1D;--muted:#5f5559;--accent:#EE93CF;--accent-fg:#211D1D;--accent-text:#D8529F;
  --line:rgba(33,29,29,.14);--card:#fff;--chip:rgba(33,29,29,.08);--chip-fg:#211D1D;--chip-on:#211D1D;--chip-on-fg:#EFE1DB;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --detail:"Source Code Pro",ui-monospace,Menlo,monospace;--mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  --head-weight:900;--head-track:-.02em;--name-weight:800;--foot-bg:#211D1D;--foot-fg:#EFE1DB;--foot-muted:#a99ea4;--sheet-bg:#F7F1EC;
  --focus:#D8529F;
}
[data-theme="mia"]{
  --bg:#ECECEC;--fg:#111;--muted:#555;--accent:#111;--accent-fg:#fff;--accent-text:#111;
  --line:rgba(0,0,0,.22);--card:transparent;--chip:transparent;--chip-fg:#111;--chip-on:#111;--chip-on-fg:#fff;
  --radius:0;--radius-sm:0;--radius-pill:0;
  --display:"Tinos","Times New Roman",Times,serif;--body:"Source Code Pro",ui-monospace,Menlo,monospace;
  --detail:"Source Code Pro",ui-monospace,Menlo,monospace;--mono:"Source Code Pro",ui-monospace,Menlo,monospace;
  --head-weight:700;--head-track:.02em;--name-weight:700;--foot-bg:#ECECEC;--foot-fg:#111;--foot-muted:#555;--sheet-bg:#F4F4F4;
  --focus:#D8529F;
}

.wrap{min-height:100vh;position:relative;display:flex;flex-direction:column}
.noscript{padding:30px var(--gutter);text-align:center;font-weight:800}
html.embed .wrap{min-height:0}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden}
.h-inner,.lb-inner,.c-inner,.st-inner,.sec-inner,.s-inner,.f-inner{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.h-inner{display:flex;align-items:center;gap:18px;padding-top:24px;padding-bottom:20px;position:relative}
.h-logo{flex:0 0 auto;height:auto;animation:float 6s ease-in-out infinite}
.h-text{flex:1 1 auto;min-width:0}
.h-wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.035em}
.h-script{font-family:"Lobster","Brush Script MT",cursive;line-height:1;color:#D8529F}
.h-tag{display:none}

[data-theme="cle"] .hero{background:#EE93CF}
[data-theme="cle"] .hero::after{content:"";position:absolute;right:-56px;bottom:-70px;width:210px;height:210px;border-radius:50%;background:rgba(33,29,29,.06);animation:drift 12s ease-in-out infinite alternate}
[data-theme="cle"] .h-logo{width:64px}
[data-theme="cle"] .h-wordmark{font-size:34px}
[data-theme="cle"] .h-script{font-size:34px;margin-top:4px}

[data-theme="mia"] .hero{background:#ECECEC;border-bottom:1.5px solid #111}
[data-theme="mia"] .h-inner{flex-direction:column;text-align:center;gap:6px;padding-top:30px;padding-bottom:18px}
[data-theme="mia"] .h-logo{width:84px}
[data-theme="mia"] .h-wordmark{font-weight:400;font-size:30px;letter-spacing:.42em;margin-left:.42em;line-height:1.1;margin-top:4px}
[data-theme="mia"] .h-script{display:none}
[data-theme="mia"] .h-tag{display:block;font-weight:500;letter-spacing:.3em;font-size:10px;opacity:.6;margin-top:6px;text-transform:uppercase}

/* the equaliser: it's a stage, so something in the header is always playing */
.eq{display:none;align-items:flex-end;gap:5px;height:56px;margin-left:auto;position:relative;z-index:1}
.eq i{display:block;width:9px;height:100%;background:#211D1D;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-duration:.8s;animation-delay:-.2s}
.eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.5s}
.eq i:nth-child(4){animation-duration:.7s;animation-delay:-.1s}
.eq i:nth-child(5){animation-duration:1.05s;animation-delay:-.7s}
.eq i:nth-child(6){animation-duration:.9s;animation-delay:-.35s}
.eq i:nth-child(7){animation-duration:1.2s;animation-delay:-.6s}
[data-theme="mia"] .eq{display:none!important}
@keyframes eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}

/* ---------------------------------------------------------------- The boards */
.stage{flex:1 1 auto;position:relative;display:flex;flex-direction:column}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.step{display:none;position:relative;flex:1 1 auto;overflow:hidden;color:var(--t-fg);
  --t-fg:#211D1D;--t-h:#D8529F;--t-sub:#5f5559;--o-bg:#fff;--o-fg:#211D1D;--o-on:#211D1D;--o-on-fg:#EFE1DB;
  --f-bg:#fff;--f-fg:#211D1D;--f-line:rgba(33,29,29,.2);--b-bg:#211D1D;--b-fg:#EFE1DB;--err:#A81E5F;--tone:#EFE1DB}
.step.active{display:block}
.s-inner{position:relative;padding-top:24px;padding-bottom:36px;display:grid;gap:20px}
.s-side h1,.s-side h2,.s-main>.q,.s-center .q{font-family:var(--display);font-weight:var(--head-weight);text-transform:uppercase;letter-spacing:var(--head-track);color:var(--t-h)}
.s-side h1{font-size:34px;line-height:1}
.q{font-size:23px;line-height:1.08}
.q label{cursor:inherit}
.s-main>.q{margin-bottom:14px}
.s-side>.q{margin-bottom:14px}
.s-side>.field+.q{margin-top:22px}
.s-lead{margin-top:12px;font-size:15px;line-height:1.55;color:var(--t-fg);font-weight:600}
.s-hint{margin:-8px 0 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t-sub)}

.step[data-tone="black"]{--t-fg:#EFE1DB;--t-h:#EE93CF;--t-sub:#c9bfc3;--o-bg:rgba(255,255,255,.08);--o-fg:#EFE1DB;--o-on:#EE93CF;--o-on-fg:#211D1D;
  --f-bg:rgba(255,255,255,.09);--f-fg:#EFE1DB;--f-line:rgba(255,255,255,.22);--b-bg:#EE93CF;--b-fg:#211D1D;--err:#FFB3D9;--tone:#211D1D}
.step[data-tone="green"]{--t-fg:#fff;--t-h:#fff;--t-sub:rgba(255,255,255,.85);--o-bg:rgba(0,0,0,.16);--o-fg:#fff;--o-on:#211D1D;--o-on-fg:#fff;
  --f-bg:rgba(0,0,0,.16);--f-fg:#fff;--f-line:rgba(255,255,255,.3);--b-bg:#211D1D;--b-fg:#fff;--err:#fff;--tone:#4F8E5B}
.step[data-tone="pink"]{--t-fg:#211D1D;--t-h:#211D1D;--t-sub:#3d3438;--o-bg:#211D1D;--o-fg:#EFE1DB;--o-on:#fff;--o-on-fg:#211D1D;
  --f-bg:#fff;--f-fg:#211D1D;--f-line:rgba(33,29,29,.25);--b-bg:#211D1D;--b-fg:#EFE1DB;--err:#7D0F45;--tone:#EE93CF}
.step{background:var(--tone)}

/* each board pours in from the bottom with a wave along its edge, like the menu's */
html.motion[data-theme="cle"] .step.active{background:transparent;isolation:isolate;animation:tone-on 0s linear .8s forwards}
@keyframes tone-on{to{background:var(--tone)}}
html.motion[data-theme="cle"] .step.active::before{
  content:"";position:absolute;left:0;right:0;top:-28px;bottom:0;z-index:-1;background:var(--tone);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'><path d='M0 14Q40 0 80 14T160 14V28H0Z' fill='%23000'/></svg>") 0 0/160px 28px repeat-x,
               linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'><path d='M0 14Q40 0 80 14T160 14V28H0Z' fill='%23000'/></svg>") 0 0/160px 28px repeat-x,
       linear-gradient(#000,#000) 0 28px/100% calc(100% - 28px) no-repeat;
  animation:sec-fill .8s var(--ease) both;
}
@keyframes sec-fill{from{transform:translateY(101%)}to{transform:translateY(0)}}
html.motion .step.active .s-inner>*>*{animation:rise-in .5s var(--ease) backwards}
html.motion[data-theme="cle"] .step.active .s-inner>*>*{animation-delay:.28s}
html.motion .step.active .s-inner>.s-main>*{animation-delay:.34s}
html.pouring .step.active .s-inner>*>*,html.pouring .step.active::before{animation-play-state:paused}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* spotlights on the first board */
.spot{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none}
[data-theme="cle"] .spot{display:block}
.spot i{position:absolute;top:-30%;width:220px;height:170%;left:var(--x);background:linear-gradient(180deg,rgba(238,147,207,.34),rgba(238,147,207,0) 78%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);transform-origin:50% 0;transform:rotate(var(--r));animation:sweep var(--d) ease-in-out infinite alternate}
.spot i:nth-child(1){--x:6%;--r:-16deg;--r2:16deg;--d:7s}
.spot i:nth-child(2){--x:46%;--r:12deg;--r2:-18deg;--d:9s}
.spot i:nth-child(3){--x:82%;--r:18deg;--r2:-10deg;--d:6s}
@keyframes sweep{from{transform:rotate(var(--r))}to{transform:rotate(var(--r2))}}

/* progress: a cup that fills as they go */
.s-prog{grid-column:1/-1}
.prog{display:flex;align-items:center;gap:10px;color:var(--t-h)}
.prog-cup{width:36px;height:33px;flex:0 0 auto;overflow:visible}
.prog-cup .ln{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.prog-liq{fill:currentColor;transform:var(--to,translateY(30px));transition:transform .9s var(--ease) .3s}
html.motion .step.active .prog-liq{animation:cup-fill 1s var(--ease) .35s backwards}
@keyframes cup-fill{from{transform:var(--from,translateY(30px))}to{transform:var(--to,translateY(30px))}}
.prog-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}

/* answers */
.opts{display:grid;grid-template-columns:1fr;gap:10px}
.opts-artist,.opts-genre{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts-club{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 16px;text-align:left;background:var(--o-bg);color:var(--o-fg);border-radius:var(--radius-sm);
  font-size:15.5px;font-weight:var(--name-weight);line-height:1.2;border:2px solid transparent;transition:background .18s ease,color .18s ease,transform .25s var(--ease)}
.opt:hover{transform:translateY(-2px)}
.opt:active{transform:scale(.98)}
.opt.on{background:var(--o-on);color:var(--o-on-fg);animation:chip-pop .3s var(--ease)}
.opts-club .opt{justify-content:center;text-align:center;min-height:96px;font-family:var(--display);font-size:22px;font-weight:var(--head-weight);text-transform:uppercase;letter-spacing:var(--head-track)}
.opts-artist .opt{flex-direction:column;justify-content:center;text-align:center;min-height:118px;gap:9px}
.opt-ic{display:block;width:40px;height:40px}
.opt-ic svg{display:block;width:100%;height:100%;fill:currentColor}
.opt-ic .ln{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.opt-ic .hole{fill:var(--o-bg)}
.opt.on .opt-ic .hole{fill:var(--o-on)}
.opt.on .opt-ic{animation:mic-bop .55s var(--ease)}
@keyframes chip-pop{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes mic-bop{0%{transform:rotate(0)}30%{transform:rotate(-12deg) scale(1.14)}65%{transform:rotate(9deg)}100%{transform:none}}

/* fields */
.fields{display:grid;grid-template-columns:1fr;gap:12px}
.field label{display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t-sub)}
.field input,.field textarea{display:block;width:100%;padding:14px;background:var(--f-bg);color:var(--f-fg);border:1.5px solid var(--f-line);border-radius:var(--radius-sm);outline:none;font-weight:600;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:130px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--f-fg);opacity:.5;font-weight:500}
.field input:focus,.field textarea:focus{border-color:var(--t-h);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-h) 35%,transparent)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.other-field{margin-top:14px}
html.motion .other-field:not([hidden]){animation:rise-in .35s var(--ease)}
.count{margin-top:6px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--t-sub)}
.err{font-size:13px;font-weight:700;line-height:1.4;color:var(--err)}
.err:not(:empty){margin-top:9px;animation:chip-pop .3s var(--ease)}
.err-form:not(:empty){margin:14px 0 0}

/* buttons */
.s-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.btn-next,.btn-back{min-height:50px;padding:14px 24px;border-radius:var(--radius-pill);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;transition:transform .2s var(--ease),opacity .2s ease}
.btn-next{background:var(--b-bg);color:var(--b-fg);margin-left:auto;min-width:130px}
.btn-next:hover{transform:translateY(-2px)}
.btn-next:disabled{opacity:.6;cursor:default;transform:none}
.btn-back{padding-left:6px;padding-right:12px;color:var(--t-fg);text-decoration:underline;text-underline-offset:4px}

/* done */
.s-center{text-align:center;justify-items:center;padding-top:44px;padding-bottom:56px;max-width:640px}
.s-center .q{font-size:32px}
.s-strong{font-weight:800}
.done-cup{position:relative;width:110px;height:112px;color:var(--t-h)}
.done-cup svg{position:absolute;left:0;bottom:0;width:100%;fill:currentColor}
.done-cup .ln{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round}
.note{position:absolute;bottom:62px;font-size:24px;line-height:1;opacity:0}
.note.n1{left:16px}.note.n2{left:44px;font-size:28px}.note.n3{left:68px}.note.n4{left:30px;font-size:20px}
html.motion .note{animation:note-rise 3.2s ease-in-out infinite}
.note.n2{animation-delay:.8s!important}.note.n3{animation-delay:1.6s!important}.note.n4{animation-delay:2.4s!important}
@keyframes note-rise{0%{opacity:0;transform:translate(0,14px) rotate(-8deg)}18%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(10px,-42px) rotate(12deg)}}

/* ---------------------------------------------------------------- Miami: the printed page */
[data-theme="mia"] .step{--t-fg:#111;--t-h:#111;--t-sub:#555;--o-bg:transparent;--o-fg:#111;--o-on:#111;--o-on-fg:#fff;
  --f-bg:#F4F4F4;--f-fg:#111;--f-line:#111;--b-bg:#111;--b-fg:#fff;--err:#111;--tone:#ECECEC}
[data-theme="mia"] .s-side h1{font-size:32px;letter-spacing:.01em;line-height:1.08}
[data-theme="mia"] .q{font-size:25px;letter-spacing:.01em;font-weight:700}
[data-theme="mia"] .s-lead{font-weight:400;font-size:13.5px;line-height:1.65;text-transform:uppercase;letter-spacing:.02em}
[data-theme="mia"] .s-strong{font-weight:600}
[data-theme="mia"] .opt{border:1.5px solid #111;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
[data-theme="mia"] .opt:hover{background:#F4A9CC}
[data-theme="mia"] .opt.on,[data-theme="mia"] .opt.on:hover{background:#111;color:#fff}
[data-theme="mia"] .opts-club .opt{font-size:24px;font-weight:400;letter-spacing:.14em}
[data-theme="mia"] .field label{font-weight:600;letter-spacing:.14em}
[data-theme="mia"] .field input,[data-theme="mia"] .field textarea{font-weight:500;font-size:15px}
[data-theme="mia"] .field input:focus,[data-theme="mia"] .field textarea:focus{box-shadow:0 0 0 3px #F4A9CC}
[data-theme="mia"] .btn-next,[data-theme="mia"] .btn-back{font-weight:600;letter-spacing:.14em}
[data-theme="mia"] .prog-t{font-weight:600;letter-spacing:.2em}
[data-theme="mia"] .err{font-weight:600;text-transform:uppercase;font-size:11.5px;letter-spacing:.04em;padding-left:9px;border-left:3px solid #F4A9CC}
[data-theme="mia"] .err:empty{border:0;padding:0}
/* a hairline draws in under the question, like the section heads on the printed menu */
[data-theme="mia"] .s-inner>.s-side{position:relative;padding-bottom:16px}
[data-theme="mia"] .s-inner>.s-side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#111;transform-origin:left}
html.motion[data-theme="mia"] .step.active .s-inner>.s-side::after{animation:rule-draw .9s var(--ease) .15s both}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.motion[data-theme="mia"] .h-wordmark{animation:track-mia 1.1s var(--ease) both}
@keyframes track-mia{from{opacity:0;letter-spacing:.16em}to{opacity:1;letter-spacing:.42em}}
html.pouring .h-wordmark{animation-play-state:paused}

/* ---------------------------------------------------------------- Footer */
.foot{background:var(--foot-bg);color:var(--foot-fg)}
.f-inner{padding-top:26px;padding-bottom:calc(28px + var(--safe-b));text-align:center}
.f-logo{width:44px;height:auto;margin:0 auto 12px}
.f-logo-dark{display:none}
.foot h3{font-family:var(--display);font-size:17px;font-weight:var(--head-weight);text-transform:uppercase}
.f-addr{margin-top:8px;font-size:12.5px;color:var(--foot-muted);line-height:1.55}
.f-addr:empty{display:none}
.f-legal{margin-top:14px;font-size:10.5px;color:var(--foot-muted);line-height:1.7;opacity:.85}
[data-theme="mia"] .foot{border-top:1.5px solid #111}
[data-theme="mia"] .f-logo-light{display:none}
[data-theme="mia"] .f-logo-dark{display:block}
[data-theme="mia"] .foot h3{font-weight:400;letter-spacing:.3em;margin-left:.3em}
[data-theme="mia"] .f-addr{text-transform:uppercase;letter-spacing:.04em;font-size:11px}
[data-theme="mia"] .f-legal{text-transform:uppercase;letter-spacing:.02em;font-size:9.5px}

/* ---------------------------------------------------------------- Sign in */
.signin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px var(--gutter);background:#EE93CF}
.signin-box{width:100%;max-width:400px;background:#211D1D;color:#EFE1DB;border-radius:22px;padding:30px 26px;text-align:center;box-shadow:0 22px 50px rgba(33,29,29,.35);
  --t-sub:#c9bfc3;--t-h:#EE93CF;--f-bg:rgba(255,255,255,.09);--f-fg:#EFE1DB;--f-line:rgba(255,255,255,.22);--b-bg:#EE93CF;--b-fg:#211D1D;--err:#FFB3D9}
.signin-box .h-logo{width:96px;margin:0 auto 14px}
.signin-box .h-wordmark{font-size:27px;color:#EFE1DB}
.signin-box .h-script{font-size:34px;color:#EE93CF;margin:2px 0 18px}
.signin-box .field{text-align:left}
.signin-box .btn-next{width:100%;margin-top:18px}
.signin-legal{max-width:420px;text-align:center;font-size:10.5px;line-height:1.7;color:#211D1D;opacity:.75}
html.motion .signin-box{animation:rise-in .6s var(--ease) both}

/* ---------------------------------------------------------------- Panel */
.panel .h-inner{padding-bottom:12px}
.locbar{position:relative}
.lb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:6px;padding-bottom:16px}
.loc{padding:9px 13px;border-radius:var(--radius-pill);background:var(--chip);color:var(--chip-fg);font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border:2px solid transparent}
.loc.on{background:var(--chip-on);color:var(--chip-on-fg);border-color:var(--chip-on);animation:chip-pop .3s var(--ease)}
.lb-out{margin:0 0 0 auto}
[data-theme="cle"] .locbar{background:#EE93CF}
[data-theme="cle"] .loc{background:rgba(255,255,255,.5)}
[data-theme="cle"] .loc.on{background:#211D1D;color:#EFE1DB}
[data-theme="mia"] .lb-inner{justify-content:center;padding-top:16px}
[data-theme="mia"] .loc{border:1.5px solid #111;background:transparent;font-weight:600;letter-spacing:.14em;padding:9px 14px}
[data-theme="mia"] .loc.on{background:#111;color:#fff}
[data-theme="mia"] .lb-out{margin-left:0}

.st-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px 8px;padding-top:16px;padding-bottom:16px}
.stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;line-height:1.1}
.stat small{display:block;margin-top:3px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
[data-theme="cle"] .stats{background:#211D1D;color:#EFE1DB}
[data-theme="cle"] .stat b{color:#EE93CF}
[data-theme="mia"] .stats{border-bottom:1.5px solid #111}
[data-theme="mia"] .stat{text-align:center}
html.motion .stat{animation:rise-in .5s var(--ease) backwards}
html.motion .stat:nth-child(2){animation-delay:.05s}html.motion .stat:nth-child(3){animation-delay:.1s}html.motion .stat:nth-child(4){animation-delay:.15s}
html.motion .stat:nth-child(5){animation-delay:.2s}html.motion .stat:nth-child(6){animation-delay:.25s}html.motion .stat:nth-child(7){animation-delay:.3s}

.controls{background:var(--bg);border-bottom:1px solid var(--line)}
.c-inner{padding-top:12px;padding-bottom:10px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.search-row{display:flex;align-items:center;gap:9px;flex:1 1 100%;background:#fff;border-radius:var(--radius-sm);padding:10px 13px}
.search-row .s-ic{width:17px;height:17px;opacity:.45;flex:0 0 auto}
.search-row input{flex:1 1 auto;border:0;background:none;outline:none;font-weight:600;font-size:15px;min-width:0}
[data-theme="mia"] .search-row{border:1.5px solid #111;background:#F4F4F4}
[data-theme="mia"] .controls{border-bottom:1.5px solid #111}
.chip-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.chip-row::-webkit-scrollbar{display:none}
.chip,.export{flex:0 0 auto;white-space:nowrap;padding:8px 13px;border-radius:var(--radius-pill);background:var(--chip);color:var(--chip-fg);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.chip.on{background:var(--chip-on);color:var(--chip-on-fg);animation:chip-pop .3s var(--ease)}
.chip span{font-family:var(--mono);opacity:.75;margin-left:3px}
[data-theme="mia"] .chip,[data-theme="mia"] .export{border:1.5px solid #111;font-weight:600;letter-spacing:.1em}
.export{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-fg);margin-left:auto;font-weight:900}
.export svg{width:15px;height:15px}
.export:hover{transform:translateY(-1px)}
[data-theme="mia"] .export:hover{background:#F4A9CC;color:#111}

.list-wrap{flex:1 1 auto;padding:20px 0 90px}
.list{display:grid;grid-template-columns:1fr;gap:10px}
.row{display:flex;gap:4px;background:var(--card);border-radius:var(--radius-sm);transition:opacity .25s ease,transform .25s var(--ease),box-shadow .15s ease;align-items:stretch}
.row.sel{box-shadow:0 0 0 2.5px var(--accent-text)}
.row.leaving{opacity:0;transform:translateX(26px) scale(.98)}
[data-theme="cle"] .row{background:#211D1D;color:#EFE1DB}
[data-theme="mia"] .row{border-bottom:1px solid rgba(0,0,0,.2);border-radius:0}
[data-theme="mia"] .row.sel{background:rgba(244,169,204,.32);box-shadow:none}
.r-check{flex:0 0 auto;display:grid;place-items:center;width:44px;cursor:pointer}
.r-check input{position:absolute;opacity:0;width:22px;height:22px;cursor:pointer}
.r-check i{display:block;width:21px;height:21px;border:2px solid currentColor;border-radius:6px;opacity:.75;transition:background .15s ease}
.r-check input:checked+i{background:var(--accent-text);border-color:var(--accent-text);opacity:1;box-shadow:inset 0 0 0 3px #211D1D}
.r-check input:focus-visible+i{outline:3px solid var(--focus);outline-offset:2px}
[data-theme="mia"] .r-check i{border-radius:0}
[data-theme="mia"] .r-check input:checked+i{box-shadow:inset 0 0 0 3px #ECECEC;background:#111;border-color:#111}
.r-open{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;min-width:0;padding:14px 14px 14px 0;text-align:left;color:inherit}
.r-name{display:block;font-size:15px;font-weight:var(--name-weight);line-height:1.25;overflow-wrap:anywhere}
.r-mail{display:block;margin-top:2px;font-size:12.5px;opacity:.85;overflow-wrap:anywhere}
.r-when{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;opacity:.7}
.r-social{display:block;margin-top:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text)}
[data-theme="cle"] .r-social{color:#EE93CF}
.r-desc{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;font-family:var(--detail);text-transform:uppercase;letter-spacing:.02em;opacity:.8;overflow-wrap:anywhere}
.r-tags{display:flex;margin-top:9px;gap:5px;flex-wrap:wrap}
.tag{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.14);color:inherit;overflow-wrap:anywhere}
.tag.sig{background:#EE93CF;color:#211D1D}
.tag.age{background:#EFE1DB;color:#211D1D}
.tag.warn{background:#FFD66B;color:#211D1D}
[data-theme="mia"] .tag{border:1px solid #111;background:transparent;color:#111;border-radius:0;font-weight:600;padding:3px 6px}
[data-theme="mia"] .tag.sig{background:#F4A9CC;border-color:#F4A9CC}
[data-theme="mia"] .tag.age{background:#111;color:#fff}
[data-theme="mia"] .tag.warn{background:#fff}
html.motion .row.in{animation:rise-in .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 45ms)}
html.pouring .row.in{animation-play-state:paused}

.empty{grid-column:1/-1;padding:56px 24px;text-align:center;color:var(--muted)}
.empty b{display:block;margin-top:12px;font-size:16px;color:var(--fg);text-transform:uppercase;font-weight:900}
.empty small{display:block;margin-top:7px;font-size:13px;line-height:1.5}
.e-ic{display:grid;place-items:center}
.e-cup{width:64px;height:64px;color:var(--fg);opacity:.85}
.e-cup .wisp{stroke-dasharray:20 20;stroke-dashoffset:20;animation:wisp 2.6s ease-in-out infinite}
.e-cup .w2{animation-delay:.6s}.e-cup .w3{animation-delay:1.2s}
@keyframes wisp{0%{stroke-dashoffset:20;opacity:0}20%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-20;opacity:0}}
.more{display:block;margin:20px auto 0;padding:13px 26px;border-radius:var(--radius-pill);background:var(--chip-on);color:var(--chip-on-fg);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

.bulk{position:fixed;left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%);z-index:40;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:max-content;max-width:calc(100vw - 20px);
  padding:10px 13px;background:#211D1D;color:#EFE1DB;border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.35);font-size:12px;font-weight:800}
html.motion .bulk{animation:bulk-up .3s var(--ease)}
@keyframes bulk-up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.bulk-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bulk-a,.bulk-x{padding:7px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);color:inherit;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.bulk-a:hover{background:#EE93CF;color:#211D1D}
.bulk-x{background:none;text-decoration:underline}
[data-theme="mia"] .bulk{background:#111;color:#fff}

.mail-hold{margin:0;padding:10px var(--gutter);background:#FFE28A;color:#211D1D;font-size:13px;font-weight:700;text-align:center}
.toast{position:fixed;left:50%;top:18px;z-index:120;transform:translateX(-50%);padding:11px 16px;background:#211D1D;color:#EFE1DB;border-radius:var(--radius-sm);font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.3);white-space:nowrap;max-width:calc(100vw - 20px)}
.toast.show{animation:toast-in .35s var(--ease)}
.toast button{margin-left:9px;color:#EE93CF;font-weight:900;text-decoration:underline}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
[data-theme="mia"] .toast{background:#111;color:#fff}
[data-theme="mia"] .toast button{color:#F4A9CC}

/* detail sheet: same as a menu item */
html.sheet-open{overflow:hidden}
.sheet-wrap{position:fixed;inset:0;z-index:100;display:none}
.sheet-wrap.open{display:block}
.scrim{position:absolute;inset:0;background:rgba(21,15,17,.55);backdrop-filter:blur(2px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:720px;max-height:90%;background:var(--sheet-bg);border-radius:26px 26px 0 0;overflow-y:auto;animation:up .3s var(--ease);color:var(--fg)}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-grip{position:sticky;top:0;background:var(--sheet-bg);padding:10px 0 4px;display:grid;place-items:center;z-index:2}
.sheet-grip i{width:40px;height:4px;border-radius:4px;background:rgba(0,0,0,.2);display:block}
.d-banner{padding:22px 20px;position:relative;overflow:hidden}
.d-banner.t-pink{background:#EE93CF;color:#211D1D}
.d-banner.t-black{background:#211D1D;color:#EFE1DB}
.d-banner.t-green{background:#4F8E5B;color:#fff}
.d-banner.t-cream{background:#F4F4F4;color:#111;border-bottom:1.5px solid #111}
.d-banner h2{font-family:var(--display);font-size:28px;font-weight:var(--head-weight);text-transform:uppercase;line-height:1}
.db-muse{margin-top:9px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;opacity:.75}
.db-mail{display:inline-block;margin-top:10px;font-size:16px;font-weight:800;overflow-wrap:anywhere}
.d-body{padding:18px 20px 28px}
html.motion .d-body>*{animation:rise-in .45s var(--ease) backwards;animation-delay:.08s}
.d-sizes{background:var(--card);border-radius:var(--radius-sm);overflow:hidden}
[data-theme="mia"] .d-sizes{border:1.5px solid #111}
.ds-row{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;font-size:13px;font-weight:700}
.ds-row+.ds-row{border-top:1px solid var(--line)}
.ds-row span{flex:0 0 auto;opacity:.7}
.ds-row b,.ds-row a{text-align:right;font-weight:700;overflow-wrap:anywhere;min-width:0}
.d-h{margin:20px 0 8px;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.d-notes{font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.d-acts{display:flex;flex-wrap:wrap;gap:7px}
.d-act{padding:10px 14px;border-radius:var(--radius-pill);background:var(--chip);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--fg);transition:background .15s ease,color .15s ease}
.d-act:hover{background:var(--accent);color:var(--accent-fg)}
[data-theme="mia"] .d-act{border:1.5px solid #111}
.d-close{margin-top:22px;width:100%;padding:15px;border-radius:14px;background:var(--chip-on);color:var(--chip-on-fg);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.d-close-x{margin-top:12px;background:none;color:var(--fg);text-decoration:underline}
[data-theme="mia"] .d-close{border-radius:0}

/* ---------------------------------------------------------------- Bigger screens */
@media (min-width:640px){
  :root{--gutter:28px}
  .opts-genre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opts-artist{grid-template-columns:repeat(4,minmax(0,1fr))}
  .opts-artist .opt{min-height:140px}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-side h1{font-size:44px}
  [data-theme="cle"] .h-wordmark{font-size:44px}
  [data-theme="cle"] .h-logo{width:84px}
  [data-theme="cle"] .h-script{font-size:42px}
  [data-theme="mia"] .h-logo{width:100px}
  [data-theme="mia"] .h-wordmark{font-size:36px}
  .eq{display:flex}
  .st-inner{grid-template-columns:repeat(7,minmax(0,1fr))}
  .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
  [data-theme="mia"] .list{column-gap:40px}
  .search-row{flex:1 1 280px}
  /* on a phone this block is too tall to pin */
  .controls{position:sticky;top:0;z-index:30}
  .export{order:3}
}
@media (min-width:1024px){
  :root{--gutter:40px}
  .s-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:26px 60px;padding-top:40px;padding-bottom:60px;align-items:start}
  .s-center{grid-template-columns:1fr;gap:18px;padding-top:60px;padding-bottom:70px}
  .s-side h1{font-size:58px;line-height:.96}
  .q{font-size:32px}
  [data-theme="mia"] .q{font-size:34px}
  [data-theme="mia"] .s-side h1{font-size:50px}
  [data-theme="mia"] .s-inner>.s-side{padding-bottom:0}
  [data-theme="mia"] .s-inner>.s-side::after{left:auto;right:-30px;top:0;bottom:auto;width:1.5px;height:100%;transform-origin:top}
  html.motion[data-theme="mia"] .step.active .s-inner>.s-side::after{animation-name:rule-drop}
  [data-theme="mia"] .s-center>.s-side::after{display:none}
  [data-theme="cle"] .h-inner{padding-top:30px;padding-bottom:24px;gap:26px}
  [data-theme="cle"] .h-logo{width:104px}
  [data-theme="cle"] .h-wordmark{font-size:58px}
  [data-theme="cle"] .h-script{font-size:52px}
  [data-theme="mia"] .h-logo{width:110px}
  [data-theme="mia"] .h-wordmark{font-size:40px}
  .list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px}
  .sheet{max-width:640px;bottom:auto;top:50%;border-radius:22px;max-height:84vh;transform:translate(-50%,-50%);animation:pop .25s var(--ease)}
  [data-theme="mia"] .sheet{border-radius:0}
}
@keyframes rule-drop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-22px,-16px)}}

/* ==========================================================================
   POUR-IN - the coffee pot. #pour sits over the page; data-pour picks the
   destination look's colours. menu.js adds .run (pot in, tilt, stream, liquid
   rises), .full (screen covered: page swaps underneath, pot sinks), then
   .drain (liquid falls away). .skip fades it out early. Never shown when
   <html class="motion"> is absent.
   ========================================================================== */
.pour{
  position:fixed;inset:0;z-index:200;display:none;overflow:hidden;
  --pour-bg:#211D1D;--pour-pot:#211D1D;--pour-ink:#EFE1DB;--pour-liq:#EE93CF;--pour-font:var(--display);
  --pour-track:.3em;--pour-weight:900;
}
.pour[data-pour="cle"]{--pour-bg:#211D1D;--pour-pot:#211D1D;--pour-ink:#EFE1DB;--pour-liq:#EE93CF;--pour-font:"Archivo","Helvetica Neue",Arial,sans-serif}
.pour[data-pour="mia"]{--pour-bg:#ECECEC;--pour-pot:#ECECEC;--pour-ink:#111;--pour-liq:#111;--pour-font:"Tinos","Times New Roman",serif;--pour-track:.42em;--pour-weight:400}
.pour.run{display:block}
.pour.skip{opacity:0;transition:opacity .3s ease}
.pour-bg{position:absolute;inset:0;background:var(--pour-bg);background-size:600px 600px}
.pour.full .pour-bg{opacity:0}

/* the pot: hangs in from above, tips over, pours, and finally sinks under the rising liquid */
/* the box's top-left corner is the spout tip; the pot itself is drawn up and to the right of it */
.pour-pot{position:absolute;top:150px;left:calc(50% - 84px);width:250px;height:300px;transform:translateY(-170%)}
.pot-svg{overflow:visible;display:block}
.pot-g{fill:var(--pour-pot);stroke:var(--pour-ink);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;transform:rotate(-4deg);transform-origin:0 0}
.pot-g .pt-handle{fill:none;stroke-width:7}
.pot-g .pt-band{fill:none;stroke-width:3}
.pot-g .pt-logo{fill:var(--pour-ink);stroke:none}
.pour-stream{fill:var(--pour-liq);transform:scaleY(0);transform-origin:0 0}
.pour.run .pour-pot{animation:pot-in .5s var(--ease) both}
.pour.run .pot-g{animation:pot-tilt .6s cubic-bezier(.4,0,.2,1) .3s both}
.pour.run .pour-stream{animation:stream-on .3s cubic-bezier(.3,.7,.4,1) .72s both}
.pour.full .pour-pot{animation:pot-sink .45s ease-in both}
.pour.full .pour-stream{animation:none;opacity:0}
@keyframes pot-in{from{transform:translateY(-170%)}to{transform:translateY(0)}}
@keyframes pot-tilt{from{transform:rotate(-4deg)}to{transform:rotate(-58deg)}}
@keyframes stream-on{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pot-sink{from{transform:translateY(0);opacity:1}to{transform:translateY(60px) rotate(6deg);opacity:0}}

/* "Now pouring · Cleveland", drowned as the level passes it */
.pour-cap{
  position:absolute;top:304px;left:0;right:0;text-align:center;color:var(--pour-ink);
  font-family:var(--pour-font);text-transform:uppercase;opacity:0;
}
.pour-cap small{display:block;font-size:10px;letter-spacing:.3em;opacity:.6;font-weight:600;font-family:var(--body)}
.pour-cap b{display:block;margin-top:6px;font-size:22px;font-weight:var(--pour-weight);letter-spacing:var(--pour-track);margin-left:var(--pour-track)}
.pour.run .pour-cap{animation:rise-in .6s var(--ease) .45s both}
.pour.full .pour-cap{animation:none;opacity:0}

/* the liquid: a sheet the height of the screen with two wave crests riding its surface */
.pour-liq{
  position:absolute;left:0;right:0;top:0;height:calc(100% + 46px);background:var(--pour-liq);
  transform:translateY(100%);will-change:transform;
}
.pour-liq .wave{position:absolute;left:0;width:200%;height:40px;fill:var(--pour-liq);display:block}
.pour-liq .w1{top:-39px;animation:wave-x 2.6s linear infinite}
.pour-liq .w2{top:-30px;opacity:.55;animation:wave-x 4.2s linear infinite reverse}
@keyframes wave-x{to{transform:translateX(-50%)}}
.pour.run .pour-liq{animation:liq-fill 1.25s cubic-bezier(.35,.1,.25,1) .8s both}
.pour.drain .pour-liq{animation:liq-drain .72s cubic-bezier(.55,0,.85,.5) both}
@keyframes liq-fill{from{transform:translateY(100%)}to{transform:translateY(-46px)}}
@keyframes liq-drain{from{transform:translateY(-46px)}to{transform:translateY(102%)}}

/* while the screen is covered, nothing underneath moves or scrolls; the page eases up as the drain reveals it */
html.pouring{overflow:hidden}
html.pouring .wrap{transform:scale(.985);transition:none}
html.motion .wrap{transition:opacity .2s ease,transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pour{display:none!important}
  .sheet,.scrim,.h-logo,.hero::after,.spot i,.eq i,.opt.on,.opt.on .opt-ic,.loc.on,.chip.on,.e-cup .wisp,.bulk,.toast.show,.err:not(:empty){animation:none}
  .eq i{transform:scaleY(.6)}
  .e-cup .wisp{stroke-dasharray:none;opacity:1}
  .note{opacity:.9;animation:none}
  .note.n1{bottom:80px}.note.n2{bottom:88px}.note.n3{bottom:78px}.note.n4{bottom:96px}
}