/* LNKS Luanda Music Group components. Uses only tokens from lnks-tokens.css. LNKS design system */

/* ---------- base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--text-base-weight) var(--text-base-size)/var(--text-base-line) var(--font-sans);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { width: 100%; max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--layout-text); }
.caps { text-transform: uppercase; }

.t-xs { font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: var(--text-xs-weight); letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.t-sm { font-size: var(--text-sm-size); line-height: var(--text-sm-line); font-weight: var(--text-sm-weight); }
.t-lg { font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: var(--text-lg-weight); }
.t-xl, .t-2xl, .t-display, .t-mega { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.t-xl { font-size: var(--text-xl-size); line-height: var(--text-xl-line); }
.t-2xl { font-size: var(--text-2xl-size); line-height: var(--text-2xl-line); }
.t-display { font-size: var(--text-display-size); line-height: var(--text-display-line); margin: 0; }
.t-mega { font-size: var(--text-mega-size); line-height: var(--text-mega-line); margin: 0; }
.muted { color: var(--c-text-muted); }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--c-button); color: var(--c-on-button); padding: var(--space-3) var(--space-4); font-weight: 700; }
.skip-link:focus { top: var(--space-4); }

/* ---------- header (reference: 114px tall, 24px / 40px padding, centred nav, search + pill toggle at right) ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  background: transparent; color: var(--c-text);
  transition: background var(--motion-base), box-shadow var(--motion-base);
}
.site-header.is-scrolled, body:has(.mobile-menu.is-open) .site-header {
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-header__inner {
  height: 100%; padding: 0 var(--header-pad-x);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5);
}
.site-header__logo { justify-self: start; flex: none; text-decoration: none; color: inherit; display: block; }
/* official logo (October 2026): the horizontal lockup, symbol beside LNKS / LUANDA / MUSIC GROUP, drawn as one image.
   Black lettering on the light theme, white lettering on the dark theme and in the footer. The text spans stay in the
   markup for search and screen readers (the link already carries the full name) but are not drawn. */
.brand-mark { display: inline-block; width: 192px; height: 52px; color: inherit; background: url(../img/brand/lnks-logo-horizontal.svg) left center / contain no-repeat; }
.brand-mark::before { content: none; }
[data-theme="dark"] .brand-mark, .site-footer .brand-mark { background-image: url(../img/brand/lnks-logo-horizontal-reverse.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark { background-image: url(../img/brand/lnks-logo-horizontal-reverse.svg); } }
.brand-mark__name, .brand-mark__line { display: none; }
.brand-mark__img { display: block; height: 58px; width: auto; }
.site-nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-nav a, .mobile-menu__nav a, .mobile-nav a {
  font-size: var(--text-nav-size); line-height: var(--text-nav-line); font-weight: var(--text-nav-weight);
  letter-spacing: var(--text-nav-tracking); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding-block: var(--space-1); border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: currentColor; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--c-accent-text); }
.site-header__tools { justify-self: end; display: flex; align-items: center; gap: 14px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; color: inherit; border: 0; cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
.site-header__search { color: var(--c-accent-text); width: 32px; }
.site-header__search svg { width: 19px; height: 19px; }
.menu-btn { display: none; }
.menu-btn .icon-close, .menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
@media (max-width: 1199.98px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 767.98px) { .site-header__search { display: none; } .brand-mark { transform: scale(.86); transform-origin: left center; } }
/* very small phones: let the logo column shrink and tighten the tools, so the menu button never sticks out */
@media (max-width: 379.98px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); } .site-header__tools { gap: 4px; } }
@media (max-width: 339.98px) { .site-header .brand-mark { transform: scale(.76); } }

