/* =========================================================================
   about.css - ABOUT ("היי, אני רות שינדלר") - Figma frame 1:4, y 4740-5780.
   Desktop (>=1024): section is 1040u tall; the media box (706x900u) sits at
   x149 y80; the text column is anchored to the right edge (x 913-1741).
   The media box is a size container: every decoration inside it is written
   in cqw of its 706px Figma width, so the composition scales as one piece
   on tablet/mobile too.
   ========================================================================= */

#about {
  position: relative;
  background: var(--fg-paper);
  color: var(--fg-brown);
  overflow: hidden;
}

/* ---------------- media box (portrait + label + seal + hairline) -------- */
#about .about__media {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 706 / 900;
}
#about .about__portrait {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
/* "About Me" - Malfin 160 / 74%, box 426x236 rotated -90deg about its
   top-left corner (Figma 1:92 at x187 y5720 -> box x38 y900 in the media). */
#about .about__label {
  position: absolute;
  left: calc(38 / 706 * 100cqw);
  top: calc(900 / 706 * 100cqw);
  inline-size: calc(426 / 706 * 100cqw);
  block-size: calc(236 / 706 * 100cqw);
  transform: rotate(-90deg);
  transform-origin: 0 0;
  direction: ltr;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(160 / 706 * 100cqw);
  line-height: .74;
  color: var(--fg-brown);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* R seal (1:136 + 1:138), export origin x734.3 y5011.5 */
#about .about__seal {
  position: absolute;
  left: calc(585.3 / 706 * 100cqw);
  top: calc(191.5 / 706 * 100cqw);
  inline-size: calc(107 / 706 * 100cqw);
  block-size: auto;
}
/* The seal is three layers in one box: brown text ring under the portrait,
   white text ring over it masked by the portrait's own alpha (so letters are
   white exactly where the caramel panel is) and the R. The ring travels
   round its oval (js/main.js initSeals). */
#about .about__media { isolation: isolate; }
#about .about__ring--under { z-index: -1; }
#about .about__ring-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url('../../assets/img/about-portrait-composite.webp') 0 0 / 100% 100% no-repeat;
          mask: url('../../assets/img/about-portrait-composite.webp') 0 0 / 100% 100% no-repeat;
}
/* hairline under the seal (1:144: x784, y5177, 326 long) */
#about .about__line {
  position: absolute;
  left: calc(635 / 706 * 100cqw);
  top: calc(357 / 706 * 100cqw);
  inline-size: 1px;
  block-size: calc(326 / 706 * 100cqw);
  background: rgba(93, 40, 9, .6);   /* matches Figma half-pixel 1px stroke */
}

/* ---------------- text column ---------------------------------------- */
#about .about__heading {
  margin: 0;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-h2-fg);
  color: var(--fg-brown);
  text-align: right;
  letter-spacing: 0;
}
#about .about__body {
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.2;
  color: var(--fg-brown);
  text-align: right;
}
#about .about__body p { margin: 0; }
#about .about__body p + p { margin-top: 1.2em; }   /* Figma: one empty line */
#about .about__body strong { font-weight: 700; }

/* ======================= DESKTOP (Figma geometry) ===================== */
@media (min-width: 1280px) {
  #about {
    block-size: calc(1040 * var(--u));
    padding: 0;
  }
  #about .about__media {
    position: absolute;
    left: calc(149 * var(--u));
    top: calc(80 * var(--u));
    inline-size: calc(706 * var(--u));
  }
  #about .about__text {
    position: relative;
    z-index: 1;
    inline-size: calc(828 * var(--u));
    margin-inline-start: calc(179 * var(--u));   /* right edge x1741 */
    padding-top: calc(293 * var(--u));           /* heading top y5033 */
  }
  #about .about__heading { min-block-size: calc(142 * var(--u)); }
  #about .about__body   { margin-top: calc(73 * var(--u)); }   /* y5248 */
  #about .about__cta {
    position: absolute;
    right: calc(2 * var(--u));                 /* x1555 + 184 = 1739 */
    top: calc(941 * var(--u));                 /* y5681 */
  }
}

/* ======================= TABLET + MOBILE (stacked) ==================== */
@media (max-width: 1279.98px) {
  #about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 6vw, 3rem);
    padding: clamp(3.5rem, 9vw, 5rem) var(--container-pad, 20px);
  }
  #about .about__media {
    inline-size: min(100%, 460px);
    /* keep the rotated label from touching the viewport edge */
    margin-inline: auto;
  }
  #about .about__text {
    inline-size: min(100%, 640px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* RTL: start = right */
    gap: clamp(1.5rem, 4vw, 2rem);
  }
  #about .about__heading { font-size: clamp(38px, 8.5vw, 64px); }
  #about .about__body { font-size: clamp(16px, 2.3vw, 19px); line-height: 1.45; }
  #about .about__br { display: none; }   /* manual breaks only at Figma width */
  #about .about__cta { align-self: flex-start; }
}