/* Spirit Fingers Trio site styles, release era (2026-10-13).
   Design read: release-era band site for jazz-fusion fans, bookers and press; nocturnal, supernatural Eclipse language.
   Tokens come from /brand/tokens.css (lane A v2.0). Volt = TRIO, links, primary action. Fire = corona only.
   Type: Archivo wide (display), Hanken Grotesk (body), IBM Plex Mono (dates, countdown).
   Shape rule: pills for buttons and tags, --sf-radius-card for photos and cards. Nothing else rounds.
   Signature: the totality clock, a moon disc that slides over the corona as Nov 19 nears. */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:dark;--gut:clamp(16px,4.5vw,64px);--ok:#6fd8a4;--err:#ff8a7a;--scrim:rgba(7,7,11,.72)}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--sf-void);color:var(--sf-ink);font:400 var(--sf-step-0)/1.6 var(--sf-font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--sf-volt);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--sf-volt-soft)}
:focus-visible{outline:2px solid var(--sf-volt);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--sf-volt);color:var(--sf-void);padding:10px 16px;font-weight:700;border-radius:var(--sf-radius-pill)}
.skip:focus{left:12px}
.wrap{padding-inline:var(--gut);margin-inline:auto;max-width:1440px}
p{margin:0 0 1em}
.measure{max-width:60ch}
.mute{color:var(--sf-mute)}
.volt{color:var(--sf-volt)}
.mono{font-family:var(--sf-font-mono);font-variant-numeric:tabular-nums}
.label{font:500 12px/1.3 var(--sf-font-mono);letter-spacing:var(--sf-track-label);text-transform:uppercase;color:var(--sf-mute)}
h1,h2,h3{font-family:var(--sf-font-display);font-weight:850;line-height:.98;letter-spacing:-.005em;margin:0 0 .4em;text-wrap:balance}
h1{font-size:var(--sf-step-4);font-stretch:var(--sf-stretch-wide)}
h2{font-size:var(--sf-step-3);font-stretch:var(--sf-stretch-display)}
h3{font-size:var(--sf-step-1);font-stretch:var(--sf-stretch-display);line-height:1.1}
.lede{font-size:var(--sf-step-1);line-height:1.4;max-width:34ch}

/* nav */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(7,7,11,.86);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--sf-line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sf-ink);flex:none}
.brand img{height:26px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--sf-ink);text-decoration:none;font:600 15px/1 var(--sf-font-body);padding:12px 12px;border-radius:var(--sf-radius-pill)}
.nav a:hover{color:var(--sf-volt-soft)}
.nav a[aria-current=page]{color:var(--sf-volt)}
.navbtn{display:none;margin-left:auto;background:none;border:1px solid var(--sf-line);color:var(--sf-ink);font:600 15px/1 var(--sf-font-body);padding:12px 18px;border-radius:var(--sf-radius-pill);min-height:44px;cursor:pointer}
@media (max-width:860px){
  .navbtn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sf-night);flex-direction:column;align-items:stretch;padding:8px var(--gut) 16px;border-bottom:1px solid var(--sf-line);overscroll-behavior:contain}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;font-size:18px;border-radius:0}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--sf-radius-pill);font:700 16px/1 var(--sf-font-body);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-volt{background:var(--sf-volt);color:var(--sf-void)}
.btn-volt:hover{background:var(--sf-volt-soft);color:var(--sf-void)}
.btn-ghost{background:rgba(7,7,11,.5);color:var(--sf-ink);border-color:rgba(234,246,255,.38)}
.btn-ghost:hover{border-color:var(--sf-volt-soft);color:var(--sf-volt-soft)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.6;cursor:progress}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn small{font:500 12px/1 var(--sf-font-mono);opacity:.8}

