/* ============================================================
   THE CAMPAIGN PAGE — one artist, one ask.

   Built 11 September 2026 in the world the rest of the site now lives in:
   the theme's ground, GT America Extended in heavy capitals for names,
   rounded cards at 15%, pill buttons, and All campaigns' card stack as the
   photo viewer. See docs/superpowers/specs/2026-09-11-campaign-page-design.md.

   WHAT THIS FILE DOES NOT DO: the viewer. That is grid.css, loaded on this
   page as it is on All campaigns, so the two stacks are one set of rules.
   The only viewer lines here are the two things this page needs and
   All campaigns does not — a ground behind the stack (there is no plane
   under it to hide) and the ordinary cursor (there is no custom one).
   ============================================================ */

:root{
  /* THE VIEWER'S CARD, bigger than the cover (client, 11 September 2026):
     opening a picture has to make it larger than it already was on the
     page, or the tap has done nothing. All campaigns uses min(65vw, 40vh);
     here it takes most of the screen's shorter side, leaving room under
     it for the caption and Back. */
  --card:min(88vw, calc(100svh - 27rem), 72rem);
  /* the cover: the page's one big picture */
  --cover:min(84vw, 50vh, 56rem);
  /* the landing page's pill hover, leo.css's --leo-purple — the one colour
     the buttons carry, so a pill here answers the pointer as one there does */
  --cp-accent:#6E60EE;
  --cp-pill-ground:color-mix(in srgb, var(--ink) 13%, var(--ground));
}

.cp-page{background:var(--ground); color:var(--ink)}
.cp-page ::selection{background:var(--ink); color:var(--ground)}
html.is-viewing{overflow:hidden}
/* no rubber-banding and no swipe-to-go-back-a-page while the viewer is up:
   a sideways swipe there is for the pictures */
html.is-viewing,html.is-viewing body{overscroll-behavior:none}

/* The cards behind the cover wait to its right and a seen one leaves to
   the left, and both can pass the window's edge. clip, not hidden: it stops
   them widening the page into a sideways scroll without turning .cp into a
   scroll box of its own. */
.cp{padding:0 var(--s4); overflow-x:clip}

/* ---------------- THE TOP: cover, name, ask ---------------- */
.cp-top{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:var(--s4);
}

/* THE COVER — a small stack. Its cards are painted by the same paintCard()
   as the viewer (campaign.js), so the cards behind wait to the right at the
   stack's own scales and veils, and a swipe sends the front one out left.
   isolation keeps their z-indexes inside the cover instead of competing
   with the rest of the page. pan-y hands vertical gestures to the browser,
   so the page still scrolls from a thumb on the photo. */
