/* ============================================================
   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:#5E6160;
  --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} }

/* THE SECTIONS ARE RULED OFF (25 September 2026, client: "add lines so the
   sections are split"). A hairline over each section of the lower page —
   About the campaign, Comments, Updates — and, where Comments and Updates
   stand side by side, one between them. Updates starts a column further
   right than it did and clears the line by a gutter (client: "move updates
   slightly to the right"). */
.cp-read .cp-sec{border-top:1px solid var(--rule)}
@media (min-width:900px){
  .cp-read .cp-sec--log{
    grid-column:9 / -1;
    border-left:1px solid var(--rule); padding-left:clamp(2.4rem, 3vw, 4rem);
  }
  .cp-read .cp-sec--talk{grid-column:1 / span 8; padding-right:clamp(2.4rem, 3vw, 4rem)}
  /* the two stand in one row, so there is no gap for the line to break at */
  .cp-read{column-gap:0}
}
/* the empty-thread bubble loses its dashed outline too (25 September 2026) */
.cp-c--empty .cp-bub{border:0}

/* SHOW MORE, and the artist's own update box (25 September 2026) */
.cp-more{
  display:block; margin:0 auto var(--s3); padding:.9rem 1.8rem; border-radius:99px; cursor:pointer;
  border:1px solid var(--rule); background:none; color:var(--ink);
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600;
}
.cp-more:hover,.cp-more:focus-visible{border-color:var(--ink)}
.cp-thread .cp-c + .cp-more{margin:var(--s3) auto 0}
.cp-upd_compose{margin:0 0 var(--s4); grid-template-columns:0 minmax(0, 1fr) auto}
.cp-upd .cp-upd_del{position:absolute; right:0; top:0}

/* THE THREAD AS A WINDOW (25 September 2026, client: many comments must not
   make the whole page long — they "go into shades"). talk.js caps it at
   about one screen and it scrolls on its own; an edge fades out wherever
   there is more to scroll to. */
.cp-thread--box{
  max-height:clamp(36rem, 62vh, 64rem); overflow-y:auto; overscroll-behavior:contain;
  padding:.4rem .6rem .4rem 0; scrollbar-width:thin;
}
.cp-thread--box:empty{max-height:none; padding:0}
.cp-thread--box.is-fade-top{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8rem);
          mask-image:linear-gradient(to bottom, transparent 0, #000 8rem);
}
.cp-thread--box.is-fade-bottom{
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 8rem);
          mask-image:linear-gradient(to top, transparent 0, #000 8rem);
}
.cp-thread--box.is-fade-top.is-fade-bottom{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
}

