/* =====================================================================
   Gaanshala - design system
   ---------------------------------------------------------------------
   Loaded after every other stylesheet, so it can correct them without any
   of them being edited.

   The palette is the site's own: the orange #eb4f1e that has always marked
   headings and rules, on the near-black the footer already used. What
   changes is consistency - the previous pass set the page dark but left
   the sections' inline light backgrounds and black text in place, which is
   how the footer ended up at a contrast ratio of 2.2 and the album tab at
   1.0.

   Type is set in rem against a 16px root so it scales with the reader's
   own settings. The old markup pinned almost everything at 13px.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

:root {
    /* Brand */
    --gs-orange:        #eb4f1e;
    --gs-orange-bright: #ff6a3c;
    --gs-orange-dim:    #c23f14;

    /* Surfaces, darkest first */
    --gs-bg:        #0d0d0f;
    --gs-surface:   #16161a;
    --gs-surface-2: #1e1e24;
    --gs-surface-3: #26262e;
    --gs-line:      #32323c;

    /* Text - each of these clears 4.5:1 on --gs-surface */
    --gs-text:      #f2f2f4;
    --gs-text-soft: #b9b9c4;
    --gs-text-dim:  #8e8e9c;

    /* Type scale */
    --gs-font:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gs-font-bn: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;

    --gs-text-xs:  0.875rem;   /* 14px - captions only */
    --gs-text-sm:  1rem;       /* 16px */
    --gs-text-md:  1.0625rem;  /* 17px - body */
    --gs-text-lg:  1.25rem;    /* 20px */
    --gs-h3:       1.5rem;     /* 24px */
    --gs-h2:       1.875rem;   /* 30px */
    --gs-h1:       2.5rem;     /* 40px */

    /* Spacing, on a 4px grid */
    --gs-1: 0.25rem;
    --gs-2: 0.5rem;
    --gs-3: 0.75rem;
    --gs-4: 1rem;
    --gs-6: 1.5rem;
    --gs-8: 2rem;
    --gs-12: 3rem;
    --gs-16: 4rem;

    --gs-radius:    10px;
    --gs-radius-lg: 16px;

    --gs-shadow:    0 4px 16px rgba(0, 0, 0, .4);
    --gs-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);

    --gs-ease: cubic-bezier(.22, .61, .36, 1);

    /* Balanced max container width aligned across body and footer */
    --gs-max: 1360px;

    /* Height reserved for the fixed player */
    --gs-player-h: 84px;
}

/* --------------------------------------------------------------- base */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    overflow-x: hidden;
}

body.gs {
    font-family: var(--gs-font);
    font-size: var(--gs-text-md);
    line-height: 1.65;
    color: var(--gs-text);
    background: var(--gs-bg);
    padding-bottom: 100px !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Bengali needs a little more room between lines than Latin at the same size. */
body.gs :lang(bn),
body.gs .gs-bn {
    font-family: var(--gs-font-bn);
    line-height: 1.85;
}

body.gs h1, body.gs h2, body.gs h3, body.gs h4 {
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--gs-4);
    color: var(--gs-text);
}
body.gs h1 { font-size: var(--gs-h1); }
body.gs h2 { font-size: var(--gs-h2); }
body.gs h3 { font-size: var(--gs-h3); }
body.gs p  { margin: 0 0 var(--gs-4); }

body.gs a { color: var(--gs-orange-bright); text-decoration: none; }
body.gs a:hover { color: var(--gs-orange); }

body.gs img { max-width: 100%; height: auto; }

/* Anything focusable has to show where focus is. */
body.gs a:focus-visible,
body.gs button:focus-visible,
body.gs input:focus-visible,
body.gs [tabindex]:focus-visible {
    outline: 2px solid var(--gs-orange-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------ layout */

.gs-wrap {
    width: 100%;
    max-width: var(--gs-max);
    margin-inline: auto;
    padding-inline: var(--gs-8);
}
.gs-wrap--wide {
    max-width: 1720px;
    padding-inline: clamp(20px, 3.5vw, 60px);
}

/* Full-bleed: spans the window regardless of the container. */
.gs-bleed { width: 100%; }
.gs-bleed > .gs-wrap { max-width: none; }

.gs-section { padding-block: var(--gs-16); }
.gs-section--tight { padding-block: var(--gs-12); }

/* A heading with the short orange rule the site has always used. */
.gs-heading {
    text-align: center;
    margin-bottom: var(--gs-8);
}
.gs-heading h2 { margin-bottom: var(--gs-3); }
.gs-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto;
    background: var(--gs-orange);
    border-radius: 2px;
}
.gs-heading--left { text-align: left; }
.gs-heading--left::after { margin-inline: 0; }

.gs-grid {
    display: grid;
    gap: var(--gs-6);
}
.gs-grid--cards  { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gs-grid--wide   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gs-grid--thirds { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------------------------------------------------------- surfaces */

.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
    overflow: hidden;
}

/* Panels laid over photography. The blur is a nicety - the solid colour
   underneath is what keeps the text readable where it is unsupported. */
.gs-panel {
    background: rgba(14, 14, 17, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-8);
    box-shadow: var(--gs-shadow-lg);
}
@supports not (backdrop-filter: blur(2px)) {
    .gs-panel { background: rgba(14, 14, 17, .96); }
}

.gs-lift { transition: transform .25s var(--gs-ease), box-shadow .25s var(--gs-ease); }
.gs-lift:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow-lg); }

/* Someone who has asked their system for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    body.gs *, body.gs *::before, body.gs *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------- buttons */

