/* The Kestlebury checked table, as launched. 23 September 2026.
   Six answers, each a mark that is a shape as well as a colour (the kit's .say).
   The filters are radio buttons read by :has(), so they work with no script. Every class here is prefixed ck-. */

.ck h2 { font-size: clamp(2.3rem, 4.4vw, 5.4rem); }

/* ---------- hero ---------- */
.ck-hero { display: flex; flex-direction: column; }
.ck-hero-copy { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); gap: 20px clamp(32px, 4vw, 72px); align-items: end; padding: clamp(16px, 2vw, 32px) var(--g) 0; }
.ck-dateline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0; padding: 12px 0; border-top: 3px solid var(--river); border-bottom: 1.5px solid var(--river); }
.ck-kick { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ck-town { padding: 3px 12px; border: 2px dashed var(--orange); border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ck-hero h1 { font-size: clamp(2.8rem, 6.4vw, 8.6rem); line-height: .92; letter-spacing: -.02em; max-width: 14ch; }
.ck-hero-side .lead { font-size: clamp(1.125rem, 1.35vw, 1.375rem); margin-bottom: 20px; }
.ck-meta { display: grid; gap: 0; margin: 0; border-top: 1.5px solid var(--olive); }
.ck-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1.5px solid var(--olive); font-size: .9375rem; }
.ck-meta dt { color: var(--olive); font-weight: 500; }
.ck-meta dd { margin: 0; font-weight: 700; }
.ck-plate { margin-top: clamp(-120px, -6vw, -24px); }
.ck-plate img { width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%); mask-image: linear-gradient(to bottom, transparent 0, #000 20%); }

/* ---------- tally ---------- */
.ck-tally { padding: clamp(40px, 5vw, 80px) var(--g) clamp(24px, 3vw, 48px); }
.ck-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 3px solid var(--river); }
.ck-counts li { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 18px 0; }
.ck-counts li + li { padding-left: 18px; border-left: 1.5px solid var(--olive); }
.ck-counts b { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 6.4vw, 7.4rem); line-height: .9; }
.ck-counts .say { white-space: normal; font-size: .9375rem; }
.ck-units { display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); gap: 4px; margin-top: 20px; }
.ck-units i { display: block; height: 20px; border-radius: 50%; box-sizing: border-box; }
.ck-units .u-yes { background: var(--orange); box-shadow: 0 0 0 2px var(--river) inset; }
.ck-units .u-wait { border: 3px solid var(--orange); }
.ck-units .u-kids { border: 3px solid var(--green); }
.ck-units .u-no { background: var(--olive); }
.ck-units .u-private { border: 3px solid var(--olive); }
.ck-units .u-none { border: 2px dashed var(--olive); }
.ck-tally-foot { margin: 14px 0 0; color: var(--olive); font-weight: 500; font-size: .9375rem; }

/* ---------- the table ---------- */
.ck-table-band { padding: clamp(40px, 5vw, 80px) var(--g) clamp(64px, 7vw, 110px); }
.ck-table-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: end; margin-bottom: 28px; }
.ck-table-head .body { margin: 0; }
.ck-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 14px 0 16px; background: var(--paper); border-bottom: 3px solid var(--river); }
.ck-filter { margin: 0; padding: 0; border: 0; min-width: 0; }
.ck-filter legend { padding: 0; margin-bottom: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--olive); }
.ck-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-opts label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--river); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: .9375rem; cursor: pointer; }
.ck-opts label:hover { background: var(--card); }
.ck-opts input:checked + label { background: var(--river); color: var(--card); }
.ck-opts input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

