/*
Theme Name: Keira Rumble
Theme URI: https://krumbled.com
Author: Krumbled
Description: Editorial, warm personal founder-brand theme for Keira Rumble. Classic PHP theme with a custom "Shop the Look" block, Person and Article schema, and a performance-first build.
Version: 1.9.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krumbled-keira
*/

/* ---------- Fonts (self-hosted, latin subset). Fonts only download when used. ---------- */
@font-face { font-family: "Gambarino"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/gambarino-latin.woff2") format("woff2"); }
@font-face { font-family: "Zodiak"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/zodiak-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/arimo-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Dreams On Paper"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/dreams-on-paper-latin.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/caveat-latin.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
	--burgundy: #5c2a29;
	--chocolate: #3f291e;
	--cream: #f8f6ed;
	--beige: #eadfcf;
	--blue: #2f4b5f;
	--powder: #d4e0df;
	--blush: #e8d0d0;
	--rose: #b18582;
	--ink: var(--chocolate);
	--paper: var(--cream);
	--serif: "Gambarino", "Iowan Old Style", Georgia, serif;
	--sans: "Arimo", Arial, Helvetica, sans-serif;
	--hand: "Dreams On Paper", "Caveat", "Segoe Script", cursive;
	--gutter: clamp(1rem, 4vw, 2rem);
	--max: 72rem;
	--narrow: 42rem;
	--section: clamp(3rem, 8vw, 6rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--burgundy); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--chocolate); }
:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
p { margin: 0 0 1.2em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { clip-path: none; width: auto; height: auto; margin: 0; padding: .75rem 1rem; top: .5rem; left: .5rem; z-index: 100; background: var(--burgundy); color: var(--cream); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }
.hand { font-family: var(--hand); font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem); line-height: 1; color: var(--burgundy); }
.eyebrow { margin: 0 0 1rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); }
.eyebrow a { color: inherit; text-decoration: none; }
.meta { font-size: .85rem; letter-spacing: .04em; opacity: .75; }

.btn { display: inline-block; padding: .95rem 1.6rem; border: 1px solid var(--burgundy); border-radius: 999px; background: var(--burgundy); color: var(--cream); font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--chocolate); border-color: var(--chocolate); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--burgundy); }
.btn--ghost:hover { background: var(--burgundy); border-color: var(--burgundy); }
.btn--light { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
.btn--light:hover { background: var(--blush); color: var(--burgundy); border-color: var(--blush); }
.link-arrow { font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 246, 237, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(63, 41, 30, .12); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; }
.wordmark { font: 1.7rem/1 var(--serif); text-transform: uppercase; letter-spacing: .02em; color: var(--burgundy); text-decoration: none; }
.wordmark__logo { max-height: 2.5rem; width: auto; }
.nav-toggle { padding: .6rem .9rem; background: none; border: 1px solid var(--chocolate); border-radius: 999px; color: var(--chocolate); font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.nav { position: absolute; inset: 100% 0 auto; background: var(--cream); border-bottom: 1px solid rgba(63, 41, 30, .12); padding: 0 var(--gutter); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s, visibility .3s; }
.nav.is-open { max-height: 70vh; visibility: visible; padding-block: 1rem 1.5rem; }
.nav__list, .footer-menu, .social { list-style: none; margin: 0; padding: 0; }
.nav__list a { display: block; padding: .7rem 0; font: 1.9rem/1.1 var(--serif); color: var(--chocolate); text-decoration: none; }
.nav__list a:hover, .nav__list .current-menu-item a { color: var(--burgundy); }
@media (min-width: 860px) {
	.nav-toggle { display: none; }
	.nav { position: static; max-height: none; visibility: visible; overflow: visible; background: none; border: 0; padding: 0; }
	.nav__list { display: flex; gap: 2rem; }
	.nav__list a { padding: .25rem 0; font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
}

/* ---------- Hero (home) ---------- */
.hero { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 6vw, 5rem); align-items: center; }
.hero__title { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.25rem); margin-bottom: .4em; color: var(--chocolate); }
.hero__intro { max-width: 34rem; font-size: 1.15rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__media { margin: 0; position: relative; padding: 0 1rem 2.5rem 0; }
.print { position: relative; padding: .8rem; background: var(--cream); border: 1px solid rgba(63, 41, 30, .1); box-shadow: 14px -14px 0 0 var(--powder), 0 18px 40px -18px rgba(63, 41, 30, .45); transform: rotate(-1.6deg); } /* powder-blue card peeking out, like the brand templates */
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.print--tilt-right { transform: rotate(1.8deg); }
.print--empty { display: grid; place-items: center; aspect-ratio: 4 / 5; text-align: center; padding: 2rem; font-size: .9rem; opacity: .8; }
.hero__note { position: absolute; right: 0; bottom: 0; margin: 0; transform: rotate(-5deg); background: var(--blush); padding: .4rem .9rem .5rem; box-shadow: 0 6px 14px -6px rgba(63, 41, 30, .4); }
@media (min-width: 860px) {
	.hero { grid-template-columns: 1.15fr .85fr; gap: 5rem; }
	.hero__media { margin-right: -1rem; margin-top: 1.5rem; }
}

/* ---------- Page headers ---------- */
.page-header { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.page-header__title { font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem); margin-bottom: .25em; max-width: 14ch; }
.page-header__hand { margin-top: .25rem; transform: rotate(-1.5deg); transform-origin: left; }
.page-header__intro { max-width: 38rem; font-size: 1.15rem; }
.about__head { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vw, 5rem); align-items: center; }
.about__lead { font: clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.25 var(--serif); max-width: 30rem; }
@media (min-width: 860px) { .about__head { grid-template-columns: 1.2fr .8fr; gap: 5rem; } }

/* ---------- Cards, grids, strip ---------- */
.grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: 1fr; padding-bottom: var(--section); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2rem; } }
.card { margin: 0; }
.card__media { display: block; overflow: hidden; background: var(--beige); }
.card__media img, .card__placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.card__placeholder { display: block; background: linear-gradient(160deg, var(--powder), var(--blush)); }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding-top: 1rem; }
.card__title { font-size: 1.7rem; margin: 0; }
.card__title a { color: var(--chocolate); text-decoration: none; }
.card__title a:hover { color: var(--burgundy); }
/* Slightly off-grid rhythm on wide screens only; structure stays a clean 3-col grid. */
@media (min-width: 900px) {
	.grid .card:nth-child(3n+2) { transform: translateY(2rem); }
	.grid .card:nth-child(3n+2) .card__media { transform: rotate(.6deg); }
	.grid .card:nth-child(3n) .card__media { transform: rotate(-.5deg); }
	.grid--style .card:nth-child(3n+2) { transform: translateY(3rem); }
}

