/* ==========================================================================
   ARR Collectors — site-wide styles
   Covers: Home, Discography, Album details, Artists, Artist details,
   About, Contact. Builds on arr-discography.css's tokens & shelf/tile
   components — load this file INSTEAD of it (it includes everything).
   ========================================================================== */

   @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

   /* ---------- Tokens (same as arr-discography.css) ---------- */
   :root {
     --arr-bg: #121214; --arr-surface: #1A1A1D; --arr-surface-2: #1E1E22; --arr-surface-3: #24242A;
     --arr-active: #2A2A30; --arr-border: #26262B; --arr-border-2: #2E2E34;
     --arr-text: #F4F2EE; --arr-text-2: #D6D3CD; --arr-text-muted: #A9A6A0; --arr-text-faint: #8C8983;
     --arr-accent: #F2A93B; --arr-accent-hover: #FFC56B; --arr-on-accent: #1A1206;
     --lang-tamil: #C2410C; --lang-tamil-dot: #FB923C;
     --lang-hindi: #9D174D; --lang-hindi-dot: #F472B6;
     --lang-telugu: #0F766E; --lang-telugu-dot: #2DD4BF;
     --lang-malayalam: #4D7C0F; --lang-malayalam-dot: #A3E635;
     --lang-english: #1D4ED8; --lang-english-dot: #93C5FD;
     --lang-kannada: #6D28D9; --lang-kannada-dot: #C4B5FD;
     --lang-other: #3F3F46; --lang-other-dot: #A9A6A0;
     --arr-font-display: "Bricolage Grotesque", system-ui, sans-serif;
     --arr-font-body: "DM Sans", system-ui, sans-serif;
     --arr-radius-lg: 14px; --arr-radius: 12px; --arr-radius-sm: 10px;
     --arr-gap: 18px; --arr-gutter: clamp(16px, 3vw, 40px); --arr-sidebar-w: 260px;
     --arr-pick-w: 280px; --arr-pick-h: 380px; --arr-tile-lg: 220px; --arr-tile: 180px;
   }
   
   *, *::before, *::after { box-sizing: border-box; }
   body.arr { margin: 0; background: var(--arr-bg); color: var(--arr-text); font-family: var(--arr-font-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
   .arr a { color: var(--arr-accent); text-decoration: none; }
   .arr a:hover { color: var(--arr-accent-hover); }
   .arr :focus-visible { outline: 2px solid var(--arr-accent); outline-offset: 2px; border-radius: 6px; }
   .arr img { display: block; max-width: 100%; }
   
   /* ---------- App shell + sidebar (unchanged from arr-discography.css) ---------- */
   .arr-app { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
   .arr-main { flex: 999 1 560px; min-width: 0; padding: 40px var(--arr-gutter) 64px; display: flex; flex-direction: column; gap: 44px; }
   .arr-sidebar { flex: 1 1 240px; max-width: var(--arr-sidebar-w); background: var(--arr-surface); border-right: 1px solid var(--arr-border); padding: 28px 16px 32px; display: flex; flex-direction: column; gap: 6px; }
   .arr-brand { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 18px; }
   .arr .arr-brand, .arr .arr-brand:hover { color: var(--arr-text); }
   .arr-brand__mark { font-family: var(--arr-font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
   .arr-brand__sub { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arr-accent); }
   .arr-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-bottom: 10px; background: var(--arr-surface-3); border-radius: var(--arr-radius-sm); color: var(--arr-text-muted); }
   .arr-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--arr-text); font: inherit; font-size: 14px; }
   .arr-search input::placeholder { color: var(--arr-text-muted); }
   .arr-nav-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--arr-radius-sm); font-size: 15px; }
   .arr .arr-nav-link { color: #E4E1DB; }
   .arr .arr-nav-link:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-nav-link.is-active, .arr .arr-nav-link[aria-current="page"] { background: var(--arr-active); color: var(--arr-text); font-weight: 600; }
   .arr-nav-link.is-active svg, .arr-nav-link[aria-current="page"] svg { stroke: var(--arr-accent); }
   .arr-nav-link svg { width: 18px; height: 18px; flex: none; }
   .arr-nav-heading { padding: 22px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--arr-text-faint); }
   .arr-nav-sub { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; }
   .arr .arr-nav-sub { color: var(--arr-text-2); }
   .arr .arr-nav-sub:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-nav-sub.is-active { background: var(--arr-active); color: var(--arr-text); }
   .arr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tile-bg, var(--lang-other)); }
   
   /* ---------- Page header & tabs ---------- */
   .arr-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
   .arr-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arr-accent); }
   .arr-title { margin: 6px 0 0; font-family: var(--arr-font-display); font-weight: 800; font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1; }
   .arr-lede { margin: 10px 0 0; color: var(--arr-text-muted); max-width: 640px; }
   .arr-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--arr-surface-2); border-radius: var(--arr-radius); }
   .arr-tab { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 600 14px var(--arr-font-body); cursor: pointer; }
   .arr .arr-tab { color: var(--arr-text-2); }
   .arr .arr-tab:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-tab.is-active, .arr .arr-tab[aria-selected="true"] { background: var(--arr-accent); color: var(--arr-on-accent); }
   .arr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
   .arr-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--arr-border-2); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; background: transparent; }
   .arr .arr-chip { color: var(--arr-text-2); }
   .arr .arr-chip:hover { border-color: var(--arr-text-muted); color: var(--arr-text); }
   .arr .arr-chip.is-active { background: var(--arr-text); border-color: var(--arr-text); color: var(--arr-bg); }
   
   /* ---------- Sections & shelves ---------- */
   .arr-section { display: flex; flex-direction: column; gap: 14px; }
   .arr-section__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
   .arr-section__title { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 700; }
   .arr .arr-section__title, .arr .arr-section__title:hover { color: var(--arr-text); }
   a.arr-section__title::after { content: ""; width: 8px; height: 8px; margin-left: 6px; border-right: 2.4px solid var(--arr-text-muted); border-bottom: 2.4px solid var(--arr-text-muted); transform: rotate(-45deg); }
   .arr-section__meta { font-size: 13px; color: var(--arr-text-muted); }
   .arr-shelf { display: flex; gap: var(--arr-gap); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #3a3a40 transparent; }
   .arr-shelf > * { scroll-snap-align: start; }
   .arr-shelf::-webkit-scrollbar { height: 8px; }
   .arr-shelf::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 8px; }
   .arr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--arr-tile), 1fr)); gap: 28px var(--arr-gap); }
   
   /* ---------- Language / era colour modifiers ---------- */
   .lang-tamil { --tile-bg: var(--lang-tamil); --tile-dot: var(--lang-tamil-dot); }
   .lang-hindi { --tile-bg: var(--lang-hindi); --tile-dot: var(--lang-hindi-dot); }
   .lang-telugu { --tile-bg: var(--lang-telugu); --tile-dot: var(--lang-telugu-dot); }
   .lang-malayalam { --tile-bg: var(--lang-malayalam); --tile-dot: var(--lang-malayalam-dot); }
   .lang-english { --tile-bg: var(--lang-english); --tile-dot: var(--lang-english-dot); }
   .lang-kannada { --tile-bg: var(--lang-kannada); --tile-dot: var(--lang-kannada-dot); }
   .lang-other { --tile-bg: var(--lang-other); --tile-dot: var(--lang-other-dot); }
   .era-1 { --tile-bg: #3F3F46; } .era-2 { --tile-bg: #C2410C; } .era-3 { --tile-bg: #B45309; }
   .era-4 { --tile-bg: #8A5A0B; } .era-5 { --tile-bg: #4D7C0F; } .era-6 { --tile-bg: #0F766E; }
   .era-7 { --tile-bg: #1D4ED8; } .era-8 { --tile-bg: #6D28D9; } .era-9 { --tile-bg: #9D174D; }
   
   /* ---------- Pick / era / tile cards (from arr-discography.css) ---------- */
   .arr-pick { position: relative; flex: 0 0 var(--arr-pick-w); height: var(--arr-pick-h); padding: 20px; border-radius: var(--arr-radius-lg); background: var(--tile-bg, var(--lang-other)); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease; }
   .arr .arr-pick, .arr .arr-pick:hover { color: #FFFFFF; }
   .arr-pick:hover { transform: translateY(-3px); }
   .arr-pick > * { position: relative; z-index: 1; }
   .arr-pick__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
   .arr-pick__word { font-family: var(--arr-font-display); font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -0.04em; }
   .arr-pick__caption { display: flex; flex-direction: column; gap: 3px; }
   .arr-pick__eyebrow { font-size: 12px; font-weight: 700; opacity: .85; }
   .arr-pick__name { font-size: 17px; font-weight: 700; }
   .arr-pick__desc { font-size: 13px; opacity: .85; }
   .arr-pick__img { position: absolute !important; inset: 0; z-index: 0 !important; width: 100%; height: 100%; object-fit: cover; }
   
   .arr-tile { flex: 0 0 var(--arr-tile); width: var(--arr-tile); display: flex; flex-direction: column; gap: 10px; }
   .arr .arr-tile, .arr .arr-tile:hover { color: var(--arr-text); }
   .arr-tile--lg { flex-basis: var(--arr-tile-lg); width: var(--arr-tile-lg); }
   .arr-tile__art { position: relative; width: var(--arr-tile); height: var(--arr-tile); padding: 14px; border-radius: var(--arr-radius); background: var(--tile-bg, var(--lang-other)); color: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease, box-shadow .2s ease; }
   .arr-tile--lg .arr-tile__art { width: var(--arr-tile-lg); height: var(--arr-tile-lg); padding: 16px; }
   .arr-tile:hover .arr-tile__art { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
   .arr-tile__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-tile__tag { position: relative; display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
   .arr-tile__word { position: relative; font-family: var(--arr-font-display); font-weight: 800; font-size: 26px; line-height: 0.98; letter-spacing: -0.025em; }
   .arr-tile--lg .arr-tile__word { font-size: 36px; }
   .arr-tile__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .arr-tile__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .arr-tile__sub { font-size: 13px; color: var(--arr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .arr-tile--outline .arr-tile__art { background: var(--arr-surface-2); border: 1px solid var(--arr-border-2); color: var(--arr-text); }
   .arr-tile--outline .arr-tile__tag span:first-child { color: var(--tile-dot, var(--arr-text-muted)); }
   .arr-tile--outline .arr-tile__tag span:last-child { color: var(--arr-text-muted); }
   
   .arr-era { flex: 0 0 200px; height: 120px; padding: 14px 16px; border-radius: var(--arr-radius); background: var(--tile-bg, var(--lang-other)); display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease; }
   .arr .arr-era, .arr .arr-era:hover { color: #FFFFFF; }
   .arr-era:hover { transform: translateY(-3px); }
   .arr-era__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; opacity: .9; text-transform: uppercase; }
   .arr-era__years { font-family: var(--arr-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
   
   /* ---------- Hero (home / album / about) ---------- */
   .arr-hero { display: flex; flex-wrap: wrap; gap: 32px; }
   .arr-hero--split { align-items: center; }
   .arr-hero__image, .arr-hero__photo { flex: 1 1 280px; min-height: 300px; border-radius: 18px; background: var(--arr-surface-2); border: 1px dashed var(--arr-border-2); display: flex; align-items: center; justify-content: center; color: var(--arr-text-faint); font-size: 13px; text-align: center; padding: 16px; }
   .arr-hero__photo { border-radius: 50%; aspect-ratio: 1; flex: 0 0 220px; width: 220px; height: 220px; min-height: 0; }
   .arr-hero__panel { flex: 2 1 480px; min-width: 0; min-height: 440px; border-radius: 18px; color: #FFFFFF; position: relative; overflow: hidden; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
   .arr-hero__top { position: relative; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
   .arr-hero__word { position: relative; font-family: var(--arr-font-display); font-weight: 800; font-size: clamp(48px, 6vw, 96px); line-height: 0.88; letter-spacing: -0.045em; }
   .arr-hero__sub { position: relative; font-size: 17px; font-weight: 600; opacity: .92; }
   .arr-hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
   .arr-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; }
   .arr .arr-btn--light { background: #FFFFFF; color: #141413; }
   .arr .arr-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.7); color: #FFFFFF; font-weight: 600; }
   .arr .arr-btn--accent { background: var(--arr-accent); color: var(--arr-on-accent); }
   .arr .arr-btn--accent:hover { background: var(--arr-accent-hover); }
   
   /* ---------- Stat tiles ---------- */
   .arr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
   .arr-stat { background: var(--arr-surface-2); border-radius: var(--arr-radius); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
   .arr-stat__num { font-family: var(--arr-font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; color: var(--arr-accent); }
   .arr-stat__label { color: var(--arr-text-2); font-size: 14px; }
   
   /* ---------- Legacy / colour-block tiles (awards, eras) ---------- */
   .arr-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
   .arr-block { height: 220px; border-radius: var(--arr-radius); color: #FFFFFF; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
   .arr-block__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
   .arr-block__num { font-family: var(--arr-font-display); font-weight: 800; font-size: 72px; line-height: 0.85; letter-spacing: -0.04em; }
   .arr-block__desc { font-size: 14px; }
   
   /* ---------- Steps (how-to) ---------- */
   .arr-steps { display: flex; flex-direction: column; gap: 12px; }
   .arr-step { display: flex; gap: 18px; align-items: center; background: var(--arr-surface-2); border-radius: var(--arr-radius); padding: 20px 22px; }
   .arr .arr-step, .arr .arr-step:hover { color: var(--arr-text); }
   .arr-step__num { font-family: var(--arr-font-display); font-weight: 800; font-size: 32px; color: var(--arr-accent); width: 48px; flex: none; }
   .arr-step__text { font-size: 16px; }
   
   /* ---------- Welcome card ---------- */
   .arr-card { background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
   .arr-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arr-accent); }
   .arr-card__title { margin: 0; font-family: var(--arr-font-display); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
   .arr-card p { margin: 0; color: var(--arr-text-2); font-size: 16px; line-height: 1.6; }
   
   /* ---------- Quote banner ---------- */
   .arr-quote { border-radius: 18px; color: #FFFFFF; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 14px; }
   .arr-quote p { margin: 0; font-family: var(--arr-font-display); font-weight: 700; font-size: clamp(22px, 3vw, 44px); line-height: 1.15; letter-spacing: -0.02em; max-width: 900px; }
   .arr-quote cite { font-size: 15px; font-weight: 600; opacity: 0.9; font-style: normal; }
   
   /* ---------- Prose (about story) ---------- */
   .arr-prose { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
   .arr-prose p { margin: 0; color: var(--arr-text-2); font-size: 16px; line-height: 1.75; }
   .arr-prose p:first-child { color: var(--arr-text); font-size: 17px; }
   .arr-prose em { font-style: italic; color: inherit; }
   .arr-prose strong { color: var(--arr-accent); font-weight: 600; font-style: normal; }
   
   /* ---------- Timeline / thanks cards (about) ---------- */
   .arr-timeline { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
   .arr-timeline__item { flex: 0 0 220px; background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
   .arr-timeline__year { font-family: var(--arr-font-display); font-weight: 800; font-size: 30px; color: var(--arr-accent); letter-spacing: -0.02em; }
   .arr-timeline__text { font-size: 14px; color: var(--arr-text-2); line-height: 1.5; }
   .arr-thanks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
   .arr-thanks__item { background: var(--arr-surface-2); border-radius: var(--arr-radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
   .arr-thanks__who { font-size: 13px; font-weight: 700; color: var(--arr-accent); }
   .arr-thanks__text { font-size: 14px; color: var(--arr-text-2); line-height: 1.55; }
   
   /* ---------- Avatars (artists) ---------- */
   .arr-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
   .arr-avatar-card { display: flex; flex-direction: column; gap: 10px; text-align: center; }
   .arr .arr-avatar-card, .arr .arr-avatar-card:hover { color: var(--arr-text); }
   .arr-avatar { width: 100%; aspect-ratio: 1; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--tile-bg, var(--lang-other)); }
   .arr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-avatar__initials { font-family: var(--arr-font-display); font-weight: 800; font-size: 44px; letter-spacing: -0.02em; }
   .arr-avatar-card__name { font-size: 15px; font-weight: 600; }
   .arr-avatar-card__type { font-size: 12px; color: var(--arr-text-muted); }
   
   .arr-profile { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
   .arr-profile__photo { flex: 0 0 180px; width: 180px; height: 180px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 44px rgba(0,0,0,.4); font-family: var(--arr-font-display); font-weight: 800; font-size: 56px; position: relative; overflow: hidden; background: var(--tile-bg, var(--lang-other)); }
   .arr-profile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-profile__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
   .arr-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
   .arr-social__link { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--brand, var(--arr-text-muted)); color: var(--brand, var(--arr-text-2)); font-size: 13px; font-weight: 600; }
   
   /* ---------- Tables (tracklist, credits) ---------- */
   .arr-table-wrap { overflow-x: auto; background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); }
   .arr-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
   .arr-table th { text-align: left; padding: 14px 18px; font-weight: 600; color: var(--arr-text-faint); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
   .arr-table th:first-child, .arr-table td:first-child { padding-left: 18px; }
   .arr-table th:last-child, .arr-table td:last-child { padding-right: 18px; }
   .arr-table td { padding: 14px 8px; border-top: 1px solid var(--arr-border); color: var(--arr-text-2); }
   .arr-table td.is-strong { font-weight: 600; color: var(--arr-text); }
   .arr-play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--arr-active); color: var(--arr-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
   
   /* ---------- Cover / pressing detail bits ---------- */
   .arr-cover-btn { flex: 0 0 300px; width: 300px; height: 300px; border: 0; border-radius: 16px; color: #FFFFFF; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,.45); background: var(--tile-bg, var(--lang-other)); }
   .arr-cover-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-cover-btn__badge { position: absolute; right: 14px; top: 46px; font: 600 11px var(--arr-font-body); background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 999px; }
   .arr-lang-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
   .arr-pill { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--tile-bg, var(--lang-other)) 28%, var(--arr-surface-2)); color: var(--tile-dot, var(--arr-text)); }
   .arr-badge-owned { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--arr-on-accent); background: var(--arr-accent); padding: 4px 10px; border-radius: 999px; }
   .arr-release-card { background: var(--arr-surface); border: 1px solid var(--arr-border); border-radius: var(--arr-radius); overflow: hidden; display: flex; flex-direction: column; }
   .arr-release-card__art { height: 168px; color: #FFFFFF; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; background: var(--tile-bg, var(--lang-other)); }
   .arr-release-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
   .arr-release-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
   .arr-release-card dt { color: var(--arr-text-faint); }
   .arr-release-card dd { margin: 0; color: var(--arr-text-2); }
   
   /* ---------- Form (contact) ---------- */
   .arr-form-wrap { width: 100%; max-width: 640px; }
   .arr-form { display: flex; flex-direction: column; gap: 18px; }
   .arr-field { display: flex; flex-direction: column; gap: 6px; }
   .arr-field__label { font-size: 13px; font-weight: 600; color: var(--arr-text-2); }
   .arr-field input, .arr-field textarea, .arr-input { height: 46px; padding: 0 14px; border-radius: 10px; background: var(--arr-surface-2); border: 1px solid var(--arr-border-2); color: var(--arr-text); font: inherit; }
   .arr-field textarea { height: auto; padding: 12px 14px; resize: vertical; }
   .arr-field input::placeholder, .arr-field textarea::placeholder { color: var(--arr-text-faint); }
   .arr-field input:focus, .arr-field textarea:focus { outline: 2px solid var(--arr-accent); outline-offset: 1px; }
   .arr-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
   .arr-alert { border-radius: 10px; padding: 12px 16px; font-size: 14px; }
   .arr-alert--error { background: #351414; border: 1px solid #5B1F1F; color: #FCA5A5; }
   .arr-alert--success { background: #11301F; border: 1px solid #1F5B3A; color: #D6F9E4; display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 22px; }
   
   /* ---------- Pagination & footer ---------- */
   .arr-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
   .arr-pager a, .arr-pager span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 14px; font-weight: 600; }
   .arr .arr-pager a { color: var(--arr-text-2); background: var(--arr-surface-2); }
   .arr .arr-pager a:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-pager .is-current { background: var(--arr-accent); color: var(--arr-on-accent); }
   .arr-footer { border-top: 1px solid var(--arr-border); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--arr-text-faint); }
   
   /* ---------- Back link ---------- */
   .arr-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
   
   /* ---------- Responsive ---------- */
   @media (max-width: 820px) {
     .arr-sidebar { max-width: none; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--arr-border); padding: 16px; }
     .arr-sidebar__group { display: flex; gap: 6px; overflow-x: auto; }
     .arr-sidebar__group .arr-nav-sub { flex: none; background: var(--arr-surface-3); }
     .arr-main { padding-top: 28px; gap: 36px; }
     .arr-hero, .arr-profile { align-items: flex-start; }
     .arr-hero__photo, .arr-profile__photo { flex-basis: 140px; width: 140px; height: 140px; }
     :root { --arr-pick-w: 240px; --arr-pick-h: 320px; --arr-tile-lg: 180px; --arr-tile: 150px; }
     .arr-pick__word { font-size: 68px; }
     .arr-tile--lg .arr-tile__word { font-size: 28px; }
     .arr-hero__word { font-size: 48px; }
   }
   @media (prefers-reduced-motion: reduce) {
     .arr-pick, .arr-tile__art, .arr-era { transition: none; }
     .arr-pick:hover, .arr-tile:hover .arr-tile__art, .arr-era:hover { transform: none; }
   }
   
   
   /* ==========================================================================
      SITE INTEGRATION (merged from the former arr-shell.css)
      Makes the design work inside this PHP site: sticky sidebar + mobile top bar,
      hero/quote backgrounds, release tiles & shelves, section headings, pager,
      no-scan placeholder tiles. Page-specific rules live in the page's own CSS file.
      ========================================================================== */
   
   /* ---------- Page shell ---------- */
   html { scroll-behavior: smooth; }
   /* style.css makes <html> a centring flex column (for the old layout); the sidebar shell needs normal block flow */
   html:has(body.arr) { display: block; width: 100%; min-height: 0; }
   body.arr {
     display: block; align-items: stretch; width: auto; max-width: none; margin: 0;
     min-height: 100vh; overflow-x: clip; text-align: left;
     background: var(--arr-bg); color: var(--arr-text);
     font-family: var(--arr-font-body); font-size: 15px; line-height: 1.45;
   }
   .arr h1, .arr h2, .arr h3 { letter-spacing: normal; }
   .arr-app { width: 100%; align-items: flex-start; }
   .arr-main { align-self: stretch; }
   .arr-main > section, .arr-main > div { width: auto; margin-bottom: 0; }
   /* style.css styles bare <section> (centred flex column); neutralise inside the shell */
   :where(.arr) section { width: auto; margin-bottom: 0; align-items: stretch; }
   .arr-main > .arr-footer { margin-top: auto; }
   
   /* ---------- Sidebar: sticky on desktop ---------- */
   .arr-sidebar {
     position: sticky; top: 0; align-self: flex-start; z-index: 30;
     height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden;
     min-width: 0; scrollbar-width: thin; scrollbar-color: #3a3a40 transparent;
   }
   .arr-sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
   .arr-sidebar__top .arr-brand { padding-bottom: 14px; }
   .arr-sidebar__nav { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
   .arr-sidebar__extra { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 8px; border-top: 1px solid var(--arr-border); padding-top: 4px; }
   .arr-sidebar__social { margin-top: auto; padding: 18px 12px 0; display: flex; gap: 12px; }
   .arr .arr-sidebar__social a { color: var(--arr-text-muted); display: inline-flex; }
   .arr .arr-sidebar__social a:hover { color: var(--arr-accent); }
   .arr-sidebar__social svg { width: 18px; height: 18px; fill: currentColor; }
   .arr-menu-btn { display: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--arr-surface-3); cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 4px; margin-bottom: 14px; }
   .arr-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--arr-text); transition: transform .2s ease, opacity .2s ease; }
   .arr-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
   .arr-menu-btn.active span:nth-child(2) { opacity: 0; }
   .arr-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
   
   /* ---------- Search in sidebar ---------- */
   .arr-search { margin-bottom: 4px; }
   .arr-search:focus-within { box-shadow: 0 0 0 2px var(--arr-accent); }
   .arr-search input[type="search"] { height: 100%; padding: 0; box-shadow: none; }
   
   /* ---------- Hero / quote backgrounds & imagery ---------- */
   .arr-hero__panel, .arr-quote { background: var(--tile-bg, var(--lang-other)); }
   .arr-hero__image, .arr-hero__photo { position: relative; overflow: hidden; align-self: stretch; }
   .arr-hero__photo { align-self: auto; }
   .arr-hero__image img, .arr-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-hero__image.has-img, .arr-hero__photo.has-img { border-style: solid; border-color: var(--arr-border); padding: 0; }
   .arr-hero--split .arr-hero__image { align-self: stretch; }
   .arr-prose-figure { margin: 0; border-radius: var(--arr-radius); overflow: hidden; background: var(--arr-surface-2); max-width: 760px; }
   .arr-prose-figure img { width: 100%; height: auto; }
   .arr .arr-signature { max-width: 200px; height: auto; filter: invert(1) grayscale(.3); }
   .arr-dropcap::first-letter { float: left; font-family: var(--arr-font-display); font-weight: 800; font-size: 3.4em; line-height: .85; padding: 4px 10px 0 0; color: var(--arr-accent); }
   .arr-empty { color: var(--arr-text-muted); padding: 40px 0; text-align: center; }
   .arr-notice { color: var(--arr-text-muted); font-size: 14px; }
   
   /* ---------- Menu pill (audio) sits above content ---------- */
   .music-control { z-index: 1000; }
   
   /* ---------- Mobile: sidebar becomes a top bar ---------- */
   @media (max-width: 820px) {
     .arr-sidebar { position: relative; height: auto; max-height: none; overflow: visible; align-self: stretch; flex-basis: 100%; }
     .arr-menu-btn { display: flex; }
     .arr-sidebar__top .arr-brand { padding-bottom: 14px; }
     .arr-sidebar__nav { display: none; padding-bottom: 8px; }
     .arr-sidebar__nav.open { display: flex; }
     .arr-sidebar__social { display: none; }
     .arr-sidebar__extra { margin-top: 0; }
   }
   
   /* ---------- 4. Sidebar ---------- */
   .arr-search {
     display: flex;
     align-items: center;
     gap: 10px;
     height: 40px;
     padding: 0 12px;
     margin-bottom: 4px;
     background: var(--arr-surface-3);
     border-radius: var(--arr-radius-sm);
     color: var(--arr-text-muted);
   }
   .arr-search:focus-within { box-shadow: 0 0 0 2px var(--arr-accent); }
   .arr-search input[type="search"] {
     flex: 1;
     min-width: 0;
     height: 100%;
     padding: 0;
     background: transparent;
     border: 0;
     outline: none;
     box-shadow: none;
     color: var(--arr-text);
     font: inherit;
     font-size: 14px;
   }
   .arr-search input::placeholder { color: var(--arr-text-muted); }
   
   .arr .arr-clear {
     display: inline-block;
     padding: 2px 12px 6px;
     font-size: 13px;
     color: var(--arr-text-muted);
   }
   .arr .arr-clear:hover { color: var(--arr-accent-hover); }
   
   .arr-nav-heading {
     padding: 18px 12px 6px;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--arr-text-faint);
   }
   
   .arr-sidebar__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   
   .arr-nav-sub {
     display: flex;
     align-items: center;
     gap: 10px;
     min-height: 36px;
     padding: 0 12px;
     border-radius: 8px;
     font-size: 14px;
   }
   .arr .arr-nav-sub { color: var(--arr-text-2); }
   .arr .arr-nav-sub:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-nav-sub.is-active,
   .arr .arr-nav-sub[aria-current="page"] { background: var(--arr-active); color: var(--arr-text); font-weight: 600; }
   
   .arr-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex: none;
     background: var(--tile-bg, var(--lang-other));
   }
   /* language dots use the lighter shade so they read on dark */
   [class*="lang-"] > .arr-dot,
   .arr-dot[class*="lang-"] { background: var(--tile-dot, var(--lang-other-dot)); }
   
   /* A–Z letters: compact squares */
   .arr-sidebar__group--letters { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
   .arr-sidebar__group--letters .arr-nav-sub {
     min-width: 36px;
     height: 36px;
     min-height: 0;
     padding: 0 8px;
     justify-content: center;
     background: var(--arr-surface-3);
     font-weight: 600;
   }
   .arr-sidebar__group--letters .arr-nav-sub--wide { padding: 0 12px; }
   
   /* ---------- 5. Page header & tabs ---------- */
   .arr-header {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
     justify-content: space-between;
     gap: 20px;
   }
   .arr-eyebrow {
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--arr-accent);
   }
   .arr-title {
     margin: 6px 0 0;
     font-family: var(--arr-font-display);
     font-weight: 800;
     font-size: clamp(36px, 4vw, 52px);
     letter-spacing: -0.025em !important;
     line-height: 1;
     color: var(--arr-text);
   }
   .arr-lede { margin: 10px 0 0; color: var(--arr-text-muted); font-size: 15px; }
   
   .arr-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
     padding: 4px;
     background: var(--arr-surface-2);
     border-radius: var(--arr-radius);
   }
   .arr-tab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 36px;
     padding: 0 14px;
     border: 0;
     border-radius: 9px;
     background: transparent;
     font: 600 14px var(--arr-font-body);
     cursor: pointer;
   }
   .arr .arr-tab { color: var(--arr-text-2); }
   .arr .arr-tab:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-tab.is-active,
   .arr .arr-tab[aria-current="page"] { background: var(--arr-accent); color: var(--arr-on-accent); }
   
   .arr-results { margin: -20px 0 0; font-size: 13px; color: var(--arr-text-muted); }
   
   .arr-empty { margin: 60px 0; text-align: center; font-size: 18px; color: var(--arr-text-muted); }
   
   /* Filter chips (compilation formats, year bands …) */
   .arr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
   .arr-chip {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     height: 34px;
     padding: 0 14px;
     border: 1px solid var(--arr-border-2);
     border-radius: 999px;
     font-size: 13px;
     font-weight: 500;
   }
   .arr .arr-chip { color: var(--arr-text-2); }
   .arr .arr-chip:hover { border-color: var(--arr-text-muted); color: var(--arr-text); }
   .arr .arr-chip.is-active,
   .arr .arr-chip[aria-current="page"] { background: var(--arr-text); border-color: var(--arr-text); color: var(--arr-bg); }
   
   /* ---------- 6. Sections & shelves ---------- */
   /* beats the site-wide `section { align-items:center; margin-bottom … }` rule */
   .arr .arr-section { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; margin: 0; }
   
   .arr-section__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   .arr-section__title {
     margin: 0;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-family: var(--arr-font-body);
     font-size: 20px;
     font-weight: 700;
     line-height: 1.2;
     color: var(--arr-text);
   }
   .arr-section__meta { font-size: 13px; color: var(--arr-text-muted); }
   
   /* Horizontally scrolling shelf. Padding + negative margin leave room for the
      hover lift, shadow and focus ring, which overflow-x:auto would otherwise clip. */
   .arr-shelf {
     display: flex;
     gap: var(--arr-gap);
     overflow-x: auto;
     padding: 10px 6px 28px;
     margin: -10px -6px -14px;
     scroll-snap-type: x proximity;
     scrollbar-width: thin;
     scrollbar-color: #3a3a40 transparent;
   }
   .arr-shelf > * { scroll-snap-align: start; }
   .arr-shelf::-webkit-scrollbar { height: 8px; }
   .arr-shelf::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 8px; border: 0; }
   .arr-shelf::-webkit-scrollbar-track { background: transparent; }
   
   /* Wrapping grid (year / letter / language groups) */
   .arr-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--arr-tile), 1fr));
     gap: 28px var(--arr-gap);
   }
   .arr-grid .arr-tile { flex: none; width: auto; }
   .arr-grid .arr-tile__art { width: 100%; height: auto; aspect-ratio: 1; }
   
   /* ---------- 7. Language colour modifiers ---------- */
   .lang-tamil     { --tile-bg: var(--lang-tamil);     --tile-dot: var(--lang-tamil-dot); }
   .lang-hindi     { --tile-bg: var(--lang-hindi);     --tile-dot: var(--lang-hindi-dot); }
   .lang-telugu    { --tile-bg: var(--lang-telugu);    --tile-dot: var(--lang-telugu-dot); }
   .lang-malayalam { --tile-bg: var(--lang-malayalam); --tile-dot: var(--lang-malayalam-dot); }
   .lang-english   { --tile-bg: var(--lang-english);   --tile-dot: var(--lang-english-dot); }
   .lang-kannada   { --tile-bg: var(--lang-kannada);   --tile-dot: var(--lang-kannada-dot); }
   .lang-other     { --tile-bg: var(--lang-other);     --tile-dot: var(--lang-other-dot); }
   
   /* ---------- 8. Big "pick" cards (optional, curated highlights) ---------- */
   .arr-pick {
     position: relative;
     flex: 0 0 var(--arr-pick-w);
     height: var(--arr-pick-h);
     padding: 20px;
     border-radius: var(--arr-radius-lg);
     background: var(--tile-bg, var(--lang-other));
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .2s ease;
   }
   .arr .arr-pick,
   .arr .arr-pick:hover { color: #FFFFFF; }
   .arr-pick:hover { transform: translateY(-3px); }
   
   .arr-pick > * { position: relative; z-index: 1; }
   .arr-pick__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
   .arr-pick__word { font-family: var(--arr-font-display); font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -0.04em; }
   .arr-pick__caption { display: flex; flex-direction: column; gap: 3px; }
   .arr-pick__eyebrow { font-size: 12px; font-weight: 700; opacity: .85; }
   .arr-pick__name    { font-size: 17px; font-weight: 700; }
   .arr-pick__desc    { font-size: 13px; opacity: .85; }
   
   .arr-pick__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
   .arr-pick--photo::after {
     content: "";
     position: absolute;
     inset: 40% 0 0 0;
     background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
     z-index: 0;
   }
   
   /* ---------- 9. Release tiles ---------- */
   .arr-tile {
     flex: 0 0 var(--arr-tile);
     width: var(--arr-tile);
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .arr .arr-tile,
   .arr .arr-tile:hover { color: var(--arr-text); }
   .arr-tile--lg { flex-basis: var(--arr-tile-lg); width: var(--arr-tile-lg); }
   
   .arr-tile__art {
     position: relative;
     width: var(--arr-tile);
     height: var(--arr-tile);
     padding: 14px;
     border-radius: var(--arr-radius);
     background: var(--tile-bg, var(--lang-other));
     color: #FFFFFF;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .2s ease, box-shadow .2s ease;
   }
   .arr-tile--lg .arr-tile__art { width: var(--arr-tile-lg); height: var(--arr-tile-lg); padding: 16px; }
   .arr-tile:hover .arr-tile__art,
   .arr-tile:focus-visible .arr-tile__art { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
   
   /* A real cover fills the square. (Tiles with a cover don't render the
      typographic tag/word markup at all — the PHP chooses one or the other.) */
   .arr-tile__art img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .arr-tile__tag {
     position: relative;
     display: flex;
     justify-content: space-between;
     gap: 8px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }
   .arr-tile__word {
     position: relative;
     font-family: var(--arr-font-display);
     font-weight: 800;
     font-size: 26px;
     line-height: 0.98;
     letter-spacing: -0.025em;
     overflow-wrap: anywhere;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
     line-clamp: 4;
     overflow: hidden;
   }
   .arr-tile--lg .arr-tile__word { font-size: 34px; }
   
   /* Vinyl-ring decoration */
   .arr-ring {
     position: absolute;
     right: -35%;
     bottom: -35%;
     width: 90%;
     aspect-ratio: 1;
     border-radius: 50%;
     border: 2px solid rgba(255,255,255,.2);
     box-shadow: inset 0 0 0 18px transparent, inset 0 0 0 20px rgba(255,255,255,.2);
     pointer-events: none;
   }
   .arr-ring::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: rgba(255,255,255,.2); }
   
   .arr-tile__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .arr-tile__name {
     font-size: 15px;
     font-weight: 600;
     line-height: 1.25;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     overflow: hidden;
   }
   .arr-tile__sub {
     font-size: 13px;
     color: var(--arr-text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   /* Outline variant */
   .arr-tile--outline .arr-tile__art { background: var(--arr-surface-2); border: 1px solid var(--arr-border-2); color: var(--arr-text); }
   .arr-tile--outline .arr-tile__tag span:first-child { color: var(--tile-dot, var(--arr-text-muted)); }
   .arr-tile--outline .arr-tile__tag span:last-child  { color: var(--arr-text-muted); }
   
   /* ---------- 10. Era colours (sidebar dots), oldest → newest ---------- */
   .era-1  { --tile-bg: #71717A; }  /* 1967–1990 */
   .era-2  { --tile-bg: #EA580C; }  /* 1991–1995 */
   .era-3  { --tile-bg: #D97706; }  /* 1996–2000 */
   .era-4  { --tile-bg: #CA8A04; }  /* 2001–2005 */
   .era-5  { --tile-bg: #65A30D; }  /* 2006–2010 */
   .era-6  { --tile-bg: #0D9488; }  /* 2011–2015 */
   .era-7  { --tile-bg: #2563EB; }  /* 2016–2020 */
   .era-8  { --tile-bg: #7C3AED; }  /* 2021–2025 */
   .era-9  { --tile-bg: #DB2777; }  /* 2026–2030 */
   .era-10 { --tile-bg: #E11D48; }  /* 2031–2035 */
   
   /* Optional large era tiles */
   .arr-era {
     flex: 0 0 200px;
     height: 120px;
     padding: 14px 16px;
     border-radius: var(--arr-radius);
     background: var(--tile-bg, var(--lang-other));
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .2s ease;
   }
   .arr .arr-era, .arr .arr-era:hover { color: #FFFFFF; }
   .arr-era:hover { transform: translateY(-3px); }
   .arr-era__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; opacity: .9; text-transform: uppercase; }
   .arr-era__years { font-family: var(--arr-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; }
   
   /* ---------- 12. Pagination ---------- */
   .arr-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
   .arr-pager a,
   .arr-pager span {
     min-width: 36px;
     height: 36px;
     padding: 0 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 9px;
     font-size: 14px;
     font-weight: 600;
   }
   .arr .arr-pager a { color: var(--arr-text-2); background: var(--arr-surface-2); }
   .arr .arr-pager a:hover { background: var(--arr-surface-3); color: var(--arr-text); }
   .arr .arr-pager .is-current { background: var(--arr-accent); color: var(--arr-on-accent); }
   .arr-pager__gap { color: var(--arr-text-faint); min-width: 0 !important; padding: 0 2px !important; }
   
   /* ---------- 13. Responsive ---------- */
   @media (max-width: 820px) {
     :root {
       --arr-pick-w: 240px; --arr-pick-h: 320px;
       --arr-tile-lg: 180px; --arr-tile: 150px;
     }
     .arr-nav-heading { padding-top: 12px; }
     /* Filter lists become a single scrolling row of chips on phones */
     .arr-sidebar__group,
     .arr-sidebar__group--letters { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 2px 0 6px; scrollbar-width: thin; }
     .arr-sidebar__group .arr-nav-sub { flex: none; background: var(--arr-surface-3); white-space: nowrap; }
   
     .arr-main { padding-top: 28px; gap: 32px; }
     .arr-results { margin-top: -16px; }
     .arr-tabs { width: 100%; }
     .arr-tab { flex: 1 1 auto; justify-content: center; }
     .arr-comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
     .arr-pick__word { font-size: 68px; }
     .arr-tile--lg .arr-tile__word { font-size: 28px; }
   }
   
   @media (max-width: 420px) {
     .arr-tab i { display: none; }
     .arr-grid { gap: 22px 12px; }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .arr-pick, .arr-tile__art, .arr-era, .arr-comp { transition: none; }
     .arr-pick:hover, .arr-tile:hover .arr-tile__art, .arr-era:hover, .arr-comp:hover { transform: none; }
   }
   
   /* ---- Release cards: no-scan placeholder + pills ---- */
   .card-image-wrapper.is-ph { aspect-ratio: 16 / 9; background: var(--tile-bg, var(--lang-other)); }
   .card-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px 16px; background: var(--tile-bg, var(--lang-other)); color: #fff; overflow: hidden; }
   .card-ph::before { content: ""; position: absolute; right: -28px; top: -28px; width: 130px; height: 130px; border-radius: 50%; border: 16px solid rgba(255,255,255,.14); }
   .card-ph::after  { content: ""; position: absolute; right: 22px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.14); }
   .card-ph { justify-content: space-between; }
   .card-ph__tag { position: relative; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
   .card-ph__fmt { position: relative; font-family: var(--arr-font-display); font-weight: 800; font-size: 26px; line-height: .98; letter-spacing: -0.025em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
   .card-image-wrapper.is-ph { aspect-ratio: 4 / 3; }
   .card-ph { padding: 16px; }
   .all-card .card-ph__tag { display: none; }        /* All Releases cards already carry format + status pills */
   .all-card .card-ph { justify-content: flex-end; padding-top: 44px; }
   .card-ph__fmt { font-size: 24px; }
   
   /* style.css gives bare <section> flex-direction:column; Design's row layouts need to say so */
   .arr-hero, .arr-profile { flex-direction: row; }
   
   .arr-block { background: var(--tile-bg, var(--lang-other)); }
   .arr .arr-social__link { color: var(--brand, var(--arr-text-2)); }
   
   /* Section heading row: [dot] Title ........ count (Design's space-between pushed a lone title to the middle) */
   .arr-section__head { justify-content: flex-start; }
   .arr-section__head > .arr-section__meta { margin-left: auto; }
   
   /* Tables: header and cells share the same padding so columns line up under their headings */
   .arr-table th { padding: 14px 8px; }
   .arr-table th:first-child, .arr-table td:first-child { padding-left: 18px; }
   .arr-table th:last-child, .arr-table td:last-child { padding-right: 18px; }
   
   /* About: story text wraps around the photo */
   .arr-prose-figure { max-width: 420px; }
   .arr-prose-figure img { display: block; max-height: 520px; width: 100%; object-fit: cover; object-position: top; }
   @media (min-width: 800px) {
     .arr-prose { display: block; max-width: none; }
     .arr-prose > p { margin: 0 0 22px; max-width: none; }
     .arr-prose > .arr-prose-figure { float: right; width: min(36%, 380px); margin: 4px 0 20px clamp(24px, 3vw, 48px); }
     .arr-prose::after { content: ""; display: block; clear: both; }
   }
   
   /* About: gratitude as original paragraphs; centred closing block */
   .arr-prose--full { max-width: 820px; }
   .arr-prose--full p:first-child { color: var(--arr-text-2); font-size: 16px; }
   .arr-quote--center { align-items: center; text-align: center; }
   .arr-quote--center .arr-signature { margin: 0 auto; }
   .arr-quote--center .arr-quote__text { font-family: var(--arr-font-body); font-weight: 400; font-size: 16px; line-height: 1.6; opacity: .92; max-width: 62ch; margin: 0 auto; }
   
   /* About: story text wraps around two photos (right at top, left mid-story) */
   .arr-prose-figure img { max-height: 420px; }
   @media (min-width: 800px) {
     .arr-prose > .arr-prose-figure { width: min(34%, 320px); }
     .arr-prose > .arr-prose-figure--right { float: right; margin: 4px 0 20px clamp(24px, 3vw, 48px); }
     .arr-prose > .arr-prose-figure--left { float: left; margin: 4px clamp(24px, 3vw, 48px) 20px 0; }
   }
   
   /* About: photo sizes/wrap match the original page (300px photos, 28px gutters) */
   .arr-prose { max-width: 1000px; }
   .arr-prose p { font-size: 17px; line-height: 1.75; }
   .arr-prose > .arr-prose-figure img { max-height: none; width: 100%; object-fit: cover; border-radius: 56px; }
   .arr-prose > .arr-prose-figure { background: none; border-radius: 56px; }
   @media (min-width: 800px) {
     .arr-prose > .arr-prose-figure { width: 300px; max-width: 45%; }
     .arr-prose > .arr-prose-figure--right { margin: 0 0 20px 28px; }
     .arr-prose > .arr-prose-figure--left { margin: 0 28px 20px 0; }
     .arr-prose > .arr-prose-figure--right img { height: 240px; }
     .arr-prose > .arr-prose-figure--left img { height: 450px; }
   }
   
   /* About: Deep Gratitude follows the original (centred heading, 1000px column, bold roles) */
   .arr-thanks-sec { max-width: 1000px; }
   .arr-thanks-sec .arr-section__title { text-align: center; justify-content: center; margin: 27px 0 20px; font-size: clamp(24px, 2.4vw, 30px); }
   .arr-prose--full { max-width: 1000px; }
   .arr-prose--full p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
   .arr-prose--full strong { color: var(--arr-text); font-weight: 700; }
   
   /* About: centre the story and gratitude columns */
   .arr-prose, .arr-prose--full, .arr-thanks-sec { margin-left: auto; margin-right: auto; width: 100%; }
   
   /* About: centre the Deep Gratitude paragraphs under the heading */
   .arr-thanks-sec .arr-prose--full { text-align: center; }
   .arr-thanks-sec .arr-prose--full p { margin-left: auto; margin-right: auto; max-width: 820px; }
   
   /* About: Deep Gratitude text in accent colour, italic */
   .arr-thanks-sec .arr-prose--full p, .arr-thanks-sec .arr-prose--full strong { color: var(--arr-accent); font-style: italic; }
   
   /* About: Deep Gratitude role words (mother, sister, …) stand out in white, bold, upright */
   .arr-thanks-sec .arr-prose--full strong { color: var(--arr-text); font-style: normal; font-weight: 700; }
   
   /* About: Deep Gratitude — text white italic, role words orange bold italic */
   .arr-thanks-sec .arr-prose--full p { color: var(--arr-text); font-style: italic; }
   .arr-thanks-sec .arr-prose--full strong { color: var(--arr-accent); font-style: italic; font-weight: 700; }
   
   /* Unique colour per language (tile = background, dot = text/dot accent) */
   :root {
     --lang-chinese: #7C1D1D; --lang-chinese-dot: #F47B7B;
     --lang-czech: #8E592F; --lang-czech-dot: #F4B17B;
     --lang-danish: #8F6819; --lang-danish-dot: #F4CC7B;
     --lang-dutch: #7C711D; --lang-dutch-dot: #F4E77B;
     --lang-french: #838E2F; --lang-french-dot: #E7F47B;
     --lang-german: #4E8F19; --lang-german-dot: #B1F47B;
     --lang-greek: #327C1D; --lang-greek-dot: #96F47B;
     --lang-italian: #2F8E2F; --lang-italian-dot: #7BF47B;
     --lang-japanese: #198F33; --lang-japanese-dot: #7BF496;
     --lang-korean: #1D7C47; --lang-korean-dot: #7BF4B1;
     --lang-marathi: #2F8E6E; --lang-marathi-dot: #7BF4CC;
     --lang-norwegian: #19828F; --lang-norwegian-dot: #7BE7F4;
     --lang-persian: #1D5C7C; --lang-persian-dot: #7BCCF4;
     --lang-polish: #2F598E; --lang-polish-dot: #7BB1F4;
     --lang-russian: #19198F; --lang-russian-dot: #7B7BF4;
     --lang-sanskrit: #321D7C; --lang-sanskrit-dot: #967BF4;
     --lang-spanish: #6E2F8E; --lang-spanish-dot: #CC7BF4;
     --lang-swedish: #82198F; --lang-swedish-dot: #E77BF4;
     --lang-taiwanese: #7C1D71; --lang-taiwanese-dot: #F47BE7;
     --lang-turkish: #8E2F6E; --lang-turkish-dot: #F47BCC;
     --lang-urdu: #8F1933; --lang-urdu-dot: #F47B96;
   }
   .lang-chinese { --tile-bg: var(--lang-chinese); --tile-dot: var(--lang-chinese-dot); }
   .lang-czech { --tile-bg: var(--lang-czech); --tile-dot: var(--lang-czech-dot); }
   .lang-danish { --tile-bg: var(--lang-danish); --tile-dot: var(--lang-danish-dot); }
   .lang-dutch { --tile-bg: var(--lang-dutch); --tile-dot: var(--lang-dutch-dot); }
   .lang-french { --tile-bg: var(--lang-french); --tile-dot: var(--lang-french-dot); }
   .lang-german { --tile-bg: var(--lang-german); --tile-dot: var(--lang-german-dot); }
   .lang-greek { --tile-bg: var(--lang-greek); --tile-dot: var(--lang-greek-dot); }
   .lang-italian { --tile-bg: var(--lang-italian); --tile-dot: var(--lang-italian-dot); }
   .lang-japanese { --tile-bg: var(--lang-japanese); --tile-dot: var(--lang-japanese-dot); }
   .lang-korean { --tile-bg: var(--lang-korean); --tile-dot: var(--lang-korean-dot); }
   .lang-marathi { --tile-bg: var(--lang-marathi); --tile-dot: var(--lang-marathi-dot); }
   .lang-norwegian { --tile-bg: var(--lang-norwegian); --tile-dot: var(--lang-norwegian-dot); }
   .lang-persian { --tile-bg: var(--lang-persian); --tile-dot: var(--lang-persian-dot); }
   .lang-polish { --tile-bg: var(--lang-polish); --tile-dot: var(--lang-polish-dot); }
   .lang-russian { --tile-bg: var(--lang-russian); --tile-dot: var(--lang-russian-dot); }
   .lang-sanskrit { --tile-bg: var(--lang-sanskrit); --tile-dot: var(--lang-sanskrit-dot); }
   .lang-spanish { --tile-bg: var(--lang-spanish); --tile-dot: var(--lang-spanish-dot); }
   .lang-swedish { --tile-bg: var(--lang-swedish); --tile-dot: var(--lang-swedish-dot); }
   .lang-taiwanese { --tile-bg: var(--lang-taiwanese); --tile-dot: var(--lang-taiwanese-dot); }
   .lang-turkish { --tile-bg: var(--lang-turkish); --tile-dot: var(--lang-turkish-dot); }
   .lang-urdu { --tile-bg: var(--lang-urdu); --tile-dot: var(--lang-urdu-dot); }
   
   
   /* ---------- Discography group headers (year / letter / language / category) ----------
      [accent bar] BIG TITLE ——————————— (count pill) */
   .arr-section--group { gap: 18px; }
   .arr-section--group > .arr-section__head {
     display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
     padding-bottom: 12px; margin-bottom: 2px;
   }
   .arr-section--group > .arr-section__head::before {          /* accent bar (years, letters, categories) */
     content: ""; order: 0; flex: none; width: 5px; height: 30px; border-radius: 3px; background: var(--arr-accent);
   }
   .arr-section--group > .arr-section__head:has(.arr-dot)::before { display: none; }   /* languages use their own colour */
   .arr-section--group > .arr-section__head > .arr-dot {        /* language colour -> the bar */
     order: 0; width: 5px; height: 30px; border-radius: 3px; flex: none;
   }
   .arr-section--group .arr-section__title {
     order: 1; flex: none; font-family: var(--arr-font-display, var(--arr-font-body));
     font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1;
   }
   .arr-section--group > .arr-section__head::after {            /* hairline fills the space between title and count */
     content: ""; order: 2; flex: 1 1 auto; height: 1px; min-width: 16px;
     background: linear-gradient(90deg, var(--arr-border-2), transparent);
   }
   .arr-section--group > .arr-section__head > .arr-section__meta {
     order: 3; margin-left: 0; flex: none; white-space: nowrap;
     font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
     color: var(--arr-text-2); background: var(--arr-surface-2); border: 1px solid var(--arr-border-2);
     padding: 5px 11px; border-radius: 99px;
   }
   @media (max-width: 560px) {
     .arr-section--group > .arr-section__head { gap: 10px; }
     .arr-section--group > .arr-section__head::before, .arr-section--group > .arr-section__head > .arr-dot { height: 24px; }
     .arr-section--group > .arr-section__head > .arr-section__meta { font-size: 11px; padding: 4px 9px; }
   }
   
   /* ---------- Home hero: the awards sit inside the orange tile, above the name ---------- */
   .arr-hero__panel { gap: 28px; }
   .arr-hero__awards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
   .arr-hero__award { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; border-left: 1px solid rgba(255,255,255,.35); min-width: 0; }
   .arr-hero__award:first-child { padding-left: 0; border-left: 0; }
   .arr-hero__award-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
   .arr-hero__award-num { font-family: var(--arr-font-display); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: .95; letter-spacing: -0.04em; }
   .arr-hero__award-num--text { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; align-self: flex-start; padding-top: 4px; }
   .arr-hero__award-desc { font-size: 13px; line-height: 1.35; opacity: .92; }
   @media (max-width: 700px) {
     .arr-hero__awards { grid-template-columns: 1fr; gap: 14px; }
     .arr-hero__award { padding: 0 0 14px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.3); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
     .arr-hero__award:last-child { border-bottom: 0; padding-bottom: 0; }
     .arr-hero__award-label { flex: 0 0 100%; }
     .arr-hero__award-num { font-size: 34px; }
     .arr-hero__award-num--text { font-size: 22px; }
   }
   
   /* Home-page quote on a single line: the text scales with the banner width (about 34 character widths of the
      available space); phones wrap normally. */
   .arr-quote--oneline { container-type: inline-size; }
   .arr-quote--oneline p { max-width: none; white-space: nowrap; font-size: clamp(16px, calc((100cqw - 2 * clamp(28px, 5vw, 64px)) / 34), 44px); }
   @media (max-width: 640px) {
     .arr-quote--oneline p { white-space: normal; font-size: clamp(20px, 5.5vw, 28px); }
   }
   
   /* Home hero: breathing room between the stacked blocks (the name's line-height is below 1, so it touched its neighbours) */
   .arr-hero__sub { margin: 0 0 10px; }
   .arr-hero__word { padding: 6px 0 6px; }
   .arr-hero__awards { margin-top: 26px; }
   .arr-hero__actions { margin-top: 26px; }
   
   /* Home hero: the content follows the top row at the same rhythm as the rest, instead of being pushed to the bottom of a taller tile */
   .arr-hero__panel { min-height: 0; justify-content: flex-start; }

/* Admin-only Edit button on discography tiles and compilation cards (sits under the text) */
.arr-edit-btn { display: inline-flex; align-items: center; align-self: flex-start; width: fit-content; gap: 5px; height: 28px; margin-top: 8px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--arr-text-2, #C9C9CF); border: 1px solid var(--arr-border-2, #2E2E34); font: 700 12px/1 var(--arr-font-body, inherit); letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.arr .arr-edit-btn { color: var(--arr-text-2, #C9C9CF); }
.arr .arr-edit-btn:hover, .arr-edit-btn:focus-visible { background: var(--arr-accent, #E8590C); border-color: transparent; color: #FFFFFF; outline: none; }

/* ---------- Events grid ---------- */
.arr-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--arr-gap, 18px); }
.arr-event { display: flex; flex-direction: column; background: var(--arr-surface, #1A1A1D); border: 1px solid var(--arr-border-2, #2E2E34); border-radius: var(--arr-radius, 12px); overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.arr-event:hover, .arr-event:focus-visible { transform: translateY(-3px); border-color: var(--arr-accent, #F2A93B); outline: none; }
.arr-event__art { aspect-ratio: 4 / 5; background: var(--arr-surface-3, #24242A); }
.arr-event__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arr-event__body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 14px 18px; text-align: center; flex: 1; }
.arr-event__date { font: 800 16px/1.2 var(--arr-font-display, inherit); letter-spacing: .04em; text-transform: uppercase; color: var(--arr-text, #F4F2EE); }
.arr-event__title { font-size: 14px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--arr-text-2, #D6D3CD); }
.arr-event__city { margin-top: auto; padding: 3px 10px; border-radius: 4px; background: var(--arr-text, #F4F2EE); color: #111; font: 700 11px/1.3 var(--arr-font-body, inherit); text-transform: uppercase; letter-spacing: .03em; }
.arr-events-section { display: flex; flex-direction: column; gap: 18px; }
.arr-events-heading { margin: 0; font: 800 clamp(22px,2.4vw,30px)/1.1 var(--arr-font-display, inherit); letter-spacing: -.02em; padding-left: 14px; border-left: 4px solid var(--arr-accent, #F2A93B); }

/* Member account box in the sidebar (header.php) */
.arr-account { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; margin-top: auto; font-size: 13px; }
.arr-account__who { display: flex; align-items: center; gap: 8px; color: var(--arr-text-2); min-width: 0; }
.arr-account__who img { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.arr-account__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arr-account__note { color: var(--arr-accent); font-size: 12px; }
.arr-account__link { color: var(--arr-text-muted); text-decoration: none; }
.arr-account__link:hover { color: var(--arr-text); }
.arr-account__signin { display: inline-flex; justify-content: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--arr-border-2); color: var(--arr-text); text-decoration: none; font-weight: 600; }
.arr-account__signin:hover { border-color: var(--arr-accent); color: var(--arr-accent); }
   .arr-account + .arr-sidebar__social { margin-top: 0; }
   @media (max-width: 820px) { .arr-sidebar__nav:not(.open) ~ .arr-account { display: none; } .arr-account { margin-top: 0; padding: 4px 12px 12px; } }
   .arr a.arr-account__signin { color: var(--arr-text); }
   .arr a.arr-account__signin:hover { color: var(--arr-accent); }
   .arr a.arr-account__link { color: var(--arr-text-muted); }
   .arr a.arr-account__link:hover { color: var(--arr-text); }