.ck-table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.ck-table thead th { text-align: left; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--olive); padding: 14px 16px 10px 0; border-bottom: 1.5px solid var(--river); }
.ck-table .ck-gh th { padding: 28px 0 10px; border-bottom: 2px solid var(--river); text-align: left; }
.ck-gh .say { font-size: 1rem; }
.ck-gn { margin-left: 14px; font-size: .875rem; font-weight: 500; color: var(--olive); }
.ck-table tr.p th, .ck-table tr.p td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1.5px solid rgba(94, 90, 36, .35); }
.ck-table tr.p th { font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; width: 30%; }
.ck-table tr.p th span { display: block; font-family: var(--text); font-size: .9375rem; color: var(--olive); margin-top: 4px; font-weight: 500; }
.ck-table tr.p:hover { background: rgba(251, 243, 226, .8); }
.g-yes tr.p { background: #FDE6D3; }
.g-yes tr.p:hover { background: #FBDCC4; }
.ck-fix { display: block; margin-top: 6px; padding: 4px 10px; border-left: 3px solid var(--orange); font-size: .875rem; font-weight: 500; color: var(--olive); }
.ck-empty { display: none; }
.ck-empty td { padding: 28px 0; font-weight: 700; }
.ck-table-foot { margin-top: 22px; }

/* the filters: one rule per answer, one per district */
.ck-wrap:has(#fa-yes:checked) .ck-g:not(.g-yes),
.ck-wrap:has(#fa-wait:checked) .ck-g:not(.g-wait),
.ck-wrap:has(#fa-kids:checked) .ck-g:not(.g-kids),
.ck-wrap:has(#fa-no:checked) .ck-g:not(.g-no),
.ck-wrap:has(#fa-private:checked) .ck-g:not(.g-private),
.ck-wrap:has(#fa-none:checked) .ck-g:not(.g-none) { display: none; }
.ck-wrap:has(#fd-kb1:checked) tr.p:not(.d-kb1), .ck-wrap:has(#fd-kb1:checked) .ck-g.no-kb1,
.ck-wrap:has(#fd-kb2:checked) tr.p:not(.d-kb2), .ck-wrap:has(#fd-kb2:checked) .ck-g.no-kb2,
.ck-wrap:has(#fd-kb3:checked) tr.p:not(.d-kb3), .ck-wrap:has(#fd-kb3:checked) .ck-g.no-kb3,
.ck-wrap:has(#fd-kb4:checked) tr.p:not(.d-kb4), .ck-wrap:has(#fd-kb4:checked) .ck-g.no-kb4,
.ck-wrap:has(#fd-kb5:checked) tr.p:not(.d-kb5), .ck-wrap:has(#fd-kb5:checked) .ck-g.no-kb5,
.ck-wrap:has(#fd-kb6:checked) tr.p:not(.d-kb6), .ck-wrap:has(#fd-kb6:checked) .ck-g.no-kb6 { display: none; }
.ck-wrap:not(:has(#fd-all:checked)) .ck-gn { display: none; }
.ck-wrap:has(#fa-yes:checked):has(#fd-kb4:checked) .ck-empty,
.ck-wrap:has(#fa-kids:checked):has(#fd-kb2:checked) .ck-empty,
.ck-wrap:has(#fa-kids:checked):has(#fd-kb4:checked) .ck-empty { display: table-row-group; }

/* ---------- keep asking ---------- */
.ck-keep { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); gap: clamp(24px, 5vw, 80px); align-items: center; background: var(--orange); padding: clamp(56px, 6vw, 100px) var(--g); }
.ck-keep img { width: 100%; max-width: 320px; justify-self: end; }
.ck-keep .kicker { color: var(--river); }
.ck-keep h2 { max-width: 12ch; margin-bottom: 22px; }
.ck-keep .reply { background: var(--card); }
.ck-keep-small { font-weight: 500; max-width: 36em; }
.ck-keep .actions { margin: 26px 0 0; }
.ck-keep .button { background: var(--river); color: var(--card); }
.ck-keep .button:hover { box-shadow: 0 0 0 3px var(--card) inset; }
.ck-keep :focus-visible { outline-color: var(--river); }

/* ---------- method ---------- */
.ck-method { padding: clamp(64px, 7vw, 120px) var(--g); }
.ck-method-head { margin-bottom: clamp(32px, 4vw, 56px); }
.ck-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px); max-width: 1500px; }
.ck-steps li { padding-top: 18px; border-top: 3px solid var(--river); }
.ck-step-i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; border: 2px solid var(--green); background: var(--card); }
.ck-steps h3 { font-size: clamp(1.4rem, 1.9vw, 1.9rem); margin-bottom: 10px; }
.ck-steps p { margin: 0; }
.ck-log { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 4vw, 64px); max-width: 1500px; }
.ck-log-item { padding: 18px 20px; background: var(--card); border: 2px solid var(--river); border-radius: 14px; }
.ck-log-item p { margin: 10px 0 0; font-size: .9375rem; }

/* ---------- more ---------- */
.ck-more { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(56px, 6vw, 100px) var(--g); border-top: 1.5px solid var(--olive); }
.ck-more h2 { max-width: 16ch; margin-bottom: 22px; }
.ck-more img { width: 100%; max-width: 420px; }
.ck-more .actions { margin-bottom: 0; }

@media (max-width: 1199px) {
  .ck-hero-copy { grid-template-columns: minmax(0, 1fr); }
  .ck-plate { margin-top: -2vw; }
  .ck-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-counts li:nth-child(4) { padding-left: 0; border-left: 0; }
  .ck-counts li:nth-child(n+4) { border-top: 1.5px solid var(--olive); }
  .ck-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ck-hero-copy { padding: 8px 16px 0; }
  .ck-kick { font-size: .75rem; }
  .ck-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .ck-plate img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
  .ck-tally, .ck-table-band, .ck-method, .ck-more { padding-left: 16px; padding-right: 16px; }
  .ck-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-counts li, .ck-counts li + li { padding: 14px 12px 14px 0; border-left: 0; border-top: 1.5px solid var(--olive); }
  .ck-counts li:nth-child(even) { padding-left: 14px; border-left: 1.5px solid var(--olive); }
  .ck-counts li:nth-child(-n+2) { border-top: 0; }
  .ck-units { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px 5px; }
  .ck-units i { height: 14px; }
  .ck-table-head { grid-template-columns: minmax(0, 1fr); }
  .ck-tools { position: static; gap: 14px; }
  .ck-opts label { min-height: 44px; }
  .ck-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ck-table, .ck-table tbody, .ck-table tr, .ck-table tr.p th, .ck-table tr.p td, .ck-table .ck-gh th, .ck-empty td { display: block; width: auto; }
  .ck-wrap:has(#fa-yes:checked):has(#fd-kb4:checked) .ck-empty,
  .ck-wrap:has(#fa-kids:checked):has(#fd-kb2:checked) .ck-empty,
  .ck-wrap:has(#fa-kids:checked):has(#fd-kb4:checked) .ck-empty { display: block; }
  .ck-table tr.p { padding: 16px 12px; border-bottom: 1.5px solid rgba(94, 90, 36, .35); }
  .ck-table tr.p th, .ck-table tr.p td { border: 0; padding: 0 0 6px; }
  .ck-table tr.p th { margin-bottom: 6px; }
  .ck-table tr.p td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--olive); font-size: .9375rem; }
  .ck-table tr.p td[data-label="Answer"] { display: none; }
  .ck-keep { grid-template-columns: minmax(0, 1fr); padding: 48px 16px; }
  .ck-keep img { justify-self: start; max-width: 180px; }
  .ck-keep .button { width: 100%; }
  .ck-steps, .ck-log, .ck-more { grid-template-columns: minmax(0, 1fr); }
  .ck-more img { max-width: 260px; }
}