/* Milan Art Gallery voting. Same design language as the show pages:
   near-black ground, gold accent, Playfair Display over Inter. */
:root{
  --bg:#0a0a0a;
  --panel:#121212;
  --text:#e8e4df;
  --muted:rgba(232,228,223,.62);
  --accent:#c9a96e;
  --accent-hi:#e8d5a3;
  --line:rgba(201,169,110,.24);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

header.top{padding:56px 24px 28px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06)}
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,5vw,3.2rem);margin:0 0 10px;line-height:1.15}
.award{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--accent);margin:0 0 18px}
.lede{max-width:620px;margin:0 auto;color:var(--muted);font-size:.95rem}

/* sticky counter */
.counter{position:sticky;top:0;z-index:40;background:rgba(10,10,10,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:14px 24px;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.counter strong{color:var(--accent);font-variant-numeric:tabular-nums}
.counter .go{padding:11px 26px;font-size:.76rem}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;padding:34px 0 20px}
.card{background:var(--panel);border:1px solid transparent;position:relative;
  transition:border-color .18s,transform .18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px)}
.card.on{border-color:var(--accent)}
.card .shot{position:relative;background:#000;overflow:hidden}
.card img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.card .meta{padding:13px 14px 15px}
.card .t{font-family:var(--serif);font-size:1.02rem;line-height:1.3}
.card .a{font-size:.8rem;color:var(--muted);margin-top:3px}
.card .m{font-size:.72rem;color:rgba(232,228,223,.42);margin-top:6px}
.card .p{font-size:.8rem;color:var(--accent);margin-top:8px}
.row{display:flex;gap:8px;padding:0 14px 14px}
button{font-family:var(--sans);cursor:pointer;border:none}
.pick{flex:1;padding:11px 10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--text);border:1px solid var(--line);transition:all .18s}
.pick:hover{border-color:var(--accent);color:var(--accent-hi)}
.card.on .pick{background:var(--accent);color:#0a0a0a;border-color:var(--accent);font-weight:600}
.look{padding:11px 12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.1);text-decoration:none;
  display:inline-flex;align-items:center}
.look:hover{color:var(--text)}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#0a0a0a;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;padding:5px 9px;text-transform:uppercase}

/* comment box appears on the selected card */
.note{padding:0 14px 14px;display:none}
.card.on .note{display:block}
.note label{display:block;font-size:.72rem;color:var(--muted);margin-bottom:6px}
.note textarea{width:100%;min-height:74px;resize:vertical;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:.86rem;
  padding:9px 10px;border-radius:2px}
.note textarea:focus{outline:none;border-color:var(--accent)}
.note .count{font-size:.68rem;color:rgba(232,228,223,.38);text-align:right;margin-top:4px}

/* submit panel */
.panel{background:var(--panel);border:1px solid var(--line);padding:30px;margin:20px 0 70px}
.panel h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 8px}
.panel p.sub{color:var(--muted);font-size:.88rem;margin:0 0 20px}
.chosen{list-style:none;padding:0;margin:0 0 20px}
.chosen li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.9rem}
.chosen .who{color:var(--muted);font-size:.8rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields input{width:100%;padding:13px 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:.95rem;border-radius:2px}
.fields input:focus{outline:none;border-color:var(--accent)}
.fields input::placeholder{color:rgba(232,228,223,.36)}
.cta{margin-top:14px;width:100%;padding:16px;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:#0a0a0a;
  background:linear-gradient(105deg,#b8943f 0%,#dbbf8a 25%,#c9a96e 50%,#e8d5a3 75%,#c9a96e 100%);
  background-size:200% 100%;animation:shimmer 3s ease-in-out infinite}
.cta:disabled{opacity:.45;cursor:not-allowed;animation:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.fine{font-size:.74rem;color:rgba(232,228,223,.45);margin-top:12px}
.msg{margin-top:12px;font-size:.86rem;display:none}
.msg.err{color:#e0736b;display:block}

/* done */
.done{display:none;text-align:center;padding:56px 24px 80px}
.done h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,4vw,2.2rem);color:var(--accent);margin:0 0 14px}
.done p{color:var(--muted);max-width:520px;margin:0 auto 10px}
.done .list{margin:22px auto 0;max-width:460px;text-align:left}
.done .list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}

footer{border-top:1px solid rgba(255,255,255,.06);padding:30px 24px 46px;text-align:center;
  color:rgba(232,228,223,.4);font-size:.78rem}
.closed{text-align:center;padding:80px 24px}

@media(max-width:640px){
  .fields{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .counter{padding:11px 16px;gap:12px}
}
@media(prefers-reduced-motion:reduce){.cta{animation:none}.card{transition:none}}