/* EN | PT: a small pill next to the theme toggle; the current language is filled in brand red */
.lang-switch { display: flex; align-items: center; padding: 3px; border-radius: var(--radius-pill); border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); flex: none; }
.lang-switch a { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1; color: inherit; text-decoration: none; opacity: .62; transition: opacity var(--motion-base), background-color var(--motion-base); }
.lang-switch a:hover { opacity: 1; }
.lang-switch a[aria-current] { opacity: 1; background: var(--c-button); color: var(--c-on-button); }
.lang-switch a:focus-visible { outline: 2px solid var(--c-button); outline-offset: 2px; }
/* phones: only the other language shows, as one small round button, so the header never gets wider than the screen */
@media (max-width: 479.98px) {
  .site-header__tools { gap: 8px; }
  .site-header .brand-mark { transform: scale(.8); }
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .lang-switch { padding: 0; border: 0; }
  .lang-switch a[aria-current] { display: none; }
  .lang-switch a { min-width: 32px; height: 32px; padding: 0; opacity: 1; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
}
@media (max-width: 379.98px) { .site-header .brand-mark { transform: scale(.78); } .site-header__tools { gap: 6px; } }
@media (max-width: 339.98px) { .site-header .brand-mark { transform: scale(.66); } .lang-switch a { min-width: 28px; height: 28px; font-size: 10px; } }
/* theme toggle pill: 76 x 38, brand fill, white knob with the sun (light) or moon (dark) */
.theme-toggle {
  position: relative; width: var(--toggle-w); height: var(--toggle-h); padding: 0 4px; border: 0; border-radius: var(--radius-pill);
  background: var(--c-button); color: var(--c-on-button); cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: space-between;
}
.theme-toggle__icon { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; transition: color var(--motion-base); }
.theme-toggle__icon svg { width: 15px; height: 15px; }
.theme-toggle::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%;
  background: #FFFFFF; transition: transform var(--motion-base) var(--motion-ease);
}
.theme-toggle .theme-toggle__icon--sun { color: var(--c-button); }
.theme-toggle[aria-pressed="true"]::after { transform: translateX(38px); }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--sun { color: var(--c-on-button); }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--moon { color: var(--c-button); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-header);
  background: var(--c-bg); border-top: 1px solid var(--c-border);
  padding: var(--space-5) var(--gutter) var(--space-6);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--motion-base), transform var(--motion-base) var(--motion-ease), visibility 0s linear var(--motion-base);
}
.mobile-menu.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mobile-menu__nav a, .mobile-nav a { font-size: var(--text-lg-size); display: block; padding-block: var(--space-2); }
.mobile-menu hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-5) 0; }

/* ---------- buttons, tags, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-none);
  font: var(--text-nav-weight) var(--text-nav-size)/1 var(--font-sans); letter-spacing: var(--text-nav-tracking); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); }
.btn--lg { min-height: 52px; padding: 0 var(--space-6); }
.btn--primary { background: var(--c-button); color: var(--c-on-button); }
.btn--primary:hover { background: var(--c-button-hover); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: currentColor; }
.btn--secondary:hover { background: var(--c-text); color: var(--c-bg); }
.btn--on-brand { background: var(--c-on-brand); color: var(--c-brand); }
.btn--link { background: none; color: var(--c-accent-text); padding: 0; min-height: auto; text-decoration: underline; text-underline-offset: 3px;
  font: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; display: inline; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation: none; } }

.tag, .read-more {
  display: inline-flex; align-items: center; background: var(--c-tag); color: var(--c-on-tag);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant-tag)) 100%, 0 100%);
  padding: var(--space-1) calc(var(--space-3) + var(--slant-tag)) var(--space-1) var(--space-3);
  text-decoration: none;
}
.tag { font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: 700; letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.read-more { min-height: 44px; font-size: var(--text-sm-size); font-weight: 600; transition: background var(--motion-fast), color var(--motion-fast); }
.read-more:hover { background: var(--c-button); color: var(--c-on-button); }
/* clip-path hides outlines; draw focus on a wrapper */
.read-more:focus-visible { outline: none; }
.focus-wrap:has(.read-more:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.focus-wrap { display: inline-block; }

.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-lg-size); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.arrow-link .arrow { width: 48px; height: 12px; transition: transform var(--motion-base) var(--motion-ease); }
.arrow-link:hover .arrow { transform: translateX(6px); }

/* ---------- diagonal page hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--c-brand); color: var(--c-on-brand); }
.hero__inner { position: relative; z-index: 1; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding-block: var(--space-7) var(--space-6); }
@media (min-width: 768px) { .hero__inner { min-height: 360px; } }
.hero--brand .t-display { color: var(--c-on-brand); font-size: clamp(44px, 7vw, 132px); line-height: .86; }
.hero--brand .meta { color: var(--c-accent-on-brand); }
/* inner page hero: graphite panel with faint record grooves (our pattern) */
.hero--brand { background-color: var(--brand-graphite-deep);
  background-image: repeating-radial-gradient(circle at 92% 50%, transparent 0 34px, color-mix(in srgb, var(--brand-white) 4%, transparent) 34px 68px); }
