/* AEYSA design system v17 (candidate, 26 October 2026).
   One body font, one link colour, one button pair, one card, one header, one footer.
   Palette and display face are the existing AEYSA navy/blue and Josefin Sans. */

@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')}
/* The owner-selected story component asks for this family name; same file. */
@font-face{font-family:AeysaDisplay;font-style:normal;font-weight:300;font-display:swap;src:url('/josefin-300.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --ink:#05070c;            /* page */
  --panel:#0a0e16;          /* hero panel */
  --card:#0b1526;           /* raised surface */
  --card-line:#223650;      /* card edge */
  --line:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.08);
  --text:#f2f5f9;
  --muted:#a9b8cc;
  --faint:rgba(255,255,255,.55);
  --blue:#9dd6ff;           /* the one link / accent colour */
  --blue-soft:rgba(157,214,255,.12);
  --btn:#e8f3ff;            /* solid button */
  --btn-ink:#071323;
  --r-s:2px;--r-m:0;--r-l:0;
  --rule:#749ab7;          /* the left line on every panel (from the live Behind-the-music box) */
  --font:'Josefin Sans','Helvetica Neue',Arial,sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.75 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
em{font-style:normal;color:var(--text);font-weight:400}

/* ---- type ---- */
h1,h2,h3{font-weight:300;line-height:1.15;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
h3{font-size:1.3rem}
p{color:var(--muted)}
p strong{color:var(--text);font-weight:400}
.eyebrow{font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;line-height:1.5}
.standfirst{font-weight:300;font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.45;color:var(--text);margin-top:18px}
.note{font-size:.84rem;color:var(--faint);line-height:1.7}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

/* ---- links ---- */
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(157,214,255,.45);text-underline-offset:4px;transition:color .18s,text-decoration-color .18s}
a:hover{color:#fff;text-decoration-color:currentColor}
:focus-visible{outline:2px solid #d6edff;outline-offset:4px;border-radius:2px}
@media(forced-colors:active){:focus-visible{outline-color:Highlight}}
.skip{position:absolute;left:16px;top:-100px;z-index:50;padding:12px 20px;background:#fff;color:#000;border-radius:var(--r-s)}
.skip:focus{top:12px}

/* ---- buttons: one pair ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:3px 22px 0;border:1px solid transparent;border-radius:var(--r-s);font:400 .84rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.btn-primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{background:#fff;border-color:#fff;color:var(--btn-ink)}
.btn-ghost{background:transparent;border-color:rgba(157,214,255,.5);color:var(--text)}
.btn-ghost:hover{background:var(--blue-soft);border-color:var(--blue);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.linkrow{display:flex;flex-wrap:wrap;gap:2px 24px}
.linkrow a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem}

/* ---- surfaces ---- */
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.sec{padding:88px 0;border-top:1px solid var(--line)}
.card{background:#0d1622;border-left:2px solid var(--rule);border-radius:0}

/* ---- header: one on every page ---- */
.sh{position:relative;z-index:5;background:var(--ink);border-bottom:1px solid var(--line)}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.sh-brand{display:block;width:138px;flex:none}
.sh-brand img{width:100%;height:auto}
.sh-nav{display:flex;flex-wrap:wrap;gap:2px 26px}
.sh-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-top:2px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.sh-nav a:hover{color:var(--text)}
.sh-nav a[aria-current]{color:var(--text)}
.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)}
/* Homepage: the hero carries the wordmark, so the bar carries only the links. */
.sh--home{background:transparent;border-bottom:0}
.sh--home .sh-in{justify-content:center;min-height:64px;width:100%}

/* ---- footer: one on every page ---- */
.sf{border-top:1px solid var(--line);padding:48px 0 calc(40px + env(safe-area-inset-bottom))}
.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}
.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)}
.social{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0}
.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}
.social a:hover{color:#fff;background:var(--blue-soft)}
.social svg,.social .i{width:17px;height:17px;fill:currentColor}
.sf-line{margin-top:24px;font-size:.78rem;color:var(--faint);letter-spacing:.04em}

/* ---- homepage hero ---- */
.page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);grid-template-rows:auto 1fr;min-height:100vh;min-height:100dvh}
.page>.sh{grid-column:2;grid-row:1}
.portrait{grid-column:1;grid-row:1/3;position:relative;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 50% 35%,#1a3a5c 0%,#0a1628 55%,#05070c 100%);overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;user-select:none;-webkit-user-drag:none}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 58%,rgba(5,7,12,.28) 80%,rgba(5,7,12,.94) 100%)}
.panel{grid-column:2;grid-row:2;position:relative;display:flex;flex-direction:column;padding:clamp(1.5rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);background:radial-gradient(ellipse at 15% 10%,rgba(30,60,100,.2),transparent 50%),var(--panel);border-left:1px solid rgba(255,255,255,.05)}
.content{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:26rem;margin:0 auto;text-align:center}
.content h1{margin:0}
.content h1 picture{display:block;width:clamp(200px,24vw,300px);margin-inline:auto}
.genre-heading{display:block;margin-top:22px;font-size:.7rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.tagline{margin-top:12px;font-size:1.05rem;font-weight:300;line-height:1.5;color:var(--muted)}
#release{margin-top:28px;border-radius:0;overflow:hidden;background:#000}
#release iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-actions .btn-primary{flex:1 1 auto}
.content .social{justify-content:center;margin-top:30px}
.cue{display:inline-flex;align-items:center;align-self:center;gap:.6rem;min-height:44px;margin-top:12px;padding:0 .3rem;font-size:.7rem;font-weight:300;letter-spacing:.22em;color:var(--faint);text-decoration:none;transition:color .2s}
.cue:hover{color:#fff}
.cue svg{width:11px;height:7px;flex:none}

/* ---- album block (home) ---- */
.album-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,6vw,84px)}
.cover{max-width:440px;width:100%;border-radius:0;overflow:hidden;border:1px solid var(--card-line);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.cover img{aspect-ratio:1;object-fit:cover;width:100%}
.album-title{font-size:clamp(2.4rem,4.4vw,3.4rem);letter-spacing:.1em}
.album-copy{padding-left:26px;border-left:2px solid var(--rule)}
.album-copy p:not(.eyebrow){margin-top:18px;max-width:36rem}
.services{margin-top:26px}
.services a{font-size:.86rem}
.services{gap:2px 20px}

/* ---- story component: owner-selected layout, system type ---- */
.as-stories{--as-line:var(--card-line);--as-text:var(--text);--as-muted:var(--muted);--as-accent:var(--blue)}
.as-stories,.as-heading .as-eyebrow,.as-summary .as-number,.as-summary .as-duration,.as-copy .as-meta,.as-copy .as-description,.as-stories .as-play,.as-stories .as-links a,.as-stories .as-all{font-family:var(--font)}
.as-heading .as-eyebrow{font-size:.7rem;letter-spacing:.18em}
.as-stories .as-play{border-radius:var(--r-s);background:var(--btn);border-color:var(--btn);color:var(--btn-ink);letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;padding:3px 20px 0;min-height:46px}
.as-stories .as-play:hover{background:#fff;border-color:#fff}
.as-stories .as-stage{border-radius:0;overflow:hidden}
.as-copy .as-description{font-size:1rem}

/* ---- about (the name) ---- */
.about-inner{max-width:36rem;margin:0 auto;text-align:center}
.about-inner h2{margin-bottom:28px}
.about-inner p{font-size:1rem;line-height:1.85}
.about-inner p+p{margin-top:1.1rem}
.about-inner .lede{font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:300;line-height:1.55;color:var(--text)}
.about-inner .project-answer{margin-top:1.4rem}
.norse{color:#fff;font-weight:300;letter-spacing:.06em;white-space:nowrap}
.about-inner .pull{margin:2.2rem 0;font-size:clamp(1.4rem,3.2vw,1.9rem);font-weight:200;letter-spacing:.02em;line-height:1.3;color:#fff}
.about-inner .close{margin-top:2.2rem;font-size:.72rem;letter-spacing:.2em;line-height:2;text-transform:uppercase;color:var(--faint)}
.sl-signature{display:block;width:180px;max-width:60%;height:auto;margin:26px auto 0}
.about-inner .linkrow{justify-content:center;margin-top:20px}

/* ---- album page ---- */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:.74rem;color:var(--faint);margin-top:22px;letter-spacing:.04em}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}
.album-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);align-items:center;gap:clamp(32px,6vw,84px);padding:52px 0 72px}
.album-hero h1{font-size:clamp(3.2rem,6.5vw,5.6rem);letter-spacing:.05em;line-height:1}
.album-hero .intro{margin-top:22px;max-width:34rem}
.album-hero .note{margin-top:18px}
.facts{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.facts dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin-top:6px;font-size:1rem;color:var(--text)}
.album-hero .cover{max-width:420px;margin-inline:auto}
.album-hero figcaption{text-align:center;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:14px}
.editions{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 0 88px}
.edition{padding:30px 34px}
.edition h2{font-size:1.6rem}
.edition p{margin-top:14px;font-size:.95rem}
.edition .linkrow{margin-top:8px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.service-grid a{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:92px;padding:18px 20px 18px 22px;text-decoration:none;color:var(--text);transition:background .18s,border-color .18s}
.service-grid a:hover{background:#12263d;border-left-color:var(--blue)}
.service-name{font-size:1rem;line-height:1.3}
.service-action{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.single{display:flex;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.single p{margin-top:6px;font-size:.9rem}
.tracks-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,7vw,100px);align-items:start}
.tracks-grid>div{position:static}
.tracks-grid p:not(.eyebrow){margin-top:20px;max-width:28rem}
.tracklist li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);scroll-margin-top:30px}
.tracklist li:first-child{padding-top:0}
.track-number{font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums;padding-top:2px}
.track-name{color:var(--text);text-decoration:none;font-size:1.05rem;min-height:32px;display:inline-flex;align-items:center}
.track-name:hover{color:var(--blue)}
.duration{font-size:.82rem;color:var(--faint);font-variant-numeric:tabular-nums}
.track-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:2px 20px}
.track-actions a{display:inline-flex;align-items:center;min-height:32px;font-size:.8rem}
.promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;padding:26px 34px;margin-top:64px}
.promo p{margin-top:4px;font-size:.95rem}
.promo strong{display:block;font-weight:300;font-size:1.3rem;color:var(--text)}
.guide{padding:34px 40px}
.guide p:not(.eyebrow){margin-top:14px;max-width:46rem}
.guide .linkrow{margin-top:8px}

