/* ═══════════════════════════════════════════
   05 — DESIGN WORK
═══════════════════════════════════════════ */
#design {
  padding:120px 72px;
  border-top:1px solid var(--border);
}
.design-intro { max-width:600px; margin-bottom:56px; }
.design-tools-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px; }
.design-tool {
  display:flex; align-items:center; gap:8px;
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px;
  color:var(--muted); padding:8px 16px; border:1px solid var(--border);
  transition:all .2s; cursor:none;
}
.design-tool .dt-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.design-tool:hover { border-color:var(--amber-dim); color:var(--amber); }

.design-gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto;
  gap:1px; background:var(--border); border:1px solid var(--border);
}
.dg-item {
  background:var(--bg2); position:relative; overflow:hidden;
  cursor:none; transition:background .2s;
  position: relative;
}
.dg-item > img {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: contain;
  padding: 32px;
}
.dg-item:hover { background:var(--bg3); }
.dg-item:hover .dg-overlay { opacity:1; }
.dg-item.tall { grid-row:span 2; }
.dg-item.wide { grid-column:span 2; }
.dg-inner {
  width:100%; height:100%; min-height:180px;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  padding:24px; position:relative;
}
.dg-inner::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 16px,rgba(var(--amber-rgb),.018) 16px,rgba(var(--amber-rgb),.018) 17px);
}
.dg-num {
  font-family:'Bebas Neue',sans-serif; font-size:56px; color:transparent;
  z-index:1;
}
.dg-tool-label {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:3px;
  text-transform:uppercase; z-index:1;
}
.dg-overlay {
  position:absolute; inset:0; background:rgba(var(--amber-rgb),.05);
  display:flex; align-items:flex-end; padding:16px;
  opacity:0; transition:opacity .25s;
}
.dg-overlay-label {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px;
  color:var(--amber); text-transform:uppercase;
  border-left:2px solid var(--amber); padding-left:10px; line-height:1.4;
}