/* Meet Sasha ("A little about me"): an editor's-letter spread. One large portrait of her original
   photo in a gold hairline mat, a taped polaroid that develops after a sparkle, a small moving
   polaroid ("behind the scenes": a silent clip that plays only while on screen), the three
   paragraphs with a lead-in and a pull line, and her name signed in Boska italic. Photos turn only
   flat. */
#about {
  --ab-gold: rgba(233, 195, 138, 0.42);
  position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: clip;
  padding: clamp(104px, 13vh, 150px) var(--pad) clamp(88px, 12vh, 140px);
  background:
    radial-gradient(52% 62% at 24% 54%, rgba(124, 20, 64, 0.42), transparent 72%),
    radial-gradient(40% 46% at 86% 18%, rgba(233, 195, 138, 0.07), transparent 70%),
    linear-gradient(180deg, #0b0608 0%, #12080d 30%, #150910 62%, #0b0608 100%);
}
#about .ab-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#about .ab-glow { position: absolute; left: 6%; top: 18%; width: 64vmin; height: 64vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.22), rgba(255, 46, 136, 0.05) 50%, transparent 70%); filter: blur(8px); animation: ab-breathe 9s ease-in-out infinite; }
#about .ab-glow-2 { left: auto; right: 2%; top: auto; bottom: 4%; width: 44vmin; height: 44vmin; background: radial-gradient(circle, rgba(255, 214, 228, 0.08), transparent 68%); animation-delay: -4s; }
@keyframes ab-breathe { 50% { transform: scale(1.1); opacity: 0.75; } }

/* ---- layout: photographs left, the letter right (on phones: title, photographs, letter) */
#about .ab-wrap { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); grid-template-areas: "ph hd" "ph tx"; column-gap: clamp(40px, 6.5vw, 120px); }

/* ---- the photographs */
#about .ab-photos { grid-area: ph; align-self: center; position: relative; --mw: min(86%, 500px, calc((100svh - 260px) * 0.8));
  /* both polaroids scale with the portrait, so on short screens they stay apart as on tall ones */
  --vw: clamp(140px, min(29%, calc(var(--mw) * 0.33)), 164px); --pw: clamp(150px, min(38%, calc(var(--mw) * 0.44)), 220px); }
#about .ab-main-w { position: relative; width: var(--mw); margin-left: 2%; }
#about .ab-main { position: relative; margin: 0; }
#about .ab-mat { position: absolute; inset: 20px -20px -20px 20px; z-index: -1; border-radius: 28px; border: 1px solid var(--ab-gold); }
#about .ab-mat::before { content: ""; position: absolute; right: -1px; bottom: 26px; width: 1px; height: 64px; background: linear-gradient(transparent, var(--gold), transparent); }
#about .ab-img { position: relative; overflow: hidden; border-radius: 22px; background: #1a0d13; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 110px -30px rgba(255, 46, 136, 0.45); }
#about .ab-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
#about .ab-cap { position: absolute; right: calc(100% + 18px); bottom: 2px; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: 500 10px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(233, 195, 138, 0.62); }
#about .ab-cap::after { content: ""; display: inline-block; width: 1px; height: 46px; margin-top: 14px; vertical-align: middle; background: linear-gradient(rgba(233, 195, 138, 0.6), transparent); }
#about .ab-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0.14), transparent 24%, transparent 72%, rgba(255, 180, 210, 0.1)); }

