/* ==========================================================================
   COOKIE CONSENT, Deal Makers (& Fakers). Paired with cookie.js.
   Every class is prefixed ck so nothing here can touch the page's own CSS,
   and nothing in the page's CSS reaches in. Matches the site: paper ground,
   ink buttons as round pills, Instrument Serif for the title, Geist for text.
   Reject and Accept are the same size and the same row; never smaller,
   greyed or behind a second layer.
   ========================================================================== */

:root{
  --ck-paper:#FAF8F3;
  --ck-ink:#161513;
  --ck-t2:#55514a;
  --ck-t3:#6B675F;
  --ck-line:rgba(22,21,19,.14);
  --ck-line2:rgba(22,21,19,.30);
  --ck-fill:rgba(22,21,19,.045);
  --ck-yellow:#F8F32B;
  --ck-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ck-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ck-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ck-e:cubic-bezier(.2,.7,.1,1);
}

.cknote,.ckpanel{
  position:fixed;left:20px;bottom:20px;z-index:120;
  box-sizing:border-box;
  background:var(--ck-paper);color:var(--ck-ink);
  border-radius:18px;
  box-shadow:0 0 0 1px var(--ck-line),0 4px 14px rgba(22,21,19,.08),0 26px 60px -14px rgba(22,21,19,.34);
  font-family:var(--ck-sans);font-size:15px;line-height:1.5;text-align:left;
  -webkit-font-smoothing:antialiased;
  opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ck-e),transform .45s var(--ck-e);
}
.cknote.ck-on,.ckpanel.ck-on{opacity:1;transform:none}
.cknote[hidden],.ckpanel[hidden],.ckscrim[hidden]{display:none!important}
.cknote *,.ckpanel *{box-sizing:border-box}

.cknote{width:min(384px,calc(100vw - 32px));padding:20px 20px 8px}
.ckpanel{
  width:min(500px,calc(100vw - 32px));padding:18px 20px 0;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(22,21,19,.25) transparent;
}

/* headline: serif, with the yellow dot the site uses sparingly */
.ckroot .ckt{margin:0;font-family:var(--ck-serif);font-weight:400;font-size:28px;line-height:1.05;letter-spacing:-.01em;color:var(--ck-ink);text-wrap:balance}
.ckroot .cknote .ckt{display:flex;align-items:center;gap:10px;padding-right:36px}
.ckroot .cknote .ckt::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ck-yellow);box-shadow:0 0 0 1px rgba(22,21,19,.55)}
.ckroot p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--ck-t2)}

.ckhd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-6px -8px 4px 0}
.ckix{font-family:var(--ck-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t3);white-space:nowrap}

/* close control: 40px hit area, 28px mark */
.ckx{
  width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;
  background:transparent;color:var(--ck-t2);border:0;border-radius:999px;cursor:pointer;padding:0;
  transition:color .25s;
}
.ckx::before{content:"";position:absolute;width:28px;height:28px;border-radius:999px;background:var(--ck-fill);transition:background .25s}
.ckx svg{position:relative;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.ckx:hover{color:var(--ck-ink)}
.ckx:hover::before{background:rgba(22,21,19,.09)}
.ckroot .cknote .ckx{position:absolute;top:10px;right:10px;z-index:2}

/* buttons: round pills like the site's .pill, equal size, one row */
.ckacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ckb{
  height:46px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ck-ink);
  border:0;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ck-line2);
  font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;text-align:center;
  transition:background .25s,box-shadow .25s,transform .3s var(--ck-e);
}
.ckb:hover{background:var(--ck-fill);box-shadow:inset 0 0 0 1px rgba(22,21,19,.5)}
.ckb:active{transform:scale(.98)}
.ckb--yes,.ckb--save{background:var(--ck-ink);color:var(--ck-paper);box-shadow:none}
.ckb--yes:hover,.ckb--save:hover{background:#2a2825;box-shadow:none}
.ckb--save{grid-column:1/-1}

.ckmore{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.cklk{
  position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0;margin:0;
  background:none;border:0;font:inherit;font-size:13px;color:var(--ck-t3);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(22,21,19,.25);text-underline-offset:4px;white-space:nowrap;
  transition:color .25s,text-decoration-color .25s;
}
.cklk:hover{color:var(--ck-ink);text-decoration-color:var(--ck-ink)}

/* the panel: one row per category */
.ckrows{margin:16px 0 0;display:grid;gap:8px}
.ckrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;
  padding:14px 14px 14px 16px;background:var(--ck-fill);border-radius:12px;
}
.ckrow .ckname{grid-column:1;grid-row:1;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--ck-ink)}
.ckrow p{grid-column:1/-1;grid-row:2;margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--ck-t2);max-width:60ch}
.ckctl{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end}
.ckrow .cksw{margin:-8px 0}
.cklock{
  font-family:var(--ck-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t3);
  background:rgba(22,21,19,.06);border-radius:99px;padding:5px 10px;white-space:nowrap;
}

