.photo-portfolio { background: #fcfaf6; scroll-margin-top: 76px; }
.photo-portfolio .section-intro { max-width: 790px; margin: 0 auto 2.5rem; text-align: center; }
.photo-portfolio .eyebrow { justify-content: center; }
.photo-portfolio .section-intro > p:last-child { max-width: 660px; margin-inline: auto; }
.portfolio-portraits, .portfolio-details { display: grid; gap: 1.5rem; }
.portfolio-portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portfolio-card { min-width: 0; margin: 0; }
.portfolio-card > a { position: relative; display: block; overflow: hidden; background: #ede6da; border-radius: 8px; }
.portfolio-card img { width: 100%; aspect-ratio: 640 / 427; height: auto; object-fit: cover; transition: transform 240ms ease; }
.portfolio-card a:hover img { transform: scale(1.025); }
.portfolio-card a:focus-visible, .portfolio-lightbox button:focus-visible { outline: 3px solid #b27c15; outline-offset: 5px; }
.portfolio-view { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 2rem 1rem .65rem; color: white; font-size: .7rem; letter-spacing: .06em; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity 180ms ease; }
.portfolio-card a:hover .portfolio-view, .portfolio-card a:focus-visible .portfolio-view { opacity: 1; }
.portfolio-card figcaption { padding: 1rem .3rem .2rem; text-align: center; }
.portfolio-card figcaption > span, .portfolio-chapter > span { color: #80602c; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.portfolio-card h3 { margin: .3rem 0 0; font: 400 clamp(1.3rem,2vw,1.85rem)/1.25 "Alice",Georgia,serif; }
.portfolio-details .portfolio-card h3 { font-size: 1.2rem; }
.portfolio-chapter { margin: 2.8rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid #d9ccb5; text-align: center; }
.portfolio-chapter h3 { margin: .45rem 0 0; font: 400 1.6rem/1.3 "Alice",Georgia,serif; }
.portfolio-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2rem 1.7rem; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid #d9ccb5; text-align: center; }
.portfolio-footer p { margin: 0; }
.portfolio-instagram { font-size: .8rem; text-underline-offset: 5px; }
.portfolio-lightbox { width: min(740px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 3.2rem 1.25rem 1.25rem; border: 1px solid #c8a55f; border-radius: 12px; color: #f7f1e7; background: #121314; box-shadow: 0 20px 100px #0009; }
.portfolio-lightbox::backdrop { background: #090a0dee; }
.portfolio-lightbox figure { margin: 0; }
.portfolio-lightbox figure img { max-width: 100%; width: auto; max-height: calc(100dvh - 12rem); margin: auto; object-fit: contain; }
.portfolio-lightbox figcaption { margin: .9rem 0; text-align: center; font-family: "Alice",Georgia,serif; font-size: 1.3rem; }
.portfolio-lightbox button { border: 1px solid #807358; border-radius: 6px; color: inherit; background: transparent; padding: .5rem .8rem; cursor: pointer; }
.portfolio-close { position: absolute; right: .75rem; top: .5rem; font-size: 1.5rem; line-height: 1; }
.portfolio-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; }
body.portfolio-is-open { overflow: hidden; }
@media (max-width: 850px) { .portfolio-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .portfolio-portraits { grid-template-columns: 1fr; gap: 1.8rem; }
  .portfolio-details { gap: 1.5rem 1rem; }
  .portfolio-details .portfolio-card h3 { font-size: 1.05rem; }
  .portfolio-card figcaption > span { font-size: .57rem; }
  .portfolio-footer { flex-direction: column; }
  .portfolio-footer .button { width: 100%; }
  .portfolio-view { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-card img, .portfolio-view { transition: none; } }