.page {
  --about-gold: #f4b000;
  --about-gold-soft: rgba(244, 176, 0, 0.34);
  --about-border: rgba(244, 176, 0, 0.23);
  --about-text: #f2f2f2;
  --about-muted: #8c8c8c;
  overflow: hidden;
  background: #080909;
  color: var(--about-text);
}

.hero {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border-bottom: 1px solid var(--about-border);
  background:
    radial-gradient(circle at 68% 45%, rgba(244, 176, 0, 0.12), transparent 33%),
    linear-gradient(90deg, #070808 0%, #090b0c 48%, #050606 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(6, 7, 7, 0.98) 0%, rgba(6, 7, 7, 0.86) 34%, rgba(6, 7, 7, 0.18) 72%, rgba(6, 7, 7, 0.58) 100%),
    linear-gradient(0deg, #080909 0%, transparent 23%);
  pointer-events: none;
}

.heroMap {
  position: absolute;
  z-index: 1;
  top: -30%;
  right: -5%;
  width: 68%;
  height: 145%;
  overflow: hidden;
  opacity: 0.9;
}

.heroMap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.12) saturate(0.94);
}

.heroAperture {
  position: absolute;
  z-index: 1;
  top: 3%;
  right: -6%;
  width: 42%;
  opacity: 0.22;
  mix-blend-mode: screen;
}

.heroAperture img {
  display: block;
  width: 100%;
}

.heroContent,
.heroStatement {
  position: relative;
  z-index: 3;
}

.heroContent {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 92px;
}

