/* ============================================================
   v4 — CENTRED, IN A BAY.  Additive over base.css + v3.css.
   The campaign sits in the middle of a ruled bay; its own data
   fills the margins that were empty. No frame: the work stands
   out by scale and by a real lift off the paper.
   NOTE: v3.css clip-paths .art for the entry wipe, so nothing
   drawn outside .art renders — shadows go on .band::after.
   ============================================================ */

:root{ --art-w-c:min(46vw, 620px); --bay:3.4rem; }

/* ---------- the bay: two rules running the whole wall ---------- */


/* ---------- the campaign, centred, with both margins working ---------- */
.band{
  grid-template-columns:1fr auto 1fr;
  grid-template-rows:auto auto;
  transform:none; position:relative;
  align-items:start;
  margin-top:var(--band-space, 11rem);
  column-gap:var(--bay);
}
.band::before{display:none}
.band .band-donate{display:none}
.band .niche::after{display:none}

.band .art{grid-column:2; grid-row:1; width:var(--art-w-c); margin:0; z-index:2;
  background:transparent}
.band .band-text{grid-column:2; grid-row:2; width:var(--art-w-c); margin:1.6rem 0 0}

/* THE LIFT — the work raised off the paper. On .band::after, sized to the
   artwork, sitting behind it, because .art itself is clipped. */
.band::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:0; transform:translateX(-50%);
  width:var(--art-w-c); height:calc(var(--art-w-c) * 0.75);
  display:none;
}

/* ---------- the left margin: where you are in the register ---------- */
.band .band-side{
  grid-column:1; grid-row:1; margin:0;
  justify-self:end; align-self:start; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:.7rem;
  padding-right:var(--bay); max-width:none;
}
.reg-tick{display:none}
.reg-disc{
  writing-mode:vertical-rl;
  font-size:1.05rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--soft); transition:color var(--macro);
}
.band.is-live .reg-disc{color:var(--ink)}

/* ---------- the right margin: the money, set as marginalia ---------- */
.band-fig{
  grid-column:3; grid-row:1; align-self:start;
  padding-left:var(--bay); max-width:26ch;
}
/* THE MONEY — one figure, at a size that carries the column, with its
   context set small beneath it. The scale contrast IS the design: a
   number and a footnote, not three lines of similar weight. No rules,
   no labels. */
.fig-sum{font-weight:700; margin:0; font-family:var(--face);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(1.9rem,2.2vw,2.7rem); line-height:1; letter-spacing:-0.02em;
  
  color:var(--rule); transition:color var(--macro);
}
.band.is-live .fig-sum,.band:focus-within .fig-sum{color:var(--ink)}
.fig-goal{
  margin:.7rem 0 0; font-size:1.5rem; line-height:1.35; color:var(--soft);
  font-variant-numeric:tabular-nums lining-nums;
}
.fig-meta{
  margin:1.4rem 0 0; font-size:1.15rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft);
  font-variant-numeric:tabular-nums lining-nums;
}



/* the furniture follows the work in */
.sort-row,.pages{display:flex; justify-content:center}
.pages ul{justify-content:center}

@media (max-width:1100px){
  :root{--art-w-c:min(62vw,560px); --bay:1.8rem}
  .reg-disc{display:none}
}
@media (max-width:768px){
  .wall{background-image:none}
  .band{grid-template-columns:1fr}
  .band .art,.band .band-text{grid-column:1; width:100%}
  .band .band-side{grid-column:1; grid-row:3; flex-direction:row; align-items:baseline;
    justify-self:start; text-align:left; padding:0; gap:1rem; margin-top:1.4rem}
  .band-fig{grid-column:1; grid-row:4; padding:0; margin-top:1rem; max-width:none}
  .band::after{width:100%}
}

/* ============================================================
   THE CAMPAIGN VIEW — click a work and it opens full screen.
   The photograph is FIXED behind everything; the campaign's own
   pages scroll up over it on a panel of paper. Opens on click,
   closes on Esc or the close control, and writes a hash so a
   campaign can be linked to.
   ============================================================ */