/* the polaroid: tucked over the portrait's lower right corner; it develops after its flash */
#about .ab-pola-w { position: absolute; z-index: 3; width: var(--pw); left: calc(2% + var(--mw) - var(--pw) * 0.62); bottom: -7%; }
#about .ab-pola { padding: 11px 11px 48px; rotate: 5deg; box-shadow: 0 36px 60px -26px rgba(0, 0, 0, 0.85), 0 10px 22px -12px rgba(0, 0, 0, 0.6); }
/* layers only while they drift (a still layer holding a lazy image can stay blank in Chrome) */
#about.ab-live .ab-main, #about.ab-live .ab-pola, #about.ab-live .ab-vid { will-change: transform; }
#about .ab-pola .tape { left: 50%; top: -13px; margin-left: -43px; rotate: -4deg; }
#about .ab-print { position: relative; }
#about .ab-pola img { object-position: 50% 16%; }
#about .ab-pola figcaption { left: 14px; bottom: 15px; font-size: 21px; letter-spacing: 0; text-transform: none; color: #3b1424; }
#about .ab-print::after { content: ""; position: absolute; inset: 0; border-radius: 2px; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 40%, #57524b, #34302c 70%, #2a2623); transition: opacity 3.4s cubic-bezier(0.3, 0, 0.3, 1) 0.5s; }
#about .ab-print img { transition: filter 4.6s cubic-bezier(0.3, 0, 0.3, 1) 0.8s; }
.js #about .ab-print::after { opacity: 1; }
.js #about .ab-print img { filter: saturate(0.15) contrast(0.7) brightness(1.2) sepia(0.2); }
.js #about:not(.ab-live) .ab-pola-w.in .ab-print::after, .js #about.ab-dev .ab-print::after { opacity: 0; }
.js #about:not(.ab-live) .ab-pola-w.in .ab-print img, .js #about.ab-dev .ab-print img { filter: none; }

/* the moving polaroid: an instant print pinned over the portrait's top right corner (the wall
   behind her, never her face); the clip plays only while it is on screen (01u-about.js) */
#about .ab-vid-w { position: absolute; z-index: 2; width: var(--vw); left: calc(2% + var(--mw) - var(--vw) * 0.44); top: -6%; }
#about .ab-vid { container-type: inline-size; padding: 8px 8px 38px; rotate: -4deg; box-shadow: 0 30px 54px -24px rgba(0, 0, 0, 0.85), 0 8px 18px -10px rgba(0, 0, 0, 0.55); }
#about .ab-reel { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 2px; background: #2a2623; }
#about .ab-reel video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#about .ab-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 0 22px rgba(60, 30, 10, 0.18); }
/* the caption scales with its card (100cqi = the card's content box), so it never runs under the button */
#about .ab-vid figcaption { left: 10px; right: 40px; bottom: 12px; font-size: clamp(11.5px, calc((100cqi - 31px) / 7.2), 16px); letter-spacing: 0; text-transform: none; white-space: nowrap; color: #3b1424; }
#about .ab-vid-btn { display: none; position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(59, 20, 36, 0.62); cursor: pointer; transition: color 0.3s, background 0.3s; }
.js #about .ab-vid-btn { display: block; }
#about .ab-vid-btn:hover { color: var(--hot); background: rgba(255, 46, 136, 0.08); }
#about .ab-vid-btn::before, #about .ab-vid-btn::after { content: ""; position: absolute; top: 9px; width: 3px; height: 10px; border-radius: 1px; background: currentColor; }
#about .ab-vid-btn::before { left: 10px; }
#about .ab-vid-btn::after { left: 15px; }
#about .ab-vid-btn.is-paused::before { left: 11px; top: 8px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; }
#about .ab-vid-btn.is-paused::after { display: none; }

/* ---- the words */
#about .ab-head { grid-area: hd; align-self: end; }
#about .ab-title { margin: 18px 0 0 -0.03em; font: 400 clamp(52px, 5.6vw, 92px) / 0.94 var(--display); letter-spacing: -0.005em; }
#about .ab-title em { display: block; white-space: nowrap; margin-top: 0.06em; font: italic 400 0.84em/1 var(--serif); color: var(--hot); }
#about .ab-text { grid-area: tx; align-self: start; max-width: 35rem; margin-top: clamp(22px, 3.4vh, 34px); }
#about .ab-text p { margin: 0 0 14px; font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.72; color: var(--muted); text-wrap: pretty; }
#about .ab-text .ab-lead { margin-bottom: 18px; font-size: clamp(19px, 1.42vw, 23px); line-height: 1.5; color: var(--ink); }
#about .ab-lead em { font: italic 400 1.2em/1 var(--serif); color: var(--rose); margin-right: 0.08em; }
#about .ab-text .ab-pull { position: relative; margin: 22px 0 0; padding-left: 58px; font: italic 400 clamp(23px, 1.95vw, 31px) / 1.25 var(--serif); color: var(--blush); text-wrap: balance; }
#about .ab-pull::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 42px; height: 1px; background: linear-gradient(90deg, rgba(255, 46, 136, 0.2), var(--hot)); }

