/*
Theme Name: Book Kit
Theme URI: https://theaisearchbook.com
Author: Diego Herrera
Description: A small block theme for selling one book and publishing answers. Everything a page is made of is a WordPress block, so it can be edited in the editor. The book's colours, type and logo are settings.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: book-kit
*/

/* Colours come from theme.json. These short names keep the rest of this file readable. */
:root {
	--navy: var(--wp--preset--color--navy); --navy2: var(--wp--preset--color--navy-light); --line: var(--wp--preset--color--line);
	--yellow: var(--wp--preset--color--yellow); --red: var(--wp--preset--color--red); --pale: var(--wp--preset--color--pale);
	--mist: var(--wp--preset--color--mist); --ink: var(--wp--preset--color--ink); --grey: var(--wp--preset--color--grey);
	--rule: var(--wp--preset--color--rule); --tint: var(--wp--preset--color--tint);
	--display: var(--wp--preset--font-family--display); --mono: var(--wp--preset--font-family--mono);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { -webkit-font-smoothing: antialiased; }
/* No word left alone on a last line: headings share their words evenly between lines, and text keeps its last word company. */
h1, h2, h3, h4, summary { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- small helpers, available as block styles in the editor ---------- */
.is-style-mono, .bk-mono { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; line-height: 1.5; }
.is-style-kicker { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--red); margin-bottom: 14px; }
.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
mark.has-inline-color { padding: 0 0.12em; border-radius: 0.08em; }

/* ---------- buttons: flat colour and a solid step of shadow ---------- */
.wp-block-button__link, .wp-element-button { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22); transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease); white-space: nowrap; }
.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, 0.22); }
.wp-block-button__link:active, .wp-element-button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22); }
.wp-block-button.is-style-dark .wp-block-button__link { background: var(--navy); color: #fff; }
.wp-block-button.is-style-small .wp-block-button__link { font-size: 15.5px; padding: 11px 18px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.wp-block-button.is-style-plain .wp-block-button__link { background: none; color: inherit; box-shadow: none; padding: 0 0 2px 0; border-radius: 0; border-bottom: 3px solid var(--yellow); font-size: 17px; }
.wp-block-button.is-style-plain .wp-block-button__link:hover { transform: none; color: var(--yellow); }

/* ---------- the logo: a paragraph, with "AI" highlighted. The highlight is drawn as a speech bubble ---------- */
/* The three gaps are equal to the eye: 0.21 of the type size, measured ink to ink (see mockups/brand.html). */
.bk-logo { font-family: var(--display); text-transform: uppercase; font-size: 23px; line-height: 1.15; letter-spacing: 0.01em; margin: 0; white-space: nowrap; word-spacing: -0.083em; }
.bk-logo a { color: #fff; text-decoration: none; }
.bk-logo mark { position: relative; display: inline-block; background: var(--yellow) !important; color: var(--navy) !important; padding: 0.03em 0.27em 0 0.27em; margin: 0 0.049em 0 0.047em; border-radius: 0.22em; transition: transform 0.25s var(--ease); }
.bk-logo mark::after { content: ""; position: absolute; right: 0.26em; bottom: -0.25em; border-top: 0.29em solid var(--yellow); border-left: 0.36em solid transparent; }
.bk-logo a:hover mark { transform: translateY(-3px); }

/* ---------- header ---------- */
.bk-top { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 40; }
.admin-bar .bk-top { top: 32px; }
.bk-top > .bk-row { display: flex; align-items: center; gap: 20px; min-height: 72px; max-width: 1180px; margin: 0 auto; }
/* WordPress spaces blocks apart from the top; in a row that pushes the later ones down, so it is switched off here */
.bk-top > .bk-row > * { margin-top: 0; margin-bottom: 0; }
.bk-top .wp-block-navigation { margin-left: auto; font-weight: 600; font-size: 15.5px; }
.bk-top .wp-block-navigation__container { gap: 4px; }
.bk-top .wp-block-navigation .wp-block-navigation-item__content { position: relative; z-index: 0; padding: 8px 11px; color: #fff; transition: color 0.18s var(--ease); white-space: nowrap; }
.bk-top .wp-block-navigation .wp-block-navigation-item__content::before { content: ""; position: absolute; inset: 4px 3px; background: var(--yellow); border-radius: 4px; transform: scaleX(0); transform-origin: left center; transition: transform 0.22s var(--ease); z-index: -1; }
.bk-top .wp-block-navigation .wp-block-navigation-item__content:hover, .bk-top .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--navy); }
.bk-top .wp-block-navigation .wp-block-navigation-item__content:hover::before, .bk-top .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::before { transform: scaleX(1); }
/* The menu opened on a phone. Its colours are set on the Navigation block itself (Overlay background and text), so they can be
   changed in the editor; these rules only give it big links and a close button that is easy to hit. */
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 14px 22px 30px 22px; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 74px; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 4px; width: 100%; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--line); }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 16px 0; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.12; text-transform: uppercase; letter-spacing: 0.005em; white-space: normal; color: #fff; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before { display: none; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--yellow); }
.bk-top .wp-block-navigation__responsive-container-open, .bk-top .wp-block-navigation__responsive-container-close { color: #fff; }
.bk-top .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 6px; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.bk-top .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
.bk-top .wp-block-buttons { flex: none; margin: 0; }
/* the two icons: your account, and your cart (with a number on it when something is in it) */
.bk-top .bk-icons { flex: none; gap: 2px; align-items: center; }
.bk-top .bk-icons > * { margin: 0; }
.bk-top .bk-icons a { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; color: #fff; text-decoration: none; transition: background 0.18s var(--ease), color 0.18s; }
.bk-top .bk-icons a:hover { background: var(--navy2); color: var(--yellow); }
.bk-top .bk-icons svg { display: block; width: 26px; height: 26px; }
.bk-top .bk-icons .wc-block-customer-account__visual { display: grid; place-items: center; }
.bk-top .bk-icons .wc-block-customer-account__account-icon { width: 30px; height: 30px; }
.bk-basket-n { position: absolute; top: 2px; right: 0; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--yellow); color: var(--navy); font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 11.5px; line-height: 18px; text-align: center; }

/* ---------- footer ---------- */
.bk-foot { background: var(--navy); color: var(--pale); padding: 54px 0 26px 0; font-size: 16px; }
.bk-foot > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.bk-foot a { color: var(--pale); text-decoration: none; transition: color 0.18s; }
.bk-foot a:hover { color: var(--yellow); }
.bk-foot h2, .bk-foot h3, .bk-foot h4, .bk-foot h5 { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--yellow); margin: 0 0 12px 0; }
.bk-foot ul { list-style: none; margin: 0; padding: 0; }
.bk-foot li { margin: 0 0 8px 0; }
.bk-foot .bk-legal { border-top: 1px solid var(--line); margin-top: 38px; padding-top: 18px; font-size: 14.5px; color: var(--mist); }
/* the footer's menus: ordinary WordPress menus, edited in Appearance, Editor, Navigation */
.bk-foot .wp-block-navigation { font-size: inherit; font-weight: 400; }
.bk-foot .wp-block-navigation, .bk-foot .wp-block-navigation__container { gap: 8px; }
.bk-foot .wp-block-navigation .wp-block-navigation-item { margin: 0; }
.bk-foot .wp-block-navigation .wp-block-navigation-item__content { padding: 0; color: var(--pale); transition: color 0.18s; }
.bk-foot .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--yellow); }
.bk-foot .bk-foot-row, .bk-foot .bk-foot-row .wp-block-navigation__container { gap: 6px 20px; }
.bk-foot-bar { padding: 22px 0; gap: 10px 28px; }
.bk-foot-bar .bk-foot-row { font-size: 14.5px; }
@media (max-width: 781px) {
	/* on a phone: the name across the top, then the four menus two by two */
	.bk-foot .wp-block-columns.bk-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
	.bk-foot .wp-block-columns.bk-foot-cols > .wp-block-column:first-child { grid-column: 1 / -1; }
}

