/* La Zic — Community selection. Served at /pages/p/la-zic. */
:root{
  --sky:#0a0f22; --sky-2:#1b2140; --dusk:#e9a887; --cream:#ece6de; --ink:#14172a;
  --text:#e7e4ee; --muted:rgba(231,228,238,.62); --faint:rgba(231,228,238,.32);
  --line:rgba(255,255,255,.09); --card:rgba(9,12,28,.58);
  --track:.22em;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--sky); color:var(--text);
  font-family:"Jost","Futura","Avenir Next","Helvetica Neue",sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
#bg{position:fixed; inset:0; z-index:0; background:#0a0f22 url("bg.jpg") center/cover no-repeat}
#bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,9,22,.35) 0%, rgba(6,9,22,.15) 45%, rgba(6,9,22,.3) 100%)}
.page{position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; padding:34px 56px 40px}

/* header — the brand mark is the supplied signature logo */
header{display:flex; align-items:flex-start}
.logo{display:inline-block; line-height:0}
.logo img{display:block; height:78px; width:auto}
footer{display:flex; justify-content:center; margin-top:auto; padding-top:36px}

/* hero */
.hero{text-align:center; margin-top:30px}
.eyebrow{font-size:10.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--muted)}
h1{font-weight:300; font-size:clamp(24px,2.6vw,36px); letter-spacing:.22em; text-transform:uppercase; line-height:1.35; margin:22px 0 18px; padding-left:.22em}
.lede{font-size:14.5px; letter-spacing:.12em; color:var(--text); opacity:.9; max-width:680px; margin:0 auto; line-height:1.75}
.lede-2{margin-top:12px; opacity:.72}

