#monthly-photo {
  margin: clamp(3.25rem, 8vw, 7rem) 4.4% 0;
  scroll-margin-top: 1rem;
}

.monthly-photo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line);
  background: #eee5d6;
}

.monthly-photo-image {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(.6rem, 1.7vw, 1.5rem);
  background: #e6dbc9;
}

.monthly-photo-image img { width: 100%; height: auto; max-height: 34rem; object-fit: contain; }
.monthly-photo-image:focus-visible { outline-offset: -4px; }
.monthly-photo-text { align-self: center; min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); }
.monthly-photo-date { display: block; margin-bottom: .7rem; color: #5e503d; text-transform: uppercase; }
.monthly-photo h2 { font: 400 clamp(1.9rem, 4vw, 4.25rem)/1.05 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.monthly-photo-title { margin-top: 1.25rem; font: 400 clamp(1.2rem, 2vw, 1.7rem)/1.25 var(--serif); }
.monthly-photo-description { margin-top: .65rem; max-width: 37ch; font: .9rem/1.65 var(--sans); overflow-wrap: anywhere; }
.monthly-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin-top: 1rem; }
.monthly-photo-actions .text-link { min-height: 44px; }
.monthly-photo-actions button[hidden] { display: none; }

.monthly-photo-editor {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}

.monthly-photo-editor::backdrop { background: #201e1ab3; }
.monthly-photo-editor h2 { font: 400 clamp(1.45rem, 3vw, 1.9rem)/1.15 var(--serif); }
.monthly-photo-editor label { display: block; margin-top: .9rem; font-size: .85rem; }
.monthly-photo-editor select,
.monthly-photo-editor textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .3rem;
  padding: .55rem;
  border: 1px solid #8c7b65;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.monthly-photo-editor textarea { resize: vertical; }
.monthly-photo-editor-status { margin-top: .75rem; font-size: .85rem; line-height: 1.5; }

@media (max-width: 760px) {
  .monthly-photo { grid-template-columns: minmax(0, 1fr); }
  .monthly-photo-text { padding: 1.5rem; }
}