/* ==========================================================================
   Selected Works & Publications — full-bleed "poster" block up top,
   then a staggered two-column tiled grid (matches the live Squarespace
   layout: one full-width feature, then two independently-stacked columns
   whose tiles are different heights, creating the staggered look).
   ========================================================================== */

.works-wrap {
  padding: 0 60px 60px;
}

.work-block {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.work-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.work-block-full {
  margin-bottom: 34px;
}

.works-grid {
  display: flex;
  gap: 3%;
  align-items: flex-start;
}

.works-col {
  width: 48.5%;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.work-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.work-overlay-inner {
  max-width: 780px;
}

.work-title {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 400;
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 5.6rem);
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.work-quote {
  font-family: 'EB Garamond', Georgia, serif;
  color: #fff;
  font-size: clamp(1rem, 2.1vw, 1.65rem);
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

.work-quote p { margin: 0 0 1.1em; }

.work-source {
  font-size: 1em;
}

.work-source em { font-style: italic; }

/* Tiles inside the two-column grid are much narrower than the full-width
   feature block, so they need their own, smaller type scale and a
   narrower text column so lines don't run edge-to-edge. */
.works-col .work-overlay {
  padding: 20px;
}

.works-col .work-overlay-inner {
  max-width: 76%;
}

.works-col .work-title {
  font-size: clamp(1.4rem, 2.9vw, 2.7rem);
  margin-bottom: 0.4em;
}

.works-col .work-quote {
  font-size: clamp(0.62rem, 1vw, 0.8rem);
}

/* --------------------------------------------------------------------
   Per-work aspect ratio (mirrors each original image's natural size)
   -------------------------------------------------------------------- */

#work-wanting           { aspect-ratio: 620 / 300; }
#work-wanting img       { object-position: 50% 30%; }
#work-frank-joseph      { aspect-ratio: 819 / 1092; }
#work-elephant          { aspect-ratio: 1140 / 1146; }
#work-tennessee-honey   { aspect-ratio: 1528 / 944; }
#work-thirty            { aspect-ratio: 1530 / 960; }
#work-forever           { aspect-ratio: 768 / 1098; }
#work-posthumous        { aspect-ratio: 1522 / 988; }
#work-superhero         { aspect-ratio: 1524 / 794; }
#work-faded-photograph  { aspect-ratio: 1528 / 957; }
#work-exit              { aspect-ratio: 1526 / 966; }

@media (max-width: 780px) {
  .works-wrap { padding: 0 24px 40px; }
  .works-grid { flex-direction: column; gap: 24px; }
  .works-col { width: 100%; gap: 24px; }
  .work-overlay { padding: 24px; }
  .work-quote { font-size: clamp(0.95rem, 4vw, 1.3rem); }
  .works-col .work-overlay-inner { max-width: 90%; }
  .works-col .work-title { font-size: clamp(1.5rem, 6vw, 2.6rem); }
  .works-col .work-quote { font-size: clamp(0.8rem, 3.2vw, 1rem); }
}