/* Keep the portfolio hidden until the invitation link is accepted. */
html:not([data-access="granted"]) body > :not(.access-message):not(.portfolio-loader) { display: none !important; }
html[data-access="granted"] .access-message { display: none; }
.access-message { max-width: 38rem; margin: 15vh auto; padding: 2rem; }
.access-message h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.access-message p { max-width: 32rem; line-height: 1.6; }

/* Cover initialization while keeping the real page measurable underneath. */
html[data-loading="true"] body > :not(.portfolio-loader) { visibility: hidden; }
.portfolio-loader {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 32px 24px; overflow: auto;
  background: var(--bg, #f6f4f0); color: var(--ink, #111110);
}
.portfolio-loader[hidden] { display: none; }
.portfolio-loader__card {
  display: block; width: min(240px, 56vw, calc(58svh * .716)); height: auto;
  aspect-ratio: 1061 / 1482; border-radius: 5%;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35);
  animation: loader-float 3.2s ease-in-out infinite alternate;
}
.portfolio-loader p { margin: 0; font-size: 15px; line-height: 1.5; text-align: center; }
@keyframes loader-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .portfolio-loader__card { animation: none; } }

.portfolio-loader__spinner {
  width: 24px; height: 24px; flex: none;
  border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: loader-spin .85s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .portfolio-loader__spinner { animation: none; }
}