/* Страницы кейсов /kejsy/. Источник — /opt/sys/pierogi/cases.css, cases.mjs копирует его
   в dist/kejsy/kejsy.css. Токены — те же, что в :root у src/index.html (см. ANTISLOP.md). */
:root{
  --ink:#f2ead8; --ink-soft:#b3aa92; --brand:#4fdc9a;
  --cream:#0e1210; --cream-2:#141a15; --paper:#1a221c;
  --accent:#e8a33d; --accent-ink:#17120a; --accent-2:#c8442f;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:128px;
  --shadow-1:0 2px 8px rgba(0,0,0,.28);
  --shadow-2:0 18px 44px rgba(0,0,0,.42);
  --line:rgba(242,234,216,.12);
  --maxw:1440px; --textw:760px; --gutter:28px;
  --hd:'Playfair Display','Georgia',serif;
  --bd:'Manrope','Inter',ui-sans-serif,system-ui,sans-serif;
}
@media(max-width:780px){:root{--gutter:16px}}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:var(--bd);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{min-height:100vh;font-size:17px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:var(--cream)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:200;background:var(--accent);color:var(--accent-ink);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm)}

/* шапка */
.hdr{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) max(var(--gutter), calc((100% - var(--maxw)) / 2));
  background:rgba(14,18,16,.88);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(242,234,216,.1)}
.hdr-logo img{height:44px;width:auto}
.hdr-nav{display:flex;align-items:center;gap:var(--s-1)}
.hdr-nav a{display:inline-flex;align-items:center;min-height:44px;padding:var(--s-3) 14px;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;text-decoration:none;transition:background .2s,color .2s}
.hdr-nav a:hover{background:var(--accent);color:var(--cream)}
.hdr-nav .hdr-cta{background:var(--accent);color:var(--cream);font-weight:800;border:2px solid var(--accent);margin-left:var(--s-2)}
.hdr-nav .hdr-cta:hover{background:transparent;color:var(--accent)}
@media(max-width:780px){
  .hdr-logo img{height:34px}
  .hdr-nav a{padding:var(--s-2) 10px;font-size:13px}
  .hdr-nav a:first-child{display:none}
  .hdr-nav .hdr-cta{margin-left:0}
}
@media(max-width:400px){.hdr-nav .hdr-cta{display:none}}

/* каркас */
.wrap{padding:var(--s-6) max(var(--gutter), calc((100% - var(--maxw)) / 2)) var(--s-9)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2);font-size:13px;color:var(--ink-soft);margin-bottom:var(--s-7)}
.crumbs a{text-decoration:underline;text-decoration-color:rgba(242,234,216,.3);text-underline-offset:3px}
.crumbs a:hover{color:var(--accent)}

.khead{max-width:var(--textw)}
.khead.hub{max-width:900px;margin-bottom:var(--s-8)}
h1{font-family:var(--hd);font-weight:800;font-size:clamp(36px,5.2vw,72px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;margin:var(--s-4) 0 var(--s-5)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink)}
.client{font-size:12px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.badge{display:inline-flex;align-items:center;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);
  border:1px solid rgba(232,163,61,.5);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.02em}
.kcase-tags{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}

.klinks{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-5)}
.klinks a,.kbody a,.vlist a,.sources a,.player figcaption a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(232,163,61,.4);text-underline-offset:3px}
.klinks a{font-weight:700;font-size:15px}
.klinks a:hover,.vlist a:hover,.sources a:hover,.player figcaption a:hover{text-decoration-color:var(--accent)}

.kcover{margin-top:var(--s-7);width:100%;max-width:960px;border-radius:var(--r-lg);box-shadow:var(--shadow-2);aspect-ratio:16/9;object-fit:cover}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-1);margin-top:var(--s-7);max-width:960px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s-5) 0}
.facts div{padding:var(--s-2) var(--s-4) var(--s-2) 0}
.facts dt{font-size:12px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s-1)}
.facts dd{font-family:var(--hd);font-size:20px;line-height:1.25;color:var(--ink)}

.kbody{max-width:var(--textw);margin-top:var(--s-7)}
.kbody section+section{margin-top:var(--s-7)}
h2{font-family:var(--hd);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin-bottom:var(--s-4)}
.kbody p+p{margin-top:var(--s-4)}
.kbody p{color:#e4dcc8}

.kblock{margin-top:var(--s-9)}
.kblock h3{font-size:15px;font-weight:800;margin:var(--s-6) 0 var(--s-3)}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:var(--s-5)}
.players.one{grid-template-columns:minmax(0,960px)}
.player-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-1)}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player figcaption,.vlist li{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-3);font-size:15px}
.player figcaption span,.vlist span{color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.vlist{list-style:none;max-width:var(--textw)}
.vlist li{margin:0;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}

/* карточки кейсов: вся карточка — ссылка, поэтому ховер уместен */
.kgroup+.kgroup{margin-top:var(--s-9)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-5)}
.kcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;box-shadow:var(--shadow-1);transition:border-color .2s,transform .2s}
.kcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.kcard-cover{aspect-ratio:16/9;background:var(--cream-2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.kcard-cover img{width:100%;height:100%;object-fit:cover}
.kcard-plain{font-family:var(--hd);font-style:italic;font-size:28px;color:var(--accent)}
.kcard-meta{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.kcard-meta h3{font-family:var(--hd);font-weight:700;font-size:21px;line-height:1.15;color:var(--ink);flex:1}
.kcard-meta .badge{align-self:flex-start}

.kjump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.kjump a{padding:var(--s-2) var(--s-4);border:1px solid rgba(242,234,216,.25);border-radius:var(--r-sm);font-weight:700;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s}
.kjump a:hover{border-color:var(--accent);color:var(--accent)}

.cta{margin-top:var(--s-9);padding:var(--s-7) var(--s-6);background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-lg);max-width:960px}
.cta p{color:var(--ink-soft);margin-bottom:var(--s-5);max-width:520px}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:var(--s-4) var(--s-5);border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;text-decoration:none;border:2px solid var(--accent);transition:background .18s,color .18s}
.btn-primary:hover{background:transparent;color:var(--accent)}
@media(max-width:560px){.cta{padding:var(--s-6) var(--s-5)}}

.sources{margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid var(--line);max-width:var(--textw)}
.sources h2{font-size:20px}
.sources ul{padding-left:var(--s-5);font-size:14px;color:var(--ink-soft)}
.sources li+li{margin-top:var(--s-2)}

/* подвал — как на главной */
.footer{background:#070a08;color:rgba(242,234,216,.45);padding:30px max(var(--gutter), calc((100% - var(--maxw)) / 2));
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;border-top:1px solid rgba(242,234,216,.08)}
.footer b{color:var(--ink);font-family:var(--hd);font-weight:700}
.footer-link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(242,234,216,.3);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.footer-link:hover{color:var(--accent);text-decoration-color:var(--accent)}