/* Material entrances and the shared photographic viewer. */
#projects .material-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;
}
#projects .material-card {
  position:relative;
  display:block;
  min-width:0;
  aspect-ratio:4/5;
  overflow:hidden;
  isolation:isolate;
  background:var(--stone);
  color:var(--white);
}
#projects .material-card::after {
  content:'';
  position:absolute;
  inset:35% 0 0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(17,21,18,.12) 35%,rgba(17,21,18,.77));
}
#projects .material-card>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
  transition:transform .4s ease;
}
#projects .material-card-label {
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:22px 18px;
  font-family:'Raleway',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
}
#projects .material-card .project-expand {
  position:static;
  width:auto;
  height:auto;
  flex-shrink:0;
  background:transparent;
  color:#e8d4a9;
  font-size:20px;
  line-height:1;
  transition:transform .2s ease;
}
#projects .material-card:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px;
}
@media(hover:hover) {
  #projects .material-card:hover>img {transform:scale(1.035)}
  #projects .material-card:hover .project-expand {transform:translate(2px,-2px)}
}

.project-lightbox.portfolio-viewer {
  width:min(1280px,calc(100vw - 48px));
  height:90dvh;
  max-width:none;
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:22px 26px 18px;
  overflow:hidden;
  border:1px solid #ffffff16;
  background:#171b18;
  color:#faf9f7;
  color-scheme:dark;
  box-shadow:0 24px 100px #0008;
}
.portfolio-viewer::backdrop {
  background:#0d100ef0;
  backdrop-filter:blur(5px);
}
.portfolio-viewer-shell {
  display:flex;
  flex-direction:column;
  gap:16px;
  height:100%;
  min-height:0;
}
.portfolio-viewer-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 auto;
  gap:20px;
}
.portfolio-viewer-header .eyebrow {
  margin-bottom:4px;
  color:#c9b383;
  font-size:9px;
}
.portfolio-viewer-header h2 {
  font-size:24px;
  font-weight:500;
  letter-spacing:.025em;
}
.portfolio-viewer .lightbox-close,
.portfolio-viewer .portfolio-arrow {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  min-width:44px;
  min-height:44px;
  padding:12px;
  border:1px solid #ffffff30;
  background:#171b18df;
  color:#faf9f7;
  transition:color .2s,border-color .2s,background .2s;
}
.portfolio-viewer .lightbox-close {
  position:static;
  flex-shrink:0;
  border-color:transparent;
}
.portfolio-viewer .lightbox-close svg {width:20px;height:20px}
.portfolio-viewer .portfolio-arrow svg {width:24px;height:24px}
.portfolio-viewer .lightbox-close:focus-visible,
.portfolio-viewer .portfolio-arrow:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.portfolio-viewer .lightbox-close:hover,
.portfolio-viewer .portfolio-arrow:hover {
  border-color:#c9b383;
  background:#262c26;
  color:#e8d4a9;
}
.portfolio-viewer .portfolio-viewer-figure {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:14px;
}
.portfolio-viewer-stage {
  position:relative;
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:hidden;
  background:#111512;
  touch-action:pan-y pinch-zoom;
}
.portfolio-viewer .portfolio-viewer-stage>img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:0;
  object-fit:contain;
  transition:opacity .15s ease;
}
.portfolio-viewer.is-loading .portfolio-viewer-stage>img {opacity:.55}
.portfolio-viewer .portfolio-arrow {
  position:absolute;
  top:50%;
  z-index:1;
  transform:translateY(-50%);
}
.portfolio-viewer .portfolio-previous {left:14px}
.portfolio-viewer .portfolio-next {right:14px}
.portfolio-viewer #lightbox-caption {
  flex:0 0 auto;
  padding:0;
  max-height:4.5em;
  overflow:auto;
  font-size:13px;
  line-height:1.5;
  text-align:left;
  color:#d8d9d2;
}
.portfolio-viewer-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex:0 0 auto;
  gap:18px;
  font-size:11px;
  line-height:1.5;
  color:#a8afa6;
}
.portfolio-viewer #lightbox-counter {
  font-variant-numeric:tabular-nums;
  color:#e8d4a9;
  letter-spacing:.1em;
}
.portfolio-viewer.is-opening .portfolio-viewer-shell {
  animation:portfolio-appear .18s ease-out;
}
@keyframes portfolio-appear {
  from {opacity:0;transform:translateY(4px)}
  to {opacity:1;transform:translateY(0)}
}

@media(min-width:640px) and (max-width:1199px) {
  #projects .material-grid {
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:clamp(185px,23vw,255px);
  }
  #projects .material-card {grid-column:span 2;aspect-ratio:auto}
  #projects .material-card:nth-last-child(-n+2) {grid-column:span 3}
}
@media(max-width:639px) {
  #projects .material-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #projects .material-card:last-child {grid-column:1/-1;aspect-ratio:16/7}
  #projects .material-card-label {padding:17px 14px;font-size:12px;letter-spacing:.07em}
  .project-lightbox.portfolio-viewer {
    width:calc(100vw - 20px);
    height:calc(100dvh - 24px);
    max-height:calc(100dvh - 24px);
    padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));
  }
  .portfolio-viewer-shell {gap:12px}
  .portfolio-viewer-header h2 {font-size:21px}
  .portfolio-viewer-header .eyebrow {font-size:8px}
  .portfolio-viewer .lightbox-close,
  .portfolio-viewer .portfolio-arrow {width:44px;height:44px;padding:10px}
  .portfolio-viewer .portfolio-previous {left:8px}
  .portfolio-viewer .portfolio-next {right:8px}
  .portfolio-viewer .portfolio-viewer-figure {gap:12px}
  .portfolio-viewer #lightbox-caption {font-size:12px;max-height:6em}
  .portfolio-viewer-footer {font-size:10px;gap:12px}
}
@media(prefers-reduced-motion:reduce) {
  #projects .material-card>img,
  #projects .material-card .project-expand,
  .portfolio-viewer .lightbox-close,
  .portfolio-viewer .portfolio-arrow,
  .portfolio-viewer .portfolio-viewer-stage>img {transition:none}
  .portfolio-viewer.is-opening .portfolio-viewer-shell {animation:none}
}