.pills { display: flex; gap: .5rem; overflow-x: auto; padding-block: .25rem 2.5rem; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; padding: .5rem 1rem; border: 1px solid rgba(63, 41, 30, .35); border-radius: 999px; font: 600 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--chocolate); text-decoration: none; }
.pill:hover { border-color: var(--burgundy); color: var(--burgundy); }
.pill.is-current { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream); }

.strip { padding-block: var(--section); background: var(--beige); }
.strip--related { margin-top: var(--section); }
.strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.strip__title { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); margin: 0; }
.strip__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 1.5rem; scrollbar-width: thin; }
.strip__track .card { flex: 0 0 min(72vw, 18rem); scroll-snap-align: start; }
@media (min-width: 900px) {
	.strip__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; overflow: visible; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-bottom: 3rem; }
	.strip__track .card { flex: none; }
	.strip__track .card:nth-child(2) { transform: translateY(2.5rem); }
	.strip__track .card:nth-child(1) .card__media { transform: rotate(-.8deg); }
	.strip__track .card:nth-child(3) .card__media { transform: rotate(.8deg); }
}

/* ---------- Single & content ---------- */
.single__header { padding-block: clamp(2.5rem, 7vw, 5rem) 2rem; text-align: center; }
.single__title { font-size: clamp(2.4rem, 1.5rem + 4.5vw, 4.5rem); }
.single__media { margin: 0 auto 3rem; }
.single__media img { width: 100%; max-height: 80vh; object-fit: cover; }
.single__media figcaption { font-size: .82rem; opacity: .7; margin-top: .6rem; }
.entry-content { padding-bottom: var(--section); }
.entry-content > * { margin-block: 0 1.4em; }
.entry-content h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-top: 2em; }
.entry-content h3 { font-size: 1.7rem; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li { margin-bottom: .4em; }
.entry-content img { height: auto; }
.entry-content .alignwide { max-width: min(var(--max), 100vw - var(--gutter) * 2); margin-inline: auto; width: min(var(--max), 100vw - var(--gutter) * 2); position: relative; left: 50%; transform: translateX(-50%); }
.entry-content .alignfull { width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
.entry-content .wp-block-image figcaption, .entry-content figcaption { font-size: .82rem; opacity: .75; }
.entry-content blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 2px solid var(--rose); font: 1.6rem/1.3 var(--serif); }
.entry-content blockquote cite { display: block; margin-top: .6rem; font: 600 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.entry-content hr { border: 0; border-top: 1px solid rgba(63, 41, 30, .3); margin-block: 3rem; }
.entry-content .wp-block-table td, .entry-content .wp-block-table th { border-color: rgba(63, 41, 30, .3); padding: .5rem .75rem; }

/* Block styles Keira can pick in the editor */
.is-style-polaroid img { background: var(--cream); padding: .7rem .7rem 2.6rem; box-shadow: 0 14px 30px -14px rgba(63, 41, 30, .5); border: 1px solid rgba(63, 41, 30, .08); transform: rotate(-1.4deg); }
.is-style-polaroid figcaption { font-family: var(--hand); font-size: 1.5rem; opacity: 1; color: var(--burgundy); margin-top: -2.2rem; text-align: center; position: relative; }
.is-style-tilt-left img { transform: rotate(-2deg); }
.is-style-tilt-right img { transform: rotate(2deg); }
.is-style-framed img { border: .7rem solid var(--powder); }
.is-style-handwritten { font: 500 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.15 var(--hand); color: var(--burgundy); transform: rotate(-1.2deg); }
.is-style-eyebrow { font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); }
.wp-block-quote.is-style-statement { border: 0; padding: 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; text-align: center; color: var(--burgundy); }
.is-style-panel-burgundy, .is-style-panel-blue, .is-style-panel-beige { padding: clamp(1.5rem, 5vw, 3.5rem); }
.is-style-panel-burgundy { background: var(--burgundy); color: var(--blush); }
.is-style-panel-burgundy :is(h2, h3, h4, a) { color: var(--cream); }
.is-style-panel-blue { background: var(--powder); }
.is-style-panel-beige { background: var(--beige); }
.has-burgundy-background-color { background: var(--burgundy); } .has-burgundy-color { color: var(--burgundy); }
.has-chocolate-background-color { background: var(--chocolate); } .has-chocolate-color { color: var(--chocolate); }
.has-cream-background-color { background: var(--cream); } .has-cream-color { color: var(--cream); }
.has-beige-background-color { background: var(--beige); } .has-beige-color { color: var(--beige); }
.has-blue-background-color { background: var(--blue); } .has-blue-color { color: var(--blue); }
.has-powder-background-color { background: var(--powder); } .has-powder-color { color: var(--powder); }
.has-blush-background-color { background: var(--blush); } .has-blush-color { color: var(--blush); }
.has-rose-background-color { background: var(--rose); } .has-rose-color { color: var(--rose); }

/* Existing recipe posts: ingredient/method lists read well by default */
.entry-content .wp-block-columns { gap: 2rem; }
.tags { font-size: .85rem; } .tags a { margin-right: .5rem; }
.byline { display: flex; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding: 1.5rem; background: var(--beige); }
.byline__img img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.byline__name { font: 1.6rem/1 var(--serif); margin: 0 0 .3rem; }
.byline__bio { font-size: .9rem; margin: 0; }

/* ---------- Press ---------- */
.press { padding-bottom: var(--section); }
.press__group { margin-bottom: 3rem; }
.press__type { font-size: 1rem; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); padding-bottom: 1rem; border-bottom: 1px solid var(--chocolate); margin-bottom: 0; }
.press__list { list-style: none; margin: 0; padding: 0; }
.press__item { display: grid; gap: .25rem 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(63, 41, 30, .25); }
.press__outlet { font: 600 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.press__main { display: flex; flex-direction: column; gap: .3rem; }
.press__title { font: clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); color: var(--chocolate); text-decoration: none; }
a.press__title:hover { color: var(--burgundy); text-decoration: underline; }
.press__blurb { font-size: .95rem; opacity: .85; max-width: 40rem; }
.press__date { font-size: .85rem; opacity: .7; }
@media (min-width: 800px) { .press__item { grid-template-columns: 11rem 1fr 8rem; align-items: baseline; } .press__date { text-align: right; } }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--burgundy); box-shadow: 0 0 0 100vmax var(--burgundy); clip-path: inset(0 -100vmax); color: var(--blush); }
.cta__title { font: clamp(2rem, 1.4rem + 3vw, 3.5rem)/1.05 var(--serif); margin: 0; color: var(--cream); }
@media (min-width: 800px) { .cta { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section); padding-block: 3rem 2rem; background: var(--chocolate); color: var(--beige); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__inner { display: grid; gap: 2rem; }
.site-footer__name { font: 2.4rem/1 var(--serif); text-transform: uppercase; color: var(--blush); margin: 0 0 .4rem; }
.site-footer__role { margin: 0; font-size: .9rem; }
.footer-menu, .social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.site-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(248, 246, 237, .2); font-size: .8rem; opacity: .8; }
.site-footer__legal p { margin: 0; }
@media (min-width: 800px) { .site-footer__inner { grid-template-columns: 1fr auto auto; align-items: end; } }

