/* ==========================================================================
   „Über mich" — panel sliding in from the right.
   Breakpoints follow the site's own set (375/600/744/1020/1280/1440); easing
   is the site's dominant curve.
   ========================================================================== */

.about-drawer {
  position: fixed;
  inset: 0;
  /* Above the fixed header (z-index 900) and the sticky subnav (891). */
  z-index: 1000;
}

.about-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--primitive-black) 55%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: aboutDrawerFade .35s cubic-bezier(.645, .045, .355, 1) both;
}

.about-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--primitive-black);
  display: flex;
  flex-direction: column;
  box-shadow: -40px 0 80px rgb(0 0 0 / .35);
  animation: aboutDrawerIn .45s cubic-bezier(.165, .84, .44, 1) both;
}

@media (width >= 600px) {
  .about-drawer__panel { width: min(560px, 92vw); }
}
@media (width >= 1280px) {
  .about-drawer__panel { width: min(880px, 62vw); }
}

/* ---------- bar ---------- */

.about-drawer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--grid-gutter-width);
  border-bottom: 1px solid color-mix(in srgb, var(--primitive-white) 14%, transparent);
  flex: 0 0 auto;
}

.about-drawer__eyebrow {
  margin: 0;
  color: var(--muted-on-dark);
}

.about-drawer__close {
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: var(--primitive-white);
  cursor: pointer;
  transition: background-color .2s cubic-bezier(.645, .045, .355, 1);
}
.about-drawer__close:hover {
  background-color: color-mix(in srgb, var(--primitive-white) 12%, transparent);
}
.about-drawer__close svg { width: 22px; height: 22px; display: block; }

/* ---------- content ---------- */

.about-drawer__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 32px var(--grid-gutter-width) 48px;
}

.about-drawer__lead { margin: 0 0 24px; }
.about-drawer__p { margin: 0 0 20px; color: var(--warm-200); }
.about-drawer__outro {
  margin: 36px 0 0;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.about-drawer__cta { margin-top: 32px; }

@media (width >= 744px) {
  .about-drawer__bar { padding: 28px 32px; }
  .about-drawer__scroll { padding: 40px 32px 56px; }
}

/* ---------- motion ---------- */

@keyframes aboutDrawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes aboutDrawerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Under reduced motion the panel still appears, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
  .about-drawer__panel,
  .about-drawer__backdrop { animation: none; }
}

/* ---------- portrait ----------------------------------------------------
   Two columns from 1020px: prose left, portrait right. The panel widens at
   that breakpoint so neither column is squeezed. The source frame is
   landscape with the subject on its right, so `object-position: right`
   keeps her in view when the column is narrower than the frame.
   ----------------------------------------------------------------------- */
.about-drawer__scroll {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-content: start;
}

.about-drawer__portrait {
  margin: 0;
  /* Below 1020 she leads the text rather than sitting beside it. */
  order: -1;
  justify-self: end;
  width: min(260px, 68%);
}

.about-drawer__portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (width >= 1020px) {
  .about-drawer__scroll {
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 28px;
  }
  .about-drawer__text { grid-column: 1; }
  .about-drawer__portrait {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    /* Stays with the reader as the prose scrolls past. */
    position: sticky;
    top: 0;
  }
}

@media (width >= 1280px) {
  .about-drawer__scroll { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
}