/* Cratelo — campaigns collection. White-label pressing.
   Self-contained on purpose: the collection preview loads only this file, so
   every colour, font and class it names is defined here rather than borrowed
   from the page.

   TYPE: Archivo only (Space Mono is retired site-wide), sentence case, no
   font-stretch. A card is a listing — it keeps its edge, because it is a
   clickable object — but the type inside it doesn't shout.

   COVERS ARE PHOTOGRAPHS of the artist with their name set on them, so the
   two chips that sit over the artwork (`.camp-badge`, `.camp-type`) get a
   soft top scrim behind them. Without it they vanish on a light photo. The
   scrim is on the COVER, not the image, so it survives any crop.

   DEPTH + MOTION (Aug 24): the shadow steps and the easing curve are copied
   from styles.css rather than referenced, because this file has to stand
   alone in the collection preview. If the scale changes there, change it
   here too — a card floating at a different height from the rest of the
   page is the kind of thing you feel without being able to name. */

.camp-card,
.camp-full{
  --sleeve:#FFFFFF;
  --panel:#F3F7FD;
  --panel-2:#E7EEF9;
  --ink:#0E1116;
  --body:#454B55;
  --muted:#6B7280;
  --hair:rgba(14,25,45,.13);
  --hair-soft:rgba(14,25,45,.07);
  --blue:#0B84FF;
  --blue-btn:#0A63C4;
  --blue-hi:#0A5FBF;
  --lift:0 8px 8px rgba(14,25,45,.04),0 4px 4px rgba(14,25,45,.04),
         0 2px 2px rgba(14,25,45,.04);
  --lift-md:0 16px 24px rgba(14,25,45,.06),0 8px 12px rgba(14,25,45,.05),
            0 3px 5px rgba(14,25,45,.04);
  --ease:cubic-bezier(.16,1,.3,1);
  --ring:0 0 0 3px rgba(11,132,255,.32);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  container-type:inline-size;
  font-family:var(--sans);
  color:var(--body);
  box-sizing:border-box;
}
.camp-card *,.camp-full *{box-sizing:border-box;}

/* ============================== CARD ============================== */

.camp-card{
  display:flex;
  flex-direction:column;
  background:var(--sleeve);
  border:1px solid var(--hair);
  box-shadow:var(--lift);
  text-decoration:none;
  color:var(--body);
  transition:border-color .16s ease,box-shadow .2s ease,transform .2s var(--ease);
}
.camp-card:hover{
  border-color:rgba(11,132,255,.5);
  box-shadow:var(--lift-md);
  transform:translateY(-3px);
}
.camp-card:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--blue);}

.camp-cover{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0B0A09;
  border-bottom:1px solid var(--hair-soft);
}
/* keeps the two chips legible over a light photograph */
.camp-cover::before{
  content:"";position:absolute;inset:0 0 auto 0;height:38%;z-index:1;
  background:linear-gradient(to bottom,rgba(8,12,18,.5),transparent);
  pointer-events:none;
}
.camp-art{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .3s var(--ease);
}
.camp-card:hover .camp-art{transform:scale(1.03);}

.camp-badge,.camp-type{
  position:absolute;z-index:2;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:-.005em;
  padding:6px 11px;
  line-height:1.2;
  border-radius:999px;
}
.camp-badge{top:10px;left:10px;background:var(--blue-btn);color:#fff;}
.camp-card[data-status="Complete"] .camp-badge,
.camp-card[data-status="Closed"] .camp-badge{background:rgba(14,17,22,.85);color:#fff;}
.camp-type{
  top:10px;right:10px;
  background:rgba(14,17,22,.62);
  color:#F7F5F1;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.camp-type:empty{display:none;}

.camp-body{display:flex;flex-direction:column;gap:0;padding:20px 20px 18px;flex:1;}
.camp-artist{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue-hi);margin-bottom:9px;
}
.camp-name{
  display:block;color:var(--ink);font-weight:650;letter-spacing:-.028em;
  line-height:1.22;font-size:1.15rem;margin-bottom:18px;
}

.camp-nums{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair-soft);margin-top:auto;
}
.camp-num{display:block;padding:14px 0;}
.camp-num-r{text-align:right;}
.camp-num b{
  display:block;font-weight:700;letter-spacing:-.04em;color:var(--ink);
  font-size:1.35rem;line-height:1;font-variant-numeric:tabular-nums;
}
.camp-num-r b{color:var(--blue-hi);}
.camp-num i{
  display:block;font-style:normal;font-size:.76rem;font-weight:500;
  color:var(--muted);margin-top:7px;
}

.camp-bar{display:block;height:3px;background:var(--panel-2);overflow:hidden;}
.camp-fill{display:block;height:100%;background:var(--blue);min-width:0;}
.camp-left{display:block;font-size:.78rem;color:var(--muted);margin-top:10px;}

.camp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:15px;padding-top:14px;border-top:1px solid var(--hair-soft);
}
.camp-plat{font-size:.8rem;color:var(--body);}
.camp-go{font-size:.8rem;font-weight:600;color:var(--blue-hi);
  display:inline-flex;align-items:center;gap:5px;}
