/* ============================================================
   CIAO PAGE — editorial photo-essay layout
   Loaded after style.css + photography.css on ciao.html only
============================================================ */

.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s, letter-spacing 0.2s;
}

.back-link:hover {
  color: var(--text);
  letter-spacing: 0.22em;
}

.back-link-wrap {
  padding: calc(var(--nav-h) + 3rem) 0 0;
  background-color: var(--page-bg);
}

/* ============================================================
   ESSAY INTRO — headline block
============================================================ */
.essay-intro {
  background-color: var(--page-bg);
  padding: 3rem 0 6rem;
  text-align: center;
}

.essay-intro .project-label {
  text-align: center;
}

.essay-intro .project-title {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
}

.essay-intro .project-subtitle {
  display: block;
  margin: 0 auto;
}

.essay-intro-body {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 620px;
  margin: 1.75rem auto 0;
}

/* ============================================================
   ESSAY — stacked full-width images + side-by-side pairs
============================================================ */
.essay {
  background-color: var(--page-bg);
  padding: 0 2.5rem 9rem;
  display: flex;
  flex-direction: column;
  gap: 6.5rem;
}

/* Images render at their own natural aspect ratio — never cropped.
   The essay column is deliberately wider than the site's standard
   1120px .container — the reference essay runs images large, close
   to full viewport width. Verified against the live reference: width
   variation between singles is real and deliberate, not just a
   byproduct of each photo's own ratio (two same-ratio landscape shots
   there render at visibly different widths). So each single frame
   gets one of three explicit widths, and img always fills its frame
   at width:100%/height:auto — never stretched beyond it:
     (default)   full width  — the featured/hero shots
     .is-narrow  80% width   — the "standard" landscape rhythm
     .is-portrait ~42% width — portraits, flagged by js/main.js since
                               CSS can't read natural orientation
   Pairs use a separate justified-row technique: each frame's
   flex-grow is set in js/main.js to that image's own width/height
   ratio, so at flex-basis:0 the row allocates width proportional to
   aspect ratio — every frame in the row lands at the same height with
   zero cropping, regardless of whether the pairing mixes landscape
   and portrait. */
.essay-single {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.essay-single .essay-frame {
  width: 100%;
  margin: 0 auto;
}

.essay-single .essay-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.essay-single .essay-frame.is-narrow {
  max-width: 80%;
}

.essay-single .essay-frame.is-portrait {
  max-width: 42%;
}

.essay-pair {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

.essay-pair .essay-frame {
  flex: 1 1 0;
  min-width: 0;
}

.essay-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.essay-frame {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.essay-frame:hover {
  opacity: 0.88;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .back-link-wrap {
    padding: calc(var(--nav-h) + 2rem) 0 0;
  }

  .essay-intro {
    padding: 2.5rem 0 4rem;
  }

  .essay {
    gap: 4rem;
    padding-bottom: 6rem;
  }

  /* Varying size is a desktop effect — on mobile every frame
     (single or paired, portrait, narrow, or full) fills the
     full column width instead. */
  .essay-single .essay-frame.is-narrow,
  .essay-single .essay-frame.is-portrait {
    max-width: 100%;
  }

  .essay-pair {
    flex-direction: column;
    align-items: center;
  }

  .essay-pair .essay-frame {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .essay {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}