/* ======================================================= */
/* ABOUT PAGE — INSTITUTIONAL EDITORIAL SYSTEM */
/* ======================================================= */

.about-cinema-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 180px 0 90px;

  background:
    linear-gradient(
      180deg,
      #11161d 0%,
      #171d25 48%,
      #0c1015 100%
    );

  isolation: isolate;
}

.about-atmosphere {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 22% 28%,
      rgba(199,163,90,0.08),
      transparent 30rem
    ),

    radial-gradient(
      circle at 78% 38%,
      rgba(179,188,200,0.07),
      transparent 36rem
    );

  opacity: 0.9;

  animation: atmosphereFloat 24s ease-in-out infinite alternate;
}

.about-grid-lines {
  position: absolute;
  inset: 0;

  opacity: 0.06;

  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 84px 84px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 18%,
      black 82%,
      transparent
    );
}

.about-hero-grid {
  position: relative;
  z-index: 5;

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

  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.about-hero-copy h1 {
  max-width: 820px;

  font-size: clamp(4.4rem, 9vw, 9rem);
  line-height: 0.9;

  letter-spacing: -0.04em;

  color: var(--ink);

  margin-bottom: 2rem;
}

.hero-micro {
  color: rgba(243,244,246,0.72);

  font-size: 1rem;
  letter-spacing: 0.08em;
}

.about-hero-brief {
  position: relative;

  padding-left: 2rem;

  border-left:
    1px solid rgba(199,163,90,0.24);
}

.about-hero-brief span {
  display: block;

  margin-bottom: 1rem;

  color: var(--gold);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.about-hero-brief p {
  font-family: var(--serif);

  color: rgba(243,244,246,0.74);

  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.15;
}

/* ======================================= */
/* EDITORIAL STATEMENT */
/* ======================================= */

.statement-shell {
  display: grid;
  grid-template-columns: 1fr 0.9fr;

  gap: clamp(3rem, 8vw, 10rem);
}

.statement-left h2 {
  font-size: clamp(2.8rem, 5.5vw, 6rem);

  line-height: 0.98;

  max-width: 760px;
}

.statement-right {
  padding-top: 1.4rem;
}

.statement-right p {
  margin-bottom: 1.6rem;

  max-width: 560px;

  font-size: 1rem;
  line-height: 1.9;
}

/* ======================================= */
/* PRINCIPLES */
/* ======================================= */

.institutional-principles {
  position: relative;

  background:
    linear-gradient(
      180deg,
      rgba(17,22,29,0.98),
      rgba(12,16,21,0.98)
    );

  border-block:
    1px solid rgba(255,255,255,0.06);
}

.narrow-shell {
  max-width: 1040px;
}

.principle-row {
  display: grid;
  grid-template-columns: 90px 1fr;

  gap: 2rem;

  padding: 3rem 0;
}

.principle-index {
  color: rgba(199,163,90,0.72);

  font-family: var(--serif);

  font-size: 2rem;
}

.principle-content h3 {
  font-size: clamp(2rem, 4vw, 4rem);

  line-height: 0.95;

  margin-bottom: 1rem;
}

.principle-content p {
  max-width: 620px;

  font-size: 1rem;

  line-height: 1.85;
}

.principle-divider {
  width: 100%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(199,163,90,0.22),
      transparent
    );
}

/* ======================================= */
/* VISUAL BAND */
/* ======================================= */

.about-visual-band {
  position: relative;

  height: 72vh;

  overflow: hidden;
}

.about-visual-band img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.75)
    contrast(1.05)
    brightness(0.65);
}

.about-visual-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(5,8,12,0.18),
      rgba(5,8,12,0.74)
    );

  z-index: 1;
}

.about-visual-copy {
  position: absolute;

  left: 8vw;
  bottom: 5vw;

  z-index: 2;

  max-width: 760px;
}

.about-visual-copy h2 {
  font-size: clamp(3rem, 6vw, 7rem);

  line-height: 0.92;

  color: white;
}

/* ======================================= */
/* PRESENCE */
/* ======================================= */

.presence-stack {
  margin-top: 3rem;

  display: flex;
  flex-wrap: wrap;

  gap: 1.2rem;
}

.presence-city {
  padding: 0.9rem 1.3rem;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.02);

  color: rgba(243,244,246,0.72);

  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ======================================= */
/* QUOTE */
/* ======================================= */

.about-quote {
  border-top:
    1px solid rgba(255,255,255,0.06);
}

.about-quote blockquote {
  font-size: clamp(2.8rem, 6vw, 6.5rem);

  line-height: 0.98;

  color: var(--ink);
}

/* ======================================= */
/* CONTACT */
/* ======================================= */

.contact-shell {
  text-align: center;
}

.contact-shell h2 {
  max-width: 920px;

  margin-inline: auto;

  font-size: clamp(2.8rem, 5vw, 5rem);

  line-height: 1;
}

.minimal-contact-link {
  display: inline-flex;

  margin-top: 2rem;

  border:
    1px solid rgba(199,163,90,0.28);

  padding:
    1rem 1.6rem;

  color: var(--gold);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.minimal-contact-link:hover {
  background: rgba(199,163,90,0.12);
}


/* ======================================= */
/* RESPONSIVE */
/* ======================================= */

@media(max-width: 980px) {

  .about-hero-grid,
  .statement-shell {
    grid-template-columns: 1fr;
  }

  .about-cinema-hero {
    min-height: auto;
  }

  .about-hero-copy h1 {
    font-size: clamp(3.5rem, 14vw, 6rem);
  }

  .about-visual-band {
    height: 56vh;
  }

}

@media(max-width: 680px) {

  .principle-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-visual-copy h2 {
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  .about-quote blockquote {
    font-size: clamp(2.2rem, 10vw, 3.8rem);
  }

}