/* a conversation: the comment, then its replies stepped in under it */
.cp-conv{display:flex; flex-direction:column; gap:1.2rem}
.cp-c--reply{margin-left:5.2rem; grid-template-columns:3.2rem minmax(0, 1fr)}
.cp-c--reply .cp-av{width:3.2rem; height:3.2rem; font-size:1rem}
.cp-c--reply.cp-c--artist{margin-left:5.2rem}
.cp-c_acts{margin-left:auto; display:inline-flex; gap:1.2rem}
.cp-c_acts .cp-c_del{margin-left:0}
.cp-c_act{
  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_act:hover,.cp-c_act:focus-visible{color:var(--ink)}
.cp-c--artist .cp-c_act,.cp-c--artist .cp-c_del{color:color-mix(in srgb, var(--ground) 70%, var(--ink))}
.cp-reply{
  margin-left:5.2rem; display:grid; grid-template-columns:minmax(0, 1fr) auto auto;
  align-items:end; column-gap:1rem;
}
.cp-reply .cp-btn{height:4.4rem}
.cp-reply_x{align-self:center}
@media (max-width:600px){
  .cp-c--reply,.cp-c--reply.cp-c--artist,.cp-reply{margin-left:2.8rem}
  .cp-reply{grid-template-columns:minmax(0, 1fr) auto; row-gap:.6rem}
  .cp-reply_x{grid-column:1 / -1; justify-self:start}
}

/* ============================================================
   THE COMMENTS, LIGHTER (25 September 2026, client: "delete the black
   bubbles from comments and overall make the comments look more appealing,
   make the bubbles transparent/translucent more towards transparent ...
   make the blur less potent"). Every bubble is a whisper of ink over the
   page with a hairline edge — nearly clear. The artist's are no longer
   black: they are the same glass, marked by the Artist tag and a slightly
   firmer edge. The fade at the thread's edges is short and never fully
   white, so the comments behind it still read.
   ============================================================ */
.cp-bub{
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cp-av{
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.cp-c--artist{margin-left:0}
.cp-c--reply.cp-c--artist{margin-left:5.2rem}
.cp-c--artist .cp-av,.cp-c--artist .cp-bub{background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink)}
.cp-c--artist .cp-bub{border-color:color-mix(in srgb, var(--ink) 20%, transparent)}
.cp-c--artist .cp-c_head time{color:var(--soft)}
.cp-c--artist .cp-c_act,.cp-c--artist .cp-c_del{color:var(--soft)}
.cp-c_tag{border-color:color-mix(in srgb, var(--ink) 28%, transparent); color:var(--ink)}
.cp-c--reply .cp-bub{background:color-mix(in srgb, var(--ink) 2%, transparent)}

/* the softer shade at the window's edges */
.cp-thread--box.is-fade-top{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.3) 0, #000 3.2rem);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.3) 0, #000 3.2rem);
}
.cp-thread--box.is-fade-bottom{
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.3) 0, #000 3.2rem);
          mask-image:linear-gradient(to top, rgba(0,0,0,.3) 0, #000 3.2rem);
}
.cp-thread--box.is-fade-top.is-fade-bottom{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.3) 0, #000 3.2rem, #000 calc(100% - 3.2rem), rgba(0,0,0,.3) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.3) 0, #000 3.2rem, #000 calc(100% - 3.2rem), rgba(0,0,0,.3) 100%);
}

/* THE STRAY SCROLLBAR in the comment box: none until the box is at its
   tallest (talk.js turns it on then) */
.cp-field--text{overflow-y:hidden}

/* who may comment: said where the box would be */
.cp-gate{margin:var(--s4) 0 0; font-family:var(--face-ui); font-size:1.45rem; line-height:1.5; color:var(--soft)}
.cp-gate a{color:var(--ink); text-decoration:underline; text-underline-offset:.2em}
.cp-gate[hidden]{display:none}

/* THE UPDATES ARE A WINDOW TOO (25 September 2026, client: "when i post too
   many updates it gets longer, it should have the same system as comment
   section") — about one screen tall, scrolling on its own, the same soft
   shade at its edges */
.cp-upds.cp-thread--box{max-height:clamp(32rem, 56vh, 56rem); padding-left:3rem; overflow-x:hidden}
/* in a scrolling window the timeline is drawn per update, so it runs the
   whole length and not only the first screen */
.cp-upds.cp-thread--box::before{display:none}
.cp-upds.cp-thread--box .cp-upd:not(:last-child)::after{
  content:""; position:absolute; left:-2.5rem; top:1.3rem; bottom:-.2rem; width:1px; background:var(--rule);
}
.cp-compose[hidden]{display:none}

/* the same on the campaign page: nothing an artist writes can push the page
   wider than the screen (25 September 2026) */
.cp-lead,.cp-text,.cp-upd p,.cp-name,.cp-sub,.cp-sheet dd{overflow-wrap:anywhere; word-break:break-word}
.cp-sec{min-width:0}

/* a playing video is only the video: its button, title, time and the pale
   shade at its foot fade out, and so do the side arrows (25 September 2026) */
.cp-snd--video .cp-snd_foot,.cp-snd--video .cp-snd_shade{transition:opacity .5s var(--easing)}
.is-playing .cp-snd--video .cp-snd_foot,.is-playing .cp-snd--video .cp-snd_shade{opacity:0}
.cp-vid-on .cp-arrow{opacity:0 !important; visibility:hidden !important; pointer-events:none; transition:opacity .4s var(--easing), visibility 0s .4s}

