
.kn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck a{text-decoration:none}


.kn-hero .ck-hero-in{min-height:clamp(380px,52vh,560px);padding-block:clamp(56px,7vw,96px)}
.kn-hero h1{max-width:18ch}
.kn-hero-lede{font-size:clamp(17px,1.5vw,20px);color:#fff4dc;text-shadow:0 2px 12px #0008}


.kn-main{padding-top:clamp(28px,4vw,56px)}
.kn-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,24px);margin-bottom:clamp(24px,3.5vw,44px)}
.kn-tab{position:relative;text-decoration:none;display:grid;align-content:end;min-height:clamp(110px,15vw,190px);padding:clamp(12px,2vw,22px);border:0;border-radius:14px;overflow:hidden;isolation:isolate;color:#fff9ea;text-align:left;background:var(--sea);box-shadow:0 6px 18px #17261e2e;transition:transform .2s,box-shadow .2s}
.kn-tab-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.kn-tab::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0d1a1222 20%,#0d1a12d0 100%)}
.kn-tab:hover{transform:translateY(-3px);box-shadow:0 12px 26px #17261e40}
.kn-tab:hover .kn-tab-img{transform:scale(1.05)}
.kn-tab-name{font:400 clamp(17px,2vw,30px)/1.05 Shrikhand,Georgia,serif;letter-spacing:-.02em;text-shadow:0 2px 0 #0007}
.kn-tab-count{margin-top:4px;font:700 clamp(12px,1.1vw,14px)/1.2 Arial,sans-serif;color:#f6dc8a}

.kn-panel{scroll-margin-top:16px}
.kn-panel+.kn-panel{margin-top:clamp(40px,5vw,72px)}
.kn-sub{scroll-margin-top:16px}
.kn-sub:target{box-shadow:0 0 0 3px var(--gold)}
.kn-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}


.kn-subs{display:grid;gap:12px}
.kn-sub{background:var(--cream);border:1px solid var(--rule);border-radius:12px;box-shadow:0 2px 0 #d9d4bd}
.kn-sub>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px clamp(16px,2.4vw,26px);font:700 clamp(17px,1.5vw,20px)/1.25 Arial,sans-serif}
.kn-sub>summary::-webkit-details-marker{display:none}
.kn-sub-name{flex:1}
.kn-sub-count{flex:none;min-width:36px;padding:4px 10px;border-radius:999px;background:var(--deck);color:var(--ink);font:700 14px/1.2 Arial,sans-serif;text-align:center}
.kn-sub>summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:700 20px/1 Arial;transition:transform .2s}
.kn-sub[open]>summary::after{transform:rotate(45deg)}
.kn-sub[open]>summary{border-bottom:1px solid var(--rule)}
.kn-list{list-style:none;margin:0;padding:6px clamp(8px,1.4vw,14px) 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(12px,2vw,28px)}
.kn-list li{border-bottom:1px dashed #d3d2bf}
.kn-list a{display:grid;gap:4px;padding:13px 10px 13px 30px;position:relative;color:var(--ink);border-radius:8px;transition:background .15s}
.kn-list a::before{content:"";position:absolute;left:10px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #977d45}
.kn-list a:hover{background:#efc4531f}
.kn-q{font:700 16px/1.35 Arial,sans-serif}
.kn-d{font-size:14px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


.kn-art-hero .ck-hero-in{min-height:clamp(300px,42vh,460px);align-content:end}
.kn-art-hero h1{font-size:clamp(32px,4.4vw,64px);max-width:22ch;line-height:1.02}
.kn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:700 14px/1.3 Arial,sans-serif}
.kn-crumbs a{color:#1d2a1f;background:#fbf8eee8;padding:6px 12px;border-radius:999px}
.kn-crumbs span{color:#fff9ea;opacity:.8}
.kn-art{padding-top:clamp(36px,5vw,72px)}
.kn-art-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(28px,5vw,72px);align-items:start}
.kn-answer{max-width:72ch;font-size:clamp(17px,1.25vw,19px);line-height:1.7}
.kn-answer p+p{margin-top:1.05em}
.kn-answer>p:first-child{font-size:1.12em;line-height:1.6}
.kn-answer>p:first-child::first-letter{float:left;font:400 3.1em/.82 Shrikhand,Georgia,serif;margin:.06em .1em 0 0;color:var(--red)}
.kn-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(32px,4vw,52px);padding-top:24px;border-top:2px solid var(--rule)}
.kn-pager a{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--cream);color:var(--ink);font:700 15px/1.35 Arial,sans-serif;transition:transform .15s,box-shadow .15s}
.kn-pager a:hover{transform:translateY(-2px);box-shadow:0 6px 16px #17261e1f}
.kn-pager a span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.kn-pager-next{text-align:right;grid-column:2}
.kn-side{position:sticky;top:20px;display:grid;gap:18px}
.kn-card{background:var(--cream);border:1px solid var(--rule);border-radius:14px;padding:20px;box-shadow:0 2px 0 #d9d4bd}
.kn-card-label{font:400 21px/1.1 Shrikhand,Georgia,serif;margin-bottom:10px}
.kn-rel{list-style:none;margin:0 0 14px;padding:0}
.kn-rel li{border-bottom:1px dashed #d3d2bf}
.kn-rel a{display:block;padding:10px 0;color:var(--ink);font:700 14.5px/1.35 Arial,sans-serif;transition:padding .15s}
.kn-rel a:hover{padding-left:6px}
.kn-card .ck-link{text-decoration:none;color:var(--red)}
.kn-card-cta{padding:0;overflow:hidden;background:var(--forest);border-color:var(--forest);color:#f5f1e1}
.kn-card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.kn-card-cta>div{display:grid;gap:10px;padding:18px}
.kn-card-cta .ck-btn,.kn-card-cta .ck-btn-ghost{justify-content:center}

@media (max-width:900px){
  .kn-art-grid{grid-template-columns:1fr}
  .kn-side{position:static}
  .kn-list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .kn-tabs{gap:8px}
  .kn-tab{border-radius:10px;padding:10px;min-height:96px}
  .kn-tab-name{font-size:15px}
  .kn-art-hero .ck-hero-in{min-height:250px}
  .kn-hero .ck-hero-in{min-height:0}
  .kn-pager{grid-template-columns:1fr}
  .kn-pager-next{grid-column:1;text-align:left}
}
@media (prefers-reduced-motion:reduce){.kn-tab,.kn-tab-img,.kn-pager a,.kn-rel a{transition:none}}


.kn-card-img{aspect-ratio:auto;height:auto;object-fit:contain}
@media (max-width:600px){
  .kn-crumbs a{display:inline-flex;align-items:center;min-height:40px;padding-block:8px}
  .kn-rel a{padding-block:12px}
  .kn-list a{min-height:44px}
}