.gs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-2);
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--gs-orange);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: var(--gs-text-sm);
    cursor: pointer;
    transition: background .2s var(--gs-ease), transform .2s var(--gs-ease);
}
.gs-btn:hover { background: var(--gs-orange-dim); color: #fff; transform: translateY(-1px); }
.gs-btn--ghost {
    background: transparent;
    border-color: var(--gs-line);
    color: var(--gs-text);
}
.gs-btn--ghost:hover { background: var(--gs-surface-2); color: var(--gs-text); }

/* ----------------------------------------------------- song list rows */

.gs-track {
    display: flex;
    align-items: center;
    gap: var(--gs-4);
    width: 100%;
    padding: var(--gs-3) var(--gs-4);
    background: var(--gs-surface);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
    color: var(--gs-text);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background .2s var(--gs-ease), border-color .2s var(--gs-ease);
}
.gs-track + .gs-track { margin-top: var(--gs-2); }
.gs-track:hover { background: var(--gs-surface-2); border-color: var(--gs-orange); }

.gs-track__play {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gs-surface-3);
    color: var(--gs-orange-bright);
    font-size: 0.75rem;
}
.gs-track:hover .gs-track__play { background: var(--gs-orange); color: #fff; }

.gs-track__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-track__meta {
    flex: 0 0 auto;
    color: var(--gs-text-soft);       /* 7.2:1 here, where the old orange was 2.0 */
    font-size: var(--gs-text-sm);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ footer */

.gs-footer {
    background: var(--gs-surface);
    border-top: 1px solid var(--gs-line);
    padding-block: var(--gs-12) var(--gs-8);
    margin-top: var(--gs-16);
}
.gs-footer h4 {
    font-size: var(--gs-text-sm);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gs-text-dim);
    margin-bottom: var(--gs-4);
}
.gs-footer ul { list-style: none; margin: 0; padding: 0; }
.gs-footer li + li { margin-top: var(--gs-1); }

/* The old rule was #504e49 on #151515 - a ratio of 2.2, which is why the
   footer read as a grey smudge. This clears 4.5. */
body.gs .gs-footer a {
    color: var(--gs-text-soft) !important;
    font-size: var(--gs-text-sm);
    text-decoration: none !important;
}
body.gs .gs-footer a:hover {
    color: var(--gs-orange-bright) !important;
    text-decoration: underline !important;
}
body.gs .gs-footer a.gs-accent {
    color: var(--gs-orange-bright) !important;
}

.gs-footer__legal {
    margin-top: var(--gs-8);
    padding-top: var(--gs-6);
    border-top: 1px solid var(--gs-line);
    text-align: center;
    color: var(--gs-text-dim);
    font-size: var(--gs-text-sm);
}
.gs-footer__legal a { color: var(--gs-text-soft); }

/* --------------------------------------------------------- utilities */

.gs-muted   { color: var(--gs-text-soft); }
.gs-accent  { color: var(--gs-orange-bright); }
.gs-center  { text-align: center; }
.gs-stack > * + * { margin-top: var(--gs-4); }

/* Visible to a screen reader, not on screen. */
.gs-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link, so a keyboard user is not made to tab through the whole menu. */
.gs-skip {
    position: absolute;
    left: var(--gs-4);
    top: -3rem;
    z-index: 10000;
    padding: var(--gs-2) var(--gs-4);
    background: var(--gs-orange);
    /* On the base rule, not only on :focus - it inherits the link colour
       otherwise, which is orange on orange. */
    color: #fff !important;
    border-radius: 0 0 var(--gs-radius) var(--gs-radius);
    transition: top .2s var(--gs-ease);
}
.gs-skip:focus { top: 0; }

/* ------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
    :root { --gs-h1: 2rem; --gs-h2: 1.5rem; --gs-16: 3rem; --gs-12: 2.25rem; }
    .gs-wrap { padding-inline: var(--gs-4); }
}

@media (max-width: 560px) {
    :root { --gs-h1: 1.75rem; --gs-h2: 1.375rem; }
    .gs-panel { padding: var(--gs-6); }
    .gs-grid { gap: var(--gs-4); }
}

/* =====================================================================
   Site header
   ---------------------------------------------------------------------
   Replaces a stack of nested floats with percentage padding, where the
   nav wrapped onto a second line as soon as the window narrowed and the
   second-level dropdown opened off the right edge of the page.

   Grid on desktop: brand | search | navigation | account.
   Below 1024px the navigation becomes a drawer.
   ===================================================================== */

.gs-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(13, 13, 15, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gs-line);
}
@supports not (backdrop-filter: blur(2px)) {
    .gs-header { background: #0d0d0f; }
}

.gs-header__inner {
    max-width: 100%;
    margin-inline: 0;
    padding: 30px clamp(24px, 4vw, 64px);
}

/* ---- brand bar (Left seal, Center search, Right utility + nav) ----- */
.gs-brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3.5vw, 56px);
    padding-block: 6px;
    min-height: 120px;
}

.gs-brandbar__left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.gs-marque {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.gs-marque img {
    display: block;
    width: auto !important;
    max-width: none !important;
    transition: none !important;
    image-rendering: -webkit-optimize-contrast;
}

/* Prominent, large brand logos matching user-specified scale */
.gs-marque__seal {
    height: 155px !important;
    max-height: 155px !important;
    width: auto !important;
}
.gs-marque__word {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
}

/* Centered sleek search bar */
.gs-brandbar__center {
    flex: 0 1 420px;
    min-width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gs-search {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.gs-search__svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 2;
    width: 18px;
    height: 18px;
}
.gs-search input,
#live-search,
#live-search-narrow {
    width: 100% !important;
    height: 46px !important;
    padding: 0 18px 0 48px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font: inherit !important;
    font-size: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all .2s var(--gs-ease) !important;
}
.gs-search input::placeholder,
#live-search::placeholder,
#live-search-narrow::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
.gs-search input:focus,
#live-search:focus,
#live-search-narrow:focus {
    border-color: var(--gs-orange) !important;
    background: rgba(0, 0, 0, 0.92) !important;
    box-shadow: 0 0 16px rgba(235, 79, 30, 0.4) !important;
}
#search-results-dropdown {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow-lg);
    overflow: hidden;
    z-index: 950;
}

