/* Checklist directory (/checklists, CZ-6607, CZ-6615). A flat page (see ".page--flat" in site.css): the heading, ONE compact toolbar and a
   three-column grid sit directly on the page background. Everything here is scoped under .cl. Warm-neutral surfaces, navy serif
   headings, brand-blue links and buttons, fine borders, a small radius. No font request: the serif stack is on every device already. */
.cl {
  --cl-navy: #101C3E;
  --cl-ink: #1F2A44;
  --cl-muted: #5A6477;      /* 5.8:1 on white, 5.3:1 on the warm surface */
  --cl-blue: #1553D6;       /* 6.5:1 on white */
  --cl-blue-deep: #0F3FA6;
  --cl-line: #E4DED2;
  --cl-line-strong: #CFC8BA;
  --cl-well: #F3EFE7;       /* the neutral ground behind a cover */
  --cl-white: #FFFFFF;
  --cl-radius: 8px;
  --cl-serif: var(--font-display);
  color: var(--cl-ink);
  padding-top: 34px;
}
.cl a { text-decoration: none; }
.cl a:hover { text-decoration: none; }
.cl-note { margin: 6px 0 4px; padding: 14px 18px; background: var(--cl-white); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); color: var(--cl-ink); }
.cl-note a, .cl-count a { color: var(--cl-blue); text-decoration: underline; text-underline-offset: 2px; }
.cl-note a:hover, .cl-count a:hover { color: var(--cl-blue-deep); }

/* Heading + toolbar: a centered one-line title, its subtitle, and one row of controls ending in the one Apply button. */
.cl-head { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 22px; }
.cl-title, .cl-sub { text-align: center; }
.cl-title { font-family: var(--cl-serif); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.02em; line-height: 1.08; color: var(--cl-navy); }
.cl-sub { margin: 8px auto 0; max-width: 70ch; font-size: 20px; color: var(--cl-muted); }
.cl-tools { display: flex; align-items: center; gap: 12px; margin-top: 26px; min-width: 0; }
.cl-search { position: relative; flex: 1 1 320px; min-width: 0; }
.cl-search__icon { position: absolute; left: 14px; top: 50%; margin-top: -9px; color: var(--cl-muted); pointer-events: none; }
.cl-select { flex: 0 0 220px; min-width: 0; }
.cl-input { width: 100%; height: 48px; font: inherit; font-size: 16px; color: var(--cl-navy); background: var(--cl-white);
  border: 1px solid var(--cl-line-strong); border-radius: 6px; padding: 0 14px; }
.cl-search .cl-input { padding-left: 44px; }
.cl-input::placeholder { color: var(--cl-muted); opacity: 1; }
select.cl-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%231F2A44' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.cl-input:focus-visible, .cl-btn:focus-visible { outline: 3px solid var(--cl-blue); outline-offset: 2px; }
.cl-input:hover { border-color: var(--cl-navy); }
.cl-btn { flex: 0 0 auto; height: 48px; padding: 0 26px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; background: var(--cl-blue);
  border: 1px solid var(--cl-blue); border-radius: 6px; cursor: pointer; }
.cl-btn:hover { background: var(--cl-blue-deep); border-color: var(--cl-blue-deep); }

/* Blocks */
.cl-block { padding-top: 26px; }
.cl-block--list { padding-top: 4px; }

/* Checklists: count, grid */
.cl-count { font-size: 14px; color: var(--cl-muted); margin: 0 0 14px; }

/* Cards are never narrower than about 380 px: three across at 1536 px (as in the reference), four at 1920, five at 2200. */
.cl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
.cl-card { position: relative; display: flex; flex-direction: column; background: var(--cl-white); border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.cl-card:hover { border-color: var(--cl-line-strong); box-shadow: 0 4px 16px rgba(16, 28, 62, .10); }
/* Every cover sits in a well of the same shape. The cover is shown whole: never upscaled (they are ~200 px thumbnails), never
   cropped, only shrunk to fit. The well is the neutral ground, or the list's own stored color when the owner chose one. */
.cl-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; padding: 16px; background: var(--cl-well); overflow: hidden; }
.cl-card__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-card__media:not(.cl-card__media--tinted) img { mix-blend-mode: multiply; }
.cl-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 22px 18px; border-top: 1px solid var(--cl-line); }
/* The cards of a row are the same height (the grid stretches them) and the CTA is pinned to the bottom of the body, so a one-line
   title is not padded out: only a row that holds a longer title grows. */
