/* Production additions: scoped to transient loading states and document pages. */
#portfolio-loading { display: none; }
html.portfolio-preparing body { visibility: visible; opacity: 1; }
html.portfolio-preparing body > :not(#portfolio-loading) { visibility: hidden; }
html.portfolio-preparing #portfolio-loading {
  display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center;
  justify-content: center; flex-direction: column; gap: 16px; padding: 28px;
  box-sizing: border-box; background: #fff; color: #171717;
  font: 500 14px/1.55 early-sans-variable, Arial, sans-serif;
  visibility: visible; pointer-events: auto; text-align: center;
}
#portfolio-loading p { max-width: 36em; margin: 0; }
#portfolio-loading a { color: inherit; text-underline-offset: .2em; }
#portfolio-loading [hidden] { display: none; }
#portfolio-privacy { margin: 21px 0 0; font-size: 12px; line-height: 1.55; }
#portfolio-privacy a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* Keep each image indicator inside its own slide, including offscreen slides. */
.project-inline-slide.production-media-loading,
.project-inline-slide.production-media-error { position: relative; }
.production-media-loading::after, .production-media-error::after {
  content: attr(data-media-message); position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  box-sizing: border-box; pointer-events: none; background: rgba(255,255,255,.9);
  color: #343434; font: 500 12px/1.5 early-sans-variable, Arial, sans-serif;
}
.production-document { margin: 0; background: #fff; color: #171717; font: 400 16px/1.55 early-sans-variable, Arial, sans-serif; }
.production-document * { box-sizing: border-box; }
.production-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
.production-header a { color: inherit; text-decoration: none; }
.production-header .production-identity { font-weight: 700; }
.production-header nav { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.production-copy { max-width: 850px; padding: 70px 28px 90px; margin: 0 auto; }
.production-copy h1 { margin: 0 0 30px; font-size: clamp(34px, 4vw, 56px); line-height: 1.15; font-weight: 500; letter-spacing: -.025em; }
.production-copy h2 { margin: 36px 0 14px; font-size: 22px; line-height: 1.3; font-weight: 500; }
.production-copy p { margin: 0 0 18px; overflow-wrap: anywhere; hyphens: auto; }
.production-copy a { color: inherit; text-underline-offset: .2em; }
.production-updated, .production-kicker { color: #737373; font-size: 12px; }
.production-error { min-height: calc(100svh - 78px); display: flex; flex-direction: column; justify-content: center; }
.production-actions { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 20px; }
@media (max-width: 600px) {
  .production-header { padding: max(18px, env(safe-area-inset-top, 0px)) 28px 18px; gap: 15px; }
  .production-header .production-identity { max-width: 105px; font-size: 13px; line-height: 1.2; }
  .production-header nav { gap: 14px; font-size: 12px; }
  .production-copy { padding-top: 50px; font-size: 14px; }
  .production-copy h2 { font-size: 20px; }
}