/* ===========================================================================
   Home / The Hang — the salon grid + hero
   =========================================================================== */
.hero{
  position:relative;min-height:min(88vh,860px);
  display:grid;place-items:center;text-align:center;
  padding:clamp(60px,11vh,120px) var(--gut) clamp(40px,7vh,80px);
  overflow:hidden
}
.hero::before{ /* light wash behind the headline */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 40%,rgba(124,92,255,.16),transparent 70%)
}
.hero::after{ /* slow-drifting bloom */
  content:'';position:absolute;left:50%;top:38%;width:min(120vw,1100px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,93,143,.12),transparent 62%);
  animation:bloom 22s var(--ease-in-out) infinite alternate
}
@keyframes bloom{from{transform:translate(-50%,-50%) scale(.86);opacity:.6}to{transform:translate(-50%,-50%) scale(1.14);opacity:1}}
.hero > *{position:relative;z-index:1;max-width:min(1000px,100%)}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(38px,7.4vw,104px);line-height:1.02;letter-spacing:-.018em;
  margin:22px 0 0
}
.hero h1 em{font-style:normal;color:var(--amber);position:relative;display:inline-block}
/* hand-drawn-feeling underline that draws itself in */
.hero h1 em::after{
  content:'';position:absolute;left:2%;right:2%;bottom:.06em;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  animation:draw 1.3s .75s var(--ease-out) forwards
}
@keyframes draw{to{transform:scaleX(1)}}
.hero p{
  font-size:clamp(14.5px,1.5vw,17px);line-height:1.72;color:var(--ink-72);
  max-width:52ch;margin:26px auto 0
}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero .cta .btn{width:auto;min-width:200px}
.hero-meta{
  display:flex;gap:clamp(22px,4vw,56px);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,64px);padding-top:26px;border-top:1px solid var(--hair);
  max-width:760px;margin-inline:auto
}
.hero-meta div{text-align:center}
.hero-meta .v{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);margin-bottom:5px}

/* -------------------------------------------------------------- the hang */
.hang-head{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:end;
  padding:clamp(40px,6vw,80px) 0 clamp(22px,3vw,32px)
}
.hang-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.2vw,52px);line-height:1.06}
.hang-head p{font-size:13.5px;color:var(--ink-72);max-width:38ch;margin-top:14px;line-height:1.66}
.filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-bottom:19px;border-bottom:1px solid var(--hair);margin-bottom:clamp(30px,4vw,54px)
}
.filters .lbl{margin-right:5px;color:var(--ink-34)}
.chip{
  min-height:44px;padding:0 17px;border:1px solid var(--hair);border-radius:100px;
  display:inline-flex;align-items:center;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-72);
  transition:all var(--t-fast) var(--ease)
}
.chip:hover{border-color:var(--ink-52);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--wall)}

.hang{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  gap:clamp(30px,3.6vw,62px) clamp(18px,2.4vw,44px);
  padding-bottom:clamp(60px,8vw,110px)
}
.cell{display:flex;flex-direction:column;text-align:left;width:100%}
.cell .plate{aspect-ratio:1/1.08}
.cell .plate img{max-width:80%;max-height:82%}
.lot{position:absolute;top:11px;left:12px;z-index:2;color:var(--ink-34)}
.flag{
  position:absolute;top:10px;right:11px;z-index:2;display:flex;align-items:center;gap:5px;
  color:var(--ink-34)
}
.flag .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-34);transition:background var(--t) var(--ease)}
.flag[data-sold="1"]{color:var(--sold)}
.flag[data-sold="1"] .dot{background:var(--sold)}
.cell .wall-label{padding:15px 2px 0}
.cell .wall-label h3{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.24}
.cell .wall-label .meta{font-size:11.5px;color:var(--ink-34);margin-top:5px;line-height:1.5}
.cell .ask{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--hair-2)
}
.cell .ask b{font-size:13.5px;font-weight:500}
.cell .quick{
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--ink-34);
  border-bottom:1px solid var(--hair);padding-bottom:1px;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)
}
.cell:hover .quick{color:var(--ink);border-color:var(--ink)}
.cell[data-sold="1"] .plate img{filter:saturate(.72) contrast(.95)}

/* ------------------------------------------------------------------ empty */
.empty-state{text-align:center;padding:clamp(60px,12vh,140px) 0}
.empty-state h3{font-family:var(--serif);font-size:clamp(22px,3vw,34px);margin-bottom:12px}
.empty-state p{color:var(--ink-72);font-size:14.5px;max-width:44ch;margin:0 auto 26px;line-height:1.7}

/* --------------------------------------------------------------- bag rows */
.bag-row{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--hair-2)}
.bag-thumb{background:var(--wall);border:1px solid var(--hair-2);display:grid;place-items:center;aspect-ratio:1}
.bag-thumb img{width:100%;height:100%;object-fit:contain}
.bag-meta .t{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.25}
.bag-meta .m{font-size:10.5px;color:var(--ink-34);margin-top:3px}
.bag-meta .linkish{margin-top:11px}
.bag-meta .sold-tag{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--sold);margin-top:8px}
.bag-row .p{font-size:13.5px;font-weight:500;white-space:nowrap}
.drawer .empty{padding:64px 0;text-align:center;color:var(--ink-34);font-size:13.5px;line-height:1.7}
.drawer .empty svg{margin:0 auto 18px;opacity:.35}

@media (max-width:720px){
  .hang{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:26px 14px}
  .cell .plate{aspect-ratio:1/1.16}
  .cell .wall-label h3{font-size:16px}
  .cell .wall-label .meta{font-size:10.5px}
  .cell .ask{flex-direction:column;align-items:flex-start;gap:8px}
  .hang-head{grid-template-columns:1fr;align-items:start}
  .hero-meta{gap:20px}
}