/* ---- responsive ---- */
@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .page{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .page>.sh{grid-column:1;grid-row:1;background:var(--ink)}
  .portrait{grid-column:1;grid-row:2;min-height:40vh;min-height:40dvh}
  .portrait img{object-position:center 8%}
  .portrait::after{background:linear-gradient(180deg,transparent 42%,rgba(5,7,12,.4) 74%,rgba(10,14,22,.98) 100%)}
  .panel{grid-column:1;grid-row:3;border-left:0;padding:1.6rem max(1.25rem,env(safe-area-inset-right)) 1.25rem max(1.25rem,env(safe-area-inset-left))}
  .content{max-width:28rem}
  .content h1 picture{width:210px}
  .sec{padding:60px 0}
  .album-grid,.tracks-grid,.album-hero{grid-template-columns:1fr}
  .album-hero{padding:36px 0 56px}
  .album-hero .cover{order:-1;max-width:360px}
  .editions{grid-template-columns:1fr;gap:16px;padding-bottom:60px}
}
@media(max-width:700px){
  .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}
  .sh--home .sh-in{padding:4px 0}
  .sf{text-align:center}
  .sf-top{flex-direction:column;align-items:center;gap:8px}
  .sf-nav{justify-content:center;gap:0 16px}
  .sf .social,.social{justify-content:center}
  .actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .actions .btn{width:100%}
  .facts{gap:16px 28px}
  .cover{max-width:330px;margin-inline:auto}
  .edition,.guide{padding:24px 22px}
  .album-copy{padding-left:18px}
  .promo{padding:22px 24px}
  .tracklist li{column-gap:12px}
  .track-name{font-size:1rem}
  .single{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:600px) and (orientation:portrait){
  /* Keep the complete square portrait visible on phones (existing owner rule). */
  .page{grid-template-rows:auto auto auto;align-content:start}
  .portrait{width:100%;height:auto;min-height:0;aspect-ratio:1/1}
  .portrait img{object-fit:contain;object-position:center}
  .portrait::after{background:linear-gradient(180deg,transparent 72%,rgba(5,7,12,.18) 88%,rgba(10,14,22,.92) 100%)}
}
@media(max-width:380px){
  .sh-nav{gap:0 9px}
  .sh-nav a{font-size:.66rem;letter-spacing:.06em}
  .actions,.hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .service-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .service-grid a{min-height:72px;flex-direction:row;align-items:center;justify-content:space-between}
}
@media(max-height:520px) and (orientation:landscape){
  .page{grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr);grid-template-rows:auto 1fr}
  .portrait{min-height:100dvh}
  .panel{padding:1.4rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!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}

