/* The Work — landscape editorial plates. Zero radius, zero shadow, no card treatment. */

.work{padding:var(--sp-xl) 0 var(--sp-2xl);border-top:1px solid var(--rule)}
.work__head{max-width:78rem;margin:0 auto var(--sp-xl);padding:0 var(--gutter)}

.plate{margin:0 0 var(--sp-xl)}
.plate img{width:100%;height:auto;background:var(--paper-3)}
.plate figcaption{font-size:var(--text-caption);color:var(--muted);
  padding:var(--sp-sm) var(--gutter) 0;max-width:62ch;line-height:1.55}
.plate__idx{display:inline-block;color:var(--copper-ink);font-weight:500;
  letter-spacing:.14em;margin-right:.85em}

/* Full-bleed plates: edge to edge, no containing box. */
.plate--bleed img{width:100vw;margin-left:calc(50% - 50vw)}

/* Inset plates break the bleed rhythm — the grid is deliberately irregular. */
@media (min-width:60rem){
  .plate--inset{max-width:78rem;margin-left:auto;margin-right:auto;padding:0 var(--gutter)}
  .plate--inset img{width:min(62%,44rem)}
  .plate--inset figcaption{padding-left:0;max-width:44ch}
  .plate--right img{margin-left:auto}
  .plate--right figcaption{margin-left:auto;text-align:right}
  .plate--right .plate__idx{margin:0 0 0 .85em;float:right}
}

/* Composition variants beyond bleed/inset. The gallery previously ran a strict
   three-step cycle seven times, which reads as monotony rather than rhythm.
   These give the sequence genuine range: a diptych for comparison, a tall plate
   for vertical subjects, and a small detail plate carried by negative space. */

/* Diptych — two frames read as one comparison. */
.plate--pair{display:grid;gap:2px}
.plate--pair figcaption{grid-column:1/-1}
@media (min-width:48rem){
  .plate--pair{grid-template-columns:1fr 1fr;gap:4px;
    max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
  .plate--pair figcaption{padding-left:0}
}
.plate--pair img{aspect-ratio:4/3;object-fit:cover}

/* Tall — for portrait subjects. Never crop a vertical frame to landscape. */
@media (min-width:60rem){
  .plate--tall{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter);
    display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);
    gap:var(--sp-lg);align-items:end}
  .plate--tall img{width:100%;aspect-ratio:3/4;object-fit:cover}
  .plate--tall figcaption{padding:0 0 var(--sp-md);max-width:34ch}
}

/* Detail — a small frame carried by the space around it. Used sparingly, for
   material moments (concrete face, a glass edge, a weld). */
@media (min-width:60rem){
  .plate--detail{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
  .plate--detail img{width:min(34%,22rem)}
  .plate--detail figcaption{padding-left:0;max-width:30ch}
}

/* Labelled runs inside a sequence. The rule above each run is what turns a long
   plate sequence into chapters; without it 17 sketchbook pages read as one scroll. */
.work__run{max-width:78rem;margin:var(--sp-2xl) auto var(--sp-lg);
  padding:var(--sp-lg) var(--gutter) 0;border-top:1px solid var(--rule)}
/* :first-of-type keys on tag name; .work__head is already the first div in
   section.work, so no .work__run is ever first-of-type. Use the adjacent-sibling
   selector instead, which matches exactly the case that matters: a run heading
   that directly follows the section heading block. */
.work__head + .work__run{margin-top:0;border-top:0;padding-top:0}
/* h3 reset: browser applies ~1em top margin to headings; the visual rhythm here
   is carried by .work__run's own margin/padding, so the heading's own margins
   and font-weight must not add to it. */
.work__run-label{font-family:var(--font-mono);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.18em;color:var(--copper-ink);
  margin:0 0 .6em;font-weight:inherit;line-height:inherit}
.work__run-intro{font-size:1.0625rem;line-height:1.6;max-width:46ch;color:var(--ink-2);margin:0}