/* AEYSA design system v18 - site-wide layer for the pages that keep their own layout stylesheets
   (lyrics, videos, artist, press, the name, the guide). Loaded AFTER each page's own styles.
   Gives every page the same font, link colour, header, footer, button pair, crisp edges and left-line panels
   as the homepage and album page (aeysa-system-v17.css). Page layouts, readers and scripts are untouched. */

@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:200;font-display:swap;src:url('/josefin-200.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/josefin-300.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/josefin-400.woff2') format('woff2')}
@font-face{font-family:AeysaDisplay;font-style:normal;font-weight:300;font-display:swap;src:url('/josefin-300.woff2') format('woff2')}
@font-face{font-family:Josefin;font-style:normal;font-weight:300;font-display:swap;src:url('/josefin-300.woff2') format('woff2')}
@font-face{font-family:Josefin;font-style:normal;font-weight:400;font-display:swap;src:url('/josefin-400.woff2') format('woff2')}

:root{
  --ink:#05070c;--text:#f2f5f9;--muted:#a9b8cc;--faint:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.12);--card-line:#223650;--panel-bg:#0d1622;--rule:#749ab7;
  --blue:#9dd6ff;--blue-soft:rgba(157,214,255,.12);--btn:#e8f3ff;--btn-ink:#071323;
  --font:'Josefin Sans','Helvetica Neue',Arial,sans-serif;--wrap:1120px;
}

/* ---- one font, one link colour, one focus ring ---- */
body,body *:not(svg):not(svg *){font-family:var(--font)!important}
body{background:var(--ink);-webkit-font-smoothing:antialiased}
.album-first a{color:var(--blue);text-decoration-thickness:1px;text-decoration-color:rgba(157,214,255,.45);text-underline-offset:4px}
.album-first a:hover{color:#fff;text-decoration-color:currentColor}
.video-page a:hover{color:var(--blue)}
.eyebrow,.v-eyebrow,.ap-eyebrow,.kicker{color:var(--blue);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;font-weight:400}
:focus-visible{outline:2px solid #d6edff;outline-offset:4px}
@media(forced-colors:active){:focus-visible{outline-color:Highlight}}

/* ---- header: one on every page ---- */
.sh{position:relative;z-index:5;background:var(--ink);border-bottom:1px solid var(--line);margin:0;padding:0;float:none;width:auto}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.sh-wrap,.sf-wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.sh-brand{display:block;width:138px;flex:none}
.sh-brand img{display:block;width:100%;height:auto}
.sh-nav{display:flex;flex-wrap:wrap;gap:2px 26px;margin:0}
.sh-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:2px 0 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;background:none;border:0}
.sh-nav a:hover{color:var(--text)}
.sh-nav a[aria-current]{color:var(--text);text-decoration:none}
.sh-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--blue)}
.sh-nav a[href="/shop/"]{color:var(--text)}

