/* =====================================================================
   BizTorq Textile Directory — home ("trade map")
   ink #191233 · violet #5B2EE0 · zari gold #C99A2E · mist #F7F5FC · thread #E3DDF6
   ===================================================================== */
.dh{--ink:#191233;--ink-2:#2a2150;--violet:#5B2EE0;--violet-d:#4520c4;--gold:#C99A2E;--gold-l:#E7C978;
  --mist:#F7F5FC;--line:#E3DDF6;--text:#3d3856;--muted:#6B6486;--soft:#CFC8E6;
  --head:'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);overflow-x:clip}
.dh *{box-sizing:border-box}
.dh a{color:var(--violet)}
.dh :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.dh-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.dh h2{font-family:var(--head);font-weight:800;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.1;margin:0;color:var(--ink)}

/* ---------- Hero ---------- */
.dh-hero{position:relative;background:var(--ink);color:var(--mist);padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,92px);overflow:hidden;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 7px)}
.dh-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.dh-hero h1{font-family:var(--head);font-weight:800;font-size:clamp(36px,4.8vw,64px);line-height:1.02;letter-spacing:-.04em;margin:0 0 22px;max-width:16ch;color:#fff;text-wrap:balance}
.dh-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--soft);max-width:54ch;margin:0 0 32px}

.dh-search{position:relative;max-width:560px}
.dh-search label{display:block;font-size:14px;font-weight:600;color:var(--soft);margin:0 0 8px}
.dh-search__box{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:0 18px;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 18px 40px rgba(0,0,0,.25)}
.dh-search__box svg{color:var(--muted);flex:none}
.dh-search__box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);padding:18px 0}
.dh-search__box input:focus-visible{outline:none}
.dh-search__box:focus-within{box-shadow:0 0 0 3px var(--gold),0 18px 40px rgba(0,0,0,.25)}
.dh-results{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(25,18,51,.35);max-height:420px;overflow:auto}
.dh-results li a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dh-results li a b{font-weight:700}
.dh-results li a small{grid-column:2;color:var(--muted);font-size:13px}
.dh-results li.is-active a,.dh-results li a:hover{background:var(--mist)}
.dh-results__none{padding:14px;color:var(--muted);font-size:14px;line-height:1.5}
.dh-tag{grid-row:span 2;font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px;background:var(--mist);color:var(--muted);min-width:64px;text-align:center}
.dh-tag--market{background:#efeaff;color:var(--violet)}
.dh-tag--area{background:#fbf3df;color:#8a6510}
.dh-tag--city{background:var(--ink);color:#fff}
.dh-tag--faq{background:#e8f5ee;color:#13824B}

.dh-quick{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:18px 0 0;font-size:14px}
.dh-quick span{color:#9C95BA}
.dh-quick a{color:#fff;text-decoration:underline;text-decoration-color:rgba(231,201,120,.6);text-underline-offset:4px}
.dh-quick a:hover{text-decoration-color:var(--gold-l)}

/* Trade map */
.dh-map{margin:0;justify-self:center;width:100%;max-width:440px}
.dh-map svg{display:block;width:100%;height:auto;overflow:visible}
.dh-grat line{stroke:rgba(207,200,230,.12);stroke-width:1}
.dh-grat text{fill:rgba(207,200,230,.45);font-size:10px;font-family:inherit}
.dh-tropic line{stroke:var(--gold);stroke-width:1;stroke-dasharray:3 5;opacity:.55}
.dh-tropic text{fill:var(--gold-l);font-size:10.5px;opacity:.8;font-style:italic}
.dh-pt{cursor:pointer}
.dh-pt__name{fill:#fff;font-size:13px;font-weight:700;font-family:inherit}
.dh-pt__count{fill:var(--gold-l);font-size:11.5px;font-weight:600;font-family:inherit}
.dh-pt.is-live .dh-pt__dot{fill:var(--gold);stroke:var(--ink);stroke-width:2}
.dh-pt.is-live .dh-pt__halo{fill:none;stroke:var(--gold);stroke-width:1;opacity:.35}
.dh-pt.is-soon .dh-pt__dot{fill:var(--ink);stroke:var(--soft);stroke-width:1.5}
.dh-pt.is-soon .dh-pt__name{fill:var(--soft);font-weight:500;font-size:12px}
.dh-pt:hover .dh-pt__dot,.dh-pt:focus .dh-pt__dot{stroke:#fff;stroke-width:2.5}
.dh-pt:hover .dh-pt__name,.dh-pt:focus .dh-pt__name{text-decoration:underline}
.dh-pt:focus{outline:none}
.dh-pt:focus-visible .dh-pt__dot{stroke:var(--gold-l);stroke-width:4}
/* the one orchestrated moment: cities appear, biggest first */
.dh-pt{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .dh-pt__dot,.dh-pt__halo{transform-box:fill-box;transform-origin:center;animation:dh-pop .5s cubic-bezier(.2,.8,.3,1.3) both;animation-delay:calc(var(--i) * 70ms)}
  .dh-pt text{animation:dh-fade .4s ease both;animation-delay:calc(var(--i) * 70ms + 200ms)}
}
@keyframes dh-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dh-fade{from{opacity:0}to{opacity:1}}
.dh-map figcaption{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--soft)}
.dh-key{display:inline-block;width:10px;height:10px;border-radius:50%}
.dh-key--live{background:var(--gold)}
.dh-key--soon{border:1.5px solid var(--soft);margin-left:14px}

/* Selvedge — the same woven edge as market pages */
.dh-selvedge{position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 3px,transparent 3px 9px),repeating-linear-gradient(0deg,var(--violet) 0 4px,var(--ink-2) 4px 8px)}
.dh-selvedge::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(25,18,51,.55) 9px 12px)}

/* ---------- Section heads ---------- */
.dh-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dh-link{font-weight:700;font-size:15px}
.dh-note{margin:0;color:var(--muted);font-size:15px}
.dh-sub{font-size:17px;line-height:1.6;color:var(--text);max-width:68ch;margin:0 0 30px}
.dh-h3{font-family:var(--head);font-size:20px;font-weight:700;margin:40px 0 14px;color:var(--ink)}

/* ---------- Lead city band ---------- */
.dh-band{background:var(--mist);padding:clamp(48px,6vw,84px) 0}
.dh-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:2px solid var(--ink)}
.dh-zone{padding:20px 24px 22px 0;border-right:1px solid var(--line)}
.dh-zone+.dh-zone{padding-left:24px}
.dh-zone:last-child{border-right:0}
.dh-zone__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink)!important}
.dh-zone__head span{font-family:var(--head);font-size:19px;font-weight:700;line-height:1.25}
.dh-zone__head b{font-size:26px;font-weight:800;color:var(--gold);font-family:var(--head)}
.dh-zone__head:hover span{text-decoration:underline;text-underline-offset:4px}
.dh-zone__for{margin:6px 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.dh-zone__kids{list-style:none;margin:0;padding:0}
.dh-zone__kids a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text)!important;font-weight:600;font-size:15px}
.dh-zone__kids a span{color:var(--muted);font-weight:500}
.dh-zone__kids a:hover{color:var(--violet)!important}