/* Right side column: Wordmark + Social + Login on top, Nav directly below */
.gs-brandside {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}
.gs-brandside__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}



/* ---- navigation ---- */
.gs-nav { width: 100%; }
.gs-nav > ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}
.gs-nav a {
    position: relative;
    display: block;
    padding: 6px 14px;
    color: #eb4f1e;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s var(--gs-ease);
}
.gs-nav > ul > li > a::before {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 0;
    height: 2.5px;
    background: var(--gs-orange);
    border-radius: 2px;
    transition: left .22s var(--gs-ease), right .22s var(--gs-ease);
}
.gs-nav > ul > li:hover > a::before,
.gs-nav > ul > li.is-current > a::before { left: 0.9rem; right: 0.9rem; }

.gs-nav a:hover,
.gs-nav li:hover > a { color: #ffffff; }
.gs-nav .is-current > a { color: #ffffff; }

.gs-nav li { position: relative; }

/* Submenus */
.gs-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0; padding: var(--gs-2);
    list-style: none;
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
    box-shadow: var(--gs-shadow-lg);
    z-index: 950;
}
.gs-nav li:hover > ul,
.gs-nav li:focus-within > ul { display: block; }
.gs-nav ul ul ul { top: 0; left: auto; right: 100%; }
.gs-nav ul ul a { color: var(--gs-text-soft); padding: 0.5rem 0.8rem; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.gs-nav ul ul a:hover { background: var(--gs-surface-3); color: var(--gs-orange-bright); }

.gs-nav li:has(> ul) > a::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
}
.gs-nav ul ul li:has(> ul) > a::after { transform: translateY(-1px) rotate(-45deg); float: right; }

/* ---- account & social ---- */
.gs-header__end { display: flex; align-items: center; gap: var(--gs-3); flex: 0 0 auto; }
.gs-social { display: flex; align-items: center; gap: 16px; }
.gs-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: transform .2s var(--gs-ease);
}
.gs-social img {
    width: 35px !important;
    height: 35px !important;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}
.gs-social a:hover { transform: scale(1.18); }

.gs-account { font-size: 15px; font-weight: 700; letter-spacing: 0.6px; white-space: nowrap; }
.gs-account a, .gs-account-link { color: #eb4f1e !important; text-decoration: none; transition: color .2s var(--gs-ease); }
.gs-account a:hover, .gs-account-link:hover { color: #ff6a3c !important; }
.gs-account__name { color: var(--gs-text-soft); margin-right: 4px; }

/* ---- narrow windows ---- */
@media (max-width: 1100px) {
    .gs-brandbar__center { display: none; }
    .gs-header__searchrow { display: block; }
}

@media (max-width: 900px) {
    .gs-brandside__top { gap: 14px; }
    .gs-social img { width: 20px; height: 20px; }
    .gs-nav a { padding: 0.3rem 0.5rem; font-size: 14px; }
}

@media (max-width: 640px) {
    .gs-header__inner { padding: 14px 16px; }
    .gs-brandbar { gap: 12px; padding-block: 4px; min-height: auto; }
    .gs-marque__seal { height: 90px !important; }
    .gs-marque__word { height: 48px !important; }
    .gs-social { display: none; }
    .gs-account { font-size: 12px; }
    .gs-nav a { font-size: 12px; padding: 2px 5px; }
}

/* Submenus cannot hover on a touchscreen, so below this width they open on
   a tap and lay out inline underneath their parent. */
@media (max-width: 900px) {
    .gs-nav ul ul {
        position: static;
        display: none;
        min-width: 0;
        margin: var(--gs-1) 0 var(--gs-2);
        padding: var(--gs-1) var(--gs-2);
        background: var(--gs-surface-2);
        border-radius: var(--gs-radius);
        box-shadow: none;
    }
    .gs-nav li.is-expanded > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    .gs-nav ul ul ul { right: auto; }
    .gs-nav li:hover > ul { display: none; }
    .gs-nav li.is-expanded > ul { display: flex; }
}

/* The search bar, once it has left the brand row. */
.gs-header__searchrow {
    display: none;
    padding-bottom: var(--gs-3);
}
.gs-header__searchrow .gs-search {
    display: block;
    max-width: none;
    min-width: 0;
}
/* =====================================================================
   Hero slider
   ---------------------------------------------------------------------
   Was an iframe loading slider1.php, which pulled jQuery 1.8.3 from an
   http:// CDN - blocked as mixed content on the https site - plus
   responsiveslides. Now inline, with no library at all.

   The banner art is 1100x400. aspect-ratio holds that shape at every width
   instead of letting the images stretch.
   ===================================================================== */

.gs-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1100 / 400;
    max-height: 460px;
    overflow: hidden;
    background: var(--gs-surface);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-lg);
}
.gs-hero--project {
    aspect-ratio: 1287 / 734 !important;
    max-height: none !important;
    background: #000000;
}
.gs-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s var(--gs-ease);
    pointer-events: none;
}
.gs-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.gs-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gs-hero--project .gs-hero__slide img {
    object-fit: contain !important;
}