/* ---- footer: one on every page ---- */
.sf{border-top:1px solid var(--line);padding:48px 0 calc(40px + env(safe-area-inset-bottom));margin:0;font-size:1rem;color:var(--muted);background:var(--ink);text-align:left;width:auto;letter-spacing:0}
.sf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.sf-nav{display:flex;flex-wrap:wrap;gap:2px 22px;margin:0}
.sf-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.sf-nav a:hover{color:var(--text)}
.sf .social{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;justify-content:flex-start}
.sf .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--faint);text-decoration:none;border-radius:0;transition:color .18s,background .18s}
.sf .social a:hover{color:#fff;background:var(--blue-soft)}
.sf .social svg{width:17px;height:17px;fill:currentColor;display:block}
.sf-line{margin:24px 0 0;font-size:.78rem;color:var(--faint);letter-spacing:.04em}

/* ---- buttons: the same pair everywhere ---- */
.button,.ap-button,.v-button,.vc-page .vc-button,.collection-start,.listen,.aeysa-watch-cta,.as-stories .as-play{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:3px 22px 0;
  border:1px solid rgba(157,214,255,.5);border-radius:2px!important;background:transparent;color:var(--text)!important;
  font-size:.84rem!important;font-weight:400!important;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.button:hover,.ap-button:hover,.v-button:hover,.vc-page .vc-button:hover,.collection-start:hover,.listen:hover,.aeysa-watch-cta:hover{background:var(--blue-soft);border-color:var(--blue);color:#fff!important}
.button:not(.secondary),.ap-button.primary,.v-button.primary,.vc-page .vc-button.vc-primary,.as-stories .as-play,.listen{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)!important}
.button:not(.secondary):hover,.ap-button.primary:hover,.v-button.primary:hover,.vc-page .vc-button.vc-primary:hover,.as-stories .as-play:hover,.listen:hover{background:#fff;border-color:#fff;color:var(--btn-ink)!important}
.listen::after{display:none}
.listen{margin-inline:auto}

/* ---- crisp edges ---- */
.vc-page .vc-filter,.vc-toolbar input[type=search],.vc-toolbar select,.song-chooser summary,.song-chooser nav,.view-controls button,.reader-tabs button,.v-poster-play,.contents,.related,.album-art,.ap-edition,.v-feature,.v-album-promo,.v-album-link,.v-watch-layout.clip,.vc-empty,.vc-album-note,.vc-toolbar,.v-stage,.v-card-img,.vc-thumbnail,.ap-download,.ap-assets figure,.ap-song-release,.edition-note,.translation-notes,.reader-toolbar,.project-note{border-radius:0!important}
.vc-page .vc-filter[aria-current]{border-radius:0}

/* ---- panels: square, with the left line ---- */
.related,.contents,.ap-edition,.ap-download,.ap-assets figure,.ap-song-release,.edition-note,.translation-notes,.v-feature,.v-album-promo,.v-album-link,.v-watch-layout.clip,.vc-empty,.vc-album-note,.vc-toolbar,.project-note{
  background:var(--panel-bg)!important;border:0!important;border-left:2px solid var(--rule)!important}
.ap-section{border-left:0!important}
.project-note{padding:22px 26px;margin:2rem 0}
.v-album-promo{margin-bottom:56px!important}
.v-album-link{margin-top:48px!important}

/* ---- small type fixes so the brand font sits well ---- */
h1,h2,h3{font-weight:300}
.v-card h3,.vc-clip h3,.vc-song-name{font-weight:400}
.v-nav,.v-footer,.site-header,.site-footer{display:none}  /* old header/footer rules are inert once the markup is replaced */
.breadcrumbs,.v-breadcrumb{letter-spacing:.04em}
.song-chooser summary{padding-top:10px}

/* ---- videos hub: the eleven songs as a compact numbered list instead of eleven album covers ---- */
.v-album-grid{display:block!important}
.v-album-grid .v-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.v-album-grid .v-card:first-child{border-top:1px solid var(--line)}
.v-album-grid .v-card-img{display:none}
.v-album-grid .v-card h3{margin:0;font-size:1.05rem}
.v-album-grid .v-card .v-number{display:inline-block;width:36px;font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums}
.v-album-grid .v-card p{margin:0;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---- responsive ---- */
@media(max-width:700px){
  .sh-wrap,.sf-wrap{width:calc(100% - 36px)}
  .sh-in{flex-direction:column;align-items:center;padding:16px 0 6px;min-height:0;gap:2px}
  .sh-brand{width:124px}
  .sh-nav{width:100%;gap:0 16px;justify-content:center}
  .sh-nav a{font-size:.72rem;letter-spacing:.1em;min-height:40px}
  .sf{text-align:center}
  .sf-top{flex-direction:column;align-items:center;gap:8px}
  .sf-nav{justify-content:center;gap:0 16px}
  .sf .social{justify-content:center}
  .actions,.ap-actions,.v-actions,.vc-album-actions{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px}
  .button,.ap-button,.v-button,.vc-page .vc-button,.collection-start{width:100%;white-space:normal}
  .vc-search-field .vc-button,.vc-pagination .vc-button{width:auto;white-space:nowrap}
  .vc-search-field input{flex:1 1 auto;min-width:0}
  .song-chooser{float:none;margin:0 0 18px}
  .song-chooser summary{display:inline-flex}
  .v-album-promo{grid-template-columns:1fr!important}
  .v-album-promo img{max-width:160px}
  .v-album-grid .v-card .v-number{width:28px}
}
@media(max-width:380px){
  .v-actions,.actions,.ap-actions,.vc-album-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .button,.ap-button,.v-button,.vc-page .vc-button{width:100%;white-space:normal}
  .vc-search-field .vc-button,.vc-pagination .vc-button{width:auto;white-space:nowrap}
  .sh-nav{gap:0 9px}
  .sh-nav a{font-size:.66rem;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){.sh *,.sf *{transition:none!important}}
/* v22: tap targets */
.sh-brand{display:flex;align-items:center;min-height:44px}
.breadcrumbs a,.v-breadcrumb a{display:inline-flex;align-items:center;min-height:32px}
.v-small a,.v-back,.v-section-head p a,.vc-text-link{display:inline-flex;align-items:center;min-height:44px}

/* v24: mobile refine (27 Oct 2026) */
.reader-enhanced .song-actions .fallback-section-link{display:none!important}
.v-section-head .v-eyebrow{margin:0 0 12px}
.ap-link-list li:nth-last-child(-n+2){border-bottom:0}
.explore-music{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;line-height:1.6}
.explore-music .sep{display:none}
.explore-music a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
@media(max-width:760px){.ap-link-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}}
@media(max-width:700px){
  .song-hero{display:flex;flex-direction:column;padding:16px 0 20px}
  .song-hero>.eyebrow{padding-top:0;margin:0 0 14px}
  .song-hero h1{clear:none}
  .song-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:10px}
  .song-actions a{min-height:44px}
  .song-chooser{order:9;float:none;margin:20px 0 0;font-size:.84rem;position:relative}
  .song-chooser summary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:3px 22px 0;border:1px solid rgba(157,214,255,.5);border-radius:2px;color:var(--text);letter-spacing:.08em;text-transform:uppercase;list-style:none}
  .song-chooser summary::-webkit-details-marker{display:none}
  .song-chooser[open] summary{border-color:var(--blue);background:var(--blue-soft)}
  .song-chooser nav{position:static;width:100%;margin-top:6px;max-height:none;box-shadow:none;padding:6px 14px}
  .lyric-reader{padding-bottom:24px}
  .song-pagination{padding:28px 0 40px}
  .ap-song-release{padding:18px 20px}
  main.wrap:has(>.kicker){padding-top:2.75rem}
  .listen{width:100%}
  .ap-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .ap-facts div{min-width:0}
  .ap-facts dt{overflow-wrap:anywhere}
  .ap-assets .ap-logo-preview{min-height:0;padding:28px 0}
  .v-album-promo img{max-width:100%}
  .v-album-promo .v-eyebrow{font-size:.7rem}
  .vc-page .vc-section-head{display:block}
  .vc-page .vc-section-head>span{display:block;text-align:left;max-width:none;margin-top:6px}
}
@media(max-width:380px){.eyebrow,.v-eyebrow,.ap-eyebrow,.kicker{font-size:.64rem;letter-spacing:.12em}}
@media(max-width:360px){
  .ap-link-list{grid-template-columns:minmax(0,1fr)}
  .ap-link-list li:nth-last-child(2){border-bottom:1px solid #263b55}
}

/* v26: UI polish (7 Nov 2026) */
/* breadcrumb rows (lyrics, artist, press, guide, video pages): the links got a 32 px centred tap box (v22) while the "/" and
   the current page stayed top-aligned, so the links sat 5-6 px lower than the rest of the row. Centre every item. */
.breadcrumbs,.v-breadcrumb{align-items:center}
.breadcrumbs>span,.v-breadcrumb>span{display:inline-flex;align-items:center;min-height:32px}
/* the artist / press / name / guide pages inherit an underlined link style from album-press-v3; the breadcrumb link on
   the album and lyrics pages is plain, so make it plain everywhere (hover lightens it as on the album page) */
.breadcrumbs a{text-decoration:none;color:inherit}
.breadcrumbs a:hover{color:var(--text)}
/* lyrics index: the track number (and the desktop "Read song" label) were centred against title + description, so on a
   three-line description the number floated beside the description. Align them with the title's first line instead, as the
   album tracklist does: the number's line box is made the same height as the title's line box (1.16 line-height). */
.song-index a{align-items:start}
.song-index .song-number,.song-index .read-label{line-height:calc(1.8rem * 1.16)}
@media(max-width:700px){.song-index .song-number{line-height:calc(1.65rem * 1.16)}}
/* press page facts (6 audience counters, 5 release facts): the content-sized flex row wrapped 5 + 1 on desktop. A three-column
   grid above phone width gives 3 + 3 and 3 + 2, with room for the long YouTube line. */
@media(min-width:701px){.ap-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ap-facts div{min-width:0}}
/* video collection result bar on phones: the summary sat 3 px above the "Reset filters" link (align-items:start in
   aeysa-collection-v6.css, which loads after this stylesheet, hence the .vc-page prefix) */
@media(max-width:640px){.vc-page .vc-result-bar{align-items:center}}

/* ---- v29 (11 Nov 2026): 12 px text floor and 44 px tap rows. Each selector names an element measured under 12 px;
   nothing is made smaller by this block (checked per element against the live site). ---- */
html body .as-copy>.as-meta,html body .as-summary>.as-duration,html body .as-summary>.as-number,html body .as-heading .as-eyebrow,
html body .english>.column-label,html body .original>.column-label,
html body .ap-section>.ap-eyebrow,html body .ap-section dt,html body .ap-facts dt,html body dl div>dt,
html body div>p.v-eyebrow,html body div:not([class])>p.eyebrow,
html body header.song-hero>p.eyebrow,html body header.lyrics-hero>p.eyebrow,html body header.guide-header>p.eyebrow,
html body .album-copy>p.eyebrow,html body section.sec>p.eyebrow,html body aside.card>p.eyebrow,html body aside.related>p.eyebrow,
html body main.wrap>p.kicker,html body main.wrap>p.tagline,html body .wrap>p.close,html body .prose>p.close,
html body li>.track-number,html body h3>.v-number,html body .v-card-img>.v-duration,html body h1>.genre-heading,
html body a.card>.service-action,html body a.cue>span,html body nav.contents>p,html body .project-note>h2,
html body figure.album-art>figcaption,html body figure.cover>figcaption,html body .song-pagination a>span,
html body .breadcrumbs a,html body .breadcrumbs>span,html body .v-breadcrumb a,html body .v-breadcrumb>span,
html body .vc-clip>p,html body .vc-clip>p time,html body .vc-clip>p span,html body .vc-thumbnail>.vc-watch,html body .vc-thumbnail>.vc-duration,
html body .vc-song>.vc-track-number,html body .vc-filter>span,html body .vc-section-head>span,html body .vc-result-bar>span{font-size:12px!important}
@media(max-width:700px){html body div.card>p.eyebrow{font-size:12px!important}}
@media(max-width:700px){html body .sh-nav{gap:0 13px}html body .sh-nav a{font-size:12px;letter-spacing:.08em;min-height:44px}}
@media(max-width:380px){html body .sh-nav{gap:0 8px}html body .sh-nav a{letter-spacing:.02em}}
@media(max-width:339px){html body .sh-nav{gap:0 5px}html body .sh-nav a{letter-spacing:0}}
html body .breadcrumbs a,html body .v-breadcrumb a,html body .breadcrumbs>span,html body .v-breadcrumb>span{min-height:44px}
html body .track-name,html body .track-actions a,html body nav.contents a,html body .vc-text-link{min-height:44px}
html body nav.contents a{display:flex;align-items:center;padding-block:0}