.dh-famous{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 24px}
.dh-famous a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.dh-famous strong{color:var(--ink);font-size:16px}
.dh-famous span{color:var(--muted);font-size:14px}
.dh-famous a:hover strong{color:var(--violet)}

/* ---------- City index ---------- */
.dh-cities{padding:clamp(48px,6vw,84px) 0}
.dh-index{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.dh-row a{display:grid;grid-template-columns:64px minmax(140px,220px) minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)!important;transition:background .15s}
.dh-row a:hover{background:var(--mist)}
.dh-row__img{width:64px;height:64px;border-radius:12px;background:var(--line) center/cover no-repeat}
.dh-row__city strong{display:block;font-family:var(--head);font-size:20px;font-weight:700}
.dh-row__city em{font-style:normal;color:var(--muted);font-size:14px}
.dh-row__for{color:var(--text);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dh-row__n{font-weight:800;font-size:15px;white-space:nowrap;padding:6px 12px;border-radius:999px;background:#fbf3df;color:#8a6510}
.dh-row.is-soon .dh-row__img{filter:grayscale(1);opacity:.6}
.dh-row.is-soon .dh-row__city strong{color:var(--text)}
.dh-row.is-soon .dh-row__n{background:transparent;color:var(--muted);font-weight:600;border:1px solid var(--line)}

/* ---------- Buyer questions ---------- */
.dh-faq{background:var(--mist);padding:clamp(48px,6vw,84px) 0}
.dh-faq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px;margin-top:8px}
.dh-q{display:grid;gap:8px;align-content:start;padding:20px 22px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);text-decoration:none}
.dh-q strong{color:var(--ink);font-size:17px;line-height:1.35}
.dh-q span{color:var(--text);font-size:14.5px;line-height:1.6}
.dh-q:hover{border-color:var(--violet);border-left-color:var(--gold)}

/* ---------- Traders ---------- */
.dh-trade{background:var(--ink);color:var(--soft);padding:clamp(48px,6vw,80px) 0}
.dh-trade__grid{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:32px;align-items:center}
.dh-trade h2{color:#fff;margin-bottom:12px}
.dh-trade p{margin:0;font-size:17px;line-height:1.6;max-width:60ch}
.dh-trade__actions{display:flex;flex-wrap:wrap;gap:12px}
.dh-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid transparent}
.dh-btn--gold{background:var(--gold);color:var(--ink)!important}
.dh-btn--gold:hover{background:var(--gold-l)}
.dh-btn--ghost{color:#fff!important;border-color:rgba(255,255,255,.35)}
.dh-btn--ghost:hover{border-color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .dh-hero__grid{grid-template-columns:1fr}
  .dh-map{max-width:380px}
  .dh-trade__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .dh-zone,.dh-zone+.dh-zone{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .dh-row a{grid-template-columns:52px minmax(0,1fr) auto;gap:14px}
  .dh-row__img{width:52px;height:52px}
  .dh-row__for{display:none}
  .dh-row__city strong{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.dh *{transition:none!important;animation:none!important}}