.cp-cover{
  position:relative; display:block; flex:none; isolation:isolate;
  width:var(--cover); height:var(--cover);
  margin:var(--s4) 0 0; padding:0; border:0;
  background:none; color:inherit; cursor:zoom-in;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.cp-cover.is-dragging{cursor:grabbing}
.cp-cover:focus-visible{outline:none}
.cp-cover:focus-visible .cp-card.is-front .cp-card_in{outline:2px solid var(--ink); outline-offset:6px}
.cp-deck{position:absolute; inset:0; display:block}
.cp-card{position:absolute; inset:0; display:block; will-change:transform, opacity}
.cp-card_in{
  position:relative; display:block; width:100%; height:100%;
  border-radius:15%; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
.cp-card img,.cp-card video{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
  transition:transform var(--speed-slow) var(--power3-out);
}
.cp-cover:hover .cp-card.is-front img,.cp-cover:hover .cp-card.is-front video{transform:scale(1.03)}
.cp-cover.is-dragging .cp-card img{transform:none}
.cp-card_veil{position:absolute; inset:0; background:var(--ground); opacity:0; pointer-events:none}

/* the count, on the picture: where you are, of how many. Top right,
   opposite the Video / Sound label, so the bottom of a card belongs to
   what is on it — a sound's title and time sit there. */
.cp-count{
  position:absolute; z-index:200; right:8%; top:8%; pointer-events:none;
  padding:.8rem 1.2rem; border-radius:999px;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  color:var(--ink); font-family:var(--face-data); font-size:1.1rem;
  letter-spacing:.16em; font-variant-numeric:tabular-nums; line-height:1;
}
.cp-count:empty{display:none}

/* THE HEADING IS THE ARTIST'S PROFILE — the round mark, and beside it the
   name with the niche and the country under it, as one unit centred under
   the photograph. It is the "who is asking" pill from further down the
   page, promoted: the name poster-size here and again in the pill said the
   same thing twice, and the pill is the version that says it is a person. */
.cp-id{
  display:flex; align-items:center; gap:1.5rem;
  margin-top:2.6rem; max-width:100%; text-align:left;
  padding:.6rem 2.2rem .6rem .6rem; border-radius:999px;
  color:inherit; text-decoration:none;
  transition:background var(--speed) var(--easing);
}
/* it is the way to the artist's profile, and under a pointer it says so the
   way the old "who is asking" pill did: the pill's ground comes up behind it */
/* THE PILL IS THE LINK. The <a> stretches over the whole pill so the avatar,
   the name and the space between them all open the profile, and Follow is
   lifted above it — the same arrangement .pf-card uses for its cards. */
.cp-id{position:relative; isolation:isolate}
.cp-id_go{
  display:flex; align-items:center; gap:1.5rem; min-width:0;
  color:inherit; text-decoration:none;
}
.cp-id_go::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
.cp-id_go:focus-visible{outline:none}
.cp-id:has(.cp-id_go:focus-visible){outline:2px solid var(--ink); outline-offset:3px}

/* FOLLOW. It waits inside the pill and comes out when you go near it —
   hovering the pill, or tabbing into it. Once you follow, it stays out:
   the state is worth seeing without hunting for it, and it is the control
   that undoes itself. It sits above the stretched link on z-index 2. */
.cp-follow{
  position:relative; z-index:2; flex:0 0 auto; margin-left:auto;
  opacity:0; transform:translateX(-.4rem); pointer-events:none;
  transition:opacity var(--speed) var(--easing), transform var(--speed) var(--easing);
}
.cp-id:hover .cp-follow,
.cp-id:focus-within .cp-follow,
.cp-follow.is-on,
.cp-follow:focus-visible{opacity:1; transform:none; pointer-events:auto}

/* A FINGER HAS NO HOVER. On a touch screen the button is simply there. */
@media (hover:none){
  .cp-follow{opacity:1; transform:none; pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .cp-follow{transition:none}
}
.cp-avatar{
  flex:none; width:5.2rem; height:5.2rem; border-radius:50%; overflow:hidden;
  display:block; background:color-mix(in srgb, var(--ink) 10%, var(--ground));
}
.cp-avatar img{display:block; width:100%; height:100%; object-fit:cover}
/* no picture added: the figure, in two greys of the page's own ink */
.cp-avatar--none{color:color-mix(in srgb, var(--ink) 30%, var(--ground))}
.cp-avatar svg{display:block; width:100%; height:100%; fill:currentColor}
.cp-id_t{min-width:0}
.cp-name{
  margin:0; font-family:var(--face-ui); font-weight:600;
  font-size:2rem; line-height:1.15; letter-spacing:-0.005em; text-wrap:balance;
}
/* niche and country, under the name */
.cp-tags{
  margin:.4rem 0 0;
  font-family:var(--face-ui); font-size:1.2rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);
}
.cp-note{
  margin:1.8rem 0 0; max-width:46ch;
  font-family:var(--face-ui); font-size:1.6rem; line-height:1.45; color:var(--soft);
  text-wrap:pretty;
}
.cp-meta{
  margin:.8rem 0 0; max-width:46ch; text-wrap:balance;
  font-family:var(--face-ui); font-size:1.15rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);
}
/* how far and how long — "22% funded · 14 days left · Ends …" — the
   figures in ink, as the ask's facts were */
.cp-meta b{font-weight:400; color:var(--ink); font-variant-numeric:tabular-nums}
.cp-meta span{display:block}
.cp-meta span + span{margin-top:.5rem}

/* THE ASK */
.cp-sum{
  margin:0; display:flex; align-items:baseline; justify-content:center; gap:1rem;
  font-family:var(--face-data); font-variant-numeric:tabular-nums;
}
/* THE GOAL LEADS. It is the figure the page is asking for, so it is the
   large one, in ink; what has come in so far sits before it, small and
   soft: "€1,750 of €2,400". */
.cp-sum b{font-weight:400; font-size:clamp(3.2rem, 4.2vw, 4.6rem); line-height:.9;
  letter-spacing:-0.02em; color:var(--ink)}
.cp-sum_got{font-size:1.3rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
/* the comma of a sum in the monospaced face, closed up to a comma's width */
.cp-sep{margin:0 -.2em}
/* a hairline partly inked, not a pill — the site's progress bar */
/* the sum sits down on its own line — nearer the hairline it measures
   than the date above it */
.cp-bar{height:1px; margin:1.3rem 0 var(--s3); background:var(--rule); overflow:hidden}
.cp-bar i{display:block; height:100%; width:0; background:var(--ink);
  transition:width 1.2s var(--power3-out)}
.cp-facts{
  margin:0; font-family:var(--face-data); font-size:1.15rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); font-variant-numeric:tabular-nums;
}
.cp-facts b{font-weight:400; color:var(--ink)}
/* the line under the buttons: space reserved, so nothing below it moves
   when it says something */
.cp-say{
  margin:1.2rem 0 0; min-height:1.8rem;
  font-family:var(--face-ui); font-size:1.3rem; color:var(--soft);
}

/* THE PILLS — the landing page's two buttons, value for value (leo.css
   .leo-btn). Filled is ink on ground; drawn is ground with an ink hairline;
   both take the one accent on hover. */
.cp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.5rem 2.4rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500;
  line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing),
             border-color var(--speed) var(--easing), transform var(--micro);
}
.cp-btn:active{transform:scale(.96)}
.cp-btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.cp-btn--fill{background:var(--ink); color:var(--ground)}
.cp-btn--fill:hover,.cp-btn--fill:focus-visible{background:var(--cp-accent); color:#fff}
.cp-btn--line{background:transparent; color:var(--ink);
  border-color:color-mix(in srgb, var(--ink) 45%, transparent)}
.cp-btn--line:hover,.cp-btn--line:focus-visible{border-color:var(--cp-accent); color:var(--ink)}
.cp-btn--sm{padding:1.15rem 1.8rem; font-size:1.4rem}

/* ---------------- THE LOWER PAGE ----------------
   Twelve columns across a wider measure than the top, so the three kinds
   of text can sit in different places instead of queuing down one strip.
   Every section opens on a hairline and a label, as the rest of the site's
   sections do; what is under the label is set to suit what it is. */
.cp-read{
  max-width:124rem; margin:var(--s6) auto 0;
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--s3); row-gap:var(--s3);
}
/* EACH SECTION IS A PANEL (client, 11 September 2026: "everything looks
   like one thing, when it's different sections"). A hairline and a label
   over each made three sections read as one run of text. Now each is a
   surface of its own — lifted a step off the page's ground, rounded like
   the site's cards — so the eye takes them as three things; and all three
   share the one tone, radius and inset, set close together as a group, so
   they still read as one page. What is inside each (a spread, a
   conversation, a log) was already different; the panels let that show. */
/* NO PANEL FILL — see the note on .lp-panel in leo.css. The campaign's
   story, updates and comments sections are read down the page now, not
   picked out of three grey cards. Vertical padding kept as the rhythm
   between them; the headings and the hairline rows carry the structure. */
.cp-sec{
  grid-column:1 / -1; min-width:0; margin:0;
  padding:clamp(2.2rem, 3vw, 3.6rem) 0;
}
/* THE SECTION HEADS are the headers of the lower page — "About the
   campaign", "Updates", "Comments" — in white and a step up from a label,
   so what sits under each reads as its content, not the other way round. */