.gs-hero__dots {
    position: absolute;
    left: 0; right: 0; bottom: var(--gs-4);
    display: flex;
    justify-content: center;
    gap: var(--gs-2);
    z-index: 2;
}
.gs-hero__dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background .2s var(--gs-ease), transform .2s var(--gs-ease);
}
.gs-hero__dot:hover { background: rgba(255, 255, 255, .7); }
.gs-hero__dot.is-active { background: var(--gs-orange); transform: scale(1.3); }

.gs-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s var(--gs-ease), background .2s var(--gs-ease);
    z-index: 2;
}
.gs-hero:hover .gs-hero__arrow,
.gs-hero__arrow:focus-visible { opacity: 1; }
.gs-hero__arrow:hover { background: var(--gs-orange); }
.gs-hero__arrow--prev { left: var(--gs-4); }
.gs-hero__arrow--next { right: var(--gs-4); }

@media (max-width: 560px) {
    .gs-hero { border-radius: var(--gs-radius); }
    .gs-hero__arrow { display: none; }
}

/* =====================================================================
   Homepage feature bands
   ===================================================================== */

.gs-feature {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: scroll !important;
    background-repeat: no-repeat;
    padding-block: var(--gs-16);
    min-height: 520px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.gs-feature--about {
    min-height: clamp(480px, 44vw, 750px);
}

.gs-feature--project {
    aspect-ratio: 1706 / 848;
    min-height: clamp(520px, 49.7vw, 960px);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding-block: clamp(2rem, 4vw, 5rem);
}

@media (max-width: 850px) {
    .gs-feature--about {
        min-height: auto;
        padding-block: var(--gs-10);
        padding-inline: var(--gs-4);
    }
    .gs-feature--project {
        aspect-ratio: auto;
        min-height: 480px;
        background-size: cover;
        background-position: center center;
        padding-block: var(--gs-10);
        padding-inline: var(--gs-4);
    }
    .gs-feature__panel--left {
        max-width: 100% !important;
        margin-inline: auto !important;
    }
}

.gs-feature > * { position: relative; width: 100%; }

.gs-feature__panel { max-width: 760px; margin-inline: auto; }
.gs-feature__panel--left {
    margin-inline: 0;
    max-width: 480px;
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-8);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

/* Text coming out of the pages table carries its own markup. */
.gs-richtext { color: var(--gs-text-soft); }
.gs-richtext h1, .gs-richtext h2, .gs-richtext h3 { color: var(--gs-text); }
.gs-richtext a { color: var(--gs-orange-bright); }
.gs-richtext img { border-radius: var(--gs-radius); margin-block: var(--gs-4); }
.gs-richtext p:last-child { margin-bottom: 0; }

/* The three HOPE / STEP / JUMP pillars.
   A full-bleed orange band over the footer photograph, which is how this
   has always looked and what gives the homepage its one loud moment. An
   earlier pass here turned them into three small cards inside the content
   column, which threw that away. */
.gs-pillarband {
    position: relative;
    background: url(../image/footer.jpg) center / cover no-repeat;
}
.gs-pillarband::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(235, 79, 30, .88);
}
.gs-pillarband > * { position: relative; }

.gs-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    text-align: center;
}
.gs-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gs-2);
    padding: var(--gs-8) var(--gs-4);
    color: #fff;
    transition: background .25s var(--gs-ease);
}
.gs-pillar:hover { background: rgba(0, 0, 0, .16); color: #fff; }
.gs-pillar img { width: 96px; height: 96px; object-fit: contain; }
.gs-pillar h3 {
    margin: 0;
    color: #fff;
    letter-spacing: .14em;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 400;
}

@media (max-width: 700px) {
    .gs-pillars { grid-template-columns: 1fr; }
    .gs-pillar { padding: var(--gs-6) var(--gs-4); flex-direction: row; gap: var(--gs-4); }
    .gs-pillar img { width: 56px; height: 56px; }
}

/* A wide main column with a narrow aside; stacks on small screens. */
.gs-grid--main-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 800px) {
    .gs-grid--main-aside { grid-template-columns: 1fr; }
}

/* =====================================================================
   Legacy page scaffolding
   ---------------------------------------------------------------------
   Most pages still lay their body out with floats inside #content, and
   nothing clears them. A container holding only floats collapses to zero
   height, so the footer was starting at the top of the page and sitting
   beside the content instead of below it - which left its grid without a
   definite width and produced a fourth column hanging 230px off the right
   edge of every page except the homepage.

   Clearing here fixes all of them at once, and costs nothing on the pages
   that have already been converted.
   ===================================================================== */

body.gs #content::after,
body.gs .template::after {
    content: '';
    display: table;
    clear: both;
}

body.gs .gs-footer { clear: both; }

/* Several pages set a white background on .template, left over from the
   light design the site used before it was made dark. Black text on that
   white is fine; the problem is the band of white across an otherwise dark
   page. Kept readable either way by letting the design system's colours
   apply. */
body.gs .template {
    background: transparent !important;
    color: var(--gs-text);
}
body.gs .template h1,
body.gs .template h2,
body.gs .template h3,
body.gs .template h4 { color: var(--gs-text) !important; }

/* =====================================================================
   Modern Sticky Glassmorphic Audio Dock & Drawer
   ===================================================================== */

.gs-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    height: 84px !important;
    background: rgba(12, 12, 16, 0.96) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.85) !important;
    z-index: 99999999 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.gs-dock__inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.2fr) minmax(360px, 2fr) minmax(200px, 1fr) !important;
    align-items: center !important;
    max-width: 1720px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px, 3vw, 36px) !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