/* toolbar */
.bar{display:flex; align-items:flex-end; justify-content:space-between; margin-top:24px; gap:24px; flex-wrap:wrap}
.count{font-size:10.5px; letter-spacing:var(--track); text-transform:uppercase; color:var(--muted)}
.tools{display:flex; align-items:center; gap:30px}
.search{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:6px 2px}
.search svg{width:18px; height:18px; stroke:var(--text); fill:none; stroke-width:1.4; opacity:.85}
.search input{background:none; border:0; outline:0; color:var(--text); font:inherit; font-size:13px; letter-spacing:.06em; width:170px}
.search input::placeholder{color:var(--faint)}
.search:focus-within{border-color:rgba(255,255,255,.35)}
.sort{display:flex; align-items:center; gap:14px; font-size:13px; letter-spacing:.06em; color:var(--muted)}
.sort label{white-space:nowrap}
.sel{position:relative; border-bottom:1px solid var(--line)}
.sel select{appearance:none; -webkit-appearance:none; background:none; border:0; color:var(--text); font:inherit; font-size:14.5px; letter-spacing:.04em; padding:6px 26px 6px 2px; outline:0; cursor:pointer}
.sel select option{background:#141a33; color:#fff}
.sel::after{content:""; position:absolute; right:6px; top:12px; width:7px; height:7px; border-right:1px solid var(--text); border-bottom:1px solid var(--text); transform:rotate(45deg); pointer-events:none}
.sel:focus-within{border-color:rgba(255,255,255,.35)}
.view{display:flex; gap:6px}
.view button{width:30px; height:30px; border:1px solid transparent; border-radius:4px; background:none; cursor:pointer; padding:0; display:grid; place-items:center}
.view svg{width:15px; height:15px; fill:none; stroke:var(--faint); stroke-width:1.3}
.view button:hover svg{stroke:var(--text)}
.view button[aria-pressed="true"]{border-color:var(--line); background:rgba(255,255,255,.06)}
.view button[aria-pressed="true"] svg{stroke:#fff}
.view button:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* list view */
.grid.list{grid-template-columns:1fr; gap:8px}
.list .card{display:grid; grid-template-columns:34px 92px 1fr auto 40px 200px; grid-template-rows:auto auto; grid-template-areas:"n art t dur more pick" "n art a dur more pick"; align-items:center; column-gap:18px; padding:8px 14px 8px 12px}
.list .card::before{content:attr(data-n); grid-area:n; font-size:10.5px; letter-spacing:.2em; color:var(--muted)}
.list .art{grid-area:art; aspect-ratio:4/3; width:92px}
.list .num{display:none}
.list .play{width:30px; height:30px; margin:-15px 0 0 -15px}
.list .play svg{width:11px; height:11px}
.list .ring{width:38px; height:38px; margin:-19px 0 0 -19px}
.list .meta,.list .meta2{display:contents}
.list .t{grid-area:t; font-size:15px; letter-spacing:.04em; color:#fff; align-self:end}
.list .a{grid-area:a; font-size:11.5px; letter-spacing:.16em; color:var(--muted); align-self:start; margin-top:3px}
.list .dur{grid-area:dur; font-size:12.5px; color:var(--muted); letter-spacing:.08em; padding-right:8px}
.list .more{grid-area:more; justify-self:center}
.list .pick{grid-area:pick; margin:0}
@media (max-width:820px){ .list .card{grid-template-columns:70px 1fr auto; grid-template-areas:"art t dur" "art a more" "pick pick pick"; column-gap:12px; row-gap:6px} .list .card::before{display:none} .list .art{width:70px} .list .pick{margin-top:4px} }

/* grid */
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:16px; transition:opacity .35s}
.grid.busy{opacity:.35}
.card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:9px 9px 14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card:focus-within{border-color:rgba(255,255,255,.28)}
.art{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:#0b0f22}
.art img{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center 42%}
.num{position:absolute; top:8px; left:8px; font-size:10.5px; letter-spacing:.2em; color:#fff; z-index:2; background:rgba(4,8,20,.55); padding:3px 6px 2px 8px; border-radius:3px; backdrop-filter:blur(4px)}
.play{position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; border:1.5px solid rgba(255,255,255,.9); background:rgba(10,12,28,.35); color:#fff; cursor:pointer; display:grid; place-items:center; z-index:2; padding:0; transition:transform .2s,background .2s}
.play:hover{background:rgba(10,12,28,.6); transform:scale(1.06)}
.play:focus-visible{outline:2px solid #fff; outline-offset:3px}
.play svg{width:14px; height:14px; fill:#fff}
.play .ic-pause{display:none}
.card.playing .play .ic-play{display:none}
.card.playing .play .ic-pause{display:block}
.card.playing .play{box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 0 0 12px rgba(255,255,255,.04)}
.ring{position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; z-index:1; transform:rotate(-90deg); opacity:0; transition:opacity .3s; pointer-events:none}
.card.playing .ring{opacity:1}
.ring circle{fill:none; stroke:#fff; stroke-width:1; stroke-dasharray:157; stroke-dashoffset:157}
.meta{display:flex; justify-content:space-between; align-items:baseline; margin:14px 2px 0; font-size:15px; letter-spacing:.04em; color:#fff}
.meta .dur{font-size:12.5px; color:var(--muted); letter-spacing:.08em}
.meta2{display:flex; justify-content:space-between; align-items:center; margin:4px 2px 0; font-size:11.5px; letter-spacing:.16em; color:var(--muted)}
.more{background:none; border:0; color:var(--muted); font-size:16px; letter-spacing:.1em; cursor:pointer; padding:0 2px; line-height:1}
.pick{margin-top:16px; width:100%; border:0; border-radius:999px; background:var(--cream); color:var(--ink); font:inherit; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; padding:11px 8px; cursor:pointer; transition:background .2s,color .2s,transform .12s}
.pick:hover{background:#fff}
.pick:active{transform:scale(.985)}
.pick:focus-visible{outline:2px solid #fff; outline-offset:3px}
.pick.confirm{background:var(--dusk); color:var(--ink)}
.pick.done{background:transparent; color:var(--cream); border:1px solid rgba(236,230,222,.55); cursor:default}
.card.chosen{border-color:rgba(233,168,135,.55); box-shadow:0 0 0 1px rgba(233,168,135,.25), 0 20px 50px rgba(0,0,0,.4)}
.card.locked .pick{background:transparent; color:var(--faint); border:1px solid var(--line); cursor:default}

.empty{grid-column:1/-1; text-align:center; padding:60px 0; color:var(--muted); font-size:13px; letter-spacing:.12em}


/* pager */
.pager{display:flex; align-items:center; justify-content:center; gap:16px; font-size:12.5px; letter-spacing:.08em}
.pager button{background:none; border:0; color:var(--muted); font:inherit; cursor:pointer; min-width:22px; height:22px; border-radius:50%; display:grid; place-items:center}
.pager button.on{background:#fff; color:var(--ink)}
.pager button:disabled{opacity:.3; cursor:default}
.pager .arrow{width:34px; height:34px; border:1px solid rgba(255,255,255,.35); color:#fff; margin:0 8px}
.pager .arrow svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:1.5}
.pager span{color:var(--faint)}

.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:rgba(9,12,28,.85); border:1px solid var(--line); padding:12px 22px; border-radius:999px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:0; transition:.3s; z-index:5; pointer-events:none; backdrop-filter:blur(8px)}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (max-width:1380px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1100px){ .page{padding:26px 28px 34px} }
@media (max-width:820px){ .grid{grid-template-columns:repeat(3,1fr)} h1{letter-spacing:.2em} }
@media (max-width:600px){ .grid{grid-template-columns:repeat(2,1fr); gap:12px} .tools{width:100%; justify-content:space-between} .page{padding:20px 16px 30px} .logo img{height:54px} }
@media (max-width:380px){ .grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* vote states the static mock had no server to need */
.pick.busy{opacity:.55; cursor:progress}
.pick:disabled{cursor:default}
.notice{margin:18px auto 0; max-width:560px; text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dusk); display:none}
.notice.show{display:block}
/* the "voting has closed" banner: the headline of the page once voting is over */
.notice.closed{max-width:900px; margin:34px auto 6px; padding:28px 16px; font-size:inherit; letter-spacing:normal; text-transform:none; color:var(--text); border-top:1px solid rgba(233,168,135,.45); border-bottom:1px solid rgba(233,168,135,.45)}
.notice .n-big{display:block; font-weight:300; font-size:clamp(26px,4.6vw,56px); letter-spacing:.22em; text-transform:uppercase; line-height:1.2; padding-left:.22em}
.notice .n-sub{display:block; margin-top:16px; font-size:clamp(13px,1.5vw,18px); letter-spacing:.34em; text-transform:uppercase; color:var(--dusk)}
@media (max-width:600px){ .notice .n-big{letter-spacing:.14em; padding-left:.14em} .notice .n-sub{letter-spacing:.24em} }
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; pointer-events:none}
#ts{position:fixed; right:16px; bottom:16px; z-index:6}
@media (max-width:600px){ .tools{flex-wrap:wrap; gap:14px 18px} .sort label{display:none} .search{flex:1 1 100%} .search input{width:100%} }

/* email confirmation */
.modal{position:fixed; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,9,22,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal-card{position:relative; width:100%; max-width:420px; background:rgba(9,12,28,.92); border:1px solid rgba(233,168,135,.35); border-radius:8px; padding:34px 30px 28px; box-shadow:0 30px 80px rgba(0,0,0,.55); text-align:center}
.modal-x{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; padding:4px 8px}
.modal-x:hover{color:#fff}
.modal-title{font-weight:300; font-size:22px; letter-spacing:.06em; margin:14px 0 8px; color:#fff}
.modal-lede{font-size:13px; letter-spacing:.06em; line-height:1.7; color:var(--muted); margin:0 0 22px}
.field{display:block; text-align:left}
.field span{display:block; font-size:10.5px; letter-spacing:var(--track); text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:4px; color:#fff; font:inherit; font-size:15px; letter-spacing:.04em; padding:12px 14px; outline:0}
.field input:focus{border-color:rgba(233,168,135,.7)}
.field input[aria-invalid="true"]{border-color:#e0776a}
.field-error{min-height:18px; margin:8px 0 10px; font-size:11.5px; letter-spacing:.08em; color:#f0a49a; text-align:left}
.modal-submit{margin-top:4px}

/* vote counts, shown once the visitor has voted */
.v{color:var(--dusk); letter-spacing:.12em; white-space:nowrap; margin-left:auto; padding-right:10px}
.v:empty{display:none}
.card.chosen .v{color:#fff}
.list .dur{grid-column:dur; grid-row:1; align-self:end}
.list .v{grid-column:dur; grid-row:2; align-self:start; margin:3px 0 0; padding-right:8px; font-size:11.5px}
@media (max-width:820px){ .list .v{grid-column:more; grid-row:2; justify-self:end} .list .more{display:none} }