.cp-h{
  margin:0 0 var(--s4);
  font-family:var(--face-ui); font-weight:600; font-size:1.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.cp-h{display:flex; align-items:center; gap:1rem}
/* the count, as a small pill beside its header */
.cp-h em{
  font-style:normal; display:inline-grid; place-items:center;
  min-width:2.6rem; height:2.6rem; padding:0 .9rem; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 12%, var(--ground)); color:var(--ink);
  font-family:var(--face-data); font-size:1.2rem; font-weight:400; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

/* THE PROJECT — an editorial spread: the sentence large on the left, what
   the money covers and the facts in a ruled sheet on the right */
.cp-story{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--s4); row-gap:var(--s4)}
/* the campaign's own line, as reading text under its header */
.cp-lead{
  grid-column:1 / span 7; margin:0; max-width:42ch;
  font-family:var(--face-ui); font-weight:400;
  font-size:clamp(1.8rem, 1.9vw, 2.2rem); line-height:1.45; letter-spacing:0;
  text-wrap:pretty;
}
.cp-aside{grid-column:9 / -1; min-width:0}
.cp-text{
  margin:0; max-width:40ch;
  font-family:var(--face-ui); font-size:1.6rem; line-height:1.5;
  color:color-mix(in srgb, var(--ink) 82%, var(--ground));
}
.cp-sheet{margin:var(--s4) 0 0; border-top:1px solid var(--rule)}
.cp-sheet div{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
}
.cp-sheet dt{font-family:var(--face-ui); font-size:1.1rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft)}
.cp-sheet dd{margin:0; text-align:right; font-family:var(--face-data); font-size:1.3rem;
  letter-spacing:.04em; font-variant-numeric:tabular-nums}

/* UPDATES — a log on a timeline. One hairline down the left, a dot on it
   for every entry; the newest dot is inked, the older ones only drawn. */
.cp-upds{position:relative; padding-left:3rem}
.cp-upds::before{
  content:""; position:absolute; left:.5rem; top:.7rem; bottom:.7rem;
  width:1px; background:var(--rule);
}
.cp-upd{position:relative; padding:0 0 var(--s5)}
.cp-upd:last-child{padding-bottom:0}
.cp-upd::before{
  content:""; position:absolute; left:-3rem; top:.2rem;
  width:1.1rem; height:1.1rem; border-radius:50%; box-sizing:border-box;
  background:var(--ground); border:1px solid var(--ink);
}
.cp-upd:first-child::before{background:var(--ink)}
.cp-upd time{
  display:block; margin-bottom:.8rem;
  font-family:var(--face-data); font-size:1.1rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);
}
.cp-upd:first-child time{color:var(--ink)}
.cp-upd p{margin:0; max-width:46ch; font-family:var(--face-ui); font-size:1.6rem; line-height:1.5}

/* COMMENTS — a conversation. Round initials, rounded bubbles on the pill
   ground the dock and Back already use, the corner by the avatar kept
   tight so each bubble leans toward whoever said it. The artist's own
   replies are the site's one highlight, an inversion: ink bubble, ground
   type, stepped in under what they answer. */
.cp-thread{display:flex; flex-direction:column; gap:var(--s3)}
.cp-c{display:grid; grid-template-columns:4rem minmax(0, 1fr); column-gap:1.2rem; align-items:start}
.cp-av{
  width:4rem; height:4rem; border-radius:50%; box-sizing:border-box;
  display:grid; place-items:center;
  background:var(--cp-pill-ground); color:var(--ink);
  font-family:var(--face); font-weight:700; font-size:1.2rem; letter-spacing:.02em;
  text-transform:uppercase;
}
.cp-av--you,.cp-av--empty{background:none; border:1px dashed color-mix(in srgb, var(--ink) 35%, transparent)}
.cp-bub{
  justify-self:start; max-width:52ch; min-width:0;
  padding:1.3rem 1.8rem 1.5rem; border-radius:.6rem 2.2rem 2.2rem 2.2rem;
  background:var(--cp-pill-ground);
}
.cp-c_head{margin:0 0 .5rem; display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem 1rem}
.cp-c--mine .cp-bub{min-width:min(26rem, 100%)}
.cp-c_head b{font-family:var(--face-ui); font-weight:600; font-size:1.4rem}
.cp-c_head time{font-family:var(--face-data); font-size:1.05rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft)}
.cp-c_tag{
  font-family:var(--face-data); font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:99px; border:1px solid currentColor; line-height:1;
}
.cp-c_text{margin:0; font-family:var(--face-ui); font-size:1.55rem; line-height:1.45; overflow-wrap:anywhere}
.cp-c--artist{margin-left:5.2rem}
.cp-c--artist .cp-av,.cp-c--artist .cp-bub{background:var(--ink); color:var(--ground)}
.cp-c--artist .cp-c_head time{color:color-mix(in srgb, var(--ground) 62%, var(--ink))}
/* the empty thread: one bubble, drawn rather than filled — the shape of a
   comment with nothing in it yet */
.cp-c--empty .cp-bub{background:none; border:1px dashed color-mix(in srgb, var(--ink) 30%, transparent)}
.cp-c--empty b{display:block; font-family:var(--face); font-weight:700;
  
  font-size:1.5rem; letter-spacing:-0.01em; text-transform:uppercase}

/* THE COMPOSER — you, the comment, Post. No name to give until accounts.
   The field is a pill while it is one line and grows as the comment does. */
.cp-compose{
  display:grid; grid-template-columns:4rem minmax(0, 1fr) auto; column-gap:1.2rem;
  align-items:end; margin-top:var(--s4);
}
.cp-av--you{align-self:end; margin-bottom:.4rem; border:0; background:var(--cp-pill-ground); color:var(--soft)}
/* a person, not initials — there is no name behind it yet */
.cp-av svg{width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round}
.cp-av--user{color:var(--ink)}
.cp-compose_fields{display:flex; flex-direction:column; gap:.8rem; min-width:0}
.cp-field{
  min-width:0; height:4.8rem; padding:0 1.8rem; border-radius:99px;
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font-family:var(--face-ui); font-size:1.5rem;
  transition:border-color var(--speed) var(--easing);
}
.cp-field::placeholder{color:var(--soft); opacity:1}
.cp-field:focus{outline:none; border-color:var(--ink)}
.cp-field--text{
  display:block; height:auto; min-height:4.8rem; max-height:24rem;
  padding:1.3rem 1.8rem; border-radius:2.4rem; resize:none; overflow-y:auto;
  line-height:1.45;
}
.cp-compose .cp-btn{height:4.8rem}
.cp-btn:disabled{opacity:.35; cursor:not-allowed}
.cp-btn:disabled:active{transform:none}
.cp-btn--fill:disabled:hover{background:var(--ink); color:var(--ground)}
.cp-talk_note{margin:1rem 0 0 5.2rem; font-family:var(--face-ui); font-size:1.25rem; color:var(--soft)}

