/* Corner Lot Studio — the standalone work pages.

   /work/*.html used to be hand-built mockups of an invented listing, rendered
   live in HTML with drop targets so photos could be swapped in. They are now the
   real thing: page stills off the delivered PDFs and the delivered social PNGs
   from one client kit, served at full size. Nothing here is a template.

   The stills carry a baked watermark (scripts/watermark.py), so these pages no
   longer add the CSS overlay from watermark.css on top of it. The old pages drew
   the piece live in HTML and had nothing baked in, which is why they needed it;
   two marks over the same image just read as noise. */

html, body { margin: 0; }

body {
  background: #cfccc1;
  font-family: var(--font-sans);
  color: var(--ink);
  padding: 40px 24px 72px;
}

.head { max-width: 900px; margin: 0 auto 34px; }
.head .k {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #55524a;
}
.head h1 { font-size: 1.5rem; font-weight: 700; margin: 8px 0 0; }
.head p { font-size: var(--text-sm); color: #55524a; margin: 10px 0 0; max-width: 62ch; line-height: 1.6; }

/* The pieces stack down the page. Paper runs one sheet per row so a Letter page
   is read at a readable size; social frames sit side by side, the way a set is
   actually reviewed. */
.rail { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.rail--screen { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 32px; }

figure.piece { margin: 0; }
figure.piece img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 26px 60px rgba(29, 33, 30, 0.28);
}
figure.piece figcaption {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #55524a; margin-top: 12px;
}

.rail--paper figure.piece { width: min(880px, 100%); }
.rail--screen figure.piece.post { width: min(380px, 84vw); }
.rail--screen figure.piece.story { width: min(340px, 76vw); }

.note {
  max-width: 900px; margin: 40px auto 0;
  font-size: var(--text-sm); color: #55524a; line-height: 1.65;
}
.note b { color: var(--ink); font-weight: 600; }
.note a { color: inherit; }