/* a video sized to cover its card by its own proportion (see campaign.js):
   the card is a size container, so 100cqw x 100cqh is the card */
/* CENTRED WITHOUT A TRANSFORM (25 September 2026 — found on the client's
   phone: the card's own hover lift sets transform on its video, which
   replaced the centring, so the video jumped to the lower right and slid
   there). inset:0 with margin:auto centres it even when it is larger than
   the card, and leaves transform free for the lift. */
.cp-snd_bg.is-fit{
  inset:0; margin:auto;
  width:max(100cqw, calc(100cqh * var(--ar))); height:max(100cqh, calc(100cqw / var(--ar)));
  max-width:none; max-height:none; object-fit:fill;
}
.cp-snd{overflow:hidden}
.cp-note,.cp-top .cp-line,.cg-note,.lst-note,.leo-card_say,.cg-tile_note{overflow-wrap:anywhere; word-break:break-word}

/* ============================================================
   A PAUSED VIDEO, SIMPLY (25 September 2026, client: "make it simple like
   youtube ... keep the VIDEO · 0:13 top left and add a button in the
   middle, small, without the black outline, white and slightly bigger").
   The video itself, no pale veil over it, its label at the top left, and
   one white play mark in the middle. No title, no timer, no black disc.
   While it plays, even that goes (as before). Sounds keep their card.
   ============================================================ */
