/* Rich article layer: photos, "In this guide" cards, charts, card lists, white reading theme.
   Applies only to article pages (pages that contain .kr-guide). */
:root{--kr-acc:#C22C27;--kr-ink:#1f2937;--kr-muted:#6b7280;--kr-line:#e5e7eb;--kr-soft:#f8fafc;--kr-bar:#2a78d6}

/* White reading theme for articles */
body:has(.kr-guide){background:#fff !important;color:var(--kr-ink) !important}
body:has(.kr-guide) :where(main,article,.article-wrap,.wrapper,.wrap,.content,.container,.c,.post,.post-body,.entry){background:transparent !important;color:var(--kr-ink) !important}
body:has(.kr-guide) :where(article,.article-wrap,.wrapper,.content,.post-body) :where(p,li,td,dd,dt,span,em,strong,b,small,blockquote,label){color:inherit}
body:has(.kr-guide) :where(h1,h2,h3,h4){color:#111827 !important}
body:has(.kr-guide) :where(article,.article-wrap,.wrapper,.content) a:not(.kr-card):not(.kn-link):not(.kn-cta){color:var(--kr-acc)}
body:has(.kr-guide) table{background:#fff !important;border-collapse:collapse;width:100%;border:1px solid var(--kr-line);border-radius:12px;overflow:hidden;font-size:.95rem}
body:has(.kr-guide) :where(th){background:#f3f4f6 !important;color:#111827 !important;text-align:left;font-weight:700}
body:has(.kr-guide) :where(th,td){padding:10px 14px !important;border:0 !important;border-bottom:1px solid var(--kr-line) !important;color:var(--kr-ink)}
body:has(.kr-guide) tr:nth-child(even) td{background:#fafafa !important}
body:has(.kr-guide) :where(.geo-answer,.quick-answer){background:#C22C270f !important;color:#1f2937 !important;border-left:4px solid var(--kr-acc) !important}
body:has(.kr-guide) :where(.note-box,.callout,.tip,.info-box,.highlight,.box,.card,.stat-card,.cta-box){background:var(--kr-soft) !important;color:var(--kr-ink) !important;border-color:var(--kr-line) !important}
body:has(.kr-guide) :where(.meta,.byline,.date,.breadcrumb,.breadcrumb a){color:var(--kr-muted) !important}

/* Photos */
.kr-fig{margin:24px 0}
.kr-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.kr-fig figcaption{font-size:.78rem;color:var(--kr-muted);margin-top:6px}
.kr-hero img{aspect-ratio:21/9}

/* In this guide: 3-column cards */
.kr-guide{margin:28px 0 32px}
.kr-guide-h{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-muted);margin:0 0 12px}
.kr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kr-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--kr-line);border-radius:14px;background:#fff;color:var(--kr-ink) !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s,transform .15s}
.kr-card:hover{border-color:var(--kr-acc);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.kr-card b{font-size:.98rem;line-height:1.3;color:#111827}
.kr-card small{font-size:.84rem;line-height:1.45;color:var(--kr-muted)}
.kr-num{font:800 .78rem/1 Inter,system-ui,sans-serif;color:var(--kr-acc);background:#C22C2714;border-radius:999px;padding:4px 8px;align-self:flex-start}
@media (max-width:900px){.kr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kr-grid{grid-template-columns:1fr}}

/* Feature lists as 2-column cards */
ul.kr-cards{list-style:none !important;padding:0 !important;margin:18px 0 !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
ul.kr-cards>li{margin:0 !important;padding:14px 16px !important;border:1px solid var(--kr-line);border-left:4px solid var(--kr-acc);border-radius:12px;background:var(--kr-soft);line-height:1.5}
ul.kr-cards>li::before{content:none !important}
ul.kr-cards>li>:is(strong,b):first-child{display:block;margin-bottom:4px;color:#111827}
@media (max-width:640px){ul.kr-cards{grid-template-columns:1fr}}

/* Charts (single series, one hue; text in text tokens) */
.kr-chart{margin:18px 0 28px;padding:16px 18px;border:1px solid var(--kr-line);border-radius:14px;background:#fff}
.kr-chart figcaption{font-size:.95rem;color:#111827;margin:0 0 8px}
.kr-svg{width:100%;height:auto;display:block;font:12px Inter,system-ui,sans-serif}
.kr-mark{fill:var(--kr-bar)}
.kr-bar:hover .kr-mark,.kr-pt:hover .kr-dot{fill:#1d5fb0}
.kr-lab,.kr-tick{fill:#52514e}
.kr-val{fill:#111827;font-weight:600}
.kr-axis{stroke:#d1d5db;stroke-width:1}
.kr-grid{stroke:#eceae5;stroke-width:1}
.kr-line{fill:none;stroke:var(--kr-bar);stroke-width:2}
.kr-dot{fill:var(--kr-bar);stroke:#fff;stroke-width:2}
.kr-note{font-size:.78rem;color:var(--kr-muted);margin:6px 0 0}

/* Sticky "On this page" sidebar (added by script on wide screens) */
.kr-side{position:fixed;top:96px;width:230px;max-height:calc(100vh - 120px);overflow:auto;padding:14px 16px;border:1px solid var(--kr-line);border-radius:14px;background:#fff;font:14px/1.45 Inter,system-ui,sans-serif;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.kr-side p{margin:0 0 8px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--kr-muted)}
.kr-side a{display:block;padding:5px 8px;border-radius:8px;color:#374151;text-decoration:none}
.kr-side a:hover,.kr-side a.on{background:#C22C2714;color:var(--kr-acc)}
@media (max-width:1359px){.kr-side{display:none}}

/* Readability on the white theme: text colours written for dark pages */
body:has(.kr-guide) :where(.subtitle,.lede,.intro,.dek,.excerpt,.summary,.sub,.standfirst){color:#4b5563 !important}
body:has(.kr-guide) :where(.author-name,.author,.name,.byline,.author-block .name,.author-line,.author-meta,.author-details){color:#374151 !important}
body:has(.kr-guide) :where(article,.article-wrap,.wrapper,.content,.container) :is([style*="color:#fff"],[style*="color: #fff"],[style*="color:#f5f5f5"],[style*="color:#e5e7eb"],[style*="color:#d1d5db"],[style*="color:#f3f4f6"],[style*="color:#9ca3af"],[style*="color:rgba(255"]){color:#374151 !important}
body:has(.kr-guide) hr{border-color:var(--kr-line) !important}

/* Home and blog-index additions */
.kr-home{background:#fff;color:var(--kr-ink);padding:56px 20px}
.kr-wrap{max-width:1160px;margin:0 auto}
.kr-home h2{font:800 1.6rem/1.2 Inter,system-ui,sans-serif;color:#111827;margin:0 0 6px}
.kr-home .kr-sub{color:var(--kr-muted);margin:0 0 22px}
.kr-home .kr-sec+.kr-sec{margin-top:48px}
.kr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kr-topic{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--kr-line);border-radius:14px;background:#fff;color:var(--kr-ink) !important;text-decoration:none !important;transition:border-color .15s,box-shadow .15s}
.kr-topic:hover{border-color:var(--kr-acc);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.kr-topic svg{width:40px;height:40px;flex:none;padding:9px;border-radius:12px;background:#C22C2714;color:var(--kr-acc);stroke:currentColor;fill:none}
.kr-topic b{display:block;font-size:1rem;color:#111827}.kr-topic small{display:block;color:var(--kr-muted);font-size:.86rem;margin-top:3px}
.kr-post{display:flex;flex-direction:column;border:1px solid var(--kr-line);border-radius:14px;overflow:hidden;background:#fff;color:var(--kr-ink) !important;text-decoration:none !important;transition:box-shadow .15s,transform .15s}
.kr-post:hover{box-shadow:0 10px 28px rgba(0,0,0,.1);transform:translateY(-2px)}
.kr-post img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.kr-post span{padding:14px 16px 16px}.kr-post b{display:block;color:#111827;line-height:1.3}.kr-post small{display:block;color:var(--kr-muted);margin-top:6px;font-size:.86rem;line-height:1.45}
.kr-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px 10px 0 0}
@media (max-width:900px){.kr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kr-grid3{grid-template-columns:1fr}}
/* thumbnails inside existing card image boxes */
:is(.card-img,.card-thumb,.card-image,.post-thumb){overflow:hidden;position:relative}
:is(.card-img,.card-thumb,.card-image,.post-thumb)>.kr-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}

/* v2 fixes: site nav{} rules must not paint the guide; dark-theme li colours must not fade cards */
nav.kr-guide{background:transparent !important;padding:0 !important;position:static !important;box-shadow:none !important;border:0 !important;height:auto !important;backdrop-filter:none !important}
nav.kr-guide .kr-guide-h{color:#6b7280 !important}
ul.kr-cards>li{color:#374151 !important}
ul.kr-cards>li *{color:inherit}
ul.kr-cards>li>:is(strong,b):first-child{color:#111827 !important}
body:has(.kr-guide) :where(article,.article-wrap,.wrapper,.wrap,.content,.container,.post,.post-body,.entry,main) :where(ul,ol):not(.kr-cards){color:#1f2937 !important}