@font-face {
    font-family: 'Noto Sans Kannada';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/noto-sans-kannada.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA,
                   U+1CF2, U+1CF4, U+200C-200D, U+25CC, U+A830-A835;
}
@font-face {
    font-family: 'Noto Serif Kannada';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/noto-serif-kannada-400.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA,
                   U+1CF2, U+1CF4, U+200C-200D, U+25CC, U+A830-A835;
}
@font-face {
    font-family: 'Noto Serif Kannada';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/noto-serif-kannada-700.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA,
                   U+1CF2, U+1CF4, U+200C-200D, U+25CC, U+A830-A835;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0-00B1, U+00B5, U+00BC-00BE, U+00D7,
                   U+00E0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
                   U+2030, U+2039-203A, U+2044, U+20B9, U+2122, U+2190-2193, U+2212,
                   U+2264-2265, U+FFFD;
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/merriweather-latin.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0-00B1, U+00B5, U+00BC-00BE, U+00D7,
                   U+00E0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026,
                   U+2030, U+2039-203A, U+2044, U+20B9, U+2122, U+2190-2193, U+2212,
                   U+2264-2265, U+FFFD;
}

:root {
    --bk-crimson:      #8d1f1a;
    --bk-crimson-deep: #6f1613;
    --bk-crimson-rgb:  141,31,26;
    --bk-gold:         #6a4105;
    --bk-sage:         #a8b295;
    --bk-sage-deep:    #5e6b4c;

    --bk-bg:        #faf6ec;
    --bk-surface:   #fffdf7;
    --bk-surface-2: #f2ecdc;
    --bk-ink:       #2f261c;
    --bk-ink-soft:  #574b3d;
    --bk-muted:     #7b6e5d;
    --bk-line:      #e3d9c2;
    --bk-line-firm: #cdbf9f;

    --bk-accent:     var(--bk-crimson);
    --bk-accent-ink: #ffffff;
    --bk-tint:       rgba(var(--bk-crimson-rgb), 0.07);
    --bk-tint-firm:  rgba(var(--bk-crimson-rgb), 0.14);

    --bk-shadow-sm:   0 1px 2px rgba(47,38,28,0.05);
    --bk-shadow-card: 0 4px 14px -6px rgba(47,38,28,0.16);
    --bk-shadow-lift: 0 14px 34px -18px rgba(47,38,28,0.42);

    --bk-focus: #005fcc;
    --bk-sem-danger:  #a8331c;
    --bk-sem-success: #2c6b3f;

    --bk-font-ui:      'Noto Sans', 'Noto Sans Kannada', 'Tunga', 'Nirmala UI', 'Kannada Sangam MN', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bk-font-body:    'Merriweather', 'Noto Serif Kannada', 'Noto Sans Kannada', 'Tunga', 'Nirmala UI', Georgia, serif;
    --bk-font-display: 'Merriweather', 'Noto Serif Kannada', 'Noto Sans Kannada', 'Tunga', 'Nirmala UI', Georgia, serif;

    --bk-shell: 1080px;
    --bk-prose: 34rem;

    --bk-bar:      #241e17;
    --bk-bar-line: #3d3327;
    --bk-bar-ink:  #d9cfbe;
    --bk-bar-hi:   #fffdf7;
    --bk-menu:     #2b241b;
    --bk-menu-line:#443a2c;
}

html.mc-dark-mode,
#books-app.mc-dark-mode {
    --bk-crimson:      #e8908a;
    --bk-crimson-deep: #f3b3ad;
    --bk-crimson-rgb:  232,144,138;
    --bk-gold:         #d7a441;
    --bk-sage:         #9fae8b;
    --bk-sage-deep:    #bccaa9;

    --bk-bg:        #16130e;
    --bk-surface:   #201b14;
    --bk-surface-2: #2a231a;
    --bk-ink:       #f0e8d9;
    --bk-ink-soft:  #cdc2ae;
    --bk-muted:     #a0937f;
    --bk-line:      #362e22;
    --bk-line-firm: #4a4030;

    --bk-accent:     var(--bk-crimson);
    --bk-accent-ink: #16130e;
    --bk-tint:       rgba(var(--bk-crimson-rgb), 0.12);
    --bk-tint-firm:  rgba(var(--bk-crimson-rgb), 0.22);

    --bk-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
    --bk-shadow-card: 0 4px 14px -6px rgba(0,0,0,0.6);
    --bk-shadow-lift: 0 14px 34px -18px rgba(0,0,0,0.85);

    --bk-focus: #7cc4ff;
    --bk-sem-danger:  #f0917a;
    --bk-sem-success: #6fbf8a;
}
[hidden] { display: none !important; }

html:not(.lang-kn) .kn-text { display: none !important; }
html.lang-kn       .en-text { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bk-bg);
    color: var(--bk-ink);
    font-family: var(--bk-font-body);
    font-size: clamp(16.5px, 1rem + 0.16vw, 18.5px);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bk-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 { font-family: var(--bk-font-display); line-height: 1.4; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); font-weight: 900; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }

:focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; border-radius: 4px; }

.bk-wrap { max-width: var(--bk-shell); margin-inline: auto; padding-inline: clamp(18px, 5vw, 34px); }
.bk-prose { max-width: var(--bk-prose); }
.bk-section { padding-block: clamp(46px, 6.5vw, 84px); }
.bk-section-alt { background: var(--bk-surface); border-block: 1px solid var(--bk-line); }
.bk-eyebrow {
    font-family: var(--bk-font-ui); font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-muted);
    margin: 0 0 1em; line-height: 1.6;
}
html.lang-kn .bk-eyebrow { text-transform: none; letter-spacing: 0.04em; font-size: 0.82rem; }
.bk-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bk-skip {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background: var(--bk-bar); color: var(--bk-bar-hi); padding: 12px 18px;
    font-family: var(--bk-font-ui); font-weight: 700; text-decoration: none;
}
.bk-skip:focus { left: 0; }

.bk-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--bk-bar);
    border-bottom: 1px solid var(--bk-bar-line);
    --bk-focus: #f0c98a;
}
.bk-nav-inner {
    max-width: calc(var(--bk-shell) + 32px); margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 20px);
    display: flex; align-items: center; gap: 10px; min-height: 56px;
}
.bk-nav-logo { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 0; }
.bk-nav-logo img { height: 26px; width: auto; }

.bk-tabs {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: stretch; gap: 2px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center;
    font-family: var(--bk-font-ui); font-size: 0.86rem; font-weight: 600; line-height: 1.5;
    color: var(--bk-bar-ink); text-decoration: none;
    padding: 16px 13px 14px; border-bottom: 2px solid transparent;
    white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease;
}
.bk-tab:hover { color: var(--bk-bar-hi); }
.bk-tab[aria-current="page"] { color: var(--bk-bar-hi); border-bottom-color: var(--bk-gold); font-weight: 700; }
html.lang-kn .bk-tab { font-size: 0.9rem; padding-top: 15px; padding-bottom: 13px; }

.bk-nav-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.bk-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid var(--bk-bar-line); }
.bk-lang-opt {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--bk-font-ui); font-size: 0.78rem; font-weight: 600; line-height: 1.4;
    color: var(--bk-bar-ink); padding: 5px 11px; border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
html:not(.lang-kn) .bk-lang-opt[data-lang="en"],
html.lang-kn       .bk-lang-opt[data-lang="kn"] { background: var(--bk-bar-hi); color: var(--bk-bar); font-weight: 700; }

.bk-icon-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); color: var(--bk-bar-ink);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.bk-icon-btn:hover { background: rgba(255,255,255,0.16); color: var(--bk-bar-hi); }
.bk-icon-btn:active { transform: scale(0.95); }
.bk-icon-btn svg { width: 17px; height: 17px; }

