/* The showcase: every screen designed for a project, full width, one under
   another, on a dark ground so light UI screenshots have something to sit on.

   Shared by both case-study systems (case.css long-form and story.css
   short-form) so the two cannot drift the way the footer once did. Injected by
   gen_gallery.py, which also adds the <link> to this file. */

.shw{background:#0A0A0A;color:#fff;padding:clamp(56px,8vw,104px) 0;
  border-top:1px solid rgba(255,255,255,.1)}
.shw-in{max-width:1640px;margin:0 auto;padding:0 20px}
@media(min-width:1024px){.shw-in{padding:0 36px}}

.shw-k{font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0}
.shw-h{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.04em;
  line-height:1.04;font-size:clamp(1.9rem,4.2vw,3rem);margin:14px 0 0}
.shw-h em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-weight:400;color:rgba(255,255,255,.72)}
.shw-lede{max-width:60ch;margin:16px 0 0;font-size:15px;line-height:1.65;
  color:rgba(255,255,255,.6)}

/* The collage.
   A 12-column grid rather than one image per row: figures take alternating
   wide/narrow spans and every other one is nudged down, so the band reads
   horizontally across the page instead of as a stack. Each cell states its own
   aspect ratio, which keeps rows aligned no matter what shape the source
   screenshots are. */
.shw-list{margin-top:clamp(34px,5vw,58px);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.6vw,22px);align-items:start}

.shw-fig{margin:0;grid-column:span 12}
.shw-fig img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center;border-radius:14px;background:#151515;
  border:1px solid rgba(255,255,255,.1)}

/* Every cell takes its own image's proportions — --ar is written on each
   figure by gen_gallery from the file itself — so nothing is ever cropped.
   One screen per row, each running the full width of the section — the
   section itself is wider than the text columns above it, so the screens
   are the biggest thing on the page; portrait shots sit centred at a
   narrower cap so a phone screen does not become a tower. */
.shw-list{grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
.shw-fig{aspect-ratio:var(--ar,16/10);width:100%;margin-inline:auto}
.shw-fig.has-cap{aspect-ratio:auto}
.shw-fig.has-cap img{aspect-ratio:var(--ar,16/10)}
.shw-fig.is-tall{max-width:900px}
/* A portrait screenshot — a phone screen, or a full-page scroll — shows its top. */
.shw-fig.is-tall img{object-position:top center}

.shw-fig figcaption{margin-top:12px;font-size:13px;line-height:1.55;
  color:rgba(255,255,255,.55)}
.shw-fig figcaption b{font-weight:600;color:rgba(255,255,255,.82)}

@media(prefers-reduced-motion:reduce){.shw-fig img{transition:none}}

/* Real screens (Sep 2026).
   Two screens per row on anything wider than a phone, one per row below, in a
   band capped at 1400px. Every cell is a 16:10 frame (--ar is the FRAME ratio),
   so a row's two images always share a height:
   .is-page  — the image is taller than the frame (a full-page scroll, a tall
               section); it shows its top and pans to the bottom on hover, or on
               tap where there is no hover. --pan is the pan duration.
   .is-phone — a phone screenshot: a 9:19 frame whose height follows the row,
               centred in its cell, panning the same way.
   .shw-phones — three or four phone screens side by side across the full row. */
.shw-in{max-width:1400px}
.shw-list{--gap:clamp(18px,2.4vw,36px);grid-template-columns:1fr;gap:var(--gap);align-items:stretch}
@media(min-width:760px){.shw-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shw-list>.shw-fig{grid-column:auto;width:100%;max-width:none;margin:0}
.shw-fig.has-cap img{height:auto;aspect-ratio:var(--ar,16/10);object-fit:cover;object-position:50% 0}

.shw-fig.is-page{cursor:pointer}
.shw-fig.is-page img{transition:object-position var(--pan,7s) linear}
@media(hover:hover){.shw-fig.is-page:hover img{object-position:50% 100%}}
.shw-fig.is-page.is-open img{object-position:50% 100%}
.shw-fig figcaption i{font-style:normal;color:rgba(255,255,255,.38)}

.shw-fig.is-phone{display:flex;flex-direction:column}
.shw-fig.is-phone img{flex:1 1 0;min-height:380px;width:auto;max-width:100%;height:auto;
  aspect-ratio:var(--ar,9/19);margin-inline:auto}
@media(max-width:759px){.shw-fig.is-phone img{flex:none;min-height:0;height:auto;width:min(100%,300px)}}

/* A lone last cell sits centred at half width rather than hanging left. */
@media(min-width:760px){
  .shw-list>.shw-fig:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - var(--gap)/2);margin-inline:auto}}

.shw-phones{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap);align-items:start;width:100%}
@media(min-width:760px){.shw-phones{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.shw-phones .shw-fig{grid-column:auto;aspect-ratio:auto;max-width:none;margin:0}
.shw-phones .shw-fig img{aspect-ratio:var(--ar,9/19);object-fit:cover;object-position:50% 0}
.shw-phones .shw-fig figcaption{font-size:12px}

@media(prefers-reduced-motion:reduce){.shw-fig.is-page img{transition:none}}