/* a comment: line breaks kept; your own can be deleted; a new one arrives */
.cp-c_text{white-space:pre-wrap}
.cp-c_del{
  margin-left:auto; border:0; padding:0; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.15rem; color:var(--soft);
  text-decoration:underline; text-underline-offset:.2em;
}
.cp-c_del:hover,.cp-c_del:focus-visible{color:var(--ink)}
.cp-c.is-new{animation:cp-in .55s var(--power3-out)}
@keyframes cp-in{from{opacity:0; transform:translateY(1rem)}}
@media (prefers-reduced-motion:reduce){ .cp-c.is-new{animation:none} }
@media (max-width:600px){
  .cp-compose{grid-template-columns:3.4rem minmax(0, 1fr) auto; column-gap:.8rem}
  .cp-av--you{width:3.4rem; height:3.4rem}
  .cp-talk_note{margin-left:4.2rem}
}

/* the specimen marker, only under ?preview=comments */
.cp-preview{
  display:inline-block; margin:0 0 var(--s3); padding:.6rem 1.2rem; border-radius:99px;
  border:1px solid var(--cp-accent); color:var(--cp-accent);
  font-family:var(--face-data); font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase;
}

/* WIDE: comments on the left, the log on the right */
@media (min-width:900px){
  .cp-sec--talk{grid-column:1 / span 7; grid-row:2}
  .cp-sec--log{grid-column:8 / -1; grid-row:2}
}
@media (max-width:899px){
  .cp-lead,.cp-aside{grid-column:1 / -1}
}

/* the foot, clear of the dock */
.cp-foot{
  max-width:124rem; margin:var(--s7) auto 0;
  padding:var(--s4) 0 calc(var(--s6) + 6rem);
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  flex-wrap:wrap;
}
.cp-foot_mark{margin:0; font-family:var(--face); font-weight:700;
  
  font-size:2rem; letter-spacing:-0.02em; text-transform:uppercase}
.cp-foot_mark a{color:inherit; text-decoration:none}
.cp-foot_mark a:hover,.cp-foot_mark a:focus-visible{opacity:.55}
.cp-foot_t{margin:0; font-family:var(--face-ui); font-size:1.2rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); text-decoration:none;
  transition:color var(--speed) var(--easing)}
.cp-foot_t:hover,.cp-foot_t:focus-visible{color:var(--ink)}

/* ---------------- THE DOCK ----------------
   The campaign's ask, up at all times: the figures and the two actions. It
   rises into place once on arrival and stays; it steps aside only while the
   photo viewer is open, which has its own dock. */
.cp-dock{
  position:fixed; z-index:70; left:50%;
  bottom:calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:.8rem;
  padding:.7rem .7rem .7rem 1.8rem; border-radius:999px;
  background:var(--cp-pill-ground);
  opacity:0; pointer-events:none;
  transform:translate(-50%, 140%);
  transition:transform var(--speed-slow) var(--power3-out), opacity var(--speed) var(--easing);
}
.cp-dock.is-on{opacity:1; pointer-events:auto; transform:translate(-50%, 0)}
html.is-viewing .cp-dock{opacity:0; pointer-events:none}
/* the page keeps clear of it: nothing at the foot — the comment box, the
   footer — ends up underneath */
.cp-page .cp{padding-bottom:calc(9rem + env(safe-area-inset-bottom, 0px))}
/* what a dock button has to say, in a pill of its own just above the dock */
.cp-dock_say{
  position:absolute; left:50%; bottom:calc(100% + 1rem);
  width:max-content; max-width:min(92vw, 44rem); margin:0;
  padding:1rem 1.6rem; border-radius:1.6rem;
  background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.3rem; line-height:1.35; text-align:center;
  overflow-wrap:anywhere;
  opacity:0; pointer-events:none;
  transform:translate(-50%, .6rem);
  transition:opacity var(--speed) var(--easing), transform var(--speed) var(--power3-out);
}
.cp-dock_say.is-on{opacity:1; transform:translate(-50%, 0)}
.cp-dock_sum{
  margin:0 .8rem 0 0; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--face-data); font-variant-numeric:tabular-nums; font-size:1.2rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
}
/* the same order as everywhere: the goal is the figure in ink */
.cp-dock_sum b{font-weight:400; font-size:1.6rem; letter-spacing:0; color:var(--ink)}
/* THE GOAL IS NEVER THE PART THAT IS CUT. With the dock up at all times it
   is on every phone screen, and below about 400px the two buttons left the
   figures too little room — "€650 OF …", the goal gone. On a phone Share
   is its drawn icon (still named Share for screen readers) and Support a
   step slimmer; at the narrowest the small type closes up and the goal
   steps down a size. Checked against every campaign's figures, the longest
   being "€1,200 of €12,000". */
.cp-share_i{display:none; width:1.8rem; height:1.8rem; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:420px){
  .cp-dock .cp-share{width:4.2rem; height:4.2rem; padding:0; border-radius:50%}
  .cp-dock .cp-share_t{display:none}
  .cp-dock .cp-share_i{display:block}
  .cp-dock [data-support]{padding-left:1.5rem; padding-right:1.5rem}
}
@media (max-width:340px){
  .cp-dock{padding-left:1.4rem}
  .cp-dock_sum{letter-spacing:.04em; margin-right:.4rem}
  .cp-dock_sum b{font-size:1.5rem}
}

/* ---------------- A SOUND, AND A VIDEO, AS CARDS ----------------
   Every card is a size container, so what is on it is set in cqw — a
   share of the card — and reads the same at the cover's 278px and the
   viewer's 576px without a second set of numbers. */
.cp-card_in,.cp-page .cg-card_in{container-type:size}
/* THE ROUNDED BOX HOLDS EVERYTHING ON THE CARD — isolation is what makes it.
   The veil, the label, the waveform and the play row carry z-indexes, and
   without a stacking context of its own the box that rounds and clips the
   card was not their parent in painting, only in layout: Safari had to clip
   each of them separately, on a card that is its own moving layer, and got
   it wrong. It filled what should have been see-through with black — square
   black corners on the light page — and left whole parts of cards unpainted,
   which on the dark page read as a photo cut off in straight lines and as
   the sound cards behind it vanishing. As one group, the box clips all of it
   in one pass. */
