/* ============ COLLECTION PAGE ============ */
:root{
  --kraft:#EEEDE9;
  --kraft-deep:#E1DFD9;
  --mat:#FAF9F6;
  --ink:#0C0C0C;
  --accent:#8C3A2B;
  --rule:3px solid var(--ink);
  --rule-thin:2px solid var(--ink);
  --pop:7px 7px 0 var(--ink);
  --pop-sm:4px 4px 0 var(--ink);
  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(16px,4vw,40px);
  --side-w:min(300px,86vw);
  --ease-heavy:cubic-bezier(.5,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--kraft); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.col-menu-open{overflow:hidden}
button{font:inherit; cursor:pointer; color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:var(--pad)}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Shell + sidebar ── */
.col-shell{display:flex; min-height:100svh}

.col-side{
  flex:0 0 var(--side-w);
  background:var(--mat); border-right:var(--rule);
  padding:clamp(20px,4vh,32px) clamp(16px,3vw,24px);
  position:sticky; top:0; align-self:flex-start;
  max-height:100svh; overflow:auto; z-index:200;
}
.col-side__lede{
  margin:0 0 6px; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; opacity:.65;
}
.col-side__title{
  margin:0 0 22px; font-family:var(--display); font-weight:900;
  font-size:clamp(22px,4.2vw,30px); line-height:.95; text-transform:uppercase;
}
.col-side__nav{display:grid; gap:6px}
.col-nav-link{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:10px 12px; border:var(--rule-thin); background:var(--kraft);
  text-decoration:none; color:inherit;
  font-size:10px; font-weight:700; letter-spacing:.04em; line-height:1.3;
  transition:background .15s, transform .15s;
}
.col-nav-link span{
  flex-shrink:0;
  font-size:10px; opacity:.55; font-weight:700; letter-spacing:.08em;
}
.col-nav-link:hover,.col-nav-link:focus-visible{
  background:var(--kraft-deep); outline:none; transform:translateX(2px);
}

.col-main{flex:1; min-width:0}
.col-topbar{
  display:none; align-items:center; gap:12px;
  padding:12px var(--pad); border-bottom:var(--rule); background:var(--mat);
  position:sticky; top:0; z-index:150;
}
.col-topbar-title{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(14px,3.5vw,18px); text-transform:uppercase; line-height:1.1;
}
.col-burger{
  width:44px; height:44px; padding:0; border:var(--rule); background:var(--kraft);
  box-shadow:var(--pop-sm); display:grid; place-content:center; gap:5px;
}
.col-burger span{
  display:block; width:18px; height:2px; background:var(--ink);
}

.col-scrim{
  position:fixed; inset:0; z-index:180; background:rgba(12,12,12,.45);
}
.col-scrim[hidden]{display:none !important}

@media (max-width:860px){
  .col-topbar{display:flex}
  .col-side{
    position:fixed; left:0; top:0; bottom:0; width:var(--side-w);
    transform:translateX(-105%); transition:transform .32s var(--ease-heavy);
    box-shadow:var(--pop);
  }
  .col-side.open{transform:translateX(0)}
}

.col-content{padding-block:clamp(24px,5vh,48px) clamp(40px,8vh,80px)}

.col-section{margin-bottom:clamp(36px,6vh,56px)}
.col-section-title{
  margin:0 0 4px; font-family:var(--display); font-weight:900;
  font-size:clamp(24px,5vw,36px); text-transform:uppercase; line-height:.95;
}
.col-section-sub{margin:0 0 16px; font-size:12px; opacity:.7}

/* ── Grid tiles ── */
.col-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2vw,16px);
}
@media (min-width:640px){
  .col-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  .col-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
}
@media (min-width:1200px){
  .col-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.col-tile{
  appearance:none; border:var(--rule); background:var(--mat);
  box-shadow:var(--pop-sm); padding:0; text-align:left;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .2s var(--ease-heavy), box-shadow .2s;
}
.col-tile:hover,.col-tile:focus-visible{
  transform:translate(-2px,-2px);
  box-shadow:var(--pop);
  outline:none;
}
.col-tile__mat{
  aspect-ratio:1; overflow:hidden; background:var(--kraft-deep);
  border-bottom:var(--rule-thin); flex-shrink:0;
}
.col-tile__mat img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s var(--ease-heavy);
}
.col-tile:hover .col-tile__mat img,.col-tile:focus-visible .col-tile__mat img{
  transform:scale(1.06);
}
.col-tile__cap{
  flex:1; min-height:3.4em; margin:0;
  padding:10px 12px 12px;
  font-size:10px; font-weight:600; line-height:1.35;
  letter-spacing:.02em; text-transform:none;
  overflow-wrap:anywhere; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; background:var(--mat);
}

/* ── Modal ── */
.col-modal{
  position:fixed; inset:0; z-index:800;
  display:grid; place-items:center; padding:var(--pad);
}
.col-modal[hidden]{display:none !important}
.col-modal__backdrop{
  position:absolute; inset:0; background:rgba(12,12,12,.72);
  animation:colFadeIn .25s ease both;
}
.col-modal__panel{
  position:relative; z-index:1; width:min(100%,1080px); max-height:min(92vh,900px);
  background:var(--mat); border:var(--rule); box-shadow:var(--pop);
  display:flex; flex-direction:column; overflow:hidden;
  animation:colSlideUp .35s var(--ease-heavy) both;
}
@keyframes colFadeIn{from{opacity:0}to{opacity:1}}
@keyframes colSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.col-close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:40px; height:40px; border:var(--rule); background:var(--kraft);
  font-family:var(--display); font-size:28px; line-height:1;
  display:grid; place-items:center; box-shadow:var(--pop-sm);
}
.col-close:hover{background:var(--kraft-deep)}

.col-modal__layout{
  display:grid; grid-template-columns:1fr;
  overflow:auto; flex:1; min-height:0;
}
@media (min-width:860px){
  .col-modal__layout{
    grid-template-columns:1.05fr .95fr;
    overflow:hidden; min-height:420px;
  }
}

.col-zoom{
  position:relative; background:var(--kraft-deep);
  border-bottom:var(--rule); overflow:hidden;
  min-height:min(52vw,420px);
  cursor:zoom-in; touch-action:manipulation;
}
@media (min-width:860px){
  .col-zoom{border-bottom:none; border-right:var(--rule); min-height:0; height:100%}
}
.col-zoom img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .35s var(--ease-heavy);
  transform-origin:var(--zx,50%) var(--zy,50%);
}
.col-zoom.zoomed{cursor:zoom-out}
.col-zoom.zoomed img{transform:scale(2)}

@media (hover:hover) and (pointer:fine){
  .col-zoom:not(.zoomed):hover img{transform:scale(2)}
}
.col-zoom-hint{
  position:absolute; left:12px; bottom:12px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--mat); border:var(--rule-thin); padding:5px 8px; opacity:.85;
  pointer-events:none;
}
.col-zoom-hint::after{content:"Tap to zoom"}
@media (hover:hover) and (pointer:fine){
  .col-zoom-hint::after{content:"Hover to zoom"}
}
.col-zoom.zoomed .col-zoom-hint{opacity:0}

.col-detail{
  padding:clamp(16px,3vw,28px);
  overflow:auto;
}
.col-detail-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,3.6vw,30px); line-height:1.08; margin:0 0 10px;
  overflow-wrap:anywhere; word-break:break-word;
}
.col-meta{
  margin:0 0 16px; font-size:13px; font-weight:700; letter-spacing:.04em;
}
.col-desc{margin:0; font-size:13px; line-height:1.6; opacity:.88}

.col-nav{
  display:flex; gap:10px; justify-content:space-between;
  padding:12px 14px; border-top:var(--rule); background:var(--kraft);
}
.col-nav-btn{
  flex:1; max-width:220px; padding:10px 14px;
  border:var(--rule); background:var(--mat); box-shadow:var(--pop-sm);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.col-nav-btn:hover{background:var(--kraft-deep)}
.col-nav-btn:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .col-zoom img,.col-tile__mat img{transform:none !important}
}