/* ─────────────────────────────────────────────────────────────────────
 * alexandruanastasiu.com — main stylesheet
 * Sursă canonică: docs/visual/alexandruanastasiu.com/Homepage.html (lines 10-747)
 * Spec: docs/superpowers/specs/2026-05-26-design-system-spec.md v1.0
 * Generated 2026-05-26 (Faza 4.1.1)
 *
 * REGULĂ: niciun token nou fără spec amendment la v1.1.
 * ───────────────────────────────────────────────────────────────────── */

  :root {
    --ink: #0c0b0a;
    --ink-2: #131210;
    --ink-3: #1c1a16;
    --bone: #f4efe6;
    --bone-dim: #e7e0d2;
    --muted: #8a8276;
    --muted-2: #555049;
    --steel: #6f93b4;
    --steel-hot: #a8c5dd;
    --scene: #b5462f;
    --line: rgba(244, 239, 230, 0.10);
    --line-strong: rgba(244, 239, 230, 0.22);
    --display: 'Geist', system-ui, sans-serif;
    --sans: 'Geist', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--ink);
    color: var(--bone);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11", "calt";
  }
  /* tabular numerals everywhere they appear */
  .nav__lang, .hero__meta, .hero__bottom,
  .marquee, .section-head__num, .section-head__meta,
  .concert__date, .concert__tag, .album__year,
  .featured__opus, .featured__movements,
  .featured__credits, .press__img::after,
  .foot__bottom, .mode__no {
    font-variant-numeric: tabular-nums;
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--scene); color: var(--bone); }

  /* ─── Top nav ────────────────────────────────────────────── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: space-between;
    transition: background 0.4s ease, padding 0.3s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled {
    background: rgba(12, 11, 10, 0.85);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: 14px 48px;
    border-bottom-color: var(--line);
  }
  .nav__brand {
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.005em;
    display: flex; align-items: baseline; gap: 10px;
  }
  .nav__brand em { font-style: normal; font-weight: 300; color: var(--bone); }
  .nav__brand .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--scene); display: inline-block;
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(181, 70, 47, 0.6);
    animation: pulse 2.8s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
  .nav__links {
    display: flex; gap: 38px;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    font-family: var(--sans); font-weight: 400;
  }
  .nav__links a { position: relative; padding: 4px 0; color: var(--bone-dim); transition: color 0.2s; }
  .nav__links a:hover { color: var(--bone); }
  .nav__links a::after {
    content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 0;
    background: var(--scene); transition: width 0.3s ease;
  }
  .nav__links a:hover::after { width: 100%; }
  .nav__lang {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  }
  .nav__lang span { color: var(--muted); }
  .nav__lang .active { color: var(--bone); }
  .nav__lang button {
    background: none; border: none; color: inherit; cursor: pointer;
    font: inherit; padding: 0;
  }
  /* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤1100px */
  .nav__toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 7px;
    margin-left: 18px;
    background: none; border: none; cursor: pointer;
  }
  .nav__toggle span {
    display: block; width: 100%; height: 1.5px;
    background: var(--bone);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  #site-nav.nav--open .nav__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  #site-nav.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
  #site-nav.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ─── Hero ──────────────────────────────────────────────── */
  .hero {
    position: relative; height: var(--hero-h, 100vh); min-height: var(--hero-min, 760px);
    overflow: hidden;
    display: flex; align-items: flex-end;
    padding: 0 48px 96px;
  }
  /* Hero height presets (hero_height option, phase 44) — set the vars the base
   * .hero / .entity-hero rules read. No option → natural default (no class). */
  .hero--h-compact { --hero-h: 56vh; --hero-min: 440px; }
  .hero--h-medium  { --hero-h: 72vh; --hero-min: 560px; }
  .hero--h-tall    { --hero-h: 88vh; --hero-min: 680px; }
  .hero--h-full    { --hero-h: 100vh; --hero-min: 760px; }
  .entity-hero--h-compact { --ehero-h: 44vh; --ehero-min: 360px; --ehero-min-m: 400px; }
  .entity-hero--h-medium  { --ehero-h: 60vh; --ehero-min: 480px; --ehero-min-m: 520px; }
  .entity-hero--h-tall    { --ehero-h: 80vh; --ehero-min: 600px; --ehero-min-m: 640px; }
  .entity-hero--h-full    { --ehero-h: 100vh; --ehero-min: 720px; --ehero-min-m: 88vh; }
  .hero__bg {
    position: absolute; inset: 0;
  }
  .hero__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.6, 0, 0.2, 1);
    will-change: opacity;
  }
  .hero__slide.active { opacity: 1; }
  .hero__slide__img {
    position: absolute; inset: -8% -2%;
    background-position: center 35%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.55) contrast(1.08) saturate(0.85);
    transform: scale(1.0);
    transition: transform 8s ease-out;
    will-change: transform;
  }
  .hero__slide.active .hero__slide__img { transform: scale(1.08); }
  .hero__veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(12,11,10,0.70) 0%, rgba(12,11,10,0.10) 22%, rgba(12,11,10,0.20) 50%, rgba(12,11,10,0.95) 100%),
      linear-gradient(95deg, rgba(12,11,10,0.55) 0%, rgba(12,11,10,0.0) 35%, rgba(12,11,10,0.0) 65%, rgba(12,11,10,0.35) 100%),
      radial-gradient(120% 80% at 70% 40%, rgba(111, 147, 180, 0.06), transparent 60%);
  }
  .hero__grain {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  }
  .hero__inner {
    position: relative; z-index: 2; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 80px; align-items: end;
  }
  .hero__eyebrow {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--bone-dim);
    display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
  }
  .hero__eyebrow .bar { width: 36px; height: 1px; background: var(--scene); }
  .hero__eyebrow .badge {
    border: 1px solid var(--line-strong); padding: 5px 10px;
    color: var(--scene); letter-spacing: 0.22em;
  }
  .hero__title {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(56px, 8.4vw, 148px);
    line-height: 0.88;
    letter-spacing: -0.05em;
    color: var(--bone);
  }
  .hero__title em {
    font-style: normal;
    font-weight: 400;
    color: var(--bone);
    /* keep the family weight contrast quiet — italic feel via subtle indent */
  }
  .hero__sub {
    display: flex; align-items: center; gap: 18px;
    margin-top: 32px;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(18px, 1.9vw, 26px);
    letter-spacing: -0.01em;
    color: var(--bone-dim);
  }
  .hero__sub span em { color: var(--steel-hot); font-weight: 500; font-style: normal; }
  .hero__sub .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--scene); flex: 0 0 4px; opacity: 0.7; }
  .hero__meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-dim);
    text-align: left;
    border-left: 1px solid var(--line-strong);
    padding-left: 22px;
    padding-bottom: 6px;
  }
  .hero__meta dl { display: grid; grid-template-rows: auto; row-gap: 14px; }
  .hero__meta .label { color: var(--muted); font-size: 9.5px; display: block; margin-bottom: 2px; letter-spacing: 0.2em; }
  .hero__meta .val { color: var(--bone); font-size: 12px; letter-spacing: 0.08em; display: block; }

  .hero__bottom {
    position: absolute; left: 48px; right: 48px; bottom: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--muted);
    z-index: 2;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .hero__scroll {
    display: flex; align-items: center; gap: 12px;
    color: var(--bone-dim);
  }
  .hero__scroll .line {
    width: 1px; height: 28px; background: var(--bone-dim);
    animation: scrollLine 2.4s ease-in-out infinite;
    transform-origin: top;
  }
  @keyframes scrollLine {
    0%,100% { transform: scaleY(0.3); opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 1; }
  }

  .hero__caption {
    position: absolute; left: 48px; bottom: 88px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone-dim);
    z-index: 3;
    display: flex; align-items: center; gap: 12px;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
    pointer-events: none;
  }
  .hero__caption.show { opacity: 1; transform: translateY(0); }
  .hero__caption .bar { width: 18px; height: 1px; background: var(--scene); }

  .hero__slider-ui {
    position: absolute; top: 80px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex; align-items: center; gap: 14px;
  }
  .hero__counter {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
  }
  .hero__counter .cur { color: var(--bone); }
  .hero__counter .total { color: var(--muted); }
  .hero__ticks { display: flex; gap: 6px; }
  .hero__tick {
    width: 18px; height: 1px; background: var(--line-strong);
    border: none; padding: 0; cursor: pointer;
    position: relative; overflow: hidden;
    transition: background 0.4s;
  }
  .hero__tick::after {
    content: ''; position: absolute; inset: 0;
    background: var(--bone);
    transform: scaleX(0); transform-origin: left;
  }
  .hero__tick.active::after {
    transform: scaleX(1);
    transition: transform 6s linear;
  }
  .hero__nav { display: flex; gap: 4px; margin-left: 4px; }
  .hero__nav button {
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    color: var(--bone-dim);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.3s;
    font-family: var(--mono); font-size: 12px;
    padding: 0;
  }
  .hero__nav button:hover { background: transparent; color: var(--bone); border: none; }

  /* ─── Generic section scaffolding ────────────────────────── */
  section { position: relative; }
  .container { max-width: 1480px; margin: 0 auto; padding: 0 48px; }
  .section-head {
    display: grid; grid-template-columns: minmax(180px, auto) 1fr minmax(220px, auto); gap: 60px;
    align-items: end; padding-top: 120px; padding-bottom: 56px;
    border-bottom: 1px solid var(--line);
  }
  .section-head__num {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
  }
  .section-head__num::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .section-head__title {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1; letter-spacing: -0.035em;
    color: var(--bone);
  }
  .section-head__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .section-head__meta {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    text-align: right; line-height: 1.8;
  }
  .section-head__meta strong { color: var(--bone-dim); font-weight: 400; }

  /* ─── Three modes ────────────────────────────────────────── */
  .modes { padding-bottom: 120px; }
  .modes__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 0;
  }
  .mode {
    position: relative;
    padding: 44px 32px 36px;
    border-right: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.5s ease;
  }
  .mode:last-child { border-right: none; }
  .mode:hover { background: var(--ink-2); }
  .mode__no {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    color: var(--muted); text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .mode__no .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); transition: background 0.4s; }
  .mode:hover .mode__no .dot { background: var(--scene); }
  .mode__img {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    overflow: hidden; margin: 22px 0 28px;
    background: var(--ink-2);
  }
  .mode__img img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.88) saturate(0.92);
    transition: transform 0.9s ease, filter 0.6s ease;
  }
  .mode:hover .mode__img img { transform: scale(1.05); filter: brightness(1) saturate(1); }
  .mode__img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,11,10,0) 50%, rgba(12,11,10,0.6) 100%);
    pointer-events: none;
  }
  .mode__title {
    font-family: var(--display); font-size: 56px; line-height: 1;
    font-weight: 200; letter-spacing: -0.045em;
    margin-bottom: 20px;
    display: flex; align-items: baseline; gap: 8px;
  }
  .mode__title em { font-style: normal; font-weight: 500; }
  .mode__title .dot { color: var(--scene); font-weight: 400; }
  .mode__body {
    font-size: 14.5px; color: var(--bone-dim); line-height: 1.65;
    max-width: 38ch; margin-bottom: 36px;
  }
  .mode__body em { color: var(--bone); font-style: normal; font-weight: 400; }
  .mode__cta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--bone); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 8px;
    transition: border-color 0.3s, gap 0.3s;
  }
  .mode:hover .mode__cta { border-color: var(--scene); gap: 18px; }
  .mode__cta .arrow { transition: transform 0.3s; }
  .mode:hover .mode__cta .arrow { transform: translateX(4px); }

  /* ─── Featured work ──────────────────────────────────────── */
  .featured {
    background: var(--ink-2);
    padding: 0 0 140px;
    border-top: 1px solid var(--line);
    position: relative;
  }
  .featured::before {
    content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 120px;
    background: linear-gradient(180deg, var(--scene), transparent);
  }
  .featured__grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
    align-items: center; margin-top: 60px;
  }
  .featured__visual {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  }
  .featured__visual img {
    width: 100%; height: 100%; object-fit: cover;
    will-change: transform;
    filter: contrast(1.05) brightness(0.9);
  }
  .featured__visual::after {
    content: 'OP. № 04 · 2025'; position: absolute; top: 24px; left: 24px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    color: var(--bone); background: rgba(12,11,10,0.7); backdrop-filter: blur(4px);
    padding: 9px 14px; border: 1px solid var(--line-strong);
  }
  .featured__opus {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 24px;
    display: flex; align-items: center; gap: 14px;
  }
  .featured__opus .bar { width: 28px; height: 1px; background: var(--scene); }
  .featured__title {
    font-family: var(--display); font-size: clamp(48px, 5.4vw, 88px);
    font-weight: 200; line-height: 0.95; letter-spacing: -0.045em;
    margin-bottom: 8px;
  }
  .featured__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .featured__sub {
    font-family: var(--display); font-weight: 300; font-size: 18px;
    color: var(--bone-dim); margin-bottom: 36px;
    letter-spacing: -0.01em;
  }
  .featured__body {
    font-size: 16px; line-height: 1.7; color: var(--bone-dim);
    max-width: 50ch; margin-bottom: 36px;
  }
  .featured__body strong { color: var(--bone); font-weight: 500; }
  .featured__movements {
    list-style: none; margin-bottom: 40px;
  }
  .featured__movements li {
    display: grid; grid-template-columns: 50px 1fr auto;
    gap: 24px; padding: 18px 0; border-top: 1px solid var(--line);
    align-items: baseline;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
    color: var(--bone-dim);
    transition: color 0.3s;
  }
  .featured__movements li:hover { color: var(--bone); }
  .featured__movements li:last-child { border-bottom: 1px solid var(--line); }
  .featured__movements .roman { color: var(--scene); letter-spacing: 0.18em; font-size: 11px; }
  .featured__movements .name { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: var(--bone); }
  .featured__movements .dur { color: var(--muted); }
  .featured__credits {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 32px; border-top: 1px solid var(--line);
  }
  .featured__credits .role { display: block; font-size: 10px; }
  .featured__credits .name { color: var(--bone); font-family: var(--display); font-weight: 400; font-size: 16px; text-transform: none; letter-spacing: -0.01em; margin-top: 6px; display: block; }

  /* ─── Concerts ───────────────────────────────────────────── */
  .concerts { padding-bottom: 140px; }
  .concerts__list {
    margin-top: 0;
  }
  .concert {
    display: grid;
    grid-template-columns: 150px 1.2fr 1fr 200px 100px;
    gap: 40px;
    padding: 30px 12px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 0.4s ease, padding 0.4s ease;
    cursor: pointer;
    position: relative;
  }
  .concert::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
    background: var(--scene); transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .concert:hover { background: var(--ink-2); padding-left: 32px; padding-right: 24px; }
  .concert:hover::before { width: 18px; }
  .concert__date {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
    color: var(--bone-dim); text-transform: uppercase;
  }
  .concert__date .day { display: block; font-family: var(--display); font-weight: 200; font-size: 52px; color: var(--bone); letter-spacing: -0.05em; line-height: 1; margin-bottom: 6px; }
  .concert__date .my { color: var(--muted); }
  .concert__work {
    font-family: var(--display); font-weight: 300; font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--bone);
  }
  .concert__work em { font-style: normal; font-weight: 500; }
  .concert__work .composer {
    display: block; font-family: var(--sans); font-size: 12px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px; font-style: normal;
  }
  .concert__venue {
    font-size: 14px; color: var(--bone-dim); line-height: 1.5;
  }
  .concert__venue .city {
    display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
  }
  .concert__cond {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
    text-align: right;
  }
  .concert__cond strong {
    display: block; color: var(--bone); font-family: var(--display); font-size: 14px;
    letter-spacing: -0.01em; text-transform: none; margin-top: 4px; font-style: normal; font-weight: 400;
  }
  .concert__tag {
    justify-self: end;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
    color: var(--scene); text-transform: uppercase;
    border: 1px solid currentColor; padding: 7px 11px;
    transition: background 0.3s, color 0.3s;
  }
  .concert:hover .concert__tag { background: var(--scene); color: var(--bone); border-color: var(--scene); }
  .concert__tag.past { color: var(--muted-2); }

  /* ─── Pull quote ─────────────────────────────────────────── */
  .quote {
    position: relative; height: 90vh; min-height: 600px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 48px;
  }
  .quote__bg {
    position: absolute; inset: -10% 0 -10% 0;
    background: url('../img/quote-bg.jpg') center 40%/cover no-repeat;
    filter: brightness(0.45) contrast(1.1) saturate(0.7);
    will-change: transform;
  }
  .quote__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--ink) 0%, rgba(12,11,10,0.35) 30%, rgba(12,11,10,0.35) 70%, var(--ink) 100%);
  }
  .quote__inner {
    position: relative; z-index: 2; max-width: 1100px;
  }
  .quote__mark {
    width: 36px; height: 1px; background: var(--scene);
    display: block; margin: 0 auto 56px;
    opacity: 0.9;
  }
  .quote__text {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(34px, 4.4vw, 76px);
    line-height: 1.1; letter-spacing: -0.035em;
    color: var(--bone);
  }
  .quote__text em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .quote__attr {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 48px;
  }
  .quote__attr .src { color: var(--bone-dim); display: block; margin-top: 6px; }

  /* Editor options (phase 39): height presets + no-background variant.
   * Defined after base .quote so single-class modifiers win on source order. */
  .quote--h-auto {
    height: auto; min-height: 0;
    padding-top: clamp(96px, 12vw, 168px);
    padding-bottom: clamp(96px, 12vw, 168px);
  }
  .quote--h-compact  { height: 55vh;  min-height: 380px; }
  .quote--h-standard { height: 90vh;  min-height: 600px; }
  .quote--h-tall     { height: 100vh; min-height: 720px; }
  /* No background image — solid dark panel (bg div + veil are not rendered). */
  .quote--noimg { background: var(--ink); }

  /* ─── Discography ────────────────────────────────────────── */
  .disco { padding-bottom: 140px; }
  .disco__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
    margin-top: 56px;
  }
  .album {
    cursor: pointer;
    transition: transform 0.4s ease;
  }
  .album:hover { transform: translateY(-6px); }
  .album__cover {
    position: relative; aspect-ratio: 1; overflow: hidden;
    background: var(--ink-2);
    margin-bottom: 20px;
  }
  .album__cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s ease, filter 0.3s ease;
    filter: contrast(1.02);
  }
  .album:hover .album__cover img { transform: scale(1.04); }
  .album__cover::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(12,11,10,0.5) 100%);
    pointer-events: none;
  }
  .album__play {
    position: absolute; bottom: 16px; right: 16px;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(244, 239, 230, 0.95); color: var(--ink);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(10px) scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2;
    font-size: 12px;
    padding-left: 3px;
  }
  .album:hover .album__play { opacity: 1; transform: translateY(0) scale(1); }
  .album__year {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); margin-bottom: 6px;
  }
  .album__title {
    font-family: var(--display); font-weight: 400; font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.1; color: var(--bone);
  }
  .album__label {
    font-size: 12px; color: var(--bone-dim); margin-top: 4px;
    font-family: var(--mono); letter-spacing: 0.08em;
  }

  /* ─── Press strip ────────────────────────────────────────── */
  .press {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 100px 0;
  }
  .press__grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
    align-items: center;
  }
  .press__img {
    aspect-ratio: 4 / 3; overflow: hidden;
    position: relative;
  }
  .press__img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.9); }
  .press__img::after {
    content: 'TVR CULTURAL · AUG 2024';
    position: absolute; bottom: 20px; left: 20px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    color: var(--bone); background: rgba(12,11,10,0.7);
    padding: 8px 12px; border: 1px solid var(--line-strong);
  }
  .press__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 24px;
    display: flex; align-items: center; gap: 12px;
  }
  .press__eyebrow .bar { width: 24px; height: 1px; background: var(--scene); }
  .press__text {
    font-family: var(--display); font-weight: 200; font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.3; letter-spacing: -0.03em; color: var(--bone); margin-bottom: 32px;
  }
  .press__text em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .press__cta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone-dim);
    display: inline-flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 8px;
    transition: gap 0.3s, color 0.3s, border-color 0.3s;
  }
  .press__cta:hover { gap: 20px; color: var(--bone); border-color: var(--scene); }

  /* ─── Footer ─────────────────────────────────────────────── */
  .foot {
    background: var(--ink);
    padding: 100px 0 36px;
  }
  .foot__top {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 60px; padding-bottom: 80px;
    border-bottom: 1px solid var(--line);
  }
  .foot__brand {
    font-family: var(--display); font-weight: 200; font-size: 48px; line-height: 1;
    letter-spacing: -0.04em; margin-bottom: 24px;
  }
  .foot__brand em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .foot__tag {
    font-size: 14px; color: var(--bone-dim); max-width: 32ch; line-height: 1.6;
    margin-bottom: 32px;
  }
  .foot__newsletter {
    display: flex; max-width: 360px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 10px;
  }
  .foot__newsletter input {
    flex: 1; background: none; border: none; color: var(--bone);
    font: inherit; font-family: var(--sans); font-size: 14px;
    padding: 6px 0;
  }
  .foot__newsletter input:focus { outline: none; }
  .foot__newsletter input::placeholder { color: var(--muted); }
  .foot__newsletter button {
    background: none; border: none; color: var(--bone); cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .foot__newsletter button:hover { color: var(--scene); }

  .foot__col h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 24px;
    font-weight: 400;
  }
  .foot__col ul { list-style: none; }
  .foot__col li { margin-bottom: 12px; }
  .foot__col a {
    font-family: var(--display); font-weight: 300; font-size: 16px;
    letter-spacing: -0.01em; color: var(--bone-dim);
    transition: color 0.3s;
  }
  .foot__col a:hover { color: var(--bone); }
  .foot__col p { font-size: 13px; color: var(--bone-dim); line-height: 1.7; }

  .foot__bottom {
    padding-top: 36px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    gap: 24px;
    flex-wrap: wrap;
  }
  .foot__bottom .signature em { font-style: italic; }
  .foot__bottom a { color: var(--muted); transition: color 0.3s; }
  .foot__bottom a:hover { color: var(--bone); }

  /* ─── Reveal anim ────────────────────────────────────────── */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ─── Responsive ────────────────────────────────────────── */
  @media (max-width: 1100px) {
    .nav { padding: 18px 24px; }
    .nav.scrolled { padding: 12px 24px; }
    .nav__toggle { display: flex; }
    .nav__lang { margin-left: auto; }
    .nav__links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; gap: 0;
      padding: 6px 24px 18px;
      background: rgba(12, 11, 10, 0.97);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      border-bottom: 1px solid var(--line);
      max-height: calc(100vh - 60px); overflow-y: auto;
      opacity: 0; transform: translateY(-10px); pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #site-nav.nav--open .nav__links { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav__links a { padding: 13px 0; font-size: 13px; letter-spacing: 0.14em; border-bottom: 1px solid var(--line); }
    .nav__links a:last-child { border-bottom: 0; }
    .nav__links a::after { display: none; }
    .hero { padding: 0 24px 60px; }
    .hero__bottom { left: 24px; right: 24px; }
    .container { padding: 0 24px; }
    .hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .hero__meta { text-align: left; border-left: 0; border-top: 1px solid var(--line-strong); padding: 16px 0 0; }
    .modes__grid { grid-template-columns: minmax(0, 1fr); }
    .mode { border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; }
    .featured__grid, .press__grid { grid-template-columns: 1fr; gap: 40px; }
    .disco__grid { grid-template-columns: repeat(2, 1fr); }
    .concert { grid-template-columns: 1fr; gap: 12px; padding: 24px 12px; }
    .concert__cond, .concert__tag { text-align: left; justify-self: start; }
    .foot__top { grid-template-columns: 1fr 1fr; }
    .section-head { grid-template-columns: 1fr; gap: 16px; padding-top: 100px; padding-bottom: 40px; }
    .section-head__meta { text-align: left; }
  }

  @media (max-width: 600px) {
    .foot__top { grid-template-columns: 1fr; gap: 40px; }
    .foot__brand { font-size: 38px; }
    .foot__col a { overflow-wrap: anywhere; }
    /* Enlarge primary touch controls toward the 24px+ tap-target minimum */
    .filter-pill { padding: 8px 2px; }
    .pagination__num { padding: 8px 6px; }
    .pagination__next { padding-bottom: 8px; }
    /* Festival year row is a non-wrapping inline-flex that overflows the viewport */
    .festival-mention__years { flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Solist-specific (Faza 4.2.2) ──
   * Components shared by all section pages: .entity-hero, .narrative,
   * .timeline, .institutions, .festivals, .booking.
   * Source: docs/visual/alexandruanastasiu.com/Solist.html <style> block.
   * ───────────────────────────────────────────────────────── */

  /* tabular numerals extension — Solist-specific elements */
  .entity-hero__stamp, .timeline__year, .institution__years, .festival__years {
    font-variant-numeric: tabular-nums;
  }
  /* aria-current=page active link state */
  .nav__links a[aria-current="page"] { color: var(--bone); }
  .nav__links a[aria-current="page"]::after { width: 100%; background: var(--scene); }

  /* ─── Entity hero (secondary hero · 60vh per Solist mockup) ── */
  .entity-hero {
    position: relative; height: var(--ehero-h, 60vh); min-height: var(--ehero-min, 480px);
    overflow: hidden;
    display: flex; align-items: flex-end;
    padding: 0 48px 64px;
  }
  .entity-hero__bg {
    position: absolute; inset: 0;
    background-position: center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    /* spec §7.1 hero treatment, ușor mai puțin agresiv per §8.1 */
    filter: brightness(0.58) contrast(1.08) saturate(0.85);
    transform: scale(1.04);
  }
  .entity-hero__veil {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(12,11,10,0.72) 0%, rgba(12,11,10,0.18) 28%, rgba(12,11,10,0.30) 60%, rgba(12,11,10,0.96) 100%),
      linear-gradient(95deg, rgba(12,11,10,0.55) 0%, rgba(12,11,10,0.0) 38%, rgba(12,11,10,0.0) 68%, rgba(12,11,10,0.35) 100%),
      radial-gradient(120% 80% at 70% 40%, rgba(111, 147, 180, 0.06), transparent 60%);
  }
  .entity-hero__grain {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  }
  .entity-hero__inner {
    position: relative; z-index: 2; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; align-items: end;
  }
  .entity-hero__eyebrow {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--bone-dim);
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
  }
  .entity-hero__eyebrow .bar { width: 36px; height: 1px; background: var(--scene); }
  .entity-hero__title {
    font-family: var(--display);
    font-weight: 200;
    font-size: clamp(48px, 6.4vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    color: var(--bone);
  }
  .entity-hero__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .entity-hero__sub {
    margin-top: 22px;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(16px, 1.6vw, 22px);
    letter-spacing: -0.01em;
    color: var(--bone-dim);
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  }
  .entity-hero__sub .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--scene); opacity: 0.7; }

  /* Anniversary stamp — graphic-only, no image asset */
  .entity-hero__stamp {
    border: 1px solid var(--line-strong);
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--mono);
    color: var(--bone);
    background: rgba(12,11,10,0.45);
    backdrop-filter: blur(4px);
    align-self: end;
  }
  .entity-hero__stamp .roman {
    font-family: var(--display); font-weight: 200; font-size: 56px; line-height: 1;
    letter-spacing: -0.04em; color: var(--steel-hot);
  }
  .entity-hero__stamp .label {
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted); margin-top: 4px;
  }
  .entity-hero__stamp .span {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--bone-dim);
  }
  .entity-hero__stamp .meta {
    font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--muted-2);
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 6px;
  }

  .entity-hero__bottom {
    position: absolute; left: 48px; right: 48px; bottom: 18px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--muted);
    z-index: 2;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  /* ─── Narrative block (intro single col, max 65ch) ────────── */
  .narrative {
    padding: 100px 0 40px;
  }
  .narrative__inner {
    max-width: 65ch;
    margin: 0 auto;
  }
  .narrative__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 32px;
  }
  .narrative__eyebrow::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .narrative__lead {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.25; letter-spacing: -0.025em;
    color: var(--bone);
    margin-bottom: 40px;
  }
  .narrative__lead em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .narrative p {
    font-size: 16px; line-height: 1.75; color: var(--bone-dim);
    margin-bottom: 22px;
  }
  .narrative p strong { color: var(--bone); font-weight: 500; }
  .narrative p em { font-style: italic; color: var(--bone); font-weight: 400; }

  /* ─── Timeline (dense variation of .concert) ──────────────── */
  .timeline-section { padding-bottom: 120px; }
  .timeline { margin-top: 0; }
  .timeline__row {
    display: grid;
    grid-template-columns: 110px 1.4fr 1fr 220px;
    gap: 36px;
    padding: 22px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
    cursor: pointer;
    position: relative;
  }
  .timeline__row::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
    background: var(--scene); transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .timeline__row:hover { background: var(--ink-2); padding-left: 32px; padding-right: 24px; }
  .timeline__row:hover::before { width: 18px; }
  .timeline__year {
    font-family: var(--display); font-weight: 200;
    font-size: 40px; line-height: 1;
    letter-spacing: -0.04em;
    color: var(--bone);
  }
  .timeline__work {
    font-family: var(--display); font-weight: 300; font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--bone);
  }
  .timeline__work em { font-style: normal; font-weight: 500; }
  .timeline__work .composer {
    display: block; font-family: var(--sans); font-size: 11.5px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .timeline__venue {
    font-size: 13.5px; color: var(--bone-dim); line-height: 1.5;
  }
  .timeline__venue .city {
    display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 4px;
  }
  .timeline__cond {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: var(--muted); text-transform: uppercase;
    text-align: right;
  }
  .timeline__cond strong {
    display: block; color: var(--bone); font-family: var(--display); font-size: 14px;
    letter-spacing: -0.01em; text-transform: none; margin-top: 4px; font-weight: 400;
  }

  /* ─── Institutions grid (variation of .album, no play button) ─ */
  .institutions { padding-bottom: 120px; }
  .institutions__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }
  .institution {
    padding: 32px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    background: transparent;
    transition: background 0.5s ease;
    position: relative;
  }
  .institution:nth-child(3n) { border-right: none; }
  .institution:hover { background: var(--ink-3); }
  .institution__no {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--muted); text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 28px;
  }
  .institution__no .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted-2); transition: background 0.4s;
  }
  .institution:hover .institution__no .dot { background: var(--scene); }
  .institution__name {
    font-family: var(--display); font-weight: 300; font-size: 22px;
    line-height: 1.15; letter-spacing: -0.02em;
    color: var(--bone);
    margin-bottom: 8px;
    min-height: 2.4em;
  }
  .institution__name em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .institution__city {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 18px;
  }
  .institution__years {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--bone-dim);
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  /* ─── Festivals list (simpler than timeline) ──────────────── */
  .festivals-section {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-bottom: 120px;
  }
  .festivals { margin-top: 0; }
  .festival {
    display: grid;
    grid-template-columns: 1.4fr 1fr 180px;
    gap: 40px;
    padding: 28px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
  }
  .festival:hover { background: var(--ink-3); padding-left: 28px; padding-right: 20px; }
  .festival__name {
    font-family: var(--display); font-weight: 300; font-size: 22px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .festival__name em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .festival__note {
    font-size: 13.5px; color: var(--bone-dim); line-height: 1.55;
  }
  .festival__years {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    text-align: right;
  }
  .festival__years strong {
    display: block; color: var(--bone); font-family: var(--display);
    font-weight: 400; font-size: 15px; letter-spacing: -0.01em;
    text-transform: none; margin-top: 4px;
  }

  /* ─── CTA booking ──────────────────────────────────────────── */
  .booking {
    padding: 120px 0 140px;
    border-top: 1px solid var(--line);
  }
  .booking__inner {
    max-width: 720px; margin: 0 auto;
    text-align: center;
  }
  .booking__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    color: var(--scene); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 32px;
  }
  .booking__eyebrow .bar { width: 24px; height: 1px; background: var(--scene); }
  .booking__text {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.2; letter-spacing: -0.035em;
    color: var(--bone);
    margin-bottom: 36px;
  }
  .booking__text em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .booking__cta {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 10px;
    transition: gap 0.3s, color 0.3s, border-color 0.3s;
  }
  .booking__cta:hover { gap: 22px; color: var(--bone); border-color: var(--scene); }

  /* ─── Solist responsive overrides ─────────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero {
      padding: 0 24px 48px; height: auto; min-height: var(--ehero-min-m, 520px); padding-top: 140px;
      flex-direction: column; align-items: stretch;
      /* column flex: align-items:flex-end (desktop bottom-anchor) no longer
         applies to the main axis — push content to the bottom explicitly. */
      justify-content: flex-end;
    }
    /* Absolute bottom strip overlaps the in-flow sub/meta once the hero is height:auto — let it flow full-width below the content. */
    .entity-hero__bottom {
      position: static; left: auto; right: auto; bottom: auto;
      margin-top: 28px; flex-wrap: wrap; gap: 6px 18px;
    }
    .entity-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .entity-hero__stamp { align-self: start; }
    .timeline__row { grid-template-columns: 80px 1fr; gap: 16px; padding: 20px 12px; }
    .timeline__year { font-size: 28px; }
    .timeline__venue, .timeline__cond { grid-column: 1 / -1; padding-left: 96px; }
    .timeline__cond { text-align: left; }
    .institutions__grid { grid-template-columns: 1fr 1fr; }
    .institution { border-right: 1px solid var(--line); }
    .institution:nth-child(2n) { border-right: none; }
    .festival { grid-template-columns: 1fr; gap: 10px; padding: 22px 12px; }
    .festival__years { text-align: left; }
  }
  @media (max-width: 600px) {
    .entity-hero__inner { gap: 20px; }
    .institutions__grid { grid-template-columns: 1fr; }
    .institution { border-right: none; }
    .timeline__venue, .timeline__cond { padding-left: 0; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Compozitor-specific (Faza 4.2.3) ──
   * Components unique to Compozitor: .works, .work-row*, .arrangements,
   * .arrangement*, .book*, .essays, .essay*.
   * Shared with Solist: .entity-hero scaffold, .narrative, .quote.
   * Hero height override: 44vh (Compozitor catalog stamp), vs 60vh on Solist.
   * Stamp structure is different (label + rows + val), defined here.
   * Source: docs/visual/alexandruanastasiu.com/Compozitor.html <style> block.
   * ───────────────────────────────────────────────────────── */

  /* tabular numerals extension — Compozitor-specific elements */
  .work-row__opus, .work-row__year, .work-row__dur,
  .arrangement__year, .book__meta {
    font-variant-numeric: tabular-nums;
  }

  /* Hero height override (compozitor variant — 44vh vs Solist 60vh) */
  .entity-hero--compozitor {
    height: var(--ehero-h, 44vh); min-height: var(--ehero-min, 460px);
  }
  .entity-hero--compozitor .entity-hero__bg {
    background-position: center 32%;
  }
  .entity-hero--compozitor .entity-hero__inner {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  /* Compozitor stamp variant — uses .label + .row structure (not .roman/.span/.meta) */
  .entity-hero__stamp .row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--bone-dim);
    padding: 6px 0;
    border-top: 1px solid var(--line);
  }
  .entity-hero__stamp .row:first-of-type { border-top: none; padding-top: 0; }
  .entity-hero__stamp .row .val {
    font-family: var(--display); font-weight: 400; font-size: 18px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .entity-hero__stamp .row .val em {
    font-style: normal; font-weight: 500; color: var(--steel-hot);
  }

  /* ─── Works · concerts for vibraphone (dense table list) ──── */
  .works-section { padding-bottom: 120px; }
  .works { margin-top: 0; }
  .work-row {
    display: grid;
    grid-template-columns: 110px 1.6fr 1fr 110px 140px;
    gap: 32px;
    padding: 26px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
    cursor: pointer;
    position: relative;
  }
  .work-row::before {
    content: ''; position: absolute; left: 0; top: 38px; width: 0; height: 1px;
    background: var(--scene);
    transition: width 0.5s ease;
  }
  .work-row:hover { background: var(--ink-2); padding-left: 32px; padding-right: 24px; }
  .work-row:hover::before { width: 18px; }
  .work-row__opus {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--scene);
  }
  .work-row__opus strong {
    display: block;
    font-family: var(--display); font-weight: 200; font-size: 38px;
    line-height: 1; letter-spacing: -0.04em;
    color: var(--bone); margin-top: 6px;
    text-transform: none;
  }
  .work-row__opus .tbd {
    color: var(--muted-2); font-weight: 300; font-style: normal;
  }
  .work-row__title {
    font-family: var(--display); font-weight: 300; font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--bone);
  }
  .work-row__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .work-row__title .nr {
    display: block; font-family: var(--sans); font-size: 11.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .work-row__instr {
    font-size: 13.5px; color: var(--bone-dim); line-height: 1.55;
  }
  .work-row__instr .label {
    display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 6px;
  }
  .work-row__year {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--bone-dim);
  }
  .work-row__year strong {
    display: block; font-family: var(--display); font-weight: 400; font-size: 16px;
    letter-spacing: -0.01em; color: var(--bone);
    margin-top: 4px;
  }
  .work-row__status {
    justify-self: end; align-self: center;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
    color: var(--scene); text-transform: uppercase;
    border: 1px solid currentColor; padding: 7px 11px;
    transition: background 0.3s, color 0.3s;
    text-align: center;
  }
  .work-row:hover .work-row__status { background: var(--scene); color: var(--bone); border-color: var(--scene); }
  .work-row__status.tbd { color: var(--muted-2); }
  .work-row__status.tbd::before { content: '? '; }

  /* Open state — accordion-style detail panel */
  .work-row__detail {
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.6s ease, padding 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    padding: 0;
  }
  .work-row--open .work-row__detail {
    max-height: 1200px;
    padding: 32px 0 12px;
    opacity: 1;
    border-top: 1px solid var(--line);
    margin-top: 22px;
  }
  .work-row__detail__inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 56px;
    align-items: start;
  }
  .work-row__note {
    font-size: 14.5px; line-height: 1.7; color: var(--bone-dim);
    max-width: 56ch;
  }
  .work-row__note strong { color: var(--bone); font-weight: 500; }
  .work-row__note em { font-style: italic; color: var(--bone); font-weight: 400; }
  .work-row__credits {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
    border-left: 1px solid var(--line-strong);
    padding-left: 22px;
    display: grid; gap: 20px;
  }
  .work-row__credits .role { font-size: 9.5px; letter-spacing: 0.22em; }
  .work-row__credits .name {
    display: block; color: var(--bone); font-family: var(--display);
    font-weight: 400; font-size: 15px; letter-spacing: -0.01em;
    text-transform: none; margin-top: 6px;
  }

  /* Inside Compozitor work-row detail, .featured__movements spans full row.
     Outside of Compozitor, .featured__movements keeps its Homepage layout. */
  .work-row__detail .featured__movements {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 8px;
  }
  .work-row__detail .featured__movements .name .tbd {
    font-style: italic; color: var(--muted-2); font-size: 14px; font-weight: 300;
  }

  /* ─── Arrangements (denser variant) ──────────────────────── */
  .arrangements-section {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-bottom: 120px;
  }
  .arrangements { margin-top: 0; }
  .arrangement {
    display: grid;
    grid-template-columns: 220px 1.6fr 1.4fr 140px;
    gap: 40px;
    padding: 24px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
  }
  .arrangement:hover { background: var(--ink-3); padding-left: 28px; padding-right: 20px; }
  .arrangement__composer {
    font-family: var(--display); font-weight: 300; font-size: 22px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .arrangement__composer em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .arrangement__composer .dates {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .arrangement__title {
    font-size: 14.5px; line-height: 1.55; color: var(--bone);
    font-family: var(--display); font-weight: 300;
    letter-spacing: -0.01em;
  }
  .arrangement__title em { font-style: italic; color: var(--bone); }
  .arrangement__context {
    font-size: 13px; color: var(--bone-dim); line-height: 1.55;
  }
  .arrangement__context .album {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 4px;
  }
  .arrangement__year {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    text-align: right;
  }
  .arrangement__year strong {
    display: block; color: var(--bone); font-family: var(--display);
    font-weight: 400; font-size: 15px; letter-spacing: -0.01em;
    text-transform: none; margin-top: 4px;
  }

  /* ─── Book block (adaptation of .featured pattern) ──────── */
  .book-section { background: var(--ink); padding-bottom: 140px; }
  .book {
    background: var(--ink-2);
    margin-top: 56px;
    padding: 0;
    position: relative;
  }
  .book::before {
    content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 120px;
    background: linear-gradient(180deg, var(--scene), transparent);
  }
  .book__grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
    align-items: center;
    padding: 60px;
  }
  .book__visual {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  }
  .book__visual img {
    width: 100%; height: 100%; object-fit: cover;
    will-change: transform;
    filter: contrast(1.05) brightness(0.92);
  }
  .book__visual::after {
    content: 'CARTE · 2024 · 95 pp'; position: absolute; top: 24px; left: 24px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    color: var(--bone); background: rgba(12,11,10,0.7); backdrop-filter: blur(4px);
    padding: 9px 14px; border: 1px solid var(--line-strong);
  }
  /* Companion volume (Editura Muzicală, 53 pp) — overrides the global stamp */
  .book--companion .book__visual::after {
    content: 'CARTE · 2024 · 53 pp';
  }
  .book__opus {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 24px;
    display: flex; align-items: center; gap: 14px;
  }
  .book__opus .bar { width: 28px; height: 1px; background: var(--scene); }
  .book__title {
    font-family: var(--display); font-size: clamp(36px, 4vw, 64px);
    font-weight: 200; line-height: 1.0; letter-spacing: -0.04em;
    margin-bottom: 12px;
  }
  .book__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .book__sub {
    font-family: var(--display); font-weight: 300; font-size: 17px;
    color: var(--bone-dim); margin-bottom: 36px;
    letter-spacing: -0.01em;
    line-height: 1.45;
  }
  .book__sub em { font-style: normal; font-weight: 500; color: var(--bone); }
  .book__body {
    font-size: 15.5px; line-height: 1.7; color: var(--bone-dim);
    max-width: 52ch; margin-bottom: 36px;
  }
  .book__body strong { color: var(--bone); font-weight: 500; }
  .book__body em { color: var(--bone); font-style: italic; font-weight: 400; }
  .book__meta {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 32px; border-top: 1px solid var(--line);
  }
  .book__meta .role { display: block; font-size: 10px; letter-spacing: 0.22em; }
  .book__meta .name {
    color: var(--bone); font-family: var(--display); font-weight: 400; font-size: 15px;
    text-transform: none; letter-spacing: -0.005em; margin-top: 6px; display: block;
  }

  /* Essays list (under book block) */
  .essays {
    margin-top: 80px;
    border-top: 1px solid var(--line);
  }
  .essays__head {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    padding: 32px 0 20px;
  }
  .essays__head::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .essay {
    display: grid;
    grid-template-columns: 100px 1.6fr 1fr 140px;
    gap: 36px;
    padding: 22px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
  }
  .essay:hover { background: var(--ink-2); padding-left: 28px; padding-right: 20px; }
  .essay__year {
    font-family: var(--display); font-weight: 200; font-size: 32px;
    line-height: 1; letter-spacing: -0.04em;
    color: var(--bone);
  }
  .essay__title {
    font-family: var(--display); font-weight: 300; font-size: 18px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .essay__title em { font-style: italic; color: var(--bone); }
  .essay__title .ref {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .essay__cites {
    font-size: 13px; color: var(--bone-dim); line-height: 1.55;
  }
  .essay__cites .label {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 4px;
  }
  .essay__status {
    justify-self: end;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--muted-2); text-transform: uppercase;
    border: 1px solid var(--line);
    padding: 7px 11px;
  }

  /* ─── Compozitor responsive overrides ─────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--compozitor { height: auto; min-height: var(--ehero-min-m, 520px); }
    .entity-hero--compozitor .entity-hero__inner { grid-template-columns: 1fr; }

    .work-row { grid-template-columns: 80px 1fr; gap: 16px; padding: 22px 12px; }
    .work-row__opus strong { font-size: 26px; }
    .work-row__instr, .work-row__year, .work-row__status {
      grid-column: 1 / -1; padding-left: 96px;
    }
    .work-row__status { justify-self: start; }
    .work-row__detail__inner { grid-template-columns: 1fr; gap: 28px; }
    .work-row__credits { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 22px; }

    .arrangement { grid-template-columns: 1fr; gap: 10px; padding: 22px 12px; }
    .arrangement__year { text-align: left; }

    .book__grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
    .book__meta { grid-template-columns: 1fr; gap: 18px; }

    .essay { grid-template-columns: 1fr; gap: 10px; padding: 22px 12px; }
    .essay__status { justify-self: start; }
  }
  @media (max-width: 600px) {
    .work-row__instr, .work-row__year, .work-row__status { padding-left: 0; }
    .work-row__opus strong { font-size: 22px; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Profesor-specific (Faza 4.2.4) ──
   * Components unique to Profesor: .context-block*, .ensemble*,
   * .student-grid, .student-card*, .festival-mention*.
   * Shared with Solist/Compozitor: .entity-hero scaffold, .narrative, .quote,
   * .section-head, .container, .reveal.
   *
   * IDENTITY ACCENT — Human Pedagogue (spec §1.4 + §8.3):
   * the softer photo filter brightness(0.95) saturate(0.95) on
   * `.student-card__img img` is the SINGLE documented exception in the
   * entire site. Everywhere else uses the standard §7.1 filter set.
   *
   * Source: docs/visual/alexandruanastasiu.com/Profesor.html <style> block.
   * ───────────────────────────────────────────────────────── */

  /* tabular numerals extension — Profesor-specific elements */
  .context-block__years, .context-block__meta,
  .ensemble__year, .student-card__year, .festival-mention__years {
    font-variant-numeric: tabular-nums;
  }

  /* Hero height override (profesor variant — 45vh, between Solist 60vh and Compozitor 44vh) */
  .entity-hero--profesor {
    height: var(--ehero-h, 45vh); min-height: var(--ehero-min, 480px);
  }
  .entity-hero--profesor .entity-hero__bg {
    background-position: center 30%;
  }
  .entity-hero--profesor .entity-hero__inner {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  /* Profesor stamp uses the Compozitor .row pattern (label + rows + val) —
     already defined in the Compozitor block. */

  /* ─── Context block (UnitBV, ICon Arts) — bipartite visual + body ─── */
  .context-section { padding-bottom: 80px; }
  .context-block {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
    align-items: center;
    margin-top: 60px;
    padding: 60px 0;
    border-top: 1px solid var(--line);
  }
  .context-block--reverse { grid-template-columns: 1.1fr 1fr; }
  .context-block--reverse .context-block__visual { order: 2; }
  .context-block--reverse .context-block__body { order: 1; }
  /* Split variant (block_section_custom 2-col image, phase 43/45): even columns
     + full-width body so the text column matches the image (not the 52ch cap). */
  .context-block--split { grid-template-columns: 1fr 1fr; }
  .context-block--split .context-block__body { max-width: none; }

  .context-block__visual {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--ink-2);
  }
  .context-block__visual img {
    width: 100%; height: 100%; object-fit: cover;
    will-change: transform;
    /* spec §7.1 standard mid-figure treatment — NOT the softer 0.95 deviation */
    filter: contrast(1.05) brightness(0.9);
    transition: transform 0.9s ease;
  }
  .context-block:hover .context-block__visual img { transform: scale(1.03); }
  .context-block__visual::after {
    content: attr(data-stamp); position: absolute; top: 24px; left: 24px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    color: var(--bone); background: rgba(12,11,10,0.7); backdrop-filter: blur(4px);
    padding: 9px 14px; border: 1px solid var(--line-strong);
  }

  .context-block__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 24px;
    display: flex; align-items: center; gap: 14px;
  }
  .context-block__eyebrow .bar { width: 28px; height: 1px; background: var(--scene); }
  .context-block__title {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1.0; letter-spacing: -0.04em;
    margin-bottom: 12px;
  }
  .context-block__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .context-block__sub {
    font-family: var(--display); font-weight: 300; font-size: 17px;
    color: var(--bone-dim); margin-bottom: 32px;
    letter-spacing: -0.01em;
    line-height: 1.45;
  }
  .context-block__body {
    font-size: 15.5px; line-height: 1.7; color: var(--bone-dim);
    max-width: 52ch;
  }
  .context-block__body p { margin-bottom: 20px; }
  .context-block__body strong { color: var(--bone); font-weight: 500; }
  .context-block__body em { color: var(--bone); font-style: italic; font-weight: 400; }
  .context-block__meta {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 32px;
    padding-top: 28px; border-top: 1px solid var(--line);
  }
  .context-block__meta .role { display: block; font-size: 10px; letter-spacing: 0.22em; }
  .context-block__meta .name {
    color: var(--bone); font-family: var(--display); font-weight: 400; font-size: 15px;
    text-transform: none; letter-spacing: -0.005em; margin-top: 6px; display: block;
  }
  .context-block__years {
    color: var(--bone-dim); font-family: var(--mono);
  }

  /* ─── Ensemble (Power Vibes — repeater_member listing) ──── */
  .ensemble-section {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-bottom: 120px;
  }
  .ensemble {
    margin-top: 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: start;
  }
  .ensemble__visual {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--ink-3);
  }
  .ensemble__visual img {
    width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.05) brightness(0.9);
  }
  .ensemble__visual::after {
    content: 'POWER VIBES · ENSEMBLE'; position: absolute; top: 24px; left: 24px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    color: var(--bone); background: rgba(12,11,10,0.7); backdrop-filter: blur(4px);
    padding: 9px 14px; border: 1px solid var(--line-strong);
  }

  .ensemble__panel {
    display: flex; flex-direction: column; gap: 28px;
  }
  .ensemble__lede {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35; letter-spacing: -0.02em;
    color: var(--bone);
  }
  .ensemble__lede em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .ensemble__note {
    font-size: 14.5px; line-height: 1.7; color: var(--bone-dim);
    max-width: 56ch;
  }
  .ensemble__note strong { color: var(--bone); font-weight: 500; }

  .ensemble__list {
    list-style: none; margin-top: 12px;
    border-top: 1px solid var(--line);
  }
  .ensemble__member {
    display: grid;
    grid-template-columns: 1fr 1.1fr 120px;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: padding 0.3s ease, background 0.3s ease;
  }
  .ensemble__member:hover { background: var(--ink-3); padding-left: 12px; padding-right: 8px; }
  .ensemble__name {
    font-family: var(--display); font-weight: 400; font-size: 18px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .ensemble__name em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .ensemble__name .role {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    margin-top: 4px;
  }
  .ensemble__instrument {
    font-size: 13.5px; color: var(--bone-dim);
    font-family: var(--display); font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.5;
  }
  .ensemble__year {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
    text-align: right;
  }
  .ensemble__year strong {
    display: block; color: var(--bone-dim); font-family: var(--display);
    font-weight: 400; font-size: 14px; letter-spacing: -0.01em;
    text-transform: none; margin-top: 4px;
  }
  .ensemble__tbd {
    margin-top: 18px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted-2);
    border: 1px dashed var(--line-strong);
    padding: 12px 16px;
  }

  /* ─── Students grid · DOCUMENTED FILTER DEVIATION (§1.4 + §8.3) ─── */
  .students-section {
    padding-bottom: 120px;
  }
  .student-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 0;
    border-top: 0;
  }
  .student-card {
    position: relative;
    padding: 44px 32px 36px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.5s ease;
  }
  .student-card:nth-child(3n) { border-right: none; }
  .student-card:hover { background: var(--ink-2); }
  .student-card__no {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    color: var(--muted); text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
  }
  .student-card__no .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); transition: background 0.4s; }
  .student-card:hover .student-card__no .dot { background: var(--scene); }
  .student-card__img {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    overflow: hidden; margin: 22px 0 28px;
    background: var(--ink-2);
  }
  .student-card__img img {
    width: 100%; height: 100%; object-fit: cover;
    /* ════════════════════════════════════════════════════════════════
       DOCUMENTED DEVIATION — spec §1.4 (Human Pedagogue) + §8.3
       (Profesor identity). Softer filter on student cards ONLY.
       Homepage `.mode__img` uses brightness(0.88) saturate(0.92).
       Here = brightness(0.95) saturate(0.95). This is the SINGLE
       documented photo-filter exception in the entire site.
       Helper `aa_image_filter('profesor-student')` returns this same value.
       ════════════════════════════════════════════════════════════════ */
    filter: brightness(0.95) saturate(0.95);
    transition: transform 0.9s ease, filter 0.6s ease;
  }
  .student-card:hover .student-card__img img { transform: scale(1.05); filter: brightness(1) saturate(1); }
  .student-card__img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,11,10,0) 50%, rgba(12,11,10,0.55) 100%);
    pointer-events: none;
  }
  .student-card__name {
    font-family: var(--display); font-size: 36px; line-height: 1.0;
    font-weight: 200; letter-spacing: -0.04em;
    margin-bottom: 16px;
    color: var(--bone);
  }
  .student-card__name em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .student-card__role {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    color: var(--muted); text-transform: uppercase;
    margin-bottom: 18px;
  }
  .student-card__achievement {
    font-size: 14.5px; color: var(--bone-dim); line-height: 1.65;
    margin-bottom: 24px;
  }
  .student-card__achievement em { color: var(--bone); font-style: italic; font-weight: 400; }
  .student-card__achievement strong { color: var(--bone); font-weight: 500; }
  .student-card__year {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    width: 100%;
    justify-content: space-between;
  }
  .student-card__year .meta { color: var(--muted-2); }

  /* ─── Festival mention (Autumne Vibes) ─────────────────── */
  .festival-mention {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 100px 0;
  }
  .festival-mention__inner {
    max-width: 880px; margin: 0 auto;
    text-align: center;
  }
  .festival-mention__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene);
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 32px;
  }
  .festival-mention__eyebrow .bar { width: 28px; height: 1px; background: var(--scene); }
  .festival-mention__title {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(40px, 4.6vw, 76px);
    line-height: 1.0; letter-spacing: -0.045em;
    margin-bottom: 28px;
  }
  .festival-mention__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .festival-mention__body {
    font-size: 17px; color: var(--bone-dim); line-height: 1.7;
    max-width: 60ch; margin: 0 auto 36px;
  }
  .festival-mention__body strong { color: var(--bone); font-weight: 500; }
  .festival-mention__body em { color: var(--bone); font-style: italic; font-weight: 400; }
  .festival-mention__years {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    display: inline-flex; gap: 24px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .festival-mention__years strong { color: var(--bone); font-weight: 400; }

  /* ─── Profesor responsive overrides ─────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--profesor { height: auto; min-height: var(--ehero-min-m, 520px); }
    .entity-hero--profesor .entity-hero__inner { grid-template-columns: 1fr; }

    .context-block,
    .context-block--reverse { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
    .context-block--reverse .context-block__visual { order: 1; }
    .context-block--reverse .context-block__body { order: 2; }
    .context-block__meta { grid-template-columns: 1fr; gap: 16px; }

    .ensemble { grid-template-columns: 1fr; gap: 40px; }
    .ensemble__member { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
    .ensemble__year { text-align: left; }

    .student-grid { grid-template-columns: 1fr; }
    .student-card { border-right: 0; }
  }
  @media (max-width: 600px) {
    .student-card__name { font-size: 30px; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Discografie-specific (Faza 4.2.5) ──
   * Components unique to Discografie: .entity-hero--discografie (36vh
   * archival, lower hero with .count/.span/.meta in stamp), .filter-bar,
   * .filter-group, .filter-pill, .album__cover--placeholder, .subbrands,
   * .subbrand-card, .subbrand__emblem (TEXT placeholder only),
   * .compilations-section, .compilation, .compilations__tbd, .shop-cta.
   * Shared with Homepage: .disco__grid, .album, .album__cover scaffolding.
   * Shared with section pages: .entity-hero scaffold, .section-head,
   * .container, .reveal.
   * Source: docs/visual/alexandruanastasiu.com/Discografie.html <style>.
   * ───────────────────────────────────────────────────────── */

  /* tabular numerals extension — Discografie-specific selectors */
  .entity-hero__stamp .count, .filter-pill,
  .compilation__year, .subbrand-card__meta {
    font-variant-numeric: tabular-nums;
  }

  /* ─── Entity hero (Discografie · 36vh archival) ────────────── */
  /* Override scaffold height & padding for the lower archival hero.
     Background image set inline via .entity-hero__bg style="background-image".
     Same .entity-hero__veil / .entity-hero__grain layers as Solist. */
  .entity-hero--discografie {
    height: var(--ehero-h, 36vh); min-height: var(--ehero-min, 420px);
    padding: 0 48px 56px;
  }
  .entity-hero--discografie .entity-hero__bg {
    background-position: center 50%;
  }
  /* Stamp variant for archival: factual count + range, no anniversary roman */
  .entity-hero__stamp .count {
    font-family: var(--display); font-weight: 200; font-size: 56px; line-height: 1;
    letter-spacing: -0.04em; color: var(--steel-hot);
  }

  /* ─── Filter bar (pill-style mono uppercase) ──────────────── */
  .filter-bar-section { /* wrapper section */ }
  .filter-bar {
    border-bottom: 1px solid var(--line);
    padding: 28px 0 26px;
    display: flex; flex-wrap: wrap; gap: 32px 56px;
    align-items: flex-start;
  }
  .filter-group {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .filter-group__label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    border-right: 1px solid var(--line);
    padding-right: 14px;
    margin-right: 2px;
  }
  .filter-pill {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-dim);
    background: none; border: none;
    cursor: pointer;
    padding: 4px 2px;
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .filter-pill:hover { color: var(--bone); border-bottom-color: var(--scene); }
  /* Client-side filter: items hidden by an active .filter-pill (see scripts/main.js) */
  .is-filtered-out { display: none !important; }
  .filter-pill.is-active {
    color: var(--bone);
    border-bottom-color: var(--scene);
  }

  /* ─── Album cover placeholder (no scanned artwork yet) ─────── */
  /* Extends .album__cover (already in main.css from Homepage CSS). */
  .album__cover--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-3);
    border: 1px solid var(--line);
    position: relative;
  }
  .album__cover--placeholder .placeholder__inner {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--muted);
    text-align: center;
    line-height: 1.8;
    padding: 0 12px;
  }
  .album__cover--placeholder .placeholder__inner .pl-title {
    display: block; color: var(--bone-dim);
    font-family: var(--display); font-weight: 200; font-size: 28px;
    letter-spacing: -0.03em; text-transform: none;
    line-height: 1; margin-bottom: 14px;
  }
  .album__cover--placeholder .placeholder__inner .pl-meta {
    display: block; margin-top: 8px;
    font-size: 9px; color: var(--muted-2);
  }

  /* ─── Sub-brand cards (variation of .institution, no .album cover) ─── */
  .subbrands { padding-bottom: 120px; }
  .subbrands__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }
  .subbrand-card {
    padding: 36px 24px 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    background: transparent;
    transition: background 0.5s ease;
    position: relative;
    display: flex; flex-direction: column;
  }
  .subbrand-card:last-child { border-right: none; }
  .subbrand-card:hover { background: var(--ink-3); }
  .subbrand-card__no {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--muted); text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
  }
  .subbrand-card__no .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted-2); transition: background 0.4s;
  }
  .subbrand-card:hover .subbrand-card__no .dot { background: var(--scene); }

  /* Emblem placeholder — TEXT ONLY, monochromatic. No fake SVG, no fake logo.
     Replaced with real SVG emblems from `vibes_alex/` archive (client-held,
     not in this repo) per Regula 2 din CLAUDE.md. */
  .subbrand__emblem {
    aspect-ratio: 1.4 / 1;
    background: var(--ink-2);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    margin-bottom: 24px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-dim);
    text-align: center;
    line-height: 1.4;
    filter: grayscale(1);
    transition: border-color 0.4s ease, color 0.4s ease;
  }
  .subbrand-card:hover .subbrand__emblem {
    border-color: var(--line-strong);
    color: var(--bone);
  }
  .subbrand__emblem .emblem__bracket {
    color: var(--muted-2);
    font-weight: 300;
    margin: 0 4px;
  }

  .subbrand-card__name {
    font-family: var(--display); font-weight: 300; font-size: 20px;
    letter-spacing: -0.02em; color: var(--bone);
    margin-bottom: 10px;
    line-height: 1.15;
  }
  .subbrand-card__name em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .subbrand-card__body {
    font-size: 13.5px; line-height: 1.6; color: var(--bone-dim);
    margin-bottom: 20px;
    flex: 1;
  }
  .subbrand-card__body em { font-style: italic; color: var(--bone); font-weight: 400; }
  .subbrand-card__meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .subbrand-card__meta strong {
    display: block; color: var(--bone-dim); font-weight: 400;
    margin-top: 4px;
  }

  /* ─── Compilations list (dense variation of .concert, 4-col) ── */
  .compilations-section {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-bottom: 120px;
  }
  .compilations { margin-top: 0; }
  .compilation {
    display: grid;
    grid-template-columns: 100px 1.4fr 1fr 160px;
    gap: 36px;
    padding: 24px 12px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  .compilation::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
    background: var(--scene); transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .compilation:hover { background: var(--ink-3); padding-left: 28px; padding-right: 20px; }
  .compilation:hover::before { width: 18px; }
  .compilation__year {
    font-family: var(--display); font-weight: 200;
    font-size: 32px; line-height: 1;
    letter-spacing: -0.04em; color: var(--bone);
  }
  .compilation__title {
    font-family: var(--display); font-weight: 300; font-size: 17px;
    letter-spacing: -0.02em; color: var(--bone);
  }
  .compilation__title em { font-style: normal; font-weight: 500; }
  .compilation__title .note {
    display: block; font-family: var(--sans); font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .compilation__label {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    color: var(--bone-dim);
  }
  .compilation__format {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--scene);
    border: 1px solid currentColor; padding: 6px 10px;
    justify-self: end;
  }

  /* TBD note inside compilations */
  .compilations__tbd {
    padding: 40px 12px;
    text-align: center;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .compilations__tbd strong {
    display: block; color: var(--bone-dim);
    font-family: var(--display); font-weight: 200;
    font-size: 22px; letter-spacing: -0.025em;
    text-transform: none; margin-bottom: 10px;
  }

  /* ─── CTA Magazin (deferred Faza 5) ────────────────────────── */
  .shop-cta {
    padding: 120px 0 140px;
    border-top: 1px solid var(--line);
  }
  .shop-cta__inner {
    max-width: 720px; margin: 0 auto;
    text-align: center;
  }
  .shop-cta__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    color: var(--scene); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 32px;
  }
  .shop-cta__eyebrow .bar { width: 24px; height: 1px; background: var(--scene); }
  .shop-cta__text {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.2; letter-spacing: -0.035em;
    color: var(--bone);
    margin-bottom: 28px;
  }
  .shop-cta__text em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .shop-cta__deferred {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 36px;
  }
  .shop-cta__cta {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--bone-dim);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 10px;
    transition: gap 0.3s, color 0.3s, border-color 0.3s;
    cursor: not-allowed;
    opacity: 0.7;
  }
  .shop-cta__cta:hover { gap: 18px; color: var(--bone-dim); border-color: var(--line-strong); }

  /* ─── Discografie responsive overrides ────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--discografie { padding: 0 24px 40px; height: auto; min-height: var(--ehero-min-m, 460px); padding-top: 140px; }
    .filter-bar { gap: 24px 32px; padding: 24px 0; }
    .filter-group { width: 100%; }
    .subbrands__grid { grid-template-columns: repeat(2, 1fr); }
    .subbrand-card { border-right: 1px solid var(--line); }
    .subbrand-card:nth-child(2n) { border-right: none; }
    .subbrand-card:last-child { border-right: 1px solid var(--line); }
    .compilation { grid-template-columns: 70px 1fr; gap: 16px; padding: 20px 12px; }
    .compilation__label, .compilation__format { grid-column: 1 / -1; padding-left: 86px; }
    .compilation__format { justify-self: start; }
  }
  @media (max-width: 600px) {
    .subbrands__grid { grid-template-columns: 1fr; }
    .subbrand-card { border-right: none !important; }
    .compilation__label, .compilation__format { padding-left: 0; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Press-News-specific (Faza 4.2.6) ──
   *
   * Dual-feed page (news_post + press_item merged cronologic).
   * Source: docs/visual/alexandruanastasiu.com/Press-News.html <style>.
   * Spec: design system spec §8.5 (press inflexion) + §8.13/§8.14 fields.
   *
   * REUSES (from earlier in main.css):
   *   .entity-hero scaffold (line 763), .entity-hero__bg/veil/grain/inner/eyebrow
   *   .entity-hero__title/sub/stamp (lines 769-848)
   *   .filter-bar / .filter-group / .filter-group__label / .filter-pill (lines 1841-1871)
   *   .album__play (line 585) — re-used by .feed-item--video items
   *   .section-head, .container, .reveal — verbatim Homepage
   *
   * NEW classes:
   *   .entity-hero--press (30vh override of 60vh default — feed page density)
   *   .feed, .feed-list, .feed-item, .feed-item__img/__meta/__topline/
   *   .feed-item__eyebrow/__date/__title/__excerpt/__source/__cta
   *   .feed-item--news / .feed-item--press / .feed-item--video (type modifiers)
   *   .pagination, .pagination__num, .pagination__sep, .pagination__next
   * ───────────────────────────────────────────────────────── */

  /* tabular numerals extension — Press-News-specific selectors */
  .feed-item__date, .feed-item__eyebrow,
  .pagination__num {
    font-variant-numeric: tabular-nums;
  }

  /* ─── Entity hero (Press · 30vh compact) ───────────────────
   * Override scaffold height from 60vh → 30vh. Press/News is a "running"
   * feed page — hero compact suffices for title + sub; filters live below
   * (pattern shared with Discografie). */
  .entity-hero--press {
    height: var(--ehero-h, 30vh); min-height: var(--ehero-min, 380px);
    padding: 0 48px 48px;
  }
  .entity-hero--press .entity-hero__bg {
    background-position: center 28%;
  }
  .entity-hero--press .entity-hero__inner {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .entity-hero--press .entity-hero__title {
    font-size: clamp(44px, 5.6vw, 92px);
  }
  .entity-hero--press .entity-hero__sub {
    margin-top: 18px;
    font-size: clamp(15px, 1.4vw, 19px);
  }

  /* ─── Feed (dual-feed news_post + press_item) ──────────────
   * Dense variant of `.press` — repeating list rows. Image left (4/3),
   * content middle (eyebrow + date + title + excerpt + source),
   * CTA right. Hover: subtle ink-2 background + indent + scene rule. */
  .feed { padding-bottom: 80px; }
  .feed-list { margin-top: 0; }
  .feed-item {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 40px;
    padding: 32px 12px;
    border-bottom: 1px solid var(--line);
    align-items: start;
    cursor: pointer;
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  .feed-item:first-child { border-top: 1px solid var(--line); }
  .feed-item::before {
    content: ''; position: absolute; left: 0; top: 32px; width: 0; height: 1px;
    background: var(--scene);
    transition: width 0.5s ease;
  }
  .feed-item:hover { background: var(--ink-2); padding-left: 32px; padding-right: 24px; }
  .feed-item:hover::before { width: 18px; }

  .feed-item__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    background: var(--ink-2);
  }
  .feed-item__img img {
    width: 100%; height: 100%; object-fit: cover;
    /* spec §7.1 press image */
    filter: contrast(1.05) saturate(0.9);
    transition: transform 0.7s ease;
  }
  .feed-item:hover .feed-item__img img { transform: scale(1.03); }

  /* No-image feed entries (third-party reviews etc.): a clean archival year
   * tile instead of repeating the artist portrait. Keeps the grid uniform. */
  .feed-item__img--ph {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
  }
  .feed-item__ph-year {
    font-family: var(--mono); font-weight: 300;
    font-size: 30px; letter-spacing: 0.14em;
    color: var(--muted-2); font-variant-numeric: tabular-nums;
    transition: color 0.4s ease;
  }
  .feed-item:hover .feed-item__img--ph { border-color: var(--line-strong); }
  .feed-item:hover .feed-item__ph-year { color: var(--bone-dim); }

  /* Play overlay for VIDEO items — re-uses .album__play CSS (already
   * declared at line 585). Hover transition is identical. We only add
   * the feed-item-specific show rule. */
  .feed-item:hover .album__play { opacity: 1; transform: translateY(0) scale(1); }

  /* Meta column (eyebrow + date + title + excerpt + source) */
  .feed-item__meta { display: flex; flex-direction: column; gap: 0; }

  .feed-item__topline {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .feed-item__eyebrow {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--scene); /* default = PRESS / VIDEO / INTERVIU color */
    display: inline-flex; align-items: center; gap: 10px;
  }
  .feed-item__eyebrow .bar { width: 18px; height: 1px; background: currentColor; }
  /* NEWS = bone-dim (visual differentiator per task brief) */
  .feed-item--news .feed-item__eyebrow { color: var(--bone-dim); }

  /* Date — mono uppercase, same vocabulary as .concert__date */
  .feed-item__date {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
  }
  .feed-item__date .day { color: var(--bone-dim); }

  .feed-item__title {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.18; letter-spacing: -0.025em;
    color: var(--bone);
    margin-bottom: 16px;
    max-width: 56ch;
  }
  .feed-item__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }

  .feed-item__excerpt {
    font-size: 14px; line-height: 1.65; color: var(--bone-dim);
    max-width: 60ch; margin-bottom: 18px;
  }
  .feed-item__excerpt em { font-style: italic; color: var(--bone); }

  .feed-item__source {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 4px;
  }
  .feed-item__source strong { color: var(--bone-dim); font-weight: 400; }

  /* Right column — CTA */
  .feed-item__cta {
    align-self: start;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone-dim);
    display: inline-flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 8px;
    transition: gap 0.3s, color 0.3s, border-color 0.3s;
    white-space: nowrap;
    margin-top: 6px;
  }
  .feed-item:hover .feed-item__cta { gap: 16px; color: var(--bone); border-color: var(--scene); }

  /* ─── Pagination (mono uppercase, derived from .nav__lang) ── */
  .pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 18px;
    padding: 56px 12px 0;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone-dim);
  }
  .pagination__num {
    padding: 4px 4px;
    border-bottom: 1px solid transparent;
    color: var(--muted);
    transition: color 0.3s, border-color 0.3s;
    cursor: pointer;
  }
  .pagination__num:hover { color: var(--bone); border-bottom-color: var(--scene); }
  .pagination__num.is-active {
    color: var(--bone);
    border-bottom: 1px solid var(--scene);
  }
  .pagination__sep { color: var(--muted-2); }
  .pagination__next {
    margin-left: 14px;
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 6px;
    transition: gap 0.3s, border-color 0.3s;
  }
  .pagination__next:hover { gap: 16px; border-color: var(--scene); }

  /* ─── Press-News responsive overrides ───────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--press { padding: 0 24px 32px; height: auto; min-height: var(--ehero-min-m, 420px); padding-top: 140px; }
    .entity-hero--press .entity-hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .feed-item {
      grid-template-columns: 160px 1fr;
      gap: 24px;
      padding: 24px 12px;
    }
    .feed-item__cta { grid-column: 2 / 3; }
  }
  @media (max-width: 600px) {
    .feed-item {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .feed-item__cta { grid-column: 1 / 2; justify-self: start; }
    .pagination { gap: 12px; flex-wrap: wrap; }
  }

  /* ─────────────────────────────────────────────────────────
   * ── Contact-specific (Faza 4.2.7) ──
   * Source: docs/visual/alexandruanastasiu.com/Contact.html <style> block.
   * REUSED from earlier phases (NOT duplicated):
   *   .entity-hero scaffold (line 763) — .entity-hero / __bg / __veil / __grain
   *     / __inner / __eyebrow / __title / __sub / __bottom
   *   .foot__newsletter (line 675) — directly reused for newsletter signup
   *   .container, .section-head, .reveal — global scaffolding
   * NEW classes (Contact-scoped):
   *   .entity-hero--contact      — 40vh modifier + single-column inner
   *   .contact-section / __inner / __eyebrow / __lead
   *   .contact-grid
   *   .contact-item / __label / __value / __meta / __tbd
   *   .contact-form-block / __head
   *   .contact-form / __field / __radios / __radio / __submit
   *   .newsletter-block / __head / __tag
   *   .social-block / __head
   *   .social-links
   * Per design-system-spec §8.7 — simplest page in the system, one centered
   * block, minimum chrome. Form uses .foot__newsletter pattern (transparent
   * inputs + border-bottom line-strong).
   * ───────────────────────────────────────────────────────── */

  /* Contact-only tabnums extension */
  .contact-item__label,
  .contact-item__meta,
  .social-links a {
    font-variant-numeric: tabular-nums;
  }

  /* ─── Entity hero (Contact · 40vh compact modifier) ──────── */
  .entity-hero--contact {
    height: 40vh; min-height: 380px;
    padding-bottom: 56px;
  }
  .entity-hero--contact .entity-hero__bg {
    background-position: center 22%;
    filter: brightness(0.52) contrast(1.08) saturate(0.82);
  }
  .entity-hero--contact .entity-hero__inner {
    /* Single-column layout — no stamp on Contact hero */
    display: block;
    max-width: 1480px; margin: 0 auto;
  }
  .entity-hero--contact .entity-hero__title {
    font-size: clamp(48px, 6.4vw, 96px);
  }
  .entity-hero--contact .entity-hero__sub {
    margin-top: 18px;
    display: block;
    max-width: 48ch;
  }
  .entity-hero--contact .entity-hero__sub em {
    font-style: normal; font-weight: 500; color: var(--bone);
  }

  /* ─── Contact section (centered, max 720px) ─────────────── */
  .contact-section {
    padding: 100px 0 60px;
  }
  .contact-section__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .contact-section__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
  }
  .contact-section__eyebrow::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .contact-section__lead {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.28; letter-spacing: -0.025em;
    color: var(--bone);
    margin-bottom: 56px;
  }
  .contact-section__lead em { font-style: normal; font-weight: 500; color: var(--steel-hot); }

  /* ─── Contact grid (1-col list of items) ────────────────── */
  .contact-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .contact-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    padding: 28px 4px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .contact-item__label {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 6px;
  }
  .contact-item__value {
    font-family: var(--display); font-weight: 300;
    font-size: 22px; line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--bone);
  }
  .contact-item__value a {
    color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
  }
  .contact-item__value a:hover { color: var(--steel-hot); border-color: var(--scene); }
  .contact-item__value em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .contact-item__meta {
    display: block;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 8px;
  }
  .contact-item__tbd {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted-2);
    border: 1px dashed var(--line-strong);
    padding: 10px 14px;
    display: inline-block;
  }

  /* ─── Contact form (extends .foot__newsletter pattern) ──── */
  .contact-form-block {
    padding: 60px 0 40px;
  }
  .contact-form-block__head {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 36px;
  }
  .contact-form-block__head::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .contact-form {
    display: grid; grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form__field {
    display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid var(--line-strong);
    padding: 18px 0 14px;
  }
  .contact-form__field label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--muted);
  }
  .contact-form__field input,
  .contact-form__field textarea {
    background: none; border: none; color: var(--bone);
    font: inherit; font-family: var(--sans); font-size: 16px;
    font-weight: 300; letter-spacing: -0.005em;
    padding: 4px 0;
    width: 100%;
    resize: vertical;
  }
  .contact-form__field input:focus,
  .contact-form__field textarea:focus { outline: none; }
  .contact-form__field input::placeholder,
  .contact-form__field textarea::placeholder { color: var(--muted); }
  .contact-form__field textarea { min-height: 110px; line-height: 1.55; }

  .contact-form__radios {
    display: flex; flex-wrap: wrap; gap: 22px;
    margin-top: 4px;
  }
  .contact-form__radio {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bone-dim);
    transition: color 0.3s;
  }
  .contact-form__radio:hover { color: var(--bone); }
  .contact-form__radio input {
    appearance: none; -webkit-appearance: none;
    width: 14px; height: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    margin: 0; padding: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s;
    background: transparent;
  }
  .contact-form__radio input:checked { border-color: var(--scene); }
  .contact-form__radio input:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--scene);
  }
  .contact-form__radio input:checked + span { color: var(--bone); }

  .contact-form__submit {
    margin-top: 36px;
    display: flex; justify-content: flex-end;
  }
  .contact-form__submit button {
    background: none; border: none; color: var(--bone); cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
    padding: 8px 0;
    transition: color 0.3s, border-color 0.3s, gap 0.3s;
    display: inline-flex; align-items: center; gap: 14px;
  }
  .contact-form__submit button:hover {
    color: var(--bone);
    border-color: var(--scene);
    gap: 20px;
  }

  /* ─── Newsletter signup wrapper (re-uses .foot__newsletter) ─ */
  .newsletter-block {
    padding: 40px 0 30px;
    border-top: 1px solid var(--line);
  }
  .newsletter-block__head {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
  }
  .newsletter-block__head::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .newsletter-block__tag {
    font-size: 14px; color: var(--bone-dim); max-width: 56ch;
    margin-bottom: 22px; line-height: 1.6;
  }

  /* ─── Social links row ──────────────────────────────────── */
  .social-block {
    padding: 50px 0 90px;
    border-top: 1px solid var(--line);
  }
  .social-block__head {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 30px;
  }
  .social-block__head::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .social-links {
    display: flex; flex-wrap: wrap;
    gap: 0;
  }
  .social-links a {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone-dim);
    padding: 14px 20px 14px 0;
    margin-right: 32px;
    border-bottom: 1px solid var(--line-strong);
    display: inline-flex; align-items: center; gap: 14px;
    transition: color 0.3s, border-color 0.3s, gap 0.3s;
  }
  .social-links a:last-child { margin-right: 0; }
  .social-links a:hover {
    color: var(--bone);
    border-color: var(--scene);
    gap: 20px;
  }
  .social-links a .arrow { color: var(--scene); }

  /* ─── Contact responsive overrides ──────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--contact { padding: 0 24px 36px; height: auto; min-height: 360px; padding-top: 140px; }
    .contact-item { grid-template-columns: 1fr; gap: 10px; padding: 22px 4px; }
    .contact-item__label { padding-top: 0; }
    .contact-item__value { font-size: 20px; }
    .contact-section__inner { padding: 0 4px; }
    .social-links a { margin-right: 20px; padding: 12px 14px 12px 0; }
  }
  @media (max-width: 640px) {
    .contact-form__radios { gap: 14px; }
  }

  /* ── Concert-detail (Faza 4.3.1) ─────────────────────────────
       Source: docs/visual/alexandruanastasiu.com/Concert-detail.html
       Reuses: .entity-hero, .entity-hero__bg/__veil/__grain, .container,
       .section-head, .featured__opus/__title/__sub/__body/__movements/__credits,
       .reveal. Adds: .back-strip, .entity-hero__date, .entity-hero__status,
       .meta-bar (+pills), .program__total, .featured__credits--3,
       .scene-credits, .gallery-section/.gallery/.gallery__item, .press-stubs,
       .press-stub, .related-section/.related-strip/.related-card. ───── */

  /* tabular numerals for new selectors with digits */
  .entity-hero__date, .entity-hero__date .day,
  .entity-hero__status,
  .meta-bar, .meta-bar dd,
  .gallery__caption,
  .press-stub__date,
  .related-card__year, .related-card__date {
    font-variant-numeric: tabular-nums;
  }

  /* ─── Back-link strip (above hero) ─────────────────────────── */
  .back-strip {
    position: relative;
    padding: 96px 48px 12px;
    z-index: 3;
  }
  .back-link {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--bone-dim);
    display: inline-flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 6px;
    transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .back-link:hover { gap: 22px; color: var(--bone); border-color: var(--scene); }
  .back-link .arrow { transition: transform 0.3s ease; }
  .back-link:hover .arrow { transform: translateX(-4px); }

  /* ─── Concert hero overrides (~50vh, date-stamp overlay) ──── */
  .entity-hero--concert {
    height: 50vh; min-height: 460px;
    padding: 0 48px 56px;
  }
  .entity-hero--concert .entity-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: end;
  }
  .entity-hero--concert .entity-hero__eyebrow {
    flex-wrap: wrap;
  }
  .entity-hero--concert .entity-hero__eyebrow .tag {
    border: 1px solid var(--line-strong); padding: 5px 10px;
    color: var(--scene); letter-spacing: 0.22em;
  }
  /* Mono sub-line variant used on the Concert hero (mockup line 945) */
  .entity-hero__sub--mono {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .entity-hero__sub--mono strong { color: var(--steel-hot); font-weight: 500; }
  .entity-hero__venue {
    margin-top: 18px;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--bone-dim);
    letter-spacing: -0.01em;
  }

  /* Date stamp — Geist 200 ~88px (≥60px per spec §3.2) */
  .entity-hero__date {
    border: 1px solid var(--line-strong);
    padding: 22px 24px 18px;
    display: flex; flex-direction: column; gap: 4px;
    color: var(--bone);
    background: rgba(12,11,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: end;
  }
  .entity-hero__date .day {
    font-family: var(--display); font-weight: 200;
    font-size: 88px; line-height: 0.92;
    letter-spacing: -0.05em; color: var(--bone);
    display: flex; align-items: baseline; gap: 8px;
  }
  .entity-hero__date .day .dot {
    color: var(--scene); font-weight: 200;
    font-size: 60px; line-height: 1;
  }
  .entity-hero__date .label {
    font-family: var(--mono);
    font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted); margin-top: 6px;
  }
  .entity-hero__date .occ {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--bone-dim);
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 6px;
  }
  .entity-hero__status {
    font-family: var(--mono);
    font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--muted-2);
    align-self: end;
    border: 1px solid currentColor; padding: 6px 10px;
    margin-top: 8px;
    width: max-content;
  }
  .entity-hero--concert .entity-hero__bottom {
    gap: 24px; flex-wrap: wrap;
  }

  /* ─── Meta bar (4-col mono uppercase) ──────────────────────── */
  .meta-bar-section { background: var(--ink); }
  .meta-bar {
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    padding: 28px 0;
    margin-top: 56px;
  }
  .meta-bar dl {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
    font-family: var(--mono); color: var(--bone-dim);
    text-transform: uppercase;
  }
  .meta-bar dt {
    font-size: 9.5px; letter-spacing: 0.26em;
    color: var(--muted); margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .meta-bar dt::before {
    content: ''; width: 10px; height: 1px; background: var(--scene); flex-shrink: 0;
  }
  .meta-bar dd {
    font-size: 12px; letter-spacing: 0.08em;
    color: var(--bone); font-weight: 400;
    line-height: 1.65;
  }
  .meta-bar dd .secondary {
    display: block; font-size: 10.5px; letter-spacing: 0.18em;
    color: var(--muted); margin-top: 4px; text-transform: uppercase;
  }
  .meta-bar dd .display {
    font-family: var(--display); font-weight: 400;
    font-size: 16px; letter-spacing: -0.01em;
    color: var(--bone); text-transform: none;
    display: block;
    margin-top: 2px;
  }
  .meta-bar dd a {
    color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
  }
  .meta-bar dd a:hover { color: var(--bone); border-bottom-color: var(--scene); }
  .meta-bar dd a.muted { color: var(--muted); border-bottom-color: var(--line); }
  .meta-bar dd ul { list-style: none; }
  .meta-bar dd li { margin-bottom: 6px; }
  .meta-bar dd li:last-child { margin-bottom: 0; }
  .meta-bar__tags {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
  }
  .meta-bar__tags .label {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
    color: var(--muted); text-transform: uppercase;
    margin-right: 8px; align-self: center;
  }
  .meta-bar__pill {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bone-dim);
    border: 1px solid var(--line-strong);
    padding: 6px 12px;
    transition: color 0.3s, border-color 0.3s;
  }
  .meta-bar__pill:hover { color: var(--bone); border-color: var(--scene); }

  /* ─── Program section ─────────────────────────────────────── */
  .program { padding-bottom: 100px; }
  .program__head { margin-bottom: 32px; }
  .program__work { margin-bottom: 56px; }
  .program__work:last-child { margin-bottom: 0; }
  .program__total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0 0; margin-top: 0;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
  }
  .program__total strong { color: var(--bone-dim); font-weight: 400; }
  .program__link {
    color: var(--bone); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
    transition: border-color 0.3s;
  }
  .program__link:hover { border-bottom-color: var(--scene); }

  /* ─── Persoanele de pe scenă (3-col credits modifier) ─────── */
  .scene-credits { padding-bottom: 100px; }
  .featured__credits--3 { grid-template-columns: repeat(3, 1fr); }
  .featured__credits--3 .name a {
    color: var(--bone); border-bottom: 1px solid var(--line);
    padding-bottom: 2px; transition: border-color 0.3s;
  }
  .featured__credits--3 .name a:hover { border-bottom-color: var(--scene); }

  /* ─── Gallery (3-col, aspect 4/3, press-style filter §7.1) ── */
  .gallery-section { padding-bottom: 100px; }
  .gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-top: 24px;
  }
  .gallery__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: transform 0.4s ease, border-color 0.4s ease;
  }
  .gallery__item:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .gallery__item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.05) saturate(0.9);
    transition: transform 0.7s ease;
  }
  .gallery__item:hover img { transform: scale(1.04); }
  .gallery__item--placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
    border-style: dashed;
    border-color: var(--line-strong);
    background:
      repeating-linear-gradient(
        135deg,
        var(--ink-2),
        var(--ink-2) 14px,
        var(--ink-3) 14px,
        var(--ink-3) 28px
      );
  }
  .gallery__item--placeholder::before {
    content: 'IMG · TBD';
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.28em;
    color: var(--muted-2); text-transform: uppercase;
    border: 1px solid var(--line-strong);
    padding: 8px 14px;
    background: rgba(12,11,10,0.6);
  }
  .gallery__item--placeholder::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,11,10,0.0) 60%, rgba(12,11,10,0.45) 100%);
    pointer-events: none;
  }
  .gallery__caption {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
    color: var(--bone-dim); text-transform: uppercase;
    background: rgba(12,11,10,0.7);
    padding: 7px 10px;
    border: 1px solid var(--line);
    backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); }

  /* ─── Press stubs (list to press_item archive entries) ────── */
  .press-stubs-section {
    padding-bottom: 100px; background: var(--ink-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .press-stubs { list-style: none; margin-top: 24px; }
  .press-stub {
    display: grid; grid-template-columns: 140px 1fr 220px 60px;
    gap: 32px; align-items: baseline;
    padding: 22px 12px;
    border-bottom: 1px solid var(--line);
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  .press-stub:hover { background: var(--ink-3); padding-left: 28px; padding-right: 20px; }
  .press-stub::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
    background: var(--scene); transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .press-stub:hover::before { width: 14px; }
  .press-stub__date {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase;
  }
  .press-stub__title {
    font-family: var(--display); font-weight: 400; font-size: 18px;
    letter-spacing: -0.01em; color: var(--bone);
  }
  .press-stub__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .press-stub__source {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    color: var(--bone-dim); text-transform: uppercase;
  }
  .press-stub__arrow {
    text-align: right;
    font-family: var(--mono); font-size: 14px;
    color: var(--muted); transition: color 0.3s, transform 0.3s;
  }
  .press-stub:hover .press-stub__arrow { color: var(--scene); transform: translateX(4px); }

  /* ─── Related strip (2-col: works + concerts) ─────────────── */
  .related-section { padding: 100px 0 120px; }
  .related-strip {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    margin-top: 32px;
  }
  .related-col__head {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene); margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .related-col__head::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .related-card {
    display: block;
    padding: 22px 24px;
    border: 1px solid var(--line);
    margin-bottom: 14px;
    transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
    position: relative;
  }
  .related-card:hover {
    border-color: var(--line-strong);
    background: var(--ink-2);
    transform: translateX(4px);
  }
  .related-card__eyebrow {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
    display: flex; gap: 12px;
  }
  .related-card__eyebrow .year,
  .related-card__eyebrow .date { color: var(--bone-dim); }
  .related-card__year, .related-card__date { color: var(--bone-dim); }
  .related-card__title {
    font-family: var(--display); font-weight: 400; font-size: 22px;
    letter-spacing: -0.02em; color: var(--bone);
    margin-bottom: 6px;
  }
  .related-card__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .related-card__meta {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
  }
  .related-card__cta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--bone-dim);
    position: absolute; top: 22px; right: 24px;
    transition: color 0.3s, transform 0.3s;
  }
  .related-card:hover .related-card__cta { color: var(--scene); transform: translateX(4px); }

  /* ─── Concert responsive overrides ────────────────────────── */
  @media (max-width: 1100px) {
    /* extra top padding clears the top-docked mobile music player */
    .back-strip { padding: 130px 24px 12px; }
    .entity-hero--concert { padding: 0 24px 48px; height: auto; min-height: 520px; padding-top: 60px; }
    /* minmax(0,1fr) + min-width:0 so the wide date stamp can't force the track
       wider than the viewport (was pushing title + stamp off the right edge). */
    .entity-hero--concert .entity-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .entity-hero--concert .entity-hero__inner > * { min-width: 0; }
    .entity-hero--concert .entity-hero__date { align-self: start; }
    .entity-hero--concert .entity-hero__date .day { font-size: clamp(36px, 11.5vw, 64px); }
    .entity-hero--concert .entity-hero__date .day .dot { font-size: 0.68em; }
    .meta-bar dl { grid-template-columns: 1fr 1fr; gap: 32px; }
    .gallery { grid-template-columns: 1fr 1fr; }
    .press-stub { grid-template-columns: 1fr; gap: 8px; padding: 22px 12px; }
    .press-stub__arrow { display: none; }
    .related-strip { grid-template-columns: 1fr; }
    .featured__credits--3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .meta-bar dl { grid-template-columns: 1fr; gap: 24px; }
    .gallery { grid-template-columns: 1fr; }
    .featured__credits--3 { grid-template-columns: 1fr; }
    .entity-hero--concert .entity-hero__inner { gap: 20px; }
  }

  /* ── Album-detail (Faza 4.3.2) ──────────────────────────────
     Single-page detail for an album entity (Bach Vibes, Just Tango,
     etc.). Reuses concert-detail scaffold heavily:
       .back-strip, .entity-hero scaffold + __bg/__veil/__grain/__inner,
       .entity-hero__eyebrow, .entity-hero__title, .entity-hero__sub--mono,
       .entity-hero__stamp (year + catalog),
       .meta-bar + .meta-bar__pill,
       .featured__credits--3, .gallery, .press-stubs, .related-strip,
       .section-head, .container, .reveal.

     Adds:
       .entity-hero--album (50vh + cover-on-right inner)
       .album-hero__cover (square cover floated right)
       .album-body (single-col body, max 65ch)
       .tracklist, .tracklist__row + .track__nr/__title/__by/__credits/__dur
       .tracklist__total
       .album-related (grid of mini album cards)
     ───────────────────────────────────────────────────────────── */

  .tracklist, .tracklist__row, .tracklist__total,
  .album-hero__cover-meta, .album-body__eyebrow {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
  }

  /* Hero modifier — same scaffold as concert hero, but stamp area is
     replaced by a square cover image on the right column. */
  .entity-hero--album {
    height: 50vh; min-height: 480px;
    padding: 0 48px 56px;
  }
  .entity-hero--album .entity-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 80px; align-items: end;
  }
  .entity-hero--album .entity-hero__bg {
    filter: brightness(0.55) contrast(1.08) saturate(0.85);
  }
  .album-hero__cover {
    position: relative;
    aspect-ratio: 1; width: 100%;
    background: var(--ink-2);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    align-self: end;
  }
  .album-hero__cover img {
    width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.02);
    display: block;
  }
  .album-hero__cover-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(12,11,10,0.78) 100%);
    color: var(--bone-dim);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
    text-transform: uppercase;
    display: flex; justify-content: space-between; gap: 12px;
    pointer-events: none;
  }
  .album-hero__cover-meta .year { color: var(--bone); font-weight: 500; }
  .album-hero__cover--placeholder {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
  }
  .album-hero__cover--placeholder::before {
    content: ''; position: absolute; inset: 18px;
    border: 1px solid var(--line);
  }
  .album-hero__cover--placeholder .pl-title {
    font-family: var(--display); font-weight: 200;
    font-size: 26px; letter-spacing: -0.02em; color: var(--bone-dim);
    padding: 0 22px;
  }

  /* Tracklist (§ 01) — denser than .featured__movements; supports
     longer titles, credits lines, optional foreign-author bylines. */
  .tracklist-section { padding: 24px 0 80px; }
  .tracklist {
    list-style: none; margin-top: 24px;
    border-top: 1px solid var(--line);
  }
  .tracklist__row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 72px;
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.3s ease;
  }
  .tracklist__row:hover { background: var(--ink-2); }
  .track__nr {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene);
    padding-left: 4px;
  }
  .track__main { min-width: 0; }
  .track__title {
    font-family: var(--display); font-weight: 400;
    font-size: 20px; letter-spacing: -0.015em; color: var(--bone);
    line-height: 1.25;
  }
  .track__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .track__by {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bone-dim);
    margin-top: 4px;
  }
  .track__credits {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    color: var(--muted);
    margin-top: 4px;
    text-transform: none;
  }
  .track__dur {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    color: var(--bone-dim);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tracklist__total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 22px 4px 0;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
  }
  .tracklist__total strong {
    font-family: var(--display); font-weight: 300; font-size: 28px;
    letter-spacing: -0.02em; color: var(--bone);
    text-transform: none;
  }

  /* Body narrative (§ 03 Despre) — single-col reading column. */
  .album-body { padding: 80px 0 60px; }
  .album-body__inner { max-width: 65ch; margin: 0 auto; }
  .album-body__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--scene);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 14px;
  }
  .album-body__eyebrow::before {
    content: ''; width: 36px; height: 1px; background: var(--scene);
  }
  .album-body__text {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.65; color: var(--bone-dim);
  }
  .album-body__text p + p { margin-top: 1.1em; }
  .album-body__text em { color: var(--bone); font-style: italic; }

  /* Related strip — 4-col mini album cards (.album mini variant). */
  .album-related { padding: 80px 0 120px; }
  .album-related__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
    margin-top: 32px;
  }

  /* Album responsive overrides */
  @media (max-width: 1100px) {
    .entity-hero--album { padding: 0 24px 48px; height: auto; min-height: 520px; padding-top: 60px; }
    .entity-hero--album .entity-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .album-hero__cover { max-width: 280px; align-self: start; }
    .album-related__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .entity-hero--album .entity-hero__inner { gap: 20px; }
    .tracklist__row { grid-template-columns: 36px minmax(0, 1fr) 60px; gap: 14px; }
    .track__title { font-size: 17px; }
    .album-related__grid { grid-template-columns: 1fr; }
  }

  /* ── Work-detail (Faza 4.3.3) ───────────────────────────────
     Single-page detail for a work entity (own concertos like
     "The algoRhythm", "Rhythm of the Day", "Anotimpurile" and
     arrangements: Bach Vibes, Just Musette, Just Tango etc.).

     Reuses concert-detail + album-detail scaffold heavily:
       .back-strip, .back-link,
       .entity-hero scaffold + __bg/__veil/__grain/__inner,
       .entity-hero__eyebrow, .entity-hero__title, .entity-hero__sub--mono,
       .entity-hero__date (repurposed as opus stamp),
       .meta-bar + .meta-bar__pill + .meta-bar__tags,
       .section-head, .container, .reveal,
       .featured__movements (mișcările listing),
       .featured__credits + .featured__credits--3,
       .album-body / .album-body__inner / .album-body__eyebrow / .album-body__text,
       .related-strip + .related-card, .album-related__grid.

     Adds:
       .entity-hero--work (50vh + opus-stamp on right)
       .work-hero__stamp (replaces date stamp; renders opus + year + duration)
       .premieres / .premiere / .premiere__date/__venue/__cond/__co/__notes
       .resources / .resource-link (PDF / YouTube / external row)
       .work-concerts (concerts-where-performed mini list, reuses concert row)
     ───────────────────────────────────────────────────────────── */

  .work-hero__stamp, .premiere__date,
  .resources, .resource-link {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
  }

  .entity-hero--work {
    height: 50vh; min-height: 460px;
    padding: 0 48px 56px;
  }
  .entity-hero--work .entity-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: end;
  }
  .entity-hero--work .entity-hero__bg {
    filter: brightness(0.55) contrast(1.08) saturate(0.85);
  }
  .entity-hero--work .entity-hero__eyebrow { flex-wrap: wrap; }
  .entity-hero--work .entity-hero__eyebrow .tag {
    border: 1px solid var(--line-strong); padding: 5px 10px;
    color: var(--scene); letter-spacing: 0.22em;
  }

  /* Opus stamp — fills the right column like .entity-hero__date does on
     Concert hero, but is composed of three rows: opus / year / duration. */
  .work-hero__stamp {
    border: 1px solid var(--line-strong);
    padding: 22px 24px 18px;
    display: flex; flex-direction: column; gap: 10px;
    color: var(--bone);
    background: rgba(12,11,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: end;
  }
  .work-hero__stamp .row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .work-hero__stamp .row:first-child { border-top: none; padding-top: 0; }
  .work-hero__stamp .label {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--muted);
  }
  .work-hero__stamp .val {
    font-family: var(--display); font-weight: 300;
    font-size: 28px; letter-spacing: -0.02em; color: var(--bone);
    line-height: 1;
  }
  .work-hero__stamp .val--lg {
    font-size: 56px; font-weight: 200; letter-spacing: -0.04em;
  }
  .work-hero__stamp .val em { font-style: normal; font-weight: 500; color: var(--steel-hot); }

  /* Premieres section (§ 02). Each row is a stripped-down concert teaser:
     date · venue · conductor · co-soloists · optional notes. */
  .premieres-section { padding: 0 0 80px; }
  .premieres {
    list-style: none; margin-top: 24px;
    border-top: 1px solid var(--line);
  }
  .premiere {
    display: grid;
    grid-template-columns: 140px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.3s ease;
  }
  .premiere:hover { background: var(--ink-2); }
  .premiere__date {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.20em;
    text-transform: uppercase; color: var(--scene);
    font-variant-numeric: tabular-nums;
  }
  .premiere__date .day {
    display: block;
    font-family: var(--display); font-weight: 200;
    font-size: 32px; line-height: 1; letter-spacing: -0.03em;
    color: var(--bone);
    text-transform: none;
    margin-bottom: 6px;
  }
  .premiere__venue {
    font-family: var(--display); font-weight: 400;
    font-size: 18px; letter-spacing: -0.01em; color: var(--bone);
    line-height: 1.3;
  }
  .premiere__venue .city {
    display: block;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 6px;
  }
  .premiere__cond, .premiere__co {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bone-dim);
  }
  .premiere__cond .label, .premiere__co .label {
    display: block;
    font-size: 9px; letter-spacing: 0.26em; color: var(--muted);
    margin-bottom: 4px;
  }
  .premiere__cond strong, .premiere__co strong {
    color: var(--bone); font-weight: 500;
    text-transform: none; letter-spacing: 0.04em;
  }
  .premiere__notes {
    grid-column: 1 / -1;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em;
    color: var(--muted);
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    text-transform: none;
  }

  /* Resources section (§ 05). Single mono row of PDF / YouTube / external. */
  .resources-section { padding: 60px 0; }
  .resources {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 24px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  .resource-link {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bone-dim);
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .resource-link:hover {
    color: var(--bone); border-color: var(--scene);
    background: var(--ink-2);
  }
  .resource-link .icon {
    font-family: var(--mono); font-size: 13px;
    color: var(--scene); letter-spacing: 0;
  }
  .resource-link .label {
    display: block; font-size: 9px; letter-spacing: 0.26em;
    color: var(--muted); margin-bottom: 4px;
  }
  .resource-link .val {
    display: block;
    font-family: var(--display); font-weight: 400;
    font-size: 15px; letter-spacing: -0.01em;
    text-transform: none; color: var(--bone);
  }
  .resource-link .arrow {
    margin-left: auto; color: var(--scene);
    transition: transform 0.3s ease;
  }
  .resource-link:hover .arrow { transform: translateX(4px); }

  /* Concerts where this work was performed (§ 06). Mini list — denser
     than .concert on Homepage; uses the same building blocks but tighter. */
  .work-concerts-section { padding: 60px 0; }
  .work-concerts {
    list-style: none;
    border-top: 1px solid var(--line);
    margin-top: 24px;
  }
  .work-concerts__row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background 0.3s ease, padding 0.3s ease;
  }
  .work-concerts__row:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
  .work-concerts__date {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--scene);
    font-variant-numeric: tabular-nums;
  }
  .work-concerts__title {
    font-family: var(--display); font-weight: 400;
    font-size: 18px; letter-spacing: -0.01em; color: var(--bone);
  }
  .work-concerts__venue {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bone-dim);
  }
  .work-concerts__arrow {
    color: var(--scene); font-family: var(--mono); font-size: 14px;
    transition: transform 0.3s ease;
  }
  .work-concerts__row:hover .work-concerts__arrow { transform: translateX(4px); }

  /* Work responsive overrides */
  @media (max-width: 1100px) {
    .entity-hero--work { padding: 0 24px 48px; height: auto; min-height: 520px; padding-top: 60px; }
    .entity-hero--work .entity-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .work-hero__stamp { max-width: 320px; }
    .premiere {
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 16px;
    }
    .premiere__cond, .premiere__co {
      grid-column: 2;
    }
    .work-concerts__row { grid-template-columns: 90px minmax(0, 1fr) auto; }
    .work-concerts__venue { grid-column: 1 / -1; padding-left: calc(90px + 24px); }
  }
  @media (max-width: 720px) {
    .entity-hero--work .entity-hero__inner { gap: 20px; }
    .premiere { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
    .premiere__cond, .premiere__co { grid-column: 1; }
    .premiere__date .day { font-size: 26px; }
    .work-hero__stamp .val--lg { font-size: 40px; }
    .resources { grid-template-columns: 1fr; }
    .work-concerts__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .work-concerts__venue { padding-left: 0; }
  }

  /* ── Sub-brand-detail (Faza 4.3.4) ──────────────────────────
       Source: docs/superpowers/specs/2026-05-26-fundamental-fields-design.md §8.9
               docs/PROFIL_PRELIMINAR.md §7 (sub-branduri Vibes)
       Seed:   /proiecte/accord-vibes/ (year=2011, entity_status=activ)

       Components unique to Sub-brand:
         .entity-hero--subbrand        (50vh + text-emblem on right)
         .subbrand-hero__emblem        (TEXT placeholder — Regula 2)
         .members-section              (§ 02 Membri wrapper)
         .members-grid                 (3-col card grid)
         .member-card                  (single member card)
         .member__name / __role        (display + mono uppercase)
         .member__period / __instrument (mono uppercase secondary)

       Reuses (no new CSS needed):
         .back-strip, .entity-hero, .entity-hero__bg/__veil/__grain/__inner,
         .entity-hero__eyebrow, .entity-hero__title, .entity-hero__sub--mono,
         .entity-hero__venue, .entity-hero__bottom, .entity-hero__status,
         .meta-bar, .meta-bar__tags, .meta-bar__pill,
         .section-head, .container, .reveal,
         .disco__grid, .album, .album__cover, .album__cover--placeholder,
         .featured__credits--3, .gallery, .album-body, .album-body__text,
         .related-strip, .related-card, .work-concerts (concert list pattern),
         .press-stubs (news list pattern).
       ──────────────────────────────────────────────────────── */

  /* Sub-brand hero overrides (~50vh, text-emblem on right) */
  .entity-hero--subbrand {
    height: 50vh; min-height: 460px;
    padding: 0 48px 56px;
  }
  .entity-hero--subbrand .entity-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: end;
  }
  .entity-hero--subbrand .entity-hero__bg {
    filter: brightness(0.45) contrast(1.1) saturate(0.7);
  }
  .entity-hero--subbrand .entity-hero__eyebrow { flex-wrap: wrap; }
  .entity-hero--subbrand .entity-hero__eyebrow .tag {
    border: 1px solid var(--line-strong); padding: 5px 10px;
    color: var(--scene); letter-spacing: 0.22em;
  }

  /* Text-only emblem (per Regula 2 — no SVG / image logos here).
     Visually echoes .subbrand__emblem from /discografie/ but enlarged
     for a hero treatment. Square-ish, monochromatic, mono uppercase. */
  .subbrand-hero__emblem {
    aspect-ratio: 1.15 / 1;
    background: rgba(12,11,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--line-strong);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 28px 22px;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone);
    text-align: center;
    line-height: 1.35;
    filter: grayscale(1);
    align-self: end;
  }
  .subbrand-hero__emblem .emblem__bracket {
    color: var(--muted-2);
    font-weight: 300;
    margin: 0 4px;
  }
  .subbrand-hero__emblem .emblem__meta {
    margin-top: 14px;
    font-size: 9.5px; letter-spacing: 0.28em;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    width: 100%;
  }

  /* § 02 Membri — card grid pattern, monochromatic. */
  .members-section {
    background: var(--ink);
    padding-bottom: 96px;
  }
  .members-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--line);
  }
  .member-card {
    padding: 32px 24px 28px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    transition: background 0.5s ease;
    display: flex; flex-direction: column;
    gap: 8px;
  }
  .member-card:nth-child(3n) { border-right: none; }
  .member-card:hover { background: var(--ink-2); }
  .member__name {
    font-family: var(--display); font-weight: 300;
    font-size: 20px; letter-spacing: -0.01em;
    color: var(--bone); line-height: 1.2;
  }
  .member__role {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel-hot);
    margin-top: 2px;
  }
  .member__instrument {
    font-family: var(--mono);
    font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-dim);
  }
  .member__period {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  @media (max-width: 1100px) {
    .entity-hero--subbrand { padding: 0 24px 48px; height: auto; min-height: 520px; padding-top: 60px; }
    .entity-hero--subbrand .entity-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .members-grid { grid-template-columns: repeat(2, 1fr); }
    .member-card:nth-child(3n) { border-right: 1px solid var(--line); }
    .member-card:nth-child(2n) { border-right: none; }
  }
  @media (max-width: 720px) {
    .entity-hero--subbrand .entity-hero__inner { gap: 20px; }
    .subbrand-hero__emblem { aspect-ratio: 1.6 / 1; font-size: 12px; }
    .members-grid { grid-template-columns: 1fr; }
    .member-card { border-right: none !important; }
  }

  /* ── Press/News detail (Faza 4.4.1) ──────────────────────────
   * Single-item detail templates for press_item + news_post. They are
   * "feed item" entities — light, content-first detail layout. Reuse
   *   .back-strip / .back-link        (line 2624)
   *   .entity-hero scaffold + __bg/__veil/__grain/__inner/__eyebrow/__title
   *   .meta-bar / .meta-bar__pill     (line 2768)
   *   .album-body / .album-body__text (rich body, single column)
   *   .related-strip / .related-card  (line 2923)
   *   .press-stubs / .press-stub      (line 2885 — used by linked-items list)
   * New here:
   *   .entity-hero--press-detail / .entity-hero--news-detail (40vh compact)
   *   .press-meta-line (article body lead-in: subtitle + source line)
   *   .linked-strip / .linked-card (small refs to concert/work/album/sub_brand)
   * NEWS vs PRESS visual differentiator (per Press-News section):
   *   .entity-hero--news-detail .entity-hero__eyebrow { color: var(--bone-dim) }
   *   .entity-hero--press-detail .entity-hero__eyebrow { color: var(--scene) } */

  .entity-hero--press-detail,
  .entity-hero--news-detail {
    height: 40vh; min-height: 440px;
    padding: 0 48px 56px;
  }
  .entity-hero--press-detail .entity-hero__bg,
  .entity-hero--news-detail .entity-hero__bg {
    background-position: center 30%;
  }
  .entity-hero--press-detail .entity-hero__inner,
  .entity-hero--news-detail .entity-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .entity-hero--press-detail .entity-hero__title,
  .entity-hero--news-detail .entity-hero__title {
    font-size: clamp(36px, 4.6vw, 76px);
    max-width: 22ch;
  }
  .entity-hero--press-detail .entity-hero__sub,
  .entity-hero--news-detail .entity-hero__sub {
    margin-top: 18px;
    font-size: clamp(14px, 1.3vw, 18px);
  }
  /* NEWS = bone-dim eyebrow (matches feed-item--news convention) */
  .entity-hero--news-detail .entity-hero__eyebrow { color: var(--bone-dim); }
  /* PRESS = scene (default) — explicit override for clarity */
  .entity-hero--press-detail .entity-hero__eyebrow { color: var(--scene); }

  /* Linked-items strip — small cards referencing concert/work/album/sub_brand.
   * Sits in §02. Lighter than .related-card (which is for sibling items). */
  .linked-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .linked-card {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--line);
    background: var(--ink-2);
    transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
    position: relative;
  }
  .linked-card:hover {
    border-color: var(--scene);
    background: var(--ink-3);
    transform: translateX(3px);
  }
  .linked-card__kind {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--scene);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
  }
  .linked-card__kind::before {
    content: ''; width: 14px; height: 1px; background: currentColor;
  }
  .linked-card__title {
    font-family: var(--display); font-weight: 400; font-size: 18px;
    letter-spacing: -0.01em; color: var(--bone); line-height: 1.25;
    margin-bottom: 4px;
  }
  .linked-card__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .linked-card__meta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
  }
  .linked-card__cta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--bone-dim);
    position: absolute; top: 18px; right: 20px;
    transition: color 0.3s, transform 0.3s;
  }
  .linked-card:hover .linked-card__cta { color: var(--scene); transform: translateX(3px); }

  /* Press/news detail responsive overrides */
  @media (max-width: 1100px) {
    .entity-hero--press-detail,
    .entity-hero--news-detail {
      padding: 0 24px 40px; height: auto; min-height: 420px; padding-top: 140px;
    }
    .linked-strip { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .entity-hero--press-detail,
    .entity-hero--news-detail { padding-top: 120px; min-height: 380px; }
    .linked-strip { grid-template-columns: 1fr; }
  }

  /* ── Student/Festival detail (Faza 4.4.2) ────────────────────
   * Single-item detail templates for student, festival, festival_edition.
   * Reuse:
   *   .back-strip / .back-link            (line 2624)
   *   .entity-hero scaffold + sub-elements (line 763+)
   *   .entity-hero__sub--mono             (line 2657)
   *   .entity-hero__venue                 (line 2665)
   *   .entity-hero__date / .day / .label  (line 2674)  — used by festival_edition
   *   .entity-hero__status                (line 2707)
   *   .entity-hero__stamp / .roman / .label / .span / .meta (line 820)
   *   .meta-bar / .meta-bar__pill         (line 2722 / 2779)
   *   .section-head                       (existing)
   *   .album-body / .album-body__text     (existing — narrative body)
   *   .gallery / .gallery__item           (line 2817)
   *   .members-grid / .member-card        (line 3505 — reused for festival editions list var.)
   *   .related-strip / .related-card      (line 2923)
   *
   * New here:
   *   .entity-hero--student (40vh + softer hero filter per spec §1.4)
   *   .entity-hero--festival (50vh)
   *   .entity-hero--festival-edition (50vh + date stamp on right)
   *   .achievements + .achievement (repeater_achievement list)
   *   .editions + .edition-card (festival children list)
   *   .program-items + .program-item (repeater_program_item list)
   */

  /* ─── Student hero (40vh, softer filter — Human Pedagogue) ── */
  .entity-hero--student {
    height: 40vh; min-height: 420px;
    padding: 0 48px 56px;
  }
  /* SOFTER filter (spec §1.4): matches `.student-card__img img` documented
     deviation. Profesor-adjacent pages get a gentler, warmer hero treatment. */
  .entity-hero--student .entity-hero__bg {
    filter: brightness(0.95) saturate(0.95);
    background-position: center 28%;
  }
  .entity-hero--student .entity-hero__veil {
    background: linear-gradient(180deg, rgba(12,11,10,0.45) 0%, rgba(12,11,10,0.65) 60%, rgba(12,11,10,0.8) 100%);
  }
  .entity-hero--student .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }
  .entity-hero--student .entity-hero__title {
    font-size: clamp(48px, 5.4vw, 96px);
  }

  /* ─── Festival hero (50vh, default filter) ─────────────────── */
  .entity-hero--festival {
    height: 50vh; min-height: 500px;
    padding: 0 48px 56px;
  }
  .entity-hero--festival .entity-hero__bg {
    background-position: center 32%;
  }
  .entity-hero--festival .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }

  /* ─── Festival edition hero (50vh, date stamp on right) ───── */
  .entity-hero--festival-edition {
    height: 50vh; min-height: 500px;
    padding: 0 48px 56px;
  }
  .entity-hero--festival-edition .entity-hero__bg {
    background-position: center 32%;
  }
  .entity-hero--festival-edition .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  }
  .entity-hero--festival-edition .entity-hero__title {
    font-size: clamp(44px, 5vw, 84px);
  }
  /* Date span block: "15·09 — 20·09 · 2026" stamp */
  .entity-hero__datespan {
    border: 1px solid var(--line-strong);
    padding: 22px 24px 18px;
    display: flex; flex-direction: column; gap: 8px;
    color: var(--bone);
    background: rgba(12,11,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: end;
  }
  .entity-hero__datespan .range {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(36px, 3.4vw, 56px); line-height: 0.95;
    letter-spacing: -0.04em; color: var(--bone);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  }
  .entity-hero__datespan .range .dot { color: var(--scene); font-weight: 200; }
  .entity-hero__datespan .range .sep {
    font-size: 0.55em; color: var(--muted); margin: 0 6px;
  }
  .entity-hero__datespan .year {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--bone-dim);
  }
  .entity-hero__datespan .label {
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 4px;
  }

  /* ─── Achievements (student §02 — repeater_achievement) ───── */
  .achievements-section { padding-bottom: 100px; }
  .achievements {
    list-style: none;
    margin-top: 24px;
    border-top: 1px solid var(--line);
  }
  .achievement {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  .achievement:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
  .achievement::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 0; height: 1px; background: var(--scene);
    transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .achievement:hover::before { width: 14px; }
  .achievement__date {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
    line-height: 1.5;
  }
  .achievement__date em {
    font-style: normal; color: var(--scene);
    display: block; font-size: 10px;
  }
  .achievement__desc {
    font-family: var(--text); font-size: 15.5px; line-height: 1.65;
    color: var(--bone-dim);
  }
  .achievement__desc em { color: var(--bone); font-style: italic; font-weight: 400; }
  .achievement__desc strong { color: var(--bone); font-weight: 500; }

  /* ─── Editions list (festival §02 — children festival_edition) ── */
  .editions-section { padding-bottom: 100px; }
  .editions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .edition-card {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 28px 24px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    transition: background 0.5s ease;
    position: relative;
  }
  .edition-card:hover { background: var(--ink-2); }
  .edition__year {
    font-family: var(--display); font-weight: 200;
    font-size: 48px; line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--steel-hot);
  }
  .edition__dates {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
  }
  .edition__title {
    font-family: var(--display); font-weight: 300;
    font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--bone);
    margin-top: 4px;
  }
  .edition__title em { font-style: normal; font-weight: 500; color: var(--bone); }
  .edition__theme {
    font-family: var(--text); font-size: 14px; line-height: 1.55;
    color: var(--bone-dim);
    margin-top: 2px;
  }
  .edition__cta {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--bone-dim);
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    display: inline-flex; align-items: center; gap: 10px;
    transition: color 0.3s, gap 0.3s;
  }
  .edition-card:hover .edition__cta { color: var(--scene); gap: 16px; }

  /* ─── Program items (festival_edition §02 — repeater_program_item) ── */
  .program-items-section { padding-bottom: 100px; }
  .program-items {
    list-style: none;
    margin-top: 24px;
    border-top: 1px solid var(--line);
  }
  .program-item {
    display: grid;
    grid-template-columns: 120px 64px minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
  }
  .program-item:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
  .program-item::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 0; height: 1px; background: var(--scene);
    transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .program-item:hover::before { width: 14px; }
  .program-item__date {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
  }
  .program-item__time {
    font-family: var(--display); font-weight: 300;
    font-size: 20px; letter-spacing: -0.01em;
    color: var(--steel-hot);
  }
  .program-item__work {
    font-family: var(--display); font-weight: 400;
    font-size: 17px; letter-spacing: -0.01em;
    color: var(--bone); line-height: 1.35;
  }
  .program-item__work em { font-style: italic; color: var(--bone); font-weight: 400; }
  .program-item__performers {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bone-dim);
    line-height: 1.5;
  }

  /* Student/Festival/Festival-edition responsive overrides */
  @media (max-width: 1100px) {
    .entity-hero--student,
    .entity-hero--festival,
    .entity-hero--festival-edition {
      padding: 0 24px 40px; height: auto; min-height: 460px; padding-top: 140px;
    }
    .entity-hero--student .entity-hero__inner,
    .entity-hero--festival .entity-hero__inner,
    .entity-hero--festival-edition .entity-hero__inner {
      grid-template-columns: 1fr; gap: 24px;
    }
    .entity-hero__datespan { align-self: start; }
    .achievement { grid-template-columns: 140px 1fr; gap: 20px; }
    .program-item { grid-template-columns: 100px 56px 1fr; }
    .program-item__performers { grid-column: 1 / -1; padding-left: calc(100px + 56px + 48px); }
  }
  @media (max-width: 720px) {
    .entity-hero--student,
    .entity-hero--festival,
    .entity-hero--festival-edition {
      padding-top: 120px; min-height: 400px;
    }
    .achievement { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
    .program-item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .program-item__performers { padding-left: 0; }
    .editions { grid-template-columns: 1fr; }
    .edition-card { border-right: none; }
  }

  /* ── Media/Institution/Endorsement detail (Faza 4.4.3) ───────
   * Single-item detail templates for media_item, institution, endorsement.
   * Reuse:
   *   .back-strip / .back-link            (line 2624)
   *   .entity-hero scaffold + sub-elements (line 763+)
   *   .meta-bar / .meta-bar__pill         (line 2722 / 2779)
   *   .section-head                       (existing)
   *   .album-body / .album-body__text     (existing — narrative body)
   *   .linked-strip / .linked-card        (line 3610 — refs in media viewer)
   *   .related-strip / .related-card      (line 2923)
   *   .disco__grid / .album / .album__cover (line 560 — labeled albums)
   *   .quote / .quote__bg / .quote__veil / .quote__inner / .quote__mark /
   *   .quote__text / .quote__attr         (line 520 — official endorsement quote)
   *
   * New here:
   *   .entity-hero--media                 (minimal hero — actually a viewer chrome)
   *   .entity-hero--institution           (50vh logo/photo hero)
   *   .entity-hero--endorsement           (40vh mallet/cymbal photo hero)
   *   .media-viewer + .media-fullscreen   (resource page — fullscreen image + caption)
   *   .alex-roles / .alex-role / .alex-role__role / .alex-role__period
   */

  /* ─── Media item viewer (minimal — NOT a destination page) ── */
  /* Per spec §8.5, media_item is a resource, not editorial content.
     Direct visits show a fullscreen image + caption + credit + linked entities.
     No entity-hero, no meta-bar — clean viewer chrome. */
  .media-viewer {
    padding: 80px 48px 100px;
    background: var(--ink);
    min-height: 80vh;
  }
  .media-viewer__inner {
    max-width: 1400px; margin: 0 auto;
  }
  .media-fullscreen {
    display: block;
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    object-fit: contain;
    margin: 0 auto 32px;
    background: var(--ink-2);
    /* Per spec: plain <img>, no contrast filter — this is the original file. */
    filter: none;
  }
  .media-viewer__caption {
    max-width: 880px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .media-viewer__caption-text {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35; letter-spacing: -0.01em;
    color: var(--bone);
    margin-bottom: 14px;
  }
  .media-viewer__caption-text em { font-style: italic; color: var(--bone); font-weight: 400; }
  .media-viewer__alt {
    font-family: var(--text); font-size: 14.5px; line-height: 1.6;
    color: var(--bone-dim);
    margin-bottom: 20px;
  }
  .media-viewer__credits {
    display: flex; flex-wrap: wrap; gap: 28px 40px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .media-viewer__credit {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 160px;
  }
  .media-viewer__credit dt {
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted);
  }
  .media-viewer__credit dd {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--bone);
  }
  .media-viewer__refs {
    max-width: 1100px;
    margin: 56px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  .media-viewer__refs-label {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .media-viewer__refs-label::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }

  /* ─── Institution hero (50vh, logo-friendly) ───────────────── */
  .entity-hero--institution {
    height: 50vh; min-height: 480px;
    padding: 0 48px 56px;
  }
  .entity-hero--institution .entity-hero__bg {
    /* Institution heroes often carry a logo or building photo —
       slightly more neutral filter than the default. */
    filter: brightness(0.78) contrast(1.04) saturate(0.88);
    background-position: center 35%;
  }
  .entity-hero--institution .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }

  /* ─── Endorsement hero (40vh, mallet/cymbal close-up) ─────── */
  .entity-hero--endorsement {
    height: 40vh; min-height: 440px;
    padding: 0 48px 56px;
  }
  .entity-hero--endorsement .entity-hero__bg {
    background-position: center 40%;
  }
  .entity-hero--endorsement .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  }
  .entity-hero--endorsement .entity-hero__title {
    font-size: clamp(36px, 4.4vw, 72px);
  }

  /* ─── Alex's roles inside an institution (repeater_alex_role) ── */
  /* Pattern: each row = role label + year span. Mirrors .achievements
     but slimmer (no description column — just role + period). */
  .alex-roles-section { padding-bottom: 100px; }
  .alex-roles {
    list-style: none;
    margin-top: 24px;
    border-top: 1px solid var(--line);
  }
  .alex-role {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.4s ease, padding 0.4s ease;
    position: relative;
    align-items: baseline;
  }
  .alex-role:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
  .alex-role::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 0; height: 1px; background: var(--scene);
    transform: translateY(-50%);
    transition: width 0.5s ease;
  }
  .alex-role:hover::before { width: 14px; }
  .alex-role__period {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
    line-height: 1.5;
  }
  .alex-role__period em {
    font-style: normal; color: var(--scene);
    display: block; font-size: 10px;
    margin-top: 2px;
  }
  .alex-role__role {
    font-family: var(--display); font-weight: 400;
    font-size: 19px; line-height: 1.35; letter-spacing: -0.005em;
    color: var(--bone);
  }
  .alex-role__role em { font-style: italic; color: var(--bone); font-weight: 400; }

  /* ─── Media/Institution/Endorsement responsive overrides ──── */
  @media (max-width: 1100px) {
    .entity-hero--institution,
    .entity-hero--endorsement {
      padding: 0 24px 40px; height: auto; min-height: 420px; padding-top: 140px;
    }
    .entity-hero--institution .entity-hero__inner,
    .entity-hero--endorsement .entity-hero__inner {
      grid-template-columns: 1fr; gap: 24px;
    }
    .media-viewer { padding: 60px 24px 80px; }
    .alex-role { grid-template-columns: 140px 1fr; gap: 20px; }
  }
  @media (max-width: 720px) {
    .entity-hero--institution,
    .entity-hero--endorsement { padding-top: 120px; min-height: 380px; }
    .media-viewer { padding: 48px 20px 64px; }
    .media-viewer__credits { gap: 20px 28px; }
    .alex-role { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  }

  /* ─── Quote/Publication detail (Faza 4.4.4) ──────────────────
   * Single-item detail templates for quote, publication.
   * Reuse:
   *   .back-strip / .back-link            (line 2624)
   *   .entity-hero scaffold + sub-elements (line 763+)
   *   .meta-bar / .meta-bar__pill         (line 2722 / 2779)
   *   .section-head                       (existing)
   *   .album-body / .album-body__text     (existing — narrative body)
   *   .related-strip / .related-card      (line 2923)
   *   .linked-strip / .linked-card        (line 3610)
   *   .quote / .quote__bg / .quote__veil / .quote__inner / .quote__mark /
   *   .quote__text / .quote__attr         (line 520 — fullscreen pull-quote)
   *
   * New here:
   *   .quote-permalink                    (chrome AROUND the reused .quote block —
   *                                        back-strip already supplied separately)
   *   .quote-permalink__source            (narrative context block under the quote)
   *   .quote-permalink__related           (related quotes strip)
   *   .entity-hero--publication           (50vh book-cover hero)
   *   .publication-meta                   (4-col meta-bar variant: Tip · Metadata · Editor · Links)
   */

  /* ─── Quote permalink chrome (around reused .quote block) ─── */
  /* The full-bleed .quote section is reused verbatim from the Homepage
     pull-quote pattern (line 520). This wrapper adds permalink chrome:
     narrative context, source link, theme pills, related quotes. */
  .quote-permalink {
    background: var(--ink);
  }
  .quote-permalink .quote {
    /* Keep fullscreen impact even when reached via permalink. */
    height: 92vh; min-height: 620px;
  }
  .quote-permalink__source {
    padding: 80px 0 60px;
    background: var(--ink);
  }
  .quote-permalink__source-inner {
    max-width: 820px; margin: 0 auto;
    padding: 0 48px;
  }
  .quote-permalink__eyebrow {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
  }
  .quote-permalink__eyebrow::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .quote-permalink__body {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.65; letter-spacing: -0.005em;
    color: var(--bone-dim);
    max-width: 65ch;
  }
  .quote-permalink__body p { margin-bottom: 18px; }
  .quote-permalink__body p:last-child { margin-bottom: 0; }
  .quote-permalink__body em { font-style: italic; color: var(--bone); }
  .quote-permalink__meta {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 28px 48px;
    align-items: baseline;
  }
  .quote-permalink__meta-item {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 140px;
  }
  .quote-permalink__meta-item dt {
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--muted);
  }
  .quote-permalink__meta-item dd {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--bone);
  }
  .quote-permalink__meta-item dd a {
    color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
  }
  .quote-permalink__meta-item dd a:hover {
    color: var(--bone); border-bottom-color: var(--scene);
  }
  .quote-permalink__tags {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 28px;
  }

  /* ─── Publication hero (50vh, book-cover slant) ───────────── */
  .entity-hero--publication {
    height: 50vh; min-height: 500px;
    padding: 0 48px 56px;
  }
  .entity-hero--publication .entity-hero__bg {
    /* Book covers often carry text — slightly more neutral filter
       so the cover remains readable as background. */
    filter: brightness(0.62) contrast(1.05) saturate(0.82);
    background-position: center 30%;
  }
  .entity-hero--publication .entity-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 320px);
  }
  .entity-hero--publication .entity-hero__title {
    font-size: clamp(40px, 5.4vw, 88px);
  }
  .entity-hero--publication .entity-hero__stamp .roman {
    /* Year goes in the roman position. */
    font-size: 52px;
  }

  /* ─── Publication meta-bar (4-col: Tip · Metadata · Editor · Links) ─ */
  /* Tighter than the default 4-col disco/meta-bar because publication
     metadata strings (ISBN, page-count) are long but compact. */
  .publication-meta dl {
    grid-template-columns: 1fr 1.4fr 1fr 1fr;
  }
  .publication-meta dd .display.mono {
    font-family: var(--mono); font-size: 13px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .publication-meta dd ul li a {
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: 0.16em; text-transform: uppercase;
  }

  /* ─── Editor link card (§ Editor) ────────────────────────── */
  /* Reuses .linked-card scaffold but adds a small kind label
     ("Editor / Casă de editură") and a larger title. */
  .publication-editor {
    padding: 60px 0 100px;
    background: var(--ink);
  }
  .publication-editor__card {
    max-width: 720px; margin: 32px auto 0;
    padding: 32px 36px;
    border: 1px solid var(--line-strong);
    background: var(--ink-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    transition: border-color 0.4s ease, transform 0.4s ease;
    text-decoration: none;
  }
  .publication-editor__card:hover {
    border-color: var(--scene);
    transform: translateY(-3px);
  }
  .publication-editor__card .kind {
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    display: block;
  }
  .publication-editor__card .title {
    font-family: var(--display); font-weight: 400;
    font-size: 24px; line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--bone);
  }
  .publication-editor__card .meta {
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--bone-dim);
    margin-top: 6px;
  }
  .publication-editor__card .cta {
    font-family: var(--mono); font-size: 14px;
    color: var(--bone-dim);
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .publication-editor__card:hover .cta {
    color: var(--scene); transform: translateX(4px);
  }

  /* ─── Quote/Publication detail responsive ──────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--publication {
      padding: 0 24px 40px; height: auto; min-height: 440px; padding-top: 140px;
    }
    .entity-hero--publication .entity-hero__inner {
      grid-template-columns: 1fr; gap: 24px;
    }
    .publication-meta dl {
      grid-template-columns: 1fr 1fr;
    }
    .quote-permalink__source { padding: 60px 0 48px; }
    .quote-permalink__source-inner { padding: 0 24px; }
    .quote-permalink .quote { height: auto; min-height: 540px; padding: 120px 24px 100px; }
  }
  @media (max-width: 720px) {
    .entity-hero--publication { padding-top: 120px; min-height: 400px; }
    .publication-meta dl { grid-template-columns: 1fr; gap: 24px; }
    .publication-editor__card {
      grid-template-columns: 1fr;
      padding: 24px 22px;
    }
    .publication-editor__card .cta { justify-self: end; }
    .quote-permalink__meta { gap: 20px 32px; }
  }

  /* ── Tag landing templates (Faza 4.4.5) ─────────────────────
     Single (detail) for tag_role / tag_instrumentation / tag_theme.
     Each tag page is a landing that lists all entities tagged with
     this tag, grouped by entity template.

     Reuses heavily:
       .back-strip, .back-link                  (line 2624)
       .entity-hero scaffold (+ veil/grain/__inner/__title)  (line 763)
       .container, .section-head                (line 285/286)
       .album-body / .album-body__text          (line 3130) — body field
       .related-strip / .related-card           (line 2923) — entity lists
       .meta-bar__pill                          (line 2779) — sibling tag pills
       .reveal                                  (line 723)

     Adds:
       .entity-hero--tag           — 40vh compact hero modifier
       .tag-section                — per-group wrapper (one per entity type)
       .tag-section__head          — eyebrow + title + count (slim)
       .tag-section__empty         — graceful empty state
       .tag-cloud                  — sibling-tag list (inline pills)
       .tag-pill-link              — sibling tag as link styled like .meta-bar__pill */

  .entity-hero--tag {
    height: 40vh; min-height: 360px;
    padding-bottom: 56px;
  }
  .entity-hero--tag .entity-hero__bg {
    background-position: center 30%;
    filter: brightness(0.5) contrast(1.08) saturate(0.82);
  }
  .entity-hero--tag .entity-hero__inner {
    display: block;
    max-width: 1480px; margin: 0 auto;
  }
  .entity-hero--tag .entity-hero__title {
    font-size: clamp(48px, 6.4vw, 96px);
  }
  .entity-hero--tag .entity-hero__sub {
    margin-top: 18px;
    display: block;
    max-width: 56ch;
  }
  .entity-hero--tag .entity-hero__sub em {
    font-style: normal; font-weight: 500; color: var(--bone);
  }

  /* Per-group section. Spaced tighter than .related-section so multiple
     groups can stack on a single tag landing without feeling padded. */
  .tag-section { padding: 64px 0 24px; }
  .tag-section:first-of-type { padding-top: 80px; }
  .tag-section:last-of-type { padding-bottom: 80px; }
  .tag-section__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    margin-bottom: 28px;
  }
  .tag-section__head-left {
    display: flex; align-items: baseline; gap: 18px;
    flex-wrap: wrap;
  }
  .tag-section__num {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--scene); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
  }
  .tag-section__num::before {
    content: ''; width: 18px; height: 1px; background: var(--scene);
  }
  .tag-section__title {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15; letter-spacing: -0.02em;
    color: var(--bone);
  }
  .tag-section__title em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .tag-section__count {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted);
    white-space: nowrap;
  }
  .tag-section__count strong { color: var(--bone-dim); font-weight: 400; }
  .tag-section__empty {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--muted-2);
    padding: 18px 0 6px;
  }

  /* Sibling-tag cloud (§ 03) */
  .tag-cloud {
    display: flex; flex-wrap: wrap; gap: 10px 12px;
    margin-top: 24px;
  }
  .tag-pill-link {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bone-dim);
    border: 1px solid var(--line-strong);
    padding: 6px 12px;
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
  }
  .tag-pill-link:hover {
    color: var(--bone); border-color: var(--scene);
    background: var(--ink-2);
  }
  .tag-pill-link[aria-current="page"] {
    color: var(--scene); border-color: var(--scene);
  }

  /* ─── Tag landing responsive ───────────────────────────────── */
  @media (max-width: 1100px) {
    .entity-hero--tag { padding: 0 24px 36px; height: auto; min-height: 320px; padding-top: 140px; }
    .tag-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tag-section__count { align-self: flex-start; }
  }
  @media (max-width: 720px) {
    .entity-hero--tag { padding-top: 120px; min-height: 280px; }
  }

