/* ============================================================
   ALL CAMPAIGNS — the infinite plane, and the stack.

   Built to the reference the client sent. Every number below was read off
   that site's own DOM or measured off the screenshots of it; none of them
   is a value chosen here. The ones worth naming:

     lattice pitch / tile        559.313 / 265.5  = 2.1066
     tile rest → hidden          scale 1 → 0.55, opacity 1 → 0
     stack, per card back        scale -0.12, top -27.93px, veil +0.15, z -15
     stack, per card leaving     scale 1 → 1.5, top 0 → 60vh, opacity 1 → 0
     cursor                      80px disc, native cursor none
     media radius                10% on the plane, 15% on the card

   The stack's whole model reduces to one number per card. See grid.js.

   BLACK ONLY. The reference has no light mode and this page is a copy of
   it, so archive.html pins data-world="black" rather than reading the
   switch. Every other page still follows the visitor's choice.
   ============================================================ */

/* --- THE PAGE --- */
.cg-page{
  margin:0; overflow:hidden; height:100%;
  background:var(--ground); color:var(--ink);
}
.cg-page body{margin:0; overflow:hidden; height:100%}

/* The mark and the count moved into the rail when the rail arrived; only
   the centred title is still loose on the page. */
/* fixed and above the plane, both deliberately. Tiles pass under the head
   rather than stopping short of it — which is what the reference does — so
   the title has to sit on top of them or it disappears behind whichever
   tile happens to drift through the middle of the top edge. */
.cg-title{
  position:fixed; z-index:60; left:calc(var(--rail) + (100vw - var(--rail)) / 2);
  top:var(--s3); translate:-50% 0;
  margin:0; font-family:var(--face); font-weight:700;
  
  font-size:1.7rem; letter-spacing:-0.01em; line-height:1;
  white-space:nowrap; text-transform:uppercase;
}
/* ONE SETTING ACROSS THE WHOLE LINE. The wordmark had been given its own
   weight and its own caps and the dash its own colour, which made three
   treatments in five words. The <b> and the <span> stay only because the
   narrow-screen rule below needs something to take hold of; neither carries
   a look of its own any more. */
.cg-title b,.cg-title span{
  font-weight:inherit; font-variation-settings:inherit; color:inherit;
}
.cg-title span{margin:0 .45em}
/* THE CARD PAGE CENTRES ON THE SCREEN, NOT ON THE PLANE. Normally the title
   is centred over the plane, which is right while the rail is beside it. The
   card page only fades the rail out — it still occupies its 27rem — so the
   title kept its old centre and sat half a rail's width to the right of a
   screen that no longer had a rail on it. */
.cg-page.is-carded .cg-title{left:50%}
/* Between the sheet breakpoint and about 1060px the centred title reaches
   back far enough to touch the Filters/Home cluster. The wordmark half is
   what gives way, not the title: at these widths the rail is docked open
   beside it and already reads MYNICHEFUND, so nothing is lost — it simply
   is not printed twice on one screen. */
@media (max-width:1060px){
  .cg-title b,.cg-title span{display:none}
}

/* --- THE PLANE ---
   Fixed, full screen, and dragged rather than scrolled. Every tile is
   absolutely placed and given its position by transform on each frame, so
   the browser never reflows while the plane moves. */
.cg-plane{
  position:fixed; inset:0 0 0 var(--rail); z-index:10;
  cursor:grab; touch-action:none; user-select:none;
}
.cg-plane.is-dragging{cursor:grabbing}
.cg-tile{
  position:absolute; left:0; top:0;
  width:var(--tile); height:var(--tile);
  margin:0; display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.cg-tile_in{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  /* THE REST AND HIDDEN STATES, exactly as the reference holds them: the
     plane at rest is scale 1 / opacity 1, and hidden is scale 0.55 /
     opacity 0. Opening a campaign hides the plane; closing brings it back,
     and the tiles come up staggered on the delay grid.js hands each one. */
  opacity:0; transform:scale(.55);
  transition:opacity var(--speed-slow) var(--power3-out),
             transform var(--speed-slow) var(--power3-out);
}
/* the stagger is only on the way IN. Each tile carries its own --d, but the
   delay is scoped to .is-shown so that hiding the plane — which happens the
   instant a campaign is opened — happens all at once. */
.cg-plane.is-shown .cg-tile_in{opacity:1; transform:scale(1); transition-delay:var(--d,0s)}
/* SQUARE, AND CROPPED, and it has to be both. The reference's plane is a
   field of rounded squares and its card is a square too, which is what
   makes the flight from one to the other exact — one uniform scale, no
   shape to reconcile at the end. Every photograph here is 16:9, so letting
   them keep their own proportion would give a plane of identical letterbox
   strips and a clone that changes shape mid-air. object-fit:cover instead:
   the same silhouette as the reference, at the cost of the sides of each
   picture. One line — `cover` to `contain` — trades it back. */
.cg-tile img,.cg-tile video{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:10%;
  transition:transform var(--speed) var(--easing);
}
.cg-tile:hover img,.cg-tile:hover video{transform:scale(1.04)}
/* a tile's picture, cut to its rounded square (29 September 2026) */
.cg-tile_pic{display:block; width:100%; height:100%; overflow:hidden; border-radius:10%}

/* THE LABEL lives on the tile, not in the cursor — the reference keeps a
   <p> inside each figure for it. Hidden until the tile is under the
   pointer, and it does not take the pointer itself. */
/* IT SITS ON PAPER NOW, and it has to. The label used to be three short
   centred lines that fitted the 93px of air under a tile. Carrying the whole
   record — name, craft, figure, description — it is taller than that gap, so
   it would lie across the photograph in the row below. A ground-coloured
   panel is what makes it readable over whatever it lands on. */
.cg-tile_info{
  position:absolute; left:50%; top:calc(100% + .8rem); translate:-50% 0;
  margin:0; width:var(--tile); max-width:none; text-align:left;
  pointer-events:none; opacity:0;
  transition:opacity var(--speed) var(--easing);
  font-family:var(--face-ui); font-size:1.15rem; line-height:1.35;
  letter-spacing:.02em; color:var(--ink);
  background:var(--ground); border-radius:1.2rem;
  padding:1rem 1.2rem 1.1rem;
}
/* The name at one end and the craft at the other under it, the same pair in
   the same setting as the cards on the landing page. */
.cg-tile_bar{
  display:block; padding-bottom:.5rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, var(--ground));
}
.cg-tile_bar b,.cg-tile_bar i{
  display:block; font-style:normal;
  font-family:var(--face); font-weight:700;
  
  font-size:1.4rem; text-transform:uppercase;
  letter-spacing:-0.01em; line-height:1.05;
}
.cg-tile_bar i{margin-top:.4rem; text-align:right}
/* On the Artists wall the name and the craft are the whole label, so the
   rule that divides them from the figures below has nothing left to divide. */
