/* ==========================================================================
   YME — Bold editorial layer  (body class .bx)
   Streetwear editorial meets entertainment: bigger display type, hairline
   structure, red accents, boxed cards. Loaded after typography.css.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.bx .hero--compact { padding-block: clamp(120px, 13vw, 180px) clamp(40px, 5vw, 72px); }
html:root body[class][class].bx .hero h1 {
  font-size: clamp(46px, 9.2vw, 140px) !important;
  line-height: .9 !important;
  letter-spacing: -.035em;
}
html:root body[class][class].bx .hero .lede {
  font-size: clamp(18px, 1.6vw, 24px) !important;
  line-height: 1.5 !important;
  max-width: 54ch;
  margin-top: clamp(24px, 3vw, 36px);
}
.bx .hero__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--color-signal-red); }
.bx .hero__eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.bx .hero--compact > .container::after {
  content: ""; display: block; height: 1px; margin-top: clamp(36px, 4.5vw, 64px);
  background: var(--color-hairline-strong);
}

/* ---- Marquee ------------------------------------------------------------- */
.bx-marquee { background: var(--color-signal-red); color: #fff; overflow: hidden; padding-block: 13px; }
.bx-marquee__track { display: flex; width: max-content; animation: bx-scroll 40s linear infinite; }
.bx-marquee span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 2vw, 28px); letter-spacing: -.01em; padding-inline: 24px; white-space: nowrap;
}
.bx-marquee span::after { content: "◆"; margin-left: 24px; font-size: .5em; vertical-align: middle; opacity: .72; }
@keyframes bx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bx-marquee__track { animation: none; } }

/* ---- Section heads ------------------------------------------------------- */
html:root body[class][class].bx .section-head h2 {
  font-size: clamp(38px, 5.6vw, 84px) !important;
  line-height: .96 !important;
  letter-spacing: -.03em;
}
.bx .section-head { border-top: 1px solid var(--color-hairline-strong); padding-top: clamp(24px, 3vw, 40px); }
.bx .section--bone .section-head { border-top-color: rgba(10, 10, 10, .26); }

/* ---- Filter pills -------------------------------------------------------- */
.bx .filters { gap: 10px; }
.bx .filter-pill {
  border-radius: 0 !important;
  border: 1px solid rgba(232, 226, 214, .26);
  background: transparent;
  color: var(--color-bone);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 16px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bx .filter-pill:hover { border-color: var(--color-bone); }
.bx .filter-pill.is-active { background: var(--color-signal-red); border-color: var(--color-signal-red); color: #fff; }

/* ---- Cards --------------------------------------------------------------- */
.bx .feature-card {
  border: 1px solid var(--color-hairline-strong);
  padding: clamp(22px, 2.4vw, 34px);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.bx .feature-card:hover { border-color: var(--color-signal-red); transform: translateY(-4px); }
.bx .feature-card .icon { margin-bottom: 18px; }

.bx .counter-project { border-top: 2px solid var(--color-hairline-strong); padding-top: clamp(28px, 3vw, 44px); }
.bx .counter-project:hover { border-top-color: var(--color-signal-red); }
html:root body[class][class].bx .counter-project h2 {
  font-size: clamp(40px, 6vw, 92px) !important; line-height: .94 !important; letter-spacing: -.035em;
}
.bx .phg-news-card {
  border: 1px solid var(--color-hairline-strong);
  padding: clamp(26px, 3vw, 44px);
  transition: border-color .25s ease, background .25s ease;
}
.bx .phg-news-card:hover { border-color: var(--color-signal-red); }
html:root body[class][class].bx .phg-news-card h2 {
  font-size: clamp(38px, 5.2vw, 76px) !important; line-height: .94 !important; letter-spacing: -.035em;
}

/* ---- Numbered pathway index (contact) ------------------------------------ */
.bx .steps--index { counter-reset: bxp; }
.bx .steps--index .step {
  counter-increment: bxp;
  border-top: 1px solid var(--color-hairline-strong);
  padding: clamp(16px, 2vw, 22px) 0;
  grid-template-columns: 46px 1fr !important;
  align-items: baseline;
}
.bx .steps--index .step::before {
  content: "0" counter(bxp);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-signal-red);
}
html:root body[class][class].bx .steps--index .step h3 {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  font-size: clamp(19px, 1.9vw, 26px) !important; line-height: 1.15 !important;
  letter-spacing: -.01em; text-transform: uppercase;
}
.bx .steps--index .step p { color: var(--color-fog); max-width: 46ch; }

/* ---- Forms --------------------------------------------------------------- */
.bx .form-field label {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-fog);
}
.bx .form-field input, .bx .form-field select, .bx .form-field textarea {
  border-radius: 0; border: 1px solid var(--color-hairline-strong); background: transparent;
}
.bx .form-field input:focus, .bx .form-field select:focus, .bx .form-field textarea:focus {
  border-color: var(--color-signal-red); outline: none;
}

/* ---- Closing statement sections ------------------------------------------ */
html:root body[class][class].bx .text-center h2 {
  font-size: clamp(44px, 8vw, 120px) !important; line-height: .92 !important; letter-spacing: -.035em;
}

/* ---- About: keep each statement line on one line -------------------------- */
html:root body[class][class].culture-about .space-photo-copy .statement h2 {
  font-size: clamp(28px, 3.7vw, 56px) !important;
  line-height: 1.08 !important;
  max-width: none !important;
}

@media (max-width: 700px) {
  html:root body[class][class].bx .hero h1 { font-size: 13.5vw !important; }
  html:root body[class][class].bx .counter-project h2,
  html:root body[class][class].bx .phg-news-card h2 { font-size: 12vw !important; }
  html:root body[class][class].bx .text-center h2 { font-size: 13vw !important; }
}

/* ---- Spacing around the marquee / filters -------------------------------- */
.bx .hero--compact:has(+ .bx-marquee) > .container::after { display: none; }
.bx .bx-marquee + .container,
.bx .bx-marquee + .section > .container { padding-top: clamp(40px, 5vw, 68px); }
.bx .filters { margin-bottom: clamp(32px, 4vw, 52px); }

/* Contact pathways read as full-width rows, not cramped columns. */
.bx .steps--index { grid-template-columns: 1fr !important; gap: 0 !important; }

/* ---- Key-art feature card (poster carries its own title) ------------------
   The art is the whole card; the meta + CTA sit under it on a hairline bar. */
.culture-feature--art { display: block; min-height: 0 !important; overflow: visible; }
.culture-feature--art > img { position: static; width: 100%; height: auto; z-index: auto; transition: none; }
.culture-feature--art::after { display: none; }
.culture-feature--art .culture-feature__content {
  min-height: 0; padding: 0; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--color-hairline-strong);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px 28px; flex-wrap: wrap;
}
.culture-feature--art:hover .culture-feature__content { border-top-color: var(--color-signal-red); }
.culture-feature--art .culture-feature__content .culture-meta { width: auto; margin: 0; gap: 28px; }
.culture-feature--art .culture-link { margin: 0; }
.culture-feature--art h2,
.culture-feature--art .culture-feature__content > p {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}