.whoami { background: var(--bg-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 44px 0; }
.whoami-kicker { display: inline-block; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--accent); margin-bottom: 20px; }

.polaroid {
  position: relative; width: 62%; max-width: 250px; margin: 6px auto 32px;
  background: var(--surface); padding: 12px 12px 42px; border-radius: 4px;
  box-shadow: var(--shadow-tape); transform: rotate(-3deg);
}
.polaroid-pic { aspect-ratio: 1/1; border-radius: 2px; background: url('../assets/alejandra-mendiola.webp') center/cover no-repeat; }
.tape { position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 92px; height: 26px; background: rgb(184 116 58 / 26%); border: 1px solid rgb(184 116 58 / 22%); border-radius: 2px; z-index: 2; }
.whoami-hello { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2vw, 20px); color: var(--ink-mute); margin: 0 0 12px; }
.whoami-hello em { color: var(--accent); font-weight: 700; font-style: italic; }
.whoami-note { position: relative; font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(25px, 7.4vw, 33px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; padding: 0 4px; }
.whoami-note::before { content: "\201C"; position: absolute; left: -6px; top: -16px; font-family: var(--font-display); font-size: 58px; line-height: 1; color: var(--accent); opacity: 0.5; font-style: normal; }
.whoami-note::after { content: "\201D"; display: inline; font-family: var(--font-display); font-size: 58px; line-height: 0; color: var(--accent); opacity: 0.5; font-style: normal; vertical-align: -0.35em; margin-left: 2px; }
.whoami-story { font-size: clamp(14.5px, 1.6vw, 15.5px); line-height: 1.6; color: var(--ink); margin: 0 0 26px; }
.whoami-body { font-size: clamp(14.5px, 1.6vw, 15.5px); line-height: 1.6; color: var(--ink); margin: 0 0 26px; }
.whoami-sign { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); overflow: visible; }
.whoami-sign .sign-text { display: flex; flex-direction: column; }
.whoami-social { display: flex; gap: 10px; margin-top: 14px; }
.whoami-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-soft); color: var(--ink-mute);
  transition: border-color 0.15s, color 0.15s;
}
.whoami-social svg { width: 16px; height: 16px; }
.whoami-social a:active { color: var(--accent); border-color: var(--accent); }
.whoami-social a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: var(--focus-offset); }
.whoami-sign .sign-logo { height: 54px; width: auto; display: block; flex: 0 0 auto; mix-blend-mode: multiply; }
.whoami-sign .sig-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(18px, 2vw, 20px); line-height: 1.15; }
.whoami-sign .sig-role { font-size: 11.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.whoami-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.fact { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 10px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; text-align: center; }
.fact b { display: block; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 2px; }

/* ─── Tablet+ (≥ 600px) ─────────────────────────────────────────── */
@media (width >= 600px) {
  .whoami-sign .sign-logo { height: 64px; }
  .whoami { padding: 56px 0; }

  .whoami-inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
  }
  .polaroid { margin: 0; max-width: none; width: 100%; }
  .whoami-note { font-size: clamp(25px, 5vw, 33px); }
  .whoami-note::before { left: -10px; top: -18px; }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (width >= 1024px) {
  .whoami-sign .sign-logo { height: 76px; }
  .whoami { padding: 72px 0; }
  .whoami-inner { grid-template-columns: 300px 1fr; gap: 56px; }
  .whoami-note { font-size: clamp(28px, 3vw, 36px); }
  .whoami-note::before { left: -14px; top: -20px; font-size: 68px; }
}

/* ─── Hover ──────────────────────────────────────────────────────── */
@media (hover: hover) {
  .whoami-social a:hover { color: var(--accent); border-color: var(--accent); }
}