.cg-tile_bar:last-child{padding-bottom:0; border-bottom:0}
.cg-tile_num,.cg-tile_note{
  display:block; color:var(--soft); font-size:1.1rem; line-height:1.4;
}
.cg-tile_num{margin-top:.6rem; font-variant-numeric:tabular-nums}
/* Two lines, so a long description cannot make one tile's panel twice the
   height of its neighbour's. */
.cg-tile_note{
  margin-top:.25rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
/* THE Z-INDEX GOES ON THE TILE, NOT THE LABEL. The label hangs into the
   gap below the tile, and at this pitch that gap is 58px against a 31px
   label — fine until a long niche and country wrap to two lines, at which
   point it would slide under the next row. Raising the label alone does
   nothing once a transform on the tile has made a stacking context of it. */
.cg-tile:hover,.cg-tile:focus-visible{z-index:5}
.cg-tile:hover .cg-tile_info,
.cg-tile:focus-visible .cg-tile_info{opacity:1}
.cg-plane.is-dragging .cg-tile_info{opacity:0 !important}

/* --- THE CURSOR ---
   80px, white, and the native one is taken away while it is up. Only on a
   device that has a real pointer: a finger has no hover, so on touch the
   disc would be a dot that never moves. */
.cg-cursor{
  position:fixed; left:0; top:0; z-index:200;
  width:8rem; height:8rem; margin:-4rem 0 0 -4rem;
  border-radius:50%; background:var(--ink);
  pointer-events:none; opacity:0;
  transition:opacity var(--speed) var(--easing), scale var(--speed) var(--easing);
  will-change:transform;
}
.cg-cursor.is-on{opacity:1}
.cg-cursor.is-small{scale:.35}
@media (hover:hover) and (pointer:fine){
  .cg-page,.cg-page body,.cg-plane,.cg-plane *,.cg-stack,.cg-stack *{cursor:none}
}
@media not all and (hover:hover){ .cg-cursor{display:none} }

/* --- THE CLONE ---
   The tile that flies from the plane into the card. Fixed, so it belongs to
   neither, and transform-only, which is the whole reason the flight is
   smooth. */
.cg-clone{
  position:fixed; z-index:180; margin:0; pointer-events:none;
  transform-origin:50% 50%; will-change:transform;
}
/* the clone cuts its picture to its own box, so a framed (zoomed) photo
   flies as it will land (29 September 2026) */
.cg-clone{overflow:hidden; border-radius:12%}
.cg-clone img{width:100%; height:100%; object-fit:cover; display:block}
.cg-clone.is-flying{
  transition:transform var(--speed-slow) var(--power2-in-out);
}

/* --- THE STACK ---
   A card page: one campaign at the front, the next six receding above it,
   the ones behind you flying down and out. grid.js writes every transform;
   this file only says what a card IS. */
.cg-stack{
  position:fixed; inset:0; z-index:80;
  visibility:hidden; opacity:0;
  transition:opacity var(--speed) var(--easing), visibility var(--speed) var(--easing);
  touch-action:none; user-select:none;
}
.cg-stack.is-open{visibility:visible; opacity:1}
.cg-card{
  position:absolute; left:50%; top:50%;
  width:var(--card); height:var(--card);
  margin:calc(var(--card) / -2) 0 0 calc(var(--card) / -2);
  will-change:transform,opacity;
}
/* display:block is load-bearing. This is a <span>, and an inline box
   ignores width, height and overflow — so without it the radius clipped
   nothing and the card had square corners while the CSS claimed 15%. */
.cg-card_in{
  display:block; position:relative; width:100%; height:100%;
  border-radius:15%; overflow:hidden;
}
.cg-card img,.cg-card video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* the veil that darkens each card the further back it sits */
.cg-card_veil{
  position:absolute; inset:0; background:var(--ground); opacity:0;
}

/* the record of the campaign at the front, under the card */
.cg-note{
  position:fixed; left:50%; translate:-50% 0; z-index:85;
  top:calc(50% + var(--card) / 2 + var(--s3));
  width:min(90vw, 52rem); text-align:center; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--speed) var(--easing), visibility var(--speed) var(--easing);
}
.cg-stack.is-open ~ .cg-note{opacity:1; visibility:visible}
.cg-note b{
  display:block; font-family:var(--face); font-weight:700;
  
  font-size:2.2rem; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.05;
}
.cg-note span{
  display:block; margin-top:.5rem;
  font-family:var(--face-ui); font-size:1.2rem; letter-spacing:.02em; color:var(--soft);
}
.cg-note i{
  display:block; margin-top:.4rem; font-style:normal;
  font-family:var(--face-ui); font-size:1.1rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); font-variant-numeric:tabular-nums;
}

