/* ============================================================
   THE LANDING COLUMN — one photograph per campaign, scrolled normally.

   THIS IS NOT THE CAMPAIGNS PAGE'S SYSTEM, AND SHOULD NOT BE. That one
   holds every campaign in one place and steps between them: the page stops,
   the cards move. It was built that way here too once — a tall track with a
   sticky child — and it was wrong. Pinning takes the scrollbar away: you
   push down and the page does not go anywhere, which on a landing page
   someone is reading through is the opposite of what a scroll is for.

   So the landing page does the plain thing. The cards are a column in
   normal flow. Scrolling goes down the page and back up it, past them, the
   way scrolling goes anywhere else. Nothing is pinned and nothing is
   captured.

   WHAT CARRIES OVER IS THE CARD, NOT THE MECHANISM: the same square and
   the same 15% radius. Nothing on a card moves with the scroll.
   ============================================================ */

.wall.is-stowed,.pages.is-stowed{display:none}

.lstack{position:relative}
.lst-list{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s6);
  padding:var(--s5) var(--s3);
}

/* --- one campaign --- */
/* THE ROW IS THE CARD'S WIDTH AND NOTHING MORE. It used to be
   min(90vw, 96rem) — nearly thirteen hundred pixels on a laptop around a
   five-hundred pixel card — so the description opened while the pointer was
   still out at the edge of the window, nowhere near the campaign. The row is
   the hover target, so the row has to be the campaign. */
.lst-row{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:var(--card); max-width:100%;
}
.lst-camp{
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}
.lst-card{
  display:block; width:var(--card); height:var(--card); max-width:100%;
}
.lst-card_in{
  display:block; position:relative; width:100%; height:100%;
  border-radius:8%; overflow:hidden;   /* was 15%; the client asked for less rounded */
}
.lst-card img{width:100%; height:100%; object-fit:cover; display:block}
/* --- where they are, on the picture ---
   A chip in the paper colour rather than type burned into the photograph: it
   reads at any exposure, and it does not need a scrim darkening the corner
   of somebody's work to stay legible. Small and fully round, so it reads as
   a label on the picture and not as a sticker over it. --- */
.lst-place{
  /* Clear of the corner. The card's radius is 15% — 62px on a 412px card —
     so a chip 12px in from the bottom left was being cut by the curve that
     clips it. At 2.2rem in, the curve has moved 15px and the chip is whole. */
  position:absolute; left:2.2rem; bottom:2.2rem; z-index:2;
  display:block; max-width:calc(100% - 4.4rem);
  padding:.55rem 1.1rem .6rem; border-radius:99rem;
  background:var(--ground); color:var(--ink);
  font-family:var(--face-ui); font-size:1rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
}

/* --- THE RECORD, IN ONE SYSTEM ---
   Everything under the card is set against the photograph's own two edges:
   name and craft on the top line, what the work is and what it costs on the
   bottom one. It was three alignments before — name left, craft right, note
   and button centred — which reads as an accident rather than a decision. --- */
/* A LINE EACH, AT EVERY WIDTH. Hung at the two ends of one line they had to
   shrink to fit the pair, which on a phone's 293px card put them at 13px —
   the size of the body text under them, so they stopped being a heading.
   Stacked, each gets the whole width and can be set properly: name on the
   left, craft on the right under it. */
/* ONE PAIR, ONE SETTING. Who they are and what they make are the same kind
   of fact, so they are set the same way and hung at the two ends of the
   photograph's width. Nothing distinguishes them but position. */
.lst-name,.lst-niche{
  margin:0;
  font-family:var(--face); font-weight:700;
  
  /* Sized off the card, not the window — a wide short window gives a small
     card and a large vw at the same time. 6.5% is the proportion that read
     right on the phone (19px on a 293px card), held at every width. */
  font-size:clamp(1.6rem, calc(var(--card-type, var(--card)) * 0.065), 3.4rem);
  text-transform:uppercase;
  letter-spacing:-0.01em; line-height:1.05; color:var(--ink);
}
.lst-niche{display:block; margin-top:.5rem; text-align:right}