/* home hero */
.hero{position:relative;min-height:min(100svh,940px);display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:-2;background:var(--sf-void)}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,11,.35) 0%,rgba(7,7,11,0) 28%,rgba(7,7,11,.55) 58%,rgba(7,7,11,.94) 86%,var(--sf-void) 100%),linear-gradient(90deg,rgba(7,7,11,.78) 0%,rgba(7,7,11,.2) 62%,rgba(7,7,11,0) 100%)}
.hero .wrap{width:100%;padding-block:clamp(72px,14vh,160px) clamp(32px,6vh,64px);display:grid;gap:clamp(18px,2.4vh,30px)}
.hero h1{margin:0;max-width:11ch;font-size:clamp(2.6rem,1.2rem + 5.2vw,6.4rem)}
.hero h1 .trio{color:var(--sf-volt)}
.hero .sub{font-size:var(--sf-step-1);line-height:1.35;max-width:30ch;margin:0}
.count{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-family:var(--sf-font-mono);font-variant-numeric:tabular-nums}
.count .n{font:500 clamp(2.4rem,1.6rem + 3.4vw,4.4rem)/1 var(--sf-font-mono);color:var(--sf-hot)}
.count .u{font-size:13px;letter-spacing:var(--sf-track-label);text-transform:uppercase;color:var(--sf-ink,#f2f1ec);margin-left:4px}
.count .to{font-size:13px;letter-spacing:.08em;color:var(--sf-mute);flex-basis:100%}
.count.out .n{color:var(--sf-volt)}
.hero .when{font:500 13px/1.5 var(--sf-font-mono);letter-spacing:.06em;color:var(--sf-mute);margin:0}
@media (max-width:640px){
  .hero{min-height:calc(100svh - 64px)}
  .hero .wrap{padding-block:clamp(120px,30vh,260px) 28px;gap:16px}
  .hero-art img{object-position:50% 20%}
  .hero .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .btns .btn:first-child{grid-column:1/-1}
  .hero .btns .btn{padding:0 12px}
}

/* home hero (2026-10-19): Greg's band artwork "Spirit Fingers Image" (Greg Spero, Mike Mitchell, Mohini Dey); cropped only.
   Rule: the lockup sits on open bokeh, never on a face or an instrument. */
.hero-sft{display:grid;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "art" "body";align-items:start}
.hero-sft::after{content:none}
.hero-sft .hero-art{grid-area:art;position:relative;inset:auto;z-index:0;background:none}
.hero-sft .hero-art img{width:100%;height:100%;object-fit:cover}
.hero-sft .wrap{position:relative;z-index:1;width:100%;max-width:none}
.hero-sft .hero-head{grid-area:head;display:grid;gap:12px}
.hero-sft .hero-body{grid-area:body;display:grid;gap:clamp(14px,2vh,22px)}
.hero-sft .eyebrow{margin:0}
.hero-sft h1.lockup{max-width:none;margin:0;font-size:inherit;line-height:1;display:grid;gap:.5rem}
.hero-sft .lk-name{font:850 clamp(2.5rem,1.2rem + 5vw,6rem)/.9 var(--sf-font-display);font-stretch:var(--sf-stretch-wide);letter-spacing:-.012em;color:var(--sf-ink);text-wrap:balance}
.hero-sft .lk-feat{font:500 var(--sf-step-1)/1.2 var(--sf-font-body);color:var(--sf-ink)}
.hero-sft .sub{max-width:34ch}
.hero-sft .hero-act{display:grid;gap:12px}
@media (max-width:1199px){
  .hero-sft .hero-head{padding-block:28px 0}
  .hero-sft .hero-art{margin-top:-36px;aspect-ratio:780/582}
  .hero-sft .hero-art img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent)}
  .hero-sft .hero-body{margin-top:-20px;padding-block:0 32px}
}
@media (min-width:700px) and (max-width:1199px){
  .hero-sft .hero-art{aspect-ratio:auto;height:min(56.25vw,52svh)}
  .hero-sft .hero-art img{object-position:50% 40%}
}
@media (max-width:640px){
  .hero-sft .lk-name{font-size:clamp(2.3rem,10.6vw,3rem)}
  .hero-sft .hero-head{padding-block:22px 0}
  .hero-sft .hero-body{gap:14px}
  .hero-sft .hero-art{margin-top:-24px}
}
/* v1: photo band with the lockup on the top bokeh, details in a strip under it */
@media (min-width:1200px){
  .hero-sft.v1{grid-template-areas:"art" "body"}
  .hero-sft.v1 .hero-art{height:min(calc(100svh - 64px - 216px),56.25vw)}
  .hero-sft.v1 .hero-art img{object-position:50% 12%}
  .hero-sft.v1 .hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,.62) 0%,rgba(7,7,11,.18) 30%,rgba(7,7,11,0) 46%,rgba(7,7,11,0) 80%,var(--sf-void) 100%)}
  .hero-sft.v1 .hero-head{grid-area:art;padding-top:clamp(20px,3.4vh,40px)}
  .hero-sft.v1 .eyebrow{color:var(--sf-ink)}
  .hero-sft.v1 .lk-name{font-size:clamp(3rem,4.3vw,5.6rem)}
  .hero-sft.v1 .hero-body{grid-template-columns:minmax(0,1fr) minmax(0,clamp(290px,20vw,340px)) minmax(0,clamp(480px,36vw,560px));align-items:center;gap:clamp(24px,3vw,56px);padding-block:20px 32px}
  .hero-sft.v1 .sub{font-size:clamp(1.05rem,.8rem + .5vw,1.35rem)}
  .hero-sft.v1 .hero-act{max-width:540px}
  .hero-sft.v1 .hero-act .btns{flex-wrap:nowrap}
}

/* section rhythm */
.sec{padding-block:clamp(64px,10vw,140px)}
.sec + .sec{border-top:1px solid var(--sf-line)}
.sec-tight{padding-block:clamp(48px,7vw,96px)}