.bk-menu-wrap { position: relative; display: inline-flex; }
.bk-menu {
    position: absolute; top: 44px; right: 0; z-index: 200;
    width: 232px; max-width: calc(100vw - 24px);
    background: var(--bk-menu); border: 1px solid var(--bk-menu-line);
    border-radius: 12px; box-shadow: 0 14px 36px -10px rgba(0,0,0,0.7);
    padding: 10px; display: flex; flex-direction: column; gap: 2px;
    --bk-focus: #f0c98a;
}
.bk-menu[hidden] { display: none; }
.bk-menu-head {
    margin: 4px 2px 6px; font-family: var(--bk-font-ui); font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase; color: #9d8f79; line-height: 1.6;
}
html.lang-kn .bk-menu-head { text-transform: none; letter-spacing: 0.02em; font-size: 11.5px; }
.bk-menu-seg { display: flex; background: #1b1610; border: 1px solid var(--bk-menu-line); border-radius: 9px; padding: 2px; gap: 2px; }
.bk-menu-seg button {
    flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
    font-family: var(--bk-font-ui); font-size: 11.5px; font-weight: 600; line-height: 1.5;
    color: #9d8f79; padding: 6px 4px; border-radius: 7px;
}
.bk-menu-seg button:hover { color: var(--bk-bar-hi); }
.bk-menu-seg button[aria-checked="true"] { background: var(--bk-menu-line); color: var(--bk-bar-hi); }
.bk-menu-rule { height: 1px; background: var(--bk-menu-line); margin: 12px 0 8px; }
.bk-menu-link {
    display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none;
    font-family: var(--bk-font-ui); font-size: 12.5px; font-weight: 500; line-height: 1.6;
    color: var(--bk-bar-ink);
}
.bk-menu-link:hover { background: #3a3125; color: var(--bk-bar-hi); }

.bk-hero {
    background:
        radial-gradient(115% 85% at 84% 4%, rgba(168,178,149,0.30) 0%, rgba(168,178,149,0) 62%),
        linear-gradient(180deg, var(--bk-surface-2) 0%, var(--bk-bg) 100%);
    border-bottom: 1px solid var(--bk-line);
    padding-block: clamp(36px, 5vw, 68px) clamp(44px, 6vw, 78px);
}
.bk-hero-grid { display: grid; gap: clamp(28px, 5vw, 54px); grid-template-columns: 1fr; align-items: center; }
.bk-hero-grid > * { min-width: 0; }
@media (min-width: 840px) { .bk-hero-grid { grid-template-columns: 1.12fr 0.88fr; } }
.bk-badge {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-family: var(--bk-font-ui); font-size: 0.78rem; font-weight: 700; line-height: 1.6;
    background: var(--bk-tint); color: var(--bk-accent);
    border: 1px solid var(--bk-tint-firm);
    padding: 0.35em 0.95em; border-radius: 999px; margin-bottom: 1.1em;
}
.bk-badge-dot { width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; flex: none; }
.bk-hero h1 { color: var(--bk-accent); margin-bottom: 0.22em; }
.bk-subtitle {
    font-family: var(--bk-font-ui); font-weight: 600;
    font-size: clamp(0.98rem, 0.88rem + 0.45vw, 1.18rem);
    color: var(--bk-gold); margin: 0 0 0.9em; line-height: 1.65;
}
.bk-byline { font-family: var(--bk-font-ui); font-size: 0.92rem; font-weight: 500; color: var(--bk-muted); margin: 0 0 1.5em; line-height: 1.7; }
.bk-lede { font-size: 1.04em; color: var(--bk-ink-soft); max-width: 32rem; }
.bk-cta-row { display: flex; flex-wrap: wrap; gap: 0.75em; margin: 1.4em 0 1.3em; }
.bk-meta-line { font-family: var(--bk-font-ui); font-size: 0.78rem; color: var(--bk-muted); letter-spacing: 0.02em; margin: 0; line-height: 1.7; }

.bk-cover { position: relative; max-width: 320px; margin-inline: auto; }
.bk-cover img {
    border-radius: 3px 9px 9px 3px;
    box-shadow:
        -1px 0 0 var(--bk-line-firm),
        -6px 0 0 -1px var(--bk-surface),
        -7px 0 0 -1px var(--bk-line-firm),
        var(--bk-shadow-lift);
}

.bk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font-family: var(--bk-font-ui); font-weight: 700; font-size: 0.97rem; line-height: 1.5;
    padding: 0.8em 1.5em; border-radius: 999px; text-decoration: none;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.bk-btn:hover { transform: translateY(-1px); }
.bk-btn-primary { background: var(--bk-accent); color: var(--bk-accent-ink); box-shadow: 0 6px 18px -9px rgba(var(--bk-crimson-rgb), 0.9); }
.bk-btn-primary:hover { box-shadow: 0 11px 24px -10px rgba(var(--bk-crimson-rgb), 0.95); }
.bk-btn-ghost { border-color: var(--bk-line-firm); color: var(--bk-ink); background: transparent; }
.bk-btn-ghost:hover { background: var(--bk-surface-2); }
.bk-btn-block { width: 100%; }

.bk-stats { background: var(--bk-surface); border-bottom: 1px solid var(--bk-line); }
.bk-stats-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.bk-stat { padding: clamp(18px, 3vw, 28px) clamp(8px, 2vw, 18px); text-align: center; position: relative; }
.bk-stat + .bk-stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--bk-line); }
.bk-stat b { display: block; font-family: var(--bk-font-ui); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); font-weight: 800; color: var(--bk-accent); line-height: 1.3; font-variant-numeric: tabular-nums; }
.bk-stat span { font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted); line-height: 1.6; }

