.masthead__hero em { font-style: italic; }

.finder { background: var(--white); padding: 5.625rem var(--pad-x) 4.375rem; border-bottom: 2px solid var(--red); }
.finder__intro { margin-top: 1.625rem; max-width: 40rem; color: #8a4b42; font-size: 1.125rem; line-height: 1.6; }

.finder__form { margin-top: 3.5rem; }
.finder__search { display: flex; border: 1px solid var(--red-brand); border-radius: 2px; overflow: hidden; background: var(--white); }
.finder__search input {
  flex: 1; min-width: 0; height: 4rem; border: 0; padding: 0 1.375rem; background: transparent; outline: none;
  font-family: var(--f-serif); font-style: italic; font-size: 1.1875rem; color: var(--ink);
}
.finder__search input::placeholder { color: #9a8f8b; }
.finder__search button { width: 4rem; border: 0; background: var(--red-deep); color: var(--cream); display: grid; place-items: center; transition: background-color .2s; }
.finder__search button:hover { background: var(--red); }
.finder__search:focus-within { box-shadow: 0 0 0 0.1875rem rgba(220,161,93,.35); }

.finder__filters-title {
  display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.875rem; padding-bottom: 0.75rem; border-bottom: 1px solid #b9a9a5;
  font-family: var(--f-serif); font-weight: 500; font-size: 1.375rem; color: var(--ink);
}
.finder__filters-title::after { content: none; }
.finder__clear { border: 0; background: none; color: var(--teal); font-family: var(--f-nav); font-size: 0.9375rem; letter-spacing: .08em; text-transform: uppercase; }
.finder__clear:hover { color: var(--teal-dark); text-decoration: underline; }
.finder__filters { margin-top: 1.875rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3.25rem; }
.field span { display: block; margin-bottom: 0.75rem; font-family: var(--f-serif); font-size: 0.9375rem; letter-spacing: .06em; text-transform: uppercase; color: #3a3a3a; }
.field select {
  width: 100%; height: 4rem; padding: 0 3rem 0 1.25rem; border: 1px solid var(--red-brand); border-radius: 0.25rem; background: var(--white);
  font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; color: var(--ink); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%234a150e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.125rem center;
}
.field select:focus { outline: none; box-shadow: 0 0 0 0.1875rem rgba(220,161,93,.35); }

.diarists { background: var(--cream); padding: 5rem var(--pad-x) 6.875rem; }
.diarist-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 2.5rem; max-width: 79.5rem; }
.diarist-card { transition: opacity .35s, transform .45s var(--ease); }
.diarist-card.is-hidden { display: none; }
.diarist-card__link {
  display: flex; flex-direction: column; height: 100%; padding: 1rem 1rem 1.375rem; background: #faf9f7; text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,.03); transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
a.diarist-card__link:hover { transform: translateY(-0.375rem); box-shadow: 0 1.375rem 2.5rem rgba(74, 21, 14, .14); }
.diarist-card__photo { position: relative; display: block; aspect-ratio: 340 / 455; overflow: hidden; }
.diarist-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a.diarist-card__link:hover .diarist-card__photo img { transform: scale(1.04); }
.diarist-card__name { margin-top: 1.625rem; font-family: var(--f-nav); font-size: 1.1875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.diarist-card__meta { margin-top: 0.375rem; font-family: var(--f-serif); font-size: 1rem; color: #555; }
.diarist-card__foot { margin-top: auto; padding-top: 1.875rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: #555; font-weight: 400; }
.diarist-card__view { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--red-brand); font-family: var(--f-nav); font-size: 1rem; letter-spacing: .06em; }
.diarist-card__view::before { content: ""; width: 2.125rem; height: 1px; background: currentColor; transition: width .35s var(--ease); }
a.diarist-card__link:hover .diarist-card__view::before { width: 3.125rem; }

.diarist-card.is-soon .diarist-card__link { cursor: default; }
.diarist-card__photo img[src*="florence-barber-portrait"] { object-position: 50% 25%; }
.diarist-card.is-soon .diarist-card__photo { background: #4a5a2a; }
.diarist-card.is-soon .diarist-card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,40,15,0) 45%, rgba(30,40,15,.45)); pointer-events: none; }
.diarist-card__placeholder { object-position: 15% 30%; }
.diarist-card:nth-child(3) .diarist-card__placeholder { object-position: 55% 70%; }
.diarist-card:nth-child(4) .diarist-card__placeholder { object-position: 90% 20%; }
.diarist-card__soon { z-index: 1; }
.diarist-card__soon {
  position: absolute; left: 50%; bottom: 1.375rem; transform: translateX(-50%); white-space: nowrap;
  padding: 0.4375rem 1.125rem; background: rgba(74, 21, 14, .88); color: var(--cream);
  font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; letter-spacing: .04em;
}
.diarists__empty { text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 1.375rem; color: var(--red-brand); margin-top: 1.25rem; }

body.is-leaving .page { transition: opacity .2s ease-out, transform .25s var(--ease); opacity: 0; transform: scale(.985); }
.diarist-card.is-opening .diarist-card__photo img { transform: scale(1.12); transition-duration: .6s; }

@media (max-width: 1200px) { .diarist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
@media (max-width: 760px) {
  .finder { padding: 3.75rem 1.375rem 3.125rem; }
  .finder__filters { grid-template-columns: 1fr; gap: 1.25rem; }
  .diarists { padding: 3.5rem 1.375rem 5rem; }
  .diarist-grid { grid-template-columns: 1fr; max-width: 23.75rem; }
}

.finder__search button svg { width: 1.625rem; height: 1.625rem; }