/* ---------- Forms, comments, pagination ---------- */
.search-form { display: flex; gap: .5rem; margin-bottom: 2.5rem; max-width: 34rem; }
input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--chocolate); border-radius: 0; background: transparent; color: inherit; font: inherit; }
.comments { padding-bottom: var(--section); }
.comments__title { font-size: 2rem; }
.comments__list, .comments__list ol { list-style: none; padding: 0; }
.comments__list .comment-body { padding: 1.25rem 0; border-top: 1px solid rgba(63, 41, 30, .2); font-size: .95rem; }
.comments__list .avatar { border-radius: 50%; float: left; margin-right: 1rem; }
.comment-form label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.comment-form input[type="submit"] { padding: .95rem 1.6rem; border: 0; border-radius: 999px; background: var(--burgundy); color: var(--cream); font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.navigation.pagination, .page-numbers { font: 600 .78rem/1 var(--sans); letter-spacing: .1em; }
.nav-links, ul.page-numbers { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; padding: 0; margin: 0 0 var(--section); }
.page-numbers { padding: .6rem .9rem; text-decoration: none; }
a.page-numbers { border: 1px solid rgba(63, 41, 30, .3); border-radius: 999px; }
.page-numbers.current { background: var(--burgundy); color: var(--cream); border-radius: 999px; }

/* =====================================================================
   v1.1: Story layout, photo-first layouts, journal styles, interactions
   ===================================================================== */
body { overflow-x: clip; }
.btn--light { border-radius: 999px; }

/* Announcement bar */
.announce { background: var(--powder); text-align: center; padding: .55rem var(--gutter); font: italic 1.05rem/1.3 var(--serif); }
.announce p { margin: 0; }
.announce a { color: var(--chocolate); text-decoration: none; }
.announce a:hover { text-decoration: underline; }

/* Section titles: centred serif caps with a short rule */
.section-title { text-align: center; text-transform: uppercase; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin: 0; padding-bottom: 1.1rem; position: relative; }
.section-title::after { content: ""; display: block; width: 7rem; height: 1px; background: currentColor; margin: 1rem auto 0; }
.strip__head { justify-content: center; }
.strip__more { text-align: center; margin: 1rem 0 0; }
.strip { background: var(--cream); }
.strip--related { background: var(--beige); }

/* Cards: category tag over photo, excerpt, read more */
.card__media { position: relative; }
.card__media > a { display: block; }
.card__media .tag { position: absolute; left: .75rem; bottom: .75rem; padding: .45rem .9rem; border-radius: 999px; background: var(--burgundy); color: var(--cream); font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__media .tag:hover { background: var(--chocolate); color: var(--cream); }
.card__cat { display: none; }
.card__excerpt { margin: .7rem 0 .9rem; font-size: .95rem; opacity: .9; }
.card__more { display: inline-block; color: var(--chocolate); }
.card__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }

/* Journal layout: mosaic (titles over photos) */
.grid--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(15rem, 52vw, 26rem); gap: .5rem; grid-auto-flow: dense; padding-inline: 0; }
.grid--mosaic .card { position: relative; overflow: hidden; background: var(--chocolate); transform: none !important; }
.grid--mosaic .card__media, .grid--mosaic .card__media > a:not(.tag) { position: absolute; inset: 0; }
.grid--mosaic .card__media, .grid--stories .card__media { transform: none !important; }
.grid--mosaic .card__media img, .grid--mosaic .card__placeholder { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: none !important; }
.grid--mosaic .card:hover .card__media img { transform: scale(1.04) !important; }
.grid--mosaic .card__media .tag { top: .75rem; bottom: auto; z-index: 2; }
.grid--mosaic .card__body { position: absolute; inset: auto 0 0; padding: 4rem 1rem 1.1rem; background: linear-gradient(to top, rgba(40, 24, 17, .82), transparent); pointer-events: none; }
.grid--mosaic .card__title a { color: var(--cream); pointer-events: auto; }
.grid--mosaic .card__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
.grid--mosaic .card__title a::after { content: ""; position: absolute; inset: 0; }
.grid--mosaic .card__excerpt, .grid--mosaic .card__more { display: none; }
.grid--mosaic .card:nth-child(5n+1) { grid-row: span 2; }
@media (min-width: 900px) {
	.grid--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 20rem; }
	.grid--mosaic .card:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
	.grid--mosaic .card:nth-child(5n+4) { grid-column: span 2; }
}

