/* ==========================================================================
   MENU PAGE — a bill of fare
   Full-bleed masthead, a find-a-dish bar, a sticky index, four courses, and
   dishes set in flowing columns of a tight measure.

   The governing constraint: 16 of 229 dishes carry a description. Set full
   width, a row leaves a chasm between "Egg Roll" and "$1.80". Columns close it.

   No cards, no dotted leaders, no boxes. Hairlines and white space only.
   One shadow on the page, under the single dark panel. Loaded only here.
   ========================================================================== */

.ck-menupage {
  --ck-hair: rgba(36, 32, 29, .085);
  --ck-hair-mid: rgba(36, 32, 29, .16);
  --ck-ink-rule: rgba(36, 32, 29, .82);
  --ck-col: 21.5rem;   /* measure for a name + one price */
  --ck-col-wide: 26rem; /* measure for two prices or a description */
}

/* the menu page brings its own masthead, so the generic page header is hidden */
body.ck-has-menu .ck-pagehead { display: none; }

/* --------------------------------------------------------------------------
   Cascade corrections.

   ck-site.css sets `.ck-page h1,h2,h3,h4 { color: charcoal }` at specificity
   (0,1,1), which outranks a lone class. The masthead title therefore rendered
   charcoal on a near-black photograph - invisible. Same story for the weights:
   that rule forces 600 over the lighter display weight this page sets.

   And `.ck-page ul` clears list markers but `ol` was never covered, so the
   section index drew browser numerals next to its own.

   These are scoped to .ck-menupage so nothing else on the site shifts.
   -------------------------------------------------------------------------- */

.ck-menupage .ck-mast__title { color: var(--ck-warm-white); font-weight: 500; }
.ck-menupage .ck-course__title,
.ck-menupage .ck-chapter__title,
.ck-menupage .ck-menuend__title { font-weight: 500; }
.ck-menupage ol { margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.ck-mast {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--ck-warm-white);
  padding-block: clamp(92px, 12vw, 164px);
  text-align: center;
}
.ck-mast__media { position: absolute; inset: 0; z-index: -2; }
.ck-mast__media img { width: 100%; height: 100%; object-fit: cover; }
.ck-mast__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 92% at 50% 38%, rgba(15, 14, 13, .70) 0%, rgba(15, 14, 13, .94) 74%),
    linear-gradient(180deg, rgba(15, 14, 13, .52), rgba(15, 14, 13, .96));
}
.ck-mast__inner { max-width: 800px; }
.ck-mast__kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ck-gold);
}
.ck-mast__title {
  font-family: var(--ck-serif);
  font-size: clamp(56px, 9vw, 118px);
  line-height: .9; font-weight: 500; letter-spacing: -.02em;
  color: var(--ck-warm-white); margin-top: 22px;
}
.ck-mast__rule {
  display: block; width: 64px; height: 1px; margin: 32px auto;
  background: linear-gradient(90deg, transparent, var(--ck-gold), transparent);
}
.ck-mast__standfirst {
  font-family: var(--ck-serif); font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55; font-style: italic;
  color: rgba(255, 253, 249, .82); max-width: 33em; margin-inline: auto;
}
.ck-mast__facts {
  display: flex; justify-content: center; flex-wrap: wrap;
  margin-top: 44px; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 253, 249, .56);
}
.ck-mast__facts li { padding: 0 24px; position: relative; }
.ck-mast__facts li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 12px; margin-top: -6px;
  background: rgba(201, 151, 69, .55);
}

/* ==========================================================================
   Find a dish — 229 items need a way in that is not scrolling
   ========================================================================== */

.ck-find {
  position: sticky; top: var(--ck-header-h); z-index: 30;
  background: var(--ck-warm-white);
  border-bottom: 1px solid var(--ck-hair);
}
.ck-find__inner {
  display: flex; align-items: center; gap: 18px;
  padding-block: 15px; flex-wrap: wrap;
}
.ck-find__label {
  font-family: var(--ck-sans);
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ck-text-muted);
  flex: 0 0 auto;
}
.ck-find__field {
  position: relative; display: flex; align-items: center;
  flex: 1 1 300px; max-width: 460px;
  border-bottom: 1px solid var(--ck-hair-mid);
  transition: border-color .2s var(--ck-ease);
}
.ck-find__field:focus-within { border-color: var(--ck-gold); }
.ck-find__input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ck-serif); font-size: 20px; line-height: 1.3;
  color: var(--ck-charcoal); background: none;
  border: 0; outline: 0; padding: 6px 0;
  -webkit-appearance: none; appearance: none;
}
.ck-find__input::placeholder { color: #A79C90; font-style: italic; }
.ck-find__input::-webkit-search-cancel-button { display: none; }
.ck-find__clear {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ck-text-muted); padding: 8px 0 8px 14px;
}
.ck-find__clear:hover { color: var(--ck-red); }
.ck-find__count {
  font-size: 12.5px; letter-spacing: .04em; color: var(--ck-text-muted);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}