.bk-card { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 14px; padding: clamp(20px, 3.2vw, 32px); box-shadow: var(--bk-shadow-card); }
.bk-trio { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
.bk-trio > * { min-width: 0; }
@media (min-width: 740px) { .bk-trio { grid-template-columns: repeat(3, 1fr); } }
.bk-trio h3 { color: var(--bk-accent); margin-bottom: 0.4em; }
.bk-trio p { margin: 0; font-size: 0.96em; color: var(--bk-ink-soft); }

.bk-chapter { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 14px; box-shadow: var(--bk-shadow-card); overflow: hidden; margin-top: 2rem; }
.bk-chapter-head {
    padding: clamp(20px, 3.2vw, 30px) clamp(20px, 4vw, 42px);
    border-bottom: 1px solid var(--bk-line);
    background: linear-gradient(180deg, rgba(168,178,149,0.20) 0%, rgba(168,178,149,0) 100%);
}
.bk-chapter-head .bk-eyebrow { margin-bottom: 0.6em; }
.bk-chapter-head h3 { margin: 0; font-size: clamp(1.15rem, 0.98rem + 0.75vw, 1.5rem); }
.bk-chapter-body { padding: clamp(22px, 3.8vw, 42px); max-width: 38rem; }
.bk-chapter-body h4 { font-family: var(--bk-font-display); font-size: 1.02rem; font-weight: 700; color: var(--bk-gold); margin: 2.1em 0 0.7em; line-height: 1.5; }
.bk-chapter-body > *:first-child { margin-top: 0; }
.bk-dialogue { border-left: 3px solid var(--bk-sage); padding: 0.1em 0 0.1em 1.25em; margin: 0 0 1.4em; color: var(--bk-ink-soft); font-style: italic; }
.bk-signal { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: 0.8em; }
.bk-signal li { display: flex; gap: 0.85em; align-items: flex-start; font-size: 0.97em; line-height: 1.8; }
.bk-lamp { width: 1.1em; height: 1.1em; border-radius: 50%; flex: none; margin-top: 0.44em; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.bk-lamp-green { background: #4e8f45; color: #4e8f45; }
.bk-lamp-amber { background: #c98a12; color: #c98a12; }
.bk-lamp-red   { background: #b34426; color: #b34426; }
html.mc-dark-mode .bk-lamp-green { background: #6fbf63; color: #6fbf63; }
html.mc-dark-mode .bk-lamp-amber { background: #e0aa3c; color: #e0aa3c; }
html.mc-dark-mode .bk-lamp-red   { background: #e07a58; color: #e07a58; }
.bk-steps { margin: 0 0 1.3em; padding-left: 1.3em; }
.bk-steps li { margin-bottom: 0.7em; line-height: 1.8; }
.bk-closer { background: var(--bk-tint); border: 1px solid var(--bk-tint-firm); border-radius: 10px; padding: 1.05em 1.25em; margin: 2em 0 0; font-size: 0.97em; }
.bk-closer strong { color: var(--bk-accent); }
.bk-chapter-foot {
    padding: 1.2em clamp(20px, 4vw, 42px); border-top: 1px solid var(--bk-line);
    background: var(--bk-surface-2); font-family: var(--bk-font-ui); font-size: 0.88rem;
    color: var(--bk-muted); line-height: 1.7;
    display: flex; flex-wrap: wrap; gap: 1em; align-items: center; justify-content: space-between;
}

.bk-quotes { display: grid; gap: 1.05rem; grid-template-columns: 1fr; margin-top: 2rem; }
.bk-quotes > * { min-width: 0; }
@media (min-width: 780px) { .bk-quotes { grid-template-columns: repeat(3, 1fr); } }
.bk-quote { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 14px; padding: clamp(18px, 2.6vw, 27px); box-shadow: var(--bk-shadow-card); display: flex; flex-direction: column; margin: 0; }
.bk-quote-mark { font-family: Georgia, serif; font-size: 2.3rem; line-height: 0.6; color: var(--bk-sage); margin-bottom: 0.4em; }
html.mc-dark-mode .bk-quote-mark { color: var(--bk-sage-deep); }
.bk-quote p { font-size: 0.98em; margin-bottom: 1em; }
.bk-quote cite { margin-top: auto; font-style: normal; font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted); border-top: 1px solid var(--bk-line); padding-top: 0.9em; line-height: 1.7; }

.bk-toc { margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bk-toc > * { min-width: 0; }
@media (min-width: 720px) { .bk-toc { grid-template-columns: 1fr 1fr; } }
.bk-part { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; padding: 1.25em 1.45em; }
.bk-part h3 { font-family: var(--bk-font-ui); font-size: 0.92rem; color: var(--bk-gold); margin-bottom: 0.8em; line-height: 1.6; }
.bk-part ol { margin: 0; padding-left: 1.5em; font-size: 0.93em; color: var(--bk-ink-soft); }
.bk-part li { margin-bottom: 0.42em; line-height: 1.65; }

/* The announcement-list signup. It appears inside the price card and again in the press
   section, so it carries its own top rule rather than relying on where it sits. */
.bk-check label { display: flex; gap: 0.65em; align-items: flex-start; cursor: pointer;
    font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft); line-height: 1.7; }
.bk-check input { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.34em; accent-color: var(--bk-accent); }

.bk-sub-wrap { margin-top: 1.4em; padding-top: 1.3em; border-top: 1px solid var(--bk-line); }
.bk-sub { margin: 0; }
.bk-sub-head {
    font-family: var(--bk-font-ui); font-size: 0.95rem; font-weight: 700;
    color: var(--bk-accent); margin: 0 0 0.7em; line-height: 1.6;
}
.bk-sub-row { display: flex; flex-wrap: wrap; gap: 0.5em; }
.bk-sub-row .bk-input { flex: 1 1 12rem; min-width: 0; }
.bk-sub-row .bk-btn { flex: 0 0 auto; }
.bk-sub-note { font-family: var(--bk-font-ui); font-size: 0.78rem; color: var(--bk-muted);
    line-height: 1.7; margin: 0.75em 0 0; }
.bk-sub .bk-form-msg { margin-top: 0.75em; }

.bk-price-note kbd {
    font-family: var(--bk-font-ui); font-size: 0.92em; font-weight: 600;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line-firm);
    border-bottom-width: 2px; border-radius: 5px; padding: 0.05em 0.42em;
    color: var(--bk-ink); white-space: nowrap;
}

.bk-badges { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1.1em; }
.bk-badges .bk-badge { margin-bottom: 0; }
.bk-badge-eta { background: var(--bk-surface-2); color: var(--bk-gold); border-color: var(--bk-line-firm); }

/* A newspaper clipping is read, not glanced at, so it links to the full-size file and the
   caption sits outside the frame rather than over the picture. The white ground under it
   keeps a scanned page from floating on the section tint in dark mode. */
.bk-clip { margin: 0; }
.bk-clip > a { display: block; border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid var(--bk-line); box-shadow: var(--bk-shadow-card); }
.bk-clip img { display: block; width: 100%; height: auto; }
.bk-clip figcaption { font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted);
    line-height: 1.75; margin-top: 0.9em; }

.bk-split { display: grid; gap: clamp(22px, 4vw, 42px); grid-template-columns: 1fr; align-items: center; }
.bk-split > * { min-width: 0; }
.bk-photo img { width: 100%; }
@media (min-width: 840px) { .bk-split { grid-template-columns: 0.9fr 1.1fr; } }
.bk-photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--bk-line); box-shadow: var(--bk-shadow-card); }

.bk-order { background: var(--bk-surface-2); border-block: 1px solid var(--bk-line); }
.bk-order-grid { display: grid; gap: clamp(22px, 4vw, 38px); grid-template-columns: 1fr; align-items: start; margin-top: 2rem; }
.bk-order-grid > * { min-width: 0; }
@media (min-width: 860px) { .bk-order-grid { grid-template-columns: 0.95fr 1.05fr; } }
.bk-price-card { background: var(--bk-surface); border: 1px solid var(--bk-line-firm); border-radius: 14px; padding: clamp(22px, 3.2vw, 32px); box-shadow: var(--bk-shadow-card); }
@media (min-width: 860px) { .bk-price-card { position: sticky; top: 76px; } }
.bk-price-lines { list-style: none; margin: 0 0 1.2em; padding: 0; font-family: var(--bk-font-ui); font-size: 0.95rem; }
.bk-price-lines li { display: flex; justify-content: space-between; gap: 1em; padding: 0.6em 0; border-bottom: 1px dashed var(--bk-line); line-height: 1.7; }
.bk-price-lines li.bk-total { border-bottom: 0; border-top: 2px solid var(--bk-line-firm); margin-top: 0.3em; padding-top: 0.9em; font-weight: 700; font-size: 1.1rem; color: var(--bk-accent); }
.bk-price-note { font-family: var(--bk-font-ui); font-size: 0.83rem; color: var(--bk-muted); margin: 1em 0 0; line-height: 1.75; }
.bk-price-pending { font-family: var(--bk-font-ui); font-size: 0.92rem; color: var(--bk-ink-soft); background: var(--bk-surface-2); border: 1px dashed var(--bk-line-firm); border-radius: 10px; padding: 1em 1.15em; margin: 0 0 1.2em; line-height: 1.75; }
.bk-how { list-style: none; margin: 0; padding: 0; counter-reset: bkstep; }
.bk-how li { position: relative; padding-left: 3.1em; margin-bottom: 1.45em; counter-increment: bkstep; }
.bk-how li::before {
    content: counter(bkstep); position: absolute; left: 0; top: 0.1em;
    width: 2.05em; height: 2.05em; border-radius: 50%;
    background: var(--bk-accent); color: var(--bk-accent-ink);
    display: grid; place-items: center;
    font-family: var(--bk-font-ui); font-weight: 700; font-size: 0.88rem;
}
.bk-how h3 { margin-bottom: 0.25em; font-size: 1rem; }
.bk-how p { margin: 0; font-size: 0.94em; color: var(--bk-ink-soft); }

.bk-two { display: grid; gap: clamp(20px, 3.5vw, 34px); grid-template-columns: 1fr; }
.bk-two > * { min-width: 0; }
@media (min-width: 800px) { .bk-two { grid-template-columns: 1fr 1fr; } }
.bk-en-block { font-family: 'Merriweather', Georgia, serif; }

.bk-shelf { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2.2rem; }
.bk-shelf > * { min-width: 0; }
@media (min-width: 700px) { .bk-shelf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bk-shelf { grid-template-columns: repeat(3, 1fr); } }
.bk-shelf-card {
    display: flex; flex-direction: column; gap: 1.1rem;
    background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 14px;
    padding: clamp(18px, 2.6vw, 24px); box-shadow: var(--bk-shadow-sm);
    text-decoration: none; color: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bk-shelf-card:hover { transform: translateY(-2px); border-color: var(--bk-tint-firm); box-shadow: var(--bk-shadow-card); }
.bk-shelf-card img { width: 100%; border-radius: 3px 7px 7px 3px; box-shadow: var(--bk-shadow-card); }
.bk-shelf-title { font-family: var(--bk-font-display); font-size: 1.14rem; font-weight: 700; color: var(--bk-accent); margin: 0 0 0.3em; line-height: 1.45; }
.bk-shelf-sub { font-family: var(--bk-font-ui); font-size: 0.82rem; color: var(--bk-gold); margin: 0 0 0.7em; line-height: 1.65; }
.bk-shelf-desc { font-size: 0.93em; color: var(--bk-ink-soft); margin: 0; line-height: 1.75; }
.bk-pill {
    display: inline-flex; align-items: center; font-family: var(--bk-font-ui);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.25em 0.6em; border-radius: 6px; line-height: 1.7;
    background: var(--bk-tint); color: var(--bk-accent); border: 1px solid var(--bk-tint-firm);
}
html.lang-kn .bk-pill { text-transform: none; letter-spacing: 0.02em; font-size: 0.76rem; }

.bk-rec-list { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
.bk-rec-list > * { min-width: 0; }
@media (min-width: 760px) { .bk-rec-list { grid-template-columns: repeat(2, 1fr); } }
.bk-rec { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; padding: clamp(18px, 2.4vw, 24px); box-shadow: var(--bk-shadow-sm); }
.bk-rec-title { font-family: var(--bk-font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.2em; line-height: 1.5; }
.bk-rec-author { font-family: var(--bk-font-ui); font-size: 0.85rem; color: var(--bk-muted); margin: 0 0 0.8em; line-height: 1.7; }
.bk-rec p { font-size: 0.94em; color: var(--bk-ink-soft); }
.bk-disclosure { font-family: var(--bk-font-ui); font-size: 0.85rem; color: var(--bk-ink-soft); background: var(--bk-surface-2); border: 1px solid var(--bk-line); border-radius: 10px; padding: 1em 1.2em; line-height: 1.8; margin: 0 0 1.6em; }

.bk-empty { text-align: center; color: var(--bk-muted); font-family: var(--bk-font-ui); font-size: 0.95rem; padding: 3rem 1rem; line-height: 1.8; }

.bk-footer { background: var(--bk-surface); border-top: 1px solid var(--bk-line); padding-block: clamp(32px, 5vw, 50px); }
.bk-foot-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
.bk-foot-grid > * { min-width: 0; }
@media (min-width: 720px) { .bk-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.bk-footer h4 { font-family: var(--bk-font-ui); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-muted); margin: 0 0 0.9em; line-height: 1.7; }
html.lang-kn .bk-footer h4 { text-transform: none; letter-spacing: 0.02em; font-size: 0.84rem; }
.bk-footer p, .bk-footer li, .bk-footer a { font-size: 0.9rem; color: var(--bk-ink-soft); line-height: 1.8; }
.bk-footer ul { list-style: none; margin: 0; padding: 0; }
.bk-footer li { margin-bottom: 0.45em; }
.bk-disclaimer { background: var(--bk-surface-2); border: 1px solid var(--bk-line); border-radius: 12px; padding: 1.1em 1.3em; margin-bottom: 2rem; font-size: 0.89rem; color: var(--bk-ink-soft); line-height: 1.8; }
.bk-disclaimer strong { color: var(--bk-ink); }
.bk-legal { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--bk-line); font-family: var(--bk-font-ui); font-size: 0.79rem; color: var(--bk-muted); line-height: 1.85; }

.bk-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: color-mix(in srgb, var(--bk-surface) 94%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--bk-line);
    padding: 0.65em clamp(14px, 4vw, 20px);
    display: flex; align-items: center; gap: 1em; justify-content: space-between;
    transform: translateY(115%); transition: transform 0.25s ease;
}
.bk-buybar.bk-buybar-on { transform: translateY(0); }
.bk-buybar-text { font-family: var(--bk-font-ui); font-size: 0.82rem; line-height: 1.45; color: var(--bk-ink); }
.bk-buybar-text b { display: block; color: var(--bk-accent); font-size: 0.98rem; }
.bk-buybar .bk-btn { padding: 0.65em 1.2em; font-size: 0.9rem; flex: none; }
@media (min-width: 900px) { .bk-buybar { display: none; } }
@media (max-width: 899.98px) { body { padding-bottom: 4.4rem; } }

@media print {
    .bk-nav, .bk-buybar, .bk-cta-row, .bk-chapter-foot { display: none !important; }
    body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

[id] { scroll-margin-top: 72px; }

@media (max-width: 760px) {
    .bk-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
        padding-right: 12px;
    }
    .bk-nav-logo img { height: 22px; }
    .bk-lang-opt { padding: 5px 8px; font-size: 0.72rem; }
    .bk-icon-btn { width: 32px; height: 32px; }
    .bk-nav-inner { gap: 6px; }
}

.bk-contact-grid { display: grid; gap: clamp(22px, 3.5vw, 36px); grid-template-columns: 1fr; align-items: start; }
.bk-contact-grid > * { min-width: 0; }
@media (min-width: 880px) { .bk-contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

.bk-field { margin-bottom: 22px; }
.bk-field:last-of-type { margin-bottom: 0; }
.bk-label {
    display: block; font-family: var(--bk-font-ui); font-size: 0.88rem; font-weight: 700;
    color: var(--bk-ink); margin-bottom: 7px; line-height: 1.6;
}
.bk-input, .bk-select {
    width: 100%; font-family: var(--bk-font-ui); font-size: 1rem; line-height: 1.6;
    color: var(--bk-ink); background: var(--bk-bg);
    border: 1.5px solid var(--bk-line-firm); border-radius: 10px;
    padding: 11px 13px; -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bk-input:focus, .bk-select:focus {
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 3px var(--bk-tint);
    outline: none;
}
.bk-input:focus-visible, .bk-select:focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 1px; }
textarea.bk-input { line-height: 1.75; }
.bk-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6e5d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
    padding-right: 38px;
}
html.mc-dark-mode .bk-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0937f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.bk-hint {
    display: block; font-family: var(--bk-font-ui); font-size: 0.82rem;
    color: var(--bk-muted); margin-top: 7px; line-height: 1.7;
}
.bk-action-row { margin-top: 26px; }
.bk-form-msg {
    font-family: var(--bk-font-ui); font-size: 0.92rem; line-height: 1.75;
    margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line);
}
.bk-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.bk-plain-list { list-style: none; margin: 0; padding: 0; }
.bk-plain-list li {
    position: relative; padding-left: 1.15em; margin-bottom: 0.85em;
    font-size: 0.94em; color: var(--bk-ink-soft); line-height: 1.75;
}
.bk-plain-list li:last-child { margin-bottom: 0; }
.bk-plain-list li::before {
    content: ""; position: absolute; left: 0; top: 0.72em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--bk-sage);
}

.bk-or {
    font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted);
    text-align: center; margin: 0.85em 0; line-height: 1.6; position: relative;
}
.bk-or::before, .bk-or::after {
    content: ""; position: absolute; top: 50%; width: calc(50% - 1.6em); height: 1px; background: var(--bk-line);
}
.bk-or::before { left: 0; }
.bk-or::after  { right: 0; }

.bk-readers { display: grid; gap: 1.05rem; grid-template-columns: 1fr; margin-top: 2rem; }
.bk-readers > * { min-width: 0; }
@media (min-width: 720px)  { .bk-readers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bk-readers { grid-template-columns: repeat(3, 1fr); } }
.bk-reader {
    margin: 0; background: var(--bk-surface); border: 1px solid var(--bk-line);
    border-radius: 14px; padding: clamp(18px, 2.5vw, 25px); box-shadow: var(--bk-shadow-card);
    display: flex; flex-direction: column;
}
.bk-reader-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.bk-reader-photo {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    object-fit: cover; background: var(--bk-surface-2);
    border: 2px solid var(--bk-line-firm);
}
.bk-reader-monogram {
    display: grid; place-items: center;
    font-family: var(--bk-font-ui); font-size: 1.02rem; font-weight: 700; line-height: 1;
    color: var(--bk-accent); background: var(--bk-tint); border-color: var(--bk-tint-firm);
}
.bk-reader figcaption { min-width: 0; }
.bk-reader-name {
    display: block; font-family: var(--bk-font-ui); font-size: 0.95rem; font-weight: 700;
    color: var(--bk-ink); line-height: 1.5;
}
.bk-reader-place {
    display: block; font-family: var(--bk-font-ui); font-size: 0.8rem;
    color: var(--bk-muted); line-height: 1.6; margin-top: 2px;
}
.bk-reader-text {
    margin: 0; font-size: 0.97em; line-height: 1.8; color: var(--bk-ink-soft);
    padding-left: 1.05em; border-left: 3px solid var(--bk-sage);
}
.bk-readers-note {
    font-family: var(--bk-font-ui); font-size: 0.83rem; color: var(--bk-muted);
    line-height: 1.8; margin: 1.6rem 0 0; max-width: 46rem;
}

/* CORRECTIONS AND UPDATES, /books/errata.

   Read by somebody holding the printed book open at the page in question, so the entry is
   laid out as the comparison they are actually making: what is on their page, and what it
   should have said, side by side above 700px and stacked below it. The old text is never
   struck through. A line through Kannada crosses the vowel signs that sit above and below
   the consonant, and the reader cannot then check that it is the line they are looking at. */
.bk-errata { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.bk-errata-book {
    font-family: var(--bk-font-display); font-size: 1.15rem; line-height: 1.5;
    margin: 2.4rem 0 1.1rem; color: var(--bk-ink);
}
.bk-errata-book:first-child { margin-top: 0; }
.bk-errata-item {
    background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px;
    padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--bk-shadow-sm);
}
.bk-errata-item:target { border-color: var(--bk-accent); box-shadow: var(--bk-shadow-card); }
.bk-errata-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em; margin: 0 0 0.5em;
}
.bk-errata-date {
    font-family: var(--bk-font-ui); font-size: 0.82rem; color: var(--bk-muted); line-height: 1.7;
}
.bk-errata-meta {
    font-family: var(--bk-font-ui); font-size: 0.87rem; color: var(--bk-ink-soft);
    line-height: 1.8; margin: 0;
}
.bk-errata-sep { color: var(--bk-line-firm); margin: 0 0.45em; }

