/* Wardrobe: digital closet. Builds on ../style.css tokens. */
.wd-sub{border-bottom:1px solid var(--border);background:var(--cream)}
.wd-sub-in{display:flex;align-items:center;gap:32px;min-height:48px;font-size:14px}
.wd-mark{font:400 15px "Cormorant Garamond",serif;letter-spacing:.2em;text-transform:uppercase}
.wd-tabs{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none}
.wd-tabs a{text-decoration:none;color:var(--subtle);white-space:nowrap;padding:12px 0;font:400 17px "Cormorant Garamond",serif}
.wd-tabs a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.wd-tabs a:hover{color:var(--bronze)}
.wd-count{margin-left:auto;font:400 17px "Cormorant Garamond",serif;white-space:nowrap}
@media(max-width:720px){.wd-mark,.wd-count{display:none}.wd-sub-in{gap:0}}

.wd-title{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;font:400 clamp(3.5rem,11vw,9rem)/.95 "Cormorant Garamond",serif;letter-spacing:-.02em;padding-top:32px;padding-bottom:8px}
.wd-title-2{font-size:clamp(3rem,8vw,6.5rem);margin-top:96px}
.wd-eyebrow{color:var(--subtle);font-size:13px;padding-top:28px}
.wd-eyebrow+.wd-title{padding-top:4px}
.wd-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:24px auto 32px}
.wd-note,.wd-small{color:var(--subtle);font-size:13px}
.wd-lede{font:400 clamp(1.4rem,2.2vw,1.75rem)/1.35 "Cormorant Garamond",serif;max-width:480px;margin-bottom:24px}
.wd-cta{font:400 clamp(1.35rem,2vw,1.75rem)/1.35 "Cormorant Garamond",serif;border-top:1px solid var(--border);padding-top:24px;margin-top:40px}
.wd-cta a{text-underline-offset:5px}
.wd-empty{padding:48px 20px;text-align:center}
.wd-empty p{font:400 24px/1.35 "Cormorant Garamond",serif;max-width:560px;margin:0 auto 24px;color:var(--muted)}

/* Rack: a rod for hanging pieces, shelves for bags and shoes */
.rack{display:grid;gap:8px}
.rail{position:relative;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.rail::-webkit-scrollbar{display:none}
.rail:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);opacity:.75}
.shelf:before{top:auto;bottom:22px}
.rail[hidden]{display:none}
.track{display:flex;width:max-content;padding:0 24px}
.item{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;width:clamp(200px,22vw,290px);flex:none}
.item:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}
.hanger{width:150px;height:44px;color:var(--ink);margin-top:-1px;flex:none}
.item .pic{height:clamp(240px,30vw,380px);width:100%;display:flex;align-items:flex-start;justify-content:center;padding:0 16px;margin-top:-6px}
.item img,.shelf img,.wd-grid img,.match img,.cand img,.piece-img img,.queue img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.item .pic img{filter:drop-shadow(0 14px 18px rgb(43 43 43/.16));transition:transform .4s ease}
.item:hover .pic img{transform:rotate(-1.2deg) translateY(2px)}
.item .cap{align-self:stretch;margin:24px 12px 0;border-top:1px solid var(--border);padding-top:12px;font:400 19px/1.25 "Cormorant Garamond",serif;color:var(--muted)}
.fig{display:block;font-size:13px;color:var(--subtle);margin-bottom:2px}
.shelf .item{width:clamp(150px,15vw,210px);padding-bottom:24px}
.shelf .pic{height:clamp(130px,14vw,190px);align-items:flex-end;margin:0;padding:12px 16px 0}
.shelf .cap{display:none}
.shelf .item:hover .pic img{transform:translateY(-4px)}
.ghost-hang{opacity:.35;pointer-events:none}

/* Every piece */
.wd-filters{display:flex;flex-wrap:wrap;gap:8px 28px;border-bottom:1px solid var(--border);padding:24px 0 16px;margin-bottom:32px}
.wd-filters button{all:unset;cursor:pointer;font:400 19px "Cormorant Garamond",serif;color:var(--subtle)}
.wd-filters button small{font-size:13px}
.wd-filters button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.wd-filters button:focus-visible{outline:2px solid var(--bronze)}
.wd-grid{display:grid;gap:40px 28px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding-bottom:64px}
@media(min-width:960px){.wd-grid{grid-template-columns:repeat(4,1fr)}.wd-grid .card-p:first-child{grid-column:span 2;grid-row:span 2}.wd-grid .card-p:first-child .ph{aspect-ratio:auto;height:calc(100% - 92px)}}
.card-p{all:unset;cursor:pointer;display:flex;flex-direction:column}
.card-p:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.card-p .ph{background:var(--sand);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:12%;margin:8px 0 14px;transition:background .3s}
.card-p:hover .ph{background:var(--border)}
.card-p .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card-p strong{font:400 22px/1.2 "Cormorant Garamond",serif}
.card-p .meta{color:var(--subtle);font-size:13px}
.wd-grid .none{grid-column:1/-1;color:var(--subtle);font:400 22px "Cormorant Garamond",serif;padding:24px 0}

