@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --paper: #F1ECDD;
  --paper-raised: #FBF8F0;
  --ink: #211D17;
  --indigo: #33415C;
  --indigo-dark: #232C3F;
  --mustard: #E3A73B;
  --brick: #B8402A;
  --line: #D8CFB4;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--mustard); color: var(--ink); }

.display { font-family: 'Anton', 'Inter', sans-serif; letter-spacing: 0.01em; text-transform: uppercase; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Header ---------- */
.hero { background: var(--indigo); color: var(--paper-raised); padding: 56px 28px 72px; position: relative; }
.hero-inner { max-width: 1080px; margin: 0 auto; }
.hero-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--mustard); font-size: 14px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 0.96; margin: 0 0 18px; max-width: 780px; }
.hero p.sub { font-size: 18px; max-width: 520px; color: #D9DEE8; margin: 0 0 30px; line-height: 1.5; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { border: none; border-radius: 3px; padding: 13px 22px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: transform 120ms ease, box-shadow 120ms ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mustard); color: var(--indigo-dark); }
.btn-primary:hover { box-shadow: 0 0 0 2px var(--mustard) inset; }
.btn-ghost { background: transparent; color: var(--paper-raised); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.5) inset; }
.btn-ghost:hover { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9) inset; }

.torn {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: var(--paper);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M0 10 Q5 0 10 10 T20 10 T30 10 T40 10 T50 10 T60 10 T70 10 T80 10 T90 10 T100 10 T110 10 T120 10 T130 10 T140 10 T150 10 T160 10 T170 10 T180 10 T190 10 T200 10 V20 H0 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M0 10 Q5 0 10 10 T20 10 T30 10 T40 10 T50 10 T60 10 T70 10 T80 10 T90 10 T100 10 T110 10 T120 10 T130 10 T140 10 T150 10 T160 10 T170 10 T180 10 T190 10 T200 10 V20 H0 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ---------- Toolbar ---------- */
.toolbar { max-width: 1080px; margin: -34px auto 0; position: relative; z-index: 2; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; box-shadow: 0 12px 28px -18px rgba(33,29,23,0.35); }
.search-field { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--paper); }
.search-field input { border: none; background: transparent; outline: none; width: 100%; font-size: 14.5px; color: var(--ink); }
.search-field svg { flex-shrink: 0; color: #8B826A; }
.select-field { border: 1px solid var(--line); border-radius: 4px; padding: 10px; background: var(--paper); font-size: 14px; color: var(--ink); min-width: 140px; }
.stats-line { width: 100%; font-size: 13px; color: #6B6350; padding-top: 4px; }
.stats-line strong { color: var(--ink); }

/* ---------- Grid ---------- */
.grid-wrap { max-width: 1080px; margin: 34px auto 80px; padding: 0 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 5px; padding: 20px; position: relative; text-align: left; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 140ms ease, transform 140ms ease; width: 100%; }
.card:hover { box-shadow: 0 10px 24px -16px rgba(33,29,23,0.4); transform: translateY(-2px); }
.pin { position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--brick); }
.card-name { font-size: 22px; margin: 0; padding-right: 20px; }
.card-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4E4737; }
.instrument-tag { background: var(--indigo); color: var(--paper-raised); font-size: 12px; padding: 3px 9px; border-radius: 3px; font-weight: 600; }
.skill-dots { display: inline-flex; gap: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.dot.filled { background: var(--brick); }
.card-bio { font-size: 14px; line-height: 1.5; color: #3A342A; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 3px; background: var(--paper); border: 1px solid var(--line); color: #5A5340; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; }
.view-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brick); font-weight: 600; background: none; border: none; padding: 0; }

.empty-state, .loading-state { text-align: center; padding: 70px 20px; color: #6B6350; }
.empty-state h3 { font-family: 'Anton', sans-serif; font-size: 28px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }

/* ---------- Modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(24,20,14,0.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.overlay.hidden { display: none; }
.modal { background: var(--paper-raised); border-radius: 6px; width: 100%; max-width: 620px; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); background: var(--indigo); color: var(--paper-raised); border-radius: 6px 6px 0 0; }
.modal-head h2 { margin: 0; font-size: 30px; }
.icon-btn { background: none; border: none; color: inherit; opacity: 0.8; }
.icon-btn:hover { opacity: 1; }
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }

.detail-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: #4E4737; }
.detail-meta .item { display: flex; align-items: center; gap: 6px; }
.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #8B826A; margin: 0 0 6px; font-weight: 600; }
.detail-text { font-size: 15px; line-height: 1.6; color: #2B2620; margin: 0; }
.equipment-list { display: flex; flex-wrap: wrap; gap: 8px; }
.equipment-chip { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px; color: #3A342A; }
.contact-box { background: var(--paper); border: 1px dashed var(--line); border-radius: 4px; padding: 14px; }
.modal-actions { display: flex; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.link-btn { background: none; border: none; color: var(--brick); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; padding: 0; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: #4E4737; }
.field input[type=text], .field textarea, .field select { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--paper); font-size: 14.5px; color: var(--ink); outline: none; width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 2px var(--mustard); border-color: var(--mustard); }
.field textarea { resize: vertical; min-height: 72px; font-family: inherit; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.skill-picker { display: flex; gap: 8px; }
.skill-opt { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 9px 6px; background: var(--paper); font-size: 12.5px; text-align: center; color: #4E4737; }
.skill-opt.active { background: var(--indigo); color: var(--paper-raised); border-color: var(--indigo); font-weight: 600; }
.chip-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle button { border: 1px solid var(--line); background: var(--paper); border-radius: 20px; padding: 7px 13px; font-size: 13px; color: #4E4737; }
.chip-toggle button.active { background: var(--brick); border-color: var(--brick); color: #fff; }
.equip-add { display: flex; gap: 8px; }
.equip-add input { flex: 1; }
.equip-add button { background: var(--indigo); color: #fff; border: none; border-radius: 4px; padding: 0 14px; }
.equip-chip-editable { display: inline-flex; align-items: center; gap: 6px; }
.equip-chip-editable button { background: none; border: none; color: #8B826A; padding: 0; display: flex; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.btn-outline { background: transparent; border: 1px solid var(--line); color: #4E4737; border-radius: 3px; padding: 11px 18px; font-size: 14px; font-weight: 600; }
.error-banner { background: #F6DED8; border: 1px solid var(--brick); color: #7A2A18; font-size: 13px; padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; }

@media (max-width: 560px) {
  .two-col { grid-template-columns: 1fr; }
  .hero { padding: 42px 18px 64px; }
}