/* The three kinds are told apart by colour as well as by their words, because a reader
   scanning the page for "was the book wrong" is reading the pills and not the prose. The
   words carry the meaning on their own: colour alone would say nothing to a reader who
   cannot see the difference between crimson and green. */
.bk-pill-update  { background: color-mix(in srgb, var(--bk-sage) 22%, transparent); color: var(--bk-sage-deep); border-color: color-mix(in srgb, var(--bk-sage) 45%, transparent); }
.bk-pill-clarify { background: var(--bk-surface-2); color: var(--bk-gold); border-color: var(--bk-line-firm); }

.bk-errata-change { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin: 1.1em 0 0; }
.bk-errata-change > * { min-width: 0; }
@media (min-width: 700px) { .bk-errata-change { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
.bk-errata-label {
    font-family: var(--bk-font-ui); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-muted);
    margin: 0 0 0.4em; line-height: 1.7;
}
html.lang-kn .bk-errata-label { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }
.bk-errata-change blockquote {
    margin: 0; font-family: var(--bk-font-body); font-size: 0.97rem; line-height: 1.85;
    color: var(--bk-ink-soft); padding: 0.75em 0.95em; border-radius: 9px;
    background: var(--bk-surface-2); border-left: 3px solid var(--bk-line-firm);
}
.bk-errata-is blockquote {
    border-left-color: var(--bk-sem-success);
    color: var(--bk-ink);
}
.bk-errata-note {
    font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft);
    line-height: 1.8; margin: 1.1em 0 0;
}
.bk-errata-source {
    font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted);
    line-height: 1.8; margin: 0.6em 0 0;
}

