/* ===========================================================
   Last Set Jazz — global stylesheet
   Aesthetic: Verve record sleeve. Warm ochre paper, ink, terracotta + teal.
   David Stone Martin ink-line sensibility. Fraunces + Work Sans.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500;1,9..144,600&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:    #e8dcc0;
  --paper-2:  #ded0ae;
  --paper-3:  #d4c4a0;
  --ink:      #221a12;
  --ink-soft: #5a4a36;
  --line:     #221a12;
  --hair:     rgba(34,26,18,.22);
  --terra:    #c5462a;
  --terra-dk: #a3361f;
  --teal:     #1f6b63;
  --mustard:  #c98a1e;
  --era-swing:  #8a5a2b;
  --era-bebop:  #c5462a;
  --era-cool:   #1f6b63;
  --era-hardbop:#6d6e23;
  --era-modal:  #7a3b63;
  --maxw: 1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font-family:'Work Sans',sans-serif;font-size:18px;line-height:1.62}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}
a{color:var(--terra);text-decoration:none;transition:color .15s}
a:hover{color:var(--terra-dk)}
em{font-style:italic}

/* Masthead */
.site-head{border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:50;background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 32px}
.brand{font-family:'Fraunces',serif;font-weight:900;font-size:1.55rem;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);line-height:.85;position:relative}
.brand:hover{color:var(--ink)}
.brand .dot{color:var(--terra)}
.brand::after{content:"Jazz · 1920–1965";display:block;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.56rem;letter-spacing:.34em;color:var(--teal);margin-top:5px;text-transform:uppercase}
.nav{display:flex;gap:24px;font-family:'Work Sans',sans-serif;font-weight:600}
.nav a{color:var(--ink);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--terra);color:var(--ink)}
.nav-surprise{color:var(--terra) !important}
.nav-surprise:hover{color:var(--terra-dk) !important;border-color:var(--terra) !important}

/* Hero */
.hero{padding:68px 0 44px;border-bottom:2px solid var(--ink)}
.hero .eyebrow{font-family:'Work Sans',sans-serif;font-weight:600;color:var(--teal);letter-spacing:.3em;text-transform:uppercase;font-size:.74rem;margin-bottom:20px}
.hero h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.8rem,7.5vw,5.6rem);line-height:.88;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:italic;font-weight:500;color:var(--terra)}
.hero p.lede{margin-top:24px;max-width:50ch;font-size:1.14rem;color:var(--ink-soft)}
.hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:13px 24px;border:2px solid var(--ink);color:var(--ink);background:transparent;display:inline-block;transition:all .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-solid{background:var(--terra);border-color:var(--terra);color:var(--paper)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Section heads */
.section{padding:56px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:32px;flex-wrap:wrap}
.section-head h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.section-head .rule{flex:1;height:0;min-width:20px}
.section-head a.more{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--terra)}

/* Roster: liner-note rows */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink);counter-reset:card}
.card{position:relative;display:block;text-decoration:none;color:var(--ink);padding:20px 26px 20px 62px;border-bottom:1px solid var(--ink);counter-increment:card;transition:background .15s}
.card:nth-child(odd){border-right:1px solid var(--ink)}
.card:hover{background:var(--paper-2)}
.card::before{content:counter(card,lower-roman);position:absolute;left:24px;top:22px;font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:1.2rem;color:var(--terra)}
.card .yrs{display:block;font-family:'Work Sans',sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--ink-soft)}
.card .nm{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;line-height:1.04;letter-spacing:-.01em;margin-top:2px;color:var(--ink)}
.card .inst{display:inline-block;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--teal);padding:3px 9px;margin-top:10px;font-style:normal}
.card:hover .nm{color:var(--terra)}
.card[data-era="swing"] .inst{background:var(--era-swing)}
.card[data-era="bebop"] .inst{background:var(--era-bebop)}
.card[data-era="cool"] .inst{background:var(--era-cool)}
.card[data-era="hardbop"] .inst{background:var(--era-hardbop)}
.card[data-era="modal"] .inst{background:var(--era-modal)}
.card[data-era="swing"]::before{color:var(--era-swing)}
.card[data-era="bebop"]::before{color:var(--era-bebop)}
.card[data-era="cool"]::before{color:var(--era-cool)}
.card[data-era="hardbop"]::before{color:var(--era-hardbop)}
.card[data-era="modal"]::before{color:var(--era-modal)}