.stage{
  position:fixed; inset:0; z-index:120; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity 460ms cubic-bezier(.23,1,.32,1), visibility 0s linear 460ms;
}
.stage.is-on{opacity:1; visibility:visible; transition-delay:0s}
html.stage-open{overflow:hidden}

.stage-img{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform 1600ms cubic-bezier(.23,1,.32,1);
}
.stage.is-on .stage-img{transform:scale(1)}
.stage-scrim{
  position:fixed; inset:0;
  background:linear-gradient(to right,
    rgba(242,242,242,.96) 0%, rgba(242,242,242,.86) 40%,
    rgba(242,242,242,.24) 76%, rgba(242,242,242,.10) 100%);
}
.stage-close{
  position:fixed; top:2rem; right:2.4rem; z-index:3;
  border:0; background:transparent; cursor:pointer; color:var(--ink);
  font-size:1.1rem; letter-spacing:.2em; text-transform:uppercase;
}
.stage-scroll{position:relative; z-index:2}

/* first screen: the work, and who it is */
.stage-hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(3rem,7vw,10rem); max-width:min(52vw,720px);
}
.stage-k{margin:0 0 1.2rem; font-size:1.1rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft)}
.stage-given{margin:0; font-size:clamp(1.4rem,1.8vw,2rem); color:var(--soft)}
.stage-name{font-weight:700; margin:.2rem 0 1.6rem; font-family:var(--face);
  font-size:clamp(3rem,6.4vw,8rem); line-height:.88; letter-spacing:-0.02em;
   color:var(--ink);
}
.stage-note{margin:0 0 2rem; font-size:clamp(1.5rem,1.8vw,2.1rem);
  line-height:1.36; max-width:34ch}
.stage-scrolltip{margin-top:3rem; font-size:1.05rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft)}

/* the paper panel that carries the campaign's pages up over the work */
.stage-panel{background:var(--ground); border-top:1px solid var(--rule);
  padding:clamp(4rem,8vh,8rem) clamp(3rem,7vw,10rem) 10rem}
.stage-grid{display:grid; grid-template-columns:1fr minmax(280px,340px);
  gap:clamp(3rem,6vw,7rem); align-items:start; max-width:1200px}
.stage-sec{border-top:1px solid var(--rule); padding:2.6rem 0 0; margin-top:3.4rem}
.stage-sec:first-child{border-top:0; margin-top:0; padding-top:0}
.stage-h{margin:0 0 1.6rem; font-size:1.1rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft)}
.stage-p{margin:0 0 1.2rem; font-size:1.55rem; line-height:1.5; max-width:60ch}

.upd{border-top:1px solid var(--rule); padding:1.6rem 0}
.upd:first-of-type{border-top:0; padding-top:0}
.upd-d{font-size:1.05rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.upd-t{font-weight:600; margin:.5rem 0 .5rem; font-size:1.8rem; }
.upd p{margin:0; font-size:1.45rem; line-height:1.5; max-width:60ch; color:var(--soft)}

.cmt{border-top:1px solid var(--rule); padding:1.6rem 0; display:flex; gap:1.6rem}
.cmt:first-of-type{border-top:0; padding-top:0}
.cmt-who{min-width:14ch; font-size:1.15rem; letter-spacing:.06em}
.cmt-who span{display:block; color:var(--soft); font-size:1.05rem; letter-spacing:.16em;
  text-transform:uppercase; margin-top:.3rem}
.cmt p{margin:0; font-size:1.45rem; line-height:1.5; color:var(--soft)}

/* the money rail, sticky beside the reading */
.stage-rail{position:sticky; top:3rem}
.stage-sum{font-weight:700; font-family:var(--face); font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,3vw,3.4rem); line-height:1; letter-spacing:-0.02em;
  }