/* --- GRID VIEW ---
   Parked at the foot of the card page, centred. The reference fades it on
   --speed-slow and slides a background behind it on hover; both are here. */
.cg-back{
  position:fixed; left:50%; bottom:var(--s4); translate:-50% 0; z-index:90;
  display:inline-flex; align-items:center; gap:1.2rem;
  padding:1.5rem 2.2rem; border:0; border-radius:1.6rem;
  background:color-mix(in srgb, var(--ink) 13%, var(--ground));
  color:var(--ink); font-family:var(--face-ui);
  font-size:1.3rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; visibility:hidden; overflow:hidden;
  transition:opacity var(--speed-slow) var(--easing),
             visibility var(--speed-slow) var(--easing),
             background var(--speed) var(--easing);
}
.cg-stack.is-open ~ .cg-back{opacity:1; visibility:visible}
.cg-back:hover,.cg-back:focus-visible{
  background:color-mix(in srgb, var(--ink) 22%, var(--ground));
}
/* four squares on a 2×2 with a 4px gutter, which is the mark the reference
   draws for this button */
.cg-back i{
  width:1.8rem; height:1.8rem; flex:none;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:.4rem;
}
.cg-back i s{display:block; background:currentColor; border-radius:.2rem}

/* the counter, opposite the mark */
.cg-at{
  position:fixed; right:var(--s3); top:var(--s3); z-index:90;
  margin:0; font-family:var(--face-ui); font-variant-numeric:tabular-nums;
  font-size:1.15rem; letter-spacing:.16em; color:var(--soft);
  opacity:0; transition:opacity var(--speed) var(--easing);
}
.cg-stack.is-open ~ .cg-at{opacity:1}

/* --- THE FOOT LINE ---
   The reference keeps a line of small print across the bottom of the plane,
   over the tiles rather than under them. */
.cg-foot{
  position:fixed; inset:auto 0 0 var(--rail); z-index:55;
  margin:0; padding:var(--s4) var(--s3) var(--s3); text-align:center;
  /* The reference sets its small print straight over the grid and gets away
     with it because its items are dark. These are photographs of paintings
     on pale grounds, and the line vanished into them — so the ground fades
     up behind it rather than the type getting a box of its own. */
  background:linear-gradient(to top, var(--ground) 35%, transparent);
  font-family:var(--face-ui); font-size:1.05rem; line-height:1.5;
  color:var(--soft); pointer-events:none;
  transition:opacity var(--speed) var(--easing);
}
.cg-foot a{color:var(--ink); pointer-events:auto}
.cg-page.is-carded .cg-foot{opacity:0}

@media (max-width:768px){
  .cg-title{font-size:1.4rem}
  .cg-note b{font-size:1.7rem}
  .cg-back{padding:1.2rem 1.8rem; font-size:1.15rem}
  .cg-foot{font-size:.95rem}
}

/* Motion reduced: the plane still drags and the stack still steps, because
   both are the navigation. What goes is the flight and the springing — the
   clone is never made, and everything lands where it belongs at once. */
@media (prefers-reduced-motion:reduce){
  .cg-tile_in,.cg-tile img,.cg-tile video,.cg-clone,.cg-stack,
  .cg-back,.cg-note,.cg-at,.cg-cursor,.cg-tile_info{transition:none}
  .cg-clone{display:none}
}

/* ============================================================
   THE RAIL — how a visitor finds a campaign again.

   The reference has nothing like this, and could not: it is a brand manual
   with fifteen items and no reason to search itself. Twenty-four campaigns
   that a visitor may want to come back to is a different problem, and an
   endless plane you can only drag is the wrong answer to it. So the plane
   below is BOUNDED now — it holds exactly the campaigns that match, laid
   out once, and you drag within it rather than forever. Everything else
   about the plane, the flight and the stack is unchanged.
   ============================================================ */
:root{ --rail: 27rem; }
.cg-page.is-railed{ --rail: 0px; }

.cg-rail{
  position:fixed; left:0; top:0; bottom:0; width:27rem; z-index:70;
  display:flex; flex-direction:column;
  background:var(--ground);
  border-right:1px solid color-mix(in srgb, var(--ink) 14%, var(--ground));
  transition:transform var(--speed) var(--easing);
}
.cg-page.is-railed .cg-rail{transform:translateX(-100%)}
.cg-rail_in{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s3) var(--s3) var(--s5);
}
.cg-rail_mark{
  display:block; font-family:var(--face); font-weight:800;
  
  font-size:1.5rem; letter-spacing:-0.01em; text-transform:uppercase;
  color:var(--ink); line-height:1; margin-bottom:var(--s4);
}
.cg-result{
  margin:0 0 var(--s3); font-family:var(--face-ui);
  font-size:1.15rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--soft); font-variant-numeric:tabular-nums;
}
.cg-result b{color:var(--ink); font-weight:600}

/* --- a field --- */
.cg-field{display:block; margin:0 0 var(--s3)}
.cg-field > span{
  display:block; margin-bottom:.6rem;
  font-family:var(--face-ui); font-size:1.05rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft);
}
.cg-field input,.cg-field select{
  width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none;
  padding:1rem 1.1rem; border-radius:.8rem;
  border:1px solid color-mix(in srgb, var(--ink) 18%, var(--ground));
  background:color-mix(in srgb, var(--ink) 6%, var(--ground));
  color:var(--ink); font-family:var(--face-ui); font-size:1.25rem;
  transition:border-color var(--speed) var(--easing);
}
.cg-field input::placeholder{color:var(--soft)}
.cg-field input:focus,.cg-field select:focus{outline:0; border-color:var(--ink)}
/* the select needs its own mark back, having had the native one removed */
.cg-field select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 1.4rem center, right 1.05rem center;
  background-size:.45rem .45rem, .45rem .45rem;
  background-repeat:no-repeat;
  padding-right:3rem;
}
.cg-field select option{background:var(--ground); color:var(--ink)}