.cp-snd--video .cp-snd_scrim,.cp-snd--video .cp-snd_shade{display:none}
.cp-snd--video .cp-kind{
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.cp-snd--video .cp-snd_foot{
  position:absolute; inset:0; display:grid; place-items:center; gap:0; padding:0;
}
.cp-snd--video .cp-snd_t{display:none}
.cp-snd--video .cp-snd_btn,
.is-playing .cp-snd--video .cp-snd_btn{
  width:auto; height:auto; border-radius:0; background:none; color:#fff;
}
.cp-snd--video .cp-snd_btn svg{
  width:15cqw; height:15cqw; min-width:4.4rem; min-height:4.4rem;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* SHARE'S TWO CHOICES (26 September 2026): the story picture and the link,
   as two pills that rise above the dock where its messages appear */
.cp-sharemenu{
  position:absolute; right:.7rem; bottom:calc(100% + 1rem);
  display:flex; gap:.6rem; padding:.6rem; border-radius:999px;
  background:var(--cp-pill-ground);
  animation:cp-sharemenu .32s var(--power3-out) both;
}
.cp-sharemenu .cp-btn{white-space:nowrap}
@keyframes cp-sharemenu{from{opacity:0; transform:translateY(.6rem)}}
@media (prefers-reduced-motion:reduce){ .cp-sharemenu{animation:none} }

/* SUPPORTERS (26 September 2026, client) — see artist.html. One line each:
   the name, the amount in the page's figure face, and the day, quiet. It
   sits under Updates in the right-hand column (Comments now spans both
   rows beside them), and after Updates on a phone. A window like the
   others: it scrolls on its own and shades where there is more. */
.cp-sups{list-style:none; margin:0; padding:0}
.cp-sup{
  display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:baseline; column-gap:1.6rem;
  padding:1.1rem 0; border-bottom:1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.cp-sup:last-child{border-bottom:0}
.cp-sup_n{
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-sup.is-anon .cp-sup_n{color:var(--soft); font-weight:400}
.cp-sup_a{font-family:var(--face-data); font-size:1.5rem; font-variant-numeric:tabular-nums; color:var(--ink)}
.cp-sup_a .cp-sep{margin:0 -.2em}
.cp-sup_d{
  min-width:5.4rem; text-align:right;
  font-family:var(--face-data); font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
}
.cp-sup--none{display:block; color:var(--soft); font-family:var(--face-ui); font-size:1.5rem; border:0}
.cp-sup.is-new{animation:cp-in .55s var(--power3-out)}
@media (prefers-reduced-motion:reduce){ .cp-sup.is-new{animation:none} }
.cp-sups.cp-thread--box{max-height:clamp(28rem, 44vh, 44rem)}
/* a supporter's note (27 September 2026): under the line, softer, the
   artist's heart after it */
.cp-sup_note{
  grid-column:1 / -1; margin:.5rem 0 0; min-width:0;
  font-family:var(--face-ui); font-size:1.4rem; line-height:1.45; color:var(--soft);
  overflow-wrap:anywhere;
}
.cp-sup_heart{
  display:inline; margin-left:.4rem; padding:0; border:0; background:none;
  font:inherit; font-size:1.25rem; font-weight:500; color:var(--soft); white-space:nowrap;
}
button.cp-sup_heart{cursor:pointer; text-decoration:underline; text-underline-offset:.2em}
.cp-sup_heart.is-on{color:var(--ink); text-decoration:none}
button.cp-sup_heart:hover,button.cp-sup_heart:focus-visible{color:var(--ink)}
.cp-sup_hide{margin-left:1rem}
@media (min-width:900px){
  .cp-read .cp-sec--talk{grid-row:2 / span 2}
  .cp-read .cp-sec--give{
    grid-column:9 / -1; grid-row:3;
    border-left:1px solid var(--rule); padding-left:clamp(2.4rem, 3vw, 4rem);
  }
}
/* (same day, client: "can the supporters be further down, also can the lines
   line up where there is a gap there") — Updates keeps a taller space of its
   own, so Supporters starts lower; and Supporters is pulled up over the
   grid's 1rem row gap, so the line down the column runs unbroken from
   Updates into it */
@media (min-width:900px){
  /* then "somewhere in the middle": about halfway between where it was
     first (~12rem) and the taller space (~38rem) */
  .cp-read .cp-sec--log{min-height:clamp(18rem, 18vw, 25rem)}
  .cp-read .cp-sec--give{margin-top:-1rem}
}

/* UPDATES OVER COMMENTS, SUPPORTERS IN THE RIGHT COLUMN (26 September 2026,
   client: "can updates actually go above comments and the names take up the
   space where updates is"). On a wide screen the left column is Updates,
   then Comments under it; Supporters runs the full height of the right
   column, where Updates stood, with the line down its side unbroken. On a
   phone they stack as before: Updates, Supporters, Comments. */
@media (min-width:900px){
  .cp-read .cp-sec--log{
    grid-column:1 / span 8; grid-row:2; min-height:clamp(17rem, 16.5vw, 23rem);   /* "a little more space for updates", then "less than that" (same day) */
    border-left:0; padding-left:0; padding-right:clamp(2.4rem, 3vw, 4rem);
  }
  .cp-read .cp-sec--talk{grid-column:1 / span 8; grid-row:3}
  .cp-read .cp-sec--give{grid-column:9 / -1; grid-row:2 / span 2; margin-top:0}
}
/* a little less room between the top of the page and About the campaign
   (26 September 2026, client: "shorten the space here, slightly") — 8rem
   became 6rem */
.cp-read{margin-top:6rem}

/* THE ARTIST IN THE TOP CORNER (26 September 2026 — see artist.html). On a
   wide screen the pill sits in the top-left corner of the page, beside the
   photograph, its avatar on the same left edge as the sections below; on a
   phone, where there is no room beside the photograph, it heads the page
   above it, on the same left edge. */
.cp-top .cp-who{margin:0; max-width:none; width:100%}
.cp-top .cp-who .cp-id{margin-top:0}
@media (min-width:900px){
  .cp-top .cp-who{
    position:absolute; z-index:5; top:var(--s4);
    left:max(0px, calc((100% - 124rem) / 2)); width:auto;
  }
}
@media (max-width:899px){
  .cp-top .cp-who{justify-content:flex-start; margin:0 0 var(--s4)}
}
/* a little further down (same day, client: "a little more, but not lined up
   with the campaign") — clear of the photograph's top edge */
@media (min-width:900px){ .cp-top .cp-who{top:var(--who-top, 7rem)} }
/* smaller in the corner (same day, client: "maybe smaller as well") — a
   smaller picture and name, the pill tighter round them */
.cp-top .cp-id{gap:1.1rem; padding:.5rem 1.8rem .5rem .5rem}
.cp-top .cp-id_go{gap:1.1rem}
.cp-top .cp-avatar{width:4rem; height:4rem}
.cp-top .cp-name{font-size:1.6rem}
.cp-top .cp-id_hint{font-size:1.25rem}
.cp-top .cp-follow{padding:1rem 1.6rem; font-size:1.3rem}
.cp-top .cp-who .cp-id{margin-left:-.5rem}   /* the avatar's edge on the page's left edge */

/* THE ARTIST OVER THE DETAILS (26 September 2026 — see artist.html): at the
   head of the right-hand column of About the campaign, above the details
   list's first line, its words ending on the list's right edge. Small, as it
   was in the corner; Follow comes in on the left of the avatar under the
   pointer, so it never pushes the name off the edge. */
.cp-sec--story .cp-id{gap:1.1rem; padding:.5rem 1.8rem .5rem .5rem}
.cp-sec--story .cp-id_go{gap:1.1rem}
.cp-sec--story .cp-avatar{width:4rem; height:4rem}
.cp-sec--story .cp-name{font-size:1.6rem}
.cp-sec--story .cp-id_hint{font-size:1.25rem}
.cp-sec--story .cp-follow{padding:1rem 1.6rem; font-size:1.3rem}
/* its words right-aligned, so both lines end on the list's edge */
.cp-sec--story .cp-id_t{text-align:right}
.cp-sec--story .cp-id_hint{justify-content:flex-end}

/* NO STRETCH ON LOAD (26 September 2026, client: "when i reload the page the
   video campaign has a bug, it stretches out to come back to normal"). Until
   a video or its still knows its own proportion it was drawn squeezed to the
   card, then snapped to shape. Now neither shows until it can be drawn at its
   shape (.is-fit): the still appears in place, and the video takes over from
   it already sized. */
.cp-snd--video .cp-snd_bg:not(.is-fit){visibility:hidden}

/* ON THE LINE (same day, client: "on top of the line thats above this. so
   it would be higher up"): the pill stands on the hairline over About the
   campaign, at its right end, its words ending on the page's right edge. */
.cp-sec--story{position:relative}
.cp-sec--story .cp-who{
  position:absolute; right:0; bottom:100%; margin:0 0 1.2rem;
  display:flex; justify-content:flex-end; max-width:none;
}
.cp-sec--story .cp-who .cp-id{margin:0; padding-right:0; flex-direction:row-reverse}

/* the words start from the picture again, left-aligned beside it, with the
   pill still at the right end of the line (same day, client: "the name and
   the view profile still start from the left margin, so it'll be coming
   from the profile picture") */
.cp-sec--story .cp-id_t{text-align:left}
.cp-sec--story .cp-id_hint{justify-content:flex-start}

/* THE VIDEO IS ITS OWN FIRST PICTURE (26 September 2026, client: "the
   glitch of the video is still happening every time i reload the page").
   The still saved at upload is made by the uploader's phone, which decodes
   the film a little differently — a different moment, a different framing —
   so when the video took over from it on load, the picture jumped as if
   stretched. On the campaign's own cards the video now shows itself: the
   card's ground first, then the film's first frame. The still is
   kept only for a video that cannot load. */
.cp-snd--video .cp-snd_still{display:none}
.no-video .cp-snd--video .cp-snd_still{display:block}
/* shown the moment it has a frame — not faded: Safari stops drawing a video
   whose opacity is animated inside these moving cards (found testing) */
.cp-snd--video video.cp-snd_bg:not(.has-frame){visibility:hidden}
/* nothing sits on the empty card while its film gets under way — no play
   button, no label — until the film itself is showing (campaign.js) */
.cp-snd--video:has(video.cp-snd_bg:not(.has-frame)) .cp-snd_foot,
.cp-snd--video:has(video.cp-snd_bg:not(.has-frame)) .cp-kind{visibility:hidden}

/* COMMENTS, 27 September 2026 (client): the writer's own picture in the
   circle; one "…" that opens Reply and Delete; and the box to write in has
   no circle before it — just the field and Post */
.cp-av--pic{overflow:hidden; padding:0; background:var(--cp-pill-ground)}
.cp-av--pic img{display:block; width:100%; height:100%; object-fit:cover}
.cp-compose{grid-template-columns:minmax(0, 1fr) auto}
.cp-talk_note{margin-left:0}
@media (max-width:600px){
  .cp-compose{grid-template-columns:minmax(0, 1fr) auto}
  .cp-talk_note{margin-left:0}
}
.cp-c_more{position:relative; margin-left:auto; align-self:center}
.cp-c_dots{
  display:grid; place-items:center; width:3.2rem; height:2.4rem; margin:-.6rem -.8rem -.6rem 0; padding:0;
  border:0; border-radius:99px; background:none; color:var(--soft); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.cp-c_dots svg{width:1.8rem; height:.4rem; fill:currentColor}
.cp-c_dots:hover,.cp-c_dots[aria-expanded="true"]{color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent)}
.cp-c_dots:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cp-c_menu{
  position:absolute; right:-.8rem; top:calc(100% + .8rem); z-index:20;
  display:grid; min-width:14rem; padding:.6rem; border-radius:1.6rem;
  background:var(--ground); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 1.2rem 3.2rem -1.2rem rgb(0 0 0 / .35);
}
.cp-c_menu[hidden]{display:none}
.cp-c_mi{
  display:flex; align-items:center; height:4rem; padding:0 1.4rem; border:0; border-radius:1rem;
  background:none; color:var(--ink); cursor:pointer; text-align:left;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500;
}
.cp-c_mi:hover,.cp-c_mi:focus-visible{background:color-mix(in srgb, var(--ink) 7%, transparent); outline:none}
.cp-c_mi--del{color:#C0392B}
.cp-c--artist .cp-c_dots{color:inherit; opacity:.7}
/* the menu floats over the page, placed by talk.js; the one in the comment
   stays hidden and only does the work */
.cp-c_menu--pop{position:fixed; right:auto; z-index:400}

/* REMIND ME, above the dock on a scheduled campaign (28 September 2026) */
.cp-remind{
  position:absolute; left:50%; bottom:calc(100% + 1rem); transform:translateX(-50%);
  width:min(92vw, 34rem); box-sizing:border-box; margin:0; padding:1.8rem 1.8rem 1.6rem;
  display:grid; gap:1rem; border-radius:2rem;
  background:var(--ground); color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 1.6rem 4.8rem -.8rem rgb(0 0 0 / .28);
}
.cp-remind_x{position:absolute; top:.8rem; right:.8rem; width:3.2rem; height:3.2rem; border:0; border-radius:50%;
  background:none; color:var(--soft); font-size:2rem; line-height:1; cursor:pointer}
.cp-remind_x:hover{color:var(--ink)}
.cp-remind_h{margin:0; padding-right:3rem; font-family:var(--face-ui); font-size:1.6rem; font-weight:600}
.cp-remind_t{margin:0; font-family:var(--face-ui); font-size:1.4rem; line-height:1.4; color:var(--soft)}
.cp-remind_in{width:100%; box-sizing:border-box}
.cp-remind_go{justify-self:start}
.cp-remind_say{margin:0; font-family:var(--face-ui); font-size:1.3rem; color:var(--soft)}
.cp-remind_say:empty{display:none}
/* the demo badge steps aside while the card is open */
html:has(.cp-remind) .mnf-demo{opacity:0; pointer-events:none}

/* a commenter's picture and name open their profile (29 September 2026) */
a.cp-av{text-decoration:none; cursor:pointer}
.cp-c_who{color:inherit; text-decoration:none}
@media (hover:hover){ .cp-c_who:hover b{text-decoration:underline; text-underline-offset:.2em} }