.hero--brand .hero__inner { max-width: none; padding-inline: var(--header-pad-x); }
.hero--brand .hero__inner > * { max-width: min(100%, 78vw); position: relative; }
.hero--panel { background: var(--c-bg); color: var(--c-on-panel); display: grid; }
.hero--panel .hero__photo { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; object-fit: cover; }
.hero--panel .hero__inner {
  background: var(--c-panel); width: 56%;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  padding-right: 18%;
}
.hero--panel .hero__meta { color: var(--c-on-panel); opacity: .85; }
@media (max-width: 767.98px) {
  .hero--panel .hero__photo { position: static; width: 100%; aspect-ratio: 4 / 3; height: auto; }
  .hero--panel .hero__inner { width: 100%; clip-path: none; padding-right: var(--gutter); min-height: 0; }
}

/* ---------- roster ---------- */
.roster { position: relative; background: var(--roster-tile-bg); color: var(--roster-name); }
.roster__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--roster-cols), 1fr); }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--roster-tile-bg); container-type: inline-size; }
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--motion-ease); }
.tile::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--roster-tile-bg) 85%, transparent));
}
.tile__name {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 4; margin: 0; pointer-events: none;
  font: var(--weight-display) var(--text-tile-size)/var(--text-tile-line) var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.tile__toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tile__toggle:focus-visible { outline-offset: -3px; }
.tile__links {
  position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: color-mix(in srgb, var(--roster-scrim) 88%, transparent);
  clip-path: circle(0% at 50% 50%); visibility: hidden;
  transition: clip-path var(--motion-circle) var(--motion-ease-in-out), visibility 0s linear var(--motion-circle);
}
.tile__links a {
  color: var(--roster-link); text-decoration: none;
  /* scales with the tile so 7+ links fit a 160px tile */
  font-size: clamp(12px, 4.4cqi, var(--text-base-size)); line-height: 1.35;
  padding: 1px var(--space-2);
}
.tile__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile.is-open .tile__links,
.tile:focus-within .tile__links { clip-path: circle(62% at 50% 50%); visibility: visible; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__links { clip-path: circle(62% at 50% 50%); visibility: visible; transition-delay: 0s; }
  .tile:hover .tile__img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .tile__links { clip-path: none; opacity: 0; transition: opacity var(--motion-base); }
  .tile.is-open .tile__links, .tile:focus-within .tile__links { opacity: 1; clip-path: none; }
  @media (hover: hover) { .tile:hover .tile__links { opacity: 1; clip-path: none; } }
}

.az-rail {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 4; pointer-events: none;
}
.az-rail ol {
  --az-h: min(20px, calc((100vh - var(--header-h) - var(--roster-bar-h) - 32px) / 26));
  position: sticky; top: calc(var(--header-h) + 12px); pointer-events: auto;
  list-style: none; margin: 0; padding: var(--space-2) var(--space-1);
  /* never taller than the roster itself, so a short roster is not stretched by the rail */
  display: flex; flex-direction: column; height: min(calc(26 * var(--az-h) + 16px), 100%);
  background: color-mix(in srgb, var(--roster-bar-bg) 70%, transparent);
}
.az-rail li { flex: 1 1 0; min-height: 0; display: grid; }
.az-rail a, .az-rail span {
  display: grid; place-items: center; width: 22px; height: 100%; min-height: 0;
  font: 700 min(11px, var(--az-h)) / 1 var(--font-sans); color: var(--roster-rail); text-decoration: none;
}
.az-rail span { color: var(--roster-rail-disabled); }
.az-rail a:hover, .az-rail a[aria-current="true"] { text-decoration: underline; }
@media (max-width: 767.98px) { .az-rail { display: none; } }

.roster-bar {
  position: sticky; bottom: 0; z-index: var(--z-roster-bar); height: var(--roster-bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--gutter);
  background: var(--roster-bar-bg); color: var(--roster-name);
}
.roster-bar__top { justify-self: start; color: inherit; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none;
  font: 600 var(--text-xs-size)/1 var(--font-sans); letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.roster-bar__top svg { width: 18px; height: 18px; }
.wordmark { margin: 0; display: flex; align-items: baseline; gap: .18em; font-size: clamp(22px, 3vw, 40px); line-height: 1; white-space: nowrap; }
.wordmark { font-family: var(--font-display); }
.wordmark__the { font: 400 .7em/1 var(--font-display); text-transform: lowercase; color: var(--roster-rail-disabled); }
.wordmark__bold { font: 400 1em/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.wordmark__light { font: 400 1em/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-red-glow); }
.sort { position: relative; justify-self: end; }
.sort__btn { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; color: inherit; cursor: pointer; min-height: 44px; font: 700 var(--text-sm-size)/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.sort__btn svg { width: 14px; height: 14px; transition: transform var(--motion-fast); }
.sort__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sort__menu {
  position: absolute; right: 0; bottom: calc(100% + var(--space-2)); min-width: 140px; margin: 0; padding: var(--space-1) 0; list-style: none;
  background: var(--roster-bar-bg); border: 1px solid var(--roster-bar-line); box-shadow: var(--shadow-pop);
}
.sort__menu[hidden] { display: none; }
.sort__menu a { display: block; padding: var(--space-2) var(--space-4); color: var(--roster-link); text-decoration: none; font-size: var(--text-sm-size); }
.sort__menu a[aria-current="true"]::after { content: " ✓"; }
.sort__menu a:hover, .sort__menu a:focus-visible { background: var(--roster-bar-hover); }

/* ---------- marquee bands (reference: full width solid band, uppercase label + arrow, scrolling) ---------- */
.marquee { overflow: hidden; background: var(--c-surface-2); }
.marquee--accent, .marquee--red { background: var(--c-accent); color: var(--c-on-accent); }
.marquee--graphite { background: var(--brand-graphite-deep); color: var(--brand-white); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--motion-marquee) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--space-7); padding: var(--space-4) var(--space-7) var(--space-4) 0; margin: 0; list-style: none; }
.marquee--band .marquee__group { height: var(--band-h); padding: 0 clamp(24px, 2.3vw, 44px) 0 0; gap: clamp(24px, 2.3vw, 44px); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__group { flex-wrap: wrap; justify-content: center; padding-left: var(--space-7); }
  .marquee--band .marquee__track { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; }
  .marquee--band .marquee__group { flex-wrap: nowrap; padding-left: 0; }
  .marquee--band .marquee__group[aria-hidden="true"] { display: flex; }
}
.band__link { display: inline-flex; align-items: center; gap: clamp(16px, 1.9vw, 36px); color: inherit; text-decoration: none; white-space: nowrap;
  font: 500 var(--text-band-size)/1 var(--font-sans); letter-spacing: 0.01em; text-transform: uppercase; }
.band__link svg { width: 1em; height: 1em; stroke-width: 2.2; flex: none; max-width: none; }
.band__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.logo-btn {
  background: none; border: 0; padding: var(--space-2); cursor: pointer; color: inherit;
  font: 600 22px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}
.logo-btn img { height: 48px; width: auto; }
.logo-btn:hover { color: var(--c-accent-text); }

.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: var(--space-7) var(--gutter);
  background: color-mix(in srgb, var(--roster-scrim) 92%, transparent); color: var(--roster-name);
  opacity: 0; visibility: hidden; transition: opacity var(--motion-base), visibility 0s linear var(--motion-base);
}
.overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.overlay__close { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--roster-name); }
.overlay__body { display: grid; justify-items: center; gap: var(--space-5); text-align: center; max-width: 560px; }
.overlay__logo { font: 400 clamp(36px, 6vw, 72px)/1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0; }
.overlay__body .arrow-link { color: var(--roster-name); }
body.is-locked { overflow: hidden; }