/* ---------- sections of the home page. Each is a full-width group with one of these classes ---------- */
.bk-sec { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); margin-top: 0; }
.bk-sec > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.bk-sec h2 { font-size: clamp(32px, 4.6vw, 52px); margin: 0 0 30px 0; }
.bk-navy { background: var(--navy); color: #fff; }
.bk-navy h1, .bk-navy h2, .bk-navy h3 { color: #fff; }
.bk-navy .is-style-mono, .bk-navy .bk-mono { color: var(--yellow); }
.bk-tint { background: var(--tint); }
.bk-yellow { background: var(--yellow); color: var(--navy); }

/* the top of the home page */
.bk-hero { padding-top: 44px; padding-bottom: 56px; overflow: hidden; }
.bk-hero h1 { font-size: clamp(42px, 6.6vw, 80px); margin: 14px 0 18px 0; }
.bk-hero .bk-watch { justify-content: center; margin-top: 30px; }
.bk-hero .bk-watch .wp-block-button__link { background: none; color: #fff; box-shadow: none; padding: 0; border-radius: 0; font-size: 17px; display: inline-flex; align-items: center; gap: 12px; }
.bk-hero .bk-watch .wp-block-button__link::before { content: ""; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l10 6-10 6z' fill='%230e1b2c'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform 0.18s var(--ease); }
.bk-hero .bk-watch .wp-block-button__link:hover { transform: none; color: var(--yellow); }
.bk-hero .bk-watch .wp-block-button__link:hover::before { transform: scale(1.1); }

/* the film, and the three reasons beneath it */
.bk-pitch { text-align: center; }
.bk-pitch h2 { max-width: 16em; margin: 0 auto 30px auto; }
.bk-pitch .bk-why { list-style: none; counter-reset: w; margin: 0 auto 40px auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: left; }
.bk-pitch .bk-why li { counter-increment: w; position: relative; padding: 0 0 0 58px; font-size: 18px; line-height: 1.45; margin: 0; }
.bk-pitch .bk-why li::before { content: counter(w); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-family: var(--display); font-size: 23px; display: flex; align-items: center; justify-content: center; }
.bk-pitch .bk-why strong { color: var(--navy); }
.bk-pitch .bk-cta2 { justify-content: center; gap: 16px 26px; align-items: center; }
.bk-hero h1 mark { background: var(--yellow) !important; color: var(--navy) !important; padding: 0 0.08em; border-radius: 0; }
.bk-hero .is-style-lead { color: var(--pale); max-width: 30em; }
.bk-hero .bk-cta { margin-top: 28px; gap: 18px 22px; align-items: center; }
.bk-hero .bk-small { color: var(--mist); font-size: 14.5px; max-width: 22em; margin: 16px 0 0 0; }
.bk-books { position: relative; max-width: 380px; margin: 0 auto; }
.bk-books .wp-block-image { margin: 0; }
.bk-books img { border-radius: 4px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); display: block; }
.bk-books .bk-back { position: absolute; top: 5%; left: 22%; width: 86%; transform: rotate(6deg); }
.bk-books .bk-front { position: relative; width: 86%; transform: rotate(-3deg); transition: transform 0.4s var(--ease); }
.bk-books:hover .bk-front { transform: rotate(-1deg) translateY(-6px); }

/* the price, wherever it appears */
.bk-price { font-family: var(--display); line-height: 1; }
.bk-price--now { color: var(--yellow); font-size: 44px; }
.bk-price--was { color: var(--pale); font-size: 26px; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.bk-price--label { background: var(--red); color: #fff; text-transform: uppercase; font-size: 17px; padding: 4px 10px; border-radius: 6px; }
.bk-price[hidden] { display: none !important; }

/* what has changed */
.bk-shift img { border-radius: 6px; box-shadow: 0 18px 40px rgba(14, 27, 44, 0.22); }
.bk-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
.bk-nums > * { border-top: 5px solid var(--navy); padding-top: 12px; margin: 0; }
.bk-nums .bk-num { font-family: var(--display); font-size: clamp(34px, 4.1vw, 46px); line-height: 1; color: var(--navy); margin: 0; }
.bk-nums p:not(.bk-num) { font-size: 15.5px; line-height: 1.4; color: var(--grey); margin: 8px 0 0 0; }

/* cards: six jobs, bonuses, questions */
.bk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bk-cards > .wp-block-group { background: #fff; border-radius: 12px; padding: 26px 24px; border-top: 6px solid var(--yellow); margin: 0; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.bk-cards > .wp-block-group:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14, 27, 44, 0.12); }
.bk-cards .bk-n { font-family: var(--display); font-size: 34px; color: var(--navy); line-height: 1; margin: 0 0 12px 0; }
.bk-cards h3 { font-size: 20px; margin: 0 0 8px 0; }
.bk-cards p:not(.bk-n) { margin: 0; color: var(--grey); font-size: 16px; }
.bk-navy .bk-cards > .wp-block-group { background: none; border: 2px solid var(--line); }
.bk-navy .bk-cards > .wp-block-group:hover { box-shadow: none; border-color: var(--mist); }
.bk-navy .bk-cards .bk-n { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--navy); font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.bk-navy .bk-cards p:not(.bk-n) { color: var(--pale); }

/* a band with a button, between sections */
.bk-band { padding-top: 46px; padding-bottom: 46px; }
.bk-band > .wp-block-group { display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; }
.bk-band .wp-block-buttons { margin: 0; }
.bk-band h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; max-width: 16em; margin: 0; }
.bk-band p { margin: 8px 0 0 0; font-weight: 600; font-size: 16px; }
.bk-band.bk-navy { background: var(--navy2); }
.bk-band.bk-navy p { color: var(--pale); font-weight: 400; }

/* look inside */
.bk-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bk-shots .wp-block-image { margin: 0; }
.bk-shots img, .bk-wide img { border-radius: 4px; box-shadow: 0 10px 26px rgba(14, 27, 44, 0.2); border: 1px solid var(--rule); transition: transform 0.3s var(--ease); }
.bk-shots .wp-block-image:hover img { transform: translateY(-5px) rotate(-1deg); }
.bk-shots figcaption, .bk-wide figcaption { font-size: 14.5px; color: var(--grey); margin-top: 10px; line-height: 1.4; text-align: left; }
.bk-wide { margin-top: 26px; }

/* read before you buy: the first chapter in a frame dressed as a PDF viewer, as on the approved sales page.
   All ordinary blocks: a bar (the file's name, the page count, a link to the chapter as a web page), a column of small
   pages that each jump to their page, the pages themselves, and a yellow card at the end. The pages scroll inside the
   frame and stop on each spread: two at a time on a wide screen, one on a phone. The frame is never taller than the
   window, so a whole spread is always in view. The page count follows the scroll in browsers that can do that, and is
   hidden in the rest. It is set for 20 pages: with a different number, change "/ 20" in the bar and the two sets of
   keyframes below. */
.bk-read h2 { margin: 14px 0 12px 0; }
.bk-read .bk-read-sub { color: var(--pale); font-size: 18px; margin: 0 0 26px 0; max-width: 34em; }
.bk-pdf { container-type: inline-size; timeline-scope: --bk-pdf; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); font-family: "Segoe UI", system-ui, Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #e8eaed; }
.bk-pdf > *, .bk-pdf .bk-pdf-bar > *, .bk-pdf .bk-pdf-body > *, .bk-pdf .bk-pdf-view > *, .bk-pdf .bk-pdf-pages > * { margin: 0; }
.bk-pdf .bk-pdf-bar { background: #323639; height: 52px; padding: 0 14px; gap: 14px; flex-wrap: nowrap; border-bottom: 1px solid #1f2123; box-sizing: border-box; }
.bk-pdf .bk-pdf-name { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.bk-pdf .bk-pdf-name em { font-style: normal; color: #9aa0a6; }
.bk-pdf .bk-pdf-count { display: none; flex: none; white-space: nowrap; line-height: 26px; }
.bk-pdf .bk-pdf-count code { display: inline-block; vertical-align: top; min-width: 34px; height: 26px; padding: 0 4px; box-sizing: border-box; border-radius: 2px; background: #191b1c; color: #e8eaed; font: inherit; line-height: 26px; text-align: center; }
.bk-pdf .bk-pdf-open { flex: 1 1 0; display: flex; justify-content: flex-end; }
.bk-pdf .bk-pdf-open a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 9px; border-radius: 17px; color: #e8eaed; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.18s; }
.bk-pdf .bk-pdf-open a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 1.5h6.5L14 5v11.5H4zM10.5 1.5V5H14M6.5 9h5M6.5 12h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 1.5h6.5L14 5v11.5H4zM10.5 1.5V5H14M6.5 9h5M6.5 12h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.bk-pdf .bk-pdf-open a:hover { background: #45494d; }
/* the height of one page: as tall as the frame's width allows, but never more than the window leaves below the header */
.bk-pdf .bk-pdf-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: #525659; color-scheme: dark; --bk-h: min(calc((100cqw - 150px) * 0.7073), max(320px, calc(100svh - 190px))); --bk-pw: calc(var(--bk-h) * 0.7069); }
.bk-pdf .bk-pdf-thumbs { height: var(--bk-h); overflow-y: auto; background: #323639; padding: 14px 0 20px 0; box-sizing: border-box; }
.bk-pdf .bk-pdf-thumbs > * { margin: 0 auto 6px auto; }
.bk-pdf .bk-pdf-thumbs .wp-block-image { width: 108px; padding: 6px; box-sizing: border-box; border-radius: 4px; text-align: center; transition: background 0.15s; }
.bk-pdf .bk-pdf-thumbs .wp-block-image:hover { background: #45494d; }
.bk-pdf .bk-pdf-thumbs a { display: block; }
.bk-pdf .bk-pdf-thumbs img { display: block; width: 96px; height: 136px; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); outline: 3px solid transparent; transition: outline-color 0.15s; }
.bk-pdf .bk-pdf-thumbs a:hover img { outline-color: #8ab4f8; }
.bk-pdf .bk-pdf-thumbs figcaption { margin: 6px 0 0 0; font-size: 12px; line-height: 1.2; color: #e8eaed; text-align: center; }
.bk-pdf .bk-pdf-view { height: var(--bk-h); overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scroll-timeline: --bk-pdf block; }
.bk-pdf .bk-pdf-pages { display: grid; grid-template-columns: repeat(2, var(--bk-pw)); justify-content: center; }
/* A small page's link jumps to its page and leaves the frame's bar in sight below the header (the margin on the page);
   the scroll stops on the picture, which has no margin, so each spread still lands exactly in the frame. */
.bk-pdf .bk-pdf-pages .wp-block-image { width: var(--bk-pw); height: var(--bk-h); scroll-margin-top: 52px; }
.bk-pdf .bk-pdf-pages img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); scroll-snap-align: start; }
.bk-pdf .bk-pdf-last { height: var(--bk-h); box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--yellow); color: var(--navy); font-family: var(--wp--preset--font-family--body); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.bk-pdf .bk-pdf-last h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 4vw, 46px); line-height: 1.06; letter-spacing: 0.005em; color: var(--navy); max-width: 15em; margin: 0 auto 14px auto; }
.bk-pdf .bk-pdf-last p { font-weight: 600; font-size: 17px; max-width: 30em; margin: 0 auto 22px auto; }
.bk-pdf .bk-pdf-last .wp-block-buttons { justify-content: center; margin: 0; }
/* the page number in the bar follows the scroll: 1, 3, 5 on a wide screen (two pages at a time), 1, 2, 3 on a phone */
@property --bk-page { syntax: "<integer>"; inherits: false; initial-value: 1; }
@keyframes bk-pdf-two { 0% { --bk-page: 1; } 90% { --bk-page: 19; } 100% { --bk-page: 20; } }
@keyframes bk-pdf-one { 0% { --bk-page: 1; } 95% { --bk-page: 20; } 100% { --bk-page: 20; } }
@supports (timeline-scope: --bk-pdf) {
	.bk-pdf .bk-pdf-count { display: block; counter-reset: bk-page var(--bk-page); animation: bk-pdf-two 1ms linear both; animation-timeline: --bk-pdf; }
	.bk-pdf .bk-pdf-count code { font-size: 0; }
	.bk-pdf .bk-pdf-count code::before { content: counter(bk-page); font-size: 14px; }
}
@media (max-width: 781px) {
	.bk-pdf .bk-pdf-thumbs, .bk-pdf .bk-pdf-name em { display: none; }
	.bk-pdf .bk-pdf-bar { gap: 8px; padding: 0 8px; }
	.bk-pdf .bk-pdf-body { grid-template-columns: minmax(0, 1fr); --bk-h: min(calc(100cqw * 1.4145), max(320px, calc(100svh - 170px))); }
	.bk-pdf .bk-pdf-pages { grid-template-columns: var(--bk-pw); }
	.bk-pdf .bk-pdf-count { animation-name: bk-pdf-one; }
}
@media (max-width: 560px) { .bk-pdf .bk-pdf-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .bk-pdf .bk-pdf-count { display: none; } }
/* in the editor the pages scroll freely, without stopping on each spread, so every page is easy to reach and change */
.block-editor-block-list__layout .bk-pdf .bk-pdf-view { scroll-snap-type: none; }

/* is it for you */
.bk-fit .wp-block-column { border-radius: 12px; padding: 28px 26px; }
.bk-fit .bk-yes { background: var(--tint); border-left: 8px solid var(--yellow); }
.bk-fit .bk-no { background: #fff; border: 2px solid var(--rule); border-left: 8px solid var(--red); }
.bk-fit h3 { margin: 0 0 12px 0; }
.bk-fit li { margin-bottom: 8px; }

/* the author */
.bk-author .bk-photo { width: 150px; height: 150px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-family: var(--display); font-size: 54px; display: flex; align-items: center; justify-content: center; margin: 0; flex: none; }
.bk-author .bk-photo img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.bk-author h2 { font-family: var(--wp--preset--font-family--body); font-weight: 800; text-transform: none; font-size: 30px; letter-spacing: 0; margin: 0 0 10px 0; }

/* everything you get, and the price box */
.bk-offer h2 { font-size: clamp(36px, 5.2vw, 60px); margin-bottom: 20px; }
.bk-offer ul { list-style: none; margin: 0; padding: 0; }
.bk-offer li { padding: 10px 0 10px 34px; border-bottom: 2px solid rgba(14, 27, 44, 0.16); font-weight: 600; position: relative; }
.bk-offer li::before { content: ""; position: absolute; left: 6px; top: 15px; width: 8px; height: 14px; border-right: 4px solid var(--navy); border-bottom: 4px solid var(--navy); transform: rotate(40deg); }
.bk-buy { background: var(--navy); color: #fff; border-radius: 16px; padding: 34px 30px; text-align: center; }
.bk-buy .bk-price--now { font-size: 84px; }
.bk-buy .bk-price--was { font-size: 44px; margin-right: 10px; }
.bk-buy p { color: var(--pale); margin: 14px 0 22px 0; font-size: 15px; }
.bk-buy .wp-block-buttons { justify-content: center; }
.bk-buy .wp-block-button, .bk-buy .wp-block-button__link { width: 100%; }
.bk-buy .bk-after { color: var(--mist); font-size: 13.5px; margin: 16px 0 0 0; }

/* questions that open */
.bk-faq .wp-block-details { border-bottom: 2px solid var(--rule); padding: 18px 0; margin: 0; }
.bk-faq summary { font-weight: 800; font-size: 19px; color: var(--navy); cursor: pointer; list-style: none; position: relative; padding-right: 34px; transition: color 0.18s; }
.bk-faq summary::-webkit-details-marker { display: none; }
.bk-faq summary::after { content: "+"; position: absolute; right: 4px; top: -6px; font-size: 28px; font-weight: 800; color: var(--red); transition: transform 0.25s var(--ease); }
.bk-faq details[open] summary::after { transform: rotate(45deg); }
.bk-faq summary:hover { color: var(--red); }
.bk-faq details p { margin: 12px 0 0 0; max-width: 46em; }

/* questions owners ask: answers on the page, one quiet link each */
.bk-ask .bk-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 52px; }
.bk-ask .bk-qa > .wp-block-group { border-top: 1px solid var(--line); padding: 22px 0 24px 0; margin: 0; }
.bk-ask h3 { font-size: 19px; margin: 0 0 8px 0; line-height: 1.35; }
.bk-ask p { margin: 0 0 10px 0; color: var(--pale); font-size: 16.5px; line-height: 1.55; }
.bk-ask .bk-qa a { color: var(--yellow); font-weight: 800; font-size: 15px; text-decoration: none; }
.bk-ask .bk-qa a:hover { color: #fff; }

/* the close */
.bk-close { text-align: center; padding-top: 76px; padding-bottom: 76px; }
.bk-close h2 { font-size: clamp(40px, 7vw, 84px); margin-bottom: 30px; }
.bk-close h2 { line-height: 1.1; }
/* the yellow block is sized to the capitals, so it clears the lines above and below, as on the cover */
.bk-close h2 mark, .bk-hero h1 mark { display: inline-block; line-height: 0.98; background: var(--yellow) !important; color: var(--navy) !important; padding: 0.04em 0.1em 0 0.1em; border-radius: 0; }
.bk-close .wp-block-buttons { justify-content: center; }

/* side room for every full-width part, and the way the pieces sit inside each section */
.bk-sec, .bk-band, .bk-top, .bk-foot { padding-left: 24px; padding-right: 24px; }
.bk-band { margin-top: 0; }
.bk-sec .wp-block-columns { align-items: center; gap: 48px; margin-bottom: 0; }
.bk-fit .wp-block-columns { align-items: stretch; gap: 26px; }
.bk-cta { margin-bottom: 18px; }
.bk-author-row { gap: 34px; align-items: center; flex-wrap: nowrap; }
.bk-author-text { flex: 1; min-width: 0; }
.bk-author-text p { max-width: 44em; }
.bk-prices { justify-content: center; align-items: baseline; gap: 12px; }
.bk-buy .bk-price--label { display: inline-block; margin-top: 12px; }
.bk-shift h2 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 20px; }

/* ---------- ordinary pages and articles (a first pass; the article design comes next) ---------- */
.bk-page { padding-top: 48px; padding-bottom: 90px; }
.bk-page .wp-block-post-title { font-size: clamp(34px, 5.2vw, 58px); margin: 0 0 24px 0; }
/* plain reading pages such as Privacy, Terms and Contact: calmer headings, with room above each */
.bk-page .wp-block-post-content > h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 2.1em; margin-bottom: 0.45em; }
.bk-page .wp-block-post-content > h2:first-child { margin-top: 0; }
.bk-page .wp-block-post-content > .bk-updated { color: var(--mist); font-size: 15px; }

/* ---------- the shop: the checkout's own slim header and footer, and the page around the basket and checkout ---------- */
.bk-top-slim > .bk-row { justify-content: space-between; }
.bk-secure { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; line-height: 1.2; color: var(--pale); display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.bk-secure::before { content: ""; width: 15px; height: 17px; flex: none; background: var(--yellow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 23'%3E%3Cpath d='M10 0a6 6 0 0 0-6 6v3H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-1V6a6 6 0 0 0-6-6zm-3 9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 23'%3E%3Cpath d='M10 0a6 6 0 0 0-6 6v3H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3h-1V6a6 6 0 0 0-6-6zm-3 9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bk-foot.bk-foot-slim { padding: 0 24px; margin-top: 0; }
.bk-foot.bk-foot-slim .bk-legal { border-top: 0; margin-top: 0; padding: 22px 0; }
.bk-shop, .woocommerce-cart main.wp-block-group, .woocommerce-order-received main.wp-block-group { padding-top: 44px; padding-bottom: 90px; margin-top: 0; }
/* The Stripe plugin copies the card form's colours from the page: it takes the background of "main", and failing that the
   first block group, which is the navy header. So "main" says white out loud, or the card form turns dark. */
.bk-shop { background: #fff; }
.bk-shop-head { margin-bottom: 30px; }
.bk-shop .wp-block-post-title, .woocommerce-cart main .wp-block-post-title { font-size: clamp(34px, 5vw, 54px); margin: 0 0 10px 0; }
.bk-shop-head .bk-small { color: var(--grey); font-size: 15.5px; margin: 0; }
/* the thank-you page: the download first, then the account and one question, then the order */
.bk-thanks > * { margin-block-start: 0; }
.bk-thanks .wc-block-order-confirmation-status { margin-bottom: 8px; }
.bk-thanks .wc-block-order-confirmation-status h1, .bk-thanks .wc-block-order-confirmation-status .wc-block-order-confirmation-status__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 54px); line-height: 1.06; color: var(--navy); margin: 0 0 10px 0; }
.bk-thanks .wc-block-order-confirmation-status p { font-size: 20px; color: var(--grey); margin: 0; }
.bk-thanks h2.wp-block-heading { font-size: 28px; margin: 40px 0 14px 0; }
.bk-thanks table, .woocommerce-account table.shop_table { border-collapse: separate; border-spacing: 0; width: 100%; border: 2px solid var(--rule); border-radius: 14px; overflow: hidden; font-size: 16.5px; }
.bk-thanks table th, .bk-thanks table td, .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: 14px 18px; border: 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.bk-thanks table thead th, .woocommerce-account table.shop_table thead th { border-top: 0; background: var(--tint); font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--grey); }
.bk-thanks table tr:first-child > *, .woocommerce-account table.shop_table tr:first-child > * { border-top: 0; }
.bk-thanks table a, .woocommerce-account table.shop_table a:not(.button) { color: var(--navy); font-weight: 800; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.bk-thanks .wc-block-order-confirmation-downloads__table .button, .bk-thanks .wc-block-order-confirmation-downloads__table a.button, .bk-thanks .woocommerce-MyAccount-downloads-file { display: inline-block; background: var(--yellow); color: var(--navy); font-weight: 800; text-decoration: none; padding: 11px 20px; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); }
.bk-thanks .wc-block-order-confirmation-summary { margin-top: 40px; }
.bk-thanks .wc-block-order-confirmation-summary-list { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 0; padding: 22px 24px; background: var(--tint); border-radius: 14px; }
.bk-thanks .wc-block-order-confirmation-summary-list-item { margin: 0; padding: 0; border: 0; }
.bk-thanks .wc-block-order-confirmation-summary-list-item__key { display: block; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; color: var(--grey); }
.bk-thanks .wc-block-order-confirmation-summary-list-item__value { display: block; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.bk-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.bk-after-card { border-radius: 16px; padding: 24px 26px; margin: 0; }
.bk-after-card p { margin: 0; }
.bk-after-title { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; font-size: 24px; line-height: 1.1; margin: 0 0 10px 0; }
.bk-after-account { background: var(--navy); color: var(--pale); border: 3px solid transparent; }
/* the first time a buyer sees the page, the card is outlined in yellow and pulses twice over three seconds */
.bk-after-account.is-fresh { border-color: var(--yellow); animation: bk-pulse 3s ease-in-out 1; }
@keyframes bk-pulse {
	0% { border-color: rgba(255, 196, 33, 0); box-shadow: 0 0 0 0 rgba(255, 196, 33, 0); }
	25% { border-color: var(--yellow); box-shadow: 0 0 0 10px rgba(255, 196, 33, 0.4); }
	50% { border-color: rgba(255, 196, 33, 0.45); box-shadow: 0 0 0 0 rgba(255, 196, 33, 0); }
	75% { border-color: var(--yellow); box-shadow: 0 0 0 10px rgba(255, 196, 33, 0.4); }
	100% { border-color: var(--yellow); box-shadow: 0 0 0 0 rgba(255, 196, 33, 0); }
}
.bk-after-account .bk-after-title { color: var(--yellow); }
.bk-after-account .bk-after-link { margin-top: 14px; }
.bk-after-account .bk-after-link a { color: #fff; font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--yellow); }
.bk-after-ask, .bk-after-done { background: var(--tint); color: var(--ink); }
.bk-after-ask .bk-after-title { font-family: var(--wp--preset--font-family--body); text-transform: none; font-weight: 800; font-size: 19px; line-height: 1.35; color: var(--navy); }
.bk-after-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-after-row input { flex: 1 1 220px; min-width: 0; border: 2px solid var(--rule); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 16px; background: #fff; }
.bk-after-row input:focus { border-color: var(--navy); outline: none; }
.bk-after-row button { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 16px; padding: 11px 20px; background: var(--navy); color: #fff; }
.bk-after-small { font-size: 14.5px; color: var(--grey); margin-top: 10px !important; }
.bk-after-done { font-weight: 800; color: var(--navy); }
.bk-after > :only-child { grid-column: 1 / -1; }
.bk-after-receipt { grid-column: 1 / -1; margin: 0; font-size: 15.5px; color: var(--grey); }
.bk-after-receipt a { color: var(--navy); font-weight: 800; }
.woocommerce-account .bk-receipt { margin: 18px 0 0 0; }
@media (max-width: 781px) { .bk-after { grid-template-columns: minmax(0, 1fr); } }
/* ---------- the customer area: its menu, its pages, the login form and the review ---------- */
.woocommerce-account .bk-page > *, .woocommerce-account .bk-page .wp-block-post-content > * { max-width: 1180px; }
.woocommerce-account.logged-in .wp-block-post-content > .woocommerce { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
.woocommerce-account:not(.logged-in) .wp-block-post-content > .woocommerce { max-width: 520px; margin-left: 0 !important; }
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* WooCommerce lays this area out with floats, fixed widths and "clearfix" pseudo-elements. In a grid each of those
   pseudo-elements takes a cell of its own, so they are switched off, and the floats and widths with them. */
.woocommerce-account .wp-block-post-content > .woocommerce::before, .woocommerce-account .wp-block-post-content > .woocommerce::after { content: none; display: none; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li { padding: 0; margin: 0; border: 0; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a { text-decoration: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--ink); transition: background 0.18s, color 0.18s; }
.woocommerce-MyAccount-navigation a:hover { background: var(--tint); color: var(--navy); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--tint); color: var(--navy); font-weight: 800; box-shadow: inset 4px 0 0 var(--yellow); }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce h2 { font-size: 28px; margin: 0 0 14px 0; }
.bk-acc-hello { font-size: 21px; font-weight: 600; color: var(--navy); margin: 0 0 22px 0; }
.woocommerce-account .woocommerce .button, .woocommerce-account .woocommerce button[type=submit] { display: inline-block; background: var(--yellow); color: var(--navy); font: inherit; font-weight: 800; font-size: 16px; line-height: 1.3; text-decoration: none; padding: 11px 20px; border: 0; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); cursor: pointer; transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease); }
.woocommerce-account .woocommerce .button:hover, .woocommerce-account .woocommerce button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22); }
.woocommerce-account .woocommerce form .form-row, .woocommerce-account .woocommerce form p { margin: 0 0 16px 0; }
.woocommerce-account .woocommerce form label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.woocommerce-account .woocommerce form .input-text, .woocommerce-account .woocommerce form input[type=text], .woocommerce-account .woocommerce form input[type=email], .woocommerce-account .woocommerce form input[type=password], .woocommerce-account .woocommerce form textarea { box-sizing: border-box; width: 100%; border: 2px solid var(--rule); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; background: #fff; transition: border-color 0.18s; }
.woocommerce-account .woocommerce form .input-text:focus, .woocommerce-account .woocommerce form input:focus, .woocommerce-account .woocommerce form textarea:focus { border-color: var(--navy); outline: none; }
.woocommerce-account .woocommerce form .password-input { display: block; position: relative; }
.woocommerce-account .woocommerce form .show-password-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; box-shadow: none; padding: 6px; cursor: pointer; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin: 0 16px 0 0 !important; }
.woocommerce-account .woocommerce fieldset { border: 2px solid var(--rule); border-radius: 14px; padding: 18px 20px; margin: 24px 0; }
.woocommerce-account .woocommerce legend { font-weight: 800; padding: 0 8px; }
.woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { list-style: none; margin: 0 0 22px 0; padding: 16px 18px; border-radius: 12px; background: var(--tint); border: 0; border-left: 4px solid var(--yellow); display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.woocommerce-account .woocommerce-error { border-left-color: var(--red); }
.woocommerce-account .lost_password { margin-top: 14px; }
.bk-first-time { margin: 22px 0 0 0 !important; padding: 16px 18px; background: var(--tint); border-radius: 12px; font-size: 16px; }
.bk-first-time a { font-weight: 800; }
.bk-review-card { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; background: var(--navy); color: var(--pale); border-radius: 16px; padding: 24px 28px; margin-top: 28px; }
.bk-review-card h2 { color: var(--yellow) !important; font-size: 24px !important; margin: 0 0 6px 0 !important; }
.bk-review-card p { margin: 0; max-width: 34em; }
.bk-review-form, .bk-review-done { max-width: 640px; }
.bk-review-error { background: var(--tint); border-left: 4px solid var(--red); border-radius: 10px; padding: 12px 16px; font-weight: 600; }
.bk-rate { display: block; border: 0 !important; padding: 0 !important; margin: 6px 0 18px 0 !important; }
.bk-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.bk-rate legend { padding: 0 !important; margin-bottom: 4px; font-weight: 600; font-size: 15.5px; }
.bk-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-rate label { margin: 0 !important; cursor: pointer; line-height: 1; }
.bk-rate label::before { content: "\2605"; font-size: 40px; color: var(--rule); transition: color 0.12s, transform 0.12s var(--ease); display: inline-block; }
.bk-rate label:hover::before, .bk-rate label:hover ~ label::before, .bk-rate input:checked ~ label::before { color: var(--yellow); }
.bk-rate label:hover::before { transform: scale(1.12); }
.bk-rate input:focus-visible + label::before { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.bk-review-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.bk-review-consent label { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.bk-review-consent input { margin-top: 5px; flex: none; }
.bk-stars { color: var(--yellow); font-size: 30px; letter-spacing: 3px; line-height: 1; margin: 0 0 12px 0; }
.bk-review-done blockquote { margin: 0; padding: 18px 22px; background: var(--tint); border-left: 4px solid var(--yellow); border-radius: 0 12px 12px 0; }
@media (max-width: 781px) {
	.woocommerce-account.logged-in .wp-block-post-content > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.woocommerce-MyAccount-navigation a { padding: 8px 12px; background: var(--tint); font-size: 15.5px; }
	.woocommerce-MyAccount-navigation .is-active a { box-shadow: inset 0 -3px 0 var(--yellow); }
	.bk-review-two { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account table.shop_table thead { display: none; }
	.woocommerce-account table.shop_table tr { display: block; border-top: 1px solid var(--rule); padding: 8px 0; }
	.woocommerce-account table.shop_table tbody tr:first-child { border-top: 0; }
	.woocommerce-account table.shop_table td { display: block; border: 0 !important; padding: 6px 16px; }
}

/* the selling points, as a strip of ticks: a list block with the class bk-points */
.bk-points { list-style: none; margin: 18px 0 0 0; padding: 14px 22px; display: flex; flex-wrap: wrap; gap: 10px 34px; background: var(--yellow); border-radius: 14px; }
.bk-points li { display: flex; align-items: center; gap: 11px; margin: 0; font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--navy); }
.bk-points li::before { content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23ffc421' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* ---------- the checkout and the basket: WooCommerce's own blocks, in the book's look ---------- */
.wc-block-checkout .wc-block-components-checkout-step__title, .wc-block-checkout .wc-block-components-checkout-step__heading .wc-block-components-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.1; letter-spacing: 0.005em; color: var(--navy); }
.wc-block-checkout .wc-block-components-checkout-step { margin-bottom: 34px; }
.wc-block-checkout .wc-block-components-checkout-step__heading { margin-bottom: 14px; }
/* fields: WooCommerce's own rule is three classes strong, so these carry four */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]),
.wc-block-checkout .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]),
.wc-block-cart .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]),
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea { border: 2px solid var(--rule); border-radius: 10px; box-shadow: none; }
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container { border-radius: 10px; }
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]):focus,
.wc-block-checkout .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]):focus,
.wc-block-cart .wc-block-components-text-input input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]):focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus { border-color: var(--navy); box-shadow: none; outline: none; }
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input.has-error input:is([type=text], [type=email], [type=tel], [type=url], [type=number], [type=password]) { border-color: var(--red); }
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { border: 2px solid var(--mist); border-radius: 5px; }
/* the quick ways to pay */
.wc-block-components-express-payment .wc-block-components-express-payment__title-container .wc-block-components-express-payment__title, .wc-block-components-express-payment__title { font-family: var(--mono) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px !important; color: var(--grey); }
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content { border-color: var(--rule); border-width: 2px; border-radius: 0 0 12px 12px; }
.wc-block-components-express-payment-continue-rule { color: var(--grey); font-size: 14.5px; }
.wc-block-checkout .wc-block-components-radio-control-accordion-option, .wc-block-checkout .wc-block-components-radio-control--highlight-checked::after { border-radius: 12px; }
/* the order summary wherever it appears (on a phone a second one sits above the button), and the basket's totals */
.wc-block-checkout .checkout-order-summary-block-fill { border: 2px solid var(--rule); border-radius: 16px; }
.wc-block-checkout .wc-block-components-product-name, .wc-block-cart .wc-block-components-product-name { font-weight: 800; color: var(--navy); text-decoration: none; }
.wc-block-checkout .wc-block-components-totals-footer-item, .wc-block-cart .wc-block-components-totals-footer-item { align-items: center; }
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 800; }
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--navy); }
.wc-block-checkout .wc-block-components-chip, .wc-block-cart .wc-block-components-chip { background: var(--yellow); color: var(--navy); font-weight: 800; }
.wc-block-cart .wc-block-cart__totals-title, .wc-block-cart .wc-block-cart-items .wc-block-cart-items__header { font-family: var(--mono); font-weight: 600; letter-spacing: 0.14em; font-size: 12.5px; color: var(--grey); }
.wc-block-cart .wc-block-cart__submit-button { font-size: 19px; font-weight: 800; padding: 17px 24px; }
/* the order summary: the navy box from the home page */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { background: var(--navy); color: #fff; border: 0; border-radius: 18px; padding: 10px 8px 6px 8px; box-shadow: 0 18px 40px rgba(14, 27, 44, 0.18); }
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--yellow); }
.wc-block-checkout__sidebar .wc-block-components-product-name { font-weight: 800; font-size: 16px; line-height: 1.3; color: #fff; }
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__image { width: 62px; }
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__image img { width: 62px; max-width: 62px; border-radius: 4px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35); }
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__quantity { background: var(--yellow); color: var(--navy); border: 2px solid var(--navy); box-shadow: none; font-weight: 800; }
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper, .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block { border-color: var(--line); }
.wc-block-checkout__sidebar .wc-block-components-product-price, .wc-block-checkout__sidebar .wc-block-components-totals-item__label { color: var(--pale); }
.wc-block-checkout__sidebar .wc-block-components-totals-item__value { color: #fff; font-weight: 800; }
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item { align-items: center; }
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: #fff; font-weight: 800; font-size: 18px; }
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1; color: var(--yellow); }
.wc-block-checkout__sidebar .wc-block-components-panel__button, .wc-block-checkout__sidebar .wc-block-components-panel__button:hover { color: #fff; font-weight: 600; }
.wc-block-checkout__sidebar .wc-block-components-totals-coupon__input input { background: #fff; color: var(--ink); border: 0; border-radius: 10px; }
.wc-block-checkout__sidebar .wc-block-components-totals-coupon__button { background: var(--yellow); color: var(--navy); border-radius: 10px; font-weight: 800; }
.wc-block-checkout__sidebar .wc-block-components-chip { background: var(--yellow); color: var(--navy); font-weight: 800; }
.wc-block-checkout__sidebar .wc-block-components-chip .wc-block-components-chip__remove { color: var(--navy); }
/* on a phone the box folds down to one line that opens when pressed: its title, and the amount in the cover's yellow */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title[role=button] { border: 0; margin: 0; padding: 10px 12px; }
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--yellow); }
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon { color: #fff; fill: #fff; }
/* the button that pays, and what follows it */
.wc-block-checkout .wc-block-components-checkout-place-order-button { width: 100%; font-size: 20px; font-weight: 800; padding: 18px 26px; min-height: 0; }
.wc-block-checkout .wc-block-checkout__terms { font-size: 15px; color: var(--grey); }
.wc-block-checkout .wc-block-checkout__terms a { color: var(--navy); }
.wc-block-components-notice-banner { border-radius: 12px; border-width: 2px; }

/* ---------- articles: the page, its sidebar, its foot, and the lists. From the approved mock-ups ---------- */
.bk-progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.bk-ease { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.bk-ease.is-in { opacity: 1; transform: none; }
.bk-article, .bk-list { max-width: 1228px; margin: 0 auto; padding: 0 24px; }
.bk-article > *, .bk-list > * { margin-block-start: 0; }

/* the line above the title, the title, and who wrote it */
.bk-crumbs { gap: 0 10px; padding-top: 40px; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--grey); }
.bk-crumbs p, .bk-crumbs .wp-block-post-terms { margin: 0; font-size: inherit; }
.bk-crumbs a { color: inherit; text-decoration: none; transition: color 0.18s; }
.bk-crumbs a:hover { color: var(--red); }
.bk-crumbs .wp-block-post-terms::before { content: "/"; margin-right: 10px; }
.bk-article > .wp-block-post-title { font-size: clamp(34px, 5.2vw, 58px); margin: 18px 0 24px 0; max-width: 17em; color: var(--navy); overflow-wrap: break-word; }
.bk-meta { gap: 8px 22px; align-items: center; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--grey); }
.bk-meta > * { margin: 0; }
.bk-meta .bk-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--yellow); display: grid; place-items: center; font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; margin-right: -12px; }
.bk-meta .wp-block-post-author-name { color: var(--ink); font-size: inherit; }
.bk-meta .wp-block-post-author-name::before { content: "By "; }
.bk-meta .wp-block-post-author-name a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; transition: color 0.18s; }
.bk-meta .wp-block-post-author-name a:hover { color: var(--red); }
.ak-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: inherit; }

