/* ==========================================================================
   YOUNIVERSOUL MUSIC ENT. — Refresh (Sept 2026)
   1) Monochrome photo treatment                — about.html
   2) Disclosure list (dark + bone variants)    — about.html, artists.html
   3) "The World Is The Brief" statement block  — creators-program.html
   4) Section rhythm: in-column pull quotes     — artists.html
   ========================================================================== */

/* ---- 1. Monochrome photo treatment -------------------------------------- */
.space-photo__frame { position: relative; display: block; overflow: hidden; }
.space-photo__frame img { display: block; width: 100%; height: auto; }

.space-photo--mono .space-photo__frame img {
  filter: grayscale(1) contrast(1.08) brightness(0.97);
}
/* Overlay: deepens the blacks and holds the image inside the obsidian page. */
.space-photo--mono .space-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.10) 0%,
    rgba(10, 10, 10, 0.18) 55%,
    rgba(10, 10, 10, 0.48) 100%
  );
}

/* ---- 2. Disclosure list (dropdown bullets) ------------------------------ */
.belief-list {
  --disc-line: rgba(232, 226, 214, 0.20);
  --disc-title: var(--color-bone);
  --disc-text: var(--color-fog);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 64px);
  margin-top: var(--space-40);
  border-top: 1px solid var(--disc-line);
}
.section--bone .belief-list {
  --disc-line: rgba(10, 10, 10, 0.16);
  --disc-title: var(--color-obsidian);
  --disc-text: rgba(10, 10, 10, 0.66);
}
.belief-list--single { grid-template-columns: 1fr; }

.belief { align-self: start; border-bottom: 1px solid var(--disc-line); }

/* Bold variant — used for "What We Believe" */
.belief-list--bold { counter-reset: bl; border-top-width: 2px; border-top-color: var(--color-signal-red); }
.belief-list--bold .belief { border-bottom-width: 1px; counter-increment: bl; }
.belief-list--bold .belief > summary { padding-block: clamp(24px, 2.6vw, 34px); gap: var(--space-20); }
.belief-list--bold .belief > summary::before {
  content: "0" counter(bl);
  width: auto; height: auto; background: none; margin-top: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .04em;
  color: var(--color-signal-red);
}
html:root body[class][class] .belief-list--bold .belief > summary {
  font-size: clamp(23px, 2.9vw, 40px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em;
}
.belief-list--bold .belief > summary::after { font-size: 28px; }
.belief-list--bold .belief ul { padding-left: 46px; padding-bottom: clamp(20px, 2.4vw, 30px); }
html:root body[class][class] .belief-list--bold .belief li { font-size: 17px !important; line-height: 1.6 !important; }
@media (max-width: 700px) {
  .belief-list--bold .belief ul { padding-left: 34px; }
}

.belief > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  cursor: pointer;
  list-style: none;
  padding: var(--space-24) var(--space-4) var(--space-24) 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--disc-title);
}
.belief > summary::-webkit-details-marker { display: none; }

/* Bullet */
.belief > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 2px;
  background: var(--color-signal-red);
}
/* Open / close indicator */
.belief > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--color-signal-red);
  transform: translateY(2px);
}
.belief[open] > summary::after { content: "\2013"; }
.belief > summary:focus-visible { outline: 2px solid var(--color-signal-red); outline-offset: 4px; }
.belief:hover > summary { opacity: 0.72; }

.belief ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-8) var(--space-24) 23px;
}
.belief li {
  position: relative;
  padding: 6px 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--disc-text);
}
.belief li::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 15px;
  width: 10px;
  height: 1px;
  background: var(--color-signal-red);
}

@media (max-width: 800px) {
  .belief-list { grid-template-columns: 1fr; }
}

/* ---- 3. "The World Is The Brief" ---------------------------------------- */
.brief { text-align: center; }
.brief .eyebrow { justify-content: center; }
.brief__title {
  margin: var(--space-24) auto 0;
  max-width: 16ch;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.08;
  text-wrap: balance;
}
.brief__sub {
  margin: var(--space-24) auto 0;
  max-width: 58ch;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  text-wrap: balance;
  color: var(--color-fog);
}
.brief__hi { color: var(--color-signal-red); }
.brief__lines {
  list-style: none;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-24);
  text-align: left;
}
.brief__lines li {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-hairline-strong);
}
.brief__k {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.1;
  color: var(--color-bone);
}
.brief__v {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fog);
}
.brief__lines li:last-child .brief__k { color: var(--color-signal-red); }