.socials { display: inline-flex; align-items: center; gap: var(--space-3); }
.socials__btn { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; color: inherit; cursor: pointer; min-height: 44px; font: 700 var(--text-xs-size)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.socials__btn .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); }
.socials__list { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.socials__list[hidden] { display: none; }
.socials__list a, .socials__list button { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; background: none; border: 0; cursor: pointer; }
.socials__list svg { width: 20px; height: 20px; }
/* Share (lnks-share.js): the plus turns into a minus while the choices are open; a message appears under the row */
.share { position: relative; flex-wrap: wrap; }
.socials__btn .dot svg { width: 18px; height: 18px; }
/* the plus turns into a minus: the round button turns half a circle while the upright line folds away */
.share .socials__btn .dot { transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, box-shadow .3s ease; }
.share .share__v { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.share .socials__btn[aria-expanded="true"] .dot { transform: rotate(180deg); box-shadow: 0 0 0 6px rgba(222, 4, 18, .18); }
.share .socials__btn[aria-expanded="true"] .share__v { transform: scaleY(0); }
.share .socials__btn:hover .dot { box-shadow: 0 0 0 6px rgba(222, 4, 18, .18); }
/* the choices slide out of the button one after another */
.share.is-ready .socials__list { max-width: 0; overflow: hidden; padding: 4px 0; margin: -4px 0; visibility: hidden;
  transition: max-width .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s; }
.share.is-ready.is-open .socials__list { max-width: 320px; visibility: visible; transition: max-width .55s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.share.is-ready .socials__list li { opacity: 0; transform: translateX(-12px) scale(.6);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }
.share.is-ready.is-open .socials__list li { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.4, .4, 1); transition-delay: calc(var(--i, 0) * 55ms + 60ms); }
@media (prefers-reduced-motion: reduce) {
  .share .socials__btn .dot, .share .share__v, .share.is-ready .socials__list, .share.is-ready .socials__list li { transition: none !important; }
}
.share .socials__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 999px; }
.socials__list a, .socials__list button { border-radius: 50%; transition: background-color .2s ease, color .2s ease; }
.socials__list a:hover, .socials__list button:hover, .socials__list a:focus-visible, .socials__list button:focus-visible { background: var(--c-accent); color: var(--c-on-accent); outline: none; }
.share__toast { position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: max-content; max-width: min(340px, calc(100vw - 32px)); margin: 0;
  padding: 10px 14px; border-radius: 6px; background: #050505; color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.share__toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.share__url { display: block; margin-top: 4px; font-weight: 700; color: #EF848B; word-break: break-all; user-select: all; }

/* ---------- news ---------- */
.meta { font-size: var(--text-xs-size); line-height: var(--text-xs-line); font-weight: var(--text-xs-weight); letter-spacing: var(--text-xs-tracking); text-transform: uppercase; }
.meta__cat { color: var(--c-accent-text); }
.card { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--motion-ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg-size); line-height: 1.3; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }   /* whole card is the one link */
.card:hover .card__title a { text-decoration: underline; text-underline-offset: 3px; }
.card:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.card__title a:focus-visible { outline: none; }
.card__excerpt { margin: 0; color: var(--c-text-muted); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.ext-icon { display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: baseline; }
.card-list { list-style: none; margin: 0; padding: 0; }
.card-list > li { padding-block: var(--space-5); border-bottom: 1px solid var(--c-border); }
.card-list .card__title { font-size: var(--text-xl-size); line-height: var(--text-xl-line); }

.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--space-5);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-2);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (min-width: 768px) { .carousel__track { grid-auto-columns: calc((100% - var(--space-5)) / 2); } }
@media (min-width: 1024px) { .carousel__track { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); } }
.carousel__nav { display: flex; gap: var(--space-2); justify-content: flex-end; margin-bottom: var(--space-4); }
.carousel__btn { width: 56px; height: 56px; display: grid; place-items: center; background: var(--c-brand); color: var(--c-on-brand); border: 0; cursor: pointer; }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn svg { width: 22px; height: 22px; }

