/* /the-case, /heat-and-eat, /packages. Shared components are in site.css: see DESIGN.md. */

/* ---- head: title on the left, the ruled "call first" box on the right ---- */
.ck-head{padding-bottom:clamp(28px,4vw,48px)}
.ck-head__in{display:grid;gap:30px}
.ck-callbox{align-self:end;padding-bottom:16px}
.ck-callbox__big{font:400 clamp(38px,4vw,58px)/.96 var(--gothic);text-transform:uppercase;letter-spacing:.006em}
.ck-callbox__num{display:inline-block;font:400 clamp(30px,2.8vw,40px)/1 var(--gothic);letter-spacing:.015em;color:var(--red-k);padding-block:10px 6px;min-height:44px}
.ck-callbox__fine{font-size:16px;line-height:1.35;margin-top:4px}
.ck-index{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:20px;border-top:2px solid var(--ink);padding-top:6px}
.ck-index a{display:inline-flex;align-items:center;min-height:44px;font:400 clamp(25px,2.1vw,31px)/1 var(--gothic);text-transform:uppercase;letter-spacing:.014em;text-underline-offset:.14em}
.ck-trays{padding-bottom:calc(var(--tear-h) + clamp(24px,3vw,44px))}
.ck-trays .rh{margin-bottom:16px}
@media (max-width:599px){.ck-trays .tray--tbone{grid-column:1/-1}}

/* ---- the strip of case between kraft and newsprint ---- */
.ck-band{position:relative;overflow:hidden;background:var(--ink);height:clamp(250px,37vw,560px);margin-top:calc(var(--tear-h) * -1)}
.ck-band{background:var(--news)}
.ck-band img{width:100%;height:calc(100% - var(--tear-h) * .55);object-fit:cover;object-position:50% 100%}

/* ---- a department ---- */
.ck-dept{--ck-rule:rgba(23,18,13,.45);scroll-margin-top:8px}
.ck-dept__head{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,40px)}
.ck-dept__head .lede{max-width:48ch}
.ck-groups{display:grid;gap:30px}
.ck-group{min-width:0}
.ck-group>p{margin-top:8px}

/* ---- the list. Gothic names, slab asides, a hairline under each. ---- */
.ck-group .rh{font-size:clamp(21px,1.75vw,26px)}
.cuts{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;margin-top:6px}
.cut{display:flex;flex-wrap:wrap;align-items:center;gap:1px 8px;min-width:0;padding-block:8px 6px;border-bottom:1px solid var(--ck-rule,rgba(23,18,13,.45))}
.cut--wide{grid-column:1/-1}
.cut__n{font:400 clamp(25px,2vw,30px)/1.05 var(--gothic);text-transform:uppercase;letter-spacing:.012em;min-width:0}
.cut__n a{text-underline-offset:.12em;text-decoration-thickness:.05em}
.cut__a{flex-basis:100%;font:italic 500 15.5px/1.22 var(--slab)}
.cut__old{font:400 24px/1 var(--hand);letter-spacing:.02em;color:var(--red-k);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;transform:rotate(-2deg)}
.cut__c{display:inline-block;font:700 15px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--red-k);border:1.5px solid currentColor;padding:3px 5px 2px;transform:rotate(-1.5deg)}

/* ---- split: lists one side, photos the other ---- */
.ck-split{display:grid;gap:clamp(24px,3vw,44px)}
.ck-split__main{min-width:0}
.ck-split__pics{display:grid;gap:16px;align-content:start}
.ck-turkey{margin-top:20px;font-size:18px}
.ck-cap{font:italic 600 16px/1.25 var(--slab);margin-top:8px}
.frame .ck-cap{padding:0 3px 3px}

/* ---- lamb and veal ---- */
.ck-lamb{display:grid;gap:24px}
.ck-lamb__pics{display:grid;gap:16px;align-content:start}
.ck-lamb__shank{max-width:300px}
/* Native 360 wide: never the big picture. */
.ck-kebabs{max-width:300px}

/* ---- red section ---- */
.ck-house{--ck-rule:rgba(244,231,207,.55)}
.ck-house .cut__c,.ck-house a{color:inherit}
.ck-house .cut__old{color:var(--cream);text-decoration-color:var(--ink)}
.ck-house .disp span{display:block}
.ck-house__more{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;align-items:end}
.ck-house__grid{display:grid;gap:24px}
.ck-house__dogs{align-self:start}
.ck-house__card{right:-6px;top:-12px;transform:rotate(4deg)}
.ck-house .disp{font-size:clamp(52px,6.4vw,100px)}