.cp-card_in,.cp-page .cg-card_in,.cp-flycard{isolation:isolate}
/* the copy of a card that flies between the page and the viewer */
.cp-flycard{
  position:relative; display:block; width:100%; height:100%;
  border-radius:15%; overflow:hidden; container-type:size;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
/* the veil that recedes a rear card has to lie over everything on the card,
   including the parts of a sound or video card lifted above its picture —
   and it is a tint, never a lid: it must not take a tap. Without
   pointer-events:none it sat invisibly over the full-screen button and
   swallowed every press on it. */
.cp-card_veil,.cp-page .cg-card_veil{z-index:3; pointer-events:none}

/* what kind of thing a card is, when it is not a photograph */
.cp-kind{
  position:absolute; z-index:2; left:9cqw; top:9cqw;
  padding:1.8cqw 3.2cqw; border-radius:99px;
  background:color-mix(in srgb, var(--ground) 82%, transparent); color:var(--ink);
  font-family:var(--face-data); font-size:max(1rem, 3.1cqw); line-height:1;
  letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* THE SOUND CARD. No picture, so the sound is the picture: its own
   waveform across the middle, inked in as it plays. Ground a step off the
   page's so it reads as a card, not as a hole. */
.cp-snd{
  position:absolute; inset:0;
  /* a sound: the waveform centred in the room above its foot. A video keeps
     its label at the top (below). */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10cqw 10cqw 10cqw;
  background:color-mix(in srgb, var(--ink) 9%, var(--ground)); color:var(--ink);
  text-align:left;
}
.cp-snd .cp-kind{position:relative; z-index:1; left:auto; top:auto; align-self:flex-start; padding:0; background:none; color:var(--soft)}
/* WITH SOMETHING BEHIND IT — a sound's photograph, or a video. The card
   itself is unchanged; the picture goes underneath, under a veil in the
   page's own ground (darker at the foot, where the title sits), and the
   quiet parts of the card step up a shade so they hold on a photograph. */
.cp-snd_bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
.cp-snd_scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ground) 62%, transparent) 0%,
    color-mix(in srgb, var(--ground) 38%, transparent) 42%,
    color-mix(in srgb, var(--ground) 76%, transparent) 78%,
    color-mix(in srgb, var(--ground) 90%, transparent) 100%);
  transition:opacity var(--speed-slow) var(--power3-out);
}
.cp-snd--bg .cp-kind,.cp-snd--bg .cp-snd_time{color:color-mix(in srgb, var(--ink) 80%, transparent)}
.cp-snd--bg .cp-snd_bars i{background:color-mix(in srgb, var(--ink) 42%, transparent)}
.cp-snd--bg .cp-snd_bars--on i{background:var(--ink)}
/* a video that is playing is the thing being watched: the veil lifts and
   only a shade at the foot stays, enough for the button and the title.
   TWO LAYERS, CROSSFADED. A gradient cannot be transitioned into another
   gradient — the browser snaps between them, which was the jolt on
   pressing play — so the full veil fades out over the foot shade instead. */
.cp-snd_shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 45%,
    color-mix(in srgb, var(--ground) 62%, transparent) 74%,
    color-mix(in srgb, var(--ground) 88%, transparent) 100%);
}
.cp-snd--video .cp-snd_scrim{transition:opacity .7s var(--power3-out)}
.is-playing .cp-snd--video .cp-snd_scrim{opacity:0}
.cp-snd--video .cp-kind{transition:opacity .5s var(--easing)}
.is-playing .cp-snd--video .cp-kind{opacity:0}
.cp-snd_btn .cp-i-play,.cp-snd_btn .cp-i-pause{transition:opacity .2s var(--easing)}

/* THE VIEWER'S DOCK — Back, Expand and, when the card in front can be
   heard, the volume, in one pill. It is the campaign page's own dock (the
   same ground, the same round ends), so the controls read as one object
   under the photo rather than three grey tiles. Back keeps its word: it is
   the one control a first visit has to find. Expand and the speaker are
   round icon buttons, named for screen readers. A hairline stands between
   groups, and a group that is not there takes its hairline with it. */
.cp-ctl{
  position:fixed; left:50%; bottom:calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  translate:-50% 0; z-index:90;
  display:flex; align-items:center; gap:1.3rem;
  padding:.4rem; border-radius:999px;
  background:var(--cp-pill-ground); color:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity var(--speed-slow) var(--easing), visibility var(--speed-slow) var(--easing);
}
.cg-stack.is-open ~ .cp-ctl{opacity:1; visibility:visible}
/* every control in it: 44px, round ends, a quiet wash of ink under the pointer */
.cp-ctl .cp-vol_btn{
  height:4.4rem; border:0; border-radius:999px; flex:none;
  background:transparent; color:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--speed) var(--easing), transform var(--micro);
}
.cp-ctl .cp-vol_btn:hover{
  background:color-mix(in srgb, var(--ink) 11%, transparent)}
.cp-ctl .cp-vol_btn:active{transform:scale(.94)}
.cp-ctl .cp-vol_btn:focus-visible{
  outline:2px solid var(--ink); outline-offset:-2px;
  background:color-mix(in srgb, var(--ink) 11%, transparent)}
/* the hairlines between groups */
.cp-ctl > * + *{position:relative}
.cp-ctl > * + *::before{
  content:""; position:absolute; left:-.65rem; top:50%; width:1px; height:2rem;
  translate:-50% -50%; pointer-events:none;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
}
/* A PHONE'S DOCK HAS TO FIT. Back, Expand and the volume come to about
   300px in one pill, inside a 320px screen; below 480px Back tightens and
   the slider shortens. */
@media (max-width:480px){
  .cp-ctl .cp-vol_range{width:6.4rem}
}

/* ---------------- VOLUME ----------------
   A speaker that is also the mute switch, and a slider beside it. The
   speaker's waves say the level: two, one, or a cross for silence. */