/* Prose page */
.page{padding:60px 0 40px;max-width:68ch}
.page h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.01em;margin-bottom:8px;text-transform:uppercase}
.page .sub{color:var(--ink-soft);font-style:italic;font-family:'Fraunces',serif;margin-bottom:34px;font-size:1.1rem}
.page h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;color:var(--terra);margin:36px 0 12px}
.page p{margin-bottom:18px}
.page ul{margin:0 0 18px 1.2em}
.page li{margin-bottom:8px}

/* Store */
.store{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.product{background:transparent;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:20px;display:flex;flex-direction:column}
.product .cover{aspect-ratio:1/1;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:'Work Sans',sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);margin-bottom:14px}
.product .ptitle{font-family:'Fraunces',serif;font-weight:600;font-size:1.12rem;line-height:1.1;color:var(--ink)}
.product .psub{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.04em;color:var(--terra);margin:5px 0 8px;text-transform:uppercase}
.product .pwhy{font-size:.9rem;color:var(--ink-soft);margin:6px 0 14px;flex:1}
.product .buy{margin-top:auto}
.product .paid{display:block;font-family:'Work Sans',sans-serif;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}

/* Footer */
.site-foot{border-top:3px solid var(--ink);margin-top:40px;padding:44px 0;background:var(--ink);color:var(--paper)}
.site-foot .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.site-foot .brand-sm{font-family:'Fraunces',serif;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);font-size:1.1rem}
.site-foot .flinks{display:flex;gap:20px;flex-wrap:wrap;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.site-foot .flinks a{color:var(--paper-2)}
.site-foot .flinks a:hover{color:var(--mustard)}
.disclosure{margin-top:26px;padding-top:22px;border-top:1px solid rgba(232,220,192,.25);font-size:.84rem;color:var(--paper-2);max-width:70ch}
.copy{margin-top:14px;font-size:.74rem;color:rgba(232,220,192,.55)}

@media(max-width:760px){
  .site-head .wrap{flex-direction:column;gap:14px;align-items:flex-start}
  .nav{gap:16px;flex-wrap:wrap}
  .grid{grid-template-columns:1fr}
  .card:nth-child(odd){border-right:none}
}

/* Artist page */
.artist-hero{padding:60px 0 44px;border-bottom:2px solid var(--ink)}
.artist-hero-inner{display:flex;gap:46px;align-items:center;flex-wrap:wrap}
.photo-ph,.artist-photo{width:280px;height:340px;flex:none;border:2px solid var(--ink)}
.artist-photo{object-fit:cover;filter:grayscale(1) sepia(.34) contrast(1.05) brightness(1.02)}
.photo-ph{background:repeating-linear-gradient(45deg,var(--paper-2) 0 9px,var(--paper-3) 9px 18px);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:'Work Sans',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;line-height:1.6}
.artist-figure{margin:0;flex:none}
.photo-credit{font-family:'Work Sans',sans-serif;font-size:.62rem;letter-spacing:.03em;color:var(--ink-soft);margin-top:6px;max-width:280px;line-height:1.4}
.photo-credit a{color:var(--ink-soft);text-decoration:underline}
.photo-credit a:hover{color:var(--terra)}
.artist-head{flex:1;min-width:280px}
.artist-head .eyebrow{font-family:'Work Sans',sans-serif;font-weight:600;color:var(--teal);letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;margin-bottom:14px}
.artist-head h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;letter-spacing:-.02em;color:var(--ink)}
.artist-head .lifespan{font-family:'Work Sans',sans-serif;font-weight:500;color:var(--ink-soft);font-size:.88rem;letter-spacing:.04em;margin-top:12px}
.artist-head .oneline{font-family:'Fraunces',serif;font-size:1.3rem;font-style:italic;color:var(--ink);margin-top:18px;max-width:42ch}
.artist-body{padding:50px 0 20px}
.story{max-width:66ch}
.story p{margin-bottom:20px}
.story p:first-of-type::first-letter{font-family:'Fraunces',serif;font-weight:900;float:left;font-size:4.4rem;line-height:.72;padding:6px 12px 0 0;color:var(--terra)}
.start-here{max-width:66ch;margin:46px 0;padding:28px 30px;background:var(--paper-2);border-left:4px solid var(--terra)}
.start-here h2{font-family:'Work Sans',sans-serif;font-weight:700;color:var(--terra);font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.start-here p{margin-bottom:14px}
.start-here em{color:var(--terra-dk);font-style:italic}
.artist-store{margin-top:54px}
.back-link{margin-top:46px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:640px){.photo-ph,.artist-photo{width:100%;height:320px}}
body[data-era="swing"] .artist-head .eyebrow{color:var(--era-swing)}
body[data-era="bebop"] .artist-head .eyebrow{color:var(--era-bebop)}
body[data-era="cool"] .artist-head .eyebrow{color:var(--era-cool)}
body[data-era="hardbop"] .artist-head .eyebrow{color:var(--era-hardbop)}
body[data-era="modal"] .artist-head .eyebrow{color:var(--era-modal)}
body[data-era="swing"] .start-here{border-left-color:var(--era-swing)}
body[data-era="bebop"] .start-here{border-left-color:var(--era-bebop)}
body[data-era="cool"] .start-here{border-left-color:var(--era-cool)}
body[data-era="hardbop"] .start-here{border-left-color:var(--era-hardbop)}
body[data-era="modal"] .start-here{border-left-color:var(--era-modal)}
body[data-era="swing"] .story p:first-of-type::first-letter{color:var(--era-swing)}
body[data-era="bebop"] .story p:first-of-type::first-letter{color:var(--era-bebop)}
body[data-era="cool"] .story p:first-of-type::first-letter{color:var(--era-cool)}
body[data-era="hardbop"] .story p:first-of-type::first-letter{color:var(--era-hardbop)}
body[data-era="modal"] .story p:first-of-type::first-letter{color:var(--era-modal)}

/* Listen */
.listen{max-width:66ch;margin:46px 0}
.listen-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.listen-head h2{font-family:'Work Sans',sans-serif;font-weight:700;color:var(--terra);font-size:.92rem;letter-spacing:.16em;text-transform:uppercase}
.player-toggle{display:inline-flex;border:2px solid var(--ink)}
.ptab{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:transparent;color:var(--ink);border:none;padding:8px 16px;transition:all .15s}
.ptab+.ptab{border-left:2px solid var(--ink)}
.ptab:hover{color:var(--terra)}
.ptab.active{background:var(--terra);color:var(--paper)}
.embed{margin-bottom:18px}
.embed iframe{width:100%;border:0;display:block}
.embed .embed-label{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px;text-transform:uppercase}
.embed .embed-missing{background:var(--paper-2);border:1px dashed var(--ink);padding:22px;color:var(--ink-soft);font-size:.9rem;text-align:center}

/* Eras */
.era-block{max-width:70ch;margin-bottom:36px;padding-left:22px;border-left:3px solid var(--ink)}
.era-block .era-yrs{font-family:'Work Sans',sans-serif;font-weight:600;color:var(--terra);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
.era-block h2{font-family:'Fraunces',serif;font-weight:900;color:var(--ink);font-size:clamp(1.6rem,3.5vw,2.3rem);margin:6px 0 12px;letter-spacing:-.01em;text-transform:uppercase}
.era-block p{color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.filter{font-family:'Work Sans',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;background:transparent;color:var(--ink);border:2px solid var(--ink);padding:9px 15px;transition:all .15s}
.filter:hover{background:var(--ink);color:var(--paper)}
.filter.active{background:var(--ink);color:var(--paper)}
.filter[data-filter]:not([data-filter="all"])::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--ink-soft)}
.filter[data-filter="swing"]::before{background:var(--era-swing)}
.filter[data-filter="bebop"]::before{background:var(--era-bebop)}
.filter[data-filter="cool"]::before{background:var(--era-cool)}
.filter[data-filter="hardbop"]::before{background:var(--era-hardbop)}
.filter[data-filter="modal"]::before{background:var(--era-modal)}
.filter[data-filter="swing"].active{background:var(--era-swing);border-color:var(--era-swing);color:var(--paper)}
.filter[data-filter="bebop"].active{background:var(--era-bebop);border-color:var(--era-bebop);color:var(--paper)}
.filter[data-filter="cool"].active{background:var(--era-cool);border-color:var(--era-cool);color:var(--paper)}
.filter[data-filter="hardbop"].active{background:var(--era-hardbop);border-color:var(--era-hardbop);color:var(--paper)}
.filter[data-filter="modal"].active{background:var(--era-modal);border-color:var(--era-modal);color:var(--paper)}
.filter[data-filter].active::before{background:var(--paper);opacity:.7}

/* Timeline */
.tl-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px}
.tl-leg{display:inline-flex;align-items:center;gap:8px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.05em;color:var(--ink-soft)}
.tl-swatch{width:14px;height:14px;display:inline-block;border-radius:50%}
.tl-scroll{overflow-x:auto;padding-bottom:8px}
.tl-plot{position:relative;min-width:720px}
.tl-bg{position:absolute;inset:0;display:flex;pointer-events:none;z-index:0}
.tl-bg-name{flex:0 0 23%}
.tl-bg-track{position:relative;flex:1 1 auto}
.tl-golden{position:absolute;top:0;bottom:34px;background:rgba(197,70,42,.08);border-left:1px dashed var(--ink);border-right:1px dashed var(--ink)}
.tl-grid{position:absolute;top:0;bottom:34px;width:1px;background:var(--hair)}
.tl-row{display:flex;align-items:center;height:30px;text-decoration:none;position:relative;z-index:2}
.tl-name{flex:0 0 23%;font-family:'Work Sans',sans-serif;font-weight:600;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px;color:var(--ink)}
.tl-track{position:relative;flex:1 1 auto;height:100%}
.tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:10px;border-radius:5px;transition:height .15s,filter .15s}
.tl-life{flex:0 0 auto;width:0;overflow:visible;white-space:nowrap;font-family:'Work Sans',sans-serif;font-size:.66rem;color:var(--ink-soft);opacity:0;transition:opacity .15s;padding-left:10px;text-align:right}
.tl-row:hover .tl-bar{height:16px;filter:brightness(1.08)}
.tl-row:hover .tl-name{color:var(--terra)}
.tl-row:hover .tl-life{opacity:1}
.tl-axis-row{height:24px}
.tl-axis{border-top:2px solid var(--ink)}
.tl-axis-label{position:absolute;top:5px;transform:translateX(-50%);font-family:'Work Sans',sans-serif;font-size:.64rem;color:var(--ink-soft)}