/* Left: Track Info */
.gs-dock__meta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
}
.gs-dock__thumb-wrap {
    position: relative !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #1a1a24 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}
.gs-dock__thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.gs-dock__equalizer {
    position: absolute !important;
    bottom: 4px !important;
    right: 4px !important;
    display: none !important;
    align-items: flex-end !important;
    gap: 2px !important;
    height: 14px !important;
    padding: 2px 4px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border-radius: 4px !important;
}
.gs-dock__equalizer.is-active { display: flex !important; }
.gs-dock__equalizer span {
    width: 2.5px !important;
    background: #eb4f1e !important;
    border-radius: 2px !important;
    animation: gsEq 0.8s ease-in-out infinite alternate !important;
}
.gs-dock__equalizer span:nth-child(1) { height: 60% !important; animation-delay: 0.1s !important; }
.gs-dock__equalizer span:nth-child(2) { height: 100% !important; animation-delay: 0.3s !important; }
.gs-dock__equalizer span:nth-child(3) { height: 40% !important; animation-delay: 0.2s !important; }

.gs-dock__info {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.gs-dock__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.2px !important;
}
.gs-dock__artist {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gs-orange-bright, #ff6a3c) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Center: Controls & Timeline */
/* Center: Controls & Timeline */
.gs-dock__center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}
.gs-dock__controls {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}
.gs-ctrl-btn {
    background: transparent !important;
    border: none !important;
    color: #a6a6b8 !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    transition: all 0.18s ease !important;
}
.gs-ctrl-btn:hover {
    color: #ffffff !important;
    transform: scale(1.14) !important;
}
.gs-ctrl-btn.is-active {
    color: #eb4f1e !important;
    filter: drop-shadow(0 0 6px rgba(235, 79, 30, 0.6)) !important;
}

/* Hero Play/Pause Button */
.gs-play-hero {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #eb4f1e, #ff6a3c) !important;
    border: none !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 0 18px rgba(235, 79, 30, 0.6) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.gs-play-hero:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 0 26px rgba(235, 79, 30, 0.85) !important;
}
.gs-play-hero:active {
    transform: scale(0.95) !important;
}

/* Timeline */
.gs-timeline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.gs-time {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8c8c9e !important;
    font-variant-numeric: tabular-nums !important;
    min-width: 36px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.gs-scrub {
    position: relative !important;
    flex: 1 1 0% !important;
    min-width: 80px !important;
    width: 100% !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.gs-scrub::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}
.gs-scrub__buffer {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 5px !important;
    width: 0%;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}
.gs-scrub__fill {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 5px !important;
    width: 0%;
    background: linear-gradient(90deg, #eb4f1e, #ff7a45) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 10px rgba(235, 79, 30, 0.8) !important;
    pointer-events: none !important;
}
.gs-scrub__thumb {
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 15px !important;
    height: 15px !important;
    background: #ffffff !important;
    border: 2.5px solid #eb4f1e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #eb4f1e, 0 0 16px rgba(235, 79, 30, 0.9) !important;
    opacity: 1 !important;
    display: block !important;
    transition: transform 0.15s ease !important;
    pointer-events: none !important;
}
.gs-scrub:hover .gs-scrub__thumb {
    transform: translateY(-50%) scale(1.3) !important;
}

/* Right: Volume & Queue */
.gs-dock__right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
}
.gs-volume-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.gs-vol-slider {
    position: relative !important;
    width: 86px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
.gs-vol-slider::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}
.gs-vol-slider__fill {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 4px !important;
    width: 85%;
    background: #eb4f1e !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

/* Queue Button & Badge */
.gs-queue-btn {
    position: relative !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.gs-queue-btn:hover, .gs-queue-btn.is-active {
    background: rgba(235, 79, 30, 0.2) !important;
    border-color: #eb4f1e !important;
    color: #ff7a45 !important;
}
.gs-queue-badge {
    background: #eb4f1e !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
}

/* Slide-up Queue Drawer */
.gs-pdrawer {
    position: fixed !important;
    bottom: 94px !important;
    right: 24px !important;
    width: 380px !important;
    max-height: 480px !important;
    background: rgba(16, 16, 22, 0.97) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85) !important;
    z-index: 99999998 !important;
    display: none;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: gsSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.gs-pdrawer.is-open { display: flex !important; }

.gs-pdrawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
.gs-pdrawer__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.gs-pdrawer__close {
    background: transparent !important;
    border: none !important;
    color: #8c8c9e !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    padding: 4px !important;
    border-radius: 50% !important;
    transition: color 0.15s ease !important;
}
.gs-pdrawer__close:hover { color: #ffffff !important; }

.gs-pdrawer__list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 8px !important;
    max-height: 400px !important;
}
.gs-qitem {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.gs-qitem:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.gs-qitem.is-playing {
    background: rgba(235, 79, 30, 0.18) !important;
    border-left: 3px solid #eb4f1e !important;
}
.gs-qitem__thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    flex: 0 0 36px !important;
}
.gs-qitem__info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.gs-qitem__title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.gs-qitem.is-playing .gs-qitem__title {
    color: #ff7a45 !important;
}
.gs-qitem__artist {
    font-size: 12px !important;
    color: #8c8c9e !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.gs-qitem__play {
    color: #eb4f1e !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .gs-dock { height: 74px !important; }
    .gs-dock__inner {
        grid-template-columns: 1fr auto auto !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }
    .gs-timeline, .gs-volume-wrap { display: none !important; }
    .gs-pdrawer { right: 8px !important; left: 8px !important; width: auto !important; bottom: 84px !important; }
}



/* The last menu item drops its right padding so its text edge - not its
   padding edge - lands on the same vertical as LOG IN above it. Aligning
   the boxes is not the same as aligning what the eye actually reads. */
/* The last item drops its right padding so its text edge - not its padding
   edge - lands on the same vertical as LOG IN above it. Aligning the boxes
   is not the same as aligning what the eye actually reads. */
.gs-nav > ul > li:last-child > a { padding-right: 0; }
.gs-nav > ul > li:last-child > a::before { right: 50%; }
.gs-nav > ul > li:last-child:hover > a::before,
.gs-nav > ul > li:last-child.is-current > a::before { left: 0.8rem; right: 0; }

/* =====================================================================
   Artist name cloud
   ---------------------------------------------------------------------
   The names of the artists, each word set at its own size. It was driven
   by wnTextCloud.js on top of a second copy of jQuery; the sizing is a few
   lines of plain JavaScript now, and the weights come from the design
   system so it sits with the rest of the page instead of beside it.
   ===================================================================== */

.gs-cloud {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--gs-2) var(--gs-3);
    padding: var(--gs-6);
    background: var(--gs-surface);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius);
    line-height: 1.35;
}

.gs-cloud a {
    color: var(--gs-text-soft);
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: color .18s var(--gs-ease);
    /* Set by script, per word. */
    font-size: var(--gs-cloud-size, 1rem);
}
.gs-cloud a:hover { color: var(--gs-orange-bright); }

/* The larger a word is set, the more it reads as a heading, so the biggest
   ones get the brighter colour and the smallest recede. */
.gs-cloud a[data-weight="3"] { color: var(--gs-text); font-weight: 600; }
.gs-cloud a[data-weight="2"] { color: var(--gs-text-soft); font-weight: 500; }
.gs-cloud a[data-weight="1"] { color: var(--gs-text-dim); }

/* The homepage's lower section: partners, songs, artist cloud. The songs
   take the widest share; the two asides stack under them on a narrow
   window rather than being squeezed. */
.gs-grid--home {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(480px, 2.2fr) minmax(320px, 1.4fr);
    gap: clamp(20px, 2.5vw, 44px);
    align-items: start;
    width: 100%;
}
@media (max-width: 1000px) {
    .gs-grid--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .gs-home-ads   { order: 2; }
    .gs-home-cloud { order: 3; }
    .gs-grid--home > div { order: 1; grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .gs-grid--home { grid-template-columns: 1fr; }
    .gs-home-ads .gs-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gs-4); }
    .gs-home-ads .gs-stack > * + * { margin-top: 0; }
}

/* The words are flex items, so a transform on one moves only that word and
   never reflows its neighbours - which is what lets them drift without the
   paragraph shifting under the reader. */

/* project-bck.jpg carries lettering, and an attempt here to show all of it
   with background-size: contain made things worse, not better: the artwork
   shrank to a strip down the middle with black bars either side. It has
   always run the full width of the window with the edges cropped, which is
   what cover does, so cover is what it keeps. */


/* =====================================================================
   Inner pages
   ---------------------------------------------------------------------
   Every inner page is built the same way: a .template wrapper, an empty
   div floated at 25% acting as a spacer, then the real content floated at
   50%. That left the content squeezed into the middle half of the window
   with a quarter wasted on each side, and it is why these pages felt
   cramped next to the homepage.

   Adapting the pattern here means all of them - about, album, artist,
   lyrics, video, team, contact, singers - are corrected at once, with no
   change to their PHP and no risk to the queries inside them.
   ===================================================================== */

body.gs .template {
    width: 100% !important;
    max-width: var(--gs-max) !important;
    margin-inline: auto !important;
    margin: 0 auto !important;
    padding: var(--gs-8) var(--gs-6) !important;
    float: none !important;
    box-sizing: border-box !important;
    display: block !important;
}

body.gs #content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
}