@media (max-width: 900px) {
  .brief__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
}
@media (max-width: 460px) {
  .brief__lines { grid-template-columns: 1fr; }
}

/* ---- 4. In-column pull quote (replaces full-width statement breaks) ------ */
.story-pull {
  margin: var(--space-32) 0 0;
  padding-left: clamp(16px, 1.6vw, 22px);
  border-left: 2px solid var(--color-signal-red);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(21px, 2.05vw, 30px);
  line-height: 1.16;
  text-wrap: balance;
  color: var(--color-bone);
}
.section--bone .story-pull { color: var(--color-obsidian); }
.story-pull .accent { color: var(--color-signal-red); }
.story-pull + .lede,
.story-pull + .verse { margin-top: var(--space-32) !important; }

/* Even vertical rhythm inside the long-form artists column. */
.culture-artists .space-story__body > * + * { margin-top: var(--space-24); }
.culture-artists .space-story__body .verse { margin-top: var(--space-32); }

/* ---- Specificity bridge -------------------------------------------------
   typography.css sets p / li / summary sizes with !important at
   html:root body[class][class]. These components need to survive it. */
html:root body[class][class] .story-pull {
  font-family: var(--font-display) !important;
  font-size: clamp(21px, 2.05vw, 30px) !important;
  line-height: 1.16 !important;
  font-weight: 800;
  text-transform: uppercase;
}
html:root body[class][class] .belief > summary {
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 1.9vw, 24px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  text-transform: uppercase;
}
html:root body[class][class] .brief__sub {
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.6 !important;
}
@media (max-width: 700px) {
  html:root body[class][class] .story-pull { font-size: 22px !important; }
}

/* Photo sitting under a section headline in the left column. */
.story-photo { margin: var(--space-40) 0 0; max-width: 460px; }
@media (max-width: 800px) { .story-photo { margin-top: var(--space-32); max-width: none; } }

/* ---- 5. Split statement: two lines reading left / right ------------------ */
.statement-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(48px, 5vw, 80px);
  max-width: none !important;
}
.statement-split > span { display: block; text-wrap: balance; }
.statement-split .accent { color: var(--color-signal-red); }
html:root body[class][class] .statement-split {
  font-size: clamp(30px, 3.6vw, 54px) !important;
  line-height: 1.06 !important;
}
@media (max-width: 860px) {
  .statement-split { grid-template-columns: 1fr; gap: var(--space-16); }
}

/* ---- 6. Mobile type safety ---------------------------------------------
   Display sizes that keep the longest single words inside the viewport on
   phones — without them, headings break mid-word ("ENTERTAINMEN / T"). */
@media (max-width: 700px) {
  :root {
    --type-display-xl: clamp(46px, 14vw, 88px);
    --type-h1: clamp(40px, 12vw, 72px);
  }
}
/* Bluntito lexicon stays two-up on phones; scale the terms to fit a column. */
@media (max-width: 560px) {
  html:root body[class][class] .bl-values .grid h3 { font-size: clamp(21px, 6.2vw, 28px) !important; }
}

/* ---- 7. Linked meta label ----------------------------------------------- */
.culture-meta__link {
  color: var(--color-bone);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(232, 226, 214, 0.35);
  transition: color .2s ease, border-color .2s ease;
}
.culture-meta__link:hover,
.culture-meta__link:focus-visible {
  color: var(--color-signal-red);
  border-bottom-color: var(--color-signal-red);
}
.section--bone .culture-meta__link { color: var(--color-obsidian); border-bottom-color: rgba(10,10,10,0.35); }


/* ---- "What We Believe" heading ------------------------------------------ */
.belief-head { margin-top: clamp(16px, 2vw, 26px); max-width: 14ch; }
html:root body[class][class] .belief-head {
  font-size: clamp(38px, 5.4vw, 84px) !important;
  line-height: .96 !important;
  letter-spacing: -.03em;
}