/* ============================================================
   LUFA — About Page  (Masha Razner exact recreation)
============================================================ */

/* ── Hero ── */
.about-hero {
  padding: 110px 24px 90px;
  text-align: center;
  background: var(--bg);
}
.about-hero-signature {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 36px;
  display: block;
}
.about-hero h1 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 780px;
  margin: 0 auto;
  color: var(--ink);
}
.about-hero h1 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}
.about-hero-line {
  width: 56px;
  height: 1px;
  background: var(--muted);
  margin: 60px auto 0;
  opacity: 0.35;
}

/* ══════════════════════════════════════════
   COLLAGE — exact Masha Razner recreation
   Uses absolute positioning inside a fixed-
   height canvas so elements overlap freely.
══════════════════════════════════════════ */
.about-collage {
  background: #e9e4dc;
  padding: 72px 0 96px;
  direction: ltr;        /* layout is LTR like the original */
  overflow: hidden;
}

.collage-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

/* Title — left-aligned, ~58% wide, large uppercase */
.collage-title {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 56px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: #2c2a25;
  max-width: 58%;
  margin: 0 0 38px;
  direction: ltr;
  text-align: left;
}

/* Canvas — fixed height, all children absolute */
.collage-canvas {
  position: relative;
  height: 560px;
}

/* ── Left text (below title, left column) ── */
.cl-text-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 255px;
}
.cl-text-left p {
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  line-height: 1.78;
  color: #7a6d60;
  margin: 0 0 18px;
  direction: rtl;
  text-align: right;
}

/* ── Center image — large, spans full canvas height ── */
.cl-img-center {
  position: absolute;
  left: 330px;
  top: -28px;
  width: 420px;
  height: 540px;
  z-index: 1;
}
.cl-img-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Top-right image ── */
.cl-img-top-right {
  position: absolute;
  right: 0;
  top: -28px;
  width: 290px;
  height: 240px;
  z-index: 1;
}
.cl-img-top-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bottom-left image — overlaps INTO center image ── */
.cl-img-bottom-left {
  position: absolute;
  left: 235px;           /* starts inside center image's left edge */
  bottom: 0;
  width: 300px;
  height: 215px;
  z-index: 3;            /* above center image */
}
.cl-img-bottom-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Right text (below top-right image) ── */
.cl-text-right {
  position: absolute;
  right: 0;
  top: 240px;
  width: 290px;
  padding-top: 24px;
}
.cl-text-right p {
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  line-height: 1.78;
  color: #7a6d60;
  margin: 0 0 18px;
  direction: rtl;
  text-align: right;
}

/* ── Email signup ── */
.about-email {
  background: var(--sage-deep);
  color: var(--cream);
  padding: 90px 24px;
  text-align: center;
}
.about-email-kicker {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(250,246,239,0.45);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.about-email h2 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 400;
  font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--cream);
}
.about-email p {
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  color: rgba(250,246,239,0.55);
  margin: 0 0 36px;
}
.about-email-form {
  display: flex;
  max-width: 400px;
  margin: 0 auto;
  direction: ltr;
}
.about-email-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  font-size: 14px;
  font-family: "Heebo", sans-serif;
  background: rgba(250,246,239,0.08);
  border: 1px solid rgba(250,246,239,0.22);
  border-right: none;
  color: var(--cream);
  outline: none;
  border-radius: 999px 0 0 999px;
  direction: rtl;
}
.about-email-form input::placeholder { color: rgba(250,246,239,0.35); }
.about-email-form button {
  padding: 14px 26px;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-family: "Heebo", sans-serif;
  background: var(--cream);
  color: var(--sage-deep);
  border: none;
  cursor: pointer;
  border-radius: 0 999px 999px 0;
  transition: background .3s;
  white-space: nowrap;
}
.about-email-form button:hover { background: #ede8df; color: var(--sage-deep) !important; }

/* ── Reveal ── */
.about-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.about-reveal.in { opacity: 1; transform: none; }

/* ── Mobile ── */
@media (max-width: 860px) {
  .collage-inner { padding: 0 20px; }
  .collage-title { max-width: 100%; font-size: clamp(24px, 6vw, 38px); }
  .collage-canvas { height: auto; position: static; }
  .cl-text-left, .cl-img-center, .cl-img-top-right,
  .cl-img-bottom-left, .cl-text-right {
    position: static;
    width: 100%;
    margin-bottom: 16px;
  }
  .cl-img-center, .cl-img-top-right, .cl-img-bottom-left {
    height: 260px;
    top: auto; left: auto; right: auto; bottom: auto;
  }
}