/* aabbyymusic.com — placeholder single page.
   Palette is taken from AABBYY's own stated colours (black, blue, purple, red,
   green) and from the covers themselves: near-black violet ground, a violet
   primary, one crimson accent used sparingly, blue reserved for the hero glow. */

:root {
  --ground:        #08070e;
  --ground-2:      #0d0b16;
  --surface:       #14111f;
  --line:          #241f36;

  --ink:           #eae7f2;
  --ink-dim:       #a49cbd;
  --ink-faint:     #6f6788;

  --violet:        #a855f7;
  --violet-deep:   #6d28d9;
  --crimson:       #e11d48;
  --blue:          #2f4fe0;

  --measure:       68ch;
  --gutter:        clamp(1.25rem, 5vw, 4rem);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body:    "Montserrat", "Avenir Next", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }

.num { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* Film grain over the whole page. The covers all carry heavy grain; without it
   the flat CSS grounds read as a different material to the artwork. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 60rem);
  display: grid;
  align-items: center;
  padding: clamp(4rem, 12vh, 9rem) var(--gutter) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

/* The blue-lit eye is her current profile image. It sits behind the type as a
   light source rather than as a photograph — masked out to nothing on the left
   so the wordmark never has to fight it for contrast. */
.hero__image {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(78%, 60rem);
  z-index: -1;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 40%;
  opacity: 0.62;
  filter: saturate(1.2) contrast(1.12);
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 62%),
                      linear-gradient(#000, transparent 96%);
  mask-image: linear-gradient(100deg, transparent 6%, #000 62%),
              linear-gradient(#000, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(64rem 44rem at 84% 32%, rgba(47, 79, 224, 0.16), transparent 66%),
    radial-gradient(52rem 42rem at 6% 80%, rgba(109, 40, 217, 0.24), transparent 66%),
    linear-gradient(180deg, transparent 62%, var(--ground) 99%);
}

.hero__body { max-width: 44rem; }

/* The mark is roughly 2:1, but the lower third of its box is the heartbeat
   underline rather than lettering, so it needs a wider box than the aspect
   alone suggests to reach a given cap height. */
.mark {
  width: clamp(19rem, 52vw, 33rem);
  height: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.35));
}

/* The signature IS the wordmark. This carries the name for search engines and
   screen readers without printing it twice on screen. */
.wordmark {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1rem + 2.1vw, 2.5rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 2rem;
  max-width: 27ch;
  text-wrap: balance;
}

.hero__note {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin: 1.75rem 0 0;
}

/* ------------------------------------------------------------- listen ---- */

.listen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.listen__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(20, 17, 31, 0.6);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.listen__link:hover,
.listen__link:focus-visible {
  border-color: var(--violet);
  background: rgba(109, 40, 217, 0.18);
  transform: translateY(-2px);
}

.listen__link--primary {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(109, 40, 217, 0.22);
}

.listen__sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
}

.listen--wide .listen__link { padding: 1rem 1.75rem; }

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

main { display: block; }

section {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  max-width: 78rem;
  margin-inline: auto;
}

section > h2 {
  font-size: clamp(0.72rem, 0.7rem + 0.2vw, 0.82rem);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 2rem;
}

.section-note {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin: -1.5rem 0 2rem;
}

/* --------------------------------------------------------------- facts --- */

.facts { padding-top: 0; }

.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.fact {
  background: var(--ground-2);
  padding: 1.1rem 1.25rem;
}

.fact dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.fact dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.2;
}

.fact dd .num { font-size: 0.92em; }

.source {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 0.9rem 0 0;
}

.source a { color: var(--ink-dim); text-decoration-color: var(--ink-faint); }
.source a:hover { color: var(--violet); }

/* --------------------------------------------------------------- pulse --- */

/* She puts the word "heartbeat" into every song. The trace is the one piece of
   ornament on the page, and it earns its place by being the thing she says the
   catalogue is about. Static — nothing here loops while you are reading. */
.pulse {
  display: block;
  width: 100%;
  height: 3.5rem;
  color: var(--crimson);
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --------------------------------------------------------------- about --- */

.about__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about__prose { max-width: var(--measure); }

.quote {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--violet-deep);
}

.about__prose p:not(.quote) { color: var(--ink-dim); margin: 0; }
.about__prose em { color: var(--ink); font-style: italic; }

.traits {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.traits li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-dim);
}

.traits span {
  display: inline-block;
  min-width: 8.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}

.influences {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--ink-dim);
}

.influences__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------ releases --- */

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Six covers. 20rem lands on three columns at the section's max width, so
     they read as two full rows rather than a row of four and an orphan pair. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.cover { perspective: 900px; }

.cover picture {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cover img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1),
              filter 420ms ease;
  filter: saturate(0.92) brightness(0.94);
}

.cover:hover img,
.cover:focus-within img {
  transform: scale(1.045) rotate(-0.4deg);
  filter: saturate(1.05) brightness(1);
}

.cover h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  margin-top: 0.85rem;
  color: var(--ink);
}

.cover .slash { color: var(--crimson); padding: 0 0.1em; }

/* ----------------------------------------------------------------- cta --- */

.cta {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(48rem 24rem at 50% 0%, rgba(109, 40, 217, 0.16), transparent 70%);
}

/* ---------------------------------------------------------------- foot --- */

.foot {
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}

.foot__mark {
  width: 10rem;
  margin: 0 auto 1.25rem;
  opacity: 0.4;
}

.foot p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ a11y/etc --- */

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

::selection { background: var(--violet-deep); color: #fff; }

@media (max-width: 46rem) {
  .about__cols { grid-template-columns: 1fr; }
  .hero__image { width: 100%; }
  .hero__image img { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cover:hover img, .cover:focus-within img { transform: none; }
}