/* Transparent physical work shares the page's light and glass.
   All photographs, original links and editable specifications stay in the HTML. */

/* Collection rhythm and the light behind each object. */
.projects-page .personal-project-grid {
  gap: clamp(64px, 7vw, 104px) clamp(28px, 4.5vw, 68px);
  align-items: start;
}

.projects-page .project-cutout {
  --object-light: 179, 145, 107;
  --object-light-x: 50%;
  --object-light-y: 38%;
  --object-height: clamp(350px, 38vw, 500px);
  position: relative;
  isolation: isolate;
  gap: 0;
  min-width: 0;
}

.projects-page .project-cutout::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30px -1% 12%;
  background: radial-gradient(
    ellipse 68% 55% at var(--object-light-x) var(--object-light-y),
    rgba(var(--object-light), .13) 0%,
    rgba(var(--object-light), .075) 28%,
    rgba(var(--object-light), .025) 57%,
    rgba(var(--object-light), 0) 80%
  );
  opacity: .72;
  pointer-events: none;
  transition: opacity 450ms ease;
}

.projects-page .project-cutout:is(:hover, :focus-within)::before { opacity: 1; }
.projects-page .project-sheablo { --object-light: 189, 118, 74; }
.projects-page .project-ultralisk { --object-light: 133, 164, 159; }
.projects-page .project-adjutant { --object-light: 197, 154, 84; }
.projects-page .project-plaque { --object-light: 154, 115, 77; }
.projects-page .project-kintsugi { --object-light: 197, 174, 104; }
.projects-page .project-controller { --object-light: 184, 151, 108; }
.projects-page .project-server {
  --object-light: 112, 170, 195;
  --object-light-y: 26%;
}

.projects-page .project-cutout .personal-gallery {
  position: relative;
  z-index: 2;
}

.projects-page .project-cutout .personal-gallery:not(.adjutant-gallery):not([data-cms-layout="strip"]) {
  height: var(--object-height);
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
  gap: 0;
  padding: 0 clamp(8px, 1.5vw, 18px) 18px;
  overflow: visible;
}

.projects-page .project-cutout .personal-gallery:not(.adjutant-gallery):not([data-cms-layout="strip"]) > .image-expand {
  height: 100%;
  min-height: 0;
  overflow: visible;
  filter: drop-shadow(0 18px 19px rgba(0, 0, 0, .32));
}

.projects-page .project-cutout .personal-gallery:not(.adjutant-gallery):not([data-cms-layout="strip"]) > .image-expand > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.projects-page .project-adjutant .adjutant-stage {
  isolation: isolate;
  filter: drop-shadow(0 17px 21px rgba(0, 0, 0, .3));
}

/* Glass continues behind the cutout, then dissolves into the page.
   Only this decorative layer fades. Specifications remain fully opaque. */
.projects-page .project-cutout > .personal-details {
  position: relative;
  z-index: 1;
  height: auto;
  margin-top: -36px;
  padding: 68px 30px 24px;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.projects-page .project-cutout > .personal-details::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(213, 230, 221, .13);
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(var(--object-light), .085), transparent 58%),
    linear-gradient(180deg, rgba(30, 48, 52, .65), rgba(16, 32, 38, .16));
  box-shadow: inset 0 1px 0 rgba(235, 240, 228, .075);
  -webkit-mask-image: linear-gradient(#000 38%, rgba(0, 0, 0, .86) 70%, transparent);
  mask-image: linear-gradient(#000 38%, rgba(0, 0, 0, .86) 70%, transparent);
  pointer-events: none;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .projects-page .project-cutout > .personal-details::before {
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    backdrop-filter: blur(12px) saturate(110%);
  }
}

.projects-page .project-cutout > .personal-details > .eyebrow {
  margin-bottom: 14px;
  color: #d7bea0;
}

.projects-page .project-cutout > .personal-details h3 {
  margin-bottom: 28px;
  font-size: clamp(1.75rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  text-wrap: balance;
}

.projects-page .project-cutout .personal-specs {
  gap: 18px 26px;
}

.projects-page .project-cutout .personal-specs dt { color: #a6bbb3; }
.projects-page .project-cutout .personal-specs dd { color: #d2dbd3; }

/* Hardware sits on the same glass. Its complete silhouettes stay visible. */
.projects-page .project-cutout:is(.project-controller, .project-server) .personal-gallery:not([data-cms-layout="strip"]) {
  height: auto;
  aspect-ratio: 1.28;
}

.projects-page .project-server .personal-gallery:not([data-cms-layout="strip"]) > .image-expand {
  width: 88%;
  justify-self: center;
}

.projects-page .project-server .personal-video { margin-top: 20px; }

/* Original photographs remain editable, and appear in the expanded viewer. */
.projects-page .project-cutout .personal-gallery :is(.project-original-source, .project-alternate-source)[hidden] {
  display: none;
}

/* The close view and complete Deathclaw occupy different depths. */
.projects-page .project-deathclaw .deathclaw-gallery:not([data-cms-layout="strip"]) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.projects-page .project-deathclaw .deathclaw-gallery:not([data-cms-layout="strip"]) > .image-expand:first-child {
  grid-column: 1 / 10;
  grid-row: 1;
  z-index: 1;
}

.projects-page .project-deathclaw .deathclaw-gallery:not([data-cms-layout="strip"]) > .image-expand:first-child > img {
  -webkit-mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .94) 80%, transparent);
  mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .94) 80%, transparent);
}

