/* /submit/ (submit.mjs). The page is built on the /sponsor/ page and its sponsor.css; these are only the extras. */

/* "Recently featured" studio names in place of the sponsor logo row */
.sf-trust .sf-studio{color:#fff;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;opacity:.88;white-space:nowrap}
@media (max-width:760px){.sf-trust .sf-studio{font-size:20px}}

/* What we look for: four white cards on the light band */
.sf-look{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sf-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:22px;padding:24px 22px 26px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 36px rgba(0,0,0,.06)}
.sf-card h3{margin:0 0 10px;font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:700;color:#0b0b0b}
.sf-card p{margin:0;font-size:14.5px;line-height:1.5;color:#444}

/* Featured lately: the four newest projects */
.sp-light .sf-recent-sec{padding-top:72px}
.sf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sp-light .sf-head .sp-link{color:#0b0b0b}
.sf-recent{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.sf-recent a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#0b0b0b;min-width:0}
.sf-img{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#e6e3dc;margin-bottom:10px}
.sf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.sf-recent a:hover .sf-img img{transform:scale(1.03)}
.sf-recent b{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-recent span:not(.sf-img){font-size:14px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the form: "You are" is one pick, so round markers and three in a row */
.sf .sf-who .sp-chips-in{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf .sp-chips-in input[type=radio]+span:before{border-radius:50%}
.sf .sp-chips-in input[type=radio]:checked+span:before{background:var(--y);box-shadow:inset 0 0 0 3px #1a1a1a;border-color:var(--y)}
.sf .sp-form .sp-f input[aria-invalid=true],.sf .sp-form .sp-f textarea[aria-invalid=true]{border-color:#f87171}

/* thanks state: takes the whole glass box, centred, in place of the form */
.sf-sent:focus{outline:0}
.sf .sf-sent{grid-column:1/-1;justify-self:center;text-align:center;max-width:560px;padding:20px 0}
.sf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.sf-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.sf-ghost:hover{background:rgba(255,255,255,.14)!important}

@media (max-width:1023px){
  .sf-look,.sf-recent{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .sf-look{grid-template-columns:1fr;gap:10px}
  .sf-card{padding:20px 18px 22px;border-radius:18px}
  .sf-card h3{font-size:19px}
  .sf-recent{gap:12px}
  .sf .sf-who .sp-chips-in{grid-template-columns:1fr}
  .sf-acts .sp-btn{flex:1 1 100%}
}
.sf .sp-form[hidden],.sf .sp-form-head[hidden],.sf .sp-sent[hidden]{display:none!important}
/* role chips: one line each, sized to their label on wide screens */
@media (min-width:601px){.sf .sf-who .sp-chips-in{display:flex;flex-wrap:wrap}.sf .sf-who .sp-chips-in label{flex:none}.sf .sf-who .sp-chips-in span{white-space:nowrap}}
/* the big "picked by hand" line sits in the form band over the moving covers, centred above the glass form, at the statement size */
.sf .sf-top{position:relative;z-index:1;max-width:1120px;margin:0 auto 72px;text-align:center}
.sf .sf-top .sp-big{margin:0 auto;text-shadow:0 2px 30px rgba(0,0,0,.55)}
@media (max-width:860px){.sf .sf-top{margin-bottom:36px}}
/* The band clips its moving covers. With overflow:hidden it is still a scroll box, so a browser scrolling the thanks message
   into view could slide the whole band up inside itself and cut the headline off at the top. overflow:clip can't be scrolled. */
.sf>.sp-form-band{overflow:clip}