/* switch: 44px hit area wide, 24px track */
.cksw{width:44px;height:40px;flex:none;position:relative;padding:0;background:transparent;border:0;border-radius:999px;cursor:pointer}
.cksw::before{
  content:"";position:absolute;left:0;top:50%;width:44px;height:24px;transform:translateY(-50%);
  background:rgba(22,21,19,.16);border-radius:999px;transition:background .25s var(--ck-e);
}
.cksw i{
  position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transform:translateY(-50%);box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .3s var(--ck-e);
}
.cksw[aria-checked="true"]::before{background:var(--ck-ink)}
.cksw[aria-checked="true"] i{transform:translate(20px,-50%)}

/* ledger: what is stored, and what was held back on this page */
.ckl{margin:16px 0 0;border-top:1px solid var(--ck-line)}
.ckl>div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--ck-line)}
.ckl dt{font-family:var(--ck-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t3);white-space:nowrap}
.ckl dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ck-t2);text-align:right}
.ckroot .ckpanel .ckrec{margin:14px 0 0;font-family:var(--ck-mono);font-size:11px;letter-spacing:.02em;line-height:1.55;color:var(--ck-t3)}
.ckrec b{font-weight:400;color:var(--ck-ink)}

/* the action row sticks to the foot of the panel's own scroll box */
.ckpacts{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px -20px 0;padding:14px 20px 20px;
  position:sticky;bottom:0;z-index:1;
  background:var(--ck-paper);box-shadow:0 -1px 0 var(--ck-line),0 -14px 16px -8px rgba(250,248,243,.95);
}

.ckscrim{position:fixed;inset:0;z-index:119;background:rgba(22,21,19,.34);opacity:0;transition:opacity .3s var(--ck-e)}
.ckscrim.ck-on{opacity:1}

/* the plate that stands in for a held video: a poster with a play mark, the
   whole plate is the control. The poster is a local image (data-hold). */
.ckph{
  position:relative;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:12px;
  width:100%;aspect-ratio:16/9;min-height:0;padding:20px;text-align:center;cursor:pointer;overflow:hidden;
  color:#F3F0EA;background:#121212 center/cover no-repeat;border-radius:inherit;
  font-family:var(--ck-sans);
}
.ckph::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,18,.25) 0%,rgba(18,18,18,.1) 40%,rgba(18,18,18,.82) 100%)}
.ckph>*{position:relative}
.ckplay{
  display:block;position:relative;width:84px;height:84px;border-radius:50%;align-self:center;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .45s var(--ck-e),background .3s;
}
.ckplay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.ckph:hover .ckplay,.ckph:focus-visible .ckplay{transform:scale(1.08);background:rgba(255,255,255,.26)}
.ckroot .ckph p,.ckph p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(243,240,234,.82);max-width:38ch}
.ckph p b{font-weight:500;color:#fff}

.ckroot :focus-visible,.ckph:focus-visible{outline:2px solid var(--ck-ink);outline-offset:2px;border-radius:6px}
.ckph:focus-visible{outline-color:var(--ck-yellow);outline-offset:-4px}
.ckx:focus-visible,.cksw:focus-visible{outline:none}
.ckx:focus-visible::before,.cksw:focus-visible::before{outline:2px solid var(--ck-ink);outline-offset:2px}
.cknote:focus,.ckpanel:focus{outline:none}

/* the opening menu on the homepage sits under the card */
body:has(#menu.open) .cknote{visibility:hidden;pointer-events:none}

@media(max-width:720px){
  .cknote,.ckpanel{left:8px;right:8px;width:auto;max-width:none;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .cknote{padding:16px 16px 6px;border-radius:16px}
  .ckroot .cknote .ckt{font-size:24px}
  .ckroot .cknote>p{margin-top:8px;font-size:13.5px;line-height:1.5}
  .ckacts{margin-top:12px}
  .ckb{height:44px}
  .ckmore{margin-top:2px}
  .ckpanel{max-height:86vh;max-height:86dvh;padding:14px 16px 0}
  .ckpacts{margin-left:-16px;margin-right:-16px;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .ckl>div{flex-direction:column;align-items:flex-start;gap:3px}
  .ckl dd{text-align:left}
  .ckplay{width:68px;height:68px}
  .ckph{padding:14px;gap:8px}
  .ckph p{font-size:11.5px}
}
@media(max-width:340px){.ckb{padding:0 10px}}

@media(prefers-reduced-motion:reduce){
  .cknote,.ckpanel,.cknote.ck-on,.ckpanel.ck-on{transform:none;transition:opacity .12s linear}
  .ckscrim{transition:opacity .12s linear}
  .ckb,.cksw::before,.cksw i,.ckx,.ckx::before,.cklk,.ckplay{transition:none}
}
@media(forced-colors:active){
  .cknote,.ckpanel{border:1px solid CanvasText}
  .ckb,.cksw::before{border:1px solid ButtonText}
}