:root {}
/* Jonas Group Web Kit — local styles. Relies on ../../colors_and_type.css tokens. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--fg1); font-family: var(--font-ui); }
a { cursor: pointer; text-decoration: none; color: inherit; }
button { font: inherit; }
img { max-width: 100%; display: block; }

/* --- Top Nav --- */
.jg-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 56px;
  background: var(--ink); color: var(--fg-on-ink-1);
  border-bottom: 1px solid var(--ink-line);
}
.jg-brand { display: flex; flex-direction: column; gap: 2px; }
.jg-brand .wm { font-family: var(--font-wordmark); letter-spacing: .18em; font-size: 20px; font-weight: 400; }
.jg-brand .sub { font-family: var(--font-wordmark); letter-spacing: .32em; font-size: 9px; color: var(--fg-on-ink-2); }
.jg-nav nav { display: flex; gap: 28px; }
.jg-nav nav a {
  font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .18em;
  font-size: 12px; color: var(--fg-on-ink-1);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.jg-nav nav a:hover, .jg-nav nav a.active { border-color: var(--tan); }

/* --- Hero --- */
.jg-hero {
  min-height: 520px; background: var(--ink); color: var(--fg-on-ink-1);
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.82) 100%),
    url('../../assets/artist-rhett.jpg');
  background-size: cover; background-position: center 28%;
}
.jg-hero .hero-inner { text-align: center; padding: 80px 24px; }
.jg-hero .sub { font-family: var(--font-wordmark); letter-spacing: .32em; font-size: 13px; color: var(--fg-on-ink-2); margin-bottom: 18px; }
.jg-hero .wordmark { font-family: var(--font-wordmark); letter-spacing: .16em; font-size: clamp(56px, 9vw, 120px); font-weight: 400; margin: 0; line-height: 1; }
.jg-hero .now-playing { margin-top: 40px; font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--fg-on-ink-2); }
.jg-hero .now-playing .dot { display: inline-block; width: 8px; height: 8px; background: var(--tan); border-radius: 50%; margin-right: 8px; vertical-align: middle; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* --- Marquee --- */
.jg-marquee {
  overflow: hidden; background: var(--cream); padding: 40px 0;
  border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.jg-marquee .track { display: flex; white-space: nowrap; animation: scroll 30s linear infinite; width: max-content; }
.jg-marquee .marq-item {
  font-family: var(--font-display); font-weight: 500; font-size: 72px;
  color: var(--ink); padding: 0 24px; letter-spacing: -.01em;
}
.jg-marquee .dot { color: var(--tan-deep); margin-left: 24px; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Section header --- */
.jg-section-head { padding: 0 56px; margin: 0 0 40px; }
.jg-section-head .eyb {
  font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .32em;
  font-size: 11px; color: var(--fg3); margin-bottom: 14px;
}
.jg-section-head .rules { display: flex; gap: 6px; margin-bottom: 18px; }
.jg-section-head .rules span { width: 56px; height: 3px; background: var(--ink); }
.jg-section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.jg-section-head h2 em { font-family: var(--font-body); font-style: italic; font-size: 22px; color: var(--fg3); font-weight: 400; margin-left: 10px; vertical-align: middle; }

/* --- Artist grid --- */
.jg-artist-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 20px 56px 80px;
}
.jg-artist-card {
  background: var(--paper); border: 1px solid var(--divider);
  transition: all var(--dur-med) var(--ease-out);
}
.jg-artist-card:hover { transform: translateY(-2px); border-color: var(--tan-deep); box-shadow: var(--shadow-2); }
.jg-artist-card .portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--n-100); }
.jg-artist-card .portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.jg-artist-card:hover .portrait img { transform: scale(1.03); }
.jg-artist-card .meta { padding: 16px 14px 18px; text-align: center; border-top: 1px solid var(--tan); }
.jg-artist-card .name { font-family: var(--font-wordmark); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 14px; }
.jg-artist-card .role { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--fg3); margin-top: 4px; }

/* --- News --- */
.jg-news { }
.jg-news .news-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 56px;
}
.news-card { }
.news-card .img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--n-100); margin-bottom: 18px; }
.news-card .img img { width: 100%; height: 100%; object-fit: cover; }
.news-card .eyb { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .28em; font-size: 10px; color: var(--fg3); margin-bottom: 8px; }
.news-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -.005em; }
.news-card .date { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--fg3); margin-top: 10px; }