.lst-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); width:var(--card); max-width:100%; margin-top:var(--s3);
}
/* THE SECOND PAIR, ALSO ONE SETTING. What the work is and what it costs sit
   a step below the names in size and in colour, and level with each other. */
.lst-note,.lst-share,.lst-clock{
  margin:0;
  font-family:var(--face-ui); font-weight:400; font-size:1.35rem;
  line-height:1.45; letter-spacing:0; text-transform:none;
  color:var(--soft);
}
/* THE DESCRIPTION IS THE ONE LINE THAT WAITS TO BE ASKED FOR. Twenty-four
   of them stacked down the page is a lot of grey type competing with the
   photographs; the figure and the days left are not, because they are what
   makes somebody stop.

   It fades rather than unmounts, and opacity is the whole of it. Nothing is
   taken out of the flow, so nothing anywhere on the page can move — which is
   what went wrong when a panel did this by changing its own height and made
   the column jump by a hundred pixels every time a card passed the cursor. */
.lst-note{
  min-width:0; max-width:34ch;
  opacity:0; transition:opacity .24s var(--easing);
}
.lst-camp:hover .lst-note,
.lst-camp:focus-within .lst-note{opacity:1}

/* No pointer to hover with — a phone. It is simply there. */
@media (hover: none){
  .lst-note{opacity:1}
}
.lst-act{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.4rem; flex:0 0 auto; text-align:right;
}
.lst-share,.lst-clock{flex:0 0 auto; font-variant-numeric:tabular-nums; white-space:nowrap}

/* --- see more artists --- */
.lst-more{
  display:flex; justify-content:center;
  padding:var(--s5) var(--s3) var(--s6);
}
.lst-more a,.lst-more button{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.5rem 2.6rem; border-radius:1.6rem;
  border:1px solid color-mix(in srgb, var(--ink) 22%, var(--ground));
  background:transparent; color:var(--ink); cursor:pointer;
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  transition:border-color var(--speed) var(--easing),
             background var(--speed) var(--easing);
}
.lst-more a:hover,.lst-more button:hover,
.lst-more a:focus-visible,.lst-more button:focus-visible{
  border-color:var(--ink);
  background:color-mix(in srgb, var(--ink) 6%, var(--ground));
}

@media (max-width:768px){
  .lst-list{gap:var(--s5)}
}
/* Under about a phone's width the foot cannot hold two columns without the
   note breaking to five lines. It stacks. */
@media (max-width:560px){
  .lst-foot{flex-direction:column; align-items:stretch; gap:var(--s3)}
  .lst-note,.lst-share,.lst-clock{font-size:1.25rem}
  .lst-note{max-width:none}
  .lst-act{
    flex-direction:row; align-items:baseline; gap:var(--s3);
    text-align:left;
  }
}

@media (prefers-reduced-motion: reduce){
  .lst-note{transition:none}
}

/* ============================================================
   THE NAME ON THE LEFT, THE FIGURES ON THE RIGHT (21 September 2026)
   The campaign stays in the middle at its own size. Three columns: the
   two outer ones share what is left of the window equally, so the middle
   one is centred whatever sits either side of it. The name hangs at the
   top of the left one; the niche, the percentage and the days start level
   with the photograph's top in the right one. Narrower than 1024px there
   is no room either side: the name goes above the campaign and the
   figures under the photograph, the niche at the right as it was.
   ============================================================ */
