/* ============ TEXTURE ============ */
.texfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.texf{padding:.6em 1.3em;border:1px solid var(--line);border-radius:99px;font-family:var(--f-display);
  font-weight:600;font-size:.84rem;color:var(--graphite);transition:.3s var(--e)}
.texf:hover{border-color:var(--ink)}
.texf.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

.texgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.texcard{text-align:left;border:1px solid var(--line);background:#fff;transition:.35s var(--e);
  opacity:0;transform:translateY(20px);animation:texin .6s var(--e-out) forwards;animation-delay:var(--d,0s)}
@keyframes texin{to{opacity:1;transform:none}}
.texcard:hover{box-shadow:var(--shadow-soft);transform:translateY(-4px)}
.texcard__img{aspect-ratio:1/1;overflow:hidden}
.texcard__c{padding:16px 18px 20px}
.texcard__c .tag{margin-bottom:10px;text-transform:capitalize}
.texcard__c b{display:block;font-family:var(--f-display);font-size:1.05rem}
.texcard__c small{color:var(--muted);font-size:.82rem;display:block;margin-top:.2em}

/* texture popup */
.texbox{max-width:1000px}
.texbox__grid{display:grid;grid-template-columns:1fr 1.1fr}
.texbox__media{background:var(--ink)}
.texbox__media img{width:100%;height:100%;object-fit:cover;min-height:300px}
.texbox__txt{padding:clamp(28px,4vw,48px)}
.texbox__txt h3{font-size:clamp(1.4rem,3vw,2rem);margin:.3em 0 1em}
.texbox__rows{display:grid;gap:0;border-top:1px solid var(--line)}
.texbox__rows>div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.texbox__rows h6{font-family:var(--f-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.texbox__rows p{font-size:.92rem;color:var(--ink)}
.texbox__tip{margin:22px 0;padding:16px 18px;background:var(--mist);border-left:3px solid var(--accent);font-size:.9rem}
.texbox__tip b{display:block;font-family:var(--f-display);margin-bottom:.3em}
.texbox__tip span{color:var(--graphite)}
.texbox__actions{display:flex;gap:8px;flex-wrap:wrap}

/* ============ 3D COLOR SPACE ============ */
.colorhead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.colorhead h2{font-size:clamp(1.9rem,4vw,3rem);margin:.35em 0 .5em}
.colorsearch label{display:block;font-family:var(--f-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.colorsearch__in{display:flex;gap:8px}
.colorsearch input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:.85em 1.1em;border-radius:2px;letter-spacing:.05em}
.colorsearch input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
.colorsearch input::placeholder{color:rgba(255,255,255,.4)}
.colorsearch__hint{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:10px;transition:.3s}

.colorstage{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,4vw,56px);align-items:center}
.colorspace{height:min(60vh,540px);perspective:1300px;cursor:grab;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.colorspace.grabbing{cursor:grabbing}
.colorspace::before{content:"";position:absolute;width:120%;height:120%;
  background:radial-gradient(circle at 50% 50%,rgba(239,108,26,.10),transparent 60%)}
.colordrum{position:relative;width:1px;height:1px;transform-style:preserve-3d;transition:transform .05s linear}
.colorchip{position:absolute;width:54px;height:40px;left:-27px;top:-20px;border-radius:3px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);backface-visibility:hidden;border:1px solid rgba(255,255,255,.08);transition:outline .2s}
.colorchip:hover{outline:2px solid #fff;outline-offset:2px;z-index:2}
.colorchip.is-sel{outline:3px solid var(--accent);outline-offset:2px;z-index:3}

.colorpanel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:clamp(20px,2.5vw,30px)}
.colorpanel__swatch{aspect-ratio:16/9;border-radius:3px;background:#777;margin-bottom:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.colorpanel__meta .mono{color:var(--accent);font-weight:700;font-size:1.1rem;letter-spacing:.06em}
.colorpanel__meta h4{font-family:var(--f-display);color:#fff;font-size:1.2rem;margin:.2em 0 18px}
.colorpanel__meta ul{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.colorpanel__meta li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.colorpanel__meta span{color:rgba(255,255,255,.5);font-size:.8rem;font-family:var(--f-display);letter-spacing:.08em}
.colorpanel__meta b{color:#fff;font-family:var(--f-display);font-variant-numeric:tabular-nums}
.colorpanel__note{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:16px;line-height:1.6}
.colortip{text-align:center;color:rgba(255,255,255,.55);font-size:.82rem;margin-top:28px}

@media (max-width:900px){
  .texgrid{grid-template-columns:repeat(2,1fr)}
  .texbox__grid{grid-template-columns:1fr}
  .colorhead,.colorstage{grid-template-columns:1fr}
  .colorspace{height:46vh}
}
@media (max-width:560px){
  .texgrid{grid-template-columns:1fr 1fr}
  .texbox__rows>div{grid-template-columns:1fr;gap:2px}
  .colorchip{width:42px;height:32px;left:-21px;top:-16px}
}