.filters { display: grid; gap: var(--space-4); }
.filters details { border-bottom: 1px solid var(--c-border); padding-bottom: var(--space-3); }
.filters summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px;
  font-size: var(--text-nav-size); font-weight: 700; letter-spacing: var(--text-nav-tracking); text-transform: uppercase; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "+"; font-size: 20px; }
.filters details[open] summary::after { content: "–"; }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-accent); margin: 0; }

/* ---------- accordion ---------- */
.accordion details { border-bottom: 1px solid var(--c-border); }
.accordion summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
  padding-block: var(--space-4); font-size: var(--text-lg-size); line-height: var(--text-lg-line); font-weight: 600;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { width: 20px; height: 20px; flex: none; transition: transform var(--motion-base); }
.accordion details[open] summary svg { transform: rotate(180deg); }
.accordion .accordion__body { padding-bottom: var(--space-5); color: var(--c-text-muted); max-width: var(--layout-text); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm-size); line-height: var(--text-sm-line); font-weight: 600; }
.field__req { color: var(--c-accent-text); }
.field__input {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: inherit; color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border-input); border-radius: var(--radius-none);
}
textarea.field__input { min-height: 160px; resize: vertical; }
select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-7); }
.field__input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); }
.field__input[aria-invalid="true"] { border-color: var(--c-danger); }
.field__input:disabled { background: var(--c-surface); color: var(--c-text-muted); cursor: not-allowed; }
.field__help { font-size: var(--text-sm-size); line-height: var(--text-sm-line); color: var(--c-text-muted); margin: 0; }
.field__error { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm-size); color: var(--c-danger); margin: 0; }
.field__error svg { width: 16px; height: 16px; flex: none; }
.field__error[hidden] { display: none; }
.hp { position: absolute; left: -9999px; }

