/* ── the long story page ───────────────────────────────────────────
   The brand's own full story, cut into cards with the extra
   photographs between them. Same light stage, white panels and deep
   blues as every other page in the house; the reading column is held
   to a book measure because this is the one page people actually
   read end to end. */

.lst { padding: clamp(24px,4vw,42px) 0 0; }
.lst__by { color: var(--text-soft); margin: 14px 0 0; max-width: 60ch; }
.lst__back { margin: 16px 0 0; font-size: 13.5px; }
.lst__back a { color: var(--accent); font-weight: 600; }
.lst__back a:hover { text-decoration: underline; }

/* The flow: cards and photographs alternating down ONE reading column,
   held to a book measure the way .chap--solo holds the history page.
   padding-TOP only — this class rides on .wrap, and the padding
   shorthand would wipe out that element's own side padding and push
   the whole story against the edge of a phone screen. */
.lst__flow { display: grid; gap: clamp(16px,2.6vw,26px);
             padding-top: clamp(20px,3.5vw,36px);
             grid-template-columns: minmax(0, 78ch); justify-content: start; }

.lst__card { background: var(--panel); border: 1px solid var(--panel-edge);
             border-left: 3px solid var(--brand);
             border-radius: var(--radius); box-shadow: var(--shadow-sm);
             padding: clamp(18px,3vw,32px); }
.lst__card p { margin: 0 0 15px; color: var(--text-soft);
               font-size: clamp(15.5px,1.5vw,17px); }
.lst__card p:last-child { margin-bottom: 0; }

.lst__ph { margin: 0; border: 1px solid var(--panel-edge);
           border-radius: var(--radius); overflow: hidden;
           background: var(--panel); box-shadow: var(--shadow-sm); }
.lst__ph img { width: 100%; }

/* ── the leftover strip: photographs the prose had no gap for ── */
.lst__gal { margin-top: clamp(8px,1.6vw,14px); }
.lst__galh { font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
             color: var(--grey-500); font-weight: 700; margin: 0 0 12px; }
.lst__galg { display: grid; gap: 12px;
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lst__galg figure { margin: 0; border: 1px solid var(--panel-edge);
                    border-radius: var(--radius-sm); overflow: hidden;
                    background: var(--panel); box-shadow: var(--shadow-sm); }
.lst__galg img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── the foot: who told this story, where the technology is explained,
      and the way back to the model. ── */
.lst__foot { border-top: 1px solid var(--panel-edge);
             padding-top: clamp(18px,3vw,28px); }
.lst__credit { color: var(--grey-500); font-size: 13.5px; margin: 0 0 16px;
               max-width: 60ch; }
.lst__tech { margin: 0 0 18px; }
.lst__tech a { color: var(--accent); font-weight: 600; }
.lst__tech a:hover { text-decoration: underline; }
.lst__links { display: flex; flex-wrap: wrap; gap: 10px; }

@media print {
  .lst__card { break-inside: avoid; box-shadow: none; border-color: #bbb; }
  .lst__ph, .lst__galg figure { box-shadow: none; border-color: #bbb; }
  .lst__links, .lst__back { display: none; }
}