/* Journal layout: story cards (colour blocks, handwritten label) */
.grid--stories .card { display: flex; flex-direction: column; transform: none !important; }
.grid--stories .card__media .tag { display: none; }
.grid--stories .card__media img, .grid--stories .card__placeholder { transform: none !important; }
.grid--stories .card__body { flex: 1; padding: 1.4rem 1.4rem 1.6rem; background: var(--powder); }
.grid--stories .card:nth-child(4n+2) .card__body { background: var(--blush); }
.grid--stories .card:nth-child(4n+3) .card__body { background: var(--beige); }
.grid--stories .card:nth-child(4n) .card__body { background: #d9c3bf; }
.grid--stories .card__cat { display: block; margin: 0 0 .5rem; font: 500 1.7rem/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--burgundy); transform: rotate(-2deg); transform-origin: left; }
.grid--stories .card__excerpt { display: none; }

/* Feature hero (homepage): full-bleed photo, big centred title */
.feature-hero { position: relative; display: grid; place-items: center; min-height: min(80vh, 46rem); color: var(--cream); overflow: hidden; background: var(--chocolate); }
.feature-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-hero::after { content: ""; position: absolute; inset: 0; background: rgba(40, 24, 17, .38); }
.feature-hero__text { position: relative; z-index: 1; text-align: center; padding: 4rem var(--gutter); max-width: 56rem; }
.feature-hero__text .eyebrow { color: var(--blush); }
.feature-hero__title { font-size: clamp(2.2rem, 1.3rem + 4.5vw, 5rem); text-transform: uppercase; margin-bottom: 1.5rem; }
.feature-hero__title a { color: var(--cream); text-decoration: none; }

/* Homepage: live Shop the Look */
.shopfeature { background: var(--powder); padding-block: var(--section); }
.shopfeature__inner { display: grid; gap: 2rem; align-items: center; }
.shopfeature__media .stl { margin: 0; }
.shopfeature__title { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.5rem); }
.shopfeature .hand { margin: 0 0 .5rem; transform: rotate(-3deg); display: inline-block; }
@media (min-width: 900px) { .shopfeature__inner { grid-template-columns: 1.1fr .9fr; gap: 5rem; } .shopfeature__text { padding-right: 2rem; } }

/* ---------- Story layout: big type, colour panels, full-bleed ---------- */
.story-hero { padding-block: clamp(2.5rem, 7vw, 5rem); overflow: hidden; }
.story-hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.story-hero__title { font-size: clamp(3rem, 1.5rem + 8vw, 8rem); line-height: .95; letter-spacing: -.02em; margin-bottom: .3em; overflow-wrap: anywhere; }
.story-hero__media { margin: 0; }
.story-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; } /* arch */
.tone-burgundy { background: var(--burgundy); color: var(--blush); }
.tone-burgundy .eyebrow, .tone-burgundy .eyebrow a, .tone-burgundy .story-hero__title { color: var(--cream); }
.tone-blue { background: var(--powder); color: var(--chocolate); }
.tone-blush { background: var(--blush); color: var(--burgundy); }
.tone-beige { background: var(--beige); color: var(--chocolate); }
@media (min-width: 860px) { .story-hero__inner { grid-template-columns: 1.3fr .7fr; gap: 4rem; } .story-hero__media { margin-bottom: -6rem; position: relative; z-index: 2; } .story-hero { padding-bottom: 0; } .story-hero__text { padding-bottom: 5rem; } }

.entry-content--story { padding-bottom: 0; }
.entry-content--story > * { max-width: calc(var(--narrow) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.entry-content--story > .alignwide { max-width: calc(var(--max) + var(--gutter) * 2); width: 100%; left: 0; transform: none; }
.entry-content--story > .alignfull { max-width: none; width: 100%; padding-inline: 0; left: 0; transform: none; }
.entry-content--story > :first-child { margin-top: clamp(3rem, 8vw, 7rem); }
.entry-content--story p:not([class*="is-style-"]):not(.has-small-font-size) { font: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem)/1.22 var(--serif); letter-spacing: -.005em; }
.entry-content--story h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); line-height: .98; }
.entry-content--story h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.entry-content--story li { font: clamp(1.3rem, 1.1rem + .8vw, 1.8rem)/1.3 var(--serif); }
.entry-content--story blockquote { border: 0; padding-inline: var(--gutter); font-size: clamp(2rem, 1.3rem + 3.5vw, 4.5rem); line-height: 1; color: var(--burgundy); }
.entry-content--story > .wp-block-group.alignfull, .entry-content--story > .wp-block-columns.alignfull { margin-block: 0; }
.entry-content--story .wp-block-columns.alignfull { gap: 0; }
.entry-content--story .wp-block-columns.alignfull > .wp-block-column > .wp-block-group { height: 100%; }
.entry-content--story .wp-block-columns.alignfull .wp-block-image { margin: 0; }
.entry-content--story .is-style-panel-burgundy p:not([class*="is-style-"]), .entry-content--story .is-style-panel-burgundy h2 { color: var(--cream); }
.layout-story .single__footer { margin-top: var(--section); }
.layout-story .strip--related { margin-top: 0; }

/* Image shapes: cut photos into soft shapes */
.is-style-arch img { border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.is-style-petal img { border-radius: 0 60% 0 60%; aspect-ratio: 1; object-fit: cover; width: 100%; }
.is-style-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; }
.is-style-arch, .is-style-petal, .is-style-circle { overflow: visible; }

/* Sticker */
p.is-style-sticker { display: grid; place-items: center; width: 8.5rem; height: 8.5rem; margin-block: 0 !important; padding: 1rem; border-radius: 50%; background: var(--blush); color: var(--burgundy); text-align: center; font: 500 1.6rem/.95 var(--hand); transform: rotate(-10deg); box-shadow: 0 8px 18px -8px rgba(63, 41, 30, .5); }

