:root{
  --bg:     #e8e3d3;
  --paper:  #f6efe0;
  --ink:    #1f1f1d;
  --mute:   #6b6860;
  --rule:   rgba(var(--ink-rgb),.13);
  --rulehv: rgba(var(--ink-rgb),.8);
  --accent: #c44a2a;
  --ease:   cubic-bezier(.65,.02,.2,1);
  --nav-h:  49px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}

/* ─── NAV ──────────────────────────────────── */
.cb-nav{
  height:var(--nav-h);
  display:flex;align-items:center;
  padding:0 clamp(20px,2.5vw,48px);
  border-bottom:1px solid var(--rulehv);
  flex-shrink:0;
}
.cb-logo{
  font-weight:900;font-size:clamp(15px,1.3vw,20px);
  letter-spacing:-.03em;
}
.cb-logo span{color:var(--accent)}
.cb-nav-links{
  display:flex;gap:clamp(14px,1.8vw,32px);
  margin-left:clamp(20px,2.5vw,44px);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.cb-nav-links a{opacity:.35;transition:opacity .2s}
.cb-nav-links a:hover,.cb-nav-links a.is-active{opacity:1}
.nav-right{display:flex;align-items:center;gap:24px;margin-left:auto}
.cb-count{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  opacity:.35;
}

/* ─── STAGE (breathing room) ────────────────── */
.cb-stage{
  flex:1;
  min-height:0;
  padding:0 clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px);
  display:flex;
  flex-direction:column;
}

/* ─── COLUMNS WRAPPER ───────────────────────── */
.cb-columns{
  flex:1;
  min-height:0;
  display:flex;
  border:1px solid var(--rulehv);
  border-top:0;
  overflow:hidden;
}

/* ─── INDIVIDUAL COLUMN ─────────────────────── */
.cb-col{
  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
  min-width:52px;
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--rulehv);
  transition:flex-grow .72s var(--ease);
  display:flex;
  flex-direction:column;
  cursor:pointer;
}
.cb-col:last-child{border-right:0}
.cb-col.is-open{flex-grow:5.5}

/* ─── IMAGE AREA ─────────────────────────────── */
.cb-img{
  flex:1;
  min-height:0;
  position:relative;
  overflow:hidden;
  background:var(--paper);
}
.cb-img img{
  position:absolute;
  inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  filter:grayscale(.18) contrast(1.01);
  opacity:.2;
  transition:opacity .65s var(--ease), transform 1.2s var(--ease), filter .6s;
}
.cb-col.is-open .cb-img img{
  opacity:1;
  filter:grayscale(0) contrast(1);
  transform:scale(1.03);
}
.cb-col:not(.is-open):hover .cb-img img{
  opacity:.38;
}

/* gradient overlay — on cb-img, only when open */
.cb-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 38%, rgba(0,0,0,.58) 100%);
  opacity:0;
  transition:opacity .52s;
  pointer-events:none;
}
.cb-col.is-open .cb-img::after{opacity:1}

/* ─── OPEN LABEL (over image) ────────────────── */
.cb-label{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:clamp(16px,1.8vw,28px) clamp(16px,1.8vw,26px);
  pointer-events:none;
  color:#f5f0e8;
}
.cb-name{
  display:block;
  font-size:clamp(15px,1.5vw,24px);
  font-weight:800;letter-spacing:-.025em;line-height:1.1;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cb-col.is-open .cb-name{
  opacity:1;transform:translateY(0);
  transition-delay:.22s;
}

/* ─── STRIP NUMBER (collapsed state) ────────── */
.cb-num-strip{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.4;
  pointer-events:none;
  white-space:nowrap;
  transition:opacity .32s;
}
.cb-col.is-open .cb-num-strip{opacity:0}

/* ─── INFO STRIP (above image, flush with nav) ── */
.cb-info{
  height:64px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,1.8vw,28px);
  border-top:1px solid var(--rulehv);
  border-bottom:1px solid var(--rulehv);
  background:var(--bg);
  gap:10px;
  transition:background .22s;
}
.cb-col:hover .cb-info{background:var(--paper)}
.cb-col.is-open .cb-info{background:var(--paper)}
.cb-info-meta{
  display:flex;flex-direction:column;gap:3px;
  min-width:0;overflow:hidden;
}
.cb-info-name{
  font-size:clamp(18px,2vw,28px);font-weight:900;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.04em;text-transform:uppercase;line-height:1;
}
.cb-info-sub{
  font-size:10px;color:var(--mute);letter-spacing:.06em;
  white-space:nowrap;text-transform:uppercase;
}
.cb-info-num{
  font-size:clamp(11px,.9vw,13px);font-weight:700;
  flex-shrink:0;letter-spacing:.04em;text-transform:uppercase;
  opacity:.35;
}

/* ══════════════ MOBILE (≤699px) ══════════════ */
@media (max-width:699px){
  .cb-nav{padding:0 14px}
  .cb-nav-links{
    margin-left:10px;gap:12px;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .cb-nav-links::-webkit-scrollbar{display:none}
  .cb-nav-links a{flex:none}
  .cb-count{display:none}
  .nav-right{gap:14px;margin-left:10px}

  /* the horizontal accordion turns vertical */
  .cb-stage{padding:0 10px 10px}
  .cb-columns{flex-direction:column}
  .cb-col{
    border-right:0;border-bottom:1px solid var(--rulehv);
    min-width:0;min-height:56px;
  }
  .cb-col:last-child{border-bottom:0}
  .cb-col.is-open{flex-grow:6}
  .cb-num-strip{transform:translate(-50%,-50%)} /* reads horizontally now */
  .cb-info{height:56px;padding:0 14px}
  .cb-info-name{font-size:16px}
  .cb-label{padding:14px}
  .cb-name{font-size:15px}
}