/* ============ CATALOGUE PAGE ============ */
.cat-hero{padding-top:calc(clamp(60px,min(6.4vw,9.5vh),86px) + clamp(28px,6vh,72px));padding-bottom:clamp(12px,1.6vw,24px)}
.cat-hero .h-1{font-size:clamp(3rem,9vw,9rem)}
.cat-hero-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap;margin-top:clamp(16px,2.2vw,26px)}
.cat-hero-row .lede{margin-top:0}
.cat-hero-row .hero-badges{margin:0}
.cat-grid-wrap{padding-bottom:clamp(16px,2vw,32px)}
.cat-grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,22px)}
.ccard{position:relative;display:block;border-radius:clamp(16px,2vw,26px);overflow:hidden;background:#e9e4dc;aspect-ratio:4/4.3;isolation:isolate;
  transform:translateY(var(--off,0px));transition:opacity .95s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}/* The reveal engine rules in public.css (.rv-pending[data-r="fade"] and
   .rv-pending.is-in, both (0,2,0)) would override the offset above, so cards
   below the fold lose the stagger once revealed. Restate it here: this sheet
   loads after public.css, so it wins at equal specificity and keeps the
   offset across pending and revealed states. The hover/focus lifts below
   still beat it because they come later in this sheet. */
.ccard[data-r]{transform:translateY(var(--off,0px))}.ccard:focus-visible{transform:translateY(calc(var(--off,0px) - 8px));box-shadow:0 34px 60px -34px rgba(11,11,12,.55)}@media(hover:hover){.ccard:hover{transform:translateY(calc(var(--off,0px) - 8px));box-shadow:0 34px 60px -34px rgba(11,11,12,.55)}}
.ccard:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
.ccard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,12,.84),rgba(11,11,12,.10) 52%,rgba(11,11,12,.02));
  opacity:.88;transition:opacity .5s}@media(hover:hover){
.ccard:hover::after{opacity:1}}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s ease}@media(hover:hover){
.ccard:hover img{transform:scale(1.055)}}
.cc-num{position:absolute;top:14px;right:58px;z-index:2;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.12em;color:rgba(247,244,239,.9)}
.cc-pill{position:absolute;top:13px;left:13px;z-index:2;padding:6px 11px;border-radius:99px;font-size:.63rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(253,252,250,.9);color:var(--ink)}
.cc-plus{position:absolute;top:13px;right:13px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(253,252,250,.92);color:var(--ink);
  display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-90deg);transition:all .5s var(--ease)}.ccard:focus-visible .cc-plus{opacity:1;transform:none}@media(hover:hover){.ccard:hover .cc-plus{opacity:1;transform:none}}
.cc-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;padding:clamp(18px,2.2vw,32px);color:var(--ivory)}
.cc-kicker{display:flex;align-items:center;gap:.7em;font-size:.63rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.66)}
.cc-kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:#FF6B7F;flex:none}
.cc-title{display:block;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:-.045em;line-height:1;margin-top:12px}
.cc-title em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.cc-sub{display:block;margin-top:9px;font-size:.87rem;line-height:1.5;color:rgba(247,244,239,.62);max-width:42ch}
.cc-go{display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-size:.78rem;font-weight:500;color:rgba(247,244,239,.85);position:relative;padding-bottom:3px}
.cc-go::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35;
  transform-origin:left;transition:transform .45s var(--ease)}@media(hover:hover){
.ccard:hover .cc-go::after{transform:scaleX(0)}}
.cc-go svg{transition:transform .45s var(--ease)}@media(hover:hover){
.ccard:hover .cc-go svg{transform:translateX(5px)}}
@media(min-width:901px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,48px) clamp(12px,1.4vw,22px)}
  /* Offset must stay below the row gap, or an even card's bottom lands flush
     on the next row's top edge and the edges read as overlapping. */
  .ccard:nth-child(even){--off:clamp(12px,1.6vw,24px)}
  /* Transformed cards are outside the grid's layout height, so the wrap must
     reserve the offset or the last even card slides behind the footer. */
  .cat-grid-wrap{padding-bottom:calc(clamp(12px,1.6vw,24px) + clamp(16px,2vw,32px))}
}

/* band in public.css */