/* Before you buy / recreate */
.wd-split{display:grid;gap:40px;padding-top:48px;padding-bottom:24px}
@media(min-width:960px){.wd-split{grid-template-columns:5fr 7fr;gap:80px}}
.drop{border:1px dashed var(--subtle);min-height:clamp(260px,32vw,440px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px 24px;cursor:pointer;transition:background .2s,border-color .2s;position:relative;overflow:hidden}
.drop:hover,.drop.over{background:var(--sand);border-color:var(--ink)}
.drop:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.drop-h{font:400 clamp(2rem,3.6vw,3.25rem)/1.05 "Cormorant Garamond",serif;max-width:560px;text-wrap:balance}
.drop-sm{min-height:200px}
.drop-sm .drop-h{font-size:32px}
.drop.has img.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;background:var(--cream)}
form.urlrow{display:flex;align-items:center;gap:16px;max-width:none;border-bottom:1px solid var(--ink);margin-top:24px;padding:8px 0}
.urlrow label{display:block;font-size:13px;color:var(--muted)}
.urlrow input{flex:1;min-width:0;border:0;background:none;padding:8px 0;font:400 19px "Cormorant Garamond",serif}
.urlrow input:focus-visible{outline:none}
.urlrow button{all:unset;cursor:pointer;color:var(--subtle);font:400 17px "Cormorant Garamond",serif}
.urlrow button:hover,.urlrow button:focus-visible{color:var(--bronze)}

.result{padding-bottom:72px}
.result:empty{display:none}
.status{font:400 22px "Cormorant Garamond",serif;color:var(--muted);padding:24px 0;display:flex;align-items:center;gap:12px}
.status:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--bronze);animation:pulse 1s ease-in-out infinite alternate}
.status.err:before{animation:none;background:#9b3b2e}
@keyframes pulse{to{opacity:.2}}
.verdict{border-top:1px solid var(--ink);padding-top:32px;margin-top:24px;display:grid;gap:40px}
@media(min-width:960px){.verdict{grid-template-columns:4fr 8fr;gap:80px}}
.cand{display:grid;gap:12px;align-content:start}
.cand .ph{background:var(--sand);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:10%}
.cand h3{font-size:28px}
.say{font:400 clamp(2rem,3.4vw,3rem)/1.08 "Cormorant Garamond",serif;margin-bottom:12px;text-wrap:balance}
.say+p{color:var(--muted);max-width:560px;margin-bottom:28px}
.matches{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.match{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.match .ph{background:var(--sand);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:12%}
.match strong{font:400 20px/1.2 "Cormorant Garamond",serif}
.pill{align-self:start;font-size:12px;padding:3px 8px;border:1px solid var(--border);color:var(--muted)}
.pill.twin{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.pill.job{border-color:var(--bronze);color:var(--bronze)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.look-rows{display:grid;gap:0;border-top:1px solid var(--ink);margin-top:24px}
.look-row{display:grid;gap:20px;grid-template-columns:120px 1fr;padding:28px 0;border-bottom:1px solid var(--border)}
@media(min-width:960px){.look-row{grid-template-columns:200px 220px 1fr;gap:40px}}
.look-row .crop{background:var(--sand);aspect-ratio:3/4;overflow:hidden}
.look-row .crop img{object-fit:cover}
.look-row h3{font-size:30px;margin-bottom:6px}
.look-row .why{color:var(--subtle);font-size:13px}
.look-row .matches{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(150px,200px))}
@media(min-width:960px){.look-row .matches{grid-column:auto}}
.gap{color:var(--muted);font:400 20px/1.3 "Cormorant Garamond",serif;align-self:center}
.gap a{color:var(--bronze)}

/* Dialogs */
.dlg{margin:auto;border:1px solid var(--border);background:var(--cream);color:var(--ink);width:min(760px,calc(100% - 32px));max-height:calc(100% - 48px);padding:28px}
.dlg::backdrop{background:rgb(43 43 43/.45);backdrop-filter:blur(2px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.dlg-head h2{font-size:40px}
.x{all:unset;cursor:pointer;font-size:32px;line-height:1;padding:4px 10px;color:var(--muted)}
.x:hover,.x:focus-visible{color:var(--bronze)}
.queue{list-style:none;display:grid;gap:8px;margin-top:20px}
.queue li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;border-bottom:1px solid var(--border);padding:8px 0}
.queue .th{width:56px;height:70px;background:var(--sand);display:flex;align-items:center;justify-content:center}
.queue .msg{color:var(--muted)}
.queue .msg b{font:400 20px "Cormorant Garamond",serif;color:var(--ink);font-weight:400;display:block}
.queue .err{color:#9b3b2e}
.piece-form{display:grid;gap:28px;max-width:none}
@media(min-width:640px){.piece-form{grid-template-columns:1fr 1fr}}
.piece-img{background:var(--sand);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;padding:10%}
.piece-fields{display:grid;gap:14px;align-content:start}
select{font:400 16px "Hanken Grotesk",sans-serif;padding:12px;border:1px solid var(--border);background:var(--cream);color:var(--ink);border-radius:0}
.piece-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.wd-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--ink);font-size:13px}
@media(prefers-reduced-motion:reduce){.item .pic img,.status:before{transition:none;animation:none}}