.ck-linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--ck-red); text-decoration: underline; text-underline-offset: 3px;
}
.ck-linkbtn:hover { color: var(--ck-red-dark); }

.ck-noresults {
  font-family: var(--ck-serif); font-size: 21px; font-style: italic;
  line-height: 1.6; color: var(--ck-text-muted);
  max-width: 44ch; padding-block: clamp(40px, 6vw, 80px);
}
.ck-noresults em { color: var(--ck-charcoal); font-style: italic; }

/* ==========================================================================
   Body grid
   ========================================================================== */

.ck-menupage__body {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(48px, 6vw, 92px); align-items: start;
  padding-block: clamp(56px, 7vw, 96px);
}
/* Grid items default to min-width:auto. The index rail is a nowrap row of 22
   chips, so without this it sets the track's floor and pushes the whole page
   wider than the viewport - which cropped the prices clean off on a phone. */
.ck-index, .ck-chapters { min-width: 0; }

/* ==========================================================================
   Sticky index, grouped by course
   ========================================================================== */

.ck-index { position: sticky; top: calc(var(--ck-header-h) + 78px); }
.ck-index__label {
  font-size: 10px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ck-text-muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-index__scroll {
  max-height: calc(100vh - var(--ck-header-h) - 240px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--ck-border) transparent;
}
.ck-index__course {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 22px; margin-bottom: 4px;
  font-family: var(--ck-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ck-charcoal);
}
.ck-index__course:first-child { margin-top: 14px; }
.ck-index__roman {
  font-family: var(--ck-serif); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--ck-gold);
}
.ck-index__list a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: baseline; gap: 9px;
  padding: 7px 0; min-height: 34px;
  font-size: 14px; color: var(--ck-text-muted);
  transition: color .18s var(--ck-ease);
}
.ck-index__num {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: var(--ck-gold-muted); font-variant-numeric: tabular-nums;
}
.ck-index__name { font-family: var(--ck-serif); font-size: 16.5px; line-height: 1.25; }
.ck-index__count { font-size: 10.5px; color: #9A9088; font-variant-numeric: tabular-nums; }
.ck-index__list a:hover { color: var(--ck-red); }
.ck-index__list a:hover .ck-index__num { color: var(--ck-red); }
.ck-index__list a.is-current .ck-index__name { color: var(--ck-charcoal); font-weight: 600; }
.ck-index__list a.is-current .ck-index__num { color: var(--ck-red); }
.ck-index__cta {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--ck-hair-mid);
  display: grid; gap: 12px; justify-items: start;
}
.ck-index__phone {
  font-size: 13px; letter-spacing: .03em; color: var(--ck-text-muted);
  border-bottom: 1px solid var(--ck-hair-mid); padding-bottom: 2px;
}
.ck-index__phone:hover { color: var(--ck-red); border-color: currentColor; }

/* ==========================================================================
   Provenance — a quiet note, not a warning box
   ========================================================================== */

.ck-provenance {
  font-size: 13.5px; line-height: 1.75; font-style: italic;
  color: var(--ck-text-muted); max-width: 62ch;
  padding-left: 20px; border-left: 1px solid var(--ck-gold);
}
.ck-provenance a { color: var(--ck-red); text-decoration: underline; text-underline-offset: 2px; }
.ck-provenance--plain { border-left: 0; padding-left: 0; font-style: normal; }

/* ==========================================================================
   Courses — the page's top tier of hierarchy
   ========================================================================== */

.ck-course__plate {
  margin: 0; overflow: hidden; border-radius: var(--ck-radius);
  height: clamp(190px, 24vw, 330px);
}
.ck-course__plate img { width: 100%; height: 100%; object-fit: cover; }

.ck-course__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; column-gap: clamp(16px, 2.4vw, 30px);
  padding-top: clamp(26px, 3.2vw, 42px);
  padding-bottom: clamp(30px, 3.6vw, 48px);
}
.ck-course__roman {
  grid-row: 1 / span 2;
  font-family: var(--ck-serif); font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 500; line-height: 1; color: var(--ck-gold);
  letter-spacing: .02em;
}
.ck-course__title {
  font-family: var(--ck-serif);
  font-size: clamp(38px, 5vw, 68px); line-height: .98;
  font-weight: 500; letter-spacing: -.025em;
  text-wrap: balance;
}
.ck-course__blurb {
  grid-column: 2;
  margin-top: 12px; max-width: 54ch;
  font-family: var(--ck-serif); font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6; font-style: italic; color: var(--ck-text-muted);
  text-wrap: pretty;
}

