/* Explore Malabar · Wakku */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,88px)}
/* ===== explore ===== */
.page{padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
.xhead{padding-block:clamp(56px,8vw,120px) clamp(32px,4vw,56px)}
.xhead .d-xxl{font-size:clamp(52px,9vw,148px)}
.xhead .lede{margin-top:24px}
.tabs{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:0}
.tab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:14px 0;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:8px;align-items:baseline;transition:color .4s var(--ease),border-color .4s var(--ease)}
.tab sup{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.04em}
.tab:hover{color:var(--ink)}
.tab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end;padding-block:22px;border-bottom:1px solid var(--rule)}
.sel{display:flex;flex-direction:column;gap:6px}
.sel label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sel select{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:0;border-bottom:1px solid var(--ink-2);padding:8px 28px 8px 0;border-radius:0;min-width:170px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.sel select:focus{outline:none;border-bottom:2px solid var(--accent)}
.tgl{display:flex;align-items:center;gap:10px;font-size:15px;padding-bottom:8px;cursor:pointer}
.tgl input{width:18px;height:18px;accent-color:var(--accent)}
.count{margin-left:auto;display:flex;gap:16px;align-items:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-bottom:8px}
.count button{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;font:inherit;color:var(--ink);padding:0}
@media (max-width:640px){.count{margin-left:0;width:100%}.sel select{min-width:0;width:100%}.sel{flex:1 1 140px}}
.grid{margin-top:clamp(32px,4vw,56px);row-gap:clamp(36px,4vw,56px);padding-bottom:clamp(88px,10vw,150px)}
.ecard{grid-column:span 3;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.ecard .frame{--ar:4/5;margin-bottom:6px}
.ecard:hover .ph{transform:scale(1.035)}
.ecard .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--earth)}
.ecard h3{font-family:var(--f-display);font-size:clamp(24px,2vw,30px);line-height:1.08}
.ecard .b{font-size:15px;line-height:1.5;color:var(--ink-2)}
.ecard .c{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:8px;border-top:1px solid var(--rule)}
@media (max-width:1180px){.ecard{grid-column:span 4}}
@media (max-width:1023px){.ecard{grid-column:span 4}}
@media (max-width:639px){.ecard{grid-column:span 2}.ecard .b{display:none}}
.empty{grid-column:1 / -1;padding:56px 0;border-top:1px solid var(--rule)}
.empty p{font-family:var(--f-serif);font-style:italic;font-size:24px}

/* detail */
.back{display:inline-flex;gap:10px;margin-top:clamp(28px,4vw,48px);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:4px}
.back:hover{color:var(--ink)}
.dhero{margin-top:clamp(28px,4vw,56px);align-items:end;row-gap:28px}
.dhero .t{grid-column:1 / span 6;display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.dhero .frame{grid-column:8 / span 5;--ar:4/5}
.person .dhero .frame{grid-column:1 / span 5;grid-row:1;--ar:3/4}
.person .dhero .t{grid-column:7 / span 6;grid-row:1}
.dhero .ml{font-family:var(--f-ml);font-size:clamp(20px,2vw,26px);color:var(--ink-2)}
.dhero .d-xxl{font-size:clamp(48px,7.6vw,124px)}
.dhero .meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--ink)}
.dhero .meta a{color:var(--ink)}
.dhero .role{font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2vw,28px);color:var(--earth)}
.dhero .quote{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);line-height:1.4;padding-left:20px;border-left:2px solid var(--earth);margin:8px 0}
.consent{display:inline-block;align-self:flex-start;padding:3px 9px;border:1px dashed var(--ink-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1023px){
  .dhero .t,.dhero .frame,.person .dhero .t,.person .dhero .frame{grid-column:1 / -1;grid-row:auto}
  .dhero .frame,.person .dhero .frame{max-width:560px}
}
.dbody{margin-top:clamp(56px,7vw,112px);align-items:start;row-gap:40px}
.dbody .about{grid-column:1 / span 7;font-size:clamp(18px,1.4vw,21px);line-height:1.7;display:grid;gap:1.1em}
.dbody .about p{max-width:36em}
.dbody .side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.minimap svg{width:100%;height:auto;display:block;max-width:300px}
.minimap text{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;fill:var(--ink)}
.minimap .sea{font-family:var(--f-serif);font-style:italic;font-size:13px;letter-spacing:0;fill:var(--ink-2)}
.facts{display:grid}
.facts .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts .row:first-child{border-top:1px solid var(--ink)}
.facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.facts dd{margin:0;text-align:right}
@media (max-width:1023px){.dbody .about,.dbody .side{grid-column:1 / -1}}

/* the thread */
.thread{margin-top:clamp(64px,8vw,128px);padding-block:clamp(40px,5vw,72px);background:var(--night);color:var(--on-night)}
.thread .eyebrow{color:var(--on-night-2)}
.thread h2{margin-top:12px}
.chain{margin-top:clamp(28px,3vw,44px);display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:8px}
.node{flex:1 0 190px;display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border:1px solid var(--night-rule);text-decoration:none;color:inherit;transition:background .4s var(--ease)}
a.node:hover{background:var(--night-2)}
.node.here{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.node .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.node .v{font-family:var(--f-serif);font-size:19px;line-height:1.25}
.node .ext{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-top:auto}
.link-ar{flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--on-night-2)}
@media (max-width:760px){
  .chain{flex-direction:column;overflow:visible}
  .node{flex:none}
  .link-ar{flex:none;height:34px}
  .link-ar span{transform:rotate(90deg);display:inline-block}
}

/* connections */
.conns{padding-block:clamp(72px,9vw,140px)}
.cgroup{padding-block:clamp(28px,3vw,44px);border-top:1px solid var(--ink);align-items:start;row-gap:24px}
.cgroup > h3{grid-column:1 / span 3;font-family:var(--f-display);font-size:clamp(26px,2.4vw,36px);line-height:1.05}
.cgroup > h3 small{display:block;margin-top:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.clist{grid-column:4 / span 9;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.mini{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.mini .frame{--ar:4/3;margin-bottom:4px}
.mini:hover .ph{transform:scale(1.04)}
.mini .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--earth)}
.mini .v{font-family:var(--f-serif);font-size:19px;line-height:1.25}
.mini .s{font-size:14px;color:var(--ink-2);line-height:1.45}
.rowlink{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.rowlink .v{font-family:var(--f-serif);font-size:21px;line-height:1.25}
.rowlink .s{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.rowlink .a{grid-column:2;grid-row:1 / span 2;align-self:center;transition:transform .6s var(--ease)}
.rowlink:hover .a{transform:translateX(5px)}
.rowlink.soon{opacity:.7}
@media (max-width:1023px){.cgroup > h3{grid-column:1 / -1}.clist{grid-column:1 / -1}}
@media (max-width:639px){.clist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pnote{margin-top:24px;font-size:13.5px;color:var(--ink-2)}