/* --- Split / catalog-publishing --- */
.jg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--divider); }
.jg-split .card { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; border-right: 1px solid var(--divider); }
.jg-split .card:last-child { border-right: 0; }
.jg-split .img { background-size: cover; background-position: center; }
.jg-split .body { padding: 48px 40px; background: var(--paper); display: flex; flex-direction: column; justify-content: center; }
.jg-split .body .eyb { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .28em; font-size: 10px; color: var(--fg3); margin-bottom: 10px; }
.jg-split .body h3 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.05; margin: 0 0 16px; letter-spacing: -.01em; }
.jg-split .body p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg2); margin: 0 0 24px; }
.jg-split .body .more { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.jg-split .body .more .arr { transition: transform var(--dur-fast) var(--ease-out); }
.jg-split .body .more:hover .arr { transform: translateX(4px); }

/* --- About --- */
.jg-about { padding: 80px 0; background: var(--cream-2); }
.jg-about .about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; padding: 0 56px; }
.jg-about .lede { font-family: var(--font-body); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--fg2); margin: 0 0 24px; }
.jg-about p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg1); }
.jg-about .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-self: start; }
.jg-about .stat { background: var(--paper); padding: 28px 20px; border: 1px solid var(--divider); text-align: center; }
.jg-about .stat .num { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; color: var(--ink); }
.jg-about .stat .lbl { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .22em; font-size: 10px; color: var(--fg3); margin-top: 10px; }

/* --- Artist Detail --- */
.jg-artist-detail { padding: 40px 56px 80px; background: var(--cream); min-height: 90vh; }
.jg-artist-detail .back { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; color: var(--fg2); display: inline-block; margin-bottom: 32px; border-bottom: 1px solid var(--divider); padding-bottom: 4px; }
.jg-artist-detail .back:hover { color: var(--ink); border-color: var(--ink); }
.jg-artist-detail .detail-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; }
.jg-artist-detail .portrait { aspect-ratio: 4/5; background: var(--n-100); overflow: hidden; }
.jg-artist-detail .portrait img { width: 100%; height: 100%; object-fit: cover; }
.jg-artist-detail .bio .eyb { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .28em; font-size: 11px; color: var(--fg3); margin-bottom: 14px; }
.jg-artist-detail .bio h2 { font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: .98; letter-spacing: -.01em; margin: 0 0 24px; }
.jg-artist-detail .bio .lede { font-family: var(--font-body); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--fg2); margin: 0 0 24px; }
.jg-artist-detail .bio p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg1); }
.jg-artist-detail .signed { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--divider); }
.jg-artist-detail .labels { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.jg-artist-detail .pill { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }

/* --- Buttons --- */
.jg-btn { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; padding: 14px 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 2px; transition: all var(--dur-fast) var(--ease-out); }
.jg-btn.primary { background: var(--ink); color: var(--cream); }
.jg-btn.accent { background: var(--tan); border-color: var(--tan-deep); color: var(--ink); }
.jg-btn:hover { opacity: .85; }

/* --- Footer --- */
.jg-footer { background: var(--ink); color: var(--fg-on-ink-1); padding: 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; border-top: 1px solid var(--ink-line); }
.jg-footer .wm { font-family: var(--font-wordmark); letter-spacing: .18em; font-size: 18px; }
.jg-footer .sub { font-family: var(--font-wordmark); letter-spacing: .32em; font-size: 9px; color: var(--fg-on-ink-2); margin-top: 4px; }
.jg-footer .eyb { font-family: var(--font-wordmark); text-transform: uppercase; letter-spacing: .28em; font-size: 10px; color: var(--fg-on-ink-3); margin-bottom: 10px; }
.jg-footer p { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--fg-on-ink-2); margin: 0; }
.jg-footer .socials { display: flex; flex-direction: column; gap: 6px; }
.jg-footer .socials a { font-family: var(--font-ui); font-size: 13px; color: var(--fg-on-ink-2); border-bottom: 1px solid transparent; align-self: flex-start; }
.jg-footer .socials a:hover { color: var(--cream); border-color: var(--tan); }
.jg-footer .right { text-align: right; }
.jg-footer .copyright { font-family: var(--font-mono); font-size: 11px; color: var(--fg-on-ink-3); }