.cp-vol{display:inline-flex; align-items:center; gap:.8rem; flex:none}
.cp-vol[hidden]{display:none}
.cp-ctl .cp-vol{height:4.4rem; padding:0 1.6rem 0 0; gap:.4rem}
/* where the level cannot be set (iOS) the speaker is the whole group */
.cp-ctl .cp-vol:has(.cp-vol_range[hidden]){padding-right:0}
.cp-ctl .cp-vol_btn{width:4.4rem}
.cp-vol_btn{
  width:3.6rem; height:3.6rem; flex:none; display:grid; place-items:center;
  border:0; padding:0; border-radius:50%; background:none; color:inherit; cursor:pointer;
  transition:background var(--speed) var(--easing);
}
.cp-vol_btn:hover,.cp-vol_btn:focus-visible{background:color-mix(in srgb, var(--ink) 14%, transparent); outline:none}
.cp-vol_btn svg{width:2.2rem; height:2.2rem; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.cp-vol_spk{fill:currentColor; stroke:none}
.cp-vol_x{display:none}
[data-level="low"] .cp-vol_w2{display:none}
[data-level="off"] .cp-vol_w1,[data-level="off"] .cp-vol_w2{display:none}
[data-level="off"] .cp-vol_x{display:inline}
/* the slider, drawn in the site's hairline: a 2px track, inked to the level */
.cp-vol_range{
  -webkit-appearance:none; appearance:none; width:9rem; height:2.4rem; margin:0;
  background:transparent; cursor:pointer; --v:1;
}
.cp-vol_range[hidden]{display:none}
.cp-vol_range::-webkit-slider-runnable-track{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, currentColor calc(var(--v) * 100%),
    color-mix(in srgb, currentColor 28%, transparent) calc(var(--v) * 100%));
}
.cp-vol_range::-moz-range-track{height:2px; border-radius:2px; background:color-mix(in srgb, currentColor 28%, transparent)}
.cp-vol_range::-moz-range-progress{height:2px; border-radius:2px; background:currentColor}
.cp-vol_range::-webkit-slider-thumb{
  -webkit-appearance:none; width:1.3rem; height:1.3rem; margin-top:-.55rem;
  border-radius:50%; background:currentColor; border:0;
}
.cp-vol_range::-moz-range-thumb{width:1.3rem; height:1.3rem; border-radius:50%; background:currentColor; border:0}
.cp-vol_range:focus-visible{outline:2px solid currentColor; outline-offset:4px; border-radius:2px}
/* in the dock the track is the page's 1px hairline, the progress line's,
   drawn in ink: a range input does not inherit colour on its own, and the
   browser's field grey is not in the palette */
.cp-ctl .cp-vol_range{color:inherit}
.cp-ctl .cp-vol_range::-webkit-slider-runnable-track{height:1px}
.cp-ctl .cp-vol_range::-webkit-slider-thumb{margin-top:-.6rem}
.cp-ctl .cp-vol_range::-moz-range-track,.cp-ctl .cp-vol_range::-moz-range-progress{height:1px}

/* on the page, the count shares the top of a sound card with its label */
.cp-card .cp-snd .cp-kind{max-width:62%}
.cp-snd_wave{position:relative; z-index:1; height:36cqh; margin:auto 0}
.cp-snd--video{justify-content:space-between}
/* a waveform that can be scrubbed says so under the pointer */
.cg-card.is-front .cp-snd_wave{cursor:pointer; touch-action:none}
.cp-snd_bars{position:absolute; inset:0; display:flex; align-items:center; gap:.85cqw}
.cp-snd_bars i{
  flex:1; min-width:0; height:14%; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 24%, transparent);
  transition:height .8s var(--power3-out);
}
/* the played part: the same bars in ink, uncovered from the left */
.cp-snd_bars--on{clip-path:inset(0 100% 0 0)}
.cp-snd_bars--on i{background:var(--ink)}