/* v24: mobile refine (27 Oct 2026) */
.guide{margin:24px 0 88px}
@media(max-width:700px){
  .sec{padding:48px 0}
  .album-hero{padding:28px 0 40px}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hero-actions .btn{width:100%}
  .actions{gap:10px}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:24px;padding-top:20px}
  .facts div{min-width:0}
  .facts dt{overflow-wrap:anywhere}
  .editions{gap:12px;padding-bottom:48px}
  .edition,.guide{padding:22px 20px}
  .edition .eyebrow,.guide .eyebrow{font-size:.64rem;letter-spacing:.12em;margin-bottom:12px}
  .promo{margin-top:40px;padding:22px 20px}
  .guide{margin:16px 0 40px}
  .album-copy{padding-left:16px}
}
@media(max-width:380px){
  .eyebrow{font-size:.64rem;letter-spacing:.12em}
  .content .social{gap:0}
  .social a{width:40px}
}

/* v26: UI polish (7 Nov 2026) */
/* breadcrumb rows: the link got a 32 px centred tap box (v22) while the "/" and the current page stayed top-aligned,
   so "AEYSA" sat 5-6 px lower than "/ Album" on every width. Centre every item in the same 32 px line. */
.breadcrumbs{align-items:center}
.breadcrumbs>span{display:inline-flex;align-items:center;min-height:32px}

/* ---- 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}