/* About window: the human behind the pixie (a dialog opened by the hero's label button, script.js). The real
   photo as a taped polaroid, the intro and the fun fact on a sticky note. The dialog fills the screen (its
   empty area is the backdrop click target). Phones: a sheet sliding up from the bottom with a grab bar,
   dragged down by its top part to close (touch-action: none there, script.js). From tablets up: a card in
   the middle, the photo beside the text */

html:has(.about-dialog[open]) { overflow: hidden; }
/* overflow: clip, not hidden: opening focuses the close button while the sheet is still below the screen, and
   a hidden-overflow dialog would scroll to show it, throwing the slide-up off (script.js also resets it) */
.about-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; overflow: clip; border: 0; background: transparent; color: var(--ink); }
.about-dialog[open] { display: grid; align-items: end; justify-items: center; }
.about-dialog::backdrop { background: color-mix(in srgb, var(--ink) 84%, transparent); }

.about-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 22px 34px;
  border: var(--line);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background: var(--paper) radial-gradient(color-mix(in srgb, var(--color-3) 22%, transparent) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  text-align: center;
  animation: sheet-up .45s cubic-bezier(.34, 1.2, .64, 1);
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
}
.about-dialog.is-touching .about-card { transition: none; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* Grab bar: the sheet's handle on phones */
.about-grab { width: 100%; padding: 12px 0 6px; touch-action: none; }
.about-grab::before { display: block; width: 52px; height: 6px; margin: 0 auto; content: ""; border-radius: 99px; background: var(--ink); opacity: .35; }
.about-close.lightbox-button { top: 14px; right: 14px; width: 46px; height: 46px; box-shadow: 3px 3px 0 var(--color-1); }
.about-close svg { width: 22px; height: 22px; }

/* The photo: a polaroid held by washi tape, captioned by hand */
.about-photo { position: relative; width: min(56%, 210px); margin: 18px 0 0; padding: 10px 10px 0; border: var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(-4deg); touch-action: none; }
.about-photo::before { position: absolute; top: -13px; left: 50%; width: 70px; height: 22px; content: ""; border: 2px solid var(--ink); background: color-mix(in srgb, var(--color-2) 85%, transparent); transform: translateX(-50%) rotate(3deg); }
.about-photo > img, .about-photo-placeholder { width: 100%; aspect-ratio: 4 / 5; border: 2px solid var(--ink); object-fit: cover; }
.about-photo-placeholder { display: grid; place-items: center; background: linear-gradient(170deg, var(--color-2), var(--color-1)); }
.about-photo-placeholder .icon { width: 40%; }
.about-photo figcaption { padding: 8px 0 10px; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1; text-align: center; }

.about-body { display: grid; justify-items: center; max-width: 440px; margin-top: 22px; }
.about-body h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 8vw, 2.6rem); text-wrap: balance; }
.about-body p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
/* The fun fact: a tilted sticky note */
.about-body .about-fact { margin-top: 20px; padding: 10px 16px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--color-2); box-shadow: var(--shadow-sm); color: var(--ink); font-size: .95rem; line-height: 1.35; transform: rotate(-2deg); }

@media (min-width: 681px) {
  .about-dialog[open] { align-items: center; padding: 24px; }
  .about-card {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    width: min(780px, 100%);
    padding: 46px 48px 44px;
    border-bottom: var(--line);
    border-radius: 32px;
    box-shadow: 10px 10px 0 var(--color-1);
    text-align: start;
    animation: pop .35s cubic-bezier(.34, 1.56, .64, 1);
  }
  .about-grab { display: none; }
  .about-photo { width: 100%; margin: 0; }
  .about-body { justify-items: start; margin: 0; }
  .about-body h2 { font-size: 2.6rem; }
  .about-body p { font-size: 1.08rem; }
}