/* The spacer columns hold nothing. */
body.gs .template > div:empty { display: none; }

/* The content column takes the width it was always entitled to. */
body.gs .template > div {
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* ---- section tabs ----
   .tabs a.active was #fff on #fff - a contrast ratio of 1.0, so the label
   of the section you were looking at was invisible. */
body.gs .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-2);
    margin-bottom: var(--gs-8);
    border-bottom: 1px solid var(--gs-line);
    padding-bottom: var(--gs-3);
}
body.gs .tabs a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--gs-surface-2) !important;
    color: var(--gs-text-soft) !important;
    font-size: var(--gs-text-sm);
    font-weight: 500;
    letter-spacing: .04em;
}
body.gs .tabs a:hover { background: var(--gs-surface-3) !important; color: var(--gs-text) !important; }
body.gs .tabs a.active {
    background: var(--gs-orange) !important;
    color: #fff !important;
}

body.gs .tabContent { padding: 0 !important; }

/* ---- cards left over from the previous pass ----
   .glass-panel was a translucent dark box; on these pages it sat on the
   white .template background, which is the pairing that produced most of
   the unreadable text. Mapped onto the design system's card instead. */
body.gs .glass-panel {
    background: var(--gs-surface) !important;
    border: 1px solid var(--gs-line) !important;
    border-radius: var(--gs-radius) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    color: var(--gs-text);
}
body.gs .glass-panel:hover { border-color: var(--gs-orange) !important; }
body.gs .hover-lift { transition: transform .25s var(--gs-ease), border-color .25s var(--gs-ease); }
body.gs .hover-lift:hover { transform: translateY(-4px); }