.status { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-left: 4px solid currentColor; }
.status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.status p { margin: 0; color: var(--c-text); }
.status--success { background: var(--c-success-surface); color: var(--c-success); }
.status--error { background: var(--c-danger-surface); color: var(--c-danger); }

/* ---------- search ---------- */
.search-field { display: flex; align-items: center; border-bottom: 2px solid var(--c-border-input); }
.search-field:focus-within { border-bottom-color: var(--c-focus); }
.search-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--c-text); padding: var(--space-3) 0;
  font: var(--weight-display) clamp(28px, 4vw, var(--text-2xl-size))/1.1 var(--font-display); }
.search-field input:focus-visible { outline: none; }
.search-field input::placeholder { color: var(--c-text-muted); }

/* ---------- portrait card ---------- */
.portrait { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--roster-tile-bg); color: var(--roster-name); }
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--motion-ease); }
.portrait::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--roster-tile-bg) 88%, transparent)); }
.portrait__text { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1; display: grid; gap: 2px; }
.portrait__name { margin: 0; font-family: var(--font-display); font-size: var(--text-lg-size); line-height: 1.15; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.portrait__name a { text-decoration: none; }
.portrait__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.portrait:hover img { transform: scale(1.03); }
.portrait:has(a:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.portrait a:focus-visible { outline: none; }

/* ---------- footer: brand + follow on the left, four headed link columns, bottom bar with copyright, legal links and language ---------- */
.site-footer { background: var(--brand-graphite); color: var(--brand-white); padding: clamp(40px, 4vw, 72px) var(--header-pad-x) clamp(24px, 2.4vw, 40px); }
[data-theme="dark"] .site-footer { background: var(--brand-graphite-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { background: var(--brand-graphite-deep); } }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__top { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--space-8); } }
.site-footer__brand { display: grid; align-content: start; gap: var(--space-3); }
.site-footer__logo { display: inline-block; margin-bottom: var(--space-4); }
.site-footer__follow { margin: 0; font: 700 12px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--brand-white) 70%, transparent); }
.site-footer__socials a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 15px; }
.site-footer__socials svg { width: 20px; height: 20px; flex: none; }
.site-footer__cols { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__col { display: grid; align-content: start; gap: var(--space-3); }
.site-footer__head { margin: 0 0 var(--space-1); font: 700 13px/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-white); }
.site-footer__note { margin: 0; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--brand-white) 65%, transparent); max-width: 24ch; }
.site-footer__col ul { display: grid; gap: 12px; }
.site-footer__col a { font-size: 15px; line-height: 1.35; color: color-mix(in srgb, var(--brand-white) 86%, transparent); }
.site-footer__col a:hover { color: var(--brand-white); }
.site-footer__bottom { margin-top: clamp(40px, 4vw, 64px); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--brand-white) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; font-size: 12px; line-height: 1.5; }
.site-footer__copy { margin: 0; max-width: 70ch; color: color-mix(in srgb, var(--brand-white) 75%, transparent); }
.site-footer__bottom-right { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.site-footer__legal, .site-footer__lang { display: flex; flex-wrap: wrap; row-gap: 6px; }
.site-footer__legal li + li::before, .site-footer__lang li + li::before { content: "|"; padding: 0 10px; opacity: .5; }
.site-footer__legal a, .site-footer__lang a { font-weight: 600; }
.site-footer__lang a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- back to top ---------- */
.to-top { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: var(--z-header);
  border-radius: var(--radius-pill); background: var(--c-tag); color: var(--c-on-tag); border: 0; min-height: 40px; padding: 0 var(--space-4);
  font: 600 var(--text-sm-size)/1 var(--font-sans); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--motion-base), visibility 0s linear var(--motion-base); }