/* two columns: the article, and the sidebar */
.bk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 72px; padding: 38px 0 90px 0; align-items: start; }
.bk-cols > * { margin-block-start: 0; }
.bk-main { min-width: 0; }
.bk-main > * { margin-block-start: 0; }

/* the short answer, the picture, and the words */
.bk-answer { background: var(--yellow); color: var(--navy); border-radius: 14px; padding: 24px 28px 26px 28px; margin: 0 0 36px 0; }
.bk-answer .is-style-mono { margin: 0 0 8px 0; }
.bk-answer .wp-block-post-excerpt, .bk-answer .wp-block-post-excerpt__excerpt { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.bk-main > .wp-block-post-featured-image { margin: 0 0 40px 0; border-radius: 14px; overflow: hidden; background: var(--tint); }
.bk-main > .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.bk-main > .wp-block-post-featured-image:hover img { transform: scale(1.025); }
.bk-prose > * { margin-block-start: 0; }
.bk-prose h2 { font-size: clamp(25px, 3vw, 32px); color: var(--navy); margin: 64px 0 16px 0; overflow-wrap: break-word; }
.bk-prose h3 { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-size: 21px; font-weight: 800; line-height: 1.3; margin: 30px 0 8px 0; }
.bk-prose p { margin: 0 0 20px 0; }
/* the sentence straight after a question heading is its answer, so it is set heavier */
.bk-prose h2 + p { font-weight: 600; }
.bk-prose a { color: var(--navy); text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.bk-prose ul, .bk-prose ol { margin: 0 0 20px 0; padding-left: 1.3em; }
.bk-prose li { margin: 0 0 8px 0; }
.bk-prose .wp-block-image { margin: 40px 0; border-radius: 14px; overflow: hidden; }
.bk-prose .wp-block-image img { display: block; width: 100%; }
.bk-prose .wp-block-table { margin: 28px 0 34px 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--rule); }
.bk-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 16.5px; min-width: 460px; }
.bk-prose .wp-block-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 16px; border: 0; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.bk-prose .wp-block-table td { padding: 13px 16px; border: 0; border-top: 1px solid var(--rule); vertical-align: top; }
.bk-prose .wp-block-table tbody tr:nth-child(even) td { background: var(--tint); }

