/* ==========================================================================
   ABOUT PAGE — an editorial profile

   The old page was ~150 words of prose in the generic page template: no
   imagery, no structure, and a text column that stopped two-thirds of the way
   across a 1320px container, leaving the right half of the screen empty.

   This gives it a masthead that splits type against one tall photograph, a
   hairline fact rule, numbered sections, a single dark panel, and the menu's
   real section list read from the same data the menu page renders.

   Deliberately not the menu page's centred dark hero: same type system,
   different composition, so the two read as siblings rather than one template.
   Hairlines and white space only. One shadow, under the dark panel.
   ========================================================================== */

.ck-aboutpage {
  --ck-hair: rgba(36, 32, 29, .085);
  --ck-hair-mid: rgba(36, 32, 29, .16);
}

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

/* --------------------------------------------------------------------------
   Cascade corrections — same trap as the menu page.
   `.ck-page h1,h2,h3,h4` in ck-site.css is (0,1,1) and outranks a lone class,
   forcing weight 600 over the lighter display weight this page sets.
   Scoped to .ck-aboutpage so nothing else on the site moves.
   -------------------------------------------------------------------------- */
.ck-aboutpage .ck-amast__title,
.ck-aboutpage .ck-asection__title,
.ck-aboutpage .ck-aend__title { font-weight: 500; }
.ck-aboutpage ul { margin: 0; padding: 0; list-style: none; }

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

.ck-amast { padding-block: clamp(48px, 6.5vw, 104px) 0; }
.ck-amast__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.ck-amast__title {
  font-family: var(--ck-serif);
  font-size: clamp(42px, 6vw, 86px);
  line-height: .98; letter-spacing: -.025em;
  color: var(--ck-charcoal);
  margin-top: 20px;
  text-wrap: balance;
}
.ck-amast__lede {
  margin-top: 26px; max-width: 40ch;
  font-family: var(--ck-serif);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.55; font-style: italic;
  color: var(--ck-text-muted);
  text-wrap: pretty;
}
.ck-amast__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.ck-amast__media {
  margin: 0; border-radius: var(--ck-radius); overflow: hidden;
  aspect-ratio: 1200 / 1560;
}
.ck-amast__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Fact rule — figures on a hairline, not in boxes
   ========================================================================== */