/* THE MEDICAL GLOSSARY, /books/glossary.

   A definition list and not a grid of cards. The reader is looking one word up, not
   comparing thirty five, and a card gives each entry a weight that makes scanning harder
   rather than easier. */
.bk-gloss-search { max-width: 30rem; margin: 0 0 1.4rem; }
.bk-gloss-search .bk-hint { margin-top: 0.5em; }
.bk-gloss-count {
    font-family: var(--bk-font-ui); font-size: 0.85rem; color: var(--bk-muted);
    line-height: 1.8; margin: 0 0 1.2rem;
}
.bk-gloss { margin: 0; padding: 0; }
.bk-gloss-item {
    padding: 1.05em 0; border-top: 1px solid var(--bk-line);
}
.bk-gloss-item:first-child { border-top: none; padding-top: 0; }
.bk-gloss-item:target {
    background: var(--bk-tint); border-radius: 10px;
    padding-left: 0.9em; padding-right: 0.9em; border-top-color: transparent;
}
.bk-gloss-term {
    font-family: var(--bk-font-display); font-weight: 700; font-size: 1.02rem;
    line-height: 1.6; color: var(--bk-ink); margin: 0 0 0.3em;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em;
}
.bk-gloss-en {
    font-family: var(--bk-font-ui); font-weight: 600; font-size: 0.83rem;
    color: var(--bk-muted); line-height: 1.7;
}
/* Shown only on hover or keyboard focus, and never hidden from a keyboard: a control that
   appears on hover alone does not exist on a phone or to somebody tabbing through. */
.bk-gloss-anchor {
    font-family: var(--bk-font-ui); font-size: 0.85rem; color: var(--bk-line-firm);
    text-decoration: none; opacity: 0; transition: opacity 120ms ease;
}
.bk-gloss-item:hover .bk-gloss-anchor,
.bk-gloss-anchor:focus-visible { opacity: 1; color: var(--bk-accent); }
@media (hover: none) { .bk-gloss-anchor { opacity: 1; } }
.bk-gloss-def {
    margin: 0; font-size: 0.97rem; line-height: 1.85; color: var(--bk-ink-soft);
}
.bk-gloss-none {
    font-family: var(--bk-font-ui); font-size: 0.95rem; color: var(--bk-muted);
    line-height: 1.8; padding: 2rem 0 0; max-width: 40rem;
}

/* The line under the contents box naming the two appendices that also live on the site.
   Set apart from the box above it rather than inside it: the box is what the printed book
   contains, and this is a statement about what happens after it is printed. */
.bk-toc-online {
    font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft);
    line-height: 1.9; margin: 1.6rem 0 0; max-width: 48rem;
    padding-left: 1.05em; border-left: 3px solid var(--bk-sage);
}

/* READER RESOURCE SHEETS, /books/resources.

   The hub reuses .bk-rec-list and .bk-rec, because a resource card and a recommended book
   card are the same object to a reader: a title, a sentence about who it is for, and a
   place it leads. A second card component would be a second thing to keep in step. */
.bk-res-card { display: block; text-decoration: none; }
.bk-res-card:hover { border-color: var(--bk-line-firm); box-shadow: var(--bk-shadow-card); }
.bk-res-card .bk-pill { margin-bottom: 0.7em; }
.bk-pill-urgent { background: color-mix(in srgb, var(--bk-sem-danger) 12%, transparent); color: var(--bk-sem-danger); border-color: color-mix(in srgb, var(--bk-sem-danger) 30%, transparent); }
html.mc-dark-mode .bk-pill-urgent { color: #f0a48c; border-color: rgba(240,164,140,0.35); background: rgba(240,164,140,0.12); }
.bk-res-urgent { border-left: 3px solid var(--bk-sem-danger); }
.bk-res-blurb { font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft); line-height: 1.85; margin: 0.4em 0 0; }
.bk-res-from  { font-family: var(--bk-font-ui); font-size: 0.78rem; color: var(--bk-muted); line-height: 1.7; margin: 0.7em 0 0; }

.bk-sheet-head .bk-sheet-from {
    font-family: var(--bk-font-ui); font-size: 0.87rem; color: var(--bk-muted);
    line-height: 1.8; margin: 0.6em 0 0; max-width: 44rem;
}
.bk-sheet-actions { margin-top: 1.4rem; }
.bk-sheet-lede { font-size: 1.03rem; line-height: 1.9; }
.bk-sheet-body h2 {
    font-family: var(--bk-font-display); font-size: 1.12rem; line-height: 1.6;
    margin: 2.1rem 0 0.9rem; color: var(--bk-ink);
}
.bk-sheet-steps > li { margin-bottom: 1.15em; }
.bk-sheet-steps .bk-hint { margin-top: 0.4em; }

/* The two lines this sheet exists for. Boxed so that an eye moving fast down the page
   stops here, and marked with a rule rather than a colour alone. */
.bk-sheet-critical {
    background: var(--bk-surface-2); border: 1px solid var(--bk-line);
    border-left: 4px solid var(--bk-sem-danger); border-radius: 10px;
    padding: 1.15em 1.3em; margin: 1rem 0 0;
}
.bk-sheet-critical .bk-signal { margin-bottom: 0; }

/* Screen only. It is the sheet's own address, printed at the foot of the paper copy so a
   photocopy passed round a ward still says where the current version lives. */
.bk-sheet-print-foot { display: none; }

/* PRINTING A SHEET.

   A reader who prints this is doing it to put it on a fridge or in a handbag, so the page
   is reset to black on white whatever theme they were reading in: a dark page costs a
   cartridge and reads worse on paper. Everything that cannot be used on paper is removed,
   which is the navigation, the footer, the buttons and the sticky order bar. */