.projects-page .project-deathclaw .deathclaw-gallery:not([data-cms-layout="strip"]) > .image-expand:nth-child(2) {
  grid-column: 8 / -1;
  grid-row: 1;
  z-index: 2;
  height: 59%;
  align-self: end;
}

/* Materials retain room around their silhouettes. */
.projects-page .project-plaque .personal-gallery:not([data-cms-layout="strip"]) > .image-expand,
.projects-page .project-kintsugi .personal-gallery:not([data-cms-layout="strip"]) > .image-expand {
  width: 82%;
  justify-self: center;
}

/* Feature compositions keep both images and text in normal, editable flow. */
@media (min-width: 1001px) {
  .projects-page .project-deathclaw,
  .projects-page .project-adjutant {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .projects-page .project-deathclaw {
    --object-height: clamp(500px, 48vw, 640px);
    --object-light-x: 32%;
  }

  .projects-page .project-deathclaw > .personal-gallery {
    grid-column: 1 / 9;
    grid-row: 1;
  }

  .projects-page .project-deathclaw > .personal-details {
    grid-column: 8 / -1;
    grid-row: 1;
    margin: 60px 0 0;
    padding: 42px 30px 38px 96px;
  }

  .projects-page .project-deathclaw > .personal-details::before { left: -90px; }

  .projects-page .project-adjutant {
    --object-light-x: 71%;
    --object-light-y: 31%;
  }

  .projects-page .project-adjutant > .personal-gallery {
    grid-column: 6 / -1;
    grid-row: 1;
  }

  .projects-page .project-adjutant > .personal-details {
    grid-column: 1 / 7;
    grid-row: 1;
    margin: 0;
    padding: 42px 64px 38px 32px;
  }

  .projects-page .project-adjutant > .personal-details::before { right: -120px; }

  .projects-page :is(.project-deathclaw, .project-adjutant) > .personal-details h3 {
    font-size: clamp(2.8rem, 4.6vw, 4.6rem);
    letter-spacing: -.045em;
    margin-bottom: 34px;
  }

  .projects-page .project-adjutant .adjutant-stage { width: min(100%, 440px); }
}

/* The supplied header cutout emerges from the same warm light. */
.projects-page .projects-feature {
  right: 0;
}

.projects-page .projects-feature::before {
  content: '';
  position: absolute;
  inset: -25px -3% -15px -7%;
  background: radial-gradient(ellipse at 47% 41%, rgba(166, 119, 68, .12), transparent 66%);
  pointer-events: none;
}

.projects-page .projects-feature-model {
  opacity: 1;
  padding-inline: clamp(12px, 3vw, 44px);
  padding-bottom: 18px;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .32));
  -webkit-mask-image: none;
  mask-image: none;
}

/* The homepage preview uses its alpha instead of filling a photographic frame. */
.personal-preview-cutout { --preview-light: 166, 126, 85; }
.personal-preview-controller { --preview-light: 184, 151, 108; }
.personal-preview-server { --preview-light: 112, 170, 195; }

.personal-preview-cutout .personal-preview-image {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 0 10px 18px;
  background: none;
}

.personal-preview-cutout .personal-preview-image::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5% -2% -8%;
  background: radial-gradient(ellipse at 50% 52%, rgba(var(--preview-light), .13), transparent 70%);
  pointer-events: none;
}

.personal-preview-cutout .personal-preview-image::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 0 -4px;
  height: 27%;
  border-top: 1px solid rgba(207, 221, 209, .16);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(rgba(32, 48, 50, .46), transparent);
  pointer-events: none;
}

.personal-preview-cutout .personal-preview-image img {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .3));
  -webkit-mask-image: none;
  mask-image: none;
}

.personal-preview-controller .personal-preview-image img,
.personal-preview-server .personal-preview-image img {
  padding: 12px 10px 10px;
  -webkit-mask-image: none;
  mask-image: none;
}

.personal-preview-server .personal-preview-image img {
  width: 90%;
  margin-inline: auto;
}

/* The object stays in contact with its shadow while the surrounding light responds. */
.projects-page .project-cutout .personal-gallery > .image-expand,
.personal-preview-cutout:is(:hover, :focus-visible) .personal-preview-image img {
  transform: none;
}

/* Ground contours and contact patches share the photograph's coordinates.
   The SVG includes its own blur margins and never intercepts clicks. */
