/* Load order: fonts.css, tokens.css, amini-components.css. Wrap pages in class="am". */

/* Amini Music — component styles. Every colour, size and space comes from tokens.css. */
.am { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.am *, .am *::before, .am *::after { box-sizing: border-box; }
.am a { color: var(--accent); text-underline-offset: 3px; }
.am :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.am img { max-width: 100%; display: block; }

/* Facet texture: the hexagon's triangle grid as hairlines */
.am-facet {
  background-color: var(--surface-sunken);
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 20.785px),
    repeating-linear-gradient(60deg, var(--line) 0 1px, transparent 1px 20.785px),
    repeating-linear-gradient(120deg, var(--line) 0 1px, transparent 1px 20.785px);
}

/* Eyebrow + labels */
.am-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.am-data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Button */
.am-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 15px/20px var(--font-sans); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.am-btn--primary { background: var(--accent); color: var(--on-accent); }
.am-btn--primary:hover { background: var(--ink); color: var(--surface); }
.am-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.am-btn--secondary:hover { border-color: var(--ink); }
.am-btn--text { padding: 0; color: var(--accent); border: 0; background: none; }
.am-btn--text::after { content: "→"; transition: transform .15s; }
.am-btn--text:hover::after { transform: translateX(3px); }
.am .am-btn--primary, .am .am-btn--secondary { color: inherit; }
.am .am-btn--primary { color: var(--on-accent); }
.am .am-btn--secondary { color: var(--ink); }

/* Site header */
.am-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-12); border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.am-header__logo img { height: 34px; width: auto; }
.am-header__nav { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.am-header__nav a { font-family: var(--font-display); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-block: var(--space-1); border-bottom: 1px solid transparent; }
.am-header__nav a:hover, .am-header__nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.am-header__nav .am-btn { letter-spacing: 0; text-transform: none; font-family: var(--font-sans); }

/* Artist card (Legacy Catalogue grid) */
.am-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-8) var(--space-6); }
.am-artist-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.am .am-artist-card { color: var(--ink); text-decoration: none; }
.am-artist-card__photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-0); background-color: var(--surface-sunken); }
.am-artist-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); transition: transform .4s ease, filter .4s ease; }
.am-artist-card:hover .am-artist-card__photo img { transform: scale(1.03); filter: none; }
.am-artist-card__name { font-weight: 400; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 400; margin: 0; border-bottom: 1px solid transparent; align-self: flex-start; }
.am-artist-card:hover .am-artist-card__name { font-weight: 400; border-bottom-color: var(--accent); }
.am-artist-card__meta { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: calc(var(--space-2) * -1) 0 0; }

/* Artist profile (fixed template) */
.am-profile { display: grid; gap: var(--space-16); padding: var(--space-12); max-width: var(--content-max); margin: 0 auto; }
.am-profile__hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: end; }
.am-profile__portrait { aspect-ratio: 4 / 5; background-color: var(--surface-sunken); overflow: hidden; }
.am-profile__portrait img { width: 100%; height: 100%; object-fit: cover; }
.am-profile__name { color: var(--ink); font-family: var(--font-display); font-size: 48px; line-height: 54px; font-weight: 300; margin: var(--space-2) 0 var(--space-6); text-wrap: balance; }
.am-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-8); margin: 0 0 var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.am-facts dt { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.am-facts dd { margin: 0; font-size: 15px; line-height: 20px; }
.am-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.am-section { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.am-section__body { max-width: var(--text-max); }
.am-section__body p { margin: 0 0 var(--space-4); }
.am-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.am-gallery > * { aspect-ratio: 3 / 2; background-color: var(--surface-sunken); overflow: hidden; }
.am-gallery img { width: 100%; height: 100%; object-fit: cover; }
.am-releases { list-style: none; margin: 0; padding: 0; }
.am-releases li { display: grid; grid-template-columns: 7em 1fr auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.am-releases .am-data { white-space: nowrap; }
.am-pager { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); }

/* Spotify embed frame */
.am-player { border-radius: var(--radius-md); overflow: hidden; background-color: var(--surface-sunken); }
.am-player iframe { display: block; width: 100%; height: 352px; border: 0; }
.am-player__stand-in { height: 352px; display: grid; place-items: center; text-align: center; padding: var(--space-6); color: var(--ink-muted); }

/* Venture tile: the venture's own artwork, Amini only endorses */
.am-venture { display: grid; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.am .am-venture { color: var(--ink); text-decoration: none; }
.am-venture__art { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--surface-sunken); }
.am-venture__art img { width: 100%; height: 100%; object-fit: cover; }
.am-venture__name { font-weight: 400; font-family: var(--font-display); font-size: 22px; line-height: 28px; margin: 0; }
.am-venture__line { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.am-endorse { font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }

/* Status tag (Labs) */
.am-status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: var(--space-1) var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.am-status::before { content: ""; width: 8px; height: 8px; background: currentColor; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.am-status--running::before { background: var(--status-running); }
.am-status--learned::before { background: var(--status-learned); }
.am-status--scaled::before { background: var(--status-scaled); }
.am-status--stopped::before { background: var(--status-stopped); }

/* Experiment card (Labs register) */
.am-exp { color: var(--ink); display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); }
.am-exp__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.am-exp__title { font-weight: 400; font-family: var(--font-display); font-size: 22px; line-height: 28px; margin: 0; }
.am-exp dl { display: grid; grid-template-columns: 9em 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.am-exp dt { font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink-muted); }
.am-exp dd { margin: 0; font-size: 15px; line-height: 22px; }

/* Service card */
.am-service { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8) var(--space-6); border-top: 2px solid var(--ink); }
.am-service__name { font-weight: 400; font-family: var(--font-display); font-size: 22px; line-height: 28px; margin: 0; }
.am-service__price { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.am-service ul { margin: 0; padding-left: 1.1em; color: var(--ink); font-size: 15px; line-height: 24px; }

/* Footer */
.am-footer { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-12); background: var(--surface-sunken); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.am-footer h4 { margin: 0 0 var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.am-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.am-footer a { color: var(--ink-muted); text-decoration: none; }
.am-footer a:hover { color: var(--accent); }
.am-footer__brand img { height: 28px; width: auto; margin-bottom: var(--space-4); }

@media (max-width: 760px) {
  .am-header { padding: var(--space-4); }
  .am-profile { padding: var(--space-4); gap: var(--space-12); }
  .am-profile__hero, .am-section, .am-footer { grid-template-columns: minmax(0, 1fr); }
  .am-profile__name { font-size: 36px; line-height: 42px; }
  .am-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-footer { padding: var(--space-8) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .am * { transition: none !important; } }

/* Logo swap per stand: light logo on paper, reversed logo on ink */
.am .am-logo--labs { display: none; }
[data-theme="labs"] .am .am-logo--music, .am[data-theme="labs"] .am-logo--music, [data-theme="labs"].am .am-logo--music { display: none; }
[data-theme="labs"] .am .am-logo--labs, [data-theme="labs"].am .am-logo--labs { display: block; }

/* A nested stand re-resolves text colour */
[data-theme] { color: var(--ink); }