/* Connections */
.connections{max-width:66ch;margin:48px 0 0}
.conn-line{margin:10px 0;line-height:1.9}
.conn-tag{display:inline-block;font-family:'Work Sans',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--terra);padding:3px 9px;margin-right:8px;vertical-align:middle}
.conn-line a{color:var(--terra)}
.conn-line a:hover{color:var(--terra-dk)}

/* Glossary */
.gloss{border-bottom:1px dotted var(--terra);cursor:help;position:relative;outline:none}
.gloss:hover,.gloss:focus{color:var(--terra)}
.gloss-pop{position:absolute;left:0;bottom:140%;z-index:60;width:260px;max-width:80vw;background:var(--ink);color:var(--paper);border:2px solid var(--terra);padding:12px 14px;font-size:.86rem;line-height:1.5;font-style:normal;font-family:'Work Sans',sans-serif;box-shadow:4px 4px 0 rgba(34,26,18,.3);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none}
.gloss:hover .gloss-pop,.gloss:focus .gloss-pop{opacity:1;visibility:visible;transform:translateY(0)}
.gloss-pop::after{content:"";position:absolute;top:100%;left:16px;border:6px solid transparent;border-top-color:var(--terra)}
.gl-list{margin-top:10px}
.gl-item{padding:16px 0;border-bottom:1px solid var(--hair)}
.gl-item dt{font-family:'Fraunces',serif;font-weight:600;color:var(--terra);font-size:1.1rem;margin-bottom:4px}
.gl-item dd{margin:0;color:var(--ink)}

/* Map */
#map-wrap{width:100%;border:2px solid var(--ink);background:var(--paper-2);overflow:hidden}
#map{display:block;width:100%}
#map text{user-select:none}