/* Photo rail: swipeable gallery */
.wp-block-gallery.is-style-rail { display: flex !important; flex-wrap: nowrap !important; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
.wp-block-gallery.is-style-rail > .wp-block-image { flex: 0 0 min(72vw, 22rem) !important; width: auto !important; margin: 0 !important; scroll-snap-align: start; }
.wp-block-gallery.is-style-rail img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Accordion (core Details block): FAQs, speaking topics */
.wp-block-details { border-top: 1px solid rgba(63, 41, 30, .35); padding-block: 1rem; }
.wp-block-details:last-of-type { border-bottom: 1px solid rgba(63, 41, 30, .35); }
.wp-block-details summary { cursor: pointer; font: 1.6rem/1.2 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font: 300 1.8rem/1 var(--sans); transition: transform .25s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { margin-top: .75rem; }

/* ---------- Photo-first post hero ---------- */
.photo-hero { position: relative; display: grid; align-items: end; min-height: min(92vh, 60rem); color: var(--cream); background: var(--chocolate); overflow: hidden; }
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 24, 17, .8), rgba(40, 24, 17, .05) 60%); }
.photo-hero__text { position: relative; z-index: 1; padding-block: 3rem 3.5rem; }
.photo-hero__title { font-size: clamp(2.8rem, 1.5rem + 6.5vw, 7rem); line-height: .96; max-width: 16ch; text-transform: none; }
.photo-hero .eyebrow, .photo-hero .eyebrow a { color: var(--blush); }
.photo-hero .meta { opacity: .85; }
.layout-photo .entry-content { padding-top: clamp(2.5rem, 6vw, 5rem); }

/* ---------- Interactions ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.admin-bar .progress { top: 32px; }
.progress span { display: block; height: 100%; background: var(--burgundy); transform: scaleX(0); transform-origin: left; }
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s ease; }
.js .reveal.is-in { opacity: 1; translate: none; }
.grid .card.reveal.is-in:nth-child(3n+2), .strip__track .card.reveal.is-in:nth-child(2) { transition-delay: .08s; }
.grid .card.reveal.is-in:nth-child(3n) { transition-delay: .16s; }
.print { transition: transform .5s ease; }
.print:hover { transform: rotate(0deg) scale(1.01); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: 2rem; }
.share__label { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-right: .5rem; }
.share__btn { padding: .65rem 1.1rem; border: 1px solid var(--chocolate); border-radius: 999px; background: transparent; color: var(--chocolate); font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.share__btn:hover { background: var(--chocolate); color: var(--cream); }
.share__btn[hidden] { display: none; }

.zoomable { cursor: zoom-in; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(40, 24, 17, .94); color: var(--cream); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: .75rem; min-width: 0; padding: 1rem 0; }
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { font-size: .85rem; opacity: .85; text-align: center; max-width: 40rem; padding-inline: 1rem; }
.lightbox__close, .lightbox__nav { background: none; border: 0; color: var(--cream); font: 300 2.6rem/1 var(--sans); cursor: pointer; padding: 1rem; }
.lightbox__close { position: absolute; top: .5rem; right: .75rem; z-index: 2; }
.lightbox.is-single .lightbox__nav { visibility: hidden; }
@media (max-width: 640px) { .lightbox[open] { grid-template-columns: 2.5rem 1fr 2.5rem; } .lightbox__nav { padding: .25rem; } }
.entry-content--story > p.is-style-sticker { margin-left: max(var(--gutter), calc((100% - var(--narrow)) / 2)); margin-right: auto; padding-inline: 1rem; }

/* =====================================================================
   v1.2: composable sections and canvas templates
   ===================================================================== */
.entry-content--canvas { padding-bottom: 0; }
.entry-content--canvas > * { max-width: calc(var(--narrow) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.entry-content--canvas > .kk-block, .entry-content--canvas > .alignfull { max-width: none; width: 100%; padding-inline: 0; margin-block: 0; left: 0; transform: none; }
.entry-content--canvas > .alignwide { max-width: calc(var(--max) + var(--gutter) * 2); width: 100%; left: 0; transform: none; }
.entry-content--canvas > .kk-block.wrap, .entry-content--canvas > .kk-block.hero, .entry-content--canvas > .kk-block.press { max-width: calc(var(--max) + var(--gutter) * 2); padding-inline: var(--gutter); }
.entry-content--canvas > .kk-block.strip, .entry-content--canvas > .kk-block.week, .entry-content--canvas > .kk-block.shopfeature, .entry-content--canvas > .feature-hero { max-width: none; padding-inline: 0; }
.entry-content--canvas > .kk-block.week, .entry-content--canvas > .kk-block.shopfeature { padding-block: clamp(2.5rem, 7vw, 5rem); }
.entry-content--canvas > .kk-block.strip { padding-block: var(--section); }
.entry-content--canvas > :first-child:not(.kk-block) { margin-top: clamp(2rem, 5vw, 4rem); }
.entry-content--canvas > :last-child:not(.kk-block) { margin-bottom: clamp(2rem, 5vw, 4rem); }
.entry-content--canvas > .kk-block.kk-posts:not(.strip):not(.kk-posts--list) { padding-top: var(--section); }
.entry-content--canvas > .kk-block.kk-posts--list { padding-block: var(--section) 0; }
.entry-content--canvas > .kk-block.press { padding-block: var(--section); }

.kk-head { margin-bottom: 2rem; }
.kk-more { text-align: center; margin: 0 0 var(--section); }
.strip .kk-more { margin: 1rem 0 0; }
.kk-empty { margin: 1rem auto; padding: 1.25rem; max-width: 40rem; background: var(--beige); text-align: center; font-size: .9rem; }
.kk-editor-block .reveal { opacity: 1; translate: none; }

.postlist { list-style: none; margin-inline: auto; padding: 0; }
.postlist__item { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: center; padding-block: 1.1rem; border-bottom: 1px solid rgba(63, 41, 30, .25); }
.postlist__thumb img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 50%; }
.postlist__title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin: 0; }
.postlist__title a { color: var(--chocolate); text-decoration: none; }
.postlist__title a:hover { color: var(--burgundy); }
.postlist .eyebrow { margin-bottom: .35rem; }

/* =====================================================================
   Recipe block: share row on top, ingredients left, numbered steps right
   ===================================================================== */
.recipe { margin-block: 2.5rem; }
/* Break out of the narrow reading column so two columns have room */
.entry-content > .recipe { position: relative; left: 50%; transform: translateX(-50%); width: min(88rem, 100vw - var(--gutter) * 2); max-width: none; }
.entry-content--story > .recipe, .entry-content--canvas > .recipe { left: 0; transform: none; margin-inline: auto; width: min(88rem, 100% - var(--gutter) * 2); padding-inline: 0; }