@media print {
    .bk-nav, .bk-footer, .bk-buybar, .bk-skip,
    .bk-sheet-actions, .bk-sheet-tail, .bk-disclaimer { display: none !important; }

    html, body, #books-app {
        background: #fff !important; color: #000 !important;
    }
    .bk-hero, .bk-section, .bk-section-alt { background: #fff !important; padding-block: 0 !important; }
    .bk-wrap { max-width: none !important; padding: 0 !important; }
    .bk-sheet-head { padding-top: 0 !important; }
    .bk-sheet h1 { font-size: 1.5rem !important; margin: 0 0 0.4rem; }
    .bk-sheet-body h2 { margin-top: 1.2rem; page-break-after: avoid; break-after: avoid; }

    /* A step split across a page break is a step somebody misses. */
    .bk-sheet-steps > li, .bk-signal li, .bk-sheet-critical {
        page-break-inside: avoid; break-inside: avoid;
    }
    .bk-sheet-critical { border: 1.5pt solid #000 !important; background: #fff !important; }
    .bk-lamp { box-shadow: none !important; border: 1pt solid #000; }

    .bk-sheet-print-foot {
        display: block; margin-top: 1.4rem; padding-top: 0.5rem;
        border-top: 0.5pt solid #999; font-size: 9pt; color: #444;
    }
}

/* ── THE PRINT MASTHEAD ────────────────────────────────────────────────────────────────
   Absent from the screen entirely. It is the part of a printed sheet that says whose it is
   and where the living version lives, and on screen the browser's own address bar and the
   navigation already say both. */
.bk-sheet-masthead { display: none; }

/* ── SHEET CONTROLS ─────────────────────────────────────────────────────────────────── */
.bk-sheet-opt { font-family: var(--bk-font-ui); font-size: 0.88rem; color: var(--bk-ink-soft); line-height: 1.8; margin: 0.9em 0 0; }
.bk-sheet-opt label { display: inline-flex; align-items: flex-start; gap: 0.55em; cursor: pointer; }
.bk-sheet-opt input { margin-top: 0.35em; flex: none; }
.bk-sheet-privacy {
    font-family: var(--bk-font-ui); font-size: 0.82rem; color: var(--bk-muted);
    line-height: 1.8; margin: 0.7em 0 0; max-width: 44rem;
    padding-left: 0.9em; border-left: 2px solid var(--bk-line);
}
.bk-sheet-h2 { font-family: var(--bk-font-display); font-size: 1.12rem; line-height: 1.6; margin: 2.2rem 0 0.9rem; color: var(--bk-ink); }

/* ── APPENDIX 1: THE YEARLY CHECK LIST ──────────────────────────────────────────────
   Cards and not a table. Four columns of Kannada prose at 430px is a table nobody can
   read, and this is the sheet most likely to be opened on a phone in a waiting room. */
.bk-audit { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.bk-audit-item {
    background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px;
    padding: clamp(15px, 2vw, 20px); box-shadow: var(--bk-shadow-sm);
}
.bk-audit-name { font-family: var(--bk-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.6; margin: 0 0 0.6em; color: var(--bk-ink); }
.bk-audit-facts { margin: 0; display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bk-audit-facts { grid-template-columns: 0.9fr 1.1fr 1.3fr; gap: 1rem; } }
.bk-audit-facts > div { min-width: 0; }
.bk-audit-facts dt {
    font-family: var(--bk-font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--bk-muted); line-height: 1.7; margin-bottom: 0.15em;
}
html.lang-kn .bk-audit-facts dt { text-transform: none; letter-spacing: 0.02em; font-size: 0.78rem; }
.bk-audit-facts dd { margin: 0; font-size: 0.92rem; line-height: 1.8; color: var(--bk-ink-soft); }
.bk-audit-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.9em; margin-top: 1em; padding-top: 0.9em; border-top: 1px dashed var(--bk-line); }
.bk-audit-track .bk-label { margin: 0; }
.bk-audit-date { max-width: 12rem; }
.bk-audit-status { font-family: var(--bk-font-ui); font-size: 0.85rem; font-weight: 700; line-height: 1.7; margin: 0; }
.bk-audit-status[data-empty] { display: none; }
.bk-audit-ok   { color: var(--bk-sem-success); }
.bk-audit-soon { color: var(--bk-gold); }
.bk-audit-over { color: var(--bk-sem-danger); }
.bk-audit-summary {
    font-family: var(--bk-font-ui); font-size: 0.95rem; font-weight: 700; line-height: 1.8;
    margin: 0 0 1.2rem; padding: 0.8em 1em; border-radius: 10px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line);
}

/* ── APPENDIX 3: TRAFFIC LIGHT AND SMART PLATE ─────────────────────────────────────── */
.bk-plate-search { max-width: 26rem; margin: 0 0 1.6rem; }
.bk-bands { display: grid; gap: 1rem; }
.bk-band { background: var(--bk-surface); border: 1px solid var(--bk-line); border-left-width: 4px; border-radius: 12px; padding: clamp(15px, 2vw, 20px); }
.bk-band-green { border-left-color: #4e8f45; }
.bk-band-amber { border-left-color: #c98a12; }
.bk-band-red   { border-left-color: #b34426; }
.bk-band-head { display: flex; gap: 0.75em; align-items: flex-start; margin: 0 0 0.9em; font-size: 0.97rem; line-height: 1.8; color: var(--bk-ink); }
.bk-foods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45em; }
.bk-food {
    font-size: 0.9rem; line-height: 1.75; padding: 0.3em 0.7em; border-radius: 999px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line); color: var(--bk-ink-soft);
}
.bk-food-hit { background: var(--bk-tint); border-color: var(--bk-tint-firm); color: var(--bk-accent); font-weight: 700; }
.bk-band-rule { font-family: var(--bk-font-ui); font-size: 0.88rem; font-weight: 700; color: var(--bk-ink); line-height: 1.8; margin: 0.9em 0 0; }
.bk-plate-wrap { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 700px) { .bk-plate-wrap { grid-template-columns: 220px 1fr; gap: 2rem; } }
.bk-plate { width: 100%; max-width: 220px; height: auto; color: var(--bk-line-firm); justify-self: center; }
.bk-plate-key { margin: 0; }
.bk-lamp-grain { background: #8d6b3f; color: #8d6b3f; }
html.mc-dark-mode .bk-lamp-grain { background: #c49a68; color: #c49a68; }

/* ── APPENDIX 4: THE LOGBOOK ────────────────────────────────────────────────────────
   The grid keeps its shape and scrolls inside its own box. Reading DOWN a column is the
   whole point of a logbook, and it is the part the book says people miss. */
.bk-log-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--bk-line); border-radius: 10px; background: var(--bk-surface); }
.bk-log { border-collapse: collapse; width: 100%; min-width: 780px; }
.bk-log th, .bk-log td { border: 1px solid var(--bk-line); padding: 0; vertical-align: middle; }
.bk-log th {
    font-family: var(--bk-font-ui); font-size: 0.74rem; font-weight: 700; line-height: 1.55;
    color: var(--bk-ink); background: var(--bk-surface-2); padding: 0.6em 0.5em; text-align: left;
}
.bk-log-in {
    width: 100%; border: none; background: transparent; color: var(--bk-ink);
    font-family: var(--bk-font-ui); font-size: 0.88rem; line-height: 1.7; padding: 0.5em 0.55em;
}
.bk-log-in:focus { outline: 2px solid var(--bk-focus); outline-offset: -2px; }
.bk-log-day  { width: 5.5rem; }
.bk-log-num  { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.bk-log-med  { min-width: 9rem; }
.bk-log-note { min-width: 12rem; }
.bk-log-in-range { color: var(--bk-sem-success); font-weight: 700; }
.bk-log-high     { color: var(--bk-sem-danger); font-weight: 700; }
.bk-log-low      { color: var(--bk-sem-danger); font-weight: 700; text-decoration: underline; }
.bk-log-summary {
    font-family: var(--bk-font-ui); font-size: 0.92rem; font-weight: 700; line-height: 1.8;
    margin: 0 0 1rem; padding: 0.75em 1em; border-radius: 10px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line); color: var(--bk-ink);
}
.bk-log-example { font-family: var(--bk-font-ui); font-size: 0.83rem; color: var(--bk-muted); line-height: 1.8; margin: 0 0 0.6rem; }
.bk-log-example-tag { font-weight: 700; color: var(--bk-ink-soft); margin-right: 0.5em; }

/* ── APPENDIX 5: THE WALLET CARD ──────────────────────────────────────────────────── */
.bk-card-how { font-family: var(--bk-font-ui); font-size: 0.88rem; color: var(--bk-ink-soft); line-height: 1.85; margin: 0 0 1.1rem; max-width: 44rem; }
.bk-idcard {
    max-width: 30rem; background: var(--bk-surface); color: var(--bk-ink);
    border: 2px dashed var(--bk-line-firm); border-radius: 10px; padding: clamp(16px, 2.2vw, 22px);
}
.bk-idcard-head { font-family: var(--bk-font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bk-muted); line-height: 1.7; margin: 0 0 0.5em; }
.bk-idcard-shout { font-family: var(--bk-font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.55; margin: 0 0 1em; color: var(--bk-sem-danger); }
.bk-idcard-rows { display: grid; gap: 0.65rem; }
.bk-idcard-row { margin: 0; display: grid; gap: 0.2em; }
.bk-idcard-row label, .bk-idcard-label { font-family: var(--bk-font-ui); font-size: 0.76rem; font-weight: 700; color: var(--bk-muted); line-height: 1.7; }
.bk-idcard-split { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.bk-idcard-split > span { display: grid; gap: 0.2em; min-width: 0; }
.bk-idcard-in {
    width: 100%; border: none; border-bottom: 1px solid var(--bk-line-firm); background: transparent;
    color: var(--bk-ink); font-family: var(--bk-font-ui); font-size: 0.92rem; line-height: 1.9; padding: 0.1em 0.15em;
}
.bk-idcard-in:focus { outline: none; border-bottom-color: var(--bk-accent); border-bottom-width: 2px; }
.bk-idcard-checks { display: flex; flex-wrap: wrap; gap: 0.4em 1.1em; font-size: 0.9rem; line-height: 1.8; }
.bk-idcard-checks label { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 400; font-size: 0.9rem; color: var(--bk-ink-soft); }
.bk-idcard-notice { margin-top: 1.1em; padding-top: 0.9em; border-top: 1px solid var(--bk-line); }
.bk-idcard-notice p { font-size: 0.83rem; line-height: 1.8; color: var(--bk-ink-soft); margin: 0 0 0.5em; }
.bk-idcard-notice p:last-child { margin-bottom: 0; }
.bk-idcard-quote { font-family: var(--bk-font-display); font-size: 0.85rem; font-style: italic; color: var(--bk-muted); line-height: 1.8; margin: 1em 0 0; }

/* ── APPENDIX 6: THE RISK SCORE ─────────────────────────────────────────────────────── */
.bk-idrs { display: grid; gap: 1rem; margin-top: 1.2rem; }
.bk-idrs-q { border: 1px solid var(--bk-line); border-radius: 12px; padding: clamp(14px, 2vw, 18px); margin: 0; background: var(--bk-surface); }
.bk-idrs-q legend { font-family: var(--bk-font-display); font-weight: 700; font-size: 1rem; line-height: 1.6; color: var(--bk-ink); padding: 0 0.4em; }
.bk-idrs-opt { display: flex; align-items: flex-start; gap: 0.65em; padding: 0.4em 0; font-size: 0.94rem; line-height: 1.8; color: var(--bk-ink-soft); cursor: pointer; }
.bk-idrs-opt input { margin-top: 0.45em; flex: none; }
.bk-idrs-opt > span { flex: 1 1 auto; min-width: 0; }
.bk-idrs-pts { font-family: var(--bk-font-ui); font-size: 0.82rem; font-weight: 700; color: var(--bk-muted); flex: none; font-variant-numeric: tabular-nums; }
.bk-idrs-total {
    font-family: var(--bk-font-ui); font-size: 1rem; font-weight: 700; line-height: 1.8;
    margin: 1.2rem 0; padding: 0.75em 1em; border-radius: 10px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line); color: var(--bk-ink);
}
.bk-idrs-total b { font-size: 1.35rem; margin: 0 0.15em 0 0.5em; font-variant-numeric: tabular-nums; }
.bk-idrs-bands li { opacity: 0.62; transition: opacity 120ms ease; }
.bk-idrs-bands li.bk-idrs-hit { opacity: 1; }
.bk-idrs-tool { font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft); line-height: 1.85; margin: 1.6rem 0 0; max-width: 44rem; }

/* ── WHAT THE SHEETS LOOK LIKE ON PAPER ─────────────────────────────────────────────
   Every field is printed as what it holds on a line, not as a control: a box with a border
   and a focus ring is a screen idea, and on paper it wastes the ink and the space that the
   handwriting needs. */
@media print {

    /* THE PALETTE IS REDEFINED FOR PAPER RATHER THAN OVERRIDDEN RULE BY RULE.

       Every colour in this stylesheet comes from a token, so one block of token values
       turns the whole section into ink. Overriding the rules one at a time was the first
       attempt and it missed a dozen of them: a sheet printed from a dark-mode session came
       out with pale grey body text, because the dark palette lightens --bk-ink-soft on
       purpose and nothing had told it not to. Redefining the tokens cannot miss a rule
       that has not been thought of yet.

       Both the light and the dark selectors are covered, since the reader prints from
       whichever they were reading in and the paper does not care which that was. */
    :root,
    html.mc-dark-mode,
    #books-app.mc-dark-mode {
        --bk-bg:        #ffffff;
        --bk-surface:   #ffffff;
        --bk-surface-2: #ffffff;
        --bk-ink:       #000000;
        --bk-ink-soft:  #1f1f1f;
        --bk-muted:     #444444;
        --bk-line:      #9a9a9a;
        --bk-line-firm: #6a6a6a;
        --bk-accent:     #000000;
        --bk-accent-ink: #ffffff;
        --bk-tint:       transparent;
        --bk-tint-firm:  #9a9a9a;
        --bk-gold:       #5a4a00;
        --bk-sage:       #6a7358;
        --bk-sage-deep:  #3f4a30;
        --bk-sem-danger:  #7d2410;
        --bk-sem-success: #1f5a1a;
        --bk-shadow-sm: none;
        --bk-shadow-card: none;
        --bk-shadow-lift: none;
    }

    /* A grid container is laid out as one block by Chromium's paginator, so a grid of
       fourteen cards puts one card on a page and the rest after the break. Stacked as
       blocks they flow and fill the paper, which is the whole point of printing them. */
    .bk-audit, .bk-bands, .bk-idrs, .bk-plate-wrap { display: block !important; }
    .bk-audit-item, .bk-band, .bk-idrs-q { margin-bottom: 6pt; }

    /* The grids INSIDE a card stay grids. They never have to break, because the card
       around them carries break-inside: avoid, and flattening them to blocks was the
       first fix here: it made every card three lines taller and put one check on a page
       that had room for four. */
    .bk-audit-facts { display: grid !important; grid-template-columns: 0.9fr 1.1fr 1.3fr; gap: 8pt; }
    .bk-idcard-rows { display: grid !important; gap: 5pt; }

    /* A focus ring on paper is a blue box around whichever field the reader happened to
       be typing in when they pressed print. */
    .bk-input:focus, .bk-log-in:focus, .bk-idcard-in:focus,
    .bk-sheet input:focus, .bk-sheet select:focus, .bk-sheet textarea:focus {
        outline: none !important; box-shadow: none !important;
    }

    /* A ticked box prints in the browser's blue unless it is told otherwise, which on a
       photocopied card is a grey square that could be either state. */
    .bk-sheet input[type="checkbox"], .bk-sheet input[type="radio"] { accent-color: #000; }

    /* The picker button is a control, and a control is not a thing on paper. */
    input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }
    input[type="date"] { min-width: 0; }

    .bk-sheet-masthead {
        display: flex; align-items: center; gap: 12pt; justify-content: space-between;
        border-bottom: 1pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt;
    }
    .bk-sheet-mast-logo { width: 108pt; height: auto; flex: none; }
    .bk-sheet-mast-sig { flex: 1 1 auto; min-width: 0; text-align: center; }
    .bk-sheet-mast-title { font-family: var(--bk-font-display); font-size: 13pt; font-weight: 700; margin: 0; line-height: 1.4; color: #000; }
    .bk-sheet-mast-by { font-family: var(--bk-font-ui); font-size: 8.5pt; margin: 2pt 0 0; line-height: 1.4; color: #333; }
    /* 74pt across for a version 4 code with its four-module quiet zone: 41 modules over
       66pt is about 0.57mm a module, comfortably above the 0.4mm where phone cameras and
       photocopies start to struggle. Shrinking this box is how a printed code stops
       scanning without anybody noticing on screen. */
    .bk-sheet-mast-qr { flex: none; width: 74pt; text-align: center; }
    .bk-sheet-mast-qr svg { width: 66pt; height: 66pt; display: block; margin: 0 auto; }
    .bk-sheet-mast-url { display: block; font-family: var(--bk-font-ui); font-size: 5.6pt; color: #444; line-height: 1.3; word-break: break-all; }

    .bk-sheet-opt, .bk-sheet-privacy, .bk-plate-search, .bk-log-example-tag,
    .bk-idrs-tool, .bk-card-how { display: none !important; }

    .bk-audit-item, .bk-band, .bk-idrs-q, .bk-idcard, .bk-log tr {
        page-break-inside: avoid; break-inside: avoid;
    }
    .bk-audit-item, .bk-band, .bk-idrs-q {
        background: #fff !important; border: 0.5pt solid #666 !important; box-shadow: none !important;
    }
    .bk-audit-summary, .bk-log-summary, .bk-idrs-total { background: #fff !important; border: 0.5pt solid #666 !important; color: #000 !important; }
    .bk-food { background: #fff !important; border: 0.5pt solid #666 !important; color: #000 !important; }

    /* An input prints as a ruled line with whatever is on it. */
    .bk-input, .bk-log-in, .bk-idcard-in {
        border: none !important; border-bottom: 0.5pt solid #999 !important;
        background: #fff !important; color: #000 !important; border-radius: 0 !important;
        box-shadow: none !important; -webkit-appearance: none; appearance: none;
    }
    .bk-log-in { border-bottom: none !important; font-size: 8.5pt !important; padding: 3pt 4pt !important; }
    .bk-log-in-range, .bk-log-high, .bk-log-low { color: #000 !important; text-decoration: none !important; }
    .bk-log-scroll { overflow: visible !important; border: none !important; }
    .bk-log { min-width: 0 !important; width: 100% !important; }
    .bk-log th, .bk-log td { border: 0.5pt solid #666 !important; }
    .bk-log th { background: #fff !important; color: #000 !important; font-size: 7.5pt !important; padding: 4pt !important; }
    .bk-log thead { display: table-header-group; }

    .bk-idcard { border: 1pt dashed #000 !important; max-width: 92mm; padding: 6mm !important; }
    .bk-idcard-shout { color: #000 !important; }

    /* INK, NOT THEME. The section's crimson is a screen colour: printed it is a pale pink
       heading, and printed from a dark-mode session it is paler still, because the dark
       palette lightens the accent on purpose. Everything structural goes to black.

       The three lamps keep their colours but in darker versions, chosen so that they are
       also told apart by how dark they are: most of these sheets will be photocopied, and
       a photocopier turns green and red into the same grey unless they start at different
       weights. The words beside each lamp carry the meaning regardless. */
    .bk-sheet h1, .bk-sheet h2, .bk-sheet-h2, .bk-sheet-body h2,
    .bk-eyebrow, .bk-audit-name, .bk-idrs-q legend, .bk-log-summary,
    .bk-audit-summary, .bk-idrs-total, .bk-band-rule, .bk-idcard-head {
        color: #000 !important;
    }
    .bk-sheet-from, .bk-idcard-notice p, .bk-idcard-quote, .bk-log-example { color: #333 !important; }
    .bk-lamp-green { background: #1f5a1a !important; color: #1f5a1a !important; }
    .bk-lamp-amber { background: #8a5c00 !important; color: #8a5c00 !important; }
    .bk-lamp-red   { background: #7d2410 !important; color: #7d2410 !important; }
    .bk-lamp-grain { background: #5c4527 !important; color: #5c4527 !important; }
    .bk-audit-status { color: #000 !important; }
    .bk-idrs-bands li { opacity: 1 !important; }
    .bk-plate { max-width: 46mm; }
}

/* ── THE APPENDIX INDEX, /books/<slug>/appendix ─────────────────────────────────────
   Three across on a wide screen and two on a tablet, so the six sit as a 3x2 block and
   are read as a set rather than a list. One column on a phone: three columns of Kannada
   at 430px is six cards nobody opens. */
.bk-ap-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
.bk-ap-grid > * { min-width: 0; }
@media (min-width: 620px) { .bk-ap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .bk-ap-grid { grid-template-columns: repeat(3, 1fr); } }

.bk-ap-card {
    position: relative; display: flex; flex-direction: column; text-decoration: none;
    background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 14px;
    padding: clamp(18px, 2.3vw, 24px); box-shadow: var(--bk-shadow-sm);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    overflow: hidden;
}
.bk-ap-card:hover { border-color: var(--bk-tint-firm); box-shadow: var(--bk-shadow-card); transform: translateY(-2px); }
.bk-ap-card:focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bk-ap-card { transition: none; } .bk-ap-card:hover { transform: none; } }

/* The number, set large and pale behind the card's own text. It is decoration doing a
   small job: six cards in a grid are told apart faster by a numeral than by reading two
   lines of Kannada in each, and the label under it says the same thing in words for
   anybody who cannot see it. */
.bk-ap-num {
    position: absolute; top: -0.18em; right: 0.12em; margin: 0;
    font-family: var(--bk-font-display); font-weight: 700; font-size: 5.2rem; line-height: 1;
    color: var(--bk-tint); pointer-events: none; user-select: none;
}
.bk-ap-from {
    font-family: var(--bk-font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--bk-accent); line-height: 1.7; margin: 0 0 0.5em;
}
html.lang-kn .bk-ap-from { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }
.bk-ap-title {
    font-family: var(--bk-font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.55;
    color: var(--bk-ink); margin: 0 0 0.5em;
}
.bk-ap-blurb {
    font-family: var(--bk-font-ui); font-size: 0.88rem; color: var(--bk-ink-soft);
    line-height: 1.85; margin: 0 0 1.1em; flex: 1 1 auto;
}
.bk-ap-go {
    font-family: var(--bk-font-ui); font-size: 0.85rem; font-weight: 700; color: var(--bk-accent);
    line-height: 1.7; margin: 0;
}
.bk-ap-card:hover .bk-ap-go { text-decoration: underline; }

.bk-ap-notice {
    font-family: var(--bk-font-ui); font-size: 0.88rem; color: var(--bk-ink-soft); line-height: 1.9;
    margin: 1.4rem 0 0; max-width: 46rem; padding: 0.9em 1.1em; border-radius: 10px;
    background: var(--bk-surface-2); border: 1px solid var(--bk-line); border-left: 3px solid var(--bk-gold);
}
.bk-ap-notice code { font-size: 0.9em; background: var(--bk-surface); padding: 0.1em 0.35em; border-radius: 4px; border: 1px solid var(--bk-line); }

/* ── PASSING IT ON ──────────────────────────────────────────────────────────────────── */
.bk-share-row { display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 1.6rem; }
.bk-share-said {
    font-family: var(--bk-font-ui); font-size: 0.88rem; font-weight: 700;
    color: var(--bk-sem-success); line-height: 1.8; margin: 0.9em 0 0;
}
.bk-share-qr {
    margin: 1.4rem 0 0; max-width: 15rem; padding: 0.9em;
    background: #fff; border: 1px solid var(--bk-line); border-radius: 12px;
}
.bk-share-qr svg { display: block; width: 100%; height: auto; }
.bk-share-qr figcaption {
    font-family: var(--bk-font-ui); font-size: 0.8rem; color: var(--bk-muted);
    line-height: 1.7; margin-top: 0.7em;
}

/* The count of copies readers have sent to a clinic. Set apart from the paragraph above it,
   because it is a fact about other people rather than more of the ask. */
.bk-sponsor-count {
    font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink);
    line-height: 1.85; margin: 0 0 0.9em; padding: 0.6em 0.85em; border-radius: 8px;
    background: var(--bk-tint); border: 1px solid var(--bk-tint-firm);
}

/* Neither belongs on paper: a printed sheet cannot be tapped, and a QR to the sales page is
   not what somebody printing a resource sheet wants on it. */
@media print {
    #share, .bk-share-row, .bk-share-qr, .bk-share-said { display: none !important; }
}

/* ── TOOLS THAT GO WITH THE BOOK ────────────────────────────────────────────────────
   Two across, not four: the reason line under each name is the part that decides whether
   a reader presses it, and four columns leaves no room to read one. */
.bk-tool-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
.bk-tool-grid > * { min-width: 0; }
@media (min-width: 720px) { .bk-tool-grid { grid-template-columns: repeat(2, 1fr); } }
.bk-tool-card {
    display: block; text-decoration: none; background: var(--bk-surface);
    border: 1px solid var(--bk-line); border-left: 3px solid var(--bk-sage);
    border-radius: 12px; padding: clamp(15px, 2vw, 20px); box-shadow: var(--bk-shadow-sm);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.bk-tool-card:hover { border-color: var(--bk-line-firm); border-left-color: var(--bk-accent); box-shadow: var(--bk-shadow-card); }
.bk-tool-card:focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
.bk-tool-name {
    font-family: var(--bk-font-display); font-weight: 700; font-size: 1rem; line-height: 1.55;
    color: var(--bk-accent); margin: 0 0 0.35em;
}
.bk-tool-why {
    font-family: var(--bk-font-ui); font-size: 0.87rem; color: var(--bk-ink-soft);
    line-height: 1.85; margin: 0;
}
.bk-tool-more {
    font-family: var(--bk-font-ui); font-size: 0.88rem; color: var(--bk-muted);
    line-height: 1.85; margin: 1.3rem 0 0; max-width: 46rem;
}
.bk-sheet-tool {
    font-family: var(--bk-font-ui); font-size: 0.9rem; color: var(--bk-ink-soft);
    line-height: 1.85; margin: 0 0 1.1em;
}

@media print { #tools { display: none !important; } }

/* ── ಮನೆಯವರಿಗೊಂದು ಪುಟ ────────────────────────────────────────────────────────────────
   Numbered, because the book numbers them, and because a person reading this is usually
   looking for the one point they half remember rather than reading it through again. */
.bk-family { list-style: none; counter-reset: fam; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.bk-family-item {
    counter-increment: fam; position: relative; padding-left: 2.6em;
    background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px;
    padding-top: clamp(14px, 1.8vw, 18px); padding-bottom: clamp(14px, 1.8vw, 18px); padding-right: clamp(16px, 2vw, 20px);
}
.bk-family-item::before {
    content: counter(fam); position: absolute; left: 0.85em; top: clamp(14px, 1.8vw, 18px);
    font-family: var(--bk-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.5;
    color: var(--bk-accent);
}
.bk-family-head { font-family: var(--bk-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.6; color: var(--bk-ink); margin: 0 0 0.3em; }
.bk-family-body { font-size: 0.97rem; line-height: 1.85; color: var(--bk-ink-soft); margin: 0; }
@media print {
    .bk-family { display: block !important; }
    .bk-family-item { margin-bottom: 5pt; page-break-inside: avoid; break-inside: avoid; }
}