/* =====================================================================
   CLAIM YOUR CARD: /artists/<slug>/claim and the artist's private
   page /card/<token>. Uses site.css tokens and artist.css's card.
   Plan: plan/ARTIST-CLAIMS.md
   ===================================================================== */
.cl-hero{padding:clamp(32px, 4.4vw, 60px) 0 clamp(48px, 6vw, 84px)}
.cl-hero__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px, 5vw, 80px); align-items:center}
.cl-hero .crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.cl-hero .crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5}
.cl-hero .crumbs a{text-decoration:underline; text-underline-offset:3px}
.cl-hero .crumbs a[aria-current]{text-decoration:none}
.cl-hero__card{display:flex; justify-content:center; padding:12px 0}
/* Without this the h1 fell back to the browser's default size above phone width (site.css only sizes .hero-band h1 on phones). */
@media (min-width:761px){.cl-hero h1{font-size:clamp(58px, 7.2vw, 118px); line-height:.86}}

.cl-perks{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:620px}
.cl-perks li{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:16px; background:rgba(11,11,11,.08); box-shadow:inset 0 0 0 2px rgba(11,11,11,.14)}
.cl-perks b{font-family:var(--font-display); font-size:22px; line-height:1; letter-spacing:.02em; color:var(--ink)}
.cl-perks span{font-size:14px; line-height:1.4; color:var(--on-orange-muted)}

.cl-stack{display:grid; gap:20px; max-width:860px}
.cl-panel{position:relative; max-width:860px; border-radius:26px; padding:clamp(22px, 3vw, 34px); background:var(--ink-2); color:var(--text); box-shadow:var(--frame); --jt-depth:var(--juice-deep)}
.cl-panel > .kicker{display:block; margin-bottom:8px}
.cl-panel > .juice-type{margin-bottom:14px}
.cl-hint{font-size:14px; color:var(--muted); margin:0 0 14px}
.cl-ok{font-size:16px; font-weight:600; color:var(--cream)}

.cl-form{gap:16px}
.cl-step{border:0; margin:0; padding:0 0 22px; border-bottom:1px solid var(--line); min-width:0}
.cl-step:last-of-type{border-bottom:0; padding-bottom:4px}
.cl-step legend{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-family:var(--font-display); font-size:clamp(24px, 2.4vw, 30px); line-height:1; letter-spacing:.01em; text-transform:uppercase}
.cl-step legend i{font-family:var(--font-body, inherit); font-size:14px; font-style:normal; text-transform:none; color:var(--dim)}
.cl-num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--juice); color:var(--ink); font-size:20px; flex:none}
.cl-form .field label i{font-style:normal; color:var(--dim); font-weight:500}
.cl-form textarea.input{height:auto; padding:14px 16px; line-height:1.5}
.cl-form input[type=file].input{padding:14px 16px; height:auto}

.cl-photo{display:flex; align-items:center; gap:14px}
.cl-photo > img,.cl-photo > span{width:64px; height:88px; flex:none; border-radius:10px; object-fit:cover; display:grid; place-items:center; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2); font-size:24px}

.cl-check{display:flex; gap:12px; align-items:flex-start; margin:0 0 12px; font-size:15px; line-height:1.45; color:var(--text); cursor:pointer}
.cl-check input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--juice); flex:none}

.cl-done{display:grid; gap:16px; justify-items:start}
.cl-done p{max-width:56ch; font-size:17px; margin:0}
.cl-code{display:inline-flex; flex-direction:column; align-items:flex-start; gap:6px; margin:4px 0; padding:16px 22px; border:0; border-radius:16px; background:var(--cream); color:var(--ink); font-family:var(--font-mono); font-size:clamp(30px, 5vw, 44px); font-weight:800; letter-spacing:.08em; cursor:pointer}
.cl-code small{font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}

.cl-resend{display:grid; gap:10px; margin:6px 0 16px}
.cl-resend .row-flex .input{flex:1 1 240px; width:auto}
.cl-share__url{font-family:var(--font-mono); font-size:15px; color:var(--cream); word-break:break-all; margin:0 0 14px}
.cl-share .row-flex{margin-bottom:12px}
.cl-consent .field{max-width:320px; margin-top:6px}

@media (max-width:820px){
  .cl-hero__grid{grid-template-columns:1fr}
  .cl-hero__card{order:-1}
  .cl-perks{grid-template-columns:1fr}
}