.object-shadow {
  position: absolute;
  z-index: 0;
  display: block;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.has-object-shadow { isolation: isolate; }
.has-object-shadow > .object-shadow { opacity: 1; }

/* The Adjutant link otherwise inherits overflow:hidden from cinematic.css.
   Let the contact shadow extend below the base, including in edited galleries. */
.projects-page .project-cutout .personal-gallery .image-expand {
  overflow: visible;
}

.projects-page .project-cutout .personal-gallery:not(.adjutant-gallery):not([data-cms-layout="strip"]) > .image-expand.has-object-shadow,
.projects-page .project-cutout .personal-gallery > .has-object-shadow,
.projects-page .project-cutout .adjutant-stage > .has-object-shadow,
.projects-page .project-adjutant .adjutant-stage.has-ground-shadow {
  filter: none;
}

.projects-page .project-cutout .personal-gallery .has-object-shadow > img,
.personal-preview-cutout .has-object-shadow > img {
  position: relative;
  z-index: 1;
  filter: none;
}

.projects-page .projects-feature.has-object-shadow > .projects-feature-model {
  z-index: 1;
  filter: none;
}

.projects-feature > .object-shadow {
  transform: translate3d(var(--model-x, 0px), var(--model-y, 0px), 0);
}

.object-shadow[data-shadow-mode="portrait"] {
  -webkit-mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .94) 80%, transparent);
  mask-image: linear-gradient(#000 68%, rgba(0, 0, 0, .94) 80%, transparent);
}

/* Leave room for soft edges when the control panel switches a gallery to a strip. */
.projects-page .project-cutout .personal-gallery[data-cms-layout="strip"]:not(.adjutant-gallery) {
  padding: 20px clamp(32px, 7vw, 90px) 38px;
  scroll-padding-inline: clamp(32px, 7vw, 90px);
}

@media (min-width: 701px) and (max-width: 1000px) {
  .projects-page .personal-project-grid { column-gap: 30px; }
  .projects-page .project-cutout { --object-height: 380px; }
  .projects-page .project-cutout > .personal-details { padding-inline: 22px; }
  .projects-page .project-adjutant .adjutant-stage { width: min(100%, 300px); }
}

@media (max-width: 700px) {
  .projects-page .personal-project-grid { gap: 66px; }
  .projects-page .project-cutout { --object-height: clamp(310px, 104vw, 480px); }
  .projects-page .project-cutout::before { inset-inline: 0; }
  .projects-page .project-cutout > .personal-details {
    margin-top: -28px;
    padding: 56px 22px 20px;
  }
  .projects-page .project-cutout > .personal-details h3 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .projects-page .project-cutout .personal-specs { gap: 18px 20px; }
  .projects-page .project-cutout .personal-specs dd { font-size: .85rem; }
  .projects-page .project-deathclaw .deathclaw-gallery:not([data-cms-layout="strip"]) > .image-expand:nth-child(2) { height: 57%; }
  .projects-page .project-plaque .personal-gallery:not([data-cms-layout="strip"]) > .image-expand,
  .projects-page .project-kintsugi .personal-gallery:not([data-cms-layout="strip"]) > .image-expand { width: 88%; }
  .projects-page .project-adjutant > .personal-details { margin-top: 20px; padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .projects-page .project-cutout::before,
  .projects-page .project-cutout .personal-gallery > .image-expand,
  .personal-preview-cutout .personal-preview-image img { transition: none; }
}


/* Registered Adjutant photographs: plates reveal independently, with no camera shift. */
.projects-page .project-adjutant .personal-gallery.adjutant-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(44px, auto) minmax(2.2em, auto);
  row-gap: 24px;
  align-items: start;
  height: auto;
  overflow: visible;
}

.adjutant-stage {
  position: relative;
  grid-row: 1;
  width: min(100%, 360px);
  margin-inline: auto;
}

/* Keep the coordinate system intact after the control panel saves a gallery. */
.projects-page .personal-gallery.adjutant-gallery .adjutant-stage > .image-expand {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}

.projects-page .personal-gallery.adjutant-gallery .adjutant-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.projects-page .personal-gallery.adjutant-gallery .adjutant-exposed-source[hidden] {
  display: none;
}

.adjutant-comparison {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.adjutant-stage.is-ready .adjutant-comparison { opacity: 1; }
.adjutant-stage.is-ready > .image-expand > img { opacity: 0; }
.adjutant-stage > .image-expand::after { z-index: 2; }
.adjutant-plate-cut { transition: opacity 200ms ease; }
.adjutant-stage.has-plate-hover .image-expand { cursor: crosshair; }

.adjutant-controls {
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0;
}

.adjutant-controls button {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(221, 198, 165, .24);
  border-radius: 3px;
  background: rgba(17, 31, 35, .66);
  color: #cbd6d0;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .025em;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.adjutant-controls button:hover,
.adjutant-controls button[aria-pressed="true"] {
  color: #f4e1c5;
  border-color: rgba(221, 198, 165, .64);
  background: rgba(116, 91, 53, .22);
}

.adjutant-controls button:focus-visible {
  outline: 2px solid #ddc6a5;
  outline-offset: 4px;
}

.adjutant-hint {
  grid-row: 3;
  margin: 0;
  padding-inline: 10px;
  color: #9bb0a9;
  font-size: .68rem;
  line-height: 1.6;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .adjutant-plate-cut,
  .adjutant-controls button { transition: none; }
}