/* ============================================================
   v5 — THE SIGNAL.  Additive over base/v3/v4.
   All that is kept from the exhibition layer is the colour: the
   live campaign's figure, the sort state, the current page and the
   hero lines turn orange-red. The room, the canvas and the gilded
   frames were reverted. Delete the one <link> and this is gone.
   ============================================================ */
:root{ --redx:#F0330F; }

/* THE PAGE GROUND MOVED TO base.css (9 Sept 2026). It was declared here,
   unconditionally, and painted onto html and body on top of that — which
   meant the landing page could not go dark whatever tokens.css said, and
   that every other page stayed on #F2F2F2 while this one was #FFFFFF.
   One light ground, in base.css, for the whole site. */

.band.is-live .fig-sum,
.band:focus-within .fig-sum{color:var(--redx)}
.band.is-live .reg-disc{color:var(--ink)}

.sort-btn .sort-current,
.pages a[aria-current="page"]{color:var(--redx)}


/* the hero's three hairlines are off. The columns themselves stay:
   the wordmark measures itself against them. */
.hero-col{border-left:0 !important; border-right:0 !important}

/* ---- THE STUDIO OBJECTS ------------------------------------------
   The layer itself moved to base.css on 9 Sept 2026 — two pages use it
   now, and cuts.js builds it. What is left here is only what the LANDING
   page does to it, which is drive its opacity from the wordmark's flight
   (v4.js). Anything with a solid surface covers it, so it can never sit
   under text. It shows in the open page: the hero, and the gaps. */
/* each campaign sits on a panel narrower than the window, so the objects
   wrap around it down both sides */
.band{
  /* no panel: with the objects faded back they no longer fight the words */
  padding:clamp(40px,5vw,80px) clamp(18px,2vw,34px);
  position:relative; z-index:1;
}
/* the sort row keeps no panel of its own */
.sort-row,.sorter{background:transparent !important; position:relative; z-index:1}
.pages{
  background:transparent !important; position:relative; z-index:1;
  /* pulled up to the last campaign so it reads as belonging to the wall,
     and pushed away from what follows */
  margin-top:clamp(10px,1.4vh,18px) !important;
  margin-bottom:clamp(60px,10vh,120px);
}
.hero,.first{background:transparent}
/* .roll is gone; the pagination and sort row carry no ground of their own */
.foot{
  background:var(--ground); position:relative; z-index:1;
  /* the footer sits inside the shell's padding, so its ground stopped short
     of the window. Break it out to the full width. */
  width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:calc(var(--edge-w, 60px) + clamp(20px,3vw,48px));
  padding-right:clamp(20px,3vw,48px);
}
/* let the background through between documents */
/* .wall is a flex column, so margins do NOT collapse — the gap was the
   band's top and bottom margins added together. One value owns it now. */
.band{
  margin-top:clamp(44px,6vh,72px) !important;
  margin-bottom:0 !important;
}

/* ---- THE WORDMARK SHRINKS AND LOCKS TOP-LEFT ---------------------
   It is taken out of flow and fixed at the exact spot it lands in the
   hero, then translated and scaled on scroll progress. .hero-block
   keeps its measured height so nothing below it moves. */
.hero-mark.is-flying{
  position:fixed; margin:0; transform-origin:0 0;
  will-change:transform; z-index:55;
  /* base.css puts overflow-x:clip on the wordmark. With -6.3px letter
     spacing the last glyph's INK reaches past the element's width, so the
     D was being shaved. Nothing needs clipping once it is fixed. */
  overflow:visible;
}
.hero-mark.is-flying span{display:block}
/* once it has landed it is the site header: a link home */
.hero-mark a{color:inherit; text-decoration:none; display:block;
  transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.hero-mark.is-header a{cursor:pointer}
.hero-mark.is-header a:hover,.hero-mark.is-header a:focus-visible{opacity:.55}
.hero-mark:not(.is-header) a{pointer-events:none}

/* ---- THE WORDMARK SHRINKS AND LOCKS TOP-LEFT ---------------------
   It is taken out of flow and fixed at the exact spot it lands in the
   hero, then translated and scaled on scroll progress. .hero-block
   keeps its measured height so nothing below it moves. */
.hero-mark.is-flying{
  position:fixed; margin:0; transform-origin:0 0;
  will-change:transform; z-index:55;
  /* base.css puts overflow-x:clip on the wordmark. With -6.3px letter
     spacing the last glyph's INK reaches past the element's width, so the
     D was being shaved. Nothing needs clipping once it is fixed. */
  overflow:visible;
}
.hero-mark.is-flying span{display:block}
/* once it has landed it is the site header: a link home */
.hero-mark a{color:inherit; text-decoration:none; display:block;
  transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.hero-mark.is-header a{cursor:pointer}
.hero-mark.is-header a:hover,.hero-mark.is-header a:focus-visible{opacity:.55}
.hero-mark:not(.is-header) a{pointer-events:none}

/* ---- THE HEADER'S TWO LINES --------------------------------------
   They belong to the locked wordmark, not to the hero: the hero's own
   pair scrolls away untouched. These type themselves in once the mark
   has landed, and clear when it grows back. */
.mark-sub{
  position:fixed; z-index:60; display:flex; flex-direction:row;
  align-items:center; gap:clamp(16px,2vw,34px);
  transform:translateY(-50%);            /* centred on the wordmark's line */
  opacity:0; pointer-events:none; transition:opacity .25s cubic-bezier(.23,1,.32,1);
}
.mark-sub.is-on{opacity:1; pointer-events:auto}
.mark-sub a{
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.mark-sub a:hover,.mark-sub a:focus-visible{color:var(--redx)}
.mark-sub a::after{content:'\00a0'}          /* holds the measure while empty */

.mark-sub .caret{opacity:.9}
@media (max-width:768px){ .mark-sub{display:none} }

/* The + turns a full revolution the first time it is pointed at.
   base.css drives its states with the `rotate` property (90 on hover,
   45 when open); this uses a keyframed `transform` instead, which is a
   separate property, so the two compose and the open/close states are
   left intact. The class is dropped on animationend. */
@keyframes plus-spin{ 0%{transform:rotate(0)} 60%{transform:rotate(100deg)} 100%{transform:rotate(90deg)} }
.edge-toggle.spun i{animation:plus-spin .45s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){ .edge-toggle.spun i{animation:none} }


/* ---- THE TWO PATHS ------------------------------------------------
   Replaces the roll call of names. One column each for the two things
   the site is for, split by a hairline. */
.paths{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);
  padding:clamp(50px,9vh,110px) clamp(20px,4vw,70px) clamp(40px,7vh,90px);
  border-top:1px solid var(--rule);
  position:relative; z-index:1;
}
.path{display:flex; flex-direction:column; align-items:flex-start}
.path:last-child{border-left:1px solid var(--rule); padding-left:clamp(24px,4vw,64px)}
.path-k{
  margin:0 0 1.6rem; font-size:1.1rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft);
}
.path-h{font-weight:800; margin:0 0 1.4rem; font-family:var(--face);
  font-size:clamp(2.4rem,4vw,4.6rem); line-height:.95; letter-spacing:-0.02em;
  
}
.path-p{margin:0 0 2.6rem; font-size:1.55rem; line-height:1.5; max-width:38ch}
.path-steps{list-style:none; margin:0 0 2.6rem; padding:0; width:100%; max-width:44ch}
.path-steps li{
  display:flex; gap:1.4rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid var(--rule);
  font-size:1.4rem; line-height:1.45;
}
.path-steps li span{
  flex:none; font-variant-numeric:tabular-nums; color:var(--soft);
  font-size:1.1rem; letter-spacing:.14em;
}
.path-go{
  font-size:1.2rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink); border-bottom:1px solid var(--ink);
  padding-bottom:.4rem; transition:color .3s cubic-bezier(.23,1,.32,1),
  border-color .3s cubic-bezier(.23,1,.32,1);
}
.path-go:hover,.path-go:focus-visible{color:var(--redx); border-color:var(--redx)}
@media (max-width:820px){
  .paths{grid-template-columns:1fr; gap:44px}
  .path:last-child{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:40px}
}

/* the last campaign gives up its trailing space so the page numbers sit
   with the wall rather than floating between the wall and what follows */
.wall .band:last-of-type{margin-bottom:clamp(18px,2.4vh,34px) !important}

/* ---- THE MONEY, READABLE AT REST --------------------------------
   The figure sat on --rule (#B5B5B5), which is a hairline colour, not a
   text colour — at 2.5:1 on white it was effectively invisible until the
   campaign went live. It now rests on a dark grey and still steps to red
   when the campaign is the live one. */
.band .fig-sum{color:#4F4F4F !important}
.band.is-live .fig-sum,.band:focus-within .fig-sum{color:var(--ink) !important}
.band .fig-goal{color:#626262 !important}
.band .fig-meta{color:#707070 !important}

/* ---- SEE MORE ARTISTS ---------------------------------------------
   Replaces the numbered pages. More campaigns are appended under the wall
   in place; nothing scrolls you back to the top. */
.pages ul[hidden]{display:none}
/* .more itself is a shared component and moved to base.css on 9 Sept 2026,
   so the campaigns page could use the same control instead of keeping
   numbered pages. All that is left here is where it sits on THIS page:
   centred across the wall's own grid. */
.more{grid-column:1 / -1; justify-self:center}

/* ---- SUPPORT, UNDER THE MONEY ------------------------------------
   base.css hid .band-donate and parked it in the empty left column.
   It is brought back and moved into .band-fig, so it sits under the
   figures. It is a <button> inside the band's <a> on purpose — a nested
   <a> would be split apart by the parser — and site.js already stops its
   click reaching the band link. */
.band .band-donate{
  display:inline-block !important;
  grid-column:auto !important; grid-row:auto !important;
  justify-self:start !important; align-self:auto !important;
  margin:1.6rem 0 0 !important;
  border:1px solid var(--ink) !important; background:transparent !important;
  padding:.95rem 1.8rem !important;
  font-size:1.15rem !important; letter-spacing:.16em !important;
  text-transform:uppercase; font-weight:700;
  color:var(--ink) !important; cursor:pointer;
  transition:background-color .28s cubic-bezier(.23,1,.32,1),
             color .28s cubic-bezier(.23,1,.32,1) !important;
}
.band .band-donate:hover,.band .band-donate:focus-visible{
  background:var(--ink) !important; color:var(--ground) !important;
}


/* ---- THE INTRO ---------------------------------------------------
   The odometer, its progress rule and the "names on the list" label are
   gone, and so is the FLIP handover that flew the wordmark into the page.
   The name types itself, the line sits under it the whole time, it holds,
   then the whole screen fades once. Nothing else.
   The markup id is #mnfintro, so site.js's own intro routine finds no
   #intro and returns early rather than running the old sequence. */
.intro{gap:clamp(14px,2vh,26px); cursor:default}
.intro-word{
  position:static !important; inset:auto !important; opacity:1 !important;
  transform:none !important; transition:none !important;
}
.intro-word span{min-height:1em}
.intro-say{
  position:static !important; transform:none !important;
  margin:0; width:min(88vw,52ch); text-align:center;
  font-size:clamp(1.3rem,1.5vw,1.65rem); line-height:1.5; color:#4E4E4E;
  opacity:1 !important;
}
.intro.is-done{opacity:0; pointer-events:none; transition:opacity 500ms ease}
@media (prefers-reduced-motion:reduce){ .intro.is-done{transition:none} }



/* ---- THE PUSH, MADE SMOOTH ----------------------------------------
   The push itself is base.css's and stays. These only remove what made
   it stutter.

   Nothing about how it LOOKS is touched — the hero lines still wrap and
   the artwork keeps its size. These only cut the cost of the animation:
   each campaign is layout-isolated so a reflow stays inside one band
   instead of cascading through all twelve, and horizontal overflow is
   clipped so the scrollbar stops appearing and disappearing mid-push. */
.band{contain:layout paint}
html,body{overflow-x:clip}

/* the footer breaks out with 100vw and negative side margins; once the
   shell is pushed that maths no longer lines up and it stuck 290px past
   the window, widening the document mid-animation. It gives up the bleed
   while the panel is open and takes it back on close. */
body.menu-open .foot{
  width:auto !important; margin-left:0 !important; margin-right:0 !important;
}

/* ---- WHAT THE PUSH DOES TO THE TWO ROWS --------------------------
   These used to be capped at 9ch while the panel was open, to stop them
   snapping onto two lines at the very end of the travel. That cure was
   worse than the complaint: both lines wrapped for the whole animation
   and the pair arrived as four stacked lines under a clipped wordmark.

   The cap is gone because the cause is: the wordmark now scales with
   its column (v4.js), so the pair — which is set to the wordmark's own
   width — arrives at a measure the two lines already fit on. They only
   travel, which is what was wanted in the first place.

   --menu-drop is written by the same function that scales the mark. It
   is the distance the mark settles as it shrinks against its baseline,
   and applying it here keeps the pair on the wordmark rather than
   letting the two come apart mid-animation. */
.hero-pair{transition:transform var(--macro)}
body.menu-open .hero-pair{transform:translateY(var(--menu-drop, 0px))}

/* AND THE REASON THEY WRAPPED IS THE TRACKS, not the measure. The pair is
   three equal columns with a line in the second and the third, so each
   line gets a third of the row: 350px with the panel shut, 203px with it
   open — and "start a campaign" needs 230px. Capping the text was
   treating the symptom.

   While the panel is open the empty first track gives up its share and
   the two lines take their natural width. They keep the same relationship
   to the wordmark's right edge that they have with the panel shut. */
body.menu-open .hero-pair-in{
  grid-template-columns:minmax(0,1fr) auto auto;
  column-gap:clamp(20px,3vw,52px);
  /* with the panel shut the last line is centred in a track wider than
     itself, so it carries about 48px of slack before the page edge. On
     auto tracks that slack disappears and the line sat flush against the
     margin. This is the same inset, taken down by the amount everything
     else in the block is taken down. */
  padding-right:clamp(16px,2vw,32px);
}

/* BELOW ~1100 THE COLUMN IS TOO NARROW FOR TWO LINES SIDE BY SIDE. The
   panel is a fixed 52rem, so the narrower the window the more of it the
   panel owns, and at 900px the page is left with 280px. Rather than let
   the phrases break in the middle, they stack — right-aligned, nowrap, so
   each stays one line and the pair still reads as a pair. */
@media (max-width:1100px){
  body.menu-open .hero-pair-in{
    grid-template-columns:minmax(0,1fr);
    row-gap:0.35em;
  }
  body.menu-open .hero-line{white-space:nowrap; justify-self:end}
  body.menu-open .hero-line:nth-of-type(1){grid-column:1; grid-row:1}
  body.menu-open .hero-line:nth-of-type(2){grid-column:1; grid-row:2}
}

/* The mark cannot carry a transition of its own — v4.js writes its
   transform on every scroll frame, and a permanent 750ms ease would make
   the page feel like it was dragging behind the scrollbar. It borrows one
   only while the panel is travelling, on the panel's own curve and
   duration, so the two are in step. */
.hero-mark.is-menuing{transition:transform var(--macro)}
@media (prefers-reduced-motion:reduce){
  .hero-pair,.hero-mark.is-menuing{transition:none}
}

/* ---- ROOM FOR THE FIGURES ----------------------------------------
   The artwork keeps its size. What gives is the left column: it only
   carries the vertical discipline, and there is no room for it once the
   page is pushed. It yields its width to the money so the figures and
   Support stay on screen at full size. */
body.menu-open .band{
  grid-template-columns:0 auto minmax(0,1fr) !important;
  column-gap:clamp(14px,1.6vw,26px) !important;
}
body.menu-open .band .band-side{visibility:hidden}
body.menu-open .band-fig{padding-left:clamp(14px,1.6vw,26px) !important}

/* the list closed with a rule under its last row on top of that row's own
   separator, which read as a doubled line at the foot of the panel */
.panel-big > ul{border-bottom:0 !important}

/* ---- THE RULE BESIDE THE WORK ------------------------------------
   base.css drew a hairline in the band's empty column and v4 hid it when
   the campaign was centred. It is back, in column one, stretched to the
   artwork's own row so it is exactly the height of the photograph — no
   element measures the image, the grid row does. */
.band::before{
  display:block !important;
  content:"";
  grid-column:1; grid-row:1;
  justify-self:end; align-self:stretch;
  width:1px; background:var(--rule);
  margin-right:calc(24px - var(--bay));
}
.band.is-live::before,.band:focus-within::before{background:var(--ink)}
.band::before{transition:background-color var(--macro)}

/* red is the site's signal, so it is what a panel row does under the pointer */
.panel-big .big:hover,.panel-big .big:focus-visible{opacity:1; color:var(--redx)}
.panel-big .big:hover i::before,.panel-big .big:hover i::after{background:var(--redx)}

/* ---- CAMPAIGN MEDIA ----------------------------------------------
   A campaign is a photograph, a video, or a photograph WITH sound. The
   photograph is always there — it is the poster for a video and the
   required still for an audio piece — so the wall looks identical at
   rest whatever the medium. Point at one and its media plays from the
   start and loops; leave and it stops and rewinds. */
/* The video replaces the still outright — no fade, no border, no change
   of size. The campaign looks identical; the picture simply moves. */
.band .art video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:none; border:0; background:transparent;
}
.band.is-live .art video{display:block}
.band .art{position:relative}

/* the mark that says a campaign carries more than a picture */
/* the mark: the right-hand column, in the row BELOW the campaign, so it
   sits under the work rather than beside it */
/* the mark sits on the name's line, at the far edge of the work — the
   artist's name at the artwork's left, the medium at its right */
.media-tag{
  grid-column:2; grid-row:2;
  align-self:start; justify-self:end;
  margin:0; padding:0;
  color:var(--ink); line-height:0;
}
.media-tag svg{width:34px; height:34px; overflow:visible; display:block}

/* the speaker counts its waves up while the track runs: none, one, two,
   three, and round again */
.media-tag .w1,.media-tag .w2,.media-tag .w3{opacity:1}
.media-tag.is-playing .w1{animation:mnf-w1 1.4s steps(1,end) infinite}
.media-tag.is-playing .w2{animation:mnf-w2 1.4s steps(1,end) infinite}
.media-tag.is-playing .w3{animation:mnf-w3 1.4s steps(1,end) infinite}
@keyframes mnf-w1{0%{opacity:0} 25%,100%{opacity:1}}
@keyframes mnf-w2{0%,25%{opacity:0} 50%,100%{opacity:1}}
@keyframes mnf-w3{0%,50%{opacity:0} 75%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .media-tag.is-playing .w1,.media-tag.is-playing .w2,.media-tag.is-playing .w3{animation:none}
}