/* the sign-off: her name writes itself in, then the flourish */
#about .ab-sign { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(20px, 3vh, 30px); }
#about .ab-text .ab-sig { position: relative; margin: 0; padding: 0 30px 14px 2px; font: italic 400 clamp(56px, 4.8vw, 78px) / 1 var(--serif); color: var(--hot); text-shadow: 0 0 40px rgba(255, 46, 136, 0.35); }
#about .ab-sig span { display: inline-block; padding: 0 0.12em 0.1em 0.02em; }
#about .ab-sig svg { position: absolute; left: -2%; bottom: -4px; width: 118%; height: auto; overflow: visible; fill: none; stroke: var(--hot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.js #about .ab-sig span { clip-path: inset(-20% 100% -30% -10%); transition: clip-path 1.3s cubic-bezier(0.55, 0.1, 0.3, 1) 0.7s; }
.js #about .ab-sig path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.5, 0, 0.3, 1) 1.8s; }
.js #about .ab-sign.in .ab-sig span { clip-path: inset(-20% -10% -30% -10%); }
.js #about .ab-sign.in .ab-sig path { stroke-dashoffset: 0; }
#about .ab-ig { margin-bottom: 22px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
#about .ab-ig span { color: var(--hot); letter-spacing: 0; }

/* ---- tablets (portrait) and phones: the title, the photographs, then the letter */
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  #about { display: block; min-height: 0; padding: calc(84px + 3vh) var(--pad) calc(44px + 3vh); }
  #about .ab-cap { display: none; }
  #about .ab-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "ph" "tx"; max-width: 640px; }
  #about .ab-head { align-self: start; }
  #about .ab-title { font-size: clamp(46px, 12.6vw, 84px); margin-top: 14px; }
  #about .ab-photos { --mw: min(80%, 470px); margin-top: clamp(52px, 13.5vw, 68px); }
  #about .ab-main-w { margin-left: 0; }
  #about .ab-mat { inset: 12px -12px -12px 12px; border-radius: 20px; }
  #about .ab-img { border-radius: 16px; }
  #about .ab-pola-w { width: min(41%, 230px); left: auto; right: 1.5%; bottom: -17%; }
  #about .ab-pola { padding: 7px 7px 34px; }
  #about .ab-pola .tape { width: 60px; height: 19px; margin-left: -30px; top: -9px; }
  #about .ab-pola figcaption { left: 10px; bottom: 10px; font-size: clamp(15px, 3.9vw, 20px); }
  #about .ab-vid-w { width: min(37%, 200px); left: auto; right: 0.5%; top: -7%; }
  #about .ab-vid { padding: 6px 6px 32px; }
  #about .ab-vid figcaption { left: 8px; right: 30px; bottom: 10px; font-size: clamp(11px, calc((100cqi - 29px) / 7.2), 16px); }
  #about .ab-vid-btn { right: 2px; bottom: 2px; }
  #about .ab-text { max-width: 36rem; margin-top: clamp(96px, 25vw, 140px); }
  #about .ab-text p { font-size: 16px; line-height: 1.68; }
  #about .ab-text .ab-lead { font-size: clamp(18.5px, 4.8vw, 22px); }
  #about .ab-text .ab-pull { font-size: clamp(23px, 6.2vw, 30px); padding-left: 0; padding-top: 22px; }
  #about .ab-pull::before { top: 0; }
  #about .ab-text .ab-sig { font-size: clamp(54px, 15vw, 76px); }
  #about .ab-sign { gap: 6px 30px; }
  #about .ab-ig { margin-bottom: 16px; }
  #about .ab-glow { left: -20%; top: 22%; width: 110vw; height: 110vw; }
}
@media (prefers-reduced-motion: reduce) {
  #about .ab-glow { animation: none; }
  .js #about .ab-print::after { opacity: 0; transition: none; }
  .js #about .ab-print img { filter: none; transition: none; }
  .js #about .ab-sig span { clip-path: none; transition: none; }
  .js #about .ab-sig path { stroke-dashoffset: 0; transition: none; }
}