/* ============================================================
   about.css — Otokini page: identity block and "who is asking?" essay
   ============================================================ */


/* --- identity block --- */
/* asymmetric flex: operational info on the left, photo on the right */

.identity-block {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--space-l);
  margin-bottom:   var(--space-l);
}

.identity-name {
  font-size:     1.06rem;
  line-height:   1.3;
  margin-bottom: 0.35rem;
}

.identity-geo {
  font-size:     0.72rem;
  color:         var(--muted);
  font-style:    italic;
  margin-bottom: var(--space-m);
}

.identity-contacts {
  display:        flex;
  flex-direction: column;
  gap:            0.44rem;
}

/* each contact row: small icon + text, quiet and muted */
.identity-link {
  display:         flex;
  align-items:     center;
  gap:             0.42rem;
  font-size:       0.74rem;
  color:           var(--muted);
  text-decoration: none;
  transition:      color 0.2s;
}

.identity-link:hover { color: var(--ink); }

.identity-link svg {
  opacity:     0.65;
  flex-shrink: 0;
}

/* photo placeholder — warm parchment, Dawaba corner radius not Apple's */
.identity-photo {
  width:           92px;
  height:          92px;
  flex-shrink:     0;
  background:      #E8DFCF;
  border:          1px solid var(--border);
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.63rem;
  letter-spacing:  0.07em;
  color:           var(--faint);
  font-style:      italic;
  text-align:      center;
  line-height:     1.5;
  overflow:        hidden; /* clips the actual photo once added */
}

/* the real photo — swap the placeholder div for an <img> in production */
.identity-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}


/* --- "who is asking?" separator and essay --- */

.about-label {
  padding-top:   var(--space-l);
  border-top:    1px solid var(--border);
  margin-bottom: var(--space-l);
}

.about-body p {
  font-size:     0.94rem;
  line-height:   2.05;
  margin-bottom: 1.45em;
}

.about-body em { font-style: italic; }