.cp-snd_foot{position:relative; z-index:1; display:flex; align-items:center; gap:4cqw; min-width:0}
.cp-snd_btn{
  flex:none; width:17cqw; height:17cqw; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--ground);
  transition:transform var(--micro), background var(--speed) var(--easing);
}
.cp-snd_btn svg{width:40%; height:40%; fill:currentColor}
.cp-snd_btn .cp-i-pause{display:none}
.is-playing .cp-snd_btn{background:var(--cp-accent); color:#fff}
.is-playing .cp-snd_btn .cp-i-play{display:none}
.is-playing .cp-snd_btn .cp-i-pause{display:block}
.cp-snd_t{min-width:0}
.cp-snd_t b{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-family:var(--face); font-weight:700;
  
  font-size:6cqw; line-height:1.05; letter-spacing:-0.02em; text-transform:uppercase;
}
.cp-snd_time{
  display:block; margin-top:1.8cqw;
  font-family:var(--face-data); font-size:max(1rem, 3.3cqw); letter-spacing:.12em;
  color:var(--soft); font-variant-numeric:tabular-nums;
}

/* ---------------- THE VIEWER, this page's two additions ---------------- */
/* THE CARD SITS HIGH ENOUGH FOR WHAT IS UNDER IT. Centred on the screen at
   its full size, its caption ran into the row at the foot on a short laptop
   screen (680px: caption to 631, row from 612). The card is lifted by half
   the height of what sits below it and sized to the height that is left,
   so caption and row always clear each other. */
.cp-page .cg-card{top:calc(50% - 5.5rem)}
.cp-page .cg-note{top:calc(50% - 5.5rem + var(--card) / 2 + var(--s3))}
/* the flight: ground first, everything else once the card has landed */
.cp-page .cg-stack.is-landing .cg-card{visibility:hidden}
.cp-page .cg-stack.is-landing ~ .cg-note,
.cp-page .cg-stack.is-landing ~ .cg-at,
.cp-page .cg-stack.is-landing ~ .cp-ctl,
.cp-page .cg-stack.is-landing ~ .cp-back,
.cp-page .cg-stack.is-landing ~ .cp-arrow{opacity:0 !important; visibility:hidden !important; transition:none}
/* the row at the foot, on a screen with a mouse: there while the photo is */
@media (hover:hover) and (pointer:fine){
  .cp-page .cg-stack.is-open ~ .cp-ctl{opacity:0; pointer-events:none; transition:opacity .3s var(--easing)}
  .cp-page.show-ctl .cg-stack.is-open ~ .cp-ctl,
  .cp-page .cg-stack.is-open ~ .cp-ctl:focus-within{opacity:1; pointer-events:auto}
}
.cp-page .cg-stack{background:var(--ground)}
.cp-page .cg-stack,.cp-page .cg-stack *{cursor:grab}
.cp-page .cg-stack.is-dragging,.cp-page .cg-stack.is-dragging *{cursor:grabbing}
.cp-backarrow{width:1.6rem; height:1.6rem; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------------- NARROW ---------------- */
@media (max-width:600px){
  /* small enough that a phone's first screen reaches the two buttons — the
     people this page is for arrive on a phone, from a link, to give — and
     small enough that opening it visibly makes it bigger: on a phone the
     screen's width is the ceiling for both, so the gap has to come from
     here. It also leaves the cards behind room to show on the right. */
  :root{--cover:min(74vw, 44svh); --card:min(90vw, calc(100svh - 27rem))}
  .cp{padding:0 var(--s3)}
  .cp-dock{width:calc(100% - 2 * var(--s3)); justify-content:flex-end}
  .cp-dock_sum{margin-right:auto}
  .cp-read{row-gap:1.2rem}
  .cp-c--artist{margin-left:2.6rem}
  .cp-foot{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .cp-card img,.cp-card video,.cp-bar i,.cp-dock,.cp-btn,.cp-snd_bars i{transition:none}
  .cp-cover:hover .cp-card.is-front img{transform:none}
}

/* ============================================================
   THE INFO SECTION — SIZING TAKEN FROM inter-09 (client, 12 September 2026:
   "we like the sizing of this info page ... make that size with GT America,
   don't change the font just sizing").

   THE FONT IS UNTOUCHED. Every rule below still resolves to GT America
   through --face-ui; only size, weight, line-height, tracking and measure
   move. Two things change the character of this section:

     THE HEADINGS SHRINK. "About the campaign", "Comments", "Updates" go
     from 1.7rem at +0.12em down to 1.2rem at +0.08em. They stop competing
     with the text under them and become what they are — a label on a
     region, not a headline.

     THE READING GROWS. Descriptions, what the money covers, updates and
     comments all settle on ONE setting — 1.65rem, line-height 1.55, a
     hair of negative tracking — instead of the four slightly different
     sizes they had (2.2 / 1.6 / 1.6 / 1.55). The measure opens from 42ch
     to 60ch so a hundred-word description reads as a paragraph.

   Small labels heavier, running text bigger and calmer. That is the whole
   change, and it is why the section reads quieter than it did.
   ============================================================ */

/* LABELS: the section headings. The fact sheet is deliberately NOT included
   — inter-09 left it alone, and at the reading size its monospaced values
   grew big enough to dominate the panel they are meant to sit quietly in. */
.cp-h{
  font-size:1.2rem; font-weight:700; line-height:1;
  letter-spacing:.08em; text-transform:uppercase;
}

/* READING: every piece of running text in this section, one setting */
.cp-lead,
.cp-text,
.cp-upd p,
.cp-c_text{
  font-size:1.65rem; font-weight:400; line-height:1.55; letter-spacing:-0.011em;
}

/* THE MEASURE. 42ch was drawn for a single sentence; an artist writing a
   hundred words needs a line that turns nearer 60. */
.cp-lead{max-width:60ch}
.cp-text{max-width:46ch}
.cp-upd p{max-width:52ch}

/* ============================================================
   THE MONEY, AND THE BUTTONS (client, 12 September 2026: "i also like the
   money how they are showcased more with the other font, and make the
   Support and share both all caps").

   THE FONT IS STILL GT AMERICA. What changes is WHICH CUT the figures use.
   They were set in GT America MONO at weight 400 — thin, evenly spaced,
   correct but quiet, and a sum is the one number on the page a visitor has
   to find. They now sit in GT America STANDARD at 700, the same treatment
   the version you liked gave them: proportional, bold, tabular so the
   digits still line up. Sizes are that version's too.
   ============================================================ */

/* the goal, under the hairline */
.cp-sum{font-family:var(--face-ui)}
.cp-sum b{
  font-weight:700; font-size:clamp(3.6rem, 4.4vw, 5rem);
  line-height:0.95; letter-spacing:-0.02em;
}
/* "€1,750 OF" — still a label, but a proportional face needs less air
   between capitals than a monospaced one did, so +0.14em comes down */
.cp-sum_got{letter-spacing:.08em}

/* the floating ask */
.cp-dock_sum{font-family:var(--face-ui); letter-spacing:.08em}
.cp-dock_sum b{font-weight:700; font-size:1.6rem; letter-spacing:-0.02em}

/* the percentage and the days, and the facts line: same voice */
.cp-meta b,
.cp-facts b{font-weight:700; letter-spacing:-0.02em}

/* THE THOUSANDS COMMA. The -0.2em pull above was drawn for the MONOSPACE,
   whose comma is given a whole digit's slot. GT America Standard's comma is
   already comma-width, so the correction now closes the digits into each
   other and has to come off. */
.cp-sep{margin:0}


/* ============================================================
   SIMPLER, 13 September 2026 (client: "so it's not so hard to use").
   One size of picture — the viewer, no full screen past it — with arrows
   beside it and a wall at either end; Back that is found at a glance; the
   artist's pill that says it opens; the next panel peeking on arrival.
   Every piece is drawn from what is already here: the site's pills, its
   one accent on hover, the ink-and-ground inversion.
   ============================================================ */

/* ---- BACK: an ink pill, top left, its arrow in a ground-coloured disc ---- */
.cp-page .cp-back{
  left:calc(var(--s3) + env(safe-area-inset-left, 0px));
  top:calc(var(--s3) + env(safe-area-inset-top, 0px));
  bottom:auto; translate:none; z-index:95;
  gap:1rem; padding:.5rem 2.2rem .5rem .5rem; border-radius:999px;
  background:var(--ink); color:var(--ground); cursor:pointer;
  font-family:var(--face-ui); font-size:1.5rem; font-weight:600;
  letter-spacing:-0.01em; text-transform:none; line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:opacity var(--speed-slow) var(--easing), visibility var(--speed-slow) var(--easing),
             background var(--speed) var(--easing), color var(--speed) var(--easing), transform var(--micro);
}
.cp-page .cp-back:hover,.cp-page .cp-back:focus-visible{background:var(--cp-accent); color:#fff}
.cp-page .cp-back:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.cp-page .cp-back:active{transform:scale(.96)}
.cp-back_i{
  flex:none; width:3.8rem; height:3.8rem; border-radius:50%;
  display:grid; place-items:center; background:var(--ground); color:var(--ink);
  transition:transform var(--speed) var(--power3-out);
}
.cp-back_i svg{width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.cp-back:hover .cp-back_i{transform:translateX(-.25rem)}

/* ---- THE ARROWS, beside the photo, at the card's own middle ---- */
.cp-arrow{
  position:fixed; z-index:92; top:calc(50% - 5.5rem); translate:0 -50%;
  width:5.2rem; height:5.2rem; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--cp-pill-ground); color:var(--ink);
  opacity:0; visibility:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:opacity var(--speed-slow) var(--easing), visibility var(--speed-slow) var(--easing),
             background var(--speed) var(--easing), color var(--speed) var(--easing), transform var(--micro);
}
.cp-arrow[hidden]{display:none}
.cp-arrow--prev{left:max(var(--s2), calc(50% - var(--card) / 2 - 7.6rem))}
.cp-arrow--next{right:max(var(--s2), calc(50% - var(--card) / 2 - 7.6rem))}
.cg-stack.is-open ~ .cp-arrow{opacity:1; visibility:visible}
/* at the end it dims, but still answers: pressing it knocks the wall */
.cg-stack.is-open ~ .cp-arrow.is-end{opacity:.35}
.cp-arrow:hover,.cp-arrow:focus-visible{background:var(--ink); color:var(--ground)}
.cp-arrow.is-end:hover{background:var(--cp-pill-ground); color:var(--ink)}
.cp-arrow:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.cp-arrow:active{transform:scale(.92)}
.cp-arrow svg{width:2.2rem; height:2.2rem; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
/* where there is no room beside the card they sit on its edges, on a
   ground that lets the photograph through */
@media (max-width:900px){
  /* a hairline ring, so the circle holds its shape on a photograph as dark
     (or as light) as the ground itself */
  .cp-arrow{width:4.2rem; height:4.2rem; background:color-mix(in srgb, var(--ground) 84%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent)}
  .cp-arrow--prev{left:calc(50% - var(--card) / 2 + 1.2rem)}
  .cp-arrow--next{right:calc(50% - var(--card) / 2 + 1.2rem)}
  .cp-arrow svg{width:1.9rem; height:1.9rem}
}

/* ---- THE ARTIST SAYS IT OPENS ----
   At rest there is no ground behind the avatar and the name, in either
   theme; under the pointer the pill's ground comes up behind them, as it
   always did (client, 13 September 2026). */
.cp-id{background:none}
.cp-id:has(.cp-id_go[href]):hover{background:var(--cp-pill-ground)}
.cp-id_hint{
  margin:.35rem 0 0; display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--face-ui); font-size:1.35rem; font-weight:500; line-height:1.2;
  color:var(--soft); transition:color var(--speed) var(--easing);
}
.cp-id:hover .cp-id_hint,.cp-id:focus-within .cp-id_hint{color:var(--ink)}

/* ---- THE CLOSED VIEWER GIVES FOCUS BACK WITHOUT A RING ---- */
.cp-cover.no-ring:focus-visible .cp-card.is-front .cp-card_in{outline:none}

/* the lower page lands clear of the bar */
.cp-read .cp-sec{scroll-margin-top:9rem}

@media (prefers-reduced-motion:reduce){
  .cp-arrow,.cp-page .cp-back,.cp-back_i{transition:none}
}

/* THE FIRST SCREEN IS THE CAMPAIGN AND NOTHING ELSE (client, 13 September
   2026: "make it like it was before, the info is lower, you don't see it on
   the initial page, only when you scroll down"). The peek that pushed the top
   of "About the campaign" above the dock is gone, and the photograph keeps its
   full size. The top of the page now fills the first screen under the bar,
   its contents centred in it, so the lower page starts below the fold at every
   window size rather than at most of them. */
.cp-top{
  min-height:calc(100vh - 5.6rem); min-height:calc(100svh - 5.6rem);
  justify-content:center; box-sizing:border-box;
  padding-bottom:calc(9rem + env(safe-area-inset-bottom, 0px));
}

/* A PLAYING VIDEO, WATCHED (client, 13 September 2026): with the mouse off
   the picture — or after a moment on a touch screen — the play row and the
   shade under it fade, and the film is the whole card. campaign.js sets
   is-away; paused, it never is. */
.cg-card .cp-snd--video .cp-snd_foot,
.cg-card .cp-snd--video .cp-snd_shade{transition:opacity .4s var(--easing)}
.cg-card.is-away .cp-snd--video .cp-snd_foot,
.cg-card.is-away .cp-snd--video .cp-snd_shade{opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cg-card .cp-snd--video .cp-snd_foot,.cg-card .cp-snd--video .cp-snd_shade{transition:none}
}

/* ============================================================
   THE LINE UNDER THE FIGURES (client, 13 September 2026: "add the line
   that is animated to every campaign under '22% funded · 14 days left' —
   it goes behind the Support button, not in front").

   The landing page's hairline (.leo-scroll): a pale 1px rule with an ink
   segment falling through it, the same 2.4s drip. It hangs from just under
   the figures to the foot of the first screen, so its lower end runs under
   the dock, which is fixed and layered above it. campaign.js measures the
   two ends; with no script it simply is not drawn.
   ============================================================ */
.cp-top{position:relative}
.cp-drop{
  position:absolute; left:50%; top:0; z-index:0;
  width:1px; height:0; translate:-50% 0;
  overflow:hidden; pointer-events:none;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
}
.cp-drop i{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(-100%);
  animation:cp-drip 2.4s var(--power2-in-out, cubic-bezier(.45, 0, .55, 1)) infinite;
}
@keyframes cp-drip{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){
  .cp-drop i{animation:none; transform:none; opacity:.5}
}

/* the artist's pill, moved from under the photographs to the head of the
   lower page, at the left edge of the panels */
/* then up into the empty space between the top of the page and "About the
   campaign", and in the middle of it, where the falling line lands (client,
   22 September 2026) */
/* now at the end of the page, between the comments and the foot, in the
   middle of that space (client, 22 September 2026) */
.cp-who{display:flex; justify-content:flex-start; max-width:124rem; margin:var(--s6) auto calc(-1 * var(--s7) + var(--s6))}
/* all the way to the left: the avatar's edge on the panels' and the foot's */
.cp-who .cp-id{margin-left:-.6rem}
/* and it says where it goes, plainly, in ink */
.cp-who .cp-id_hint{color:var(--ink)}


/* the typed "View profile" and its caret while it is typing */
.cp-type{display:inline; white-space:pre}
.cp-caret{
  display:inline-block; width:1px; height:1.05em; margin-left:.2rem;
  background:currentColor; vertical-align:-.12em;
}
.cp-id_hint.is-done .cp-caret{display:none}   /* gone once written (client) */
@keyframes cp-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .cp-id_hint.is-done .cp-caret{animation:none} }