/* release */
.release{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.release figure{margin:0}
.release figure img{border-radius:var(--sf-radius-card);width:100%;aspect-ratio:3/2;object-fit:cover}
.release figcaption{margin-top:10px;font:500 13px/1.4 var(--sf-font-mono);color:var(--sf-mute)}
.tracks{list-style:none;margin:20px 0 28px;padding:0;counter-reset:t;columns:2;column-gap:32px;max-width:36rem}
.tracks li{counter-increment:t;padding:8px 0;break-inside:avoid;font-weight:600}
.tracks li::before{content:counter(t,decimal-leading-zero);font:500 12px/1 var(--sf-font-mono);color:var(--sf-mute);margin-right:12px}
.billing{font:500 14px/1.5 var(--sf-font-mono);color:var(--sf-mute);max-width:52ch}
@media (max-width:820px){.release{grid-template-columns:1fr}}

/* band duo */
.duo{display:grid;grid-template-columns:7fr 5fr;gap:clamp(12px,2vw,24px);align-items:end}
.duo figure{margin:0;position:relative}
.duo img{width:100%;object-fit:cover;border-radius:var(--sf-radius-card)}
.duo figure:first-child img{aspect-ratio:4/5}
.duo figure:last-child img{aspect-ratio:3/4}
.duo figcaption{padding-top:14px}
.duo figcaption b{display:block;font:850 var(--sf-step-2)/1 var(--sf-font-display);font-stretch:var(--sf-stretch-display)}
.duo figcaption span{color:var(--sf-mute)}
@media (max-width:640px){.duo{grid-template-columns:1fr 1fr}.duo figure:first-child img,.duo figure:last-child img{aspect-ratio:3/4}.duo figcaption b{font-size:var(--sf-step-1)}}
.chairs{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
@media (max-width:720px){.chairs{grid-template-columns:1fr}}
.guest{font:500 15px/1.5 var(--sf-font-mono);color:var(--sf-mute)}
.guest b{color:var(--sf-ink);font-weight:500}

/* universe strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,22vw,240px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 18px;margin-inline:calc(var(--gut) * -1);overscroll-behavior-x:contain;scrollbar-color:var(--sf-dusk) transparent}
.strip a{scroll-snap-align:start;text-decoration:none;color:var(--sf-ink);display:block}
.strip img{aspect-ratio:2/3;object-fit:cover;width:100%;border-radius:var(--sf-radius-card);background:var(--sf-dusk);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.strip a:hover img{transform:translateY(-4px)}
.strip b{display:block;margin-top:10px;font:800 16px/1.15 var(--sf-font-display);font-stretch:var(--sf-stretch-display)}
.strip span{display:block;font-size:14px;color:var(--sf-mute)}

/* nov 17 band: totality clock */
.party{overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:820px){.party{grid-template-columns:1fr}}
.date-big{font:500 clamp(4rem,2rem + 12vw,11rem)/.85 var(--sf-font-mono);letter-spacing:-.04em;color:var(--sf-ink);margin:0 0 .15em;font-variant-numeric:tabular-nums}
.facts{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px}
.facts li{display:grid;grid-template-columns:7.5rem 1fr;gap:12px;align-items:baseline}
.facts li > span:first-child{font:500 12px/1.4 var(--sf-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sf-mute)}
@media (max-width:420px){.facts li{grid-template-columns:1fr;gap:2px}}
.ecl{position:relative;width:min(78vw,420px);aspect-ratio:1;margin-inline:auto;--off:1}
.ecl .halo{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(246,181,62,.0) 0 33%,rgba(246,181,62,.55) 36%,rgba(234,246,255,.5) 38%,rgba(159,214,255,.28) 46%,rgba(70,177,255,.12) 58%,transparent 72%);opacity:calc(1 - var(--off) * .8)}
.ecl .sun{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--sf-hot) 0 40%,var(--sf-volt-soft) 78%,var(--sf-volt) 100%)}
.ecl .moon{position:absolute;inset:-1px;border-radius:50%;background:var(--sf-void);transform:translateX(calc(var(--off) * 100%))}
@media (prefers-reduced-motion:no-preference){.ecl .moon{transition:transform 1.8s cubic-bezier(.16,1,.3,1)}.ecl .halo{transition:opacity 1.8s}}
.ecl-cap{text-align:center;margin-top:28px}
.ecl-cap .label{display:block;margin-top:6px}

/* universe gallery */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(12px,1.6vw,20px);align-items:start}
@media (max-width:520px){.cast{grid-template-columns:1fr 1fr}}
.char{background:var(--sf-night);border-radius:var(--sf-radius-card);overflow:hidden;border:1px solid var(--sf-line)}
.char summary{list-style:none;cursor:pointer;display:block}
.char summary::-webkit-details-marker{display:none}
.char summary img{aspect-ratio:2/3;object-fit:cover;width:100%;background:var(--sf-dusk)}
.char .nm{padding:12px 14px 14px;display:block}
.char .nm b{display:block;font:850 clamp(15px,1.1rem + .2vw,19px)/1.1 var(--sf-font-display);font-stretch:var(--sf-stretch-display)}
.char .nm span{display:block;font-size:14px;color:var(--sf-mute);margin-top:2px}
.char .nm i{font-style:normal;display:inline-block;margin-top:8px;font:500 11px/1 var(--sf-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--sf-volt))}
.char .more{padding:0 14px 16px;font-size:15px}
.char .more p{margin:0 0 .7em}
.char .power{font-weight:600}
.char[open]{grid-column:span 2;border-color:var(--accent,var(--sf-volt))}
@media (max-width:520px){.char[open]{grid-column:1/-1}}
.char[open] summary img{aspect-ratio:4/5}
.char:focus-within{border-color:var(--sf-volt)}
.cast-group{margin-top:clamp(40px,6vw,72px)}
.cast-group h2{font-size:var(--sf-step-2)}