/* ---- wild game: the wall of words ---- */
.ck-game{--ck-rule:rgba(244,231,207,.5);padding-top:calc(var(--sec) * .8)}
.ck-game .cut__c{color:var(--red-hot)}
.ck-wall{display:flex;flex-wrap:wrap;gap:0 .32em;margin-top:8px;font:400 clamp(66px,12.4vw,204px)/.94 var(--gothic);text-transform:uppercase;letter-spacing:.002em}
.ck-wall li{display:inline-flex;align-items:flex-start;gap:.06em}
.ck-wall li:nth-child(7),.ck-wall li:nth-child(8){color:var(--red-hot)}
.ck-wall .cut__c{margin-top:.5em;transform:rotate(-4deg)}
.ck-wall .tbd{align-self:center}
.ck-game__foot{display:grid;gap:26px;margin-top:clamp(26px,3vw,44px)}
.ck-game .lede{max-width:34ch}
.pencil.ck-game__pencil{color:var(--red-hot);margin-top:12px}
.ck-game__note{margin-top:10px}

/* ---- fish and cold cuts ---- */
.ck-fish{display:grid;gap:clamp(22px,3vw,40px)}
.ck-fish__cols{display:grid;gap:28px;margin-top:22px}
.ck-fish__call{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-block:8px}
.ck-fish__ham,.ck-fish__gf{margin-top:12px}

/* ---- closer, three pages ---- */
.ck-end{padding-bottom:calc(var(--sec) + var(--tear-h) * .6)}
.ck-end__in{display:grid;gap:22px}
.ck-end__act{display:flex;flex-wrap:wrap;gap:12px;align-content:start}
.ck-end__next{flex-basis:100%;margin-top:2px}
.ck-end--flush{padding-top:0}
.ck-end .disp{font-size:clamp(52px,6vw,92px)}

/* ================ heat and eat ================ */
.ck-cooler{position:relative;padding-block:calc(var(--tear-h) + 26px) calc(var(--tear-h) + 34px)}
.ck-cooler__in{display:grid;gap:18px}
.ck-cooler__line{font:700 italic clamp(19px,1.7vw,24px)/1.25 var(--slab);margin-block:6px 8px}
.ck-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:2px solid var(--cream);padding:5px}
.ck-vidwrap{position:relative}
.ck-vidplay{border:0;cursor:pointer;font:inherit}
.ck-cooler__seen{margin-top:10px}