.to-top.is-shown { opacity: 1; visibility: visible; transition-delay: 0s; }
/* the roster bar has its own back-to-top logo, so the pill steps aside while the roster is on screen */
.to-top.is-shown.is-over-roster { opacity: 0; visibility: hidden; transition-delay: 0s, var(--motion-base); }
/* ---------- Page transitions (whole site) ----------
   Moving between pages: the old page fades and lifts away while the new page rises into place.
   The site header keeps its place, so the site feels like one continuous app.
   Browsers that support cross page view transitions do this natively (Chrome, Edge, Safari 18.2+).
   Other browsers get the rise in on arrival only (html.no-vt, set by the head script).
   Reduced motion: no page animation at all. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: lnks-header; }
  ::view-transition-group(lnks-header) { animation: none; }
  ::view-transition-old(root) { animation: lnks-page-out .16s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: lnks-page-in .34s cubic-bezier(.2, .8, .2, 1) .02s both; }
  html.no-vt main { animation: lnks-page-in .34s cubic-bezier(.2, .8, .2, 1) backwards; }
}
@keyframes lnks-page-out { to { opacity: 0; transform: translateY(-14px) scale(.992); } }
@keyframes lnks-page-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* the "message ready to copy" panel after a form opens the email app */
.status > div { display: grid; gap: var(--space-3); min-width: 0; flex: 1; }
.status textarea.field__input { width: 100%; font: 400 var(--text-sm-size)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--c-text); background: var(--c-bg); resize: vertical; }
.status .btn-row { margin: 0; }

/* ======================================================================
   Artist entrance (lnks-artist-enter.js): a black stage opens from the press, the artist rises in behind in
   black and red, the name rolls in letter by letter like slot reels, then the artist page opens and the layer
   lifts off it. Only transform, opacity and clip-path animate.
   ====================================================================== */
html.ae-arriving body::before { content: ""; position: fixed; inset: 0; z-index: 2000; background: #050505; }
.ae { position: fixed; inset: 0; z-index: 2001; overflow: hidden; color: #FFFFFF; cursor: pointer; --x: 50vw; --y: 50vh;
  font-family: var(--font-sans); clip-path: circle(0 at var(--x) var(--y)); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
.ae.is-on { clip-path: circle(150vmax at var(--x) var(--y)); }
.ae__bg { position: absolute; inset: 0; background: radial-gradient(90% 80% at 30% 50%, #3A0207 0%, #120203 45%, #050505 100%); }
.ae__grid { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease .25s;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 56px); }
.ae.is-on .ae__grid { opacity: 1; }
/* the artist: right half on computers, the whole stage on phones; black and white, then the red wash over it */
.ae__photo { position: absolute; top: 0; bottom: 0; right: 0; width: min(50vw, 900px); clip-path: inset(100% 0 0 0);
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1) .15s; }
.ae__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) brightness(1.05);
  transform: scale(1.18); transition: transform 1.4s cubic-bezier(.16, .84, .24, 1) .15s, filter .7s ease .5s; }
/* the photo stays in its own colours: it rises in black and white and blooms into full colour; only its left edge
   melts into the stage so the name reads, and a red light catches the far side */