.cl-card__name { font-family: var(--cl-serif); font-weight: 700; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -0.01em; color: var(--cl-navy); overflow-wrap: anywhere; }
.cl-card__link { color: inherit; }
.cl-card__link::after { content: ""; position: absolute; inset: 0; }              /* the whole card is the one link */
.cl-card__link:focus-visible { outline: none; }
.cl-card__link:focus-visible::after { outline: 3px solid var(--cl-blue); outline-offset: -3px; border-radius: var(--cl-radius); }
.cl-card:hover .cl-card__name { color: var(--cl-blue); }
.cl-card__cta { margin-top: auto; padding-top: 6px; font-size: 17px; font-weight: 500; color: var(--cl-blue); }
.cl-card:hover .cl-card__cta { text-decoration: underline; text-underline-offset: 3px; }

/* Pagination: Previous, the numbers, Next, as boxed controls; the current page is filled. */
.cl-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 8px; margin-top: 32px; }
.cl-pager__pages { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.cl-pager__page, .cl-pager__step { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 500; color: var(--cl-navy); background: var(--cl-white); border: 1px solid var(--cl-line-strong); border-radius: 6px; }
.cl-pager__page { min-width: 44px; }
.cl-pager__step { padding: 0 22px; }
a.cl-pager__page:hover, a.cl-pager__step:hover { border-color: var(--cl-navy); background: var(--cl-well); }
.cl-pager__page--now { color: #fff; background: var(--cl-blue); border-color: var(--cl-blue); }
.cl-pager__gap { color: var(--cl-muted); padding: 0 2px; }
.cl-pager__step--off { color: var(--cl-muted); background: transparent; border-color: var(--cl-line); }
.cl-pager a:focus-visible { outline: 3px solid var(--cl-blue); outline-offset: 2px; border-radius: 6px; }

/* Wide windows gain columns instead of stretching the cards (the page itself is fluid up to --flat-max, see site.css). */
@media (min-width: 1700px) {
  .cl-grid { gap: 24px; }
}

/* Tablet */
@media (max-width: 900px) {
  .cl-tools { flex-wrap: wrap; }
  .cl-search { flex-basis: 100%; }
  .cl-select { flex: 1 1 180px; }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: stacked controls, one card per row */
@media (max-width: 560px) {
  .cl { padding-top: 24px; }
  .cl-sub { font-size: 17px; }
  .cl-tools { flex-direction: column; align-items: stretch; }
  .cl-search, .cl-select { flex: 0 0 auto; }
  .cl-btn { width: 100%; }
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-pager__page { min-width: 44px; }
  .cl-pager__pages { gap: 6px; }
  .cl-pager__step { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .cl-card { transition: none; } }


/* Editorial directory refinement — page-scoped, no routing or SEO changes. */
.cl-head { padding: clamp(24px, 3vw, 48px) clamp(16px, 3vw, 48px) 30px; margin-bottom: 22px; background: linear-gradient(135deg, #f1ede4 0%, #faf7f1 65%, #e9eff8 100%); border: 1px solid var(--cl-line); border-radius: 12px; }
.cl-title { font-size: clamp(38px, 4.5vw, 66px); letter-spacing: -.035em; }
.cl-sub { max-width: 46ch; line-height: 1.5; }
.cl-tools { width: 100%; max-width: 1160px; margin: 30px auto 0; padding: 12px; background: rgba(255,255,255,.85); border: 1px solid var(--cl-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(16,28,62,.05); }
.cl-card { box-shadow: 0 2px 10px rgba(16,28,62,.035); }
.cl-card__media { aspect-ratio: 1.85 / 1; }
.cl-card__body { padding: 18px 22px 20px; }
.cl-card__cta { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.cl-count { font-size: 15px; margin-bottom: 20px; }
@media (max-width: 900px) { .cl-head { padding: 28px 20px; } .cl-tools { max-width: 100%; } }
@media (max-width: 560px) { .cl-head { padding: 28px 16px; margin-bottom: 14px; } .cl-tools { padding: 12px; } .cl-title { font-size: 38px; } .cl-card__media { aspect-ratio: 2 / 1; } .cl-card__body { padding: 16px 18px 18px; } }

/* Cover photos are landscape artwork. Profile images remain small collection icons. */
.cl-card__media--cover { aspect-ratio: 2.6 / 1; padding: 0; }
.cl-card__media.cl-card__media--cover img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.cl-card__media--profile { aspect-ratio: 2.6 / 1; min-height: 104px; padding: 20px; }
.cl-card__media--profile img { max-width: 64px; max-height: 64px; }
.cl-card__cta { font-size: 17px; }
.cl-head { padding: 0 0 24px; margin-bottom: 10px; background: none; border: 0; border-radius: 0; }
.cl-title { font-size: clamp(32px, 3vw, 48px); text-align: left; }
.cl-sub { margin: 8px 0 0; text-align: left; font-size: 18px; }
/* The link into a universe (CZ-6699): under the subtitle on the directory, and under the title of a list that belongs to one. */
.cl-universe, .cl-universe-member { margin: 10px 0 0; font-size: 17px; font-weight: 500; }
.cl-universe a, .cl-universe-member a { color: var(--action); }
.cl-universe a:hover, .cl-universe-member a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .cl-universe a, .cl-universe-member a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; } }
.cl-collection-title .cl-universe-member a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }   /* on the list's own stored colors */
.cl-tools { max-width: none; margin: 24px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 560px) {
  .cl-head { padding: 20px 0; border: 0; border-radius: 0; background: none; }
  .cl-tools { margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .cl-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cl-search, .cl-btn { grid-column: 1 / -1; }
  .cl-title { font-size: clamp(30px, 9vw, 38px); }
}

/* Preserve the tighter mobile controls from the parallel review. */
@media (max-width: 560px) {
  .cl { padding-top: 12px; }
  .cl-head { padding: 20px 14px 16px; margin-bottom: 8px; }
  .cl-title { font-size: clamp(30px, 9vw, 38px); line-height: 1.12; }
  .cl-sub { margin-top: 6px; font-size: 15px; }
  .cl-tools { margin-top: 16px; gap: 8px; padding: 8px; }
  .cl-input, .cl-btn { height: 44px; }
  .cl-grid { gap: 12px; }
}

/* A checklist is a compact identity row, not a photograph tile. */
.cl-card { flex-direction: row; align-items: center; gap: 14px; min-height: 100px; padding: 16px; color: var(--cl-card-ink, #000); background: var(--cl-card-bg, #fff); }
.cl-card__media.cl-card__media--icon { flex: 0 0 64px; width: 64px; height: 64px; min-height: 0; aspect-ratio: auto; padding: 4px; background: transparent; }
.cl-card__media.cl-card__media--icon img { width: auto; height: auto; max-width: 56px; max-height: 56px; mix-blend-mode: normal; }
.cl-card__body { min-width: 0; padding: 0; gap: 6px; border: 0; }
.cl-card__name { font-family: inherit; font-size: 18px; line-height: 1.3; letter-spacing: 0; color: inherit; }
.cl-card__cta { font-size: 13px; font-weight: 500; padding-top: 0; color: inherit; }
/* Count and date: the card's own ink at full strength (never faded), so they keep the contrast the name has. */
.cl-card__meta { margin: 0; font-size: 14px; line-height: 1.35; color: inherit; }
.cl-card__items, .cl-card__updated { white-space: nowrap; }          /* a narrow card wraps between the count and the date, never inside either */
.cl-card__items:not(:last-child)::after { content: "\00B7"; content: "\00B7" / ""; margin: 0 .5em; }
.cl-card:hover .cl-card__name { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cl-card__link:focus-visible::after { outline-color: currentColor; }
@media (max-width: 560px) {
  .cl-head { padding: 12px 0 16px; }
  .cl-tools { padding: 0; }
  .cl-card { min-height: 88px; padding: 12px; gap: 10px; }
  .cl-card__name { font-size: 17px; }
}

.cl-collection-head { overflow: hidden; border-radius: 8px; background: var(--cl-card-bg, #fff); color: var(--cl-card-ink, #000); padding: 0; }
/* The cover is a ~500 px thumbnail: shown whole (contain) in a 500 x 325 box on a neutral well. The box never grows past 500 px, so a thumbnail is
   not scaled up (no blur) and is never cropped; on a phone the box shrinks with the screen. The aspect box reserves the space, so nothing shifts. */
.cl-collection-coverbox { display: flex; justify-content: center; background: var(--cover-fallback, #F1ECE2); }
.cl-collection-cover { display: block; width: 100%; max-width: 500px; height: auto; aspect-ratio: 500 / 325; object-fit: contain; }
.cl-collection-title { display: block; padding: 20px; }
/* CZ-6666: the profile icon and the h1 share ONE row, centered on the title text only (not on the eyebrow, filter context and button stack around it). */
.cl-collection-namerow { display: flex; align-items: center; gap: 16px; min-width: 0; margin: 4px 0; }
.cl-collection-icon { flex: 0 0 48px; max-width: 48px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.cl-collection-title .display, .cl-collection-title .eyebrow { color: inherit; }

/* Collection, subset and item pages share one restrained catalog layout. */
.cl-detail, .cl-item { --cl-detail-line: #d9d9d5; }
.cl-detail .section, .cl-item .section { margin-top: 32px; }
.cl-detail .cl-collection-head { margin-top: 12px; border: 1px solid var(--cl-detail-line); }
.cl-collection-title > div { min-width: 0; }
.cl-collection-title .display { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; overflow-wrap: anywhere; margin: 4px 0; }
.cl-collection-title .lede { color: inherit; font-size: 17px; margin: 8px 0 0; }
.cl-collection-namerow .display { margin: 0; flex: 1 1 auto; min-width: 0; }
.cl-section > h2, .cl-item .section > h2 { font-size: 24px; margin-bottom: 16px; }
.cl-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl-choice { min-height: 56px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--cl-detail-line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 600; }
.cl-choice > span:first-child { overflow-wrap: anywhere; }
.cl-choice:hover { border-color: var(--link); text-decoration: none; background: #f5f7fc; }
.cl-choice:focus-visible, .cl-more:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.cl-more { cursor: pointer; padding: 12px 16px; border: 1px solid var(--cl-detail-line); border-radius: 6px; width: fit-content; min-height: 44px; background: #fff; color: var(--link); font-weight: 600; }
.cl-detail .item-card, .cl-item .item-card { border: 1px solid var(--cl-detail-line); border-radius: 8px; background: #fff; }
.cl-detail .item-card__media, .cl-item .item-card__media { height: 230px; background: #f4f4f1; padding: 16px; }
.cl-detail .item-card__media img, .cl-item .item-card__media img { mix-blend-mode: normal; object-fit: contain; }
.cl-detail .item-card__name, .cl-item .item-card__name { height: auto; display: block; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.cl-detail .item-card__body, .cl-item .item-card__body { padding: 14px; gap: 6px; }
.cl-empty { padding: 24px; background: #fff; border: 1px solid var(--cl-detail-line); border-radius: 8px; }
.cl-back { padding-block: 12px 16px; }
.cl-item .hero { padding: 24px; gap: 32px; background: #fff; border: 1px solid var(--cl-detail-line); border-radius: 8px; align-items: flex-start; }
.cl-item .hero__photo { flex: 1 1 340px; padding: 24px; background: #f4f4f1; border-radius: 6px; min-width: 0; }
.cl-item .hero__photo img { width: auto; height: auto; max-width: 100%; max-height: 440px; border-radius: 0; mix-blend-mode: normal; }
.cl-item .hero__photo > a { display: flex; justify-content: center; max-width: 100%; }
.cl-item .hero__text { flex: 1 1 340px; padding: 8px 0; }
.cl-item .hero__text .display { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.15; overflow-wrap: anywhere; }
.cl-item .hero .pill { border-width: 1px; border-radius: 5px; font-size: 14px; padding: 7px 10px; }
.cl-item .fields { gap: 0 24px; }
.cl-item .field { border: 0; border-bottom: 1px solid var(--cl-detail-line); border-radius: 0; background: none; padding: 14px 0; }
.cl-item .listing { border-width: 1px; border-radius: 8px; background: #fff; }
.cl-item .listing__media { background: #f4f4f1; }
.cl-item .listing__media img { mix-blend-mode: normal; }
@media (max-width: 900px) {
  .cl-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cl-detail .section, .cl-item .section { margin-top: 24px; }
  .cl-collection-title { padding: 16px; }
  .cl-collection-namerow { gap: 12px; }
  .cl-choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cl-detail .item-grid, .cl-item .item-grid { gap: 10px; }
  .cl-detail .item-card__media, .cl-item .item-card__media { height: 170px; padding: 10px; }
  .cl-detail .item-card__body, .cl-item .item-card__body { padding: 10px; }
  .cl-detail .item-card__name, .cl-item .item-card__name { font-size: 15px; }
  .cl-item .hero { padding: 14px; gap: 18px; }
  .cl-item .hero__photo { flex-basis: 100%; padding: 16px; }
  .cl-item .hero__photo img { max-height: 320px; }
  .cl-item .hero__text { flex-basis: 100%; }
  .cl-item .hero .btn-row { flex-direction: column; align-items: stretch; }
  .cl-item .hero .btn { text-align: center; }
}

.cl-jumps { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 16px 0; border-bottom: 1px solid #d9d9d5; font-weight: 600; }
.cl-guide { padding: 8px 0; }
.cl-guide-intro { max-width: 760px; }
.cl-guide-intro h2 { font-size: clamp(26px, 3vw, 36px); margin: 8px 0 16px; }
.cl-guide-intro .lede { font-size: 20px; line-height: 1.7; color: var(--ink); }
.cl-guide-intro .lede p { margin: 0; }
.cl-guide-intro .lede p + p { margin-top: 12px; }
.cl-guide-sections { display: grid; grid-template-columns: minmax(0, 780px); gap: 30px; margin-top: 28px; }
.cl-guide-sections h3 { font-size: 21px; margin: 0 0 10px; }
.cl-guide-sections p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }
.cl-guide-sections p + p { margin-top: 12px; }
.cl-guide-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; font-weight: 600; }
.cl-guide-links a { min-height: 44px; display: inline-flex; align-items: center; }
.cl-jumps { position: sticky; top: 0; z-index: 2; background: #fff; }
.cl-guide h2, .cl-browse { scroll-margin-top: 90px; }
.collector-video { margin: 32px 0 0; padding: 24px; border: 1px solid #d9d9d5; border-radius: 8px; background: #f7f7f3; }
.collector-video h3 { font-size: 26px; line-height: 1.25; margin: 10px 0; }
.collector-video > p { max-width: 68ch; line-height: 1.65; }
.collector-video__watch { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 20px; align-items: center; }
.collector-video__chapters { padding-left: 20px; margin-top: 20px; }
.collector-video__chapters a { display: inline-block; padding-block: 8px; }
.cl-article > .display { font-size: clamp(32px, 4vw, 48px); margin-top: 28px; }
@media (max-width: 700px) {
  .collector-video { padding: 16px; }
  .collector-video__watch { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .collector-video h3 { font-size: 23px; }
}
.cl-guide-sources { font-size: 14px; margin-top: 24px; }
.cl-guide-sources summary { cursor: pointer; padding-block: 10px; }
.cl-browse { scroll-margin-top: 20px; }
@media (max-width: 700px) { .cl-guide-sections { grid-template-columns: 1fr; gap: 24px; } .cl-guide-intro .lede { font-size: 18px; } }

/* Phones: two selects side by side were about 120 px wide each at 320 px and cut their own labels ("All catego...", "Newest a..."). Under 441 px every
   control has the full width, one per row. */
@media (max-width: 440px) {
  .cl-tools { grid-template-columns: minmax(0, 1fr); }
}