@layer page {
  .c-list [hidden], [data-c-chips][hidden] { display: none; }
  .ck-cover { --side: max(var(--margin), (100vw - var(--wrap)) / 2);
    --col: calc((min(var(--wrap), 100vw - 2 * var(--margin)) - 11 * var(--gutter)) / 12); container: ck / inline-size; overflow-x: clip; }
  .ck-cover__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
    padding-block: var(--s-9) var(--s-7); }
  .ck-toc { grid-column: 1 / span 2; grid-row: 1; align-self: end; display: grid; gap: var(--s-4); margin-bottom: var(--s-7); position: relative; z-index: 3; }
  .ck-toc__label { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--tr-caps, .14em); text-transform: uppercase; color: var(--ink-muted); }
  .ck-toc__chips { display: grid; gap: var(--s-2); }
  .ck-toc .km-chip { justify-content: space-between; gap: var(--s-3); padding-inline: var(--s-4); }
  .ck-toc .km-num { min-inline-size: 2ch; text-align: end; }
  .ck-cover__stack { grid-column: 3 / -1; grid-row: 1; display: grid; margin-inline-end: calc(-1 * var(--side)); }
  .ck-cover__art { grid-area: 1 / 1; position: relative; display: block; color: inherit; text-decoration: none; pointer-events: none;
    -webkit-tap-highlight-color: transparent; }
  .ck-cover__art > * { pointer-events: auto; }
  .ck-cover__win { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--photo-wait-doc);
    margin-inline-start: calc(3 * (var(--col) + var(--gutter))); }
  .ck-cover__win::after { content: ""; position: absolute; inset: 0; box-shadow: var(--img-edge); pointer-events: none; }
  .ck-cover__win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: scale var(--t-zoom) var(--ease-out); }
  .ck-paper { position: absolute; inset-inline-start: 0; bottom: var(--s-7); z-index: 2; container-type: inline-size;
    width: calc(3 * var(--col) + 3 * var(--gutter) + var(--overlap)); box-sizing: border-box;
    display: grid; grid-template-rows: auto auto auto auto 1fr; justify-items: start; gap: var(--s-3); padding: var(--s-7) var(--s-6) var(--s-6);
    background: var(--paper); color: var(--ink); transition: scale var(--t-press) var(--ease-out); }
  .ck-paper__title { margin: 0 0 var(--s-1); font-size: min(var(--fs-h2), 13.5cqi); }
  .ck-paper__topic, .ck-paper__date { font-size: var(--fs-small); color: var(--ink-muted); }
  .ck-paper__lead { font-size: var(--fs-body); line-height: var(--lh-text); max-inline-size: var(--measure-s); }
  .ck-paper__go { align-self: end; display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--fs-small);
    font-weight: var(--fw-bold); color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: var(--ul-thick);
    text-underline-offset: var(--ul-off); text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
  .ck-cover__art:active .ck-paper { scale: var(--press-card); transition-duration: var(--t-press-in); }
  .ck-cover__art:focus-visible { outline: none; }
  .ck-cover__art:focus-visible .ck-paper { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-off); }
  @media (hover: hover) and (pointer: fine) {
    .ck-cover__art:hover .ck-cover__win img { scale: var(--zoom-l); }
    .ck-cover__art:hover .ck-paper__go { text-decoration-color: currentColor; }
    .ck-cover__art:hover .ck-paper__go .km-arrow { transform: translateX(var(--nudge)); }
  }
  @container ck (max-width: 1340px) {
    .ck-cover__grid { padding-block-end: calc(var(--s-7) + var(--overlap)); }
    .ck-toc { grid-column: 1 / span 3; margin-bottom: calc(-1 * var(--overlap)); }
    .ck-cover__stack { grid-column: 4 / -1; }
    .ck-cover__win { margin-inline-start: calc(2 * (var(--col) + var(--gutter))); }
    .ck-paper { bottom: calc(-1 * var(--overlap)); padding: var(--s-6) var(--s-5) var(--s-5); }
  }
  @container ck (min-width: 1600px) { .ck-toc, .ck-cover__stack { align-self: start; } .ck-toc { margin-bottom: 0; } }
  @media (prefers-reduced-motion: no-preference) {
    html.km-motion .ck-cover.is-wait .ck-cover__art:not([hidden]) .ck-paper { opacity: 0; }
    html.km-motion .ck-cover.is-wait .ck-cover__art:not([hidden]) .ck-cover__win { clip-path: inset(0 0 0 100%); }
    html.km-motion .ck-cover.is-in .ck-cover__art:not([hidden]) .ck-paper { animation: ck-lay var(--t-reveal) var(--ease-out) 140ms both; }
    html.km-motion .ck-cover.is-in .ck-cover__art:not([hidden]) .ck-cover__win { animation: ck-open var(--t-photo) var(--ease-in-out) both; }
    html.km-motion .ck-cover__art.is-old { z-index: 0; }
    html.km-motion .ck-cover__art.is-old .ck-paper { animation: ck-lift 160ms var(--ease-out) both; }
    html.km-motion .ck-cover__art.is-old .ck-cover__win img { animation: ck-push 560ms var(--ease-in-out) both; }
    html.km-motion .ck-cover__art.is-swap { z-index: 1; }
    html.km-motion .ck-cover__art.is-swap .ck-cover__win { animation: ck-open 560ms var(--ease-in-out) both; }
    html.km-motion .ck-cover__art.is-swap .ck-cover__win img { animation: ck-settle 800ms var(--ease-settle) both; }
    html.km-motion .ck-cover__art.is-swap .ck-paper { animation: ck-lay 420ms var(--ease-out) 260ms both; }
    .ck-arch__grid { animation: var(--ca, none) 220ms var(--ease-out) both; }
  }
  @keyframes ck-open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
  @keyframes ck-settle { from { scale: 1.06; } to { scale: 1; } }
  @keyframes ck-push { to { translate: -6% 0; } }
  @keyframes ck-lay { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }
  @keyframes ck-lift { to { opacity: 0; translate: 0 12px; } }
  @keyframes ckSwapA { from { opacity: 0; scale: .97; } }
  @keyframes ckSwapB { from { opacity: 0; scale: .97; } }
  .ck-arch__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-7); }
  .ck-arch__filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin: 0; }
  .ck-arch__topic { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--ink-muted); }
  .ck-arch__all { font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); }

  @media (max-width: 1080px) {
    .ck-cover__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); align-items: start; padding-block: var(--s-7) var(--s-8); }
    .ck-toc, .ck-cover__stack { grid-column: 1; grid-row: auto; }
    .ck-cover__stack { order: 3; margin-inline: calc(-1 * var(--side)); }
    .ck-cover__win { margin-inline-start: 0; }
    .ck-paper { position: relative; inset: auto; width: auto; max-width: 36rem; margin: calc(-1 * var(--overlap)) var(--side) 0;
      padding: var(--s-6) var(--s-5) var(--s-5); }
    .ck-toc { order: 4; margin-bottom: 0; }
    .ck-toc__chips { display: flex; flex-wrap: wrap; }
    .ck-toc .km-chip { justify-content: center; }
    .ck-arch__head { margin-bottom: var(--s-6); }
  }
  @media (max-width: 600px) {
    .ck-cover__win { width: 76%; margin-inline-start: auto; aspect-ratio: 4 / 5; }
    .ck-paper { margin-inline: var(--side); max-width: none; }
  }
  @media (forced-colors: active) { .ck-paper { border: 1px solid CanvasText; } }
  @media print { .ck-paper { opacity: 1 !important; animation: none !important; } .ck-cover__win { clip-path: none !important; } }
}