/* concept.css — concept pages (/concept/<slug>). Every class is prefixed
   cp- because brind.css already uses many short names. */

.cp-head{margin-bottom:34px}
.cp-head h1{font-size:clamp(44px,7vw,84px);margin-bottom:22px}
.cp-stats{display:flex;flex-wrap:wrap;gap:0;margin:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;max-width:620px}
.cp-stats div{flex:1 1 150px;padding:16px 20px;background:var(--surface);border-right:1px solid var(--rule)}
.cp-stats div:last-child{border-right:0}
.cp-stats dt{font-size:12.5px;color:var(--ink-3)}
.cp-stats dd{margin:2px 0 0;font-family:var(--serif);font-size:28px;color:var(--ink);line-height:1.2}
.cp-note{margin:10px 0 0;font-size:13px;color:var(--ink-3)}

.cp-ent{display:flex;flex-direction:column;gap:4px;max-width:620px;margin:0 0 44px;padding:18px 20px;border:1px solid var(--gold);border-radius:14px;background:var(--gold-soft);text-decoration:none;color:var(--ink)}
.cp-ent-name{font-family:var(--serif);font-size:26px;line-height:1.2}
.cp-ent-desc{color:var(--ink-2);font-size:15px;font-weight:300}
.cp-ent .more{margin-top:6px}
@media (hover:hover){.cp-ent:hover .cp-ent-name{color:var(--gold)}}

.cp-two{display:flex;flex-wrap:wrap;gap:12px 48px}
.cp-two > div{flex:1 1 380px;min-width:0}
.cp-sub{margin:0 0 4px;letter-spacing:.06em;text-transform:uppercase}
.cp-empty{color:var(--ink-2);margin:0;max-width:62ch}

.cp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:14.5px;text-decoration:none}
a.cp-chip:hover{border-color:var(--gold);color:var(--gold)}

.cp-goes{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-start}
.cp-map-wrap{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.cp-map{position:relative;width:100%;max-width:480px;aspect-ratio:1/1}
.cp-ring{position:absolute;border:1px dashed var(--rule);border-radius:50%}
.cp-ring.a{inset:9%}
.cp-ring.b{inset:21%}
.cp-line{position:absolute;left:50%;top:50%;height:1px;background:var(--rule);transform-origin:0 50%}
.cp-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1/1;border-radius:50%;background:var(--gold);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-family:var(--serif);font-weight:700;font-size:clamp(14px,2.4vw,19px);line-height:1.15;box-shadow:0 0 0 8px var(--gold-soft)}
.cp-node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;min-height:36px;max-width:38%;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:13.5px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
a.cp-node:hover{border-color:var(--gold);color:var(--gold);z-index:2}

.cp-list{flex:1 1 380px;min-width:0;list-style:none;margin:0;padding:0;counter-reset:cp}
.cp-list li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);min-height:48px;flex-wrap:wrap}
.cp-list li > a,.cp-list li > span:first-child{flex:1 1 160px;min-width:0;font-size:16px;text-decoration:none;color:var(--ink)}
.cp-list li > a:hover{color:var(--gold)}
.cp-bar{flex:0 1 140px;min-width:80px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;display:flex}
.cp-bar i{display:block;height:6px;border-radius:3px;background:var(--gold)}
.cp-sites{width:96px;text-align:right;font-size:13px;color:var(--ink-3)}
@media (max-width:600px){
  .cp-list li{gap:6px 12px}
  .cp-list li > a,.cp-list li > span:first-child{flex:1 1 auto}
  .cp-sites{width:auto}
  .cp-bar{order:3;flex:1 1 100%;min-width:0}
  .cp-node{font-size:12.5px;padding:0 10px;min-height:34px}
}

.cp-foot{margin:56px 0 0;padding-top:20px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2);max-width:72ch;line-height:1.6}
.cp-foot b{color:var(--ink);font-weight:500}