/* lists and cards on inner pages */
.page-head{padding-block:clamp(56px,9vw,120px) clamp(28px,4vw,48px)}
.page-head h1{font-size:var(--sf-step-4);max-width:14ch}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:9rem minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--sf-line)}
.rows li:first-child{border-top:1px solid var(--sf-line)}
.rows .d{font:500 14px/1.4 var(--sf-font-mono);color:var(--sf-mute);font-variant-numeric:tabular-nums}
@media (max-width:600px){.rows li{grid-template-columns:1fr;gap:4px}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.photo{margin:0}
.photo img{border-radius:var(--sf-radius-card);width:100%;object-fit:cover}
.tag{display:inline-block;font:500 11px/1 var(--sf-font-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:var(--sf-radius-pill);border:1px solid var(--sf-line);color:var(--sf-mute)}
.note{font-size:14px;color:var(--sf-mute)}

/* signup */
.signup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:820px){.signup{grid-template-columns:1fr}}
.sf{display:grid;gap:16px}
.sf .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.sf .row2{grid-template-columns:1fr}}
.f{display:grid;gap:6px;min-width:0}
.f label,.f legend{font:600 14px/1.3 var(--sf-font-body);color:var(--sf-ink)}
.f input[type=text],.f input[type=email]{width:100%;min-height:50px;padding:12px 16px;font:400 16px/1.2 var(--sf-font-body);color:var(--sf-ink);background:var(--sf-night);border:1px solid rgba(234,246,255,.28);border-radius:var(--sf-radius-card)}
.f input::placeholder{color:#8d8c96}
.f input:focus-visible{outline:2px solid var(--sf-volt);outline-offset:1px;border-color:var(--sf-volt)}
.f input[aria-invalid=true]{border-color:var(--err)}
.ferr{font-size:14px;color:var(--err);min-height:0}
.ferr:empty{display:none}
.choice{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.choice legend{margin-bottom:8px;padding:0}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--sf-radius-pill);border:1px solid rgba(234,246,255,.28);font-weight:600;font-size:15px}
.opt input:checked + span{background:var(--sf-volt);color:var(--sf-void);border-color:var(--sf-volt)}
.opt input:focus-visible + span{outline:2px solid var(--sf-volt);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formerr{color:var(--err);font-size:15px}
.done{border:1px solid var(--sf-volt);border-radius:var(--sf-radius-card);padding:22px;background:var(--sf-night)}
.done h3{margin-bottom:.4em}
.done:focus{outline:none}
.flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(70,177,255,.0)}20%{box-shadow:0 0 0 3px rgba(70,177,255,.7)}100%{box-shadow:0 0 0 0 rgba(70,177,255,0)}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}

/* footer */
.foot{border-top:1px solid var(--sf-line);padding-block:48px calc(40px + env(safe-area-inset-bottom,0px));background:var(--sf-night)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:820px){.foot .wrap{grid-template-columns:1fr 1fr}}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot li a{display:inline-flex;min-height:36px;align-items:center;color:var(--sf-ink);text-decoration:none}
.foot li a:hover{color:var(--sf-volt-soft)}
.foot .small{font-size:14px;color:var(--sf-mute)}
.foot h2{font:500 12px/1.3 var(--sf-font-mono);letter-spacing:var(--sf-track-label);text-transform:uppercase;color:var(--sf-mute);margin:0 0 10px}


/* press photo grid */
.press-grid{columns:3 260px;column-gap:16px}
.pg{display:block;break-inside:avoid;margin-bottom:16px;text-decoration:none;color:var(--sf-ink)}
.pg img{width:100%;border-radius:var(--sf-radius-card);background:var(--sf-dusk)}
.pg span{display:block;font-size:14px;margin-top:6px}
.pg span.mono{font-size:12px;margin-top:0}
.pg:hover img{outline:2px solid var(--sf-volt);outline-offset:2px}
.cast-core{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-mute);margin:0 0 10px}

/* nov 17 VIP, skip the line (2026-10-19).
   Design read: ticket upsell for fans who just entered the free lottery; same eclipse language, leaning concert ticket stub.
   Tokens: void #07070b ground, night #0e0e14 card, volt #46b1ff action, hot #eaf6ff price, ink #f4f3f0, mute #a2a1ab.
   Signature: the ticket stub, a perforated card with the $500 price in Plex Mono and the buy button below the tear line. */