.recipe__share { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem clamp(.5rem, 1.5vw, 1rem); margin-bottom: 2.25rem; }
.recipe__btn { min-width: 5.25rem; padding: .5rem 1rem; border: 1px solid var(--chocolate); border-radius: 999px; background: transparent; color: var(--chocolate); font: .85rem/1 var(--serif); text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.recipe__btn:hover, .recipe__btn:focus-visible, .recipe__btn[aria-pressed="true"] { background: var(--chocolate); color: var(--cream); }
.recipe__btn[hidden] { display: none; }
.recipe__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 2rem; list-style: none; margin: -1rem 0 2.25rem; padding: 0; font-size: .95rem; }
.recipe__meta-label { font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy); margin-right: .35rem; }

.recipe .recipe__title { font-family: "Gambarino", Georgia, serif; font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); line-height: 1; text-align: center; margin: 0 0 1.5rem; }
.recipe__cols { display: grid; gap: 2.5rem; }
.recipe .recipe__h { font-family: "Zodiak", Georgia, serif; font-size: clamp(1rem, .85rem + .5vw, 1.25rem); line-height: 1.2; margin: 0 0 .9rem; }
.recipe .recipe__group { font: .8rem/1.4 "Zodiak", Georgia, serif; margin: 1.4rem 0 .5rem; }
.recipe .recipe__group:first-of-type { margin-top: 0; }
.recipe__list, .recipe__ol { margin: 0 0 1rem; padding: 0; list-style: none; }
.recipe__list li { padding: .18rem 0; }
.recipe__list label { display: flex; gap: .65rem; align-items: baseline; cursor: pointer; }
.recipe__list input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--burgundy); transform: translateY(.15rem); }
.recipe__list input:checked + span { text-decoration: line-through; opacity: .5; }
.recipe__ol { counter-reset: step; }
.recipe__ol li { counter-increment: step; position: relative; padding: 0 0 .75rem 2.4rem; }
.recipe__ol li::before { content: counter(step) "."; position: absolute; left: 0; top: 0; color: var(--rose); }
.recipe__notes { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(63, 41, 30, .3); font-size: .95rem; }
@media (min-width: 800px) { .recipe__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4rem; } .recipe__ing { position: sticky; top: 6rem; align-self: start; } }