.stage-of{margin:.5rem 0 1.4rem; font-size:1.1rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft)}
.btn-back{display:block; width:100%; text-align:center; padding:1.4rem;
  background:var(--ink); color:var(--ground); border:0; cursor:pointer;
  font-size:1.15rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.8rem}
.btn-share{display:block; width:100%; text-align:center; padding:1.4rem;
  background:transparent; color:var(--ink); border:1px solid var(--ink); cursor:pointer;
  font-size:1.15rem; letter-spacing:.2em; text-transform:uppercase}
.stage-terms{margin-top:2rem; font-size:1.05rem; line-height:1.6; color:var(--soft)}

@media (max-width:900px){
  .stage-hero{max-width:none; padding:0 2rem}
  .stage-scrim{background:linear-gradient(to top,
    rgba(242,242,242,.97) 34%, rgba(242,242,242,.7) 72%, rgba(242,242,242,.35) 100%)}
  .stage-panel{padding:4rem 2rem 8rem}
  .stage-grid{grid-template-columns:1fr}
  .stage-rail{position:static}
}
@media (prefers-reduced-motion:reduce){
  .stage,.stage-img{transition-duration:1ms} .stage-img{transform:none}
}

/* ---- THE SHARED PHOTOGRAPHS -----------------------------------
   The work itself stays full-bleed behind everything. Beside the
   writing sits a smaller window carrying the extra photographs the
   artist wants to share: arrows to step through, click to enlarge. */
.stage-hero{
  display:grid; max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(3rem,6vw,7rem); align-items:center;
  padding:8rem clamp(3rem,7vw,10rem) 6rem;
}
.stage-hero > .hero-col{max-width:46ch}
.stage-scrim{
  background:linear-gradient(to right,
    rgba(242,242,242,.97) 0%, rgba(242,242,242,.92) 46%,
    rgba(242,242,242,.70) 72%, rgba(242,242,242,.52) 100%);
}
.gal-win{position:relative; aspect-ratio:4/3; overflow:hidden; cursor:zoom-in}
.gal-win img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 460ms cubic-bezier(.23,1,.32,1)}
.gal-win img.is-on{opacity:1}
.gal-bar{display:flex; align-items:center; gap:1.4rem; margin-top:1rem;
  border-top:1px solid var(--rule); padding-top:.9rem}
.gal-btn{border:0; background:transparent; cursor:pointer; color:var(--ink);
  font-size:1.4rem; line-height:1; padding:.2rem .5rem}
.gal-btn:hover{color:var(--soft)}
.gal-n{font-size:1.05rem; letter-spacing:.18em; color:var(--soft);
  font-variant-numeric:tabular-nums}
.gal-cap{margin-left:auto; font-size:1.05rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft)}

/* the lightbox */
.lb{position:fixed; inset:0; z-index:160; background:rgba(242,242,242,.98);
  display:flex; align-items:center; justify-content:center; padding:5rem;
  opacity:0; visibility:hidden; cursor:zoom-out;
  transition:opacity 340ms cubic-bezier(.23,1,.32,1), visibility 0s linear 340ms}
.lb.is-on{opacity:1; visibility:visible; transition-delay:0s}
.lb img{max-width:100%; max-height:100%; object-fit:contain}
.lb-x{position:fixed; top:2rem; right:2.4rem; border:0; background:transparent;
  cursor:pointer; font-size:1.1rem; letter-spacing:.2em; text-transform:uppercase}
.lb-nav{position:fixed; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; gap:1.8rem; align-items:center; font-size:1.05rem;
  letter-spacing:.18em; color:var(--soft)}

@media (max-width:900px){
  .stage-hero{grid-template-columns:1fr; padding:7rem 2rem 4rem; gap:2.4rem}
  .stage-scrim{background:linear-gradient(to top,
    rgba(242,242,242,.97) 34%, rgba(242,242,242,.78) 74%, rgba(242,242,242,.5) 100%)}
  .lb{padding:2rem}
}