.skiplink{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.2 var(--sf-font-body);color:var(--sf-volt-soft);text-decoration:underline;text-decoration-color:rgba(159,214,255,.45)}
.skiplink:hover{color:var(--sf-hot);text-decoration-color:currentColor}
.skipcard{display:grid;gap:12px;margin-top:6px;padding:18px;border-radius:var(--sf-radius-card);background:var(--sf-dusk);border:1px dashed rgba(70,177,255,.55)}
.skipcard b{font:800 var(--sf-step-1)/1.15 var(--sf-font-display);font-stretch:var(--sf-stretch-display);color:var(--sf-ink)}
.skipcard .btn{justify-self:start}
.done .btns{display:grid;gap:12px;justify-items:start;margin:14px 0 0}
.vip-art{display:block;position:relative;height:clamp(240px,40vw,560px);overflow:hidden;background:var(--sf-void)}
.vip-art img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.vip-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,0) 45%,rgba(7,7,11,.7) 80%,var(--sf-void) 100%)}
.vip-main{position:relative;z-index:1;margin-top:clamp(-120px,-7vw,-40px);padding-bottom:clamp(16px,3vw,40px)}
.vip-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
@media (max-width:880px){.vip-grid{grid-template-columns:1fr;align-items:start;gap:0}.vip-copy{display:contents}.vip-copy > *{order:1}.ticket{order:2;margin-top:24px}.vip-copy .facts{order:3;margin-top:28px}}
.vip-lock{font:500 var(--sf-step-1)/1.2 var(--sf-font-body);color:var(--sf-ink);margin:0 0 14px}
.vip-lock b{font:850 1em/1 var(--sf-font-display);font-stretch:var(--sf-stretch-display)}
.vip-copy h1{font-size:clamp(3rem,1.6rem + 6vw,7.2rem);line-height:.9;margin:0 0 .25em}
.vip-copy .lede{max-width:28ch;margin:0}
.vip-copy .facts{margin:24px 0 0}
.ticket{--notch:14px;position:relative;background:var(--sf-night);border:1px solid rgba(70,177,255,.5);border-radius:var(--sf-radius-card);padding:clamp(20px,2.4vw,30px)}
.ticket .tk-top{display:grid;gap:6px;padding-bottom:22px}
.ticket .tk-price{display:flex;align-items:baseline;gap:10px;margin:0}
.ticket .tk-price span{font:500 clamp(3.4rem,2.4rem + 3vw,5rem)/.9 var(--sf-font-mono);letter-spacing:-.03em;color:var(--sf-hot);font-variant-numeric:tabular-nums}
.ticket .tk-price small{font:500 13px/1.3 var(--sf-font-mono);letter-spacing:.08em;color:var(--sf-mute)}
.ticket ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ticket li{padding-left:22px;position:relative}
.ticket li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--sf-volt)}
.ticket .tk-tear{position:relative;height:0;border-top:2px dashed rgba(234,246,255,.22);margin-inline:calc(clamp(20px,2.4vw,30px) * -1)}
.ticket .tk-tear::before,.ticket .tk-tear::after{content:"";position:absolute;top:calc(var(--notch) * -1 - 1px);width:calc(var(--notch) * 2);height:calc(var(--notch) * 2);border-radius:50%;background:var(--sf-void);border:1px solid rgba(70,177,255,.5)}
.ticket .tk-tear::before{left:calc(var(--notch) * -1 - 1px);clip-path:inset(0 0 0 50%)}
.ticket .tk-tear::after{right:calc(var(--notch) * -1 - 1px);clip-path:inset(0 50% 0 0)}
.ticket .tk-bot{display:grid;gap:12px;padding-top:22px}
.ticket .tk-bot .btn{width:100%;white-space:normal;text-align:center;padding-block:12px}
.ticket .tk-bot .btn[aria-disabled=true]{background:var(--sf-dusk);color:var(--sf-mute);cursor:not-allowed}
.ticket .tk-fine{font-size:14px;color:var(--sf-mute);margin:0}
.ticket .skiplink{justify-self:center}
.vip-thanks h1{max-width:16ch}

/* nov 17 hero + ticket rail (2026-10-20).
   Design read: release-party event page for LA jazz-fusion fans; the eclipse/volt night language, leaning concert poster with a ticket rail.
   Tokens: void ground, night/dusk cards, volt action, hot price, ink type, mute status. Archivo (band), Plex Mono (date, price, status), Hanken (copy).
   Layout: the trio artwork fills the first screen; the date lockup sits in the top bokeh, three ticket stubs ride the bottom edge,
   so no type ever lands on a face. Phones and portrait screens stack: art, lockup over the art's lower edge, then the stubs.
   Signature: the ticket rail, each stub carrying its own eclipse phase (scattered moons = the draw, diamond ring = members first, totality = VIP). */
