/* BRASA — THE FIRE. One dominant landscape, two details overlapping it,
   tiny labels, and an ember line that travels once the section is in view. */

.fire {
  position: relative;
  background: transparent;
  padding-block: clamp(5rem, 13vh, 10rem);
}

.fire__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.6rem);
}
.fire__head .display { margin-top: .5rem; }

.fire__rule { margin-bottom: clamp(2rem, 4vw, 3rem); }

.fire__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  /* the cut-out around a photograph that lies ON another one */
  --cutout: clamp(5px, .7vw, 10px);
}

/* Row 1 carries the dominant landscape with a square detail crossing its
   bottom-right corner; both are placed explicitly so the overlap is deliberate
   rather than a side effect of auto-placement. */
.fire__main {
  grid-column: 1 / span 8;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
}
/* The square detail lies over the landscape. All three photographs are the
   same fire, the same cook and the same dark, so without a gap their edges
   melt into one another — on a phone it read as a single muddled picture.
   A border in the page's own colour cuts the detail out of the photograph
   beneath it. A border rather than a box-shadow ring keeps the cut-out inside
   the figure's own box: it takes no room from the grid, and the drop shadow
   underneath stays a shadow. --page-bg is the colour chapters.js is fading the page through, so the
   cut-out stays invisible against the background and only shows where it
   crosses the other photograph. The radius grows by the border so the corner
   of the picture itself keeps its original curve. */
.fire__detail-a {
  grid-column: 8 / span 5;
  grid-row: 1;
  align-self: end;
  transform: translateY(clamp(1.5rem, 4vw, 3.5rem));
  aspect-ratio: 1 / 1;
  border: var(--cutout) solid var(--page-bg);
  border-radius: calc(var(--r-md) + var(--cutout));
  box-shadow: var(--img-shadow);
  z-index: 2;
}
.fire__detail-b {
  grid-column: 2 / span 3;
  grid-row: 2;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
}

.fire__notes {
  grid-column: 6 / span 6;
  grid-row: 2;
  align-self: center;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  gap: 1.4rem;
}
.fire__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.fire__tags li {
  padding: .45em 1em;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.fire__tags li:hover { color: var(--ember); border-color: var(--ember); }

@media (max-width: 900px) {
  .fire__head { grid-template-columns: 1fr; align-items: start; }
  .fire__main { grid-column: 1 / -1; }
  /* The negative margin never worked here: the desktop rule's align-self:end
     pinned the square to the bottom of row 2, so it only grazed the landscape
     by a few pixels and the two edges simply touched. Aligned to the start,
     the square really lies over the landscape and the cut-out shows. */
  .fire__detail-a { grid-column: 6 / -1; grid-row: 2; align-self: start; transform: none; margin-top: -3.5rem; }
  .fire__detail-b { grid-column: 1 / span 5; grid-row: 2; margin-top: 0; }
  .fire__notes { grid-column: 1 / -1; grid-row: 3; margin-top: 2rem; }
}