/* --- a facet group --- */
.cg-group{
  margin:0 0 var(--s2); padding:0 0 var(--s2);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, var(--ground));
}
.cg-group > h2{
  margin:0; font-family:var(--face-ui); font-size:1.05rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); font-weight:600;
  padding:1.1rem 0;
}
.cg-group ul{list-style:none; margin:0 0 .6rem; padding:0}
.cg-opt{margin:0}
.cg-opt label{
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  padding:.55rem 0; font-family:var(--face-ui); font-size:1.25rem;
  color:var(--ink);
  transition:opacity var(--speed) var(--easing);
}
/* AN OPTION THAT WOULD RETURN NOTHING IS DIMMED, NOT REMOVED. A list that
   reshuffles as you tick things is a list you cannot learn the shape of. */
.cg-opt.is-empty label{opacity:.32}
.cg-opt input{
  -webkit-appearance:none; appearance:none; margin:0; flex:none;
  width:1.5rem; height:1.5rem; border-radius:.35rem;
  border:1px solid color-mix(in srgb, var(--ink) 34%, var(--ground));
  background:transparent; cursor:pointer;
  display:grid; place-content:center;
  transition:background var(--speed) var(--easing), border-color var(--speed) var(--easing);
}
.cg-opt input:checked{background:var(--ink); border-color:var(--ink)}
.cg-opt input:checked::after{
  content:""; width:.75rem; height:.4rem;
  border-left:2px solid var(--ground); border-bottom:2px solid var(--ground);
  transform:translateY(-.1rem) rotate(-45deg);
}
.cg-opt input:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cg-opt label > span{flex:1; min-width:0}
.cg-opt em{
  font-style:normal; color:var(--soft); font-variant-numeric:tabular-nums;
  font-size:1.1rem;
}

.cg-clear{
  width:100%; margin-top:var(--s3); padding:1rem;
  border:1px solid color-mix(in srgb, var(--ink) 18%, var(--ground));
  border-radius:.8rem; background:transparent; color:var(--ink);
  font-family:var(--face-ui); font-size:1.15rem; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer;
  transition:border-color var(--speed) var(--easing), opacity var(--speed) var(--easing);
}
.cg-clear:hover{border-color:var(--ink)}
.cg-clear[disabled]{opacity:.3; cursor:default}

/* --- THE TOOLS: home, and the toggle that clears the plane ---
   One fixed cluster rather than two separately-placed buttons. They sit in
   the same corner and move together on every screen, so the narrow-screen
   rule that keeps them out of the rail's way is one line instead of two —
   and they cannot drift into each other. */
.cg-tools{
  position:fixed; z-index:75; top:var(--s3); left:calc(var(--rail) + var(--s3));
  display:flex; align-items:center; gap:var(--s2);
  transition:left var(--speed) var(--easing), right var(--speed) var(--easing),
             opacity var(--speed) var(--easing);
}
.cg-tool{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.9rem 1.4rem; border-radius:.8rem; border:0;
  background:color-mix(in srgb, var(--ink) 13%, var(--ground));
  color:var(--ink); font-family:var(--face-ui);
  font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  cursor:pointer; text-decoration:none; line-height:1;
  transition:background var(--speed) var(--easing);
}
.cg-tool:hover,.cg-tool:focus-visible{
  background:color-mix(in srgb, var(--ink) 22%, var(--ground));
}
/* BOTH MARKS ARE THE SAME HEIGHT, and they have to be. These are flex rows,
   so the tallest child sets the pill's height — a 13px house beside a 10px
   pair of rules made one button 31px and the other 29px, and two pills that
   nearly line up read worse than two that obviously do not. */
.cg-tool svg,.cg-tool i{display:block; flex:none; height:1.3rem}
/* two hairlines for the toggle, which is the mark this site uses everywhere
   a control has to stand for a list */
.cg-railtoggle i{width:1.4rem; position:relative}
.cg-railtoggle i::before,.cg-railtoggle i::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
}
.cg-railtoggle i::before{top:3px} .cg-railtoggle i::after{bottom:3px}

.cg-page.is-carded .cg-tools,
.cg-page.is-carded .cg-rail{opacity:0; pointer-events:none}
.cg-rail{transition:opacity var(--speed) var(--easing),
                    transform var(--speed) var(--easing)}

/* --- nothing matched --- */
.cg-none{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  margin:0; text-align:center; max-width:32rem;
  font-family:var(--face-ui); font-size:1.35rem; line-height:1.5; color:var(--soft);
  opacity:0; visibility:hidden;
  transition:opacity var(--speed) var(--easing), visibility var(--speed) var(--easing);
}
.cg-plane.is-empty .cg-none{opacity:1; visibility:visible}

/* --- narrow: the rail becomes a sheet over the plane --- */
@media (max-width:900px){
  :root{--rail:0px}
  .cg-rail{width:min(88vw, 32rem); transform:translateX(-100%)}
  .cg-page.is-railopen .cg-rail{transform:none}
  .cg-tools{left:var(--s3)}
  /* With the rail over the plane there is no room beside it — pushing the
     tools past its edge ran them off a 375px screen. They go to the opposite
     edge instead, where the toggle reads as the way out of the sheet.
     HOME STANDS DOWN while the sheet is up: at that width it would float on
     top of the sheet's own content, and the wordmark at the head of the rail
     already goes to the same place. */
  .cg-page.is-railopen .cg-tools{left:auto; right:var(--s3)}
  .cg-page.is-railopen .cg-home{display:none}
  .cg-title{display:none}
}