/* Grids of covers and portraits. */
body.gs .tabContent > div[style*="flex"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--gs-6) !important;
    justify-content: stretch !important;
}
body.gs .tabContent > div[style*="flex"] > .glass-panel {
    flex: none !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

/* Headings inside the old markup were coloured for the white background. */
body.gs .template h1,
body.gs .template h2,
body.gs .template h3 { color: var(--gs-text) !important; }
body.gs .template hr {
    width: 56px !important;
    height: 3px !important;
    border: 0 !important;
    background: var(--gs-orange);
    border-radius: 2px;
    margin: var(--gs-3) auto var(--gs-8);
}

/* The hero runs edge to edge, as on the live site. Boxing it inside the
   content column left a band of empty page down each side. */
.gs-hero-section { padding-block: 0 var(--gs-12); }
.gs-hero-section .gs-hero {
    border-radius: 0;
    max-height: none;
    box-shadow: none;
}

/* =====================================================================
   Header on a phone
   ---------------------------------------------------------------------
   The same composition as the desktop, stacked rather than compressed:
   the Ek Nirjharer Gaan seal holds the top left at a size where it can
   still be read, and the Gaanshala group - wordmark, account, menu - runs
   down the right, every line ending on the same edge. The menu wraps onto
   as many rows as it needs instead of being shrunk to fit one.
   ===================================================================== */



/* =====================================================================
   Feature band backgrounds
   ---------------------------------------------------------------------
   image/about.jpg was made for the light theme the site used to have: a
   near-white, heavily blurred picture meant to sit behind black text. On
   the dark design it reads as a grey veil rather than a picture.

   It stays - it is on the old site, so it belongs on the new one - but it
   is turned down to suit a dark page. The filter goes on a ::before that
   inherits the section's own background-image, because a filter applied
   to the section itself would take the panel and its text with it.
   ===================================================================== */

.gs-feature { isolation: isolate; }

.gs-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: inherit;
    background-attachment: scroll !important;
    background-repeat: no-repeat;
    /* Brightness and contrast calibrated so background art remains clear and vibrant */
    filter: brightness(.8) contrast(1.15) saturate(1.1);
}

.gs-feature--project::before {
    background-size: 100% 100%;
}

@media (max-width: 850px) {
    .gs-feature--project::before {
        background-size: cover;
        background-position: center center;
    }
}

/* The panel and its text sit above the filtered layer, untouched by it. */
.gs-feature > * { position: relative; z-index: 1; }

/* Global Contrast & Readability Enhancements */
body.gs #playlist1 [style*="background:#222222"],
body.gs #playlist1 [style*="background:#1e1e24"],
body.gs #clips [style*="background:#222222"],
body.gs #clips [style*="background:#1e1e24"] {
    color: #ffffff !important;
    background: #1e1e24 !important;
}

body.gs #hyper a,
body.gs div[style*="background:#eb4f1e"] a,
body.gs div[style*="background:#eb4f1e"] input,
body.gs input[value="Add to Playlist"],
body.gs input[value="Create Playlist"] {
    color: #ffffff !important;
    text-decoration: none !important;
}

body.gs #cboxContent,
body.gs #cboxLoadedContent {
    background: #16161a !important;
    color: #f2f2f4 !important;
    border-radius: 12px;
}