/* a line set apart in yellow, as the book does it: a paragraph with the class bk-pull */
.bk-prose .bk-pull { width: fit-content; max-width: 100%; background: var(--yellow); color: var(--navy); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.005em; font-size: clamp(24px, 3vw, 30px); line-height: 1.1; padding: 12px 18px 10px 18px; margin: 10px 0 30px 0; }
/* a single card inside the text (an example, a tip, a warning), full width, at reading size */
.bk-prose > .bk-tk { margin: 30px 0 34px 0; }
.bk-prose > .bk-tk:hover { transform: none; box-shadow: none; }
.bk-prose > .bk-tk p:not(.is-style-mono) { font-size: 17px; line-height: 1.6; margin: 0 0 10px 0; }
.bk-prose > .bk-tk p:last-child { margin-bottom: 0; }
.bk-chapter > .is-style-lead { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; margin: 0 0 30px 0; }
.bk-chapter > .bk-foot-cta { margin: 48px 0 0 0; }

/* three cards at the end of the answer: the example, the tip and the warning */
.bk-take { margin: 60px 0 0 0; }
.bk-take > .is-style-mono { color: var(--grey); margin: 0; }
.bk-take3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.bk-take3 > * { margin-block-start: 0; }
.bk-tk { --c: var(--grey); border: 2px solid var(--rule); border-radius: 14px; background: #fff; padding: 20px 20px 22px 20px; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.bk-tk:hover { border-color: var(--mist); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(14, 27, 44, 0.1); }
.bk-tk.is-ex { --c: #1f8a5b; } .bk-tk.is-tip { --c: #b97a00; } .bk-tk.is-warn { --c: var(--red); }
.bk-tk .is-style-mono { display: flex; align-items: center; gap: 8px; color: var(--c); margin: 0 0 10px 0; }
.bk-tk .is-style-mono::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.bk-tk p:not(.is-style-mono) { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* quick questions and sources, inside an article */
.bk-quick { border-top: 3px solid var(--navy); margin-top: 64px; padding-top: 38px; }
.bk-quick h2 { margin-top: 0; }
.bk-quick .wp-block-details { border-bottom: 1px solid var(--rule); margin: 0; }
.bk-quick summary { cursor: pointer; font-weight: 800; padding: 16px 34px 16px 0; list-style: none; position: relative; transition: color 0.18s; }
.bk-quick summary::-webkit-details-marker { display: none; }
.bk-quick summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-weight: 800; font-size: 28px; line-height: 1.2; color: var(--red); transition: transform 0.25s var(--ease); }
.bk-quick details[open] summary::after { transform: rotate(45deg); }
.bk-quick summary:hover { color: var(--red); }
.bk-quick details p { margin: 0 0 16px 0; color: var(--grey); font-weight: 400; }
.bk-sources { font-size: 15.5px; color: var(--grey); border-top: 1px solid var(--rule); margin-top: 44px; padding-top: 20px; }
.bk-sources .is-style-mono { margin: 0; }
.bk-sources ol { padding-left: 20px; margin: 8px 0 0 0; }

/* the foot of every article: the guide, who wrote it, and what to read next */
.bk-art-foot > * { margin-block-start: 0; }
.bk-foot-cta { background: var(--navy); color: #fff; border-radius: 18px; padding: 38px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 36px; align-items: center; margin: 64px 0 0 0; }
.bk-foot-cta > * { margin: 0; }
.bk-foot-cta .bk-foot-cover img { display: block; width: 100%; transform: rotate(-4deg); border-radius: 6px; box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.35); transition: transform 0.35s var(--ease); }
.bk-foot-cta:hover .bk-foot-cover img { transform: rotate(0deg) translateY(-4px); }
.bk-foot-tx > * { margin-block-start: 0; }
.bk-foot-tx .is-style-mono { color: var(--yellow); margin: 0; }
.bk-foot-tx h3 { color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.06; margin: 8px 0 10px 0; }
.bk-foot-tx h3 mark { padding: 0; }
.bk-foot-tx p:not(.is-style-mono) { color: var(--pale); margin: 0 0 16px 0; font-size: 17px; }
.bk-buyrow { align-items: center; gap: 14px 18px; }
.bk-buyrow > * { margin: 0; }
.bk-foot-cta .bk-price--now, .bk-strip .bk-price--now, .bk-ad .bk-price--now, .bk-mini .bk-price--now, .bk-mbar .bk-price--now { font-family: var(--display); line-height: 1; color: var(--yellow); }
.bk-foot-cta .bk-price--now { font-size: 44px; }
.bk-foot-cta .bk-price--was, .bk-strip .bk-price--was { font-family: var(--display); font-size: 26px; color: var(--pale); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.bk-foot-cta .bk-price--label { background: var(--red); color: #fff; font-family: var(--display); text-transform: uppercase; font-size: 17px; padding: 4px 10px; border-radius: 6px; }
.bk-byline { display: flex; gap: 18px; align-items: center; background: var(--tint); border-radius: 14px; padding: 22px 24px; margin-top: 56px; }
.bk-byline > * { margin: 0; }
.bk-byline .bk-photo { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--yellow); display: grid; place-items: center; font-family: var(--display); font-size: 26px; flex: none; }
.bk-byline-tx > * { margin-block-start: 0; }
.bk-byline-tx .is-style-mono { color: var(--grey); margin: 0 0 2px 0; }
.bk-byline-tx .wp-block-post-author-name { font-weight: 800; font-size: 19px; margin: 0 0 4px 0; }
.bk-byline-tx .wp-block-post-author-name a { color: var(--navy); text-decoration: none; border-bottom: 3px solid var(--yellow); }
.bk-byline-tx .wp-block-post-author-name a:hover { color: var(--red); }
.bk-byline-tx p:not(.is-style-mono) { margin: 0; font-size: 16.5px; color: var(--grey); }
.ak-next-h { font-size: 28px; color: var(--navy); margin: 72px 0 22px 0; }

/* cards for articles: in "Next question" and in every list */
.bk-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.bk-posts > li { margin: 0; }
.bk-post { position: relative; display: block; height: 100%; text-decoration: none; border: 2px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; color: var(--ink); transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s var(--ease); }
.bk-post:hover { transform: translateY(-4px); border-color: var(--mist); box-shadow: 0 16px 34px rgba(14, 27, 44, 0.13); }
.bk-post > * { margin-block-start: 0; }
.bk-post .bk-post-im, .bk-post .wp-block-post-featured-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); margin: 0; }
.bk-post .bk-post-im img, .bk-post .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.bk-post:hover .bk-post-im img, .bk-post:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.bk-post-tx { padding: 16px 18px 18px 18px; }
.bk-post-tx > * { margin-block-start: 0; }
.bk-post-cat { display: block; font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; color: var(--red); margin: 0; }
.bk-post-cat a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
.bk-post-cat .wp-block-post-terms__separator { display: none; }
.bk-post-cat a + a, .bk-post-cat a ~ a { display: none; }
.bk-post-t, h3.bk-post-t { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--navy); margin: 8px 0 8px 0; text-wrap: pretty; }
.bk-post-t a { color: inherit; text-decoration: none; }
/* the whole card is the link: the title's link is stretched over it */
.bk-post-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bk-post .wp-block-post-excerpt { margin: 0; }
.bk-post .wp-block-post-excerpt__excerpt { margin: 0; font-size: 15.5px; color: var(--grey); line-height: 1.5; }
.bk-post .wp-block-post-excerpt__more-text { margin: 12px 0 0 0; }
.bk-post .wp-block-post-excerpt__more-link, .bk-go { display: inline-block; font-weight: 800; font-size: 15px; color: var(--navy); text-decoration: none; }
.bk-go { margin-top: 12px; }
.bk-go span { display: inline-block; transition: transform 0.2s var(--ease); }
.bk-post:hover .bk-go span { transform: translateX(5px); }

