/* Brand Identity · anatomy — exploded isometric stack of seven plates + the layer index. */
.cbi-anat__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--cbi-gap-l);row-gap:48px;align-items:center}
.cbi-anat__stage{--pw:clamp(230px,23vw,330px);--zgap:clamp(34px,3.7vw,52px);--open:clamp(76px,8.4vw,118px);position:relative;min-width:0;height:clamp(520px,52vw,720px);display:grid;place-items:center;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:24px 24px}
.cbi-anat__stack{position:relative;width:var(--pw);aspect-ratio:3/2;transform-style:preserve-3d;transform:translateY(62%) rotateX(58deg) rotateZ(-42deg)}
.cbi-plate{position:absolute;inset:0;background:var(--paper);border:1px solid var(--line-3);border-radius:4px;box-shadow:0 0 0 1px var(--paper),0 18px 30px -22px rgba(25,25,29,.35);
  transform:translateZ(calc((6 - var(--i)) * 5px));transition:transform 1.1s var(--e) calc((6 - var(--i)) * 70ms),border-color var(--d2) var(--e-io)}
.cbi-anat.is-ready .cbi-plate{transition-delay:0s}
.cbi-anat.is-in .cbi-plate{transform:translateZ(calc((6 - var(--i)) * var(--zgap)))}
/* the stack opens at the chosen layer: every plate above it lifts clear so its artwork can be read */
.cbi-anat.is-in .cbi-plate.is-above{transform:translateZ(calc((6 - var(--i)) * var(--zgap) + var(--open)));transition-delay:0s}
.cbi-anat.is-in .cbi-plate.is-hi{transform:translateZ(calc((6 - var(--i)) * var(--zgap) + 12px));border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 28px 40px -24px rgba(25,25,29,.45);transition-delay:0s}
.cbi-anat.is-in.is-flat .cbi-plate,.cbi-anat.is-in.is-flat .cbi-plate.is-above{transform:translateZ(calc((6 - var(--i)) * 5px));transition-delay:calc(var(--i) * 40ms)}
.cbi-anat.is-in.is-flat .cbi-plate.is-hi{transform:translateZ(calc((6 - var(--i)) * 5px + 34px))}
.cbi-plate__n{position:absolute;left:10px;top:8px;font-family:var(--f);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1}
.cbi-plate.is-hi .cbi-plate__n{color:var(--blue)}
.cbi-plate__art{position:absolute;inset:26px 18px 16px;display:flex;align-items:center;justify-content:center;gap:14px}
.cbi-plate__mark{height:100%;width:auto}
.cbi-plate__mark :is(circle,path){fill:var(--ink)}.cbi-plate__mark .b{fill:var(--blue)}.cbi-plate__mark .k{fill:var(--paper)}
.cbi-plate__sw{display:flex;width:100%;height:62%;border:1px solid var(--line)}
.cbi-plate__sw i:nth-child(1){flex:40;background:var(--ink)}.cbi-plate__sw i:nth-child(2){flex:24;background:var(--paper)}.cbi-plate__sw i:nth-child(3){flex:16;background:var(--blue)}
.cbi-plate__sw i:nth-child(4){flex:12;background:var(--paper-4)}.cbi-plate__sw i:nth-child(5){flex:8;background:var(--faint)}
.cbi-plate__aa{font-family:var(--f-h);font-weight:500;font-size:clamp(2.4rem,4.2vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.cbi-plate__lines{display:flex;flex-direction:column;gap:7px;flex:1;max-width:48%}
.cbi-plate__lines i{display:block;height:5px;border-radius:3px;background:var(--line-3)}
.cbi-plate__lines i:nth-child(2){width:84%}.cbi-plate__lines i:nth-child(3){width:62%}
.cbi-plate__img{width:100%;height:100%}
.cbi-plate__img :is(rect,path,circle){fill:none;stroke:var(--ink);stroke-width:3}
.cbi-plate__img circle{fill:var(--blue);stroke:none}
.cbi-plate--4 .cbi-plate__art{flex-direction:column;align-items:flex-start;justify-content:center}
.cbi-plate__q{font-family:var(--f-h);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.cbi-plate--4 .cbi-plate__lines{max-width:80%;width:80%}
.cbi-plate__curve{width:100%;height:100%}
.cbi-plate__curve path{fill:none;stroke:var(--ink);stroke-width:3}
.cbi-plate__curve circle{fill:var(--blue)}
.cbi-plate__wave{display:flex;align-items:center;gap:3%;width:100%;height:78%}
.cbi-plate__wave i{flex:1;height:var(--h);border-radius:2px;background:var(--ink)}
.cbi-plate__wave i:nth-child(n+10):nth-child(-n+14){background:var(--blue)}
.cbi-anat__axis{position:absolute;right:0;top:12%;bottom:12%;display:flex;flex-direction:column;justify-content:space-between;padding-right:14px;border-right:1px solid var(--line-3);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cbi-anat__axis i{font-style:normal}

/* ---- layer index ---- */
.cbi-anat__side{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.cbi-anat__list{width:100%;border-top:1px solid var(--ink)}
.cbi-anat__list li{border-bottom:1px solid var(--line)}
.cbi-anat__item{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:16px 4px;text-align:left;transition:background var(--d2) var(--e-io)}
.cbi-anat__no{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;color:var(--faint);transition:color var(--d2) var(--e-io)}
.cbi-anat__body{display:flex;flex-direction:column;gap:0;min-width:0}
.cbi-anat__name{font-family:var(--f-h);font-size:1.25rem;font-weight:500;letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
.cbi-anat__desc{display:block;max-height:0;opacity:0;overflow:hidden;font-size:var(--t-sm);line-height:1.55;color:var(--muted);transition:max-height .5s var(--e),opacity .4s var(--e),margin .5s var(--e)}
.cbi-anat__code{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cbi-anat__item:hover .cbi-anat__no,.cbi-anat__item.is-hi .cbi-anat__no{color:var(--blue)}
.cbi-anat__item.is-hi{background:var(--paper-2)}
.cbi-anat__item.is-hi .cbi-anat__desc{max-height:7.5em;opacity:1;margin-top:6px}

@media (max-width:1023px){
  .cbi-anat__grid{grid-template-columns:minmax(0,1fr)}
  .cbi-anat__stage{height:clamp(440px,80vw,600px);--pw:clamp(200px,44vw,320px)}
}
@media (max-width:600px){
  .cbi-anat__stage{height:440px;--pw:190px;--zgap:34px;--open:64px}
  .cbi-anat__axis{display:none}
  .cbi-anat__item{grid-template-columns:30px minmax(0,1fr)}
  .cbi-anat__code{grid-column:2;margin-top:6px}
}