/* ==============================================================
   THE SHEET LEAVES BY HAND

   grid.js drags the rail with the finger while it is being dismissed, so
   the transform it writes has to land immediately — the transition on
   .cg-rail would otherwise put a quarter-second of easing between the
   finger and the sheet, which reads as lag rather than as weight.

   touch-action is the other half of it: without pan-y the browser claims
   horizontal panning before a pointermove ever arrives, and the swipe is
   swallowed by the page. pan-y leaves the filter list scrolling.
   ============================================================== */
.cg-rail.is-swiping{transition:none}
@media (max-width:900px){
  .cg-rail{touch-action:pan-y}
}

/* A FOLDED RAIL IS OUT OF REACH, NOT ONLY OUT OF SIGHT. Slid off the edge
   it still sat in the Tab order and in a screen reader's list. Hidden
   states drop visibility only once the slide has finished; showing brings
   it back at once, so the sheet is never invisible while it moves. */
.cg-page.is-railed .cg-rail,
.cg-page.is-carded .cg-rail{
  visibility:hidden;
  transition:opacity var(--speed) var(--easing), transform var(--speed) var(--easing),
             visibility 0s linear var(--speed);
}
@media (max-width:900px){
  .cg-page:not(.is-railopen) .cg-rail{
    visibility:hidden;
    transition:opacity var(--speed) var(--easing), transform var(--speed) var(--easing),
               visibility 0s linear var(--speed);
  }
}
.cg-rail.is-swiping{transition:none}

/* ==============================================================
   NOTHING HERE IS PICKED UP

   A photograph — and a link — can be dragged out of a page by default,
   Safari most eagerly: press on one, move, and the browser lifts a ghost
   of it for drag-and-drop. A swipe that starts on a picture then belongs
   to the browser instead of the plane or the stack, and nothing swipes.
   A sound card has no <img> in it, which is why it swiped and a photo did
   not. The pictures here are moved by grid.js and campaign.js, never by
   the browser, so none of them may be lifted. grid.js also refuses the
   dragstart itself, for the browsers that ignore the CSS.
   ============================================================== */
.cg-plane,.cg-plane *,.cg-stack,.cg-stack *,.cg-clone,.cg-clone *{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
}
.cg-tile img,.cg-card img,.cg-clone img{pointer-events:none}


/* ============================================================
   ALL CAMPAIGNS, REBUILT (13 September 2026)

   The page now carries the site's own top bar and follows the visitor's
   light or dark; the rail, the loose title, the tool cluster and the
   cursor disc are gone. What stays is the wall, the flight and the stack,
   which start below the head of the page instead of under a sidebar.
   ============================================================ */
:root{--rail:0px}
.cg-page body{overflow:hidden; height:100%}

/* THE NATIVE CURSOR IS BACK. The white disc replaced it everywhere on the
   page, which was a brand manual's flourish; with a search field, menus
   and chips in the head, people need to see where they are pointing. */
@media (hover:hover) and (pointer:fine){
  .cg-page,.cg-page body{cursor:auto}
  .cg-plane{cursor:grab}
  .cg-plane .cg-tile,.cg-plane .cg-tile *{cursor:pointer}
  .cg-plane.is-dragging,.cg-plane.is-dragging *{cursor:grabbing}
  .cg-stack,.cg-stack *{cursor:grab}
}

/* ---- the head: heading, count, view switch, filter bar, chips ---- */
.cg-head{
  position:relative; z-index:60;
  padding:.6rem var(--shell-pad) 1.4rem;
  background:var(--ground);
  transition:opacity var(--speed) var(--easing);
}
.cg-head_top{display:flex; align-items:center; justify-content:space-between; gap:1.6rem; margin:0 0 1.4rem}
.cg-h1{
  margin:0; display:flex; align-items:center; gap:1rem;
  font-family:var(--face-ui); font-weight:600; font-size:2.6rem; line-height:1; letter-spacing:-0.02em;
}
.cg-h1 em{
  font-style:normal; display:inline-grid; place-items:center;
  min-width:3rem; height:3rem; padding:0 1rem; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 9%, var(--ground)); color:var(--ink);
  font-size:1.35rem; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums;
}

/* the view switch: one pill track, the chosen side in ink */
/* NO TRACK BEHIND THE SWITCH (24 September 2026, client: "delete the big
   bubble behind both of these"). The selected half keeps its own fill —
   that is the small pill the client has always liked — and the unselected
   half now sits on the page instead of inside a grey capsule. Same note as
   the panels on the landing page: the fills went, the spacing stayed. */