/* Recipe block in the editor */
.kk-recipe-editor { background: var(--beige, #eadfcf); padding: 1rem; }
.kk-recipe-editor__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.kk-recipe-editor__hint { font-size: 12px; color: #757575; margin: .5rem 0 0; }

/* Print: recipe only */
@media print {
	.site-header, .site-footer, .announce, .progress, .strip, .comments, .single__footer, .recipe__share, .lightbox, .skip-link { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.entry-content > .recipe { position: static; transform: none; width: 100%; }
	.recipe__cols { grid-template-columns: 1fr 1.6fr; gap: 1.5rem; }
	.recipe__ing { position: static; }
	.recipe__ol li { break-inside: avoid; }
	.wpb_single_image, .vc_single_image-wrapper { display: none !important; }
	a { color: inherit; text-decoration: none; }
}

/* Header search */
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.search-toggle { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--chocolate); text-decoration: none; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--burgundy); color: var(--cream); }
.search-panel { background: var(--beige); border-top: 1px solid rgba(63, 41, 30, .12); padding-block: 1.1rem 0; }
.search-panel[hidden] { display: none; }
.search-panel .search-form { margin: 0 auto 1.1rem; max-width: 40rem; }
@media (min-width: 860px) {
	.nav { order: 2; margin-left: auto; }
	.header-actions { order: 3; margin-left: 1.25rem; }
}

/* Recipe card: colour theming, Arimo pills, smaller copy */
.recipe { --rc-ink: var(--chocolate); --rc-label: var(--burgundy); --rc-hi: var(--rose); --rc-h: clamp(1rem, .85rem + .5vw, 1.25rem); color: var(--rc-ink); font-size: 1rem; }
.recipe.has-bg, .entry-content .recipe.has-bg { padding: clamp(1.5rem, 4vw, 3rem); }
.recipe.is-dark { --rc-ink: var(--cream); --rc-label: var(--blush); --rc-hi: var(--blush); }
.recipe .recipe__h { font-size: var(--rc-h); }
.recipe .recipe__group { font-size: calc(var(--rc-h) - 4pt); }
.recipe .recipe__btn { font-family: "Arimo", Arial, Helvetica, sans-serif; border-color: var(--rc-ink); color: var(--rc-ink); }
.recipe .recipe__btn:hover, .recipe .recipe__btn:focus-visible, .recipe .recipe__btn[aria-pressed="true"] { background: var(--rc-ink); color: var(--rc-bg, var(--cream)); }
.recipe .recipe__meta, .recipe .recipe__notes { font-size: 1em; }
.recipe .recipe__meta-label { color: var(--rc-label); }
.recipe .recipe__ol li::before { color: var(--rc-hi); }
.recipe .recipe__list input { accent-color: var(--rc-label); }
.recipe .recipe__notes { border-top-color: rgba(63, 41, 30, .3); }
.recipe.is-dark .recipe__notes { border-top-color: rgba(248, 246, 237, .35); }
@media print { .recipe { background: none !important; color: #000; padding: 0; } }

/* Pill buttons: customisable colour / font / size (set per Recipe block in the editor) */
.recipe .recipe__btn { --pill-c: var(--pill, var(--rc-ink)); font-family: var(--pill-font, "Arimo", Arial, Helvetica, sans-serif); font-size: var(--pill-size, .85rem); padding: .6em 1.2em; min-width: 6.2em; border-color: var(--pill-c); color: var(--pill-c); }
.recipe .recipe__btn:hover, .recipe .recipe__btn:focus-visible, .recipe .recipe__btn[aria-pressed="true"] { background: var(--pill-c); color: var(--rc-bg, var(--cream)); }

/* =====================================================================
   v1.5: photos square + larger, tag pills customisable, comment spacing
   ===================================================================== */
/* Shaped photos: always a true square (never a squeezed oval), full width of their column, framed on the face */
.wp-block-image.is-style-square, .wp-block-image.is-style-circle, .wp-block-image.is-style-petal, .wp-block-image.is-style-arch { width: 100%; min-width: min(100%, 20rem); max-width: 40rem; }
.wp-block-image.is-style-square img, .wp-block-image.is-style-circle img, .wp-block-image.is-style-petal img, .wp-block-image.is-style-arch img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover; object-position: 50% 22%; }
.wp-block-image.is-style-square img { border-radius: 4px; }
/* Give the photo the bigger half of a photo | text row */
.wp-block-columns > .wp-block-column:has(> .wp-block-image[class*="is-style-"]) { flex-basis: 55% !important; }
@media (max-width: 781px) { .wp-block-columns > .wp-block-column:has(> .wp-block-image[class*="is-style-"]) { flex-basis: 100% !important; } }
/* Story hero photo: square too */
.story-hero__media img { aspect-ratio: 1 / 1; object-position: 50% 22%; }

/* Category tag pills on photos: colour, font, size and shape come from Customize > Keira > Category tags */
.card__media .tag { background: var(--tag-bg, var(--burgundy)); color: var(--tag-ink, var(--cream)); font-family: var(--tag-font, var(--sans)); font-size: var(--tag-size, .75rem); border-radius: var(--tag-radius, 999px); padding: .7em 1.4em; }
.card__media .tag:hover { background: var(--tag-bg, var(--burgundy)); color: var(--tag-ink, var(--cream)); filter: brightness(.85); }

/* Comments: room above the reply box and between its fields */
.comments { margin-top: var(--section); padding-top: 0; }
.comments .comment-respond { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(63, 41, 30, .25); }
.comment-reply-title { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); margin: 0 0 1.25rem; }
.comment-form p { margin: 0 0 1.5rem; }
.comment-form .logged-in-as, .comment-form .comment-notes { margin-bottom: 1.75rem; }
.comment-form label { margin-bottom: .5rem; }
.comment-form textarea { min-height: 9rem; }
.comment-form .form-submit { margin-top: 2rem; margin-bottom: 0; }

/* Recipe card: per-element fonts and sizes (set in the block sidebar; defaults below) */
.recipe { --rc-h: var(--rh-size, clamp(1rem, .85rem + .5vw, 1.25rem)); font-size: var(--rc-size, 1rem); font-family: var(--rc-font, inherit); }
.recipe .recipe__title { font-family: var(--rt-font, "Gambarino", Georgia, serif); font-size: var(--rt-size, clamp(2.2rem, 1.5rem + 3vw, 4rem)); overflow-wrap: anywhere; }
.recipe .recipe__h { font-family: var(--rh-font, "Zodiak", Georgia, serif); }
.recipe .recipe__group { font-family: var(--rg-font, var(--rh-font, "Zodiak", Georgia, serif)); font-size: var(--rg-size, calc(var(--rc-h) - 4pt)); }

/* Recipe card: per-element colours (default = the card's text colour) */
.recipe { color: var(--rc-color, var(--rc-ink)); }
.recipe .recipe__title { color: var(--rt-color, var(--rc-color, var(--rc-ink))); }
.recipe .recipe__h { color: var(--rh-color, var(--rc-color, var(--rc-ink))); }
.recipe .recipe__group { color: var(--rg-color, var(--rh-color, var(--rc-color, var(--rc-ink)))); }

/* Hero Story photo: shape and size (Hero Story block sidebar) */
.hero--shape-natural .print img { aspect-ratio: auto; height: auto; }
.hero--shape-square .print img { aspect-ratio: 1 / 1; object-position: 50% 20%; }
@media (min-width: 860px) {
	.hero--size-large { grid-template-columns: 1fr 1fr; }
	.hero--size-xl { grid-template-columns: .85fr 1.15fr; }
}

/* Author box: photo never squeezed; square by default, larger, framed on her face */
.byline { gap: clamp(1rem, 3vw, 1.75rem); align-items: center; }
.byline__img { flex: none; display: block; width: min(var(--byline-size, 140px), 34vw); aspect-ratio: 1 / 1; }
.byline .byline__img img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; border-radius: var(--byline-radius, 0); }
.byline > div { min-width: 0; }
.byline__name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.byline__bio { font-size: .95rem; }

/* Related posts ("Keep reading"): background, heading font/size/colour from Customize */
.strip--related { background: var(--rel-bg, var(--beige)); }
.strip--related .section-title { font-family: var(--rel-font, inherit); font-size: var(--rel-size, clamp(1.9rem, 1.3rem + 2.2vw, 3rem)); color: var(--rel-ink, inherit); }

/* Announcement bar: colours, font, size, style and alignment from Customize */
.announce { background: var(--ann-bg, var(--powder)); color: var(--ann-ink, var(--chocolate)); text-align: var(--ann-align, center); font-family: var(--ann-font, var(--serif)); font-style: var(--ann-style, italic); font-size: var(--ann-size, 1.05rem); }
.announce a, .announce p { color: inherit; font: inherit; }

/* Handwritten note on the hero photo: colour, font, size, tilt (Customize or Hero Story block) */
.hero__note { background: var(--note-bg, var(--blush)); color: var(--note-ink, var(--burgundy)); font-family: var(--note-font, var(--hand)); font-size: var(--note-size, clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem)); transform: rotate(var(--note-rotate, -5deg)); }

/* The note must beat the generic caption rule inside page content (.entry-content figcaption: small, faded) */
.hero .hero__note, .entry-content .hero .hero__note { background: var(--note-bg, var(--blush)); color: var(--note-ink, var(--burgundy)); font-family: var(--note-font, var(--hand)); font-size: var(--note-size, clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem)); opacity: 1; transform: rotate(var(--note-rotate, -5deg)); }

/* Header and menu bar: colours, fonts, sizes from Customize > Keira > Header and menu bar */
.site-header { background: var(--hdr-bg, rgba(248, 246, 237, .94)); position: var(--hdr-position, sticky); border-bottom-color: var(--hdr-line, rgba(63, 41, 30, .12)); }
.site-header__inner { min-height: var(--hdr-height, 4rem); }
.wordmark { color: var(--logo-ink, var(--burgundy)); font-family: var(--logo-font, var(--serif)); font-size: var(--logo-size, 1.7rem); }
.wordmark__logo { max-height: var(--logo-h, 2.5rem); }
.nav { background: var(--hdr-panel, var(--cream)); }
.nav__list a, .search-toggle, .nav-toggle { color: var(--hdr-ink, var(--chocolate)); }
.nav-toggle { border-color: var(--hdr-ink, var(--chocolate)); }
.nav__list a:hover, .nav__list .current-menu-item a, .nav__list .current_page_item a { color: var(--hdr-hover, var(--burgundy)); }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--hdr-hover, var(--burgundy)); color: var(--hdr-bg, var(--cream)); }
@media (min-width: 860px) {
	.nav { background: none; }
	.nav__list a { font-family: var(--hdr-font, var(--sans)); font-size: var(--hdr-size, .74rem); text-transform: var(--hdr-case, uppercase); letter-spacing: var(--hdr-track, .14em); }
}
@media (max-width: 859px) { .nav__list a { font-family: var(--hdr-font, var(--serif)); text-transform: var(--hdr-case, none); } }