.camp-go::after{content:"→";display:inline-block;transition:transform .2s var(--ease);}
.camp-card:hover .camp-go{color:var(--blue);}
.camp-card:hover .camp-go::after{transform:translateX(3px);}

@container (max-width:230px){
  .camp-name{font-size:1rem;}
  .camp-num b{font-size:1.12rem;}
}

/* ============================ DETAIL ============================ */

.camp-full{display:block;color:var(--body);font-size:17px;line-height:1.65;}

.cf-head{
  display:grid;grid-template-columns:200px 1fr;
  gap:clamp(22px,3.4vw,40px);align-items:start;
}
@container (max-width:640px){.cf-head{grid-template-columns:1fr;}}
.cf-art{
  border:1px solid var(--hair-soft);background:#0B0A09;
  aspect-ratio:1/1;overflow:hidden;box-shadow:var(--lift);
}
@container (max-width:640px){.cf-art{max-width:200px;}}
.cf-art img{display:block;width:100%;height:100%;object-fit:cover;}

.cf-eye{display:block;font-size:.78rem;font-weight:500;color:var(--muted);margin-bottom:1.1em;}
.cf-eye b{color:var(--blue-hi);font-weight:600;}

.cf-title{
  margin:0 0 .3em;color:var(--ink);font-weight:700;letter-spacing:-.035em;
  line-height:1.08;font-size:clamp(1.85rem,5cqi,2.9rem);
}
.cf-artist{margin:0 0 1.6em;color:var(--body);font-size:1.05rem;}

/* the money row keeps an edge — it is the number you came for */
.cf-money{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);
  align-items:center;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);background:transparent;padding:22px 0;
}
@container (max-width:520px){.cf-money{grid-template-columns:1fr;gap:20px;}}
.cf-rate b{
  display:block;font-weight:700;letter-spacing:-.045em;color:var(--blue-hi);
  font-size:clamp(2rem,5cqi,2.7rem);line-height:1;font-variant-numeric:tabular-nums;
}
.cf-rate i{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:9px;}
.cf-brow{display:block;font-size:.88rem;color:var(--body);margin-bottom:10px;}
.cf-brow em{font-style:normal;color:var(--ink);font-weight:650;}
.cf-bar{display:block;height:5px;background:var(--panel-2);overflow:hidden;}
.cf-fill{display:block;height:100%;background:var(--blue);min-width:0;}
.cf-paid{display:block;font-size:.8rem;color:var(--muted);margin-top:10px;}

.cf-facts{
  margin:clamp(26px,3.6vw,42px) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px);
}
@container (max-width:640px){.cf-facts{grid-template-columns:repeat(2,1fr);row-gap:24px;}}
.cf-facts div{padding:0;border:0;}
.cf-facts dt{font-size:.78rem;font-weight:500;color:var(--muted);margin-bottom:6px;}
.cf-facts dd{margin:0;color:var(--ink);font-weight:650;font-size:1rem;letter-spacing:-.015em;}

.cf-cols{
  display:grid;grid-template-columns:1fr 320px;gap:clamp(30px,4vw,64px);
  margin-top:clamp(30px,4vw,50px);align-items:start;
}
@container (max-width:760px){.cf-cols{grid-template-columns:1fr;}}