.lst-side{display:flex; flex-direction:column; gap:var(--s3)}
.lst-side .lst-niche{margin:0}
@media (min-width:1024px){
  .lst-list{padding-left:2.4rem; padding-right:2.4rem}
  .lst-row{
    display:grid; grid-template-columns:minmax(0, 1fr) var(--card) minmax(0, 1fr);
    column-gap:4rem; align-items:start;
    width:100%; max-width:none;
  }
  /* CENTRED IN THE WHITE BETWEEN THE PAGE'S EDGE AND THE PHOTOGRAPH
     (client, 21 September 2026): the box is pulled out over the page
     padding on one side and the gap on the other, so its middle is the
     middle of that whole space. */
  .lst-who{grid-column:1; grid-row:1; justify-self:stretch; margin:0 -4rem 0 -4.4rem; text-align:center}   /* -4.4rem: the list's 24px and the page's own 20px */
  .lst-who .lst-name{text-align:center; margin-top:3.6rem}   /* a little below the photograph's top */
  .lst-camp{grid-column:2; grid-row:1; width:var(--card)}
  /* CENTRED IN THE WHITE BETWEEN THE PHOTOGRAPH AND THE PAGE'S EDGE, as
     the name is on the other side (client, 21 September 2026); the height
     is where the client put it, a little below the photograph's middle */
  .lst-side{grid-column:3; grid-row:1; justify-self:stretch;
    margin-left:-4rem; margin-right:-4.4rem;
    /* the block centred in the space, its lines on the niche's left edge */
    display:grid; justify-content:center; justify-items:start; text-align:left;
    margin-top:calc(var(--card) / 2); transform:translateY(calc(-50% + 7.2rem))}
  .lst-side .lst-niche{text-align:left}
  .lst-side .lst-act{align-items:flex-start; text-align:left}
}
@media (max-width:1023px){
  .lst-who{width:var(--card); max-width:100%; margin-bottom:var(--s3)}
  .lst-row{display:flex; flex-direction:column}
  .lst-camp{display:contents}
  .lst-card{order:0}
  .lst-side{order:1; width:var(--card); max-width:100%; margin-top:var(--s3); align-items:flex-end; text-align:right}
  .lst-foot{order:2}
  .lst-who{order:-1}
}

/* --- "See more", typed onto the photograph at its bottom right, in the
   country chip's own setting so the two read as a pair --- */
.lst-hint{
  position:absolute; right:2.2rem; bottom:2.2rem; z-index:2;
  display:flex; align-items:center;
  padding:.55rem 1.1rem .6rem; border-radius:99rem;
  background:var(--ground); color:var(--ink);
  font-family:var(--face-ui); font-size:1rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  opacity:0; transition:opacity .15s linear;
}
.lst-hint.is-on{opacity:1}
.lst-hint_t{display:inline-block; min-height:1em}
/* the caret, while the line is being written */
.lst-hint_c{
  display:inline-block; width:1px; height:1.1em; margin-left:.25rem;
  background:currentColor; vertical-align:middle;
}
/* the cursor is only there while it types; once written, it goes (client) */
.lst-hint.is-done .lst-hint_c{display:none}
@keyframes lst-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .lst-hint{transition:none}
  .lst-hint.is-done .lst-hint_c{animation:none}
}

/* the niche's drawing (niche-art.js): a hairline in ink, under the
   artist's name */
.lst-glyph{
  display:block; width:5.6rem; height:5.6rem; margin-bottom:.4rem;
  /* bent grey wire, like the found-object ABC (24 Sept 2026): the stroke
     is only the wire's shape — its colour comes from the #mnf-wire filter in
     niche-art.js. Was: a 1.5px hairline in --spark. */
  fill:none; stroke:#000; stroke-width:3.2px; filter:url(#mnf-wire);
  stroke-linecap:round; stroke-linejoin:round; overflow:visible;
}
/* under the name, in the middle of the space beside the photograph */
.lst-who .lst-glyph{margin:var(--s3) auto 0}
@media (max-width:1023px){
  .lst-glyph{width:4.4rem; height:4.4rem}
  .lst-who .lst-glyph{margin:var(--s2) 0 0}
}

/* drawn by the scroll (lstack.js paint): every stroke starts at its whole
   length undrawn, and the script runs it down to none */
.lst-glyph .lg-d{stroke-dasharray:400; stroke-dashoffset:400}   /* until lstack.js has measured it */
.lst-glyph .lg-f{opacity:0}
/* a video cover fills its card like a photograph (25 September 2026) */
.lst-card_in video.mnf-covervid{display:block; width:100%; height:100%; object-fit:cover}
.lst-card_in video.mnf-covervid{pointer-events:none}
.lst-note,.lst-name{overflow-wrap:anywhere; word-break:break-word}
/* gone once every running campaign is on the page (lstack.js) — the flex
   rule above would otherwise keep it on screen through [hidden] */
.lst-more[hidden]{display:none}