/* =====================================================================
   v1.8: mobile-first headers, no sideways scroll
   ===================================================================== */
html { overflow-x: clip; }
/* Full-bleed and wide blocks: centred with margins (no transform), so nothing can drift sideways */
.entry-content .alignfull { position: relative; left: auto; transform: none; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.entry-content--story > .alignfull, .entry-content--canvas > .alignfull { width: 100%; max-width: none; margin-inline: 0; }

/* Photo-first header: shorter on phones, face-friendly crop, swaps to the mobile photo when one is set */
.photo-hero { min-height: var(--hero-h, 68vh); min-height: var(--hero-h, 68svh); }
.photo-hero picture, .feature-hero picture { position: absolute; inset: 0; display: block; }
.photo-hero picture img { position: absolute; inset: 0; }
.photo-hero__img, .feature-hero__img, .single__media img { object-position: var(--hero-focus, 50% 25%); }
.feature-hero { min-height: var(--hero-h, 62vh); min-height: var(--hero-h, 62svh); }
.photo-hero__text { padding-block: 2rem 2.25rem; }
@media (min-width: 800px) {
	.photo-hero { min-height: min(92vh, 60rem); }
	.feature-hero { min-height: min(80vh, 46rem); }
	.photo-hero__img, .feature-hero__img, .single__media img { object-position: 50% 50%; }
	.photo-hero__text { padding-block: 3rem 3.5rem; }
}
/* Phone-friendly tap targets */
@media (max-width: 799px) {
	.pill, .share__btn, .btn, .recipe__btn { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* Phones, default: the whole header photo, uncropped, with the title underneath (no more cut-off faces) */
@media (max-width: 799px) {
	.photo-hero.hero-natural, .feature-hero.hero-natural { display: block; min-height: 0; background: transparent; color: var(--chocolate); overflow: visible; }
	.hero-natural picture { position: static; display: block; }
	.hero-natural .photo-hero__img, .hero-natural .feature-hero__img, .hero-natural picture img { position: static; display: block; width: 100%; height: auto; object-fit: initial; }
	.photo-hero.hero-natural::after, .feature-hero.hero-natural::after { display: none; }
	.photo-hero.hero-natural .photo-hero__text { padding-block: 1.5rem .5rem; }
	.hero-natural .eyebrow, .hero-natural .eyebrow a { color: var(--burgundy); }
	.hero-natural .photo-hero__title, .hero-natural .feature-hero__title, .hero-natural .feature-hero__title a { color: var(--chocolate); }
	.feature-hero.hero-natural .feature-hero__text { padding: 1.5rem var(--gutter) 2rem; background: var(--beige); }
	.feature-hero.hero-natural .btn--light { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }
}

/* =====================================================================
   v1.9: separate phone and desktop sizes. Base = phone (--x-size-m, auto-scaled
   when only a desktop size is set); from 800px the desktop size (--x-size) applies.
   ===================================================================== */
.hero .hero__note, .entry-content .hero .hero__note { font-size: var(--note-size-m, clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem)); }
.card__media .tag { font-size: var(--tag-size-m, .75rem); }
.announce { font-size: var(--ann-size-m, 1.05rem); }
.strip--related .section-title { font-size: var(--rel-size-m, clamp(1.9rem, 1.3rem + 2.2vw, 3rem)); }
.wordmark { font-size: var(--logo-size-m, 1.7rem); }
.site-header__inner { min-height: var(--hdr-height-m, 4rem); }
.recipe { --rc-h: var(--rh-size-m, clamp(1rem, .85rem + .5vw, 1.25rem)); font-size: var(--rc-size-m, 1rem); }
.recipe .recipe__title { font-size: var(--rt-size-m, clamp(2.2rem, 1.5rem + 3vw, 4rem)); }
.recipe .recipe__group { font-size: var(--rg-size-m, calc(var(--rc-h) - 4pt)); }
.recipe .recipe__btn { font-size: var(--pill-size-m, .85rem); }
@media (max-width: 859px) { .nav__list a { font-size: var(--hdr-size-m, 1.9rem); } }
@media (min-width: 800px) {
	.hero .hero__note, .entry-content .hero .hero__note { font-size: var(--note-size, clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem)); }
	.card__media .tag { font-size: var(--tag-size, .75rem); }
	.announce { font-size: var(--ann-size, 1.05rem); }
	.strip--related .section-title { font-size: var(--rel-size, clamp(1.9rem, 1.3rem + 2.2vw, 3rem)); }
	.wordmark { font-size: var(--logo-size, 1.7rem); }
	.site-header__inner { min-height: var(--hdr-height, 4rem); }
	.recipe { --rc-h: var(--rh-size, clamp(1rem, .85rem + .5vw, 1.25rem)); font-size: var(--rc-size, 1rem); }
	.recipe .recipe__title { font-size: var(--rt-size, clamp(2.2rem, 1.5rem + 3vw, 4rem)); }
	.recipe .recipe__group { font-size: var(--rg-size, calc(var(--rc-h) - 4pt)); }
	.recipe .recipe__btn { font-size: var(--pill-size, .85rem); }
}

/* Per-block phone / desktop controls (sidebar: Phones and desktop) */
@media (max-width: 799px) {
	.kk-hide-m { display: none !important; }
	.kk-m-fs { font-size: var(--kk-m-fs) !important; }
	.kk-m-align-left { text-align: left !important; }
	.kk-m-align-center { text-align: center !important; }
	.kk-m-align-right { text-align: right !important; }
	.kk-m-pad { padding-top: var(--kk-m-pad) !important; padding-bottom: var(--kk-m-pad) !important; }
}
@media (min-width: 800px) { .kk-hide-d { display: none !important; } }