@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Marra Core Lab — link page. Bio-link conventions: art background, avatar, name, one status line,
   social icon row, compact solid cards. One radius scale, one button height. */
:root {
  --ink: #fff;
  --muted: rgba(255,255,255,.76);
  --card: #fff;
  --card-ink: #111;
  --sub: #6b6b70;
  --line: #ececef;
  --r: 14px;      /* cards & buttons */
  --r-sm: 8px;    /* thumbnails */
  --h: 54px;      /* button height */
  --gap: 10px;
  --col: 560px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { background: #1a1620; color: var(--ink); }
body { position: relative; margin: 0; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }

.bg { position: absolute; inset: 0; z-index: -1; background: #1a1620 url("/assets/img/bg-blur.webp") center / cover no-repeat; }
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,14,.05), rgba(10,8,14,.35)); }

.page { position: relative; width: 100%; max-width: var(--col); margin: 0 auto; padding: 22px 16px 24px; }

.share { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); color: #111; display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.share:active { transform: scale(.94); }
.share svg { width: 16px; height: 16px; fill: currentColor; }

/* Profile */
.profile { text-align: center; }
.avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px; object-fit: cover; background: #000; }
.name { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.status { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--muted); font-weight: 500; }
.status:empty { display: none; }
.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2px; margin: 8px auto 0; }
.social { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; border-radius: 50%; transition: transform .12s, background-color .12s; }
.social svg { width: 23px; height: 23px; fill: currentColor; }
.social:hover { background: rgba(255,255,255,.12); }
.social:active { transform: scale(.92); }

.blocks { margin-top: 16px; display: flex; flex-direction: column; gap: var(--gap); }

/* Shared press feedback */
.btn, .chip, .product, .video, .pill, .sec__more, .release__covlink, .playlist__covlink { transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease; }
.btn:active, .chip:active, .product:active, .video:active, .pill:active { transform: scale(.98); }
@media (hover: hover) {
  .btn:hover, .product:hover, .video:hover { box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: translateY(-1px); }
}

/* Section header: title left, optional link right */
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 2px -2px; }
.sec__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.sec__more { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.sec__more:hover { color: #fff; }
.chev { width: 16px; height: 16px; fill: currentColor; margin-right: -4px; }

/* Button row */
.btn { display: flex; align-items: center; height: var(--h); padding: 0 10px 0 7px; border-radius: var(--r);
  background: var(--card); color: var(--card-ink); font-size: 15px; font-weight: 600; }
.btn__lead { flex: 0 0 40px; height: 40px; display: grid; place-items: center; }
.btn__label { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.btn__tail { flex: 0 0 40px; display: grid; place-items: center; color: #b5b5bb; }
.btn__tail .chev { width: 20px; height: 20px; margin: 0; }
.ico--img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; }
.ico--svg { width: 26px; height: 26px; fill: currentColor; color: #111; }

/* Pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill--dark { background: #111; color: #fff; }
.pill--dark:hover { background: #2a2a2e; }
.pill__ico { width: 18px; height: 18px; fill: #1ED760; }

/* Release card */
.release { background: var(--card); color: var(--card-ink); border-radius: var(--r); padding: 12px; }
.release__top { display: flex; gap: 14px; align-items: center; }
.release__covlink { flex: 0 0 auto; border-radius: var(--r-sm); }
.release__cover { width: 112px; height: 112px; border-radius: var(--r-sm); object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.release__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.release__kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.release__title { margin-top: 2px; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.release__sub { margin-top: 3px; font-size: 13px; color: var(--sub); }
.release__text .pill { margin-top: 10px; padding: 0 22px; }
.chips { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 60px; border-radius: 10px; background: #f3f3f5; }
.chip:hover { background: #e9e9ec; }
.chip__ico { height: 26px; display: grid; place-items: center; }
.chip .ico--svg { width: 24px; height: 24px; }
.chip .ico--img { width: 26px; height: 26px; border-radius: 6px; }
.chip__label { max-width: 100%; padding: 0 2px; font-size: 10.5px; letter-spacing: -.01em; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Products: compact 2-up */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.product { display: flex; align-items: center; gap: 10px; height: 76px; padding: 8px; background: var(--card); color: var(--card-ink); border-radius: var(--r); }
.product__img { flex: 0 0 60px; width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: cover; }
.product__text { display: flex; flex-direction: column; min-width: 0; }
.product__title { font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product__sub { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product__price { margin-top: 2px; font-size: 13px; font-weight: 600; }

/* Videos: swipe carousel */
.carousel { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > li { flex: 0 0 74%; scroll-snap-align: start; }
.video { display: block; background: var(--card); color: var(--card-ink); border-radius: var(--r); overflow: hidden; }
.video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; display: grid; place-items: center; isolation: isolate; }
.video__play svg { width: 48px; height: 48px; fill: #ff0000; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.video__play::before { content: ""; position: absolute; width: 16px; height: 16px; background: #fff; z-index: -1; }
.video__cap { display: block; padding: 8px 12px 10px; }
.video__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video__sub { display: block; margin-top: 1px; font-size: 12px; color: var(--sub); }

/* Playlist: compact row */
.playlist { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--card); color: var(--card-ink); border-radius: var(--r); }
.playlist__covlink { flex: 0 0 auto; border-radius: var(--r-sm); }
.playlist__cover { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; }
.playlist__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.playlist__label { font-size: 12px; font-weight: 600; color: var(--sub); }
.playlist__title { max-width: 100%; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.playlist__desc { max-width: 100%; margin-top: 1px; font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist__cta { margin-top: 8px; height: 34px; padding: 0 14px 0 11px; font-size: 13px; }

.foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--muted); }
.noscript a { display: block; padding: 18px; background: #fff; color: #111; border-radius: var(--r); text-align: center; font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #111; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; transition: .2s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (min-width: 600px) {
  .page { padding-top: 48px; }
  .carousel { margin: 0; padding: 0; scroll-padding-inline: 0; }
  .carousel > li { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
  .video__title { font-size: 13px; }
  .release__cover { width: 132px; height: 132px; }
}
@media (min-width: 768px) {
  .share { top: 20px; right: -48px; }
  .avatar { width: 88px; height: 88px; }
  .name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }