/* Collection: a catalogue in chapters. A sticky index on the left, then each chapter with its own rhythm of large and small specimens. */
@view-transition{navigation:auto}

.collection-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--space-xl);padding:clamp(56px,8vw,128px) var(--page-gutter) clamp(48px,6vw,96px)}
.collection-header h1{grid-column:1/-1;font-size:var(--type-heading)}
.collection-header h1+p{margin-top:var(--space-lg);font-size:var(--type-lead);line-height:1.5;color:var(--brand-muted)}
.collection-count{font-size:var(--type-small);color:var(--brand-muted);font-variant-numeric:tabular-nums}

.collection-layout{display:grid;grid-template-columns:clamp(176px,15vw,232px) minmax(0,1fr);column-gap:clamp(32px,4vw,80px);padding:0 var(--page-gutter) var(--section-space)}

/* Index: chapter list plus the all-drinks switch, held in view while browsing. */
.collection-index{position:sticky;top:var(--space-xl);align-self:start;display:grid;gap:var(--space-2xl);padding-top:var(--space-sm)}
.collection-index ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.collection-index a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;min-height:40px;padding:var(--space-sm) 0;color:var(--brand-muted);font-size:.9375rem;transition:color .25s}
.collection-index-number,.collection-index-count{font-size:var(--type-caption);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.collection-index-title{position:relative;width:fit-content}
.collection-index-title::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.collection-index a[aria-current]{color:var(--brand-ink)}
.collection-index a[aria-current] .collection-index-title::after{transform:scaleX(1)}

.collection-switch{display:flex;align-items:center;gap:var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--brand-line)}
.collection-switch-short{display:none}
.collection-switch-label{margin-right:auto;font-size:var(--type-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-muted)}

/* Text-only Can / Bottle choices; 44px targets keep them touch-friendly without visual weight. */
.collection-switch button,.collection-item-formats button{position:relative;min-height:44px;padding:0;font-size:.8125rem;color:var(--brand-muted);transition:color .2s}
.collection-switch button::after,.collection-item-formats button::after{content:'';position:absolute;left:0;right:0;bottom:11px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.collection-switch button[aria-pressed=true],.collection-item-formats button[aria-pressed=true]{color:var(--brand-ink)}
.collection-switch button[aria-pressed=true]::after,.collection-item-formats button[aria-pressed=true]::after{transform:scaleX(1)}
.collection-switch button:focus-visible,.collection-item-formats button:focus-visible,.collection-index a:focus-visible{outline:1px solid var(--brand-ink);outline-offset:4px}

/* Chapters */
.collection-chapters{display:grid;gap:var(--section-space);min-width:0}
.collection-chapter{scroll-margin-top:var(--space-xl)}
.chapter-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2.2vw,40px);row-gap:var(--space-md);align-items:end;padding-top:var(--space-lg);border-top:1px solid var(--brand-ink);margin-bottom:clamp(40px,4vw,64px)}
.chapter-number{grid-column:1/-1;font-size:var(--type-caption);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.chapter-header h2{font-size:clamp(2.25rem,3.6vw,3.75rem)}
.chapter-intro{max-width:36ch;font-size:var(--type-body);line-height:1.55;color:var(--brand-muted)}
.chapter-count{grid-column:1/-1;font-size:var(--type-small);color:var(--brand-muted);font-variant-numeric:tabular-nums}

/* Three-column specimen grid. Every photograph keeps the same 4:5 frame and scale; hierarchy comes from layout and type. */
.chapter-grid{--row-gap:clamp(48px,5vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--row-gap) clamp(16px,2.2vw,40px)}
.chapter-grid+.chapter-grid{margin-top:var(--row-gap)}
.collection-item{min-width:0;display:flex;flex-direction:column}
.collection-item-media{position:relative;display:grid;overflow:hidden;aspect-ratio:4/5;background:var(--brand-studio)}
.collection-item-media img{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1) var(--cascade-active,0ms),transform .8s cubic-bezier(.22,1,.36,1)}
.is-cascading .collection-item-media img{--cascade-active:var(--cascade,0ms);transition-duration:.7s,.8s}
.collection-item[data-format="paper-can-200"] img[data-format="paper-can-200"],.collection-item[data-format="cork-glass"] img[data-format="cork-glass"]{opacity:1}
.collection-item-position{position:absolute;top:var(--space-md);left:var(--space-md);font-size:var(--type-caption);letter-spacing:.08em;color:var(--brand-muted);font-variant-numeric:tabular-nums}

/* One card anatomy everywhere: name, descriptor, ABV and size, then the packaging choice. */
.collection-item-info{display:grid;gap:var(--space-sm);margin-top:var(--space-lg)}
.collection-item-text{min-width:0}
.collection-item h3{font-size:clamp(1.0625rem,1.25vw,1.25rem);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.collection-item h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.collection-item-text p{margin-top:var(--space-xs);font-size:var(--type-small);line-height:1.5;color:var(--brand-muted)}
.collection-item-text .collection-item-spec{margin-top:0;font-variant-numeric:tabular-nums}
.collection-item-formats{display:flex;gap:var(--space-md);margin-bottom:-11px}

/* The lead row: the chapter's first drink shown larger. Same card anatomy; bottom alignment puts every name on one line. */

@media(min-width:1051px){
  .chapter-lead{grid-template-columns:1.6fr 1fr 1fr;align-items:end}
}
@media(min-width:360px) and (max-width:1050px){
  .chapter-lead .collection-item:first-child{grid-column:1/-1}
}

@media(hover:hover){
  .collection-item:hover .collection-item-media img{transform:scale(1.02)}
  .collection-item:hover h3 a{background-size:100% 1px}
  .collection-switch button:hover,.collection-item-formats button:hover,.collection-index a:hover{color:var(--brand-ink)}
}

/* Specimens settle into place as they enter the viewport. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    /* The lead row moves as one unit so its larger first card never drifts out of line with its neighbours. */
    .chapter-lead,.chapter-grid:not(.chapter-lead) .collection-item{animation:collection-settle linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes collection-settle{from{opacity:0;transform:translateY(32px)}}

/* The drink's name carries into the product page heading. */
::view-transition-group(product-title){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Below desktop the index becomes a sticky bar above the chapters. */
@media(max-width:1050px){
  .collection-layout{grid-template-columns:minmax(0,1fr)}
  .collection-index{z-index:var(--z-navigation);top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin:0 calc(var(--page-gutter) * -1) var(--space-2xl);padding:0 var(--page-gutter);background:var(--brand-paper);border-bottom:1px solid var(--brand-line)}
  .collection-index nav{min-width:0;overflow-x:auto;scrollbar-width:none}
  .collection-index ol{display:flex;gap:var(--space-lg)}
  .collection-index a{display:flex;gap:var(--space-sm);min-height:56px;align-items:center;white-space:nowrap}
  .collection-index-count{display:none}
  .collection-switch{flex:none;padding-top:0;border-top:0}
  .collection-chapter{scroll-margin-top:72px}
  .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Mobile: the first drink is visible without scrolling. Counts and chapter/position numbers are dropped;
   titles follow the site-wide mobile sizes in site.css. */
@media(max-width:800px){
  .collection-header{grid-template-columns:minmax(0,1fr);padding:24px var(--page-gutter) 20px}
  .collection-header h1+p{margin-top:var(--space-sm);font-size:var(--type-body)}
  .collection-count,.chapter-number,.chapter-count,.collection-item-position{display:none}
  .collection-index{margin-bottom:var(--space-lg)}
  .collection-index a{min-height:48px}
  .chapter-header{padding-top:var(--space-md);row-gap:var(--space-sm);margin-bottom:var(--space-lg)}
  /* The sticky chapter bar already draws a rule above the first chapter. */
  .collection-chapter:first-child .chapter-header{border-top:0;padding-top:0}
  .chapter-intro{font-size:.9375rem}
}
@media(max-width:600px){
  .collection-switch-long{display:none}
  .collection-switch-short{display:inline}
  .collection-index{gap:var(--space-md)}
  .collection-index ol{gap:var(--space-md)}
  .collection-index a{font-size:.875rem}
  .collection-index-number,.collection-index-article{display:none}
  .chapter-header{grid-template-columns:minmax(0,1fr)}
  .chapter-grid{--row-gap:var(--space-2xl);column-gap:var(--space-md)}
  .collection-item-info{margin-top:var(--space-md)}
}
@media(max-width:359px){
  .chapter-grid{grid-template-columns:minmax(0,1fr)}
}