/* first course sits closer to the provenance note than the rest */
.ck-course { margin-top: clamp(64px, 8vw, 124px); }
.ck-course:first-of-type { margin-top: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   Chapters — the section tier
   ========================================================================== */

.ck-chapter {
  margin-bottom: clamp(48px, 5.5vw, 78px);
  scroll-margin-top: calc(var(--ck-header-h) + 90px);
}
.ck-chapter__head {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: baseline; gap: 14px;
  margin-bottom: 4px;
}
.ck-chapter__num {
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--ck-gold-muted);
  font-variant-numeric: tabular-nums;
}
.ck-chapter__title {
  font-family: var(--ck-serif);
  font-size: clamp(25px, 2.5vw, 34px); line-height: 1.05;
  font-weight: 500; letter-spacing: -.015em;
}
.ck-chapter__rule { height: 1px; background: var(--ck-hair-mid); align-self: center; }
.ck-chapter__count {
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; color: #9A9088;
  font-variant-numeric: tabular-nums;
}

.ck-chapter__note {
  font-size: 12.5px; font-style: italic; line-height: 1.6;
  color: var(--ck-text-muted); margin-top: 8px; max-width: 60ch;
}

/* one contextual link from a section to its in-depth guide */
.ck-chapter__guide { margin-top: 6px; font-size: 13.5px; }
.ck-chapter__guide a {
  color: var(--ck-red);
  border-bottom: 1px solid rgba(181, 31, 36, .32);
  padding-bottom: 1px;
  transition: border-color .18s var(--ck-ease);
}
.ck-chapter__guide a::after { content: "\2009\2192"; }
.ck-chapter__guide a:hover { color: var(--ck-red-dark); border-color: currentColor; }

/* ==========================================================================
   Dishes — set in flowing columns, printed-menu style
   ========================================================================== */

.ck-dishes {
  margin-top: 18px;
  columns: var(--ck-col);
  column-gap: clamp(34px, 4.4vw, 68px);
  column-rule: 1px solid var(--ck-hair);
}
.ck-dishes--wide { columns: var(--ck-col-wide); }

.ck-dish {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 0 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ck-hair);
}
/* a section where nothing carries a code loses the column, not just its text */
.ck-dishes--nocode .ck-dish { grid-template-columns: minmax(0, 1fr) auto; }
.ck-dishes--nocode .ck-dish__code { display: none; }

.ck-dish__code {
  font-family: var(--ck-sans);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  color: var(--ck-gold-muted); font-variant-numeric: tabular-nums;
}
.ck-dish__name {
  font-family: var(--ck-serif); font-size: 19px; line-height: 1.3;
  font-weight: 600; color: var(--ck-charcoal);
}
.ck-dish__desc {
  display: block; font-family: var(--ck-sans);
  font-size: 12.5px; line-height: 1.55; color: var(--ck-text-muted);
  margin-top: 4px; max-width: 40ch;
}
.ck-hot {
  display: inline-block; margin-left: 8px;
  font-family: var(--ck-sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ck-red); vertical-align: 2px; white-space: nowrap;
}
.ck-dish__prices { display: flex; gap: 14px; align-items: baseline; }
.ck-price {
  font-family: var(--ck-sans); font-size: 14.5px; font-weight: 600;
  color: var(--ck-charcoal); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ck-dish__prices--pair .ck-price {
  display: inline-flex; align-items: baseline; gap: 5px;
}
.ck-price__tag {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ck-gold-muted);
}

/* ==========================================================================
   Plates — a photograph set between sections
   ========================================================================== */

.ck-plate { margin: clamp(40px, 5vw, 68px) 0; }
.ck-plate__media {
  height: clamp(180px, 20vw, 290px); overflow: hidden;
  border-radius: var(--ck-radius);
}
.ck-plate__media img { width: 100%; height: 100%; object-fit: cover; }
.ck-plate__caption {
  margin-top: 14px;
  font-family: var(--ck-serif); font-size: 15.5px; font-style: italic;
  color: var(--ck-text-muted);
}

/* ==========================================================================
   The Chef's Specials panel — the one place the page raises its voice
   ========================================================================== */

.ck-feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch;
  background: var(--ck-charcoal); color: var(--ck-warm-white);
  margin: clamp(40px, 5vw, 68px) 0;
  border-radius: var(--ck-radius); overflow: hidden;
  box-shadow: var(--ck-shadow-md);
}
.ck-feature__media img { width: 100%; height: 100%; object-fit: cover; min-height: 250px; }
.ck-feature__copy {
  display: grid; align-content: center; gap: 16px;
  padding: clamp(30px, 3.6vw, 54px);
}
.ck-feature__text {
  font-family: var(--ck-serif); font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45; font-style: italic; color: rgba(255, 253, 249, .86);
}