/* Bootstrap Modal Dark Theme Contrast */
body.gs .modal-content {
    background: var(--gs-surface) !important;
    color: var(--gs-text) !important;
    border: 1px solid var(--gs-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
}

body.gs .modal-header {
    border-bottom: 1px solid var(--gs-line) !important;
    padding: 16px 20px !important;
}

body.gs .modal-header .modal-title {
    color: var(--gs-text) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
}

body.gs .modal-header .close {
    color: var(--gs-text-soft) !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
}

body.gs .modal-header .close:hover {
    color: var(--gs-orange-bright) !important;
    opacity: 1 !important;
}

body.gs .modal-body {
    color: var(--gs-text) !important;
    padding: 20px !important;
}

body.gs .modal-body .radio,
body.gs .modal-body label {
    color: var(--gs-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

body.gs .modal-footer {
    border-top: 1px solid var(--gs-line) !important;
    padding: 14px 20px !important;
}

body.gs .modal-footer .btn-default {
    background: var(--gs-surface-2) !important;
    color: var(--gs-text) !important;
    border: 1px solid var(--gs-line) !important;
    border-radius: 6px !important;
}

body.gs .modal-footer .btn-default:hover {
    background: var(--gs-surface-3) !important;
    border-color: var(--gs-orange) !important;
}

body.gs .modal-body .btn-adn,
body.gs .modal-body input[type="submit"] {
    background: var(--gs-orange) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
}

/* Pagination Dark Theme Contrast */
body.gs .page,
body.gs a.page {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
    border-radius: 6px !important;
    border: 1px solid var(--gs-line) !important;
    background: var(--gs-surface-2) !important;
    color: var(--gs-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: all .2s ease !important;
}

body.gs .page:hover,
body.gs a.page:hover {
    background: var(--gs-orange) !important;
    color: #ffffff !important;
    border-color: var(--gs-orange) !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

body.gs .page.active,
body.gs span.page.active {
    background: var(--gs-orange) !important;
    color: #ffffff !important;
    border-color: var(--gs-orange) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.gs .page.inactive,
body.gs span.page.inactive {
    background: var(--gs-surface-3) !important;
    color: var(--gs-text-dim) !important;
    border: 1px solid var(--gs-line) !important;
    opacity: 0.5 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed !important;
}

/* Search Dropdown Contrast */
body.gs #search-results-dropdown {
    background: #16161a !important;
    border: 1px solid #32323c !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

body.gs .search-item {
    padding: 10px 14px !important;
    border-bottom: 1px solid #22222a !important;
    color: #f2f2f4 !important;
    text-decoration: none !important;
}

body.gs .search-item:hover {
    background: #25252e !important;
    color: var(--gs-orange-bright) !important;
}

body.gs .search-item-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

body.gs .search-item-type {
    color: var(--gs-orange-bright) !important;
    font-size: 12px !important;
}

/* Glass Panel Typography Safety & Dynamic Content Contrast */
body.gs .glass-panel p {
    color: var(--gs-text-soft) !important;
}

body.gs .glass-panel h1,
body.gs .glass-panel h2,
body.gs .glass-panel h3,
body.gs .glass-panel h4 {
    color: var(--gs-text) !important;
}

body.gs .glass-panel img[src*="audio1.png"],
body.gs .glass-panel img[src*="video1.png"],
body.gs .glass-panel img[src*="lyrics.png"],
body.gs .glass-panel img[src*="artists1.png"] {
    filter: brightness(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
    transition: transform .25s var(--gs-ease), filter .25s var(--gs-ease);
}

body.gs .glass-panel:hover img[src*="audio1.png"],
body.gs .glass-panel:hover img[src*="video1.png"],
body.gs .glass-panel:hover img[src*="lyrics.png"],
body.gs .glass-panel:hover img[src*="artists1.png"] {
    transform: scale(1.06);
}

/* =====================================================================
   Layout, Sizing & Alignment Modernization
   ===================================================================== */

/* Remove legacy float spacers across all templates */
body.gs .template div[style*="width:25%"],
body.gs .template div[style*="width: 25%"],
body.gs .template div[style*="width:23%"],
body.gs .template div[style*="width: 23%"] {
    display: none !important;
}

/* Widen and center squeezed content blocks */
body.gs .template div[style*="width:50%"]:not(.aplayer *):not(.modal *),
body.gs .template div[style*="width: 50%"]:not(.aplayer *):not(.modal *),
body.gs .template div[style*="width:84%"],
body.gs .template div[style*="width: 84%"],
body.gs .template div[style*="width:80%"],
body.gs .template div[style*="width: 80%"],
body.gs .template div[style*="width:92%"],
body.gs .template div[style*="width: 92%"] {
    width: 100% !important;
    max-width: var(--gs-max) !important;
    margin-inline: auto !important;
    float: none !important;
}

body.gs #playlist1,
body.gs #clips,
body.gs .tabContent {
    width: 100% !important;
    max-width: var(--gs-max) !important;
    margin: 0 auto !important;
    float: none !important;
}

/* Modern Unified Track Row Layout */
body.gs #playlist1 > div[style*="width:100%"],
body.gs #clips > div[style*="width:100%"],
body.gs .tabContent > div[style*="width:100%"][style*="margin-bottom"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    background: #1e1e24 !important;
    border: 1px solid var(--gs-line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    transition: border-color .2s ease, transform .2s ease;
}

body.gs #playlist1 > div[style*="width:100%"]:hover,
body.gs #clips > div[style*="width:100%"]:hover,
body.gs .tabContent > div[style*="width:100%"][style*="margin-bottom"]:hover {
    border-color: var(--gs-orange) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* Title column in track row */
body.gs #playlist1 > div[style*="width:100%"] > div[style*="width:50%"],
body.gs #clips > div[style*="width:100%"] > div[style*="width:50%"],
body.gs .tabContent > div[style*="width:100%"] > div[style*="width:50%"] {
    flex: 1 1 260px !important;
    width: auto !important;
    background: transparent !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

/* Action buttons in track row */
body.gs #playlist1 > div[style*="width:100%"] > div[style*="width:10%"],
body.gs #clips > div[style*="width:100%"] > div[style*="width:10%"],
body.gs .tabContent > div[style*="width:100%"] > div[style*="width:10%"],
body.gs #playlist1 > div[style*="width:100%"] > div[style*="width:20%"],
body.gs #clips > div[style*="width:100%"] > div[style*="width:20%"],
body.gs .tabContent > div[style*="width:100%"] > div[style*="width:20%"],
body.gs #playlist1 > div[style*="width:100%"] > form,
body.gs #clips > div[style*="width:100%"] > form,
body.gs .tabContent > div[style*="width:100%"] > form {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    min-height: 42px !important;
    float: none !important;
    margin: 0 !important;
}

body.gs #playlist1 > div[style*="width:100%"] input[type="button"],
body.gs #playlist1 > div[style*="width:100%"] input[type="submit"],
body.gs #clips > div[style*="width:100%"] input[type="button"],
body.gs #clips > div[style*="width:100%"] input[type="submit"],
body.gs .tabContent > div[style*="width:100%"] input[type="button"],
body.gs .tabContent > div[style*="width:100%"] input[type="submit"] {
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Expandable lyrics box attached cleanly to track row */
body.gs div[id^="box"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    border-top: 1px solid var(--gs-line) !important;
    border-radius: 0 0 8px 8px !important;
    background: var(--gs-surface-2) !important;
    color: var(--gs-text) !important;
    padding: 16px 20px !important;
    margin-top: 0 !important;
}

/* Centered Pagination Wrapper */
body.gs div[style*="text-align:right"]:has(.page),
body.gs div[style*="text-align: right"]:has(.page) {
    width: 100% !important;
    text-align: center !important;
    margin: 24px 0 !important;
    float: none !important;
}