.hero-personal-cursor { display: none; }
.personal-popup { border: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: var(--color-text); color: var(--color-background); font-family: "Satoshi", sans-serif; }
.personal-popup::backdrop { background: transparent; }
.personal-popup[open] { display: flex; flex-direction: column; gap: 2.5vw; padding: 2.65625vw; box-sizing: border-box; overflow: auto; }
.personal-popup__header { display: flex; align-items: center; justify-content: space-between; padding-right: 1.2vw; flex-shrink: 0; }
.personal-popup__title { display: flex; align-items: center; gap: .7vw; margin: 0; font-size: 2.34375vw; font-weight: 700; line-height: 1; }
.personal-popup__heart { width: 1.875vw; height: 1.77083vw; }
.personal-popup__close {
  display: inline-flex;
  align-items: center;
  padding: 0 0 .4375rem;
  border: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--color-background), var(--color-background)), linear-gradient(var(--color-accent), var(--color-accent));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 5px, 100% 5px;
  color: var(--color-background);
  font: 500 clamp(1.75rem, 2.12vw, 3rem)/1.19 "Satoshi", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-size var(--duration-reveal) var(--ease-out);
}
.personal-popup__close:hover,
.personal-popup__close:focus-visible { background-size: 100% 5px, 100% 5px; }
.personal-popup.is-closing .personal-popup__body { pointer-events: none; }
.personal-popup__body { display: grid; grid-template-columns: 14.21875vw minmax(0, 1fr); align-items: end; gap: 4.6354vw; flex: 1 0 auto; }
.personal-popup__media { position: relative; width: 100%; aspect-ratio: 273 / 320; margin: 0 0 1.25vw; overflow: hidden; }
.personal-popup__image-layer { position: absolute; inset: 0; background: #d3d8ed; }
.personal-popup__image-layer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.personal-popup__image-layer.is-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: #535768; text-align: center; font-size: 1.3vw; }
.personal-popup__image-layer small { font-size: .85vw; }
.personal-popup__items { display: flex; flex-direction: column; gap: .46875vw; min-width: 0; }
.personal-popup__row { position: relative; min-width: 0; }
.personal-popup__item { position: relative; display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--color-muted); font: 900 7.505vw/1.1 "Satoshi", sans-serif; text-align: left; cursor: pointer; transition: color 350ms; }
.personal-popup__label { display: block; white-space: nowrap; transition: transform 550ms cubic-bezier(.22,1,.36,1); }
.personal-popup__indicator { position: absolute; left: .04em; top: 50%; width: .274em; height: .562em; opacity: 0; transform: translate(-.15em,-50%); transition: opacity 350ms, transform 550ms cubic-bezier(.22,1,.36,1); }
.personal-popup__row.is-active .personal-popup__item { color: var(--color-background); }
.personal-popup__row.is-active .personal-popup__label { transform: translateX(.52em); }
.personal-popup__row.is-active .personal-popup__indicator { opacity: 1; transform: translate(0,-50%); }
.personal-popup__item:hover { color: #535768; }
.personal-popup__details { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 17vw; margin: 0; padding: 0; list-style: none; text-align: right; color: #535768; font-size: 1.1vw; font-weight: 500; line-height: 1.4; }
.personal-popup__details[hidden] { display: none; }
.personal-popup__item:focus-visible, .personal-popup__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .personal-popup__close, .personal-popup__item, .personal-popup__label, .personal-popup__indicator { transition: none; } }
html.has-personal-popup, html.has-personal-popup body { overflow: hidden; }
.hero-personal-trigger { position: fixed; top: 7rem; left: 2rem; z-index: 100; transform: translateY(-200vh); }
.hero-personal-trigger:focus-visible { transform: none; padding: 1rem 1.5rem; border: 2px solid #1e83f4; border-radius: 2rem; background: #293c52; color: #e5e5f1; font: inherit; }
@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  .hero:has(.hero-personal-trigger:not([hidden])) { cursor: pointer; }
  .hero-personal-cursor { display: block; position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; white-space: nowrap; padding: .85rem 1.5rem; border-radius: 999px; background: #293c52; color: #e5e5f1; font: 500 clamp(.875rem, .9vw, 1.5rem)/1.3 "Satoshi", sans-serif; opacity: 0; transition: opacity 120ms; will-change: transform; }
  .hero-personal-cursor.is-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-personal-cursor { transition: none; } }
/* Initial dialog focus belongs to its heading; Tab still highlights Close. */
.personal-popup__title:focus { outline: none; }