.ae__photo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2; background: #DE0412; box-shadow: 0 0 24px 4px rgba(222, 4, 18, .6);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.7, 0, .2, 1) .2s; }
.ae__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 5, .85) 0%, rgba(5, 5, 5, .25) 22%, rgba(5, 5, 5, 0) 45%), linear-gradient(0deg, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, 0) 30%), radial-gradient(60% 50% at 100% 30%, rgba(222, 4, 18, .28), transparent 70%); }
.ae.is-set .ae__photo { clip-path: inset(0 0 0 0); }
.ae.is-set .ae__photo::before { transform: scaleY(1); }
.ae.is-set .ae__photo img { transform: scale(1); filter: none; }
.ae__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .85) 100%); pointer-events: none; }
.ae__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #EF848B 20%, #FFFFFF 50%, #EF848B 80%, transparent); box-shadow: 0 0 24px 4px rgba(222, 4, 18, .55); }
.ae.is-set .ae__scan { animation: ae-scan .9s cubic-bezier(.5, 0, .3, 1) .15s both; }
@keyframes ae-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }
/* the words */
.ae__copy { position: absolute; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-50%); }
.ae__tag { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 2vw, 24px); font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease .3s, transform .5s cubic-bezier(.2, .8, .2, 1) .3s; }
.ae__tag-word { color: rgba(255, 255, 255, .62); }
.ae__tag-rule { width: 32px; height: 1px; background: rgba(255, 255, 255, .45); }
.ae__tag-brand { color: #EF848B; }
.ae.is-set .ae__tag { opacity: 1; transform: none; }
.ae__name { margin: 0; display: grid; font-size: min(var(--fit, 11.5vw), 190px); font-weight: 800; line-height: .86; letter-spacing: -.035em; }
.ae__word { display: flex; }
.ae__word--2 { color: transparent; -webkit-text-stroke: 2px #FFFFFF; }
/* one letter = a window one line tall with a reel of seven copies behind it; the reel spins down into place */
.ae__ch { position: relative; display: inline-block; height: .86em; overflow: hidden; }
.ae__reel { display: flex; flex-direction: column; transform: translate3d(0, calc(-6 * .86em), 0);
  transition: transform calc(520ms * var(--s, 1) + var(--i) * 10ms) cubic-bezier(.22, .9, .18, 1) calc(200ms + var(--i) * 28ms); }
.ae__reel span { display: block; height: .86em; line-height: .86; }
.ae__reel span:not(.is-last) { opacity: .55; }
.ae.is-set .ae__reel { transform: translate3d(0, 0, 0); }
.ae__line { display: block; width: min(560px, 70%); height: 2px; margin: clamp(18px, 2.4vw, 30px) 0 14px; background: #DE0412; box-shadow: 0 0 18px rgba(222, 4, 18, .7);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.7, 0, .2, 1) .7s; }
.ae.is-set .ae__line { transform: scaleX(1); }
.ae__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
  opacity: 0; transition: opacity .4s ease .85s; }
.ae__meta b { color: #FFFFFF; font-weight: 800; }
.ae__no { font-variant-numeric: tabular-nums; color: #EF848B; }
.ae.is-set .ae__meta { opacity: 1; }
.ae__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.ae__bar i { position: absolute; inset: 0; background: #DE0412; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.35s cubic-bezier(.6, 0, .3, 1) .05s; }
.ae.is-set .ae__bar i { transform: scaleX(1); }
/* arriving: the layer is already complete, the letters spin on and away upwards, then it lifts off the page */
.ae--arrive, .ae--arrive * { transition: none !important; animation: none !important; }
.ae.ae--arrive { clip-path: inset(0 0 0 0); }   /* same shape at both ends, so the lift can animate */
.ae.ae--arrive.is-leaving { clip-path: inset(0 0 100% 0); transition: clip-path .65s cubic-bezier(.7, 0, .2, 1) .15s !important; }
.ae--arrive.is-leaving .ae__reel { transform: translate3d(0, calc(-6 * .86em), 0); transition: transform .55s cubic-bezier(.6, 0, .4, 1) calc(var(--i) * 25ms) !important; }
.ae--arrive.is-leaving .ae__reel span { opacity: 1; }
.ae--arrive.is-leaving .ae__photo img { transform: scale(1.08) translateY(-3%); transition: transform 1s cubic-bezier(.6, 0, .3, 1) !important; }
.ae--arrive.is-leaving .ae__tag, .ae--arrive.is-leaving .ae__meta { opacity: 0; transition: opacity .3s ease !important; }
@media (max-width: 767.98px) {
  .ae__photo { width: 100%; }
  .ae__photo::after { background: linear-gradient(180deg, rgba(5, 5, 5, 0) 35%, rgba(5, 5, 5, .7) 62%, #050505 92%), radial-gradient(70% 40% at 100% 20%, rgba(222, 4, 18, .25), transparent 70%); }
  .ae__photo::before { display: none; }
  .ae__copy { top: auto; bottom: 12vh; transform: none; }
  .ae__name { font-size: min(var(--fit-m, 15vw), 96px); }
  .ae__tag { letter-spacing: .2em; font-size: 11px; }
  .ae__meta { font-size: 11px; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) { .ae { display: none; } html.ae-arriving body::before { display: none; } }