/* ── Faza 3 · TBD inline marker (added 2026-05-27) ───────────────────── */
.tbd {
    font-family: var(--mono);
    font-size: 0.85em;
    color: var(--muted);
    border-bottom: 1px dotted var(--muted);
    cursor: help;
    padding: 0 0.15em;
    letter-spacing: 0.05em;
}
.tbd:hover,
.tbd:focus {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}

/* ── Faza 3.1 · column alignment site-wide (added 2026-05-27) ────────────
 * Every text/graphic element except hero photo BACKGROUNDS should align to
 * the same central column as .container (max-width: 1480px). Nav and entity
 * hero inner content currently bleed to viewport edges; this constrains
 * them. Hero __bg / __veil / __grain remain full-bleed by design.
 * ─────────────────────────────────────────────────────────────────────── */

/* Nav: keep fixed position + edge padding for the chrome, but center the
   row's inner flex tracks inside a 1480px column. Achieved with grid +
   max-width on the .nav element itself (no extra wrapper needed). */
.nav {
  max-width: 1480px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

/* Entity hero — apply the same column to the content layer (inner) only.
   The bg/veil/grain are absolutely-positioned siblings inside .entity-hero
   and continue to fill the full bleed of the section. Padding 0 48px
   matches .container so the inner CONTENT (title, stamp) aligns with
   container-children (nav brand, album grid, etc.) — i.e. the column edge
   reserves the same 48px page-padding gutter on both sides. */
.entity-hero__inner {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* Entity hero bottom strip — sits below the inner block, share the column
   with the same 48px gutter so it aligns with container-children. */
.entity-hero__bottom {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* Back-link strip above entity heroes (album, concert, work, festival,
   press, student, etc.). The strip already had padding 96px 48px from its
   own rule; just constrain the box. */
.back-strip {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile compensation: shrink the gutter on narrow viewports the same way
   .container drops to 24px padding. */
@media (max-width: 1100px) {
  .entity-hero__inner,
  .entity-hero__bottom {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Faza 3.1 · compact album hero (added 2026-05-27) ────────────────────
 * Remove atmospheric bg/veil/grain on album detail pages; size the hero to
 * fit its own content. Other entity templates (concert, festival, press)
 * keep their full-bleed hero by virtue of the more specific selectors.
 * ─────────────────────────────────────────────────────────────────────── */

.entity-hero--album {
  height: auto;
  min-height: 0;
  padding-top: 140px;     /* clear fixed nav */
  padding-bottom: 48px;
  background: var(--ink); /* solid panel where the photo used to be */
}
.entity-hero--album .entity-hero__bg,
.entity-hero--album .entity-hero__veil,
.entity-hero--album .entity-hero__grain {
  display: none;
}
.entity-hero--album .entity-hero__inner {
  align-items: center;
}
.entity-hero--album .album-hero__cover {
  max-width: 260px;
  margin-left: auto;
}
.entity-hero--album .entity-hero__bottom {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 20px;
}
@media (max-width: 1100px) {
  .entity-hero--album { padding-top: 100px; padding-bottom: 40px; }
  .entity-hero--album .album-hero__cover { max-width: 240px; margin-left: 0; }
}

/* ── Faza 3.1 · polish micro-interactions (added 2026-05-27) ──────────────
 * Curve inlined per main.css rule on line 7: no new tokens without v1.1 spec.
 * Standardizes on cubic-bezier(0.22, 0.61, 0.36, 1) (soft deceleration) for
 * reveals/hovers, cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo) for elements
 * that benefit from a dramatic settle (images, scene-color accents).
 * ─────────────────────────────────────────────────────────────────────── */

/* — Reveal: softer curve, slightly slower for a more deliberate entrance — */
.reveal {
  transition:
    opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* — 3 ipostaze cards: scene-color underline accent that draws in on hover.
     Sits below the existing CTA border, picks up the vibrafon-mallet accent. */
.mode { position: relative; }
.mode::after {
  content: '';
  position: absolute;
  left: 32px; right: 32px; bottom: 0;
  height: 1px;
  background: var(--scene);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mode:hover::after { transform: scaleX(1); }
.mode__img img {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mode__cta {
  transition: border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              gap 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Stretched link: the whole card is clickable, while the CTA stays the real,
   keyboard-focusable <a> (and PJAX-interceptable). The ::after resolves to .mode
   as its positioning context (.mode__cta is static; .mode__img is a sibling). */
.mode__cta::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* — Album covers: longer easing on the image scale for a calmer lift — */
.album__cover img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* — Narrative typography: a hair more line-height + better h2/h3 rhythm
     when the body markdown produces sub-heads. The earlier rule sets 1.75. */
.narrative p { line-height: 1.78; }
.narrative__inner h2,
.narrative__inner h3 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-top: 56px;
  margin-bottom: 18px;
  line-height: 1.2;
}
.narrative__inner h2 { font-size: clamp(22px, 1.9vw, 28px); }
.narrative__inner h3 {
  font-size: 17px;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: var(--bone-dim);
}
.narrative__inner > h2:first-child,
.narrative__inner > h3:first-child { margin-top: 0; }

/* — Honor reduced-motion: cut transitions, freeze ken-burns / parallax.
     The Reveal classes are still set, just snap instead of fade. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  .mode::after,
  .mode__img img,
  .album__cover img,
  .hero__slide,
  .hero__slide__img {
    transition: none !important;
    animation: none !important;
  }
  .hero__slide.active .hero__slide__img { transform: none; }
}

  /* ─────────────────────────────────────────────────────────────────────
   * Legal pages (Faza 4.7) — Termeni · Confidențialitate · Cookie-uri
   * Template: legal.php. Sober prose, no hero image.
   *   .entity-hero--legal  — compact dark hero (no bg image)
   *   .legal / .legal__inner / .legal__lead / .legal__updated
   * Reuses tokens only — no new design tokens (Regulă v1.0).
   * ───────────────────────────────────────────────────────── */

  .entity-hero--legal {
    height: auto; min-height: 300px;
    padding: 150px 0 48px;
    background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  }
  .entity-hero--legal .entity-hero__inner {
    display: block;
    max-width: 1480px; margin: 0 auto;
  }
  .entity-hero--legal .entity-hero__title {
    font-size: clamp(40px, 5.2vw, 76px);
  }

  .legal { padding: 72px 0 80px; }
  .legal__inner {
    max-width: 760px; margin: 0 auto;
    font-family: var(--sans);
    color: var(--bone-dim);
  }
  .legal__inner > *:first-child { margin-top: 0; }

  .legal__updated {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    padding-bottom: 28px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .legal__lead {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4; letter-spacing: -0.02em;
    color: var(--bone);
    margin: 32px 0 8px;
  }

  .legal__inner h2 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2; letter-spacing: -0.02em;
    color: var(--bone);
    margin-top: 56px; padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .legal__inner h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .legal__inner h3 {
    font-family: var(--sans); font-weight: 500;
    font-size: 17px; letter-spacing: 0.01em;
    color: var(--bone);
    margin-top: 30px;
  }
  .legal__inner p {
    font-size: 15.5px; line-height: 1.72;
    color: var(--bone-dim);
    margin-top: 15px;
  }
  .legal__inner ul, .legal__inner ol {
    margin: 15px 0 0; padding-left: 22px;
    color: var(--bone-dim);
  }
  .legal__inner li { font-size: 15.5px; line-height: 1.68; margin-top: 8px; }
  .legal__inner li::marker { color: var(--scene); }
  .legal__inner strong { font-weight: 500; color: var(--bone); }
  .legal__inner em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .legal__inner a {
    color: var(--steel-hot);
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.3s, border-color 0.3s;
    word-break: break-word;
  }
  .legal__inner a:hover { color: var(--bone); border-color: var(--scene); }

  /* Contact fallback email line (Faza 4.7 — discreet, below the form) */
  .contact-fallback {
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    color: var(--muted);
  }
  .contact-fallback a {
    color: var(--bone);
    border-bottom: 1px solid var(--line-strong);
    transition: color 0.3s, border-color 0.3s;
  }
  .contact-fallback a:hover { color: var(--steel-hot); border-color: var(--scene); }

  @media (max-width: 700px) {
    .entity-hero--legal { padding: 130px 0 36px; min-height: 240px; }
    .legal { padding: 48px 0 60px; }
  }

/* ─── Background music player ─────────────────────────────── */
.aaplayer {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-dim);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: left 0.4s ease, top 0.4s ease, opacity 0.6s ease;
}
.aaplayer[hidden] { display: none; }
.aaplayer--docked { transform: none; }

.aaplayer__toggle,
.aaplayer__next {
  width: 22px; height: 22px;
  background: transparent; border: none; padding: 0;
  color: var(--bone-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; line-height: 1;
  transition: color 0.3s, opacity 0.3s;
}
.aaplayer__toggle:hover,
.aaplayer__next:hover { color: var(--bone); }

.aaplayer__title {
  color: var(--bone-dim);
  max-width: 200px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}

/* First-visit opt-in: the play button pulses until the visitor starts it. */
.aaplayer[data-state="idle"] .aaplayer__toggle {
  color: var(--bone);
  animation: aaPulse 2.2s ease-in-out infinite;
}
@keyframes aaPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Volume — thin tick-style slider echoing .hero__tick. */
.aaplayer__vol {
  -webkit-appearance: none; appearance: none;
  width: 54px; height: 1px; margin: 0;
  background: var(--line-strong); cursor: pointer; outline: none;
}
.aaplayer__vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bone); border: none; cursor: pointer;
}
.aaplayer__vol::-moz-range-thumb {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bone); border: none; cursor: pointer;
}

@media (max-width: 1100px) {
  /* Mobile: player at the top (below the fixed nav), centered, ~150% larger. */
  .aaplayer,
  .aaplayer--docked {
    top: 84px; bottom: auto; left: 50%;
    transform: translateX(-50%); gap: 12px;
    font-size: 15px;
  }
  .aaplayer__toggle,
  .aaplayer__next { width: 33px; height: 33px; font-size: 18px; }
  .aaplayer__title { max-width: 150px; }
  .aaplayer__vol { display: none; }
}

  /* ── Welcome note (homepage, after hero) ─────────────────────────────
   * Site-flavoured: mono eyebrow + bar, the greeting promoted to a large
   * thin display statement (steel-hot em), supporting prose in muted body,
   * a structured right-hand aside, --ink-2 panel + --scene accent hairline.
   * Markup: .welcome > .container > .welcome__inner >
   *   .welcome__eyebrow + .welcome__grid > .welcome__main + .welcome__aside. */
  .welcome {
    position: relative;
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: clamp(96px, 11vw, 150px) 0 clamp(96px, 12vw, 150px);
  }
  .welcome::before {
    content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 120px;
    background: linear-gradient(180deg, var(--scene), transparent);
  }
  .welcome__eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--scene);
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(40px, 5.5vw, 76px);
  }
  .welcome__eyebrow .bar { width: 36px; height: 1px; background: var(--scene); }
  .welcome__grid {
    display: grid;
    grid-template-columns: 1.55fr minmax(240px, 0.8fr);
    gap: clamp(48px, 6vw, 100px);
    align-items: start;
  }
  /* Greeting (first paragraph) = the large thin display statement. */
  .welcome__main > p:first-child {
    font-family: var(--display); font-weight: 200;
    font-size: clamp(27px, 3.1vw, 50px);
    line-height: 1.08; letter-spacing: -0.035em;
    color: var(--bone);
    margin-bottom: clamp(26px, 3vw, 44px);
    max-width: 22ch;
  }
  .welcome__main > p:first-child em {
    font-style: normal; font-weight: 500; color: var(--steel-hot);
  }
  /* Supporting prose. */
  .welcome__main > p:not(:first-child) {
    font-family: var(--sans); font-weight: 300;
    font-size: clamp(15px, 1.05vw, 17px); line-height: 1.75;
    color: var(--bone-dim); max-width: 54ch;
  }
  .welcome__main > p:not(:first-child) + p { margin-top: 1.05em; }
  .welcome__main > p:not(:first-child) em {
    font-style: normal; font-weight: 500; color: var(--steel-hot);
  }
  /* Right aside — invitation + CTA, set off by a top hairline. */
  .welcome__aside {
    border-top: 1px solid var(--line-strong);
    padding-top: 26px;
  }
  .welcome__contact {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(16px, 1.2vw, 20px); line-height: 1.5; letter-spacing: -0.01em;
    color: var(--bone-dim);
  }
  .welcome__contact p + p { margin-top: 0.6em; }
  .welcome__contact em { font-style: normal; font-weight: 500; color: var(--steel-hot); }
  .welcome__contact a { color: var(--steel-hot); text-decoration: underline; text-underline-offset: 3px; }
  .welcome__cta {
    margin-top: 30px;
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bone);
    border-bottom: 1px solid var(--line-strong); padding-bottom: 8px;
    transition: border-color .3s, gap .3s;
  }
  .welcome__cta:hover { border-color: var(--scene); gap: 18px; }
  .welcome__cta span { color: var(--scene); transition: transform .3s; }
  .welcome__cta:hover span { transform: translateX(4px); }
  .welcome__sign {
    margin-top: 36px;
    width: clamp(120px, 12vw, 168px); height: auto;
    opacity: 0.9; mix-blend-mode: screen;
  }

  @media (max-width: 900px) {
    .welcome__grid { grid-template-columns: 1fr; gap: 40px; }
    .welcome__aside { border-top: 0; padding-top: 0; }
  }

  /* ── Featured video hero (block_video_hero) ──────────────────────────
   * section-head + a 16:9 click-to-play YouTube facade. Mirrors the
   * .featured backdrop it replaces on the homepage. */
  .video-hero {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: 0 0 clamp(96px, 12vw, 140px);
  }
  .video-hero__stage { margin-top: 28px; }
  .video-hero__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
    background: var(--ink-3);
    border: 1px solid var(--line-strong);
  }
  .video-hero__poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.6) contrast(1.05) saturate(0.82);
    transition: filter .5s ease, transform 1.2s ease;
  }
  .video-hero__frame:hover .video-hero__poster {
    filter: brightness(0.72) contrast(1.05) saturate(0.9);
    transform: scale(1.03);
  }
  .video-hero__veil {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(12,11,10,0.15) 0%, rgba(12,11,10,0.55) 100%);
    transition: opacity .4s ease;
  }
  .video-hero__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer; padding: 0;
  }
  .video-hero__play .tri {
    width: clamp(66px, 7vw, 96px);
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--bone);
    background: rgba(12,11,10,0.32);
    color: var(--bone);
    font-size: clamp(20px, 2vw, 28px);
    padding-left: 4px; /* optical-centre the ▶ glyph */
    backdrop-filter: blur(2px);
    transition: background .35s ease, border-color .35s ease, transform .35s ease, color .35s ease;
  }
  .video-hero__frame:hover .video-hero__play .tri {
    background: var(--scene);
    border-color: var(--scene);
    color: var(--bone);
    transform: scale(1.07);
  }
  .video-hero__frame.is-playing .video-hero__poster,
  .video-hero__frame.is-playing .video-hero__veil,
  .video-hero__frame.is-playing .video-hero__play {
    opacity: 0; pointer-events: none;
  }
  .video-hero__frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }

  /* ── Three modes — full-width mosaic variant (modes_fullwidth) ────────
   * One large main tile (Solist) + two stacked tiles (Compozitor, Profesor),
   * full-bleed; titles overlaid, no descriptions; each image links to its
   * page. Markup: .modes--feature > .modes-feature > a.modes-feature__tile. */
  .modes--feature { padding: 0; background: var(--ink); }
  .modes-feature {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: clamp(560px, 82vh, 900px);
    background: var(--ink);
  }
  .modes-feature__tile {
    position: relative; display: block; overflow: hidden;
    background: var(--ink-3);
  }
  .modes-feature__tile--main { grid-row: 1 / span 2; }
  .modes-feature__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.78) saturate(0.9) contrast(1.02);
    transition: transform 1.2s ease, filter .5s ease;
  }
  .modes-feature__tile:hover .modes-feature__img {
    transform: scale(1.045); filter: brightness(0.92) saturate(1) contrast(1.02);
  }
  .modes-feature__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(12,11,10,0.72) 0%, rgba(12,11,10,0.12) 42%, transparent 70%);
  }
  .modes-feature__title {
    position: absolute; left: clamp(20px, 2.6vw, 44px);
    right: clamp(20px, 2.6vw, 44px); bottom: clamp(18px, 2.4vw, 38px);
    font-family: var(--display); font-weight: 200; color: var(--bone);
    font-size: clamp(26px, 2.7vw, 46px); line-height: 0.98; letter-spacing: -0.03em;
    pointer-events: none;
  }
  .modes-feature__title .dot { color: var(--scene); }
  .modes-feature__tile--main .modes-feature__title { font-size: clamp(34px, 4.2vw, 76px); }
  /* scene hairline that grows on hover — echoes the site's CTA underline */
  .modes-feature__tile::after {
    content: ''; position: absolute; left: clamp(20px, 2.6vw, 44px); bottom: 0;
    height: 2px; width: 0; background: var(--scene); transition: width .4s ease;
  }
  .modes-feature__tile:hover::after { width: 56px; }

  @media (max-width: 900px) {
    .modes-feature {
      grid-template-columns: 1fr; grid-template-rows: none;
      height: auto; gap: 8px;
    }
    .modes-feature__tile { aspect-ratio: 3 / 2; }
    .modes-feature__tile--main { grid-row: auto; aspect-ratio: 4 / 3; }
  }