.cg-views{
  display:inline-flex; flex:none; padding:.4rem 0; border-radius:999px;
  background:none;
}
.cg-view{
  display:inline-flex; align-items:center; gap:.8rem;
  height:3.6rem; padding:0 1.6rem; border:0; border-radius:999px;
  background:transparent; color:var(--soft); cursor:pointer;
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.cg-view:hover{color:var(--ink)}
.cg-view.is-on{background:var(--ink); color:var(--ground)}
.cg-view:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cg-view i{flex:none; display:grid; gap:.3rem; width:1.4rem; height:1.4rem}
.cg-view_grid{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
.cg-view_list{grid-template-rows:repeat(3, 1fr)}
.cg-view i s{display:block; background:currentColor; border-radius:.2rem}
.cg-view_list s{border-radius:99px}

/* the filter bar */
.cg-bar{display:flex; align-items:center; gap:.8rem; min-width:0}
.cg-search{
  display:flex; align-items:center; gap:.9rem; flex:0 1 34rem; min-width:22rem;
  height:4.4rem; padding:0 1.6rem; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground)); color:var(--soft);
  transition:box-shadow var(--speed) var(--easing), background var(--speed) var(--easing);
}
.cg-search:hover{background:color-mix(in srgb, var(--ink) 11%, var(--ground))}
.cg-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink)}
.cg-search svg{flex:none; width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.cg-search input{
  flex:1; min-width:0; height:100%; border:0; padding:0; background:none; outline:0;
  -webkit-appearance:none; appearance:none;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; color:var(--ink);
}
.cg-search input::placeholder{color:var(--soft); opacity:1}
.cg-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.cg-pills{display:flex; align-items:center; gap:.8rem; min-width:0; overflow-x:auto; scrollbar-width:none}
.cg-pills::-webkit-scrollbar{display:none}
.cg-pill{flex:none}
.cg-pillbtn{
  display:inline-flex; align-items:center; gap:.7rem;
  height:4.4rem; padding:0 1.5rem 0 1.7rem; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground)); color:var(--ink);
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.cg-pillbtn:hover{background:color-mix(in srgb, var(--ink) 14%, var(--ground))}
.cg-pillbtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cg-pillbtn.is-set{background:var(--ink); color:var(--ground)}
.cg-pillbtn em{font-style:normal; font-weight:600; font-variant-numeric:tabular-nums}
.cg-pillbtn em:empty{display:none}
.cg-pillbtn em::before{content:"\00b7"; margin-right:.5rem; opacity:.6}
.cg-pillbtn i{
  width:.65rem; height:.65rem; margin:-.3rem 0 0 .2rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--speed) var(--power3-out);
}
.cg-pillbtn[aria-expanded="true"] i{transform:translateY(.35rem) rotate(-135deg)}
.cg-tally{
  margin:0 0 0 auto; flex:none; padding-left:1.2rem;
  font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* a menu, fixed to the window under its pill */
.cg-menu{
  position:fixed; z-index:120; min-width:24rem; max-width:calc(100vw - 1.6rem);
  overflow-y:auto; overscroll-behavior:contain;
  padding:.6rem; 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 color-mix(in srgb, #000 22%, transparent);
}
.cg-mopt{
  display:flex; align-items:center; gap:1.1rem; width:100%;
  padding:1rem 1.2rem; border:0; border-radius:1.4rem;
  background:none; color:var(--ink); text-align:left; cursor:pointer;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500;
  transition:background var(--speed) var(--easing), opacity var(--speed) var(--easing);
}
.cg-mopt:hover,.cg-mopt:focus-visible{background:color-mix(in srgb, var(--ink) 8%, var(--ground)); outline:0}
.cg-mopt_t{flex:1; min-width:0}
.cg-mopt em{font-style:normal; color:var(--soft); font-size:1.3rem; font-variant-numeric:tabular-nums}
.cg-mopt.is-empty{opacity:.35}
.cg-mbox{
  flex:none; width:1.8rem; height:1.8rem; border-radius:.55rem;
  border:1.5px solid color-mix(in srgb, var(--ink) 35%, var(--ground));
  display:grid; place-items:center;
  transition:background var(--speed) var(--easing), border-color var(--speed) var(--easing);
}
.cg-mopt[aria-checked="true"] .cg-mbox{background:var(--ink); border-color:var(--ink)}
.cg-mopt[aria-checked="true"] .cg-mbox::after{
  content:""; width:.8rem; height:.42rem; margin-top:-.2rem;
  border-left:2px solid var(--ground); border-bottom:2px solid var(--ground); transform:rotate(-45deg);
}
.cg-mbox--radio{border-radius:50%}
.cg-mopt[aria-checked="true"] .cg-mbox--radio::after{
  width:.7rem; height:.7rem; margin:0; border:0; border-radius:50%; background:var(--ground); transform:none;
}

/* the chips: what is chosen, each one a way to remove itself */
.cg-chips{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.2rem}
.cg-chip{
  display:inline-flex; align-items:center; gap:.7rem;
  height:3.4rem; padding:0 .5rem 0 1.4rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ink) 20%, var(--ground)); background:none; color:var(--ink);
  font-family:var(--face-ui); font-size:1.35rem; font-weight:500; cursor:pointer;
  transition:border-color var(--speed) var(--easing), background var(--speed) var(--easing);
}
.cg-chip:hover,.cg-chip:focus-visible{border-color:var(--ink); outline:0}
.cg-chip i{
  position:relative; width:2.4rem; height:2.4rem; border-radius:50%;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
.cg-chip i::before,.cg-chip i::after{
  content:""; position:absolute; left:50%; top:50%; width:1rem; height:1.5px;
  background:currentColor; border-radius:2px;
}
.cg-chip i::before{transform:translate(-50%, -50%) rotate(45deg)}
.cg-chip i::after{transform:translate(-50%, -50%) rotate(-45deg)}
.cg-chip:hover i{background:var(--ink); color:var(--ground)}
.cg-clearall{
  margin-left:.4rem; padding:.6rem .8rem; border:0; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.35rem; font-weight:600; color:var(--soft);
  transition:color var(--speed) var(--easing);
}
.cg-clearall:hover,.cg-clearall:focus-visible{color:var(--ink); outline:0}

/* ---- the wall starts below the head ---- */
/* AND STAYS BELOW IT. The plane is a fixed box from the head down, but its
   tiles are placed by transform and nothing cut them off at its top edge:
   drag or wheel the wall up and they rose past the head, under which the
   head's own ground hid them, into the bar, whose ground is transparent and
   whose layer sat under the plane's. The plane now clips what it holds. */
.cg-plane{inset:var(--cg-top, 16rem) 0 0 0; overflow:hidden}
.cg-page .bar{z-index:65; background:var(--ground)}
.cg-foot{inset:auto 0 0 0}
/* the card page stands alone: the bar and the head step back with the wall */
.cg-page .bar{transition:opacity var(--speed) var(--easing)}
.cg-page.is-carded .bar,.cg-page.is-carded .cg-head{opacity:0; pointer-events:none; visibility:hidden}
.cg-stack{background:var(--ground)}

/* ---- THE LIST: a page of cards that scrolls like any other ---- */
.cg-page.is-list,.cg-page.is-list body{overflow:auto; height:auto}
.cg-page.is-list .cg-plane,.cg-page.is-list .cg-foot{display:none}
.cg-list{
  padding:.4rem var(--shell-pad) var(--s6);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(22rem, 1fr)); gap:3.2rem 1.6rem;
}
.cg-list[hidden]{display:none}
.cg-item{display:flex; flex-direction:column; min-width:0; color:var(--ink); text-decoration:none}
.cg-item_pic{
  display:block; aspect-ratio:3 / 4; overflow:hidden; border-radius:2rem; margin-bottom:1.2rem;
  background:color-mix(in srgb, var(--ink) 8%, var(--ground));
}
.cg-item_pic img{display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--speed-slow) var(--power3-out)}
.cg-item:hover .cg-item_pic img{transform:scale(1.04)}
.cg-item:focus-visible{outline:none}
.cg-item:focus-visible .cg-item_pic{outline:2px solid var(--ink); outline-offset:3px}
.cg-item_name{font-family:var(--face-ui); font-size:1.6rem; font-weight:600; letter-spacing:-0.01em; line-height:1.25}
.cg-item_tags{
  margin-top:.3rem; font-family:var(--face-ui); font-size:1.15rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
}
.cg-item_note{
  margin-top:.7rem; font-family:var(--face-ui); font-size:1.4rem; line-height:1.4; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cg-item_meta{margin-top:.7rem; font-family:var(--face-ui); font-size:1.3rem; color:var(--soft); font-variant-numeric:tabular-nums}
.cg-item_meta b{color:var(--ink); font-weight:600}
.cg-listnone{grid-column:1 / -1; margin:var(--s5) 0; text-align:center; font-family:var(--face-ui); font-size:1.5rem; color:var(--soft)}

/* ---- narrow: search on its own row, the pills scroll beneath ---- */
@media (max-width:900px){
  .cg-bar{flex-wrap:wrap}
  .cg-search{flex:1 1 100%; min-width:0}
  .cg-pills{flex:1 1 auto}
  .cg-tally{display:none}
}
/* ============================================================
   THE PHONE HEAD (24 September 2026, client: "see how the buttons fill up
   half the screen we need to organize it").

   Measured before: the controls ended 292px down a 812px phone and the
   first card did not start until 486px — 36% of the screen, and 44% on a
   667px phone, before anything you came to see.

   Five rows become two. The page title goes (the counts it carried live in
   the Artists / Campaigns switch, and the nav already says where you are),
   Wall/List collapses to one icon, and the four filter pills fold behind a
   second icon beside the search field. The pills reveal IN FLOW rather than
   in a sheet: their menus are position:fixed and placed by script against
   their button, and a sheet under them would have been a second floating
   layer to keep in step for no gain.

   Every rule here is inside the query. The desktop head is untouched. */
.cg-icon{
  display:none; flex:none; position:relative;
  width:4.4rem; height:4.4rem; padding:0; border:0; border-radius:999px;
  background:none; color:var(--soft);
  cursor:pointer; place-items:center;
  transition:color var(--speed) var(--easing);
}
.cg-icon svg{width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.cg-icon:hover{color:var(--ink)}
/* on is carried by the glyph going solid, not by a disc appearing behind it */
.cg-icon.is-on{color:var(--ink)}
.cg-icon:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* the count rides the corner so an active filter is visible with the pills shut */
.cg-icon em{
  position:absolute; top:.2rem; right:.2rem; min-width:1.7rem; height:1.7rem;
  display:none; place-items:center; padding:0 .4rem; border-radius:999px;
  background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.1rem; font-weight:700; font-style:normal;
  font-variant-numeric:tabular-nums;
}
.cg-icon.has-n em{display:grid}

@media (max-width:600px){
  .cg-h1{font-size:2.1rem}
  .cg-view{padding:0 1.2rem; font-size:1.3rem}
  .cg-list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.4rem 1.2rem}
  .cg-item_note{display:none}
}
@media (max-width:700px){
  .cg-h1{display:none}
  .cg-head_top>.cg-views:not(.cg-shows){display:none}   /* Wall / List — now an icon */
  .cg-head_l{width:100%}
  .cg-shows{flex:1 1 auto}
  .cg-icon{display:grid}
  .cg-bar{flex-wrap:wrap; gap:.8rem}
  .cg-search{flex:1 1 0; min-width:0; order:0}
  .cg-icon--filter{order:1}
  .cg-icon--view{order:2}
  /* revealed by the filter icon, and only then.

     ALL FOUR ACROSS, MADE TO FIT (24 September 2026). They were a row that
     scrolled sideways, and Sort hung off the edge — "i dont necessaril like
     how 'sort' is cut out". Two by two cured that and the client liked the
     single row better: "i liked when they were all next to eachother". So
     the row stays, and the pills are sized to the space instead of the space
     being asked to hold their natural width. Four equal columns, tighter
     padding and a step down in size buys the ~90px that was missing; a
     sideways scroll hid a control rather than showing it, and an equal
     division never can. */
  .cg-pills{
    order:3; flex:1 1 100%; display:none; margin-top:.2rem;
    grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.6rem; overflow:visible;
  }
  .cg-head.is-refining .cg-pills{display:grid}
  .cg-pill{width:100%; min-width:0}
  .cg-pillbtn{
    width:100%; justify-content:center; gap:.4rem;
    height:4rem; padding:0 .8rem; font-size:1.3rem;
  }
  .cg-pillbtn>span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .cg-pillbtn i{flex:none}
  .cg-pillbtn em{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .cg-pillbtn em::before{margin-right:.25rem}
  /* THE SORT PILL DROPS ITS VALUE HERE (24 September 2026, client: "some of
     these dont fit inside the pill"). The filter pills put a COUNT in that
     slot — one character — but the sort pill puts the whole chosen name in
     it, and "Ending soonest" is wider than the quarter of a phone the pill
     has to live in. Truncating it to "Ending so…" tells you less than
     nothing; the pill going solid already says a sort is chosen, and the
     menu it opens says which, with the radio marked. */
  .cg-pillbtn[aria-controls="cgmenu-sort"] em{display:none}
}
/* the narrowest phones still in use have about 55px less to divide up */
@media (max-width:360px){
  .cg-pillbtn{padding:0 .5rem; font-size:1.2rem; gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  .cg-pillbtn i,.cg-item_pic img,.cg-view,.cg-chip,.cg-mopt{transition:none}
}

/* ============================================================
   THE WALL RUNS UNDER THE WORDS (client, 13 September 2026: "the campaigns
   go on the whole page ... it goes behind the words and the words change
   color, the campaigns are the priority").

   What the reference does, read off its stylesheet: the grid is fixed to
   the whole window, the nav is fixed over it with no background and
   pointer-events:none, and its wordmark is white with
   mix-blend-mode:difference — white over black stays white, and over a
   picture it prints that picture's negative.

   Here the bar, the head and the foot line all take that treatment. Each
   one is drawn in pure white on pure black (--ink #fff, --ground #000) and
   the difference blend does the rest, in both of the visitor's modes:
   white text over the light ground comes out near-black, the grey pills
   come out light grey, the filled pills come out as ink — the page looks as
   it did — and anything a tile slides under turns to its negative.
   The empty stretches of the bar and head let the pointer through to the
   wall, so a tile behind a heading can still be dragged or opened.
   ============================================================ */
.cg-plane{inset:0}
.cg-page .bar,.cg-head,.cg-foot{
  --ink:#FFFFFF; --ground:#000000; --soft:#8A8A8A; --rule:#4A4A4A;
  color:var(--ink); background:none;
  mix-blend-mode:difference;
}
.cg-page .bar,.cg-head{pointer-events:none}
.cg-page .bar a,.cg-page .bar button,
.cg-head a,.cg-head button,.cg-head input,.cg-head label{pointer-events:auto}
/* YOUR PROFILE PICTURE KEEPS ITS COLOURS (29 September 2026, client: "keep
   the effect but make it so it doesnt affect the profile picture"). Nothing
   inside the bar can step out of its difference blend, so on a white page
   the picture is inverted first and the blend inverts it back: the photo
   as it is. On a black page the blend leaves colours alone, so nothing is
   done there. (A tile sliding under it still prints its negative, as the
   rest of the bar does.) */
:root.cg-page:not([data-world="black"]) .bar-me img{filter:invert(1)}
/* the one hard colour in the bar: Log in's purple hover would print as its
   negative, green, so here it dims instead */
.cg-page .bar-login:hover,.cg-page .bar-login:focus-visible{background:#B8B8B8; color:#000}

/* ============================================================
   DISCOVER (16 September 2026) — the Artists / Campaigns switch beside the
   heading, in the view switch's own track. Shuffle sat in the pill row until
   24 September 2026, when the client had it removed.
   ============================================================ */
.cg-head_l{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; min-width:0}
.cg-show{
  display:inline-flex; align-items:center; gap:.7rem;
  height:3.6rem; padding:0 1.6rem; border:0; border-radius:999px;
  background:transparent; color:var(--soft); cursor:pointer;
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.cg-show:hover{color:var(--ink)}
.cg-show.is-on{background:var(--ink); color:var(--ground)}
.cg-show:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.cg-show em{font-style:normal; font-weight:500; opacity:.6; font-variant-numeric:tabular-nums}
.cg-note b a{color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size var(--speed) var(--easing)}
.cg-note b a:hover,.cg-note b a:focus-visible{background-size:100% 1.5px}
@media (max-width:600px){
  .cg-head_top{flex-wrap:wrap; align-items:flex-start}
  .cg-head_l{gap:1rem}
  .cg-show{padding:0 1.2rem; font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){ .cg-show,.cg-note b a{transition:none} }
/* a video cover never catches the drag or the tap meant for its tile */
.cg-tile video{pointer-events:none}
.cg-tile_note,.cg-tile_bar b{overflow-wrap:anywhere; word-break:break-word}

/* an artist with no profile picture: the figure every profile starts with
   (people.js), in the same two greys as on the profile — 28 September 2026 */
.cg-nobody{
  position:relative; display:block;
  width:100%; height:100%; border-radius:10%; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, var(--ground));
  color:color-mix(in srgb, var(--ink) 30%, var(--ground));
}
/* framed as a portrait photograph, not an icon floating in a box: the head
   in the upper middle, the shoulders running off the bottom edge */
.cg-nobody svg{position:absolute; display:block; width:125%; height:125%; left:-12.5%; top:-5%; fill:currentColor}