.ck-afacts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 88px);
  padding-block: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--ck-hair-mid);
  border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-afacts li {
  display: flex; flex-direction: column; gap: 6px;
  padding-inline: clamp(14px, 2vw, 28px); position: relative;
}
.ck-afacts li:first-child { padding-left: 0; }
.ck-afacts li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 34px; margin-top: -17px;
  background: var(--ck-hair-mid);
}
.ck-afacts__n {
  font-family: var(--ck-serif);
  font-size: clamp(28px, 3vw, 42px); line-height: 1;
  font-weight: 500; color: var(--ck-charcoal);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ck-afacts__l {
  font-family: var(--ck-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ck-text-muted);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.ck-aboutpage__body { padding-block: clamp(56px, 7vw, 104px); }

.ck-asection { margin-bottom: clamp(64px, 8vw, 120px); }
.ck-asection__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; gap: clamp(14px, 2vw, 26px);
  padding-bottom: 20px; margin-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-asection__num {
  font-family: var(--ck-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--ck-gold-muted);
  font-variant-numeric: tabular-nums;
}
.ck-asection__title {
  font-family: var(--ck-serif);
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02;
  letter-spacing: -.022em; color: var(--ck-charcoal);
  text-wrap: balance;
}

/* Two paragraphs set side by side rather than one narrow column stranded in
   the left half of a 1320px container - which is what made the old page look
   unfinished. Each column keeps a readable measure of its own. */
.ck-aprose {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.ck-aprose p { font-size: 17px; line-height: 1.78; color: var(--ck-text); max-width: 46ch; }
.ck-aprose strong { color: var(--ck-charcoal); font-weight: 600; }

/* a section with a single paragraph pairs it with its call to action instead */
.ck-aprose--solo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
.ck-aprose--solo .ck-alink { margin-top: 0; }

/* ==========================================================================
   Wide plate
   ========================================================================== */

.ck-aplate { margin: clamp(40px, 5vw, 68px) 0 0; }
.ck-aplate img {
  width: 100%; height: clamp(200px, 24vw, 360px); object-fit: cover;
  border-radius: var(--ck-radius);
}
.ck-aplate figcaption {
  margin-top: 14px;
  font-family: var(--ck-serif); font-size: 15.5px; font-style: italic;
  color: var(--ck-text-muted);
}

/* ==========================================================================
   The menu's real section list
   ========================================================================== */

.ck-asections { margin-top: clamp(44px, 5vw, 72px); }
.ck-asections__label {
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ck-text-muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-asections__list {
  columns: 15rem; column-gap: clamp(28px, 4vw, 56px);
  column-rule: 1px solid var(--ck-hair);
}
.ck-asections__list li { break-inside: avoid; }
.ck-asections__list a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--ck-hair);
  color: var(--ck-text);
  transition: color .18s var(--ck-ease);
}
.ck-asections__name {
  font-family: var(--ck-serif); font-size: 18px; line-height: 1.3;
  flex: 1 1 auto;
}
.ck-asections__count {
  font-family: var(--ck-sans); font-size: 11px; color: #9A9088;
  font-variant-numeric: tabular-nums;
}
.ck-asections__list a:hover { color: var(--ck-red); }

/* ==========================================================================
   The one dark panel
   ========================================================================== */

.ck-apanel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch;
  background: var(--ck-charcoal); color: var(--ck-warm-white);
  border-radius: var(--ck-radius); overflow: hidden;
  box-shadow: var(--ck-shadow-md);
  margin-bottom: clamp(64px, 8vw, 120px);
}
.ck-apanel__media img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.ck-apanel__copy {
  display: grid; align-content: center; justify-items: start; gap: 18px;
  padding: clamp(32px, 4vw, 60px);
}
.ck-apanel__text {
  font-family: var(--ck-serif); font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.45; font-style: italic; color: rgba(255, 253, 249, .88);
  text-wrap: pretty;
}

/* ==========================================================================
   Find us
   ========================================================================== */

.ck-afind {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.ck-afind__label {
  font-family: var(--ck-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ck-text-muted);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--ck-hair-mid);
}
.ck-afind__addr {
  font-family: var(--ck-serif); font-size: 20px; line-height: 1.55;
  color: var(--ck-charcoal); margin-bottom: 16px;
}
.ck-afind__addr a { color: var(--ck-charcoal); }
.ck-afind__addr a:hover { color: var(--ck-red); }

.ck-ahours { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.ck-ahours th, .ck-ahours td {
  text-align: left; padding: 9px 0; vertical-align: baseline;
  border-bottom: 1px solid var(--ck-hair);
  font-weight: 400;
}
.ck-ahours th {
  font-family: var(--ck-serif); font-size: 17px; color: var(--ck-charcoal);
}
.ck-ahours td {
  font-family: var(--ck-sans); font-size: 13.5px; color: var(--ck-text-muted);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ck-ahours tr.is-closed td { color: var(--ck-red); }
.ck-ahours tr:last-child th, .ck-ahours tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Quiet links
   ========================================================================== */

.ck-alink {
  display: inline-block;
  font-family: var(--ck-sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--ck-red);
  border-bottom: 1px solid rgba(181, 31, 36, .32); padding-bottom: 2px;
  transition: border-color .18s var(--ck-ease);
}
.ck-alink::after { content: "\2009\2192"; }
.ck-alink:hover { color: var(--ck-red-dark); border-color: currentColor; }
.ck-alink--light {
  color: var(--ck-gold); border-bottom-color: rgba(201, 151, 69, .4);
  font-size: 15px;
}
.ck-alink--light:hover { color: var(--ck-gold); border-color: currentColor; }
.ck-alink--lg { font-size: 15px; margin-top: 26px; }

/* ==========================================================================
   Close
   ========================================================================== */

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

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

@media (max-width: 1000px) {
  .ck-amast__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .ck-afind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ck-amast__inner { grid-template-columns: minmax(0, 1fr); }
  /* the tall crop is wrong once it spans the full width */
  .ck-amast__media { aspect-ratio: 16 / 10; order: -1; }
  .ck-apanel { grid-template-columns: minmax(0, 1fr); }
  .ck-apanel__media img { min-height: 220px; }
}

@media (max-width: 760px) {
  /* two columns of body text stop being readable well before the layout
     stops fitting: at 390px they were about fourteen characters wide */
  .ck-aprose, .ck-aprose--solo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ck-aprose p { max-width: none; }
  .ck-aprose--solo { align-items: start; }
}

@media (max-width: 680px) {
  .ck-afacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .ck-afacts li:nth-child(3) { padding-left: 0; }
  .ck-afacts li:nth-child(3)::before { display: none; }
  .ck-afind { grid-template-columns: minmax(0, 1fr); }
  .ck-asections__list { columns: auto; column-rule: 0; }
  .ck-aend__actions .ck-btn { flex: 1 1 100%; }
  .ck-amast__actions .ck-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-alink, .ck-asections__list a { transition: none; }
}