* {
  box-sizing: border-box;
}

.flash-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  pointer-events: none;
  animation: camera-flash 0.7s ease-out forwards;
}

@keyframes camera-flash {
  0% { opacity: 1; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flash-overlay {
    display: none;
  }
}

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The lightbox itself is the scroll container — .lightbox-scroll centers its
   content using min-height (not height), which is what lets a photo taller
   than the viewport still scroll into view instead of being stuck centered
   with its top half inaccessible (a classic flexbox-centering trap). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0a0a0a;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lightbox.open {
  display: block;
  animation: lightbox-in 0.25s ease-out both;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-scroll {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 20px 40px;
  box-sizing: border-box;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-caption {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #8a8579;
  text-align: center;
}

.lightbox-close {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #f5f3f0;
  background: #1e1e1e;
  border: 1px solid #3d3d3d;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox-close:hover {
  background: #2a2a2a;
  border-color: #555555;
}

body.lightbox-open {
  overflow: hidden;
}

.card,
.about-wrap {
  animation: fade-slide-up 0.6s ease-out both;
}

.back-btn {
  animation: fade-slide-up 0.5s ease-out both;
  animation-delay: 0.06s;
}

.header h1,
.about-header h1 {
  animation: fade-slide-up 0.55s ease-out both;
  animation-delay: 0.12s;
}

.tagline,
.about-tagline {
  animation: fade-slide-up 0.55s ease-out both;
  animation-delay: 0.18s;
}

.photos,
.about-intro {
  animation: fade-slide-up 0.55s ease-out both;
  animation-delay: 0.26s;
}

.about-gallery {
  animation: fade-slide-up 0.55s ease-out both;
  animation-delay: 0.34s;
}

.links .btn {
  animation: fade-slide-up 0.5s ease-out both;
}

.links .btn:nth-child(1) { animation-delay: 0.34s; }
.links .btn:nth-child(2) { animation-delay: 0.4s; }
.links .btn:nth-child(3) { animation-delay: 0.46s; }

/* .btn-primary already has its own infinite marquee-glow pulse (defined below);
   combine it with the entrance animation here so one doesn't clobber the other. */
.links .btn.btn-primary {
  animation: fade-slide-up 0.5s ease-out 0.34s both, marquee-glow 3s ease-in-out 0.34s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .about-wrap,
  .back-btn,
  .header h1,
  .about-header h1,
  .tagline,
  .about-tagline,
  .photos,
  .about-intro,
  .about-gallery,
  .links .btn {
    animation: none;
  }

  .links .btn.btn-primary {
    animation: marquee-glow 3s ease-in-out infinite;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: #0d0d0d;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #f5f3f0;
}

.card {
  width: 100%;
  max-width: 420px;
  background: #161616;
  border: 1px solid #262626;
  border-radius: 20px;
  padding: 30px 28px 32px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}

.header {
  text-align: center;
  margin-bottom: 26px;
}

.header h1 {
  margin: 0 0 10px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.tagline {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8579;
}

/* Small rotating quotes tucked under the tagline. Fixed height so swapping
   between quotes of different lengths never shifts the layout below. */
.testimonials {
  position: relative;
  height: 52px;
  margin: -8px 0 24px;
}

.quote {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.quote.is-active {
  opacity: 1;
}

.quote p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #d8d3c8;
}

.quote cite {
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7768;
}

.photos {
  overflow: hidden;
  margin-bottom: 30px;
  cursor: grab;
  touch-action: pan-y;
}

.photos.dragging {
  cursor: grabbing;
}

.photo-track {
  display: flex;
  gap: 10px;
  will-change: transform;
}

.photo-track.settling {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bio {
  margin-bottom: 30px;
}

.bio p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c9c5bc;
}

.photo {
  flex: 0 0 calc((100% - 20px) / 3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #262626;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo img,
.about-photo img,
.avatar img,
.lightbox-img {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-text.copied .btn-text-label {
  color: #7fd1a3;
}

.btn {
  display: block;
  text-align: center;
  padding: 16px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  background: transparent;
  color: #f5f3f0;
  border: 1px solid #333333;
  transition: transform 0.08s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
  border-color: #4a4a4a;
  background: #1e1e1e;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: #b3202f;
  border-color: #b3202f;
  color: #ffffff;
  animation: marquee-glow 3s ease-in-out infinite;
}

.btn-primary:hover {
  background: #c8283a;
  border-color: #c8283a;
}

@keyframes marquee-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 209, 102, 0.15), 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 30px rgba(255, 209, 102, 0.4), 0 0 60px rgba(179, 32, 47, 0.25); }
}

.sparkle-wrap {
  position: relative;
  overflow: hidden;
}

.btn-label {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: 0.015em;
  background-image: linear-gradient(100deg, #f0b90b 30%, #fff8dc 48%, #f0b90b 66%);
  background-size: 220% auto;
  background-position: 200% center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Stroke is painted under the gold fill so the outline reads as a thin
     white edge instead of eating into the letterforms. */
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.9);
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: gold-shine 4.5s ease-in-out infinite;
}

@keyframes gold-shine {
  0% { background-position: 200% center; }
  40% { background-position: -20% center; }
  100% { background-position: -20% center; }
}

.sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: #ffd166;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 209, 102, 0.95)) drop-shadow(0 0 7px rgba(255, 209, 102, 0.55));
}

.sparkle.silver {
  fill: #f2f2f2;
  filter: drop-shadow(0 0 3px rgba(242, 242, 242, 0.95)) drop-shadow(0 0 7px rgba(242, 242, 242, 0.5));
}

.sp-twinkle {
  animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

.sw1 { top: 12%; left: 29%; width: 9px; height: 9px; animation-delay: 0.3s; }
.sw2 { top: 80%; left: 34%; width: 8px; height: 8px; animation-delay: 1.2s; }
.sw3 { top: 18%; left: 67%; width: 10px; height: 10px; animation-delay: 2s; }
.sw4 { top: 78%; left: 62%; width: 8px; height: 8px; animation-delay: 0.8s; }
.sw5 { top: 48%; left: 21%; width: 8px; height: 8px; animation-delay: 1.6s; }
.sw6 { top: 46%; left: 79%; width: 9px; height: 9px; animation-delay: 2.4s; }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

.footer {
  text-align: center;
  margin-top: 28px;
}

.footer p {
  margin: 0;
  font-size: 0.75rem;
  color: #5c584f;
}

/* --- About page: editorial layout, distinct from the card/link-hub home page --- */

body.about-page {
  display: block;
  padding: 0;
}

.about-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.back-btn {
  display: inline-block;
  width: auto;
  margin-bottom: 48px;
  padding: 14px 24px;
}

.about-header {
  margin-bottom: 48px;
}

.about-header h1 {
  margin: 0 0 12px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.about-tagline {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8579;
}

.about-intro {
  margin-bottom: 56px;
}

/* Float rather than flex so the bio copy wraps around the portrait. */
.avatar {
  float: left;
  width: 132px;
  height: 132px;
  margin: 4px 24px 12px 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #262626;
  shape-outside: circle(50%);
}

.about-intro::after {
  content: "";
  display: block;
  clear: both;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.about-bio-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #c9c5bc;
}

.about-gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  margin-bottom: 56px;
  align-items: start;
}

.about-photo {
  margin: 0;
}

/* No forced aspect-ratio or object-fit:cover here on purpose — these are
   portrait photos, and cropping them to a landscape box chopped off the
   subject. Each image renders at its own natural proportions instead. */
.about-photo-frame {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #262626;
}

.about-caption {
  margin-top: 9px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8a8579;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.about-footer p {
  margin: 0;
  font-size: 0.75rem;
  color: #5c584f;
}

/* Stack the gallery and let each photo run full width rather than holding a
   two-column grid on narrow screens. */
@media (max-width: 700px) {
  .about-gallery {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
}

@media (max-width: 480px) {
  .avatar {
    width: 104px;
    height: 104px;
    margin: 2px 18px 8px 0;
  }

  .about-bio-text {
    font-size: 1rem;
  }
}