.eyebrow {
  color: var(--about-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.hero h1,
.section h2,
.author h2,
.cta h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.hero h1 {
  max-width: 650px;
  margin: 18px 0 20px;
  font-size: clamp(54px, 6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.heroContent > strong {
  display: block;
  max-width: 550px;
  color: #dfdfdf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.28;
}

.heroContent > p {
  max-width: 520px;
  margin: 28px 0 0;
  color: #9d9d9d;
  font-size: 14px;
  line-height: 1.65;
}

.heroStatement {
  position: absolute;
  right: max(36px, calc((100% - 1240px) / 2));
  bottom: 52px;
  display: grid;
  gap: 4px;
  color: #adadad;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.heroStatement strong {
  color: var(--about-gold);
  font-size: 13px;
}

.section {
  position: relative;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 62px 0;
}

.section + .section {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.sectionHeading {
  position: relative;
}

.sectionHeading h2 {
  margin: 13px 0 0;
  font-size: clamp(31px, 3vw, 43px);
  line-height: 1.05;
}

.goldLine {
  display: block;
  width: 38px;
  height: 3px;
  background: var(--about-gold);
}

.mission {
  min-height: 305px;
  padding-right: 32%;
}

.missionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 33px;
}

.missionGrid p {
  margin: 0;
  color: #aaa;
  font-size: 14px;
  line-height: 1.7;
}

.missionMap {
  position: absolute;
  top: 0;
  right: -80px;
  bottom: 0;
  width: 38%;
  overflow: hidden;
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent, #000 32%);
}

.missionMap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.principleCard {
  min-height: 235px;
  padding: 24px;
  border: 1px solid var(--about-border);
  background:
    linear-gradient(145deg, rgba(244, 176, 0, 0.045), transparent 55%),
    #0d0e0e;
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  color: var(--about-gold);
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.principleCard h3,
.platformCard h3,
.audience h3 {
  margin: 20px 0 10px;
  color: #f0f0f0;
  font-size: 15px;
}

.principleCard p,
.platformCard p,
.audience p {
  margin: 0;
  color: #858585;
  font-size: 12px;
  line-height: 1.6;
}

.sectionHeadRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.sectionMore {
  color: var(--about-gold);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.platformGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.platformCard {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  border: 1px solid var(--about-border);
  background: #0d0e0f;
  color: inherit;
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.platformCard:hover {
  z-index: 2;
  transform: translateY(-4px);
  border-color: rgba(244, 176, 0, 0.62);
}

.platformBackdrop {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background:
    linear-gradient(180deg, transparent 0 27%, rgba(7, 8, 8, 0.82) 50%, #080909 74%);
}

.platformCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(244, 176, 0, 0.16), transparent 35%),
    linear-gradient(135deg, transparent 0 49%, rgba(244, 176, 0, 0.05) 50%, transparent 51%);
}

.art-episode {
  background-image:
    linear-gradient(rgba(0,0,0,.1), #090909 74%),
    url("/assets/people/roman-kademin.png");
  background-size: cover;
  background-position: 47% top;
}

.art-news,
.art-facts {
  background-image:
    linear-gradient(rgba(0,0,0,.1), #090909 76%),
    url("/assets/hero/world-map-gold.png");
  background-size: cover;
}

.art-dossier {
  background:
    radial-gradient(circle at 50% 20%, rgba(214, 177, 99, 0.25), transparent 30%),
    linear-gradient(120deg, #171717, #060707);
}

.art-club {
  background:
    radial-gradient(circle at 50% 22%, rgba(244, 176, 0, 0.2), transparent 32%),
    linear-gradient(145deg, #171108, #090909);
}

.art-advertising {
  background:
    linear-gradient(135deg, rgba(244, 176, 0, 0.12), transparent 45%),
    #0c0d0d;
}

.platformContent {
  position: absolute;
  z-index: 3;
  inset: auto 18px 18px;
}

.platformContent .icon {
  width: 28px;
  height: 28px;
}

.platformContent h3 {
  margin-top: 12px;
}

.platformContent p {
  min-height: 58px;
}

.platformContent strong {
  display: block;
  margin-top: 15px;
  color: var(--about-gold);
  font-size: 10px;
}

.author {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 1fr)
    minmax(230px, 0.58fr);
  min-height: 450px;
  border-top: 1px solid var(--about-border);
  border-bottom: 1px solid var(--about-border);
  background:
    radial-gradient(circle at 40% 50%, rgba(244, 176, 0, 0.08), transparent 35%),
    #090a0a;
}

.authorPortrait {
  position: relative;
  min-height: 450px;
  overflow: hidden;
}

.authorPortrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 60%, #090a0a),
    linear-gradient(0deg, #090a0a 0%, transparent 30%);
}

.authorPortrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.authorCopy {
  align-self: center;
  padding: 52px 42px;
}

.authorCopy .eyebrow {
  display: block;
  margin-top: 15px;
}

.authorCopy h2 {
  margin: 10px 0 3px;
  font-size: 42px;
}

.authorCopy > strong {
  color: #d1d1d1;
  font-size: 13px;
}

.authorCopy p {
  color: #888;
  font-size: 12px;
  line-height: 1.65;
}

.quote {
  align-self: center;
  margin: 36px 38px 36px 0;
  padding: 30px 25px;
  border: 1px solid var(--about-border);
  background: rgba(16, 16, 16, 0.8);
}

.quote > span {
  color: var(--about-gold);
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 0.75;
}

.quote p {
  color: #cacaca;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.5;
}

.quote small {
  display: block;
  margin-top: 22px;
  color: #777;
  text-align: right;
}

.outlineButton,
.primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  border-radius: 3px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.outlineButton {
  border: 1px solid rgba(244, 176, 0, 0.62);
  color: #ececec;
  background: #0b0c0c;
}

.outlineButton:hover {
  border-color: var(--about-gold);
  color: var(--about-gold);
}

.authorCopy .outlineButton {
  margin-top: 16px;
}

.audience {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.audience article {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  padding: 24px 26px 105px;
  border: 1px solid var(--about-border);
  background: #0c0d0d;
}

.audienceIcon {
  color: var(--about-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.audience h3 {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.35;
}

.audienceArt {
  position: absolute;
  right: 0;
  bottom: -36px;
  left: 0;
  height: 150px;
  overflow: hidden;
  opacity: 0.62;
}

.audienceArt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audiencePattern {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  background:
    linear-gradient(90deg, transparent, rgba(244, 176, 0, 0.08)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.06) 0 1px,
      transparent 1px 44px
    );
}

.clubPlate {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 160px;
  padding: 20px;
  border: 1px solid rgba(244, 176, 0, 0.5);
  background:
    linear-gradient(135deg, #171717, #060606);
  transform: rotate(-2deg);
}

.clubPlate strong {
  letter-spacing: 0.16em;
}

.clubPlate strong span,
.clubPlate small {
  color: var(--about-gold);
}

.clubPlate small {
  margin-top: 7px;
  letter-spacing: 0.45em;
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 190px;
  overflow: hidden;
  padding: 38px max(24px, calc((100% - 1240px) / 2));
  border-top: 1px solid var(--about-border);
  border-bottom: 1px solid var(--about-border);
  background:
    linear-gradient(90deg, #0d0d0b, #12100a);
}

.cta > div {
  position: relative;
  z-index: 2;
}

.cta h2 {
  margin: 8px 0 7px;
  font-size: 30px;
}

.cta p {
  margin: 0;
  color: #858585;
  font-size: 12px;
}

.ctaActions {
  display: flex;
  gap: 11px;
}

.primaryButton {
  border: 1px solid #f0ad00;
  background: var(--about-gold);
  color: #090909;
}

.primaryButton:hover {
  filter: brightness(1.08);
}

.ctaMap {
  position: absolute;
  right: -6%;
  width: 38%;
  opacity: 0.18;
}

@media (max-width: 1120px) {
  .platformGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author {
    grid-template-columns: 1fr 1fr;
  }

  .quote {
    grid-column: 1 / -1;
    margin: 0 24px 32px;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 500px;
  }

  .heroMap {
    right: -34%;
    width: 120%;
    opacity: 0.55;
  }

  .heroContent {
    width: calc(100% - 32px);
    padding-top: 68px;
  }

  .heroStatement {
    right: 20px;
    bottom: 28px;
  }

  .section {
    width: calc(100% - 32px);
    padding: 44px 0;
  }

  .mission {
    padding-right: 0;
  }

  .missionGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .missionMap {
    display: none;
  }

  .audience {
    grid-template-columns: 1fr;
  }

  .author {
    grid-template-columns: 1fr;
  }

  .authorPortrait {
    min-height: 410px;
  }

  .authorCopy {
    padding: 32px 24px;
  }

  .quote {
    grid-column: auto;
    margin: 0 24px 28px;
  }

  .cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .ctaActions {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: 52px;
  }

  .heroContent > strong {
    font-size: 20px;
  }

  .principles,
  .platformGrid {
    grid-template-columns: 1fr;
  }

  .platformCard {
    min-height: 255px;
  }

  .sectionHeadRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .ctaActions {
    width: 100%;
    flex-direction: column;
  }

  .primaryButton,
  .outlineButton {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platformCard {
    transition: none;
  }
}
/* TV KADR — ABOUT COMPACT OVERRIDES START */

/*
 * Compact editorial pass.
 * Intentionally appended after the original visual system:
 * no destructive rewriting of the base ABOUT styles.
 */

.hero {
  min-height: 355px;
}

.heroMap {
  top: -10%;
  right: 0;
  width: 55%;
  height: 116%;
  opacity: 0.62;
}

.heroAperture {
  top: 0;
  right: -2%;
  width: 29%;
  opacity: 0.1;
}

.heroContent {
  width: min(1180px, calc(100% - 48px));
  padding-top: 48px;
}

.hero h1 {
  max-width: 520px;
  margin: 10px 0 12px;
  font-size: clamp(42px, 4.25vw, 61px);
  line-height: 0.98;
}

.heroContent > strong {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.28;
}

.heroContent > p {
  max-width: 450px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.55;
}

.heroStatement {
  bottom: 24px;
  font-size: 9px;
}

.heroStatement strong {
  font-size: 11px;
}

.section {
  width: min(1180px, calc(100% - 48px));
  padding-top: 36px;
  padding-bottom: 36px;
}

.sectionHeading h2 {
  margin-top: 9px;
  font-size: clamp(26px, 2.35vw, 34px);
}

.goldLine {
  width: 31px;
  height: 2px;
}

.mission {
  min-height: 205px;
  padding-right: 26%;
}

.missionGrid {
  gap: 28px;
  margin-top: 19px;
}

.missionGrid p {
  font-size: 12px;
  line-height: 1.6;
}

.missionMap {
  right: -25px;
  width: 28%;
  opacity: 0.2;
}

.principles {
  gap: 10px;
  margin-top: 20px;
}

.principleCard {
  min-height: 160px;
  padding: 17px;
}

.principleCard .icon {
  width: 29px;
  height: 29px;
}

.principleCard h3 {
  margin-top: 11px;
  margin-bottom: 6px;
  font-size: 13px;
}

.principleCard p {
  font-size: 10.5px;
  line-height: 1.5;
}

.sectionHeadRow {
  gap: 18px;
}

.platformGrid {
  gap: 8px;
  margin-top: 20px;
}

.platformCard {
  min-height: 215px;
}

.platformContent {
  inset: auto 13px 13px;
}

.platformContent .icon {
  width: 24px;
  height: 24px;
}

.platformContent h3 {
  margin-top: 9px;
  margin-bottom: 6px;
  font-size: 12px;
}

.platformContent p {
  min-height: 38px;
  font-size: 9.5px;
  line-height: 1.45;
}

.platformContent strong {
  margin-top: 10px;
  font-size: 9px;
}

.author {
  min-height: 315px;
  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(0, 1.1fr)
    minmax(200px, 0.54fr);
}

.authorPortrait {
  min-height: 315px;
}

.authorCopy {
  padding: 26px 28px;
}

.authorCopy .eyebrow {
  margin-top: 11px;
}

.authorCopy h2 {
  margin-top: 7px;
  font-size: 31px;
}

.authorCopy > strong {
  font-size: 11px;
}

.authorCopy p {
  font-size: 10.5px;
  line-height: 1.55;
}

.authorCopy .outlineButton {
  margin-top: 10px;
}

.quote {
  margin: 20px 22px 20px 0;
  padding: 18px;
}

.quote > span {
  font-size: 43px;
}

.quote p {
  font-size: 14px;
  line-height: 1.45;
}

.quote small {
  margin-top: 14px;
  font-size: 9px;
}

.outlineButton,
.primaryButton {
  min-height: 38px;
  padding: 0 16px;
  font-size: 9.5px;
}

.audience {
  gap: 12px;
  margin-top: 20px;
}

.audience article {
  min-height: 180px;
  padding: 17px 18px 70px;
}

.audience h3 {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.25;
}

.audience p {
  font-size: 10px;
  line-height: 1.45;
}

.audienceArt {
  bottom: -25px;
  height: 95px;
  opacity: 0.45;
}

.audiencePattern {
  height: 65px;
}

.clubPlate {
  right: 18px;
  bottom: 17px;
  width: 135px;
  padding: 15px;
}

.cta {
  min-height: 122px;
  gap: 26px;
  padding:
    22px
    max(24px, calc((100% - 1180px) / 2));
}

.cta h2 {
  margin: 5px 0;
  font-size: 23px;
}

.cta p {
  font-size: 10px;
}

.ctaActions {
  gap: 8px;
}

.ctaMap {
  width: 31%;
  opacity: 0.1;
}

/* Keep the page dense on medium desktop widths too. */
@media (max-width: 1120px) {
  .hero {
    min-height: 350px;
  }

  .author {
    min-height: 300px;
  }

  .authorPortrait {
    min-height: 300px;
  }
}

@media (max-width: 820px) {
  .hero {
    min-height: 400px;
  }

  .heroContent {
    width: calc(100% - 32px);
    padding-top: 45px;
  }

  .heroMap {
    right: -28%;
    width: 105%;
  }

  .section {
    width: calc(100% - 32px);
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .mission {
    padding-right: 0;
  }

  .authorPortrait {
    min-height: 300px;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: 42px;
  }

  .heroContent > strong {
    font-size: 17px;
  }

  .platformCard {
    min-height: 220px;
  }
}

/* TV KADR — ABOUT COMPACT OVERRIDES END */
/* TV KADR — ABOUT GLOBAL TYPOGRAPHY ALIGN START */

/*
 * /about uses the same public typography owners
 * as the rest of TV KADR.
 */

.page {
  font-family: var(--tvk-font-ui);
}

/* Page hero — same scale as other public page heroes. */

.hero h1 {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-page-title);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}

.heroContent > strong {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-section-title);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

.heroContent > p {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-primary);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--secondary);
}

/* Shared eyebrow / micro labels. */

.eyebrow,
.audienceIcon {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-micro);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Main section headings — same owner as public site sections. */

.sectionHeading h2,
.cta h2 {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-section-title);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

/* Standard public body copy. */

.missionGrid p,
.authorCopy p,
.audience p,
.cta p {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-primary);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--secondary);
}

/* Cards — same title/body scale used by other public cards. */

.principleCard h3,
.platformContent h3,
.audience h3 {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-card-title);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

.principleCard p,
.platformContent p {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-primary);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--secondary);
}

.platformContent strong,
.sectionMore {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-meta);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}

/* Author feature block. */

.authorCopy h2 {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-feature-title);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

.authorCopy > strong {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-primary);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.quote p {
  font-family: var(--tvk-font-editorial);
  font-size: var(--tvk-public-card-title);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}

.quote small {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-meta);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* CTA / buttons — same public button scale. */

.primaryButton,
.outlineButton {
  min-height: 44px;
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-button);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

/* Supporting small text. */

.clubPlate small {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-micro);
}

.heroStatement {
  font-family: var(--tvk-font-ui);
  font-size: var(--tvk-public-micro);
  line-height: 1.35;
  font-weight: 600;
}

.heroStatement strong {
  font-size: var(--tvk-public-meta);
}

/* TV KADR — ABOUT GLOBAL TYPOGRAPHY ALIGN END */
/* TV KADR — ABOUT MISSION TEXT ONLY START */

.mission {
  padding-right: 0;
}

.missionGrid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  max-width: 920px;
}

/* TV KADR — ABOUT MISSION TEXT ONLY END */
/* TV KADR — ABOUT PRINCIPLE SVG ICONS START */

.principleCard .icon {
  width: 32px;
  height: 32px;
}

.principleCard .icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* TV KADR — ABOUT PRINCIPLE SVG ICONS END */
/* TV KADR — ABOUT PLATFORM CARDS V2 START */

/*
 * Structure:
 *   1. artwork
 *   2. text panel
 *
 * Existing inline SVG icon remains in the text panel.
 */

.platformGrid {
  align-items: stretch;
}

.platformCard {
  display: grid;
  grid-template-rows: 108px minmax(138px, 1fr);
  min-height: 246px;
  overflow: hidden;

  background: #0b0c0c !important;

  border:
    1px solid
    var(--about-border);
}

/*
 * Existing decorative ::after is no longer needed.
 */

.platformCard::after {
  display: none;
}

/*
 * The existing backdrop div becomes the dedicated
 * image area at the top of every card.
 */

.platformBackdrop {
  position: relative;
  inset: auto;

  grid-column: 1;
  grid-row: 1;

  width: 100%;
  height: 108px;

  opacity: 1;

  background-color: #111;
  background-repeat: no-repeat;
  background-size: cover;

  border-bottom:
    1px solid
    rgba(244, 176, 0, 0.18);
}

/*
 * Slight bottom fade belongs only to the image,
 * not to the text.
 */

.platformBackdrop::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(7, 8, 8, 0.42) 100%
    );

  pointer-events: none;
}

/* 01 — Выпуски */

.art-episode .platformBackdrop {
  background-image:
    url("/assets/about/platform/episodes.png");

  background-position:
    center 39%;
}

/* 02 — Новости */

.art-news .platformBackdrop {
  background-image:
    url("/assets/about/platform/news.png");

  background-position:
    center 34%;
}

/* 03 — Досье */

.art-dossier .platformBackdrop {
  background-image:
    url("/assets/about/platform/dossier.png");

  background-position:
    center 31%;
}

/* 04 — Факт-центр */

.art-facts .platformBackdrop {
  background-image:
    url("/assets/about/platform/fact-center.png");

  background-position:
    center 42%;
}

/* 05 — Клуб */

.art-club .platformBackdrop {
  background-image:
    url("/assets/about/platform/club.png");

  background-position:
    center 34%;
}

/* 06 — Реклама */

.art-advertising .platformBackdrop {
  background-image:
    url("/assets/about/platform/advertising.png");

  background-position:
    center 38%;
}

/*
 * Text panel.
 * No text is placed over the photograph anymore.
 */

.platformContent {
  position: relative;
  inset: auto;

  grid-column: 1;
  grid-row: 2;

  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  grid-template-rows:
    26px
    minmax(60px, 1fr)
    auto;

  column-gap: 8px;
  row-gap: 8px;

  padding:
    12px
    12px
    12px;

  background:
    linear-gradient(
      180deg,
      #101111 0%,
      #0a0b0b 100%
    );

  text-shadow: none;
}

/*
 * Existing SVG icon.
 * Same coordinate on all six cards.
 */

.platformContent .icon {
  grid-column: 1;
  grid-row: 1;

  align-self: center;
  justify-self: start;

  width: 21px;
  height: 21px;

  margin: 0;

  color: var(--about-gold);
}

.platformContent .icon svg {
  display: block;

  width: 21px;
  height: 21px;
}

/*
 * All titles begin on exactly the same baseline.
 * One line for all six.
 */

.platformContent h3 {
  grid-column: 2;
  grid-row: 1;

  align-self: center;

  min-width: 0;

  margin: 0;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-family:
    var(--tvk-font-editorial);

  font-size:
    var(--tvk-public-card-title);

  line-height: 1.2;
  font-weight: 400;

  color: var(--text);
}

/*
 * Every description owns the same vertical area.
 * This fixes Fact-center and keeps all links aligned.
 */

.platformContent p {
  grid-column: 1 / -1;
  grid-row: 2;

  align-self: start;

  min-height: 60px;

  margin: 0;

  font-family:
    var(--tvk-font-ui);

  font-size:
    var(--tvk-public-primary);

  line-height: 1.45;
  font-weight: 400;

  color: var(--secondary);
}

/*
 * Links sit on the same bottom line.
 */

.platformContent strong {
  grid-column: 1 / -1;
  grid-row: 3;

  align-self: end;

  margin: 0;
  padding-top: 1px;

  font-family:
    var(--tvk-font-ui);

  font-size:
    var(--tvk-public-meta);

  line-height: 1.35;
  font-weight: 600;

  color: var(--about-gold);
}

/*
 * Hover remains restrained.
 */

.platformCard:hover {
  transform: translateY(-2px);

  border-color:
    rgba(244, 176, 0, 0.58);
}

/* Tablet */

@media (max-width: 1120px) {
  .platformCard {
    grid-template-rows:
      125px
      minmax(135px, 1fr);

    min-height: 260px;
  }

  .platformBackdrop {
    height: 125px;
  }
}

/* Mobile */

@media (max-width: 620px) {
  .platformCard {
    grid-template-rows:
      170px
      auto;

    min-height: 0;
  }

  .platformBackdrop {
    height: 170px;
  }

  .platformContent {
    grid-template-rows:
      27px
      auto
      auto;

    padding: 14px;
  }

  .platformContent p {
    min-height: 0;
  }
}

/* TV KADR — ABOUT PLATFORM CARDS V2 END */
/* TV KADR — ABOUT AUTHOR V5 START */

/*
 * Desktop:
 *
 * GREEN
 *   |
 *   | ROMAN |                 TEXT                         |
 *   |______________________________________________________| RED
 *
 * Whole composition is centered and has a hard right edge.
 */

.author {
  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    300px
    minmax(0, 760px);

  justify-content: center;

  width: 100%;
  min-height: 330px;

  padding:
    0
    max(
      24px,
      calc((100% - 1060px) / 2)
    );

  overflow: hidden;
}

/*
 * Roman begins at the same left boundary as the lower content
 * and occupies the first real column.
 */

.authorPortrait {
  position: relative;

  width: 300px;
  min-width: 300px;
  min-height: 330px;

  overflow: visible;
}

.authorPortrait::after {
  display: none;
}

.authorPortrait img {
  position: absolute;

  right: -12px;
  bottom: 0;

  width: auto;
  height: 126%;

  max-width: none;

  object-fit: contain;
  object-position: center bottom;

  transform: none;
}

/*
 * Text occupies everything between Roman and the red boundary.
 */

.authorCopy {
  box-sizing: border-box;

  width: 100%;
  min-width: 0;
  min-height: 330px;

  padding:
    28px
    0
    28px
    38px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  text-align: center;
}

/*
 * Hard internal limit.
 */

.authorCopy .goldLine,
.authorCopy .eyebrow,
.authorCopy h2,
.authorCopy > strong,
.authorCopy > p,
.authorCopy .quote {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;
}

.authorCopy .goldLine {
  width: 31px;

  margin-left: auto;
  margin-right: auto;
}

.authorCopy .eyebrow {
  margin-top: 10px;

  text-align: center;
}

.authorCopy h2 {
  margin:
    7px
    auto
    3px;

  text-align: center;
}

.authorCopy > strong {
  margin:
    0
    auto;

  text-align: center;
}

.authorCopy > p {
  max-width: 720px;

  margin:
    13px
    auto
    0;

  text-align: center;
}

/*
 * Quote remains part of the central text flow.
 */

.authorCopy .quote {
  max-width: 680px;

  margin:
    18px
    auto
    0;

  padding:
    14px
    0
    0;

  border: 0;

  border-top:
    1px solid
    rgba(244, 176, 0, 0.24);

  background: transparent;

  text-align: center;
}

.authorCopy .quote > span {
  display: block;

  height: 22px;

  margin:
    0
    auto;

  color: var(--about-gold);

  font-family:
    var(--tvk-font-editorial);

  font-size: 38px;
  line-height: 0.8;
}

.authorCopy .quote p {
  max-width: 620px;

  margin:
    5px
    auto
    0;

  text-align: center;
}

.authorCopy .quote small {
  display: block;

  margin:
    8px
    auto
    0;

  text-align: center;
}

.authorCopy > .outlineButton {
  display: none !important;
}

/*
 * Normal desktop / notebook.
 */

@media (max-width: 1180px) and (min-width: 821px) {
  .author {
    grid-template-columns:
      270px
      minmax(0, 700px);

    padding:
      0
      24px;
  }

  .authorPortrait {
    width: 270px;
    min-width: 270px;
  }

  .authorPortrait img {
    right: -8px;
    height: 122%;
  }

  .authorCopy {
    padding-left: 32px;
  }

  .authorCopy > p {
    max-width: 660px;
  }

  .authorCopy .quote {
    max-width: 620px;
  }
}

/*
 * Tablet / mobile.
 */

@media (max-width: 820px) {
  .author {
    grid-template-columns: 1fr;

    min-height: 0;

    padding:
      0
      16px;
  }

  .authorPortrait {
    width: 100%;
    min-width: 0;
    min-height: 300px;

    overflow: hidden;
  }

  .authorPortrait img {
    right: 50%;
    bottom: 0;

    height: 300px;

    transform:
      translateX(50%);
  }

  .authorCopy {
    min-height: 0;

    padding:
      28px
      0
      34px;
  }
}

/* TV KADR — ABOUT AUTHOR V5 END */
/* TV KADR — ABOUT ROMAN CROPPED V5.3 START */

/*
 * ABOUT uses a transparency-cropped copy of Roman.
 * Grid geometry and text boundaries remain owned by AUTHOR V5.
 */

.authorPortrait {
  overflow: hidden;
}

.authorPortrait img {
  position: absolute;

  left: 50%;
  right: auto;
  bottom: 0;

  width: auto;
  height: 102%;

  max-width: none;

  object-fit: contain;
  object-position: center bottom;

  transform: translateX(-50%);
}

/*
 * Notebook desktop.
 */

@media (max-width: 1180px) and (min-width: 821px) {
  .authorPortrait img {
    left: 50%;
    right: auto;

    height: 102%;

    transform: translateX(-50%);
  }
}

/*
 * Mobile remains stacked.
 */

@media (max-width: 820px) {
  .authorPortrait img {
    left: 50%;
    right: auto;

    width: auto;
    height: 300px;

    transform: translateX(-50%);
  }
}

/* TV KADR — ABOUT ROMAN CROPPED V5.3 END */
/* TV KADR — ABOUT AUDIENCE GRADIENT V1 START */

/*
 * Clean editorial cards:
 * no maps, no club plate, no decorative image layer.
 */

.audience article {
  position: relative;

  min-height: 170px;

  padding:
    20px
    22px
    22px;

  overflow: hidden;

  border:
    1px solid
    rgba(244, 176, 0, 0.22);

  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(244, 176, 0, 0.11) 0%,
      rgba(244, 176, 0, 0.035) 28%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      rgba(244, 176, 0, 0.045) 0%,
      rgba(244, 176, 0, 0.012) 42%,
      transparent 72%
    ),
    #0b0c0c;
}

/*
 * Very subtle light sweep.
 * No image or pattern.
 */

.audience article::after {
  content: "";

  position: absolute;

  top: -45%;
  right: -24%;

  width: 68%;
  height: 150%;

  pointer-events: none;

  transform: rotate(16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 176, 0, 0.035),
      transparent
    );
}

/*
 * Text always stays above the decorative gradient.
 */

.audience article > * {
  position: relative;
  z-index: 1;
}

.audienceIcon {
  display: block;
}

.audience h3 {
  margin:
    9px
    0
    9px;
}

.audience p {
  max-width: 92%;

  margin: 0;
}

/*
 * Legacy visual classes are deliberately disabled.
 * They can remain in the base stylesheet without affecting UI.
 */

.audienceArt,
.audiencePattern,
.clubPlate {
  display: none !important;
}

@media (max-width: 820px) {
  .audience article {
    min-height: 155px;

    padding:
      19px
      20px
      21px;
  }

  .audience p {
    max-width: 100%;
  }
}

/* TV KADR — ABOUT AUDIENCE GRADIENT V1 END */
/* TV KADR — ABOUT CTA NO MAP START */

/*
 * Bottom "Присоединяйтесь к TV KADR" block:
 * remove decorative world map only.
 */

.ctaMap {
  display: none !important;
}

/* TV KADR — ABOUT CTA NO MAP END */
/* TV KADR — ABOUT QUOTE SIGNATURE HOME STYLE START */

/*
 * Match the restrained signature treatment used
 * in the homepage hero quote.
 *
 * Keep the ABOUT signature below the quote.
 */

.authorCopy .quote small {
  display: block;

  width: max-content;

  margin:
    8px
    auto
    0;

  color: var(--secondary);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 13px;
  line-height: 1.45;

  font-style: italic;
  font-weight: 400;

  text-align: center;
}

/* TV KADR — ABOUT QUOTE SIGNATURE HOME STYLE END */