.n17{position:relative;isolation:isolate;overflow:hidden;background:var(--sf-void)}
.n17-art{display:block;position:relative;z-index:-1}
.n17-art img{width:100%;height:100%;object-fit:cover}
.n17-in{position:relative;display:grid;gap:clamp(14px,2vh,22px)}
.n17-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"name name" "date when";column-gap:16px;row-gap:12px;align-items:end}
.n17-date{grid-area:date;margin:0;font:500 clamp(2.6rem,12vw,3.2rem)/.85 var(--sf-font-mono);letter-spacing:-.04em;color:var(--sf-ink);font-variant-numeric:tabular-nums}
.n17-name{grid-area:name;min-width:0}
.n17-event{margin:0 0 8px;font:500 12px/1.3 var(--sf-font-mono);letter-spacing:var(--sf-track-label);text-transform:uppercase;color:var(--sf-volt-soft)}
.n17 h1{margin:0;display:grid;gap:4px;font-size:inherit;max-width:none}
.n17-band{font:850 clamp(1.85rem,8.2vw,3rem)/1 var(--sf-font-display);font-stretch:var(--sf-stretch-display);letter-spacing:-.01em;color:var(--sf-ink)}
.n17-feat{font:500 var(--sf-step-1)/1.2 var(--sf-font-body);color:var(--sf-ink)}
.n17-when{grid-area:when;display:grid;gap:1px;font:400 13px/1.45 var(--sf-font-mono);color:var(--sf-ink);min-width:0}
.n17-when p{margin:0}
.n17-long{display:none}
.n17-count{display:block;margin-top:2px;color:#c9c8d1;text-shadow:0 1px 8px rgba(7,7,11,.8)}
.n17-count .n,.n17-count .u{font:inherit;color:inherit;letter-spacing:0;text-transform:none;margin:0}
.n17-count > span + span{margin-left:8px}
.n17-count.out .n{color:var(--sf-volt)}

.tiers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tier{display:grid;grid-template-columns:clamp(72px,20vw,128px) minmax(0,1fr);background:var(--sf-night);border:1px solid rgba(234,246,255,.18);border-radius:var(--sf-radius-card);overflow:hidden;min-width:0}
.tier-vip{background:#0b1a2b;border-color:var(--sf-volt);box-shadow:0 0 0 1px var(--sf-volt),0 12px 40px -12px rgba(70,177,255,.45)}
.tier-art{width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:var(--sf-void)}
.tier-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;min-width:0}
.tier-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0}
.tier-st{font:500 12px/1.3 var(--sf-font-mono);letter-spacing:.12em;text-transform:uppercase;color:#c9c8d1}
.tier-vip .tier-st{color:var(--sf-volt-soft);border:1px solid currentColor;border-radius:999px;padding:2px 8px}
.tier-price{font:500 1.4rem/1 var(--sf-font-mono);letter-spacing:-.02em;color:var(--sf-hot);font-variant-numeric:tabular-nums}
.tier-vip .tier-price{font-size:1.75rem}
.tier-name{margin:2px 0 0;text-wrap:balance;font:850 1.1rem/1.15 var(--sf-font-display);font-stretch:var(--sf-stretch-display);color:var(--sf-ink)}
.tier-def{margin:0;font:600 15px/1.35 var(--sf-font-body);color:var(--sf-ink)}
.tier-get{display:none;margin:0 0 8px;font:400 14px/1.4 var(--sf-font-body);color:#c9c8d1}
.tier .btn{margin-top:auto;width:100%;min-height:44px;padding:0 14px}
.tier-def{margin-bottom:8px}
.n17-more{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.2 var(--sf-font-body);color:var(--sf-volt-soft);text-decoration-color:rgba(159,214,255,.45)}
.n17-more:hover{color:var(--sf-hot)}

@media (max-width:639px){
  .tier{grid-template-columns:64px minmax(0,1fr)}
  .tier-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top top" "name name" "def btn";column-gap:10px;row-gap:2px;align-items:center}
  .tier-top{grid-area:top}
  .tier-name{grid-area:name}
  .tier-def{grid-area:def;margin:0;font-size:14px}
  .tier .btn{grid-area:btn;width:auto;margin-top:2px;white-space:nowrap;font-size:14px;padding:0 16px}
}
/* stacked: phones, tablets, portrait screens */
@media (max-width:999px), (max-aspect-ratio:124/100){
  .n17{--art-h:min(96vw,64svh)}
  .n17-art{height:var(--art-h);width:100%}
  .n17-art img{object-position:50% 52%}
  .n17-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,11,0) 40%,rgba(7,7,11,.74) 70%,var(--sf-void) 100%)}
  .n17-in{margin-top:calc(var(--art-h) * -.35);padding-bottom:28px}
  .n17{min-height:85svh}
}
@media (min-width:640px) and (max-width:999px), (min-width:640px) and (max-aspect-ratio:124/100){
  .n17{--art-h:min(88.5vw,52svh)}
  .n17-long{display:inline}
  .n17-short{display:none}
  .n17-head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name name" "date when when"}
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tier{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .tier-art{aspect-ratio:16/9;height:auto}
  .tier-name{min-height:2.3em}
  .tier-body{padding:14px 14px 16px;gap:4px}
  .tier-def{margin-bottom:0}
  .tier-get{display:block}
}

/* overlay: landscape desktop, the art fills the screen */
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  .n17{min-height:calc(100svh - 64px);display:grid}
  .n17-art{position:absolute;inset:0;z-index:-2}
  .n17-art img{object-position:50% 30%}
  .n17::before,.n17::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
  .n17::before{top:0;height:44%;background:radial-gradient(ellipse 34% 60% at 12% 42%,rgba(7,7,11,.7),rgba(7,7,11,0) 100%),linear-gradient(180deg,rgba(7,7,11,.88) 0%,rgba(7,7,11,.6) 50%,rgba(7,7,11,0) 100%)}
  .n17::after{bottom:0;height:46%;background:linear-gradient(180deg,rgba(7,7,11,0) 0%,rgba(7,7,11,.78) 48%,var(--sf-void) 100%)}
  .n17-in{width:100%;grid-template-rows:auto 1fr auto auto;padding-block:clamp(20px,3.6vh,40px) clamp(10px,2vh,22px);gap:0}
  .n17-head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"date name when";column-gap:clamp(20px,2.4vw,40px);align-items:end}
  .n17-date{font-size:clamp(4rem,.5rem + 5vw,7rem)}
  .n17-band{font-size:clamp(2.6rem,.6rem + 3vw,3.6rem);font-stretch:var(--sf-stretch-wide)}
  .n17-feat{font-size:clamp(1.25rem,.7rem + .9vw,1.9rem)}
  .n17-event{font-size:13px;margin-bottom:10px}
  .n17-when{color:#c9c8d1;text-align:right;font-size:clamp(13px,.55rem + .4vw,16px);padding-bottom:4px}
  .n17-long{display:inline}
  .n17-short{display:none}
  .tiers{grid-row:3;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.14fr);gap:clamp(12px,1.2vw,18px);align-self:end}
  .tier{grid-template-columns:clamp(92px,8.6vw,150px) minmax(0,1fr);background:rgba(14,14,20,.92)}
  .tier-vip{background:rgba(11,26,43,.94)}
  .tier-body{padding:clamp(14px,1.3vw,20px);gap:4px}
  .tier-def{margin-bottom:0}
  .tier-get{display:block}
  .tier-name{font-size:clamp(1.02rem,.6rem + .5vw,1.3rem)}
  .tier-price{font-size:clamp(1.35rem,.9rem + .6vw,1.75rem)}
  .tier-vip .tier-price{font-size:clamp(1.6rem,1rem + .8vw,2.2rem)}
  .n17-more{grid-row:4;margin-top:4px}
}
@media (min-width:1000px) and (max-width:1199px) and (min-aspect-ratio:5/4){
  .tier-get{font-size:13px}
  .tier-def{font-size:14px}
}
@media (min-width:1000px) and (min-aspect-ratio:5/4) and (max-height:820px){
  .n17-art img{object-position:50% 8%}
  .tier-get{display:none}
  .tier-def{margin-bottom:8px}
  .tier{grid-template-columns:clamp(84px,7vw,120px) minmax(0,1fr)}
  .tier-body{padding:12px 14px 14px}
}
@media (min-width:1000px) and (min-aspect-ratio:5/4) and (max-aspect-ratio:3/2){
  .n17-art{bottom:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .n17-art img{object-position:50% 50%}
}
@media (max-width:639px) and (max-height:780px){
  .n17{--art-h:min(72vw,33svh)}
  .n17-art::after{background:linear-gradient(180deg,rgba(7,7,11,0) 30%,rgba(7,7,11,.86) 60%,var(--sf-void) 100%)}
  .n17-in{margin-top:calc(var(--art-h) * -.38)}
  .n17-date{font-size:2.4rem}
  .n17-head{row-gap:8px}
  .tier{grid-template-columns:56px minmax(0,1fr)}
  .tier-body{padding:8px 12px}
}
@media (max-width:639px) and (max-height:700px){
  .n17{--art-h:min(72vw,26svh)}
  .n17-in{margin-top:calc(var(--art-h) * -.3);gap:10px}
  .n17-event{margin-bottom:4px}
  .n17-date{font-size:2.1rem}
  .tiers{gap:6px}
  .tier-body{position:relative}
  .tier-top{position:absolute;top:8px;right:12px}
  .tier-st{display:none}
  .tier-name{padding-right:64px}
  .tier-vip .tier-name{padding-right:84px}
  .tier-body .btn{margin-top:5px}
}

/* eclipse + totality countdown (Greg 10/20: "bring that concept back"): the moon slides over the sun as Nov 19 nears */
.n17-ecl{position:absolute;top:14px;right:16px;z-index:2;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;--ecl:clamp(58px,17vw,96px)}
.n17-ecl .ecl{width:var(--ecl);margin:0;flex:none}
.n17-ecl-t{display:grid;gap:4px;text-align:right;text-shadow:0 1px 10px rgba(7,7,11,.9)}
.n17-ecl .count{display:flex;gap:10px;justify-content:flex-end;margin:0;color:var(--sf-ink)}
.n17-ecl .count > span{display:grid;justify-items:end;gap:2px;margin:0}
.n17-ecl .count .n{font:500 clamp(1.5rem,6.4vw,2.2rem)/1 var(--sf-font-mono);letter-spacing:-.03em;color:var(--sf-ink);font-variant-numeric:tabular-nums}
.n17-ecl .count .u{font:500 10px/1 var(--sf-font-mono);letter-spacing:.14em;text-transform:uppercase;color:#c9c8d1}
.n17-ecl .count.out .n{color:var(--sf-volt)}
.n17-ecl-cap{margin:0;font:500 10px/1.3 var(--sf-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sf-volt-soft)}
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  .n17-ecl{position:static;grid-row:2;justify-self:end;align-self:start;flex-direction:column;align-items:flex-end;gap:14px;margin-top:clamp(14px,3vh,36px);--ecl:clamp(104px,9.5vw,180px)}
  .n17-ecl .count .n{font-size:clamp(2rem,1rem + 1.6vw,3.2rem)}
  .n17-ecl .count .u,.n17-ecl-cap{font-size:11px}
}
@media (min-width:1000px) and (min-aspect-ratio:5/4) and (max-height:820px){
  .n17-ecl{--ecl:clamp(84px,7.5vw,130px);gap:10px}
  .n17-ecl .count .n{font-size:clamp(1.7rem,.8rem + 1.3vw,2.5rem)}
}

/* Nails video link block */
.nails-card{display:grid;gap:18px;color:var(--sf-ink);text-decoration:none;border:1px solid rgba(234,246,255,.18);border-radius:var(--sf-radius-card);background:var(--sf-night);overflow:hidden}
.nails-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.nails-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nails-play{position:absolute;left:16px;bottom:16px;width:64px;height:64px;border-radius:50%;background:rgba(7,7,11,.72);border:2px solid var(--sf-ink)}
.nails-play::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--sf-ink)}
.nails-t{display:grid;gap:6px;padding:0 18px 20px}
.nails-k{font:500 11px/1.3 var(--sf-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sf-volt-soft)}
.nails-h{font:850 clamp(1.3rem,1rem + 1.4vw,2.1rem)/1.1 var(--sf-font-display);font-stretch:var(--sf-stretch-display);color:var(--sf-ink)}
.nails-s{font:400 15px/1.4 var(--sf-font-body);color:#c9c8d1}
.nails-card:hover .nails-img img{transform:scale(1.03)}
.nails-card:hover .nails-play{background:var(--sf-volt);border-color:var(--sf-volt)}
.nails-card:hover .nails-play::after{border-left-color:var(--sf-void)}
.nails-card:focus-visible{outline:2px solid var(--sf-volt);outline-offset:3px}
@media (min-width:860px){
  .nails-card{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:0}
  .nails-t{padding:28px 32px}
}
.foot-min .wrap{display:grid;gap:12px;justify-items:start}
@media (max-width:999px), (max-aspect-ratio:124/100){
  .n17-in{position:static}
}
.foot-min .wrap{grid-template-columns:minmax(0,1fr)}
.n17-ecl .ecl{margin-right:calc(var(--ecl) * var(--off,1) * .96)}
@media (prefers-reduced-motion:no-preference){.n17-ecl .ecl{transition:margin-right 1.8s cubic-bezier(.16,1,.3,1)}}
@media (max-width:639px) and (max-height:780px){
  .n17-ecl{top:8px}
  .n17-ecl-cap{display:none}
}
@media (max-width:639px) and (max-height:700px){
  .n17-ecl{flex-direction:column;align-items:flex-end;gap:6px;top:6px;right:12px;--ecl:42px}
  .n17-ecl .count{gap:8px}
  .n17-ecl .count .n{font-size:1.15rem}
  .n17-ecl .count .u{font-size:9px}
}
@media (max-width:999px), (max-aspect-ratio:124/100){
  .n17-ecl-t{background:radial-gradient(closest-side,rgba(7,7,11,.72),rgba(7,7,11,.5) 60%,rgba(7,7,11,0));padding:8px 12px}
}
/* whole-page review round (10/20) */
@media (min-width:1000px) and (min-aspect-ratio:5/4){
  .n17-ecl{--ecl:clamp(150px,13vw,240px);align-items:center;gap:16px}
  .n17-ecl-t{text-align:center}
  .n17-ecl .count{justify-content:center;gap:18px}
  .n17-ecl .count > span{justify-items:center}
  .n17-ecl .count .n{font-size:clamp(2.4rem,1rem + 2.2vw,3.6rem)}
  .n17-ecl .count .u,.n17-ecl-cap{font-size:12px}
}
@media (min-width:1000px) and (min-aspect-ratio:5/4) and (max-height:820px){
  .n17-ecl{--ecl:clamp(116px,9.6vw,170px);gap:12px}
  .n17-ecl .count .n{font-size:clamp(2rem,.8rem + 1.7vw,2.9rem)}
}
@media (max-width:639px) and (max-height:700px){
  .n17-ecl{--ecl:30px;flex-direction:row-reverse;right:10px;left:auto;align-items:center;gap:6px;top:6px}
  .n17-ecl-t{padding:4px 9px}
  .n17-ecl .count .n{font-size:15px}
  .n17-ecl .count .u{font-size:9px}
}
.n17 ~ .sec{padding-block:clamp(56px,7vw,96px)}
.nf-vip{display:grid;gap:12px;justify-items:start;margin:24px 0 0;padding:18px;border:1px solid var(--sf-volt);border-radius:var(--sf-radius-card);background:#0b1a2b;font:600 15px/1.4 var(--sf-font-body);color:var(--sf-ink);max-width:420px}
.nails-h{font-size:clamp(1.6rem,1rem + 1.8vw,2.5rem)}
.nails-t{gap:12px;align-content:center}
.nails-btn{justify-self:start;margin-top:6px}
.ways-where{margin-top:12px;color:var(--sf-ink)}
@media (max-width:639px){.n17-when{line-height:1.25;gap:0}.n17-head{margin-bottom:-4px}}
@media (max-width:639px) and (max-height:700px){.n17-art img{object-position:50% 55%}}
@media (max-width:639px) and (min-height:781px){.n17{--art-h:min(96vw,64svh,calc(100svh - 516px))}}
.top-ecl{display:none}
@media (max-width:639px) and (max-height:700px){.n17-ecl{display:none}.top-ecl{display:flex;align-items:center;gap:8px;margin-left:auto}.top-ecl .ecl{width:26px;margin:0 calc(26px * var(--off,1) * .96) 0 0;flex:none}.top-ecl .count{display:flex;gap:6px;margin:0;font:500 14px/1 var(--sf-font-mono);color:var(--sf-ink)}.top-ecl .count>span{display:flex;align-items:baseline;gap:1px}.top-ecl .u{font-size:11px;color:#c9c8d1}}
@media (max-width:639px) and (max-height:700px){.top-ecl .count .n{font:500 15px/1 var(--sf-font-mono);color:var(--sf-ink)}.top-ecl .count .u{text-transform:none;letter-spacing:0;margin-left:1px}}
/* hero crop (judge 10/20 11:12): on landscape desktops the photo is sized to the gap between the title and the ticket cards,
   so faces sit under the title and the keys, stick hand and bass sit above the cards; photo unchanged, edges fade into the page */
@media (min-width:1000px) and (min-aspect-ratio:3/2){
  .n17{--face:clamp(150px,104px + 3.8vw,182px);--cards:314px;--art-h:min(calc((100svh - 64px - var(--cards) - var(--face) + 20px) / .656),56.25vw,660px)}
  .n17-art{inset:auto;left:47%;bottom:calc(var(--cards) - 20px - var(--art-h) * .074);height:var(--art-h);width:auto;aspect-ratio:16/9;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 22%,#000 88%,transparent);mask-composite:intersect}
  .n17-art img{object-position:50% 50%}
}
@media (min-width:1000px) and (min-aspect-ratio:3/2) and (max-height:820px){
  .n17{--cards:223px}
}