/* The tubs' own labels: black and gold, or a colored oval */
.ck-soups__in{display:grid;gap:26px}
.ck-soups .lede{margin-top:8px}
.ck-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.ck-label{display:flex;align-items:center;justify-content:center;min-height:82px;padding:10px 12px;text-align:center;font:400 clamp(25px,2.1vw,31px)/1.02 var(--gothic);text-transform:uppercase;letter-spacing:.016em;transform:rotate(-.7deg)}
.ck-label:nth-child(3n+2){transform:rotate(.8deg)}
.ck-label:nth-child(4n){transform:rotate(-1.4deg)}
.ck-label--black{background:#14100c;color:#e8bb62;box-shadow:inset 0 -7px 0 #a9782c}
.ck-label--maroon{background:#6b1420;color:#ffe7c4;border-radius:50%}
.ck-label--blue{background:#1c67a8;color:#fff;border-radius:50%}
.ck-soups__pencil{margin-top:16px}

.ck-meals__grid{display:grid;gap:28px}
.ck-meals__beans .tray__frame{height:auto}
.ck-meals__beans .tray__frame img{height:auto}

.ck-fine__grid{display:grid;gap:32px}
.ck-fine__box>p+p{margin-top:8px}
.ck-fine__big{font:400 clamp(34px,3.2vw,46px)/.98 var(--gothic);text-transform:uppercase}
.ck-fine__a{margin-top:14px}

/* ================ packages ================ */
.ck-six{padding-bottom:calc(var(--sec) * .7)}
.pk-grid{display:grid;gap:36px;margin-top:clamp(28px,4vw,48px)}
.pk{display:flex;flex-direction:column;min-width:0}
.pk .box__title{font-size:clamp(23px,2vw,28px)}
.pk__aside{font:italic 500 16.5px/1.25 var(--slab);margin-bottom:6px}
.pk__rows{margin-bottom:12px;flex:1}
.pk__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding-block:7px 5px;border-bottom:1px solid rgba(23,18,13,.4)}
.pk__item{font:400 clamp(24px,2vw,29px)/1.06 var(--gothic);text-transform:uppercase;letter-spacing:.012em}
.pk__row .ld{flex:1 1 18px;min-width:18px;height:2px;align-self:center;background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 11px)}
.pk__qty{font:800 italic 16.5px/1.2 var(--slab);margin-left:auto;text-align:right}
.pk__price{white-space:normal;text-align:center;display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px 8px;background:var(--ink);color:var(--cream);font:400 26px/1 var(--gothic);text-transform:uppercase;letter-spacing:.02em;text-decoration:none}
.pk__price:hover{background:var(--red-k)}
.pk-pic{align-self:start}
@media (min-width:700px){
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
  .pk-pic{align-self:stretch;display:flex;flex-direction:column}
  .pk-pic img{flex:1 1 0;min-height:0;height:0;object-fit:cover}
}

.ck-royal{position:relative;padding-block:calc(var(--tear-h) + 28px) calc(var(--tear-h) + 34px)}
.ck-royal__in{display:grid;gap:22px}
.ck-royal__pic{max-width:474px}
.ck-royal__txt{min-width:0}
.ck-royal .pk{margin-top:28px;background:none;border-color:var(--cream)}
.ck-royal .pk__row{border-bottom-color:rgba(244,231,207,.45)}
.ck-royal .pk__price{background:var(--cream);color:var(--ink)}
.ck-royal .pk__price:hover{background:#fff}

.ck-new{padding-bottom:clamp(40px,5vw,64px)}
.ck-new__head{display:grid;gap:10px}
.ck-new__wrap{margin-top:26px;max-width:62ch}

/* ================ wide ================ */
@media (min-width:600px){
  .ck-labels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:700px){
  .ck-head__in{grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:clamp(30px,5vw,80px)}
  .ck-index{gap:0 26px;margin-top:28px}
  .ck-dept__head{grid-template-columns:minmax(0,1fr) minmax(280px,40%);align-items:end;gap:clamp(24px,4vw,64px)}
  .ck-dept__head--stack{grid-template-columns:none;gap:10px;max-width:60ch}
  .ck-groups--3{grid-template-columns:1.05fr 1fr 1.05fr;gap:clamp(24px,3vw,44px)}
  .ck-groups--2{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
  .ck-groups--3 .cuts,.ck-groups--2 .cuts{grid-template-columns:1fr}
  .ck-groups--pork,.ck-groups--poultry{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:28px clamp(22px,2.6vw,38px)}
  .ck-groups--pork .ck-group:first-child{grid-row:span 1}
  .ck-groups--pork .cuts,.ck-groups--poultry .cuts{grid-template-columns:1fr}
  .ck-groups--pork .ck-group:nth-child(2){grid-row:span 2}
  .ck-groups--poultry .ck-group:first-child{grid-row:span 2}
  .ck-split{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .ck-split--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .ck-lamb{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .ck-house__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(24px,3vw,44px)}
  .ck-house__grid .ck-groups--house{grid-column:2;grid-row:1 / span 2}
  .ck-house__dogs{grid-column:1;grid-row:1}
  .ck-house__more{grid-column:1;grid-row:2}
  .ck-groups--house{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:28px clamp(22px,2.6vw,38px)}
  .ck-groups--house .ck-group:nth-child(2){grid-row:span 2}
  .ck-groups--house .cuts{grid-template-columns:1fr}
  .ck-game__foot{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(30px,5vw,80px)}
  .ck-game .cuts{grid-template-columns:1fr 1fr;column-gap:clamp(22px,2.6vw,38px)}
  .ck-fish{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
  .ck-fish__cols{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
  .ck-end__in{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:end;gap:clamp(30px,5vw,80px)}

  .ck-cooler__in{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);align-items:end;gap:clamp(28px,4vw,64px)}
  .ck-soups__in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(30px,4vw,64px)}
  .ck-labels{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ck-meals__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,3vw,44px)}
  .ck-meals__grid .cuts{grid-template-columns:1fr}
  .ck-g--dinner{grid-column:1/3;grid-row:1/3}
  .ck-g--dinner .cuts{grid-template-columns:1fr 1fr}
  .ck-g--side{grid-column:3;grid-row:1}
  .ck-g--cold{grid-column:3;grid-row:2}
  .ck-g--more{grid-column:1;grid-row:3}
  .ck-meals__beans{grid-column:2;grid-row:3;align-self:start}
  .ck-g--sauce{grid-column:3;grid-row:3}
  .ck-fine__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}

  .ck-royal__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px)}
  .ck-new__head{grid-template-columns:auto 1fr;align-items:end;gap:clamp(24px,4vw,60px)}
}
@media (min-width:700px) and (max-width:959px){
  .ck-house__more{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:960px){
  .pk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px clamp(24px,2.6vw,38px)}
  .ck-royal__in{grid-template-columns:minmax(0,474px) minmax(0,1fr)}
}
@media (max-width:319px){
  .cuts{grid-template-columns:minmax(0,1fr)}
  .ck-wall{font-size:48px}
}