/* comments */
.bk-comments { margin-top: 72px; border-top: 3px solid var(--navy); padding-top: 30px; }
.bk-comments > * { margin-block-start: 0; }
.bk-comments .wp-block-comments-title, .bk-comments .comment-reply-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 28px; line-height: 1.1; color: var(--navy); margin: 0 0 22px 0; }
.bk-comments .wp-block-comment-template { list-style: none; margin: 0 0 30px 0; padding: 0; }
.bk-comments .wp-block-comment-template ol { list-style: none; margin: 0; padding: 0 0 0 28px; }
.bk-comment { background: var(--tint); border-radius: 14px; padding: 18px 22px; margin: 0 0 14px 0; }
.bk-comment > * { margin-block-start: 0; }
.bk-comment-head { gap: 4px 16px; align-items: baseline; margin-bottom: 8px; }
.bk-comment-head > * { margin: 0; }
.bk-comment .wp-block-comment-author-name { font-weight: 800; color: var(--navy); }
.bk-comment .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.bk-comment .wp-block-comment-date { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; color: var(--grey); }
.bk-comment .wp-block-comment-date a { color: inherit; text-decoration: none; }
.bk-comment .wp-block-comment-content p { margin: 0 0 10px 0; font-size: 16.5px; }
.bk-comment .wp-block-comment-reply-link { font-weight: 800; font-size: 15px; margin: 0; }
.bk-comment .wp-block-comment-reply-link a { color: var(--navy); text-decoration: none; border-bottom: 3px solid var(--yellow); }
.bk-comments .comment-form { display: grid; gap: 14px; }
.bk-comments .comment-form p { margin: 0; }
.bk-comments .comment-form label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.bk-comments .comment-form input:not([type=checkbox]):not([type=submit]), .bk-comments .comment-form textarea { width: 100%; border: 2px solid var(--rule); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 16px; background: #fff; transition: border-color 0.18s; }
.bk-comments .comment-form input:focus, .bk-comments .comment-form textarea:focus { border-color: var(--navy); outline: none; }
.bk-comments .comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.bk-comments .comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.bk-comments .comment-notes, .bk-comments .logged-in-as { font-size: 15px; color: var(--grey); }

/* the sidebar: an advertising space. Every part is a block that can be swapped or reordered */
.bk-side { align-self: stretch; display: flex; flex-direction: column; gap: 30px; }
.bk-side > * { margin: 0; }
.bk-ad { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy); color: #fff; border-radius: 16px; padding: 24px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.bk-ad:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--yellow); }
.bk-ad > * { margin: 0; }
.bk-ad .bk-rib { position: absolute; top: 22px; right: -50px; width: 190px; text-align: center; transform: rotate(45deg); background: var(--yellow); color: var(--navy); font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; line-height: 1.5; padding: 6px 0 5px 0; z-index: 3; }
.bk-ad h3 { position: relative; z-index: 2; color: #fff; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; font-size: 28px; line-height: 1.07; margin: 2px 0 0 0; max-width: 5.3em; text-wrap: wrap; }
.bk-ad h3 mark.has-navy-color { padding: 0 6px; border-radius: 3px; }
.bk-ad h3 mark.has-red-color { padding: 0; }
.bk-ad .bk-ad-cover { position: absolute; right: -8px; bottom: 30px; width: 45%; }
.bk-ad .bk-ad-cover img { display: block; width: 100%; transform: rotate(6deg); border-radius: 5px; box-shadow: -8px 10px 0 rgba(0, 0, 0, 0.35); transition: transform 0.4s var(--ease); }
.bk-ad:hover .bk-ad-cover img { transform: rotate(1deg) translateY(-8px); }
.bk-ad .bk-ad-tag { position: absolute; left: 24px; bottom: 22px; z-index: 2; display: grid; gap: 8px; justify-items: start; }
.bk-ad .bk-ad-tag > * { margin: 0; }
.bk-ad .bk-price--now { font-size: 40px; }
/* the whole advert is the link: the button's link is stretched over it */
.bk-ad .wp-block-button__link { position: static; font-size: 15px; padding: 9px 14px; border-radius: 8px; }
.bk-ad .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.bk-panel { border: 2px solid var(--rule); border-radius: 16px; padding: 20px 22px; }
.bk-panel > * { margin-block-start: 0; }
.bk-panel > .is-style-mono { margin: 0; }
.bk-panel h3 { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--navy); margin: 6px 0 8px 0; }
.bk-panel p:not(.is-style-mono) { margin: 0 0 12px 0; font-size: 15.5px; color: var(--grey); line-height: 1.5; }
.bk-cats, .bk-panel .wp-block-categories { list-style: none; margin: 8px 0 0 0; padding: 0; }
.bk-panel .wp-block-categories li { margin: 0; }
.bk-panel .wp-block-categories a { display: flex; justify-content: space-between; text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 16px; color: var(--ink); transition: color 0.18s; }
.bk-panel .wp-block-categories a::after { content: "\2192"; color: var(--red); transition: transform 0.2s var(--ease); }
.bk-panel .wp-block-categories a:hover { color: var(--red); }
.bk-panel .wp-block-categories a:hover::after { transform: translateX(4px); }
.bk-panel.bk-news { background: var(--yellow); border-color: var(--yellow); padding: 26px 24px; }
.bk-panel.bk-news .is-style-mono, .bk-panel.bk-news h3, .bk-panel.bk-news p:not(.is-style-mono) { color: var(--navy); }
.bk-panel.bk-news h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 27px; line-height: 1.06; margin: 10px 0 10px 0; }
.bk-panel.bk-news p:not(.is-style-mono) { font-size: 16px; margin-bottom: 16px; }
.bk-news .wp-block-jetpack-subscriptions form, .bk-news .wp-block-jetpack-subscriptions__form-elements { display: block; }
.bk-news .wp-block-jetpack-subscriptions input[type=email] { width: 100% !important; background: #fff !important; color: var(--ink) !important; border: 2px solid var(--navy) !important; border-radius: 10px !important; padding: 11px 13px !important; font: inherit !important; font-size: 16px !important; }
.bk-news .wp-block-jetpack-subscriptions p { margin: 0; }
.bk-news .wp-block-jetpack-subscriptions button, .bk-news .wp-block-jetpack-subscriptions a { display: block; box-sizing: border-box; text-align: center; text-decoration: none !important; line-height: 1.3 !important; width: 100% !important; margin: 10px 0 0 0 !important; background: var(--navy) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 11px 18px !important; font: inherit !important; font-weight: 800 !important; font-size: 15.5px !important; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.bk-stick { position: sticky; top: 100px; display: grid; gap: 30px; }
.bk-stick > * { margin: 0; }
.ak-toc { border: 2px solid var(--rule); border-radius: 16px; padding: 20px 22px; }
.ak-toc-label { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; margin: 0; }
.ak-toc ul { list-style: none; margin: 8px 0 0 0; padding: 0; font-size: 15.5px; line-height: 1.4; }
.ak-toc li { margin: 0; }
.ak-toc a { display: block; text-decoration: none; padding: 8px 10px 8px 14px; border-left: 3px solid var(--rule); color: var(--grey); font-weight: 500; border-radius: 0 6px 6px 0; transition: color 0.18s, border-color 0.18s, background 0.18s; }
.ak-toc a:hover { color: var(--navy); border-left-color: var(--mist); }
.ak-toc a.is-on { color: var(--navy); border-left-color: var(--yellow); background: var(--tint); }
.bk-mini { position: relative; display: flex; align-items: center; gap: 14px; background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.bk-mini:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--yellow); }
.bk-mini > * { margin: 0; }
.bk-mini .bk-mini-cover { width: 52px; flex: none; }
.bk-mini .bk-mini-cover img { display: block; width: 100%; border-radius: 3px; transform: rotate(-5deg); transition: transform 0.3s var(--ease); }
.bk-mini:hover .bk-mini-cover img { transform: rotate(0deg); }
.bk-mini .bk-mini-t { flex: 1; font-weight: 800; font-size: 15px; line-height: 1.25; }
.bk-mini .bk-mini-t a { color: #fff; text-decoration: none; }
.bk-mini .bk-mini-t a::after { content: ""; position: absolute; inset: 0; }
.bk-mini .bk-price--now { font-size: 24px; }
/* on a list the sidebar is short, so the small advert that follows the reader is not needed */
body:not(.single) .bk-stick { display: none; }

/* the top of a list: its name, and the topics as chips */
.bk-hub { background: var(--navy); color: #fff; padding: 58px 24px 60px 24px; margin-top: 0; }
.bk-hub > .wp-block-group { max-width: 1180px; margin: 0 auto; }
.bk-hub > .wp-block-group > * { margin-block-start: 0; }
.bk-hub .is-style-mono { color: var(--yellow); margin: 0; }
.bk-hub .is-style-mono a { color: inherit; text-decoration: none; }
.bk-hub > .wp-block-group > h1 { color: #fff; font-size: clamp(40px, 7vw, 78px); margin: 36px 0 42px 0; }
.bk-hub h1 mark { display: inline-block; line-height: 0.98; padding: 0.04em 0.12em 0 0.12em; border-radius: 5px; }
.bk-hub .is-style-lead, .bk-hub .wp-block-term-description { color: var(--pale); font-size: 20px; max-width: 32em; margin: 0; }
.bk-chips, .bk-hub > .wp-block-group > .bk-chips { gap: 10px; margin-top: 32px; align-items: center; }
.bk-chips > * { margin: 0; }
.bk-chips .wp-block-categories { display: contents; list-style: none; }
.bk-chips li { margin: 0; list-style: none; }
.cat-item-none { display: none; }
.bk-panel:has(.cat-item-none) { display: none; }
.bk-chips a { display: block; text-decoration: none; border: 2px solid var(--line); color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1.3; padding: 8px 16px; border-radius: 999px; transition: background 0.18s var(--ease), color 0.18s, border-color 0.18s, transform 0.18s var(--ease); }
.bk-chips a:hover, .bk-chips .current-cat > a, .blog .bk-chip-all a { background: var(--yellow); border-color: var(--yellow); color: var(--navy); transform: translateY(-2px); }
.bk-hub .wp-block-search { margin-top: 28px; max-width: 640px; }
.bk-hub .wp-block-search__input { border: 3px solid var(--line); border-radius: 12px; padding: 13px 16px; font: inherit; font-size: 17px; font-weight: 600; background: #fff; color: var(--ink); }
.bk-hub .wp-block-search__input:focus { border-color: var(--yellow); outline: none; }
.bk-hub .wp-block-search__button { margin-left: 10px; }
.bk-none { font-size: 19px; color: var(--grey); padding: 20px 0; }
/* on the first page of the articles, the newest one is set large */
.blog:not(.paged) .bk-posts > li:first-child { grid-column: 1 / -1; }
.blog:not(.paged) .bk-posts > li:first-child .bk-post { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 18px; }
.blog:not(.paged) .bk-posts > li:first-child .wp-block-post-featured-image { aspect-ratio: auto; min-height: 280px; height: 100%; }
.blog:not(.paged) .bk-posts > li:first-child .wp-block-post-featured-image a { display: block; height: 100%; }
.blog:not(.paged) .bk-posts > li:first-child .bk-post-tx { padding: 30px 32px; align-self: center; }
.blog:not(.paged) .bk-posts > li:first-child .bk-post-t { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3vw, 36px); line-height: 1.06; margin: 10px 0 12px 0; }
.bk-pages { gap: 8px; margin-top: 40px; }
.bk-pages a, .bk-pages .page-numbers { text-decoration: none; font-weight: 800; min-width: 44px; height: 44px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; border: 2px solid var(--rule); color: var(--navy); transition: background 0.18s, border-color 0.18s, color 0.18s; }
.bk-pages .wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.bk-pages a:hover, .bk-pages .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.bk-pages .page-numbers.dots { border-color: transparent; }

/* one band across the whole page, after a list */
.bk-strip { align-items: center; gap: 16px 26px; background: var(--navy); color: #fff; border-radius: 18px; padding: 22px 32px; margin: 0 0 90px 0; }
.bk-strip > * { margin: 0; }
.bk-strip .bk-strip-cover { width: 58px; flex: none; }
.bk-strip .bk-strip-cover img { display: block; width: 100%; border-radius: 3px; transform: rotate(-5deg); box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--ease); }
.bk-strip:hover .bk-strip-cover img { transform: rotate(0deg); }
.bk-strip > .bk-strip-tx { margin-right: auto; }
.bk-strip-tx > * { margin: 0; }
.bk-strip-tx .is-style-mono { color: var(--yellow); font-size: 11px; }
.bk-strip-t { font-family: var(--display); text-transform: uppercase; font-size: 25px; line-height: 1.1; margin-top: 3px; }
.bk-strip .bk-price--now { font-size: 36px; }

/* on a phone, a bar with the button to buy stays at the foot of the screen */
.bk-mbar { display: none; }

/* the page that is not there */
.bk-lost { min-height: calc(100vh - 72px); display: grid; align-items: center; overflow: hidden; }
.bk-lost .wp-block-columns { width: 100%; align-items: center; gap: 40px; }
.bk-lost .wp-block-column > * { margin-block-start: 0; }
.bk-lost .is-style-mono { color: var(--yellow); margin: 0; animation: bk-land 0.5s var(--ease) 0.05s both; }
.bk-lost .wp-block-column > h1 { color: #fff; font-size: clamp(40px, 6.4vw, 76px); margin: 14px 0 20px 0; text-wrap: wrap; animation: bk-land 0.5s var(--ease) 0.28s both; }
.bk-lost h1 mark { padding: 0; }
.bk-lost .is-style-lead { color: var(--pale); max-width: 26em; margin: 0 0 30px 0; animation: bk-rise 0.6s var(--ease) 0.95s both; }
.bk-lost .is-style-lead strong { color: #fff; }
.bk-lost-row { gap: 14px 22px; align-items: center; animation: bk-rise 0.6s var(--ease) 1.7s both; }
.bk-lost-row > * { margin: 0; }
.bk-lost-art { max-width: 440px; margin: 0 0 0 auto; }
.bk-lost-art img { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes bk-land { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- tablet and phone ---------- */
@media (max-width: 1000px) {
	.bk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bk-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.bk-top > .bk-row { min-height: 62px; gap: 10px; }
	.bk-logo { font-size: 19px; }
	.bk-top .bk-head-buy { display: none; }
	.admin-bar .bk-top { top: 46px; }
	/* The back cover hangs out to the right of its box, so the box is nudged left to put the pair, not the box, in the middle. */
	.bk-books { max-width: 250px; margin: 34px auto 0 auto; transform: translateX(-5%); }
	.bk-nums, .bk-cards, .bk-ask .bk-qa, .bk-pitch .bk-why { grid-template-columns: minmax(0, 1fr); }
	.bk-band .wp-block-button, .bk-band .wp-block-button__link { width: 100%; }
	.bk-author .bk-photo { width: 110px; height: 110px; font-size: 40px; }
	.bk-author-row { flex-wrap: wrap; }
	.bk-sec, .bk-band, .bk-top, .bk-foot { padding-left: 22px; padding-right: 22px; }
	.bk-buy .bk-price--now { font-size: 68px; }
}
@media (max-width: 600px) {
	.admin-bar .bk-top { top: 0; }
	/* once the menu folds into its button, the icons sit before it and the button comes last */
	.bk-top .bk-icons { order: 2; margin-left: auto; }
	.bk-top .wp-block-navigation { order: 3; margin-left: 0; }
}
@media (max-width: 359px) {
	.bk-logo { font-size: 17px; }
	.bk-top .bk-icons a { width: 36px; height: 36px; }
}
/* articles and lists: the sidebar drops below on a tablet, and stacks on a phone */
@media (max-width: 1080px) {
	.bk-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.bk-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.bk-stick { display: none; }
}
@media (max-width: 781px) {
	.bk-lost .wp-block-columns { flex-direction: column-reverse; align-items: flex-start; }
	.bk-lost-art { max-width: 250px; margin: 0; }
	.blog:not(.paged) .bk-posts > li:first-child .bk-post { grid-template-columns: minmax(0, 1fr); }
	.blog:not(.paged) .bk-posts > li:first-child .wp-block-post-featured-image { min-height: 200px; }
}
@media (max-width: 640px) {
	.bk-article, .bk-list { padding: 0 22px; }
	.bk-hub { padding: 44px 22px 46px 22px; }
	.bk-hub h1 { margin: 26px 0 30px 0; }
	.bk-side { grid-template-columns: minmax(0, 1fr); }
	.bk-ad { max-width: 420px; }
	.bk-meta { gap: 6px 18px; }
	.bk-crumbs { font-size: 11px; letter-spacing: 0.1em; }
	.bk-answer { padding: 16px 18px 18px 18px; }
	.bk-answer .wp-block-post-excerpt, .bk-answer .wp-block-post-excerpt__excerpt { font-size: 16.5px; }
	.bk-take3 { grid-template-columns: minmax(0, 1fr); }
	.bk-foot-cta { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
	.bk-foot-cta .bk-foot-cover { width: 120px; }
	.bk-byline { padding: 20px; align-items: flex-start; }
	.bk-strip { padding: 22px; }
	.bk-comments .wp-block-comment-template ol { padding-left: 14px; }
	.bk-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--navy); color: #fff; padding: 10px 14px; gap: 12px; align-items: center; box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.15); transform: translateY(110%); transition: transform 0.3s var(--ease); margin: 0; }
	.bk-mbar.is-on { transform: none; }
	.bk-mbar > * { margin: 0; }
	.bk-mbar .bk-mbar-t { font-weight: 800; font-size: 14.5px; line-height: 1.25; flex: 1; }
	.bk-mbar .bk-price--now { font-size: 24px; }
	.single-post, .blog, .archive, .search { padding-bottom: 66px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }


/* ---------- Listen to this article (Answer Kit's listen block, 14 Oct 2026): the reading, read by Lauren ---------- */
.ak-listen {
	margin: 0 0 1.75rem;
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--wp--preset--color--rule, #d5dbe3);
	border-left: 6px solid var(--wp--preset--color--yellow, #ffc421);
	border-radius: 6px;
	background: var(--wp--preset--color--tint, #f4f6f9);
}
.ak-listen-head {
	margin: 0 0 0.6rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
}
.ak-listen-label {
	font-family: var(--wp--preset--font-family--display, Anton, Impact, sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy, #0e1b2c);
}
.ak-listen-by {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey, #5c6875);
}
.ak-listen audio {
	display: block;
	width: 100%;
	max-width: 100%;
}
.ak-listen-empty {
	font-size: 0.85rem;
	color: var(--wp--preset--color--grey, #5c6875);
}