.cf-h{
  margin:0 0 1em;color:var(--ink);font-weight:650;letter-spacing:-.022em;
  font-size:1.12rem;line-height:1.3;padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.cf-main .cf-h:not(:first-child){margin-top:2.6em;}

.cf-brief{margin:0;white-space:pre-line;max-width:62ch;}

.cf-rules{margin:0;padding:0;list-style:none;counter-reset:cr;}
.cf-rules li{
  counter-increment:cr;display:flex;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--hair-soft);font-size:.98rem;line-height:1.6;
}
.cf-rules li::before{
  content:counter(cr,decimal-leading-zero);font-size:.8rem;font-weight:600;
  color:var(--blue-hi);flex:none;padding-top:.2em;font-variant-numeric:tabular-nums;
}
.cf-rules:empty{display:none;}

.cf-board{width:100%;border-collapse:collapse;font-size:.95rem;}
.cf-board th{
  text-align:left;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:0 14px 11px 0;
  border-bottom:1px solid var(--hair);
}
.cf-board td{
  padding:13px 14px 13px 0;border-bottom:1px solid var(--hair-soft);
  color:var(--body);font-variant-numeric:tabular-nums;
}
.cf-board tbody tr{transition:background .16s ease;}
.cf-board tbody tr:hover{background:var(--panel);}
.cf-board td:first-child{color:var(--ink);font-weight:650;}
.cf-board td:last-child{color:var(--blue-hi);font-weight:650;}
.cf-board tbody:empty{display:none;}
.cf-boardnote{margin:15px 0 0;font-size:.84rem;color:var(--muted);line-height:1.7;}

/* the sidebar is a column, not a card */
.cf-side{border-top:2px solid var(--hair);background:transparent;padding:22px 0 0;}
.cf-side .cf-h{font-size:1rem;}
.cf-sidenote{font-size:.84rem;color:var(--muted);line-height:1.7;margin:0 0 18px;}
.cf-asset{
  display:block;border:1px solid var(--hair);padding:15px 17px;
  text-decoration:none;margin-bottom:10px;
  transition:border-color .16s ease,background .16s ease,transform .2s var(--ease);
}
.cf-asset:hover{border-color:var(--blue);background:var(--panel);transform:translateY(-1px);}
.cf-asset:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--blue);}
.cf-asset b{
  display:block;color:var(--ink);font-weight:650;font-size:1rem;
  letter-spacing:-.018em;margin-bottom:4px;
}
.cf-asset i{display:block;font-style:normal;font-size:.82rem;color:var(--blue-hi);}
.cf-asset[href=""]{display:none;}
.cf-join{
  display:block;text-align:center;background:var(--blue-btn);color:#fff;
  border:1px solid var(--blue-btn);border-radius:999px;
  font-size:.92rem;font-weight:600;padding:14px 18px;text-decoration:none;
  margin:18px 0;transition:background .16s ease,transform .2s var(--ease);
}
.cf-join:hover{background:#0B84FF;transform:translateY(-1px);}
.cf-join:active{transform:translateY(0) scale(.985);transition-duration:.08s;}
.cf-join:focus-visible{outline:none;box-shadow:var(--ring);}

.camp-full[data-status="Complete"] .cf-join,
.camp-full[data-status="Closed"] .cf-join{
  background:transparent;color:var(--muted);border-color:var(--hair);pointer-events:none;
}
/* a dead control gets no hover, no press, no lift — teasing
   interactivity on something that can't be clicked is worse than flat */
.camp-full[data-status="Complete"] .cf-join:hover,
.camp-full[data-status="Closed"] .cf-join:hover{transform:none;background:transparent;}

@media(prefers-reduced-motion:reduce){
  .camp-card,.camp-art,.cf-asset,.cf-join,.cf-board tbody tr,.camp-go::after{transition:none;}
  .camp-card:hover{transform:none;}
  .camp-card:hover .camp-art{transform:none;}
  .cf-asset:hover,.cf-join:hover{transform:none;}
  .camp-card:hover .camp-go::after{transform:none;}
}