.photography-story {
  position: relative;
  scroll-margin-top: 7rem;
  isolation: isolate;
  padding-block: clamp(4rem, 8vw, 8rem);
  border-top: 1px solid rgba(185, 154, 102, .3);
  border-bottom: 1px solid rgba(166, 183, 145, .25);
  background: radial-gradient(ellipse at 90% 12%, rgba(185, 154, 102, .13), transparent 55%), radial-gradient(ellipse at 0 90%, rgba(166, 183, 145, .08), transparent 60%);
}
.photography-story .section-top {
  gap: 1rem;
  flex-wrap: wrap;
  line-height: 1.8;
}
.photography-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4.5rem);
}
.photography-heading h2 {
  margin: 1rem 0 1.6rem;
  color: #e6e1d4;
  font-family: var(--display, Georgia, serif);
  font-size: clamp(2.6rem, 5.9vw, 6.4rem);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: .008em;
  text-wrap: balance;
}
.photography-heading h2 span { color: #d3b581; }
.photography-heading > p:last-child,
.photography-narrative > p {
  margin: 0 0 1.3rem;
  max-width: 58ch;
  color: #c5caba;
  font-family: var(--body, sans-serif);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.85;
}
.photography-narrative { padding-top: .2rem; }
.photography-interests {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}
.photography-interests span {
  padding: .65rem .85rem;
  border: 1px solid rgba(166, 183, 145, .3);
  color: #c2d0ae;
  font: 400 .65rem/1.6 var(--mono, monospace);
  letter-spacing: .055em;
}
.photography-archive-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.photography-archive-intro { grid-column: 1 / -1; margin-bottom: .4rem; }
.photography-archive-intro h3 {
  margin: 0 0 .6rem;
  color: #e6e1d4;
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.2;
}
.photography-archive-intro p {
  max-width: 65ch;
  margin: 0 0 1rem;
  color: #c5caba;
  font: 400 1rem/1.8 var(--body, sans-serif);
}
.photography-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 108px;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid rgba(185, 154, 102, .32);
  border-radius: 4px;
  background: rgba(34, 48, 39, .5);
  color: #e6e1d4;
  font: 400 clamp(1rem, 1.6vw, 1.3rem)/1.5 var(--body, sans-serif);
  text-decoration: none;
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.photography-link small {
  display: block;
  margin-bottom: .65rem;
  color: #c2d0ae;
  font: 400 .65rem/1.6 var(--mono, monospace);
  letter-spacing: .08em;
}
.photography-link > span:last-child {
  color: #d3b581;
  font-size: 1.65rem;
  flex: 0 0 auto;
  transition: transform .4s ease;
}
.photography-link:hover,
.photography-link:focus-visible {
  border-color: #d3b581;
  background: rgba(61, 70, 48, .76);
  box-shadow: 0 0 40px rgba(185, 154, 102, .09);
}
.photography-link:focus-visible { outline: 2px solid #d3b581; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .photography-link:hover > span:last-child { transform: translate(3px, -3px); }
}
@media (max-width: 820px) {
  .photography-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .photography-archive-links { grid-template-columns: 1fr; }
  .photography-heading h2 { font-size: clamp(2.5rem, 8.5vw, 4.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .photography-link,
  .photography-link > span:last-child { transition: none; }
}