/* ==========================================================================
   Closing
   ========================================================================== */

.ck-menuend {
  text-align: center; margin-top: clamp(64px, 8vw, 112px);
  padding-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--ck-hair-mid);
}
.ck-menuend .ck-eyebrow { justify-content: center; }
.ck-menuend__title {
  font-family: var(--ck-serif); font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08; margin-bottom: 30px;
}
.ck-menuend__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; }

/* ==========================================================================
   Filtering state
   ========================================================================== */

.ck-dish[hidden], .ck-chapter[hidden], .ck-course[hidden],
.ck-plate[hidden], .ck-feature[hidden] { display: none !important; }

/* while filtering, the page is a result list: drop the editorial furniture */
.ck-menupage.is-filtering .ck-course__plate,
.ck-menupage.is-filtering .ck-course__blurb,
.ck-menupage.is-filtering .ck-chapter__guide,
.ck-menupage.is-filtering .ck-provenance { display: none; }
.ck-menupage.is-filtering .ck-course__head { padding-top: 0; padding-bottom: 22px; }
.ck-menupage.is-filtering .ck-course { margin-top: clamp(34px, 4vw, 56px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .ck-menupage { --ck-col: 19rem; --ck-col-wide: 23rem; }
}

@media (max-width: 1080px) {
  .ck-menupage__body { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* the index becomes a rail of chips pinned under the find bar */
  .ck-index {
    position: sticky; top: calc(var(--ck-header-h) + 61px); z-index: 20;
    background: var(--ck-warm-white);
    margin-inline: calc(var(--ck-gutter) * -1);
    padding: 9px var(--ck-gutter);
    border-bottom: 1px solid var(--ck-hair);
    margin-bottom: 34px;
  }
  .ck-index__label, .ck-index__count, .ck-index__cta, .ck-index__course { display: none; }

  /* The index is grouped into four lists. Left alone that becomes four
     separate scroll rails stacked up the screen, so the lists collapse into
     their parent and the whole index reads as one continuous rail. */
  .ck-index__scroll {
    max-height: none;
    display: flex; gap: 6px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ck-index__scroll::-webkit-scrollbar { display: none; }
  .ck-index__list { display: contents; }
  .ck-index__list a {
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap; padding: 7px 14px; min-height: 40px;
    border: 1px solid var(--ck-hair-mid); border-radius: 100px;
  }
  .ck-index__list a.is-current {
    background: var(--ck-charcoal); border-color: var(--ck-charcoal);
    color: var(--ck-warm-white);
  }
  .ck-index__list a.is-current .ck-index__num { color: var(--ck-gold); }
  .ck-index__name { font-size: 15px; }

  .ck-chapter { scroll-margin-top: calc(var(--ck-header-h) + 130px); }

  /* plates run to the edge on narrow screens */
  .ck-course__plate, .ck-plate__media {
    margin-inline: calc(var(--ck-gutter) * -1); border-radius: 0;
  }
  .ck-plate__caption { text-align: center; }
}

@media (max-width: 860px) {
  .ck-menupage { --ck-col: 17.5rem; --ck-col-wide: 20rem; }
  .ck-feature { grid-template-columns: 1fr; }
  .ck-feature__media img { min-height: 210px; }
  .ck-course__head { grid-template-columns: 1fr; }
  .ck-course__roman { grid-row: auto; display: block; margin-bottom: 8px; font-size: 24px; }
  .ck-course__blurb { grid-column: 1; }
}

@media (max-width: 700px) {
  /* one column: two 17rem columns will not fit, and squeezing them
     wraps every dish name onto three lines */
  .ck-dishes, .ck-dishes--wide { columns: auto; column-rule: 0; }
  .ck-find__inner { gap: 10px 14px; padding-block: 12px; }
  .ck-find__label { flex-basis: 100%; }
  .ck-find__count { flex-basis: 100%; }
  .ck-mast__facts li { padding: 0 14px; }
  .ck-index { top: calc(var(--ck-header-h) + 96px); }
  .ck-chapter { scroll-margin-top: calc(var(--ck-header-h) + 165px); }
}

@media (max-width: 480px) {
  .ck-dish { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 0 10px; }
  .ck-dish__name { font-size: 18px; }
  .ck-menuend__actions .ck-btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  /* keep long dish names readable: the price drops beneath the name */
  .ck-dish { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ck-dish__prices { grid-column: 2; justify-content: start; margin-top: 4px; }
  .ck-price { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-index__list a, .ck-find__field, .ck-chapter__guide a { transition: none; }
}