/*
Theme Name: Classy Reads, Gather Round
Theme URI: https://classyreads.com/
Author: Dependent Media
Author URI: https://dependentmedia.com/
Description: Campfire-night theme for Classy Reads (Books by Maxwell): the Jacob's Gold trail map, a picture-book reader, a gold pan, the House of Maxwell. Block theme, no page builder.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: cr-campfire
*/

/* Every looping animation here is transform or opacity on its own HTML element (never inside an SVG, no filters, no
   masks over moving parts, no animated shadows). Loops stop when their section is off screen (.is-off) or when the
   visitor pauses them (.cr-paused, also the start state for prefers-reduced-motion). Entrances are one-shot transitions. */

:root {
	--night: #16110D; --night-2: #231A14; --smoke: #3A2C22;
	--ink: #2A1E15; --ink-soft: #5E4A38;
	--paper: #FBF5E8; --parch: #F2E4C4; --parch-2: #E8D4A8;
	--leather: #7A3B17; --ember: #C8501E; --ember-ink: #A9441A;
	--mustard: #F4C834; --gold: #E9A93A; --flame: #EE9A2E;
	--sky: #62A3C4; --sky-ink: #1E5A7A; --juniper: #3D5A45;
	--star: #F2E4C4; --dim: #C9B48A;
	--display: Besley, Clarendon, "Century Schoolbook", Georgia, serif;
	--body: Gelasio, Georgia, "Times New Roman", serif;
	--word: Rye, Besley, Georgia, serif;
	--gut: clamp(16px, 4vw, 40px);
	--r: 10px;
	--ease: cubic-bezier(.22, .8, .25, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);
}
html { scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
html.cr-lp { font-size: 125%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.1875rem; line-height: 1.65; overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--leather); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ember-ink); outline-offset: 3px; border-radius: 4px; }
.cr-band--night :focus-visible, .cr-header :focus-visible, .cr-hero :focus-visible, .cr-pagehead :focus-visible, .cr-footer :focus-visible, .cr-panel :focus-visible, .cr-pill:focus-visible { outline-color: var(--mustard); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
.cr-vh, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.cr-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--mustard); color: var(--night); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; }
.cr-skip:focus { top: 12px; }
.cr-wrap { box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
.cr-wrap--narrow { max-width: 860px; }
.cr-main { margin: 0; }
.wp-site-blocks > * + *, .cr-main > * + * { margin-block-start: 0; }
.wp-block-post-content > * { margin-block: 0; }
.cr-center { text-align: center; margin-top: 1.6rem; }
.cr-small { font-size: .95rem; color: var(--ink-soft); }
.cr-ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }

/* ---------- type helpers */
.cr-h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.01em; }
.cr-h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.cr-h4 { font-size: 1.2rem; font-weight: 700; }
.cr-h3 a, .cr-h2 a { color: inherit; text-decoration: none; }
.cr-h3 a:hover { text-decoration: underline; }
.cr-kicker { font-family: var(--display); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ember-ink); margin: 0 0 .55em; }
.cr-kicker--gold, .cr-band--night .cr-kicker, .cr-sechead--light .cr-kicker { color: var(--gold); }
.cr-lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 40em; }
.cr-band--night .cr-lead { color: var(--parch); }
.cr-rule { display: flex; align-items: center; gap: .6rem; width: min(260px, 70%); margin: .2rem 0 1.1rem; color: var(--ember); }
.cr-rule > span { flex: 1; height: 2px; background: currentColor; opacity: .55; border-radius: 2px; }
.cr-rule__star { width: 18px; height: 18px; }
.cr-sechead { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.cr-sechead .cr-lead { margin-bottom: 0; }

/* ---------- bands */
.cr-band { padding-block: clamp(3.2rem, 7vw, 6rem); position: relative; }
.cr-band--paper { background: var(--paper); }
.cr-band--parch { background: var(--parch); }
.cr-band--night { background: var(--night); color: var(--parch); }
.cr-band--night a:not(.cr-btn) { color: var(--mustard); }
.cr-band--table { background: linear-gradient(180deg, var(--parch) 0, #EAD8B2 100%); }
.cr-band--creek { background: linear-gradient(180deg, #E6EEE8 0, #D7E3DC 100%); }

/* ---------- buttons, chips, links */
.cr-btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.4rem 0 0; }
.cr-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-family: var(--display); min-height: 24px; }
.cr-link .cr-ico { transition: transform .2s var(--ease); }
.cr-link:hover .cr-ico { transform: translateX(4px); }
.cr-link-btn { background: none; border: 0; color: var(--leather); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 .4rem; }
.cr-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- header */
.cr-header { background: var(--night); color: var(--parch); position: relative; z-index: 60; } /* above the floating pill (50), so the open menu covers it */
.cr-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.cr-brand { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--parch); line-height: 1; padding-block: .4rem; }
.cr-brand__name { font-family: var(--word); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--mustard); letter-spacing: .01em; }
.cr-brand__tag { font-family: var(--display); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; margin-top: .3rem; color: var(--parch); }
.cr-nav__list { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.cr-nav__list a { display: block; padding: .55rem .8rem; color: var(--parch); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1rem; border-radius: 6px; position: relative; }
.cr-nav__list a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: var(--mustard); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.cr-nav__list a:hover::after, .cr-nav__list a[aria-current]::after { transform: scaleX(1); }
.cr-nav__list a[aria-current] { color: var(--mustard); }
.cr-header__end { display: flex; align-items: center; gap: .5rem; }
.cr-menubtn { display: none; }
@media (max-width: 1279px) { /* the six links need 1280 px next to the brand, Pause and Larger print */
	.cr-nav { display: none; }
	.cr-menubtn { display: inline-flex; }
}
@media (max-width: 520px) {
	.cr-lp__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cr-lpbtn { padding-inline: .6rem; }
}
/* slide-in menu */
.cr-panel { position: fixed; inset: 0; z-index: 60; background: rgba(10, 7, 5, .55); }
.cr-panel[hidden] { display: none; }
.cr-panel__in { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); box-sizing: border-box; background: var(--night); color: var(--parch); padding: 1.2rem 1.4rem 0; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s var(--ease); }
.cr-panel.is-open .cr-panel__in { transform: none; }
.cr-panel__list { list-style: none; margin: 1.2rem 0; padding: 0; }
.cr-panel__list a { display: block; padding: .7rem 0; font: 800 1.7rem/1.15 var(--display); color: var(--parch); text-decoration: none; border-bottom: 1px solid rgba(242, 228, 196, .15); }
.cr-panel__list a[aria-current] { color: var(--mustard); }
.cr-panel .cr-camp { margin-top: auto; }

/* ---------- campfire (shared: hero, menu panel, call-out) */
.cr-camp { position: relative; width: 100%; aspect-ratio: 6 / 4.4; color: #0B0806; pointer-events: none; }
.cr-camp__glow { position: absolute; left: 50%; bottom: 4%; width: 92%; aspect-ratio: 2 / 1; margin-left: -46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(238, 154, 46, .55), rgba(200, 80, 30, .22) 55%, rgba(200, 80, 30, 0)); animation: cr-glow 1.7s ease-in-out infinite alternate; }
.cr-camp__pine { position: absolute; left: 2%; bottom: 10%; width: 19%; }
.cr-camp__saguaro { position: absolute; right: 3%; bottom: 10%; width: 22%; }
.cr-camp__ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; }
.cr-camp__fire { position: absolute; left: 50%; bottom: 17%; width: 26%; height: 48%; margin-left: -13%; }
.cr-flame { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%; }
.cr-flame svg { display: block; width: 100%; height: 100%; }
.cr-flame--a { width: 100%; height: 100%; margin-left: -50%; animation: cr-flick-a 1.3s ease-in-out infinite alternate; }
.cr-flame--b { width: 72%; height: 80%; margin-left: -36%; animation: cr-flick-b .95s ease-in-out infinite alternate; }
.cr-flame--c { width: 42%; height: 52%; margin-left: -21%; animation: cr-flick-c .7s ease-in-out infinite alternate; }
.cr-spark { position: absolute; left: 50%; bottom: 40%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #FFD98A; opacity: 0; animation: cr-spark var(--t) linear var(--d) infinite; }
.cr-camp__smoke { position: absolute; left: 50%; bottom: 55%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 180, 138, .09), rgba(201, 180, 138, 0)); opacity: 0; animation: cr-smoke 7s ease-out infinite; }
.cr-camp__smoke--b { animation-delay: 3.5s; }
.cr-camp__logs { position: absolute; left: 50%; bottom: 9%; width: 40%; margin-left: -20%; }
@keyframes cr-glow { from { opacity: .65; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes cr-flick-a { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.94, 1.08) skewX(-3deg); } 100% { transform: scale(1.04, .94) skewX(3deg); } }
@keyframes cr-flick-b { 0% { transform: scale(1, .96) skewX(2deg); } 100% { transform: scale(.92, 1.1) skewX(-4deg); } }
@keyframes cr-flick-c { 0% { transform: scale(1, .9); } 100% { transform: scale(.88, 1.12) translateY(-3%); } }
@keyframes cr-smoke { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120%) scale(1.6); } }
.cr-camp__fire .cr-spark { bottom: 30%; }
@keyframes cr-spark { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -420%) scale(.4); } }
/* stoked: a one-shot flare */
.cr-camp.is-stoked .cr-camp__fire { animation: cr-stoke .9s var(--spring); }
.cr-camp.is-stoked .cr-camp__glow { animation: cr-stoke-glow .9s ease-out; }
@keyframes cr-stoke { 0% { transform: scale(1); } 35% { transform: scale(1.35, 1.5); } 100% { transform: scale(1); } }
@keyframes cr-stoke-glow { 0% { opacity: .8; transform: scale(1); } 35% { opacity: 1; transform: scale(1.3); } 100% { opacity: .8; transform: scale(1); } }

/* ---------- hero */
.cr-hero { position: relative; background: var(--night); color: var(--parch); overflow: hidden; padding: clamp(2.2rem, 5vw, 4.5rem) 0 0; }
.cr-sky { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 70% 100%, rgba(200, 80, 30, .18), rgba(22, 17, 13, 0) 60%), linear-gradient(180deg, #0E0B12 0, #16110D 75%); }
.cr-stars { position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; }
.cr-stars--a { box-shadow: 5vw 8vh #F2E4C4, 12vw 22vh #F2E4C4, 21vw 6vh #F2E4C4, 30vw 15vh #F2E4C4, 38vw 4vh #F2E4C4, 47vw 19vh #F2E4C4, 55vw 9vh #F2E4C4, 63vw 25vh #F2E4C4, 71vw 5vh #F2E4C4, 80vw 13vh #F2E4C4, 88vw 21vh #F2E4C4, 95vw 7vh #F2E4C4, 17vw 31vh #F2E4C4, 43vw 34vh #F2E4C4, 76vw 33vh #F2E4C4, 92vw 38vh #F2E4C4; animation: cr-twinkle 3.8s ease-in-out infinite alternate; }
.cr-stars--b { width: 3px; height: 3px; box-shadow: 8vw 15vh #FFE7A8, 26vw 27vh #FFE7A8, 34vw 9vh #FFE7A8, 51vw 29vh #FFE7A8, 59vw 3vh #FFE7A8, 67vw 17vh #FFE7A8, 84vw 28vh #FFE7A8, 97vw 16vh #FFE7A8, 3vw 36vh #FFE7A8, 69vw 41vh #FFE7A8; animation: cr-twinkle 5.3s ease-in-out 1s infinite alternate-reverse; }
@keyframes cr-twinkle { from { opacity: .25; } to { opacity: 1; } }
.cr-moon { position: absolute; top: 5%; right: 2.5%; width: clamp(38px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF4D6, #F2E4C4 55%, #D8C7A6); box-shadow: 0 0 40px 8px rgba(242, 228, 196, .18); }
.cr-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.cr-hero__text { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.cr-hero__h { font-size: clamp(2.5rem, 6.2vw, 4.8rem); color: var(--paper); letter-spacing: -.015em; margin-bottom: .45em; }
.cr-hero__h em { display: block; font-style: italic; font-weight: 700; color: var(--mustard); font-size: .72em; margin-top: .25em; }
.cr-hero__w { display: inline-block; }
.cr-hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34em; color: var(--parch); }
.cr-hero__lead strong { color: var(--paper); }
.cr-hero__fire { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; }
.cr-camp--hero { max-width: 620px; margin-inline: auto; }
.cr-stoke { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 3; }
.cr-stoke .cr-ico { width: 1.3em; height: 1.3em; }
.cr-embers { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; z-index: 2; }
.cr-embers__hint { margin: 0; padding: .55rem 1rem; border-radius: 3px; background: rgba(35, 26, 20, .8); color: var(--parch); font-style: italic; font-size: .98rem; text-align: center; }
.cr-ember { display: flex; gap: .9rem; align-items: center; width: min(430px, 100%); box-sizing: border-box; padding: .8rem .95rem; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transform-origin: 50% 100%; }
.cr-js .cr-ember[data-off] { display: none; }
.cr-ember.is-rising { animation: cr-rise .75s var(--spring) both; }
@keyframes cr-rise { from { opacity: 0; transform: translateY(70px) scale(.7) rotate(-4deg); } to { opacity: 1; transform: none; } }
.cr-ember__cover { flex: none; width: 74px; }
.cr-ember__cover img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.cr-ember__t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cr-ember .cr-kicker { margin: 0; font-size: .72rem; }
.cr-ember__h { font: 800 1.25rem/1.15 var(--display); color: var(--ink); }
.cr-ember__p { font-size: .98rem; line-height: 1.4; color: var(--ink-soft); }
.cr-js:not(.cr-js-ready) .cr-embers { visibility: hidden; }
html:not(.cr-js) .cr-ember, html:not(.cr-js) .cr-stoke { display: none; }
@media (max-width: 899px) {
	.cr-hero__in { grid-template-columns: minmax(0, 1fr); }
	.cr-hero__text { padding-bottom: 0; }
	.cr-hero__fire { min-height: 0; padding-top: 10.5rem; } /* room for the hint (or the risen book) and the smoke's story */
}
@media (max-width: 480px) {
	.cr-hero__fire { padding-top: 11rem; }
	.cr-ember__cover { width: 60px; }
}
/* hero entrance (one-shot) */
.cr-js.cr-go:not(.cr-paused) .cr-hero__w { animation: cr-word .8s var(--ease) both; }
.cr-js.cr-go:not(.cr-paused) .cr-hero__h em.cr-hero__w { animation-delay: .25s; }
@keyframes cr-word { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }

/* ---------- inner page head */
.cr-pagehead { position: relative; background: var(--night); color: var(--parch); overflow: hidden; padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }
.cr-pagehead__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.cr-pagehead.has-side .cr-pagehead__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cr-pagehead__h { font-size: clamp(2.3rem, 5.6vw, 4.2rem); color: var(--paper); }
.cr-pagehead__h em { font-style: italic; color: var(--mustard); }
.cr-pagehead__h--post { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cr-pagehead__lead { font-size: 1.22rem; color: var(--parch); max-width: 36em; margin: 0; }
.cr-pagehead__edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 34px; color: var(--paper); }
.cr-pagehead__photo { margin: 0; justify-self: center; width: min(340px, 80%); }
.cr-pagehead__photo img { display: block; width: 100%; border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px; border: 6px solid var(--parch); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
.cr-fan { position: relative; height: clamp(220px, 26vw, 300px); }
.cr-fan__b { position: absolute; left: 50%; bottom: 0; width: clamp(120px, 13vw, 170px); margin-left: calc(clamp(120px, 13vw, 170px) / -2); transform-origin: 50% 120%; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 14deg)); animation: cr-sway 5s ease-in-out calc(var(--i) * -1.4s) infinite alternate; }
.cr-fan__b img { display: block; width: 100%; height: auto; border-radius: 3px 8px 8px 3px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
@keyframes cr-sway { from { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 14deg - 2deg)); } to { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 14deg + 2deg)); } }
@media (max-width: 760px) {
	.cr-pagehead.has-side .cr-pagehead__in { grid-template-columns: minmax(0, 1fr); }
	.cr-fan { height: 210px; }
}
.cr-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .95rem; }
.cr-crumbs li + li::before { content: "›"; margin-right: .3rem; opacity: .7; }
.cr-crumbs a { color: var(--leather); display: inline-block; min-height: 24px; }
.cr-crumbs--light, .cr-crumbs--light a { color: var(--parch); }
.cr-crumbs--light a { color: var(--mustard); }

/* ---------- covers: shelf cards, flip */
.cr-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem) clamp(.8rem, 2vw, 1.6rem); }
.cr-shelf--row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cr-bc a { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: var(--ink); height: 100%; }
.cr-bc__cover { display: flex; align-items: flex-end; aspect-ratio: 2 / 2.6; }
.cr-bc__cover img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom; border-radius: 2px 6px 6px 2px; box-shadow: -3px 0 0 rgba(0, 0, 0, .18) inset, 0 10px 18px rgba(42, 30, 21, .25); transition: transform .3s var(--spring), box-shadow .3s; }
.cr-bc a:hover img, .cr-bc a:focus-visible img { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 18px 26px rgba(42, 30, 21, .3); }
.cr-bc__kind { font: 700 .74rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ember-ink); margin-top: .35rem; }
.cr-bc__t { font: 800 1.08rem/1.2 var(--display); }
.cr-bc.is-first .cr-bc__cover { position: relative; }
.cr-bc.is-first .cr-bc__cover::after { content: "Start here"; position: absolute; top: -10px; left: -8px; padding: .3rem .7rem; border-radius: 3px; background: var(--ember-ink); color: #fff; font: 800 .8rem/1 var(--display); box-shadow: 0 4px 0 var(--night); transform: rotate(-6deg); }
.cr-flipwrap { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.cr-flip { display: block; position: relative; width: 100%; max-width: 360px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; border-radius: 6px; }
.cr-flip--solo { perspective: none; cursor: default; }
.cr-flip__in { display: grid; transform-style: preserve-3d; transition: transform .8s var(--spring); }
.cr-flip__front, .cr-flip__back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; }
.cr-flip__front img, .cr-flip__back img { display: block; width: 100%; height: auto; border-radius: 3px 8px 8px 3px; box-shadow: inset 4px 0 0 rgba(0, 0, 0, .15), 0 22px 40px rgba(42, 30, 21, .32); }
.cr-flip__back { transform: rotateY(180deg); }
.cr-flip[aria-pressed="true"] .cr-flip__in { transform: rotateY(180deg); }
.cr-flip:not(.cr-flip--solo):hover .cr-flip__in { transform: rotateY(-12deg); }
.cr-flip[aria-pressed="true"]:hover .cr-flip__in { transform: rotateY(168deg); }
.cr-flip__hint { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
html:not(.cr-js) .cr-flip__hint { display: none; }

/* ---------- newest two */
.cr-newest__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.cr-newbook { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 1023px) { .cr-newest__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cr-newbook { grid-template-columns: minmax(0, 1fr); } .cr-newbook__cover { max-width: 240px; } }
.cr-credits { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .98rem; }
.cr-credits__n { font-weight: 700; }
.cr-credits__r { color: var(--ink-soft); font-style: italic; }
.cr-band--night .cr-credits__r { color: var(--dim); }

/* ---------- where do I start? */
.cr-picker__qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; margin-bottom: 1.4rem; }
@media (max-width: 860px) { .cr-picker__qs { grid-template-columns: minmax(0, 1fr); } }
.cr-picker__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.cr-picker__q legend { font: 800 1.25rem var(--display); margin-bottom: .6rem; padding: 0; }
.cr-picker__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .8rem 1rem; border-radius: var(--r); background: var(--paper); border: 2px dashed var(--parch-2); margin-bottom: 1.4rem; }
.cr-picker__note { margin: 0; font-weight: 700; }
.cr-picker__saga { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-left: 5px solid var(--ember); background: var(--paper); border-radius: 0 var(--r) var(--r) 0; margin: -.4rem 0 1.4rem; }
.cr-picker__saga[hidden] { display: none; }
.cr-picker .cr-bc[hidden] { display: none; }

/* ---------- the trail map */
.cr-trail__tabs { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 3px; background: var(--night-2); margin-bottom: 1.4rem; }
.cr-trail__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 960px) { .cr-trail__grid { grid-template-columns: minmax(0, 1fr); } }
.cr-map { position: relative; aspect-ratio: 1000 / 668; border-radius: 12px; overflow: hidden; background: #F3E7C9; box-shadow: 0 0 0 6px #3A2C22, 0 0 0 8px #7A3B17, 0 24px 50px rgba(0, 0, 0, .5); }
.cr-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-map__land polygon { fill: #EBDDB8; stroke: #9C8358; stroke-width: 1.4; stroke-dasharray: 5 4; }
.cr-map__names text { font: italic 600 15px var(--display); fill: #8A7550; text-anchor: middle; letter-spacing: .08em; }
.cr-map__sea text { font: italic 600 16px var(--display); fill: #5E7F8E; letter-spacing: .16em; }
.cr-map__rose text { font: 800 16px var(--display); fill: #7A3B17; }
.cr-map__route { fill: none; stroke-linecap: round; }
.cr-map__route--ghost { stroke: #9C8358; stroke-width: 3; stroke-dasharray: 2 9; }
.cr-map__route--ink { stroke: #A9441A; stroke-width: 5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ink, 8)); transition: stroke-dashoffset 1s var(--ease); }
.cr-map__home { fill: none; stroke: #1E5A7A; stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.cr-map__inset rect { fill: #F8EFD8; stroke: #7A3B17; stroke-width: 2; }
.cr-map__inset text { font: 800 15px var(--display); fill: #7A3B17; }
.cr-map__land2 { fill: #E2CFA2; stroke: #9C8358; stroke-width: 1.5; }
.cr-map__inset--ak { opacity: .35; transition: opacity .4s; }
.cr-map__note { font: italic 12px var(--body); fill: #8A7550; }
.cr-map[data-layer="home"] .cr-map__route { opacity: .15; }
.cr-map[data-layer="home"] .cr-map__home, .cr-map[data-layer="home"] .cr-map__inset--ak { opacity: 1; }
.cr-pin { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -28px 0 0 -15px; color: #A9441A; opacity: .55; transition: opacity .3s, transform .35s var(--spring); pointer-events: none; }
.cr-pin__ico { width: 100%; height: 100%; }
.cr-pin__l { position: absolute; left: 50%; top: -1.9rem; transform: translateX(-50%); white-space: nowrap; padding: .15rem .55rem; border-radius: 6px; background: var(--night); color: var(--paper); font: 700 .8rem/1.3 var(--display); opacity: 0; transition: opacity .3s; }
.cr-pin--home { color: #1E5A7A; display: none; }
.cr-map[data-layer="home"] .cr-pin--home { display: block; }
.cr-map[data-layer="home"] .cr-pin--saga { display: none; }
.cr-pin.is-on { opacity: 1; transform: scale(1.25); }
.cr-pin.is-on .cr-pin__l { opacity: 1; }
.cr-pin.is-on::after { content: ""; position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid currentColor; animation: cr-ping 1.6s ease-out infinite; }
@keyframes cr-ping { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
.cr-wagon { position: absolute; inset: 0; pointer-events: none; transform: translate(var(--x), var(--y)); transition: transform 1.1s var(--ease); z-index: 2; }
.cr-wagon__in { position: absolute; left: -26px; top: -46px; width: 52px; animation: cr-bob .45s ease-in-out infinite alternate; }
.cr-wagon__in svg { display: block; width: 100%; }
@keyframes cr-bob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3px) rotate(1.5deg); } }
.cr-map[data-layer="home"] .cr-wagon { opacity: 0; }
.cr-trail__label { font: 800 1rem var(--display); color: var(--gold); margin: 0 0 .6rem; letter-spacing: .06em; text-transform: uppercase; }
.cr-trail__books { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cr-trail__book { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; min-height: 44px; padding: .5rem .3rem .45rem; border-radius: 10px; border: 2px solid rgba(242, 228, 196, .2); background: var(--night-2); color: var(--parch); font: 700 .86rem/1.15 var(--display); cursor: pointer; text-align: center; transition: border-color .2s, transform .25s var(--spring); }
.cr-trail__book img { width: 48px; height: auto; border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, .4); }
.cr-trail__book:hover { border-color: var(--gold); transform: translateY(-2px); }
.cr-trail__book[aria-pressed="true"] { border-color: var(--mustard); background: #3A2C22; color: var(--paper); }
.cr-trail__n { position: absolute; top: -8px; left: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ember-ink); color: #fff; font: 800 .8rem/24px var(--display); }
.cr-trail__book--place { flex-direction: row; justify-content: flex-start; padding: .6rem .8rem; text-align: left; }
.cr-trail__ctl[data-ctl="home"] .cr-trail__books { grid-template-columns: minmax(0, 1fr); }
.cr-trail__book--place .cr-ico { color: var(--sky); width: 1.4em; height: 1.4em; }
.cr-trail__cards { position: relative; }
.cr-trail__card { padding: 1.2rem 1.3rem; border-radius: var(--r); background: var(--paper); color: var(--ink); box-shadow: 0 16px 34px rgba(0, 0, 0, .4); }
.cr-trail__card + .cr-trail__card { margin-top: 1rem; }
.cr-js .cr-trail__card[data-off] { display: none; }
.cr-js .cr-trail__card { margin-top: 0; }
.cr-trail__card.is-new { animation: cr-card-in .5s var(--ease) both; }
@keyframes cr-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cr-band--night .cr-trail__card a { color: var(--leather); }
.cr-trail__where { display: flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--ember-ink); font-size: .98rem; }
.cr-trail__card p:last-child { margin-bottom: 0; }

/* ---------- pan for gold */
.cr-pan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); grid-template-areas: "copy stage" "finds stage"; gap: 1.2rem clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cr-pan__copy { grid-area: copy; }
.cr-pan__stage { grid-area: stage; position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.cr-pan__finds { grid-area: finds; position: relative; min-height: 8rem; }
@media (max-width: 820px) { .cr-pan__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "finds"; } }
.cr-pan__dish { position: relative; width: min(380px, 84vw); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; }
.cr-pan__dish:active { cursor: grabbing; }
.cr-pan__spin { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--rot, 0deg)); }
.cr-pan__svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; }
.cr-pan__water { position: absolute; inset: 11%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(150, 200, 220, .0), rgba(150, 200, 220, .35), rgba(150, 200, 220, .05), rgba(150, 200, 220, .3), rgba(150, 200, 220, 0)); animation: cr-water 6s linear infinite; }
@keyframes cr-water { to { transform: rotate(360deg); } }
.cr-pan__gravel { position: absolute; inset: 16%; border-radius: 50%; opacity: calc(1 - var(--wash, 0)); background:
	radial-gradient(circle at 20% 30%, #7D6A55 0 4px, transparent 5px), radial-gradient(circle at 70% 25%, #6A5848 0 5px, transparent 6px), radial-gradient(circle at 45% 55%, #8E7A62 0 6px, transparent 7px),
	radial-gradient(circle at 30% 75%, #5E4E40 0 4px, transparent 5px), radial-gradient(circle at 78% 68%, #8A7258 0 5px, transparent 6px), radial-gradient(circle at 55% 82%, #6E5B49 0 4px, transparent 5px),
	radial-gradient(circle, #6E5D4C 0 1.6px, transparent 2px) 0 0 / 14px 14px, radial-gradient(circle, #8B7A66 0 1.4px, transparent 2px) 7px 7px / 14px 14px, #57493C; transition: opacity .35s; }
.cr-pan__gravel--2 { inset: 24%; opacity: calc(1 - var(--wash, 0) * 1.4); background-size: auto, auto, auto, auto, auto, auto, 11px 11px, 11px 11px; transform: rotate(40deg); }
.cr-pan__nugget { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1.25; margin: -6% 0 0 -7.5%; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 35% 30%, #FFF0A8, #F4C834 35%, #C98A16 75%); box-shadow: 0 0 0 2px #8A5A10; opacity: 0; transform: scale(.2); transition: opacity .3s, transform .6s var(--spring); }
.cr-pan.is-gold .cr-pan__nugget { opacity: 1; transform: scale(1); }
.cr-pan.is-gold .cr-pan__dish::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 140, .7), rgba(255, 230, 140, 0)); animation: cr-shine 1.4s ease-out infinite; pointer-events: none; }
@keyframes cr-shine { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
.cr-pan.is-wobble .cr-pan__spin { animation: cr-wobble .7s var(--ease); }
@keyframes cr-wobble { 0% { transform: rotate(var(--rot, 0deg)); } 30% { transform: rotate(calc(var(--rot, 0deg) + 50deg)) translateX(3%); } 60% { transform: rotate(calc(var(--rot, 0deg) + 100deg)) translateX(-3%); } 100% { transform: rotate(calc(var(--rot, 0deg) + 120deg)); } }
.cr-pan__tip { margin: 0; font-style: italic; color: var(--juniper); font-weight: 700; animation: cr-nudge 1.4s ease-in-out infinite alternate; }
@keyframes cr-nudge { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
.cr-pan.is-gold .cr-pan__tip { visibility: hidden; }
.cr-pan__count { font-weight: 700; color: var(--juniper); }
.cr-nugget { margin: 0; padding: 1.2rem 1.4rem; border-radius: var(--r); background: var(--paper); border: 3px solid var(--gold); box-shadow: 0 12px 28px rgba(42, 30, 21, .18); }
.cr-nugget blockquote { margin: 0; }
.cr-nugget blockquote p { font: italic 700 clamp(1.25rem, 2.2vw, 1.55rem)/1.35 var(--display); margin: 0 0 .5rem; }
.cr-nugget blockquote p::before { content: "“"; color: var(--gold); }
.cr-nugget blockquote p::after { content: "”"; color: var(--gold); }
.cr-nugget figcaption { font-size: .98rem; color: var(--ink-soft); }
.cr-nugget + .cr-nugget { margin-top: 1rem; }
.cr-js .cr-nugget { display: none; margin-top: 0; }
.cr-js .cr-nugget.is-shown { display: block; animation: cr-card-in .6s var(--spring) both; }

/* ---------- the picture-book reader */
.cr-reader__desk { max-width: 1040px; margin-inline: auto; }
.cr-reader__book { position: relative; perspective: 2200px; outline: none; }
.cr-comb { display: none; }
.cr-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); border-radius: 6px; box-shadow: 0 30px 60px rgba(42, 30, 21, .3), 0 0 0 1px rgba(42, 30, 21, .08); }
.cr-spread + .cr-spread { margin-top: 1.5rem; }
.cr-js .cr-spread[data-off] { display: none; }
.cr-js .cr-spread { margin-top: 0; }
.cr-spread__l { padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(90deg, #F6EDDA 0, #F6EDDA 92%, #E3D3B2 100%); border-radius: 6px 0 0 6px; display: flex; align-items: center; justify-content: center; }
.cr-spread__l img { display: block; width: 100%; height: auto; max-width: 420px; border-radius: 3px; box-shadow: 0 10px 22px rgba(42, 30, 21, .3); }
.cr-spread__r { padding: clamp(1.2rem, 3.4vw, 2.6rem); background: linear-gradient(90deg, #E3D3B2 0, #FBF5E8 8%); border-radius: 0 6px 6px 0; }
.cr-spread__r p { font-size: 1.12rem; }
.cr-spread__inside { font-size: 1rem !important; color: var(--ink-soft); }
@media (min-width: 721px) {
	.cr-js .cr-comb { display: block; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 34px; height: 92%; margin-left: -17px; z-index: 4; pointer-events: none; }
}
@media (max-width: 720px) {
	.cr-spread { grid-template-columns: minmax(0, 1fr); }
	.cr-spread__l { border-radius: 6px 6px 0 0; background: #F6EDDA; }
	.cr-spread__l img { max-width: 260px; }
	.cr-spread__r { border-radius: 0 0 6px 6px; background: var(--paper); }
}
.cr-reader__leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 5; pointer-events: none; display: none; }
.cr-reader__leaf-f, .cr-reader__leaf-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 0 6px 6px 0; background: var(--paper); }
.cr-reader__leaf-b { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: #F6EDDA; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2rem); box-sizing: border-box; }
.cr-reader__leaf-b img { display: block; width: 100%; height: auto; max-width: 420px; border-radius: 3px; }
.cr-reader__leaf-f > * { height: 100%; box-sizing: border-box; }
.cr-reader__leaf.is-turning { display: block; animation: cr-turn .85s var(--ease) both; }
.cr-reader__leaf.is-back { left: 0; transform-origin: 100% 50%; animation-name: cr-turn-back; }
@keyframes cr-turn { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes cr-turn-back { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.cr-reader__leaf.is-back .cr-reader__leaf-f { border-radius: 6px 0 0 6px; background: #F6EDDA; }
.cr-reader__leaf.is-back .cr-reader__leaf-b { border-radius: 0 6px 6px 0; background: var(--paper); }
.cr-spread.is-slide { animation: cr-slide .5s var(--ease) both; }
@keyframes cr-slide { from { opacity: 0; transform: translateX(var(--from, 40px)); } to { opacity: 1; transform: none; } }
.cr-reader__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 1rem; }
.cr-reader__count { margin: 0; font: 800 1.1rem var(--display); }
html:not(.cr-js) .cr-reader__nav, html:not(.cr-js) .cr-reader__thumbs { display: none; }
.cr-reader__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.cr-reader__thumb { width: 52px; height: 52px; padding: 2px; border-radius: 8px; border: 3px solid transparent; background: var(--paper); cursor: pointer; transition: transform .2s var(--spring), border-color .2s; }
.cr-reader__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.cr-reader__thumb:hover { transform: translateY(-3px); }
.cr-reader__thumb[aria-pressed="true"] { border-color: var(--ember-ink); }
@media (max-width: 520px) { .cr-reader__nav .cr-btn span { font-size: .9rem; } .cr-reader__nav .cr-btn { padding-inline: 1rem; } }

/* ---------- who's who cards */
.cr-who__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.cr-card { display: flex; flex-direction: column; gap: .5rem; }
.cr-card__btn { flex: 1; display: flex; }
.cr-card__in { flex: 1; }
.cr-card__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1200px; text-align: center; font: inherit; color: inherit; }
.cr-card__in { display: grid; transform-style: preserve-3d; transition: transform .7s var(--spring); }
.cr-card__f, .cr-card__b { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 250px; box-sizing: border-box; border-radius: 6px; padding: 1.4rem 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.cr-card__f { background: #F1DFB3; border: 3px double var(--leather); box-shadow: 0 10px 22px rgba(42, 30, 21, .18); }
.cr-card__b { background: var(--night); color: var(--parch); transform: rotateY(180deg); border: 3px solid var(--gold); }
.cr-card__btn[aria-pressed="true"] .cr-card__in { transform: rotateY(180deg); }
.cr-card__btn:hover .cr-card__in { transform: rotateY(-10deg); }
.cr-card__btn[aria-pressed="true"]:hover .cr-card__in { transform: rotateY(170deg); }
.cr-card__wanted { font: 400 .95rem/1 var(--word); letter-spacing: .08em; color: var(--ember-ink); border-block: 2px solid var(--ember-ink); padding: .35rem .6rem; }
.cr-card__name { font: 800 1.55rem/1.1 var(--display); }
.cr-card__role { font-style: italic; color: var(--ink-soft); }
.cr-card__turn { display: inline-flex; gap: .3rem; align-items: center; margin-top: .4rem; font: 700 .85rem var(--display); color: var(--leather); }
.cr-card__say { font: italic 600 1.15rem/1.4 var(--display); }
.cr-card__from { display: flex; align-items: center; gap: .6rem; font-size: .95rem; text-align: left; }
.cr-card__from img { width: 46px; height: auto; border-radius: 2px; }
.cr-card__link { align-self: center; text-align: center; font-weight: 700; font-family: var(--display); font-size: .95rem; min-height: 24px; }

/* ---------- story finder */
.cr-finder__box { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.cr-finder__label { font: 800 1.05rem var(--display); }
.cr-finder__field { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; border-radius: 3px; border: 2px solid var(--leather); background: #fff; max-width: 520px; }
.cr-finder__field:focus-within { outline: 3px solid var(--ember-ink); outline-offset: 2px; }
.cr-finder__field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.1rem; min-height: 48px; color: var(--ink); outline: none; }
.cr-finder__field .cr-ico { color: var(--leather); }
.cr-finder__n { font-weight: 700; color: var(--ink-soft); }
.cr-finder__list { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 2rem; }
.cr-finder__list li { break-inside: avoid; }
.cr-finder__list li[hidden] { display: none; }
.cr-finder__list a { display: flex; flex-direction: column; padding: .55rem 0; border-bottom: 1px dashed var(--parch-2); text-decoration: none; color: var(--ink); }
.cr-finder__list a:hover .cr-finder__s { text-decoration: underline; }
.cr-finder__s { font: 800 1.08rem/1.25 var(--display); color: var(--leather); }
.cr-finder__in { font-size: .95rem; font-style: italic; color: var(--ink-soft); }
.cr-finder__list mark { background: var(--mustard); color: var(--ink); border-radius: 3px; padding: 0 .1em; }

/* ---------- novels as playbills */
.cr-bills__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.cr-bill { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; padding: clamp(1.2rem, 3vw, 2.2rem); background: #fff8ea; border: 3px double var(--parch-2); border-radius: 8px; scroll-margin-top: 1rem; }
.cr-bill:nth-child(even) { background: var(--parch); }
@media (max-width: 640px) { .cr-bill { grid-template-columns: minmax(0, 1fr); } .cr-bill__cover { max-width: 220px; } }

/* ---------- single book page */
.cr-bookpage__band { background: var(--night); padding: 1rem 0 .3rem; }
.cr-bookpage__band .cr-crumbs a { color: var(--mustard); }
.cr-bookpage__band .cr-crumbs { color: var(--parch); }
.cr-bookpage__in { display: grid; grid-template-columns: minmax(200px, 380px) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4.5rem); padding-block: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 760px) { .cr-bookpage__in { grid-template-columns: minmax(0, 1fr); } .cr-bookpage__cover { max-width: 300px; margin-inline: auto; } }
.cr-bookpage__h { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.cr-stories { margin: 0 0 1rem; padding-left: 1.4rem; columns: 2 200px; }
.cr-saganav { padding-bottom: 2.5rem; }
.cr-saganav ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.cr-saganav a { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 8px; border: 2px solid var(--parch-2); text-decoration: none; color: var(--ink); font: 700 .95rem/1.2 var(--display); min-height: 44px; }
.cr-saganav img { width: 40px; height: auto; border-radius: 2px; }
.cr-saganav__n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--leather); color: #fff; text-align: center; font: 800 .82rem/26px var(--display); }
.cr-saganav .is-here a { border-color: var(--ember-ink); background: var(--parch); }
.cr-more { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- the storytellers (family tree) */
.cr-tree { display: flex; flex-direction: column; align-items: center; }
.cr-tree__top, .cr-tree__kid { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: 1rem; width: 100%; }
.cr-person { flex: 0 1 320px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cr-person__ph { margin: 0 0 .9rem; width: min(200px, 60%); aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 0 3px var(--leather), 0 16px 32px rgba(42, 30, 21, .25); background: var(--parch); }
.cr-person__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .5s var(--ease); }
.cr-person:hover .cr-person__ph img { transform: scale(1.06); }
.cr-person__n { font-size: 1.5rem; margin: 0 0 .1rem; }
.cr-person__r { font-style: italic; color: var(--ember-ink); margin: 0 0 .5rem; font-weight: 700; }
.cr-person__y { display: block; font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: .95rem; }
.cr-pan__finds:empty::before, .cr-pan__finds:not(:has(.is-shown))::before { content: "Your nugget will turn up here."; display: block; padding: 1.2rem 1.4rem; border: 3px dashed #9FB5A8; border-radius: var(--r); color: var(--juniper); font-style: italic; }
html:not(.cr-js) .cr-pan__finds::before { display: none !important; }
.cr-person__s { font-size: 1.02rem; max-width: 26em; }
.cr-tree__tie { flex: 0 0 auto; align-self: flex-start; margin-top: clamp(90px, 9vw, 118px); display: flex; align-items: center; position: relative; }
.cr-tree__tie::before { content: ""; position: absolute; left: -2.2rem; right: -2.2rem; top: 50%; border-top: 3px dashed var(--leather); z-index: -1; }
.cr-tree__tie span { display: inline-block; padding: .25rem .8rem; border-radius: 3px; background: var(--mustard); font: 800 .85rem var(--display); border: 2px solid var(--night); }
.cr-tree__down { position: relative; margin: .6rem 0 1.2rem; padding-top: 3.2rem; }
.cr-tree__down::before { content: ""; position: absolute; left: 50%; top: 0; height: 3rem; border-left: 3px dashed var(--leather); }
.cr-tree__down span { font: 700 .9rem var(--display); font-style: italic; color: var(--leather); background: var(--paper); padding: .2rem .7rem; border: 2px solid var(--leather); border-radius: 3px; }
@media (max-width: 700px) {
	.cr-tree__top { flex-direction: column; align-items: center; gap: .6rem; }
	.cr-tree__tie { margin: 0; }
	.cr-person { flex-basis: auto; }
}

/* ---------- stagecoach timeline */
.cr-tl { position: relative; padding-left: clamp(4.5rem, 10vw, 6.5rem); }
.cr-tl__road { position: absolute; left: clamp(1.8rem, 4.6vw, 2.8rem); top: 0; bottom: 0; width: 8px; border-radius: 4px; background: repeating-linear-gradient(180deg, #7A5A3A 0 14px, #5A4028 14px 22px); }
.cr-tl__coach { position: absolute; left: clamp(.4rem, 2.2vw, 1.2rem); top: 0; width: clamp(56px, 7vw, 76px); transform: translateY(var(--cy, 0px)); transition: transform 1s var(--ease); z-index: 2; }
.cr-tl__coach svg { display: block; width: 100%; animation: cr-bob .5s ease-in-out infinite alternate; }
.cr-tl__list { list-style: none; margin: 0; padding: 0; }
.cr-tl__stop { position: relative; padding: 0 0 2.2rem; }
.cr-tl__stop::before { content: ""; position: absolute; left: calc(-1 * clamp(4.5rem, 10vw, 6.5rem) + clamp(1.8rem, 4.6vw, 2.8rem) - 6px); top: .5rem; width: 20px; height: 20px; border-radius: 50%; background: var(--night); border: 3px solid var(--gold); }
.cr-tl__stop.is-here::before { background: var(--mustard); }
.cr-tl__when { display: inline-block; font: 400 1rem/1 var(--word); color: var(--mustard); letter-spacing: .06em; margin-bottom: .4rem; }
.cr-tl__h { font-size: 1.5rem; color: var(--paper); margin-bottom: .35rem; }
.cr-tl__stop p { color: var(--parch); margin: 0; }

/* ---------- Frankie's canvases */
.cr-canvas__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .cr-canvas__grid { grid-template-columns: minmax(0, 1fr); } }
.cr-canvas__ask { font-weight: 700; margin-bottom: .5rem; }
.cr-canvas__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.cr-canvas__board { position: relative; display: block; width: min(440px, 88vw); aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px rgba(42, 30, 21, .3); transition: border-radius .6s var(--ease); }
.cr-canvas__stage[data-surface="rock"] .cr-canvas__board { border-radius: 52% 48% 46% 54% / 58% 54% 46% 42%; }
.cr-tex { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.cr-canvas__stage[data-surface="paper"] .cr-tex--paper, .cr-canvas__stage[data-surface="wood"] .cr-tex--wood, .cr-canvas__stage[data-surface="concrete"] .cr-tex--concrete, .cr-canvas__stage[data-surface="rock"] .cr-tex--rock, .cr-canvas__stage[data-surface="linen"] .cr-tex--linen { opacity: 1; }
.cr-tex--paper { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .6), transparent 40%), #F7EFDC; }
.cr-tex--wood { background: repeating-linear-gradient(92deg, rgba(90, 52, 24, .0) 0 9px, rgba(90, 52, 24, .22) 9px 11px, rgba(90, 52, 24, 0) 11px 23px, rgba(60, 32, 14, .18) 23px 24px), repeating-radial-gradient(ellipse at 30% 120%, #C08A55 0 18px, #B47D49 18px 30px), #BE8752; }
.cr-tex--concrete { background: radial-gradient(circle, rgba(60, 60, 60, .25) 0 1px, transparent 1.5px) 0 0 / 9px 9px, radial-gradient(circle, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px) 4px 5px / 13px 13px, #B9B5AE; }
.cr-tex--rock { background: radial-gradient(circle at 35% 30%, #A7A39C, #7E7A73 60%, #5F5B55); }
.cr-tex--linen { background: repeating-linear-gradient(0deg, rgba(120, 100, 70, .14) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120, 100, 70, .14) 0 1px, transparent 1px 4px), #EDE3CF; }
.cr-canvas__art { position: absolute; inset: 9%; display: block; mix-blend-mode: multiply; transition: inset .6s var(--ease); }
.cr-canvas__stage[data-surface="rock"] .cr-canvas__art { inset: 16%; }
.cr-canvas__art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cr-canvas__stage[data-surface="rock"] .cr-canvas__art img { border-radius: 50%; }
.cr-canvas__stage figcaption { font-style: italic; color: var(--ink-soft); text-align: center; }

/* ---------- call-out, blog cards */
.cr-cta__in { display: grid; grid-template-columns: minmax(160px, 300px) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.cr-cta .cr-camp { max-width: 300px; }
@media (max-width: 640px) { .cr-cta__in { grid-template-columns: minmax(0, 1fr); } .cr-cta .cr-camp { max-width: 220px; margin-inline: auto; } }
.cr-cta .cr-h2 { color: var(--paper); }
.cr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.6rem; }
.cr-pc a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 10px 24px rgba(42, 30, 21, .12); transition: transform .3s var(--spring), box-shadow .3s; }
.cr-pc a:hover { transform: translateY(-4px); box-shadow: 0 18px 30px rgba(42, 30, 21, .18); }
.cr-pc__img img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.cr-pc__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.cr-pc time { font-size: .9rem; color: var(--ember-ink); font-weight: 700; }
.cr-pc__h { font: 800 1.3rem/1.2 var(--display); }
.cr-pc__ex { font-size: 1rem; color: var(--ink-soft); }
.cr-search { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 2rem; }
.cr-search label { font: 800 1rem var(--display); }
.cr-search .cr-finder__field { flex: 1 1 260px; }
.cr-pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 2.4rem 0 0; padding: 0; }
.cr-pager a, .cr-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border-radius: 3px; border: 2px solid var(--parch-2); text-decoration: none; font-weight: 700; box-sizing: border-box; }
.cr-pager .current { background: var(--leather); color: #fff; border-color: var(--leather); }
.cr-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font: 800 1.2rem var(--display); }
.cr-links a { display: inline-block; min-height: 44px; line-height: 44px; }

/* ---------- articles */
.cr-post__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; color: var(--parch); font-size: 1rem; }
.cr-post__imgwrap { margin-top: -1.5rem; position: relative; z-index: 1; }
.cr-post__img { margin: 0; }
.cr-post__img img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 18px 40px rgba(42, 30, 21, .25); }
.cr-prose { padding-block: clamp(2rem, 4vw, 3rem); }
.cr-prose > *:not(.cr-bookpage) { box-sizing: border-box; max-width: 860px; margin-inline: auto !important; padding-inline: var(--gut); }
.cr-prose h2 { font-size: 1.8rem; margin-top: 1.6em !important; }
.cr-prose h3 { font-size: 1.4rem; margin-top: 1.4em !important; }
.cr-prose p, .cr-prose li { font-size: 1.2rem; line-height: 1.75; }
.cr-prose > .cr-bookpage { padding: 0; }
.cr-is-book .cr-prose { padding: 0; }
.cr-post__books { padding-block: 1rem 2rem; }
.cr-post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.cr-post__nav a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--r); border: 2px solid var(--parch-2); text-decoration: none; font: 700 1.05rem/1.3 var(--display); }
.cr-post__nav a.is-next { text-align: right; }
.cr-post__nav small { font: 400 .9rem var(--body); color: var(--ink-soft); }
@media (max-width: 600px) { .cr-post__nav { grid-template-columns: minmax(0, 1fr); } .cr-post__nav a.is-next { text-align: left; } }

/* ---------- simple text pages (privacy, contact) */
.cr-text h2 { font-size: 1.7rem; margin-top: 1.6em; }
.cr-text p, .cr-text li { font-size: 1.15rem; }
.cr-contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .cr-contact { grid-template-columns: minmax(0, 1fr); } }
.cr-contact__box { padding: clamp(1.2rem, 3vw, 2rem); border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(42, 30, 21, .14); scroll-margin-top: 1rem; }
.cr-contact__box--news { background: var(--night); color: var(--parch); }
.cr-contact__box--news .cr-h3 { color: var(--paper); }

/* ---------- Ninja Forms */
.cr-nf .nf-form-fields-required, .cr-nf .nf-form-title { display: none; }
.cr-nf nf-field { display: block; }
.cr-nf .nf-field-container { margin-bottom: 1.1rem; }
.cr-nf .nf-field-label label { font: 800 1.02rem var(--display); display: block; margin-bottom: .35rem; }
.cr-nf .ninja-forms-req-symbol { color: var(--ember-ink); }
.cr-form input[type="text"], .cr-form input[type="email"], .cr-form input[type="tel"], .cr-form textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: .65rem .9rem; border-radius: 10px; border: 2px solid #9C8358; background: #fff; color: var(--ink); font: inherit; font-size: 1.1rem; }
.cr-form textarea { min-height: 150px; }
.cr-form input:focus, .cr-form textarea:focus { outline: 3px solid var(--ember-ink); outline-offset: 1px; border-color: var(--leather); }
.cr-form .nf-field-description { font-size: .95rem; color: var(--ink-soft); margin-top: .3rem; }
.cr-contact__box--news .nf-field-description, .cr-contact__box--news .nf-field-label label { color: var(--parch); }
.cr-form .nf-error-msg, .cr-form .nf-error .nf-error-msg { color: #9E1B10; font-weight: 700; }
.cr-contact__box--news .nf-error-msg { color: #FFB4A3 !important; }
.cr-form .nf-error input, .cr-form .nf-error textarea { border-color: #9E1B10; }
.cr-form .nf-form-errors .nf-error-msg { margin-top: .6rem; }
.cr-thanks { text-align: center; padding: 1rem 0; }
.cr-thanks .cr-camp { max-width: 220px; margin: 0 auto .6rem; }
.cr-thanks h2 { font-size: 2.2rem; margin: 0 0 .3rem; }
.cr-thanks h2:focus { outline: none; }
.cr-thanks p { margin: 0 auto; max-width: 28em; }
.cr-burst { position: absolute; left: 50%; top: 40%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--mustard); animation: cr-burst 1.2s var(--ease) forwards; pointer-events: none; }
@keyframes cr-burst { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.3); } }

/* ---------- footer */
.cr-footer { position: relative; background: var(--night); color: var(--parch); padding: 3.4rem 0 5.2rem; border-top: 1px solid rgba(242, 228, 196, .14); }
.cr-footer__edge { display: none; }
.cr-footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 900px) { .cr-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.cr-footer p { color: var(--parch); font-size: 1rem; }
.cr-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.cr-footer__list { list-style: none; margin: 0; padding: 0; }
.cr-footer__list a { display: inline-block; padding: .3rem 0; color: var(--parch); font-size: 1rem; min-height: 24px; }
.cr-footer__list a:hover, .cr-footer__list a[aria-current] { color: var(--mustard); }
.cr-footer .cr-h4 { color: var(--mustard); }
.cr-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(242, 228, 196, .18); }
.cr-footer__base p { margin: 0; font-size: .95rem; }
.cr-credit a { color: var(--paper); text-decoration: underline; }
.cr-credit a:hover { color: var(--mustard); }
.cr-brand--foot { margin-bottom: .8rem; }

/* ---------- pause pill */
.cr-pill { position: fixed; left: 14px; bottom: 14px; z-index: 50; }
.cr-pill__i { display: inline-flex; width: 1.25em; height: 1.25em; }
.cr-pill__i .cr-ico { width: 100%; height: 100%; }
.cr-pill__i--play { display: none; }
.cr-paused .cr-pill__i--pause { display: none; }
.cr-paused .cr-pill__i--play { display: inline-flex; }
html:not(.cr-js) .cr-pill { display: none; }

/* ---------- reveals (one-shot) */
.cr-js.cr-go:not(.cr-paused) [data-cr-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }
.cr-js.cr-go [data-cr-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- pause + off screen: loops stop; big motion becomes a fade */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.cr-paused *, .cr-paused *::before, .cr-paused *::after { animation-play-state: paused !important; }
.cr-paused .cr-ember.is-rising, .cr-paused .cr-trail__card.is-new, .cr-paused .cr-nugget.is-shown, .cr-paused .cr-spread.is-slide, .cr-paused .cr-hero__w { animation: none !important; }
.cr-paused .cr-camp.is-stoked .cr-camp__fire, .cr-paused .cr-camp.is-stoked .cr-camp__glow, .cr-paused .cr-pan.is-wobble .cr-pan__spin { animation: none !important; }
.cr-paused .cr-reader__leaf { display: none !important; }
.cr-paused .cr-flip__in, .cr-paused .cr-card__in { transform: none !important; transition: none; }
.cr-paused .cr-flip__back, .cr-paused .cr-card__b { transform: none; opacity: 0; transition: opacity .25s; }
.cr-paused .cr-flip__front, .cr-paused .cr-card__f { transition: opacity .25s; }
.cr-paused .cr-flip[aria-pressed="true"] .cr-flip__back, .cr-paused .cr-card__btn[aria-pressed="true"] .cr-card__b { opacity: 1; }
.cr-paused .cr-flip[aria-pressed="true"] .cr-flip__front, .cr-paused .cr-card__btn[aria-pressed="true"] .cr-card__f { opacity: 0; }
.cr-paused .cr-wagon, .cr-paused .cr-tl__coach, .cr-paused .cr-map__route--ink, .cr-paused .cr-panel__in, .cr-paused .cr-bc__cover img, .cr-paused .cr-canvas__board, .cr-paused .cr-canvas__art { transition: none; }
.cr-paused .cr-pan__tip { animation: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------- large print: the root size grows 25%; a few fixed-size things follow */
.cr-lp .cr-trail__books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-lp .cr-shelf { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 400px) { .cr-lp .cr-shelf { grid-template-columns: 1fr 1fr; } }

/* ---------- print */
@media print {
	.cr-header, .cr-footer, .cr-pill, .cr-hero__fire, .cr-trail, .cr-pan, .cr-reader__nav { display: none !important; }
	body { background: #fff; }
}

/* ---------- text pages: floated photos, the quote */
.cr-text__fig { margin: 0 0 1rem; }
.cr-text__fig img { display: block; width: 100%; height: auto; border-radius: 8px; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--parch-2), 0 16px 32px rgba(42, 30, 21, .2); }
.cr-text__fig--right { float: right; width: min(300px, 42%); margin: .4rem 0 1rem 1.6rem; transform: rotate(1.5deg); }
@media (max-width: 600px) { .cr-text__fig--right { float: none; width: min(280px, 80%); margin: 0 auto 1.2rem; } }
.cr-text::after { content: ""; display: table; clear: both; }
.cr-text h2.cr-h2 { margin-top: 0; }
.cr-quote { clear: both; margin: 2rem 0 0; padding: 1.4rem 1.6rem; border-left: 6px solid var(--gold); background: var(--parch); border-radius: 0 var(--r) var(--r) 0; }
.cr-quote p { font: italic 600 1.25rem/1.5 var(--display); margin: 0 0 .6rem; }
.cr-quote .cr-quote__by { font: 400 1rem var(--body); font-style: normal; color: var(--ink-soft); margin: 0; }
section[id="larry"], section[id="matt"], section[id="frankie"] { scroll-margin-top: 0; }

/* ---------- phones */
.cr-stoke, .cr-btn { white-space: nowrap; }
.cr-brand__tag { white-space: nowrap; }
@media (max-width: 600px) {
	.cr-brand__tag { letter-spacing: .18em; font-size: .68rem; }
	.cr-moon { display: none; }
	.cr-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .7rem; }
	.cr-bc__t { font-size: .92rem; }
	.cr-bc__kind { font-size: .64rem; letter-spacing: .06em; }
	.cr-bc__cover { aspect-ratio: 2 / 2.7; }
	.cr-bc.is-first .cr-bc__cover::after { font-size: .7rem; left: -4px; }
	.cr-newbook__cover { max-width: 190px; }
	.cr-reader__nav { flex-wrap: wrap; justify-content: center; }
	.cr-reader__count { order: -1; width: 100%; text-align: center; }
	.cr-btns .cr-btn { white-space: normal; }
}
@media (max-width: 360px) {
	.cr-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cr-brand__name { font-size: 1.35rem; }
}
.cr-band--night .cr-trail__card .cr-kicker { color: var(--ember-ink); }
/* let a sideways swipe reach the reader on phones (vertical still scrolls the page) */
.cr-reader__book { touch-action: pan-y; }
/* nothing may poke out sideways, even for a moment (a phone then widens its layout viewport and zooms out) */
.cr-band, .cr-pagehead, .cr-hero, .cr-footer, .cr-bookpage { overflow-x: clip; }
/* larger print on a phone: a compact header */
@media (max-width: 600px) {
	.cr-lp .cr-brand__name { font-size: 24px; }
	.cr-lp .cr-brand__tag { font-size: 10px; letter-spacing: .14em; }
	.cr-lp .cr-menubtn span, .cr-lp .cr-lp__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cr-lp .cr-menubtn, .cr-lp .cr-lpbtn { padding-inline: .55rem; }
	.cr-lp .cr-header__row { gap: .5rem; }
}
/* the search inputs must never set the page's minimum width (large print on a phone) */
.cr-finder__field { min-width: 0; box-sizing: border-box; }
.cr-finder__field input { width: 0; }
/* articles: real paragraph spacing inside the reading column */
.cr-prose > p, .cr-prose > ul, .cr-prose > ol, .cr-prose > figure, .cr-prose > blockquote { margin-top: 0 !important; margin-bottom: 1.1em !important; }
.cr-prose > h2, .cr-prose > h3 { margin-bottom: .45em !important; }
.cr-prose > *:first-child { margin-top: 0 !important; }
.cr-contact__box--news .ninja-forms-req-symbol { color: var(--mustard); }
.cr-shelf--row { grid-template-columns: repeat(auto-fill, minmax(132px, 190px)); }
/* the smallest phones: Menu becomes icon-only (its name stays for screen readers) */
@media (max-width: 359px) {
	.cr-menubtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cr-menubtn, .cr-lpbtn { padding-inline: .55rem; }
	.cr-header__row { gap: .5rem; }
}
/* small screens (and large print): long words in big headings hyphenate instead of widening the page */
@media (max-width: 600px) {
	h1, h2, h3, .cr-h2, .cr-h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
	.cr-trail__tabs { display: flex; flex-wrap: wrap; border-radius: 22px; }
	.cr-tab { flex: 1 1 auto; padding-inline: .8rem; }
}

/* ---------- editions and "new" badges (ticket #886152) */
.cr-badge { position: absolute; right: -6px; top: -8px; padding: .28rem .6rem; border-radius: 3px; background: var(--mustard); color: var(--night); border: 2px solid var(--night); font: 800 .72rem/1.1 var(--display); letter-spacing: .02em; transform: rotate(4deg); box-shadow: 0 3px 0 var(--night); max-width: 80%; text-align: center; }
.cr-bc__cover { position: relative; }
.cr-h3__ed { display: block; font-size: .62em; font-style: italic; font-weight: 700; color: var(--ember-ink); margin-top: .2em; }
.cr-edition-note { display: flex; gap: .55rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r); background: var(--parch); border-left: 5px solid var(--gold); font-weight: 600; }
.cr-edition-note .cr-ico { color: var(--ember); margin-top: .2em; }
.cr-edition { display: flex; gap: .9rem; align-items: center; margin: 0 0 1rem; padding: .8rem 1rem; border: 2px dashed var(--parch-2); border-radius: var(--r); background: var(--paper); }
.cr-edition__cover { flex: none; width: 56px; }
.cr-edition__cover img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 4px 10px rgba(42, 30, 21, .25); }
.cr-edition__t { display: flex; flex-direction: column; gap: .2rem; font-size: 1rem; min-width: 0; }
.cr-edition__by { font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.cr-edition__t a { font-weight: 700; display: inline-block; min-height: 24px; }

/* ---------- the pause pill waits in a strip under the header until that strip scrolls away (see cr_pause); phones keep
   the full pill in the corner, desktop folds it to a 46 px leather plate in the left margin (label on hover/focus), so it
   doesn't sit on the content (Josh 11-02: it covered the first picker chip at 1440 px) */
html:not(.cr-js) .cr-pilldock { display: none; }
html { scroll-padding-bottom: 5rem; }
/* phones: the pill has its own row under the header row (the row wraps on purpose); 761 px and up it sits in the header
   row itself, between the menu and Larger print, showing "Pause" (Josh 11-03: its own row looked like a broken wrap) */
.cr-header__row { flex-wrap: wrap; row-gap: 0; }
.cr-header__end { min-height: 76px; }
.cr-pilldock { order: 5; flex: 0 0 100%; height: 58px; box-sizing: border-box; display: flex; align-items: center; padding-bottom: 6px; }
.cr-pilldock:not(.is-floating) .cr-pill { position: static; z-index: auto; } /* a flex item keeps its z-index even when static */
@media (min-width: 761px) {
	.cr-header__row { flex-wrap: nowrap; }
	.cr-nav, .cr-pilldock { margin-left: auto; }
	.cr-pilldock { order: 0; flex: none; height: auto; min-height: 44px; min-width: 1px; padding: 0; }
	.cr-pilldock:not(.is-floating) .cr-pill__x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cr-pilldock.is-floating .cr-pill { left: 10px; bottom: 12px; min-width: 46px; min-height: 46px; padding: 0 .7rem; }
	.cr-pilldock.is-floating .cr-pill:not(:hover):not(:focus-visible) .cr-pill__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =====================================================================================================================
   Saloon and frontier print-shop buttons (Josh 11-02: "they look like the buttons you have made on other sites. maybe
   some old west saloon style"). No pills, no offset shadows. The shapes are drawn on ::before/::after (clip-path), never on
   the button itself, so the focus ring is never clipped. CSS gradients only, no images. Hover: the sign swings once on
   its two chains and settles (one-shot transform; none while paused or under reduced motion). Press: pushed in.
   ===================================================================================================================== */
:root {
	--cr-notch: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
	--cr-notch-in: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
	--cr-nail: radial-gradient(circle, #FFF6D2 0 .9px, #9A6A1E 1.3px 2.6px, #4A2C0C 2.9px 3.3px, transparent 3.6px);
}
@keyframes cr-swing { 0% { transform: rotate(0); } 22% { transform: rotate(-2.4deg); } 46% { transform: rotate(1.7deg); } 68% { transform: rotate(-.9deg); } 86% { transform: rotate(.35deg); } 100% { transform: rotate(0); } }

/* ---- primary: an aged-gold sign board with a playbill double rule and a brass nail in each corner (Buy on Amazon, Help me
   pick a book, Turn the page, Swirl the pan, Tell me when / Get on the list) */
.cr-btn { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; box-sizing: border-box;
	padding: .7rem 1.7rem .62rem; border: 0; background: none; color: #2B1606; font: 400 1.06rem/1.15 var(--word); letter-spacing: .02em; text-decoration: none; cursor: pointer;
	text-shadow: 0 1px 0 rgba(255, 244, 200, .55); transform-origin: 50% -16px; white-space: nowrap; }
.cr-btn::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--cr-notch);
	background:
		var(--cr-nail) 6px 6px / 12px 12px no-repeat, var(--cr-nail) calc(100% - 6px) 6px / 12px 12px no-repeat,
		var(--cr-nail) 6px calc(100% - 6px) / 12px 12px no-repeat, var(--cr-nail) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat,
		linear-gradient(180deg, rgba(255, 250, 220, .55) 0 2px, transparent 2px calc(100% - 3px), rgba(70, 38, 6, .45) calc(100% - 3px)),
		repeating-linear-gradient(97deg, rgba(120, 72, 10, .07) 0 3px, transparent 3px 11px),
		linear-gradient(180deg, #F7DE8A 0%, #ECC04E 42%, #D8A23A 78%, #C98D2A 100%); }
.cr-btn::after { content: ""; position: absolute; inset: 4px; z-index: -1; border: 3px double rgba(74, 40, 10, .78); clip-path: var(--cr-notch-in); pointer-events: none; }
.cr-btn:hover, .cr-btn:focus-visible { color: #2B1606; }
.cr-btn:active { transform: translateY(2px); }
.cr-btn:active::before { background:
		var(--cr-nail) 6px 6px / 12px 12px no-repeat, var(--cr-nail) calc(100% - 6px) 6px / 12px 12px no-repeat,
		var(--cr-nail) 6px calc(100% - 6px) / 12px 12px no-repeat, var(--cr-nail) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat,
		linear-gradient(180deg, rgba(70, 38, 6, .45) 0 3px, transparent 3px calc(100% - 2px), rgba(255, 250, 220, .4) calc(100% - 2px)),
		linear-gradient(180deg, #D8A23A 0%, #E2B248 50%, #ECC04E 100%); }
.cr-btn .cr-ico { width: 1.15em; height: 1.15em; }
.cr-btn--small { min-height: 46px; padding: .6rem 1.35rem .54rem; font-size: 1rem; }

/* ---- secondary: a weathered plank, scorched at the edges, with a burnt-in border (See all books, Stoke the fire, the
   reader's Previous book, the map tabs) */
.cr-btn--ghost, .cr-btn--ghost-light, .cr-stoke, .cr-tab { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; box-sizing: border-box; padding: .6rem 1.4rem; border: 0; background: none; color: #FBEFD2; font: 800 .98rem/1.1 var(--display); letter-spacing: .07em;
	text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); cursor: pointer; transform-origin: 50% -16px; white-space: nowrap; }
.cr-btn--ghost::before, .cr-btn--ghost-light::before, .cr-stoke::before, .cr-tab::before { content: ""; position: absolute; inset: 0; z-index: -2;
	clip-path: polygon(0 7%, 3% 0, 52% 3%, 97% 0, 100% 9%, 99% 52%, 100% 93%, 96% 100%, 48% 97%, 4% 100%, 0 91%, 1% 48%);
	background:
		linear-gradient(90deg, rgba(18, 8, 2, .62), transparent 9%, transparent 91%, rgba(18, 8, 2, .62)),
		linear-gradient(180deg, rgba(18, 8, 2, .45), transparent 22%, transparent 78%, rgba(18, 8, 2, .5)),
		repeating-linear-gradient(178deg, rgba(255, 220, 170, .06) 0 2px, transparent 2px 7px, rgba(30, 14, 4, .14) 7px 8px, transparent 8px 13px),
		radial-gradient(ellipse 14px 5px at 72% 58%, rgba(30, 14, 4, .35), transparent 70%),
		linear-gradient(180deg, #7A4C2A, #6E4526 55%, #5E3B20); }
.cr-btn--ghost::after, .cr-btn--ghost-light::after, .cr-stoke::after, .cr-tab::after { content: ""; position: absolute; inset: 5px 7px; z-index: -1; border: 2px dashed rgba(255, 226, 170, .5); pointer-events: none; }
.cr-btn--ghost:hover, .cr-btn--ghost-light:hover, .cr-stoke:hover, .cr-tab:hover { color: #FFE7A3; }
.cr-btn--ghost:active, .cr-btn--ghost-light:active, .cr-stoke:active, .cr-tab:active { transform: translateY(2px); }
.cr-btn--ghost:active::before, .cr-btn--ghost-light:active::before, .cr-stoke:active::before { background:
		linear-gradient(90deg, rgba(18, 8, 2, .7), transparent 9%, transparent 91%, rgba(18, 8, 2, .7)),
		linear-gradient(180deg, rgba(18, 8, 2, .6), transparent 30%, transparent 85%, rgba(255, 220, 170, .12)),
		linear-gradient(180deg, #5E3B20, #6E4526); }
.cr-stoke .cr-ico { width: 1.3em; height: 1.3em; color: #FFB65C; }
.cr-tab[aria-pressed="true"]::before { background: linear-gradient(180deg, rgba(255, 250, 220, .5) 0 2px, transparent 2px), repeating-linear-gradient(97deg, rgba(120, 72, 10, .07) 0 3px, transparent 3px 11px), linear-gradient(180deg, #F7DE8A, #ECC04E 45%, #D8A23A); }
.cr-tab[aria-pressed="true"] { color: #2B1606; text-shadow: none; }
.cr-tab[aria-pressed="true"]::after { border-color: rgba(74, 40, 10, .55); }
.cr-trail__tabs { background: none; padding: 0; gap: .6rem; }

/* ---- chips: manila luggage tags with a brass eyelet; chosen = inked and checked (picker, Frankie's canvases) */
.cr-chip { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; box-sizing: border-box;
	padding: .45rem 1rem .45rem 1.85rem; border: 0; background: none; color: #3A220F; font: 700 .98rem/1.2 var(--display); cursor: pointer; transform-origin: 0 50%; }
.cr-chip::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
	background: radial-gradient(circle at 15px 50%, #2A1E15 0 2.6px, #C9A44A 3px 5.4px, #6E5226 5.8px 6.4px, transparent 6.8px),
		linear-gradient(180deg, rgba(255, 252, 235, .7) 0 2px, transparent 2px), linear-gradient(180deg, #F0E2BE, #E2CC97); }
.cr-chip::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(evenodd, 13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%, 13px 0, 13px 2px, 2.4px 50%, 13px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 2px, 13px 2px);
	background: #8B6A3A; pointer-events: none; }
.cr-chip__k { display: none; color: #F6D77A; font-family: var(--word); }
.cr-chip:hover { color: #2B1606; }
.cr-chip[aria-pressed="true"] { color: #F6D77A; }
.cr-chip[aria-pressed="true"] .cr-chip__k { display: inline; }
.cr-chip[aria-pressed="true"]::before { background: radial-gradient(circle at 15px 50%, #F2E4C4 0 2.6px, #C9A44A 3px 5.4px, #2A160A 5.8px 6.4px, transparent 6.8px),
		repeating-linear-gradient(100deg, rgba(255, 230, 180, .05) 0 2px, transparent 2px 6px), linear-gradient(180deg, #5A2E16, #4A2614); }
.cr-chip:active { transform: translateY(1px); }

/* ---- header buttons, the menu's close, the pause pill: small leather plates with brass stitching */
.cr-lpbtn, .cr-menubtn, .cr-panel__close, .cr-pill, .cr-strip__go { position: relative; z-index: 0; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	min-height: 44px; min-width: 44px; box-sizing: border-box; padding: .4rem .85rem; border: 0; background: none; color: #F2E4C4; font: 700 .92rem/1 var(--display); cursor: pointer; }
.cr-lpbtn::before, .cr-menubtn::before, .cr-panel__close::before, .cr-pill::before, .cr-strip__go::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--cr-notch-in);
	background: repeating-linear-gradient(115deg, rgba(255, 230, 190, .035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #4A2E1C, #3B2416 55%, #2E1C11); }
.cr-lpbtn::after, .cr-menubtn::after, .cr-panel__close::after, .cr-pill::after, .cr-strip__go::after { content: ""; position: absolute; inset: 3px; z-index: -1; border: 1.5px dashed rgba(201, 164, 74, .85); clip-path: var(--cr-notch-in); pointer-events: none; }
.cr-lpbtn:hover, .cr-menubtn:hover, .cr-panel__close:hover, .cr-pill:hover, .cr-strip__go:hover { color: #F4C834; }
.cr-lpbtn[aria-pressed="true"] { color: #2B1606; }
.cr-lpbtn[aria-pressed="true"]::before { background: linear-gradient(180deg, #F7DE8A, #ECC04E 45%, #D8A23A); }
.cr-lpbtn[aria-pressed="true"]::after { border-color: rgba(74, 40, 10, .7); }
.cr-lpbtn .cr-ico, .cr-menubtn .cr-ico { width: 1.35em; height: 1.35em; }
.cr-lpbtn:active, .cr-menubtn:active, .cr-panel__close:active, .cr-pill:active, .cr-strip__go:active { transform: translateY(1px); }
.cr-pill { padding: .45rem .95rem .45rem .75rem; font-size: .88rem; }
.cr-pill::before { background: repeating-linear-gradient(115deg, rgba(255, 230, 190, .035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #4A2E1C, #2E1C11); }

/* ---- Ninja Forms submit (an <input>: no pseudo-elements, so the plate is drawn in its own background) */
.cr-form input[type="submit"], .cr-form input[type="button"] { min-height: 50px; padding: .7rem 1.8rem .62rem; border: 4px double #5A3510; border-radius: 2px; color: #2B1606;
	font: 400 1.06rem/1.15 var(--word); letter-spacing: .02em; cursor: pointer; text-shadow: 0 1px 0 rgba(255, 244, 200, .55); transform-origin: 50% -16px;
	background: var(--cr-nail) 4px 4px / 12px 12px no-repeat, var(--cr-nail) calc(100% - 4px) 4px / 12px 12px no-repeat,
		var(--cr-nail) 4px calc(100% - 4px) / 12px 12px no-repeat, var(--cr-nail) calc(100% - 4px) calc(100% - 4px) / 12px 12px no-repeat,
		linear-gradient(180deg, #F7DE8A 0%, #ECC04E 42%, #D8A23A 78%, #C98D2A 100%); box-shadow: none; }
.cr-form input[type="submit"]:active { transform: translateY(2px); }
.cr-contact__box--news input[type="submit"] { border-color: #F4C834; }

/* ---- focus: a stitched (dashed) ring that suits the leather and the rope, leather-brown on light, mustard on dark */
.cr-btn:focus-visible, .cr-chip:focus-visible, .cr-btn--ghost:focus-visible, .cr-btn--ghost-light:focus-visible, .cr-stoke:focus-visible, .cr-tab:focus-visible,
.cr-lpbtn:focus-visible, .cr-menubtn:focus-visible, .cr-panel__close:focus-visible, .cr-pill:focus-visible, .cr-strip__go:focus-visible, .cr-form input[type="submit"]:focus-visible {
	outline: 3px dashed var(--leather); outline-offset: 4px; border-radius: 2px; }
.cr-band--night .cr-btn:focus-visible, .cr-hero :focus-visible, .cr-header :focus-visible, .cr-pagehead :focus-visible, .cr-footer :focus-visible, .cr-panel :focus-visible, .cr-pill:focus-visible,
.cr-trail .cr-tab:focus-visible, .cr-band--night .cr-chip:focus-visible, .cr-contact__box--news input:focus-visible, .cr-cta .cr-btn:focus-visible, .cr-strip__go:focus-visible { outline-color: var(--mustard); }

/* ---- hover: the sign swings once on its chains (pointer devices; never while paused / reduced motion) */
@media (hover: hover) {
	.cr-js:not(.cr-paused) .cr-btn:hover, .cr-js:not(.cr-paused) .cr-btn--ghost:hover, .cr-js:not(.cr-paused) .cr-btn--ghost-light:hover,
	.cr-js:not(.cr-paused) .cr-stoke:hover, .cr-js:not(.cr-paused) .cr-form input[type="submit"]:hover { animation: cr-swing .95s cubic-bezier(.3, .7, .4, 1) 1; }
	.cr-js:not(.cr-paused) .cr-chip:hover { animation: cr-swing .8s cubic-bezier(.3, .7, .4, 1) 1; }
}

/* ---- text links: underlined, with a fletched arrow that slides on hover */
.cr-link .cr-ico { width: 1.35em; height: 1.35em; }

/* ---- positioning the shared plate rules must not override */
.cr-stoke { position: absolute; }
.cr-pill { position: fixed; z-index: 50; } /* the shared plate rule sets z-index 0; floating, it must sit above the page */
.cr-pilldock:not(.is-floating) .cr-pill { position: relative; left: auto; bottom: auto; z-index: auto; } /* relative, not static: it holds its own plate */
@media (min-width: 1280px) { .cr-menubtn { display: none; } }
.cr-lp .cr-nav { display: none; } /* large print: the six links don't fit beside the brand at any width; they're in Menu */
.cr-lp .cr-menubtn { display: inline-flex; }
@media (min-width: 761px) and (max-width: 899px) { .cr-lp .cr-menubtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* large print, Pause in the row: Menu is its icon */
.cr-badge { top: auto; bottom: 6px; right: -6px; }

/* ---------- the shelf strip (home page, under the header; Skip 11-03): every book stands on a plank and drifts left. One
   composited transform on the track (no mask, no filter, nothing animated inside it); the edge shade is a static overlay.
   Stopped (hover, keyboard focus, a touch, the pause control, reduced motion, no JS) it is a shelf that scrolls sideways. */
.cr-strip { --h: clamp(88px, 4.6vw + 66px, 128px); --gap: clamp(16px, 2vw, 26px); --board: 16px; position: relative; overflow: hidden;
	background:
		linear-gradient(180deg, #A9784A 0 2px, rgba(0, 0, 0, 0) 2px calc(100% - 3px), rgba(10, 5, 2, .6) calc(100% - 3px)) left bottom / 100% var(--board) no-repeat,
		repeating-linear-gradient(179deg, rgba(255, 220, 170, .07) 0 1px, transparent 1px 4px, rgba(30, 14, 4, .18) 4px 5px, transparent 5px 7px) left bottom / 100% var(--board) no-repeat,
		linear-gradient(180deg, #7A4C2A, #6A4224 55%, #4E311B) left bottom / 100% var(--board) no-repeat,
		var(--night); }
.cr-lp .cr-strip { --h: clamp(104px, 5.6vw + 80px, 152px); }
body:has(.cr-strip) .cr-hero { padding-top: clamp(1.6rem, 3.4vw, 3rem); } /* the shelf sits right above the banner; the banner starts a little higher */
.cr-strip::before, .cr-strip::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: clamp(16px, 3vw, 48px); pointer-events: none; }
.cr-strip::before { left: 0; background: linear-gradient(90deg, var(--night), rgba(22, 17, 13, 0)); }
.cr-strip::after { right: 0; background: linear-gradient(270deg, var(--night), rgba(22, 17, 13, 0)); }
.cr-strip__view { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 52px; padding: 14px 0 calc(var(--board) - 2px); }
.cr-strip__view::-webkit-scrollbar { display: none; }
.cr-strip__track { display: flex; width: max-content; }
.cr-strip__list { display: flex; align-items: flex-end; margin: 0; padding: 0 var(--gut); list-style: none; }
.cr-strip__list--copy { display: none; }
.cr-strip__b { flex: none; position: relative; margin: 0 var(--gap) 0 0; }
.cr-strip__b:last-child { margin-right: 0; }
.cr-strip__b a { display: block; position: relative; border-radius: 2px; }
.cr-strip__b img { display: block; height: var(--h); width: auto; max-width: none; border-radius: 2px 3px 3px 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 12px -5px rgba(0, 0, 0, .75); }
.cr-strip__b a:focus-visible { outline: 3px dashed var(--mustard); outline-offset: 3px; }
.cr-strip__new { position: absolute; left: -5px; top: -7px; padding: .22rem .45rem .16rem; border: 1.5px solid #5A3510; background: linear-gradient(180deg, #F7DE8A, #ECC04E 50%, #D8A23A);
	color: #2B1606; font: 400 .74rem/1 var(--word); letter-spacing: .03em; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
/* drifting: both copies side by side, the track slides one copy's width and starts again */
.cr-strip.is-run .cr-strip__view { overflow: hidden; }
.cr-strip.is-run .cr-strip__list { padding: 0; }
.cr-strip.is-run .cr-strip__list--copy { display: flex; }
.cr-strip.is-run .cr-strip__b:last-child { margin-right: var(--gap); }
.cr-strip.is-run .cr-strip__track { animation: cr-strip 90s linear infinite; will-change: transform; }
.cr-strip.is-off .cr-strip__track { animation: none; } /* off screen: removed, not paused (a paused loop still ticks) */
@keyframes cr-strip { to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) {
	.cr-strip.is-run:hover .cr-strip__track { animation-play-state: paused; }
	.cr-js:not(.cr-paused) .cr-strip__b img { transition: transform .25s var(--ease); }
	.cr-js:not(.cr-paused) .cr-strip__b a:hover img { transform: translateY(-6px) rotate(-1.5deg); }
}
/* stopped by the pause control: arrows for a mouse (touch swipes, keyboard tabs) */
.cr-strip__go { display: none; position: absolute; z-index: 2; top: calc(14px + var(--h) / 2 - 22px); min-width: 44px; min-height: 44px; padding: 0; }
.cr-strip__go--prev { left: 6px; }
.cr-strip__go--next { right: 6px; }
@media (hover: hover) and (pointer: fine) { .cr-js.cr-paused .cr-strip__go { display: inline-flex; } }
.cr-strip.is-start .cr-strip__go--prev, .cr-strip.is-end .cr-strip__go--next { visibility: hidden; }
.cr-strip__go .cr-ico { width: 1.4em; height: 1.4em; }

/* ---------- the home banner, more alive (Josh 11-03: "can you make add to the animation?"): a story rises from the smoke
   (wisps curl up from the fire; a covered wagon, a horse and rider and an open book form in the empty sky one after
   another and drift apart), embers climb high, firelight flickers on the pine, the saguaro and the ground, the stars
   twinkle harder, a shooting star crosses every 8 s and the moon's glow breathes. Every loop is transform/opacity on its
   own HTML element (each smoke shape is a whole <svg>, nothing animated inside it, no filter, no scale change); off screen
   and paused they stop like the rest. Paused or reduced motion: a still scene with the open book in the smoke. */
.cr-camp__light { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; pointer-events: none;
	background: radial-gradient(58% 78% at 50% 94%, rgba(255, 150, 60, .34), rgba(255, 120, 40, .13) 52%, rgba(255, 120, 40, 0) 76%); animation: cr-firelight 2.3s linear infinite; }
@keyframes cr-firelight { 0% { opacity: .55; } 12% { opacity: .9; } 20% { opacity: .62; } 34% { opacity: 1; } 47% { opacity: .7; } 61% { opacity: .96; } 74% { opacity: .58; } 88% { opacity: .88; } 100% { opacity: .55; } }
.cr-smoke { position: absolute; left: 50%; bottom: 52%; width: 92%; height: 118%; margin-left: -46%; pointer-events: none; }
.cr-wisp { position: absolute; left: 50%; bottom: 0; width: 34px; margin-left: -17px; overflow: visible; opacity: 0; fill: none; stroke: rgba(230, 216, 188, .5); stroke-width: 2.6; stroke-linecap: round; animation: cr-wisp 6.6s ease-out infinite; }
.cr-wisp--b { margin-left: -4px; animation-delay: -2.2s; animation-duration: 7.4s; }
.cr-wisp--c { margin-left: -30px; animation-delay: -4.4s; animation-duration: 6.9s; }
@keyframes cr-wisp { 0% { opacity: 0; transform: translate(0, 0); } 18% { opacity: .85; } 55% { opacity: .5; transform: translate(10px, -46%); } 100% { opacity: 0; transform: translate(-8px, -92%); } }
.cr-tale { position: absolute; left: 50%; top: 13%; width: min(58%, 250px); margin-left: max(-29%, -125px); overflow: visible; opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: cr-tale 15s ease-in-out infinite; }
.cr-tale__halo { stroke: rgba(230, 216, 188, .12); stroke-width: 13; }
.cr-tale__line { stroke: rgba(240, 228, 204, .7); stroke-width: 2.2; stroke-dasharray: 34 4 10 5; } /* broken, like smoke */
.cr-tale--wagon { animation-delay: -.6s; }
.cr-tale--rider { animation-delay: 4.4s; }
.cr-tale--book { animation-delay: 9.4s; }
@keyframes cr-tale { 0% { opacity: 0; transform: translate(-6px, 56px); } 6% { opacity: .2; } 13% { opacity: 1; transform: translate(0, 10px); } 24% { opacity: 1; transform: translate(6px, -6px); }
	33% { opacity: 0; transform: translate(24px, -52px); } 100% { opacity: 0; transform: translate(24px, -52px); } }
.cr-fly { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 6px 2px rgba(255, 170, 60, .7); opacity: 0;
	animation: cr-fly var(--t) linear var(--d) infinite; }
.cr-fly:nth-child(3n) { width: 3px; height: 3px; background: #FFC76A; }
@keyframes cr-fly { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: 1; } 50% { opacity: .85; transform: translate(calc(var(--dx) * -.6), calc(var(--rise) * .5)); } 100% { opacity: 0; transform: translate(var(--dx), var(--rise)); } }
.cr-stars--c { width: 3px; height: 3px; box-shadow: 14vw 11vh #FFF4D6, 33vw 21vh #FFF4D6, 49vw 6vh #FFF4D6, 62vw 13vh #FFF4D6, 74vw 24vh #FFF4D6, 86vw 9vh #FFF4D6, 91vw 30vh #FFF4D6, 57vw 35vh #FFF4D6; animation: cr-twinkle 1.9s ease-in-out .4s infinite alternate; }
.cr-shoot { position: absolute; top: 9%; left: 78%; width: 150px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FFF4D6, rgba(255, 244, 214, .5) 30%, rgba(255, 244, 214, 0)); opacity: 0;
	animation: cr-shoot 8s ease-in 2.4s infinite; }
@keyframes cr-shoot { 0% { opacity: 0; transform: rotate(-16deg) translateX(0); } 1.5% { opacity: 1; } 9% { opacity: 0; transform: rotate(-16deg) translateX(-38vw); } 100% { opacity: 0; transform: rotate(-16deg) translateX(-38vw); } }
.cr-moon::after { content: ""; position: absolute; inset: -80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 228, 196, .3), rgba(242, 228, 196, .08) 60%, rgba(242, 228, 196, 0)); animation: cr-halo 4.6s ease-in-out infinite alternate; }
@keyframes cr-halo { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 899px) {
	.cr-smoke { height: 80%; }
	.cr-tale { top: 8%; width: min(52%, 200px); margin-left: max(-26%, -100px); }
}
/* paused / reduced motion: a still scene, the open book resting in the smoke */
.cr-paused .cr-wisp, .cr-paused .cr-fly, .cr-paused .cr-shoot, .cr-paused .cr-tale { animation: none !important; opacity: 0; }
.cr-paused .cr-tale--book { opacity: .7; transform: translate(0, 10px); }
.cr-paused .cr-camp__light { animation: none !important; opacity: .8; }
@media (prefers-reduced-motion: reduce) { html:not(.cr-js) *, html:not(.cr-js) *::before, html:not(.cr-js) *::after { animation: none !important; } } /* no script to pause them */

/* =====================================================================================================================
   Hover looks (Josh 11-03: "Many buttons ... move on hove, but do not change their look, can they?"). Each material
   changes its own way, and keyboard focus shows the same look plus the ring: gold signs polish up (brighter gold, a light
   sweep across the plate, the nails catch the light, the lettering embossed deeper, the sign lifts off its shadow);
   planks warm and darken with their burnt-in border glowing gold; leather plates warm with bright brass stitching; tags
   turn crisp with a darker edge and a bright eyelet. Pressed: pushed in, darker, a smaller shadow. Reduced motion keeps
   every look and drops the movement (no swing, sweep or press travel). Ghost buttons also carry .cr-btn, so the gold
   rules exclude them (the shared-rule trap from 11-02).
   ===================================================================================================================== */
:root {
	--cr-nail-lit: radial-gradient(circle, #FFFFFF 0 1.3px, #FFE7A0 1.6px 2.5px, #B5801F 2.8px 3.2px, #4A2C0C 3.4px 3.7px, transparent 4px);
	--cr-sheen: linear-gradient(105deg, rgba(255, 255, 240, 0) 20%, rgba(255, 255, 240, .85) 50%, rgba(255, 255, 240, 0) 80%);
	--cr-gold-lit: linear-gradient(180deg, #FFF5CC 0%, #FCDF80 36%, #F0C252 70%, #E0A63A 100%);
}
/* ---- gold signs (and the Ninja Forms submit, drawn in its own background) */
.cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light), .cr-form input[type="submit"], .cr-form input[type="button"] {
	--gold: linear-gradient(180deg, #F7DE8A 0%, #ECC04E 42%, #D8A23A 78%, #C98D2A 100%); --nail: var(--cr-nail); --sheen-x: -170%;
	--rim: linear-gradient(180deg, rgba(255, 250, 220, .55) 0 2px, transparent 2px calc(100% - 3px), rgba(70, 38, 6, .45) calc(100% - 3px));
	filter: drop-shadow(0 3px 0 rgba(30, 14, 2, .5)); }
.cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light)::before {
	background-image: var(--cr-sheen), var(--nail), var(--nail), var(--nail), var(--nail), var(--rim), repeating-linear-gradient(97deg, rgba(120, 72, 10, .07) 0 3px, transparent 3px 11px), var(--gold);
	background-size: 45% 100%, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% 100%, 100% 100%, 100% 100%;
	background-position: var(--sheen-x) 0, 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 0 0, 0 0, 0 0;
	background-repeat: no-repeat; }
.cr-form input[type="submit"], .cr-form input[type="button"] {
	background-image: var(--cr-sheen), var(--nail), var(--nail), var(--nail), var(--nail), var(--rim), var(--gold);
	background-size: 45% 100%, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% 100%, 100% 100%;
	background-position: var(--sheen-x) 0, 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 0 0, 0 0;
	background-repeat: no-repeat; }
.cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light):hover, .cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light):focus-visible,
.cr-form input[type="submit"]:hover, .cr-form input[type="submit"]:focus-visible, .cr-form input[type="button"]:hover, .cr-form input[type="button"]:focus-visible {
	--gold: var(--cr-gold-lit); --nail: var(--cr-nail-lit); --sheen-x: 270%;
	--rim: linear-gradient(180deg, rgba(255, 255, 245, .95) 0 2px, transparent 2px calc(100% - 3px), rgba(90, 50, 8, .55) calc(100% - 3px));
	color: #1C0D02; text-shadow: 0 1px 0 rgba(255, 252, 232, .95), 0 -1px 0 rgba(110, 64, 10, .5); filter: drop-shadow(0 6px 2px rgba(30, 14, 2, .42)); }
.cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light):active, .cr-form input[type="submit"]:active, .cr-form input[type="button"]:active {
	--gold: linear-gradient(180deg, #BF8424 0%, #D29C36 40%, #E2B046 100%); --nail: var(--cr-nail); --sheen-x: -170%;
	--rim: linear-gradient(180deg, rgba(60, 32, 4, .6) 0 3px, transparent 3px calc(100% - 2px), rgba(255, 250, 220, .35) calc(100% - 2px));
	color: #2B1606; text-shadow: 0 1px 0 rgba(255, 236, 170, .4); filter: drop-shadow(0 1px 0 rgba(30, 14, 2, .6)); transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) {
	.cr-js:not(.cr-paused) .cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light):hover::before, .cr-js:not(.cr-paused) .cr-btn:not(.cr-btn--ghost):not(.cr-btn--ghost-light):focus-visible::before,
	.cr-js:not(.cr-paused) .cr-form input[type="submit"]:hover, .cr-js:not(.cr-paused) .cr-form input[type="submit"]:focus-visible { transition: background-position .85s cubic-bezier(.3, .6, .3, 1); }
}
/* ---- weathered planks */
.cr-btn--ghost, .cr-btn--ghost-light, .cr-stoke, .cr-tab {
	--wood: linear-gradient(180deg, #7A4C2A, #6E4526 55%, #5E3B20); --grain-a: rgba(255, 220, 170, .06); --grain-b: rgba(30, 14, 4, .14); --burn: rgba(255, 226, 170, .5);
	filter: drop-shadow(0 3px 0 rgba(10, 5, 2, .5)); }
.cr-btn--ghost::before, .cr-btn--ghost-light::before, .cr-stoke::before, .cr-tab:not([aria-pressed="true"])::before,
.cr-btn--ghost:active::before, .cr-btn--ghost-light:active::before, .cr-stoke:active::before {
	background: linear-gradient(90deg, rgba(18, 8, 2, .62), transparent 9%, transparent 91%, rgba(18, 8, 2, .62)),
		linear-gradient(180deg, rgba(18, 8, 2, .45), transparent 22%, transparent 78%, rgba(18, 8, 2, .5)),
		repeating-linear-gradient(178deg, var(--grain-a) 0 2px, transparent 2px 7px, var(--grain-b) 7px 8px, transparent 8px 13px),
		radial-gradient(ellipse 14px 5px at 72% 58%, rgba(30, 14, 4, .35), transparent 70%), var(--wood); }
.cr-btn--ghost::after, .cr-btn--ghost-light::after, .cr-stoke::after, .cr-tab:not([aria-pressed="true"])::after { border-color: var(--burn); }
.cr-btn--ghost:hover, .cr-btn--ghost:focus-visible, .cr-btn--ghost-light:hover, .cr-btn--ghost-light:focus-visible, .cr-stoke:hover, .cr-stoke:focus-visible,
.cr-tab:not([aria-pressed="true"]):hover, .cr-tab:not([aria-pressed="true"]):focus-visible {
	--wood: linear-gradient(180deg, #8C4A20, #773A18 55%, #5A2A10); --grain-a: rgba(255, 196, 120, .1); --grain-b: rgba(30, 8, 0, .3); --burn: rgba(255, 200, 70, .95);
	color: #FFE7A3; text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 10px rgba(255, 180, 70, .45); filter: drop-shadow(0 5px 1px rgba(10, 5, 2, .45)); }
.cr-btn--ghost:active, .cr-btn--ghost-light:active, .cr-stoke:active, .cr-tab:active {
	--wood: linear-gradient(180deg, #4E2F18, #5E3A20); --burn: rgba(255, 226, 170, .35); filter: drop-shadow(0 1px 0 rgba(10, 5, 2, .55)); }
.cr-tab[aria-pressed="true"]:hover::before, .cr-tab[aria-pressed="true"]:focus-visible::before {
	background: linear-gradient(180deg, rgba(255, 255, 245, .9) 0 2px, transparent 2px), repeating-linear-gradient(97deg, rgba(120, 72, 10, .07) 0 3px, transparent 3px 11px), var(--cr-gold-lit); }
/* ---- leather plates (header, menu Close, the pause control, the strip's arrows) */
.cr-lpbtn, .cr-menubtn, .cr-panel__close, .cr-pill, .cr-strip__go { --hide: linear-gradient(180deg, #4A2E1C, #3B2416 55%, #2E1C11); --stitch: rgba(201, 164, 74, .85); }
.cr-pill { --hide: linear-gradient(180deg, #4A2E1C, #2E1C11); }
.cr-lpbtn:not([aria-pressed="true"])::before, .cr-menubtn::before, .cr-panel__close::before, .cr-pill::before, .cr-strip__go::before {
	background: repeating-linear-gradient(115deg, rgba(255, 230, 190, .035) 0 2px, transparent 2px 5px), var(--hide); }
.cr-lpbtn:not([aria-pressed="true"])::after, .cr-menubtn::after, .cr-panel__close::after, .cr-pill::after, .cr-strip__go::after { border-color: var(--stitch); }
.cr-lpbtn:not([aria-pressed="true"]):hover, .cr-lpbtn:not([aria-pressed="true"]):focus-visible, .cr-menubtn:hover, .cr-menubtn:focus-visible, .cr-panel__close:hover, .cr-panel__close:focus-visible,
.cr-pill:hover, .cr-pill:focus-visible, .cr-strip__go:hover, .cr-strip__go:focus-visible {
	--hide: linear-gradient(180deg, #6E4428, #573420 55%, #43271A); --stitch: #F4C834; color: #F4C834; }
.cr-lpbtn:active, .cr-menubtn:active, .cr-panel__close:active, .cr-pill:active, .cr-strip__go:active { --hide: linear-gradient(180deg, #24160D, #3B2416); --stitch: rgba(201, 164, 74, .55); }
.cr-lpbtn[aria-pressed="true"]:hover::before, .cr-lpbtn[aria-pressed="true"]:focus-visible::before { background: var(--cr-gold-lit); }
/* ---- luggage tags */
.cr-chip { --tag: linear-gradient(180deg, #F0E2BE, #E2CC97); --eye: #C9A44A; --edge: #8B6A3A; }
.cr-chip:not([aria-pressed="true"])::before { background: radial-gradient(circle at 15px 50%, #2A1E15 0 2.6px, var(--eye) 3px 5.4px, #6E5226 5.8px 6.4px, transparent 6.8px),
	linear-gradient(180deg, rgba(255, 252, 235, .7) 0 2px, transparent 2px), var(--tag); }
.cr-chip::after { background: var(--edge); }
.cr-chip:not([aria-pressed="true"]):hover, .cr-chip:not([aria-pressed="true"]):focus-visible { --tag: linear-gradient(180deg, #FFF9E8, #F3E4BE); --eye: #F6D77A; --edge: #5A3A16; color: #2B1606; }
.cr-chip:not([aria-pressed="true"]):active { --tag: linear-gradient(180deg, #E2CC97, #D4B97E); }
.cr-chip[aria-pressed="true"]:hover::before, .cr-chip[aria-pressed="true"]:focus-visible::before { background: radial-gradient(circle at 15px 50%, #F2E4C4 0 2.6px, #F6D77A 3px 5.4px, #2A160A 5.8px 6.4px, transparent 6.8px),
	repeating-linear-gradient(100deg, rgba(255, 230, 180, .06) 0 2px, transparent 2px 6px), linear-gradient(180deg, #73401F, #5E3118); }
.cr-chip[aria-pressed="true"]:hover, .cr-chip[aria-pressed="true"]:focus-visible { --edge: #2A160A; }
/* ---- the strip's covers lift on keyboard focus too */
@media (prefers-reduced-motion: no-preference) { .cr-js:not(.cr-paused) .cr-strip__b a:focus-visible img { transform: translateY(-6px) rotate(-1.5deg); } }
/* ---- reduced motion: every look stays, the movement goes */
@media (prefers-reduced-motion: reduce) {
	.cr-btn, .cr-btn--ghost, .cr-btn--ghost-light, .cr-stoke, .cr-tab, .cr-chip, .cr-lpbtn, .cr-menubtn, .cr-panel__close, .cr-pill, .cr-strip__go, .cr-form input[type="submit"], .cr-form input[type="button"] { animation: none !important; }
	.cr-btn:active, .cr-btn--ghost:active, .cr-btn--ghost-light:active, .cr-stoke:active, .cr-tab:active, .cr-chip:active, .cr-lpbtn:active, .cr-menubtn:active,
	.cr-panel__close:active, .cr-pill:active, .cr-strip__go:active, .cr-form input[type="submit"]:active, .cr-form input[type="button"]:active { transform: none !important; }
	.cr-strip__b img { transition: none !important; transform: none !important; }
}

/* =====================================================================================================================
   The old site's own background art (Josh 11-03: "please try to incorporate some of the background from the old site"),
   tinted into the night palette so it reads as this site (tools/make-backgrounds.py; WebP 900 / 1600 px):
   - the book-cover collage (old: behind the top carousel and "Get in Touch"): behind the shelf strip, and the call-out
   - the painted desert with the open book (old: behind "Newest novel / Christmas book"): behind New this fall
   - the dunes and the plains (old: the home page's story rows): a horizon at the foot of the Novels / Picture books heads
   Static backgrounds only (no fixed attachment, no parallax); the two below the fold load when near (site.js, .is-bg).
   ===================================================================================================================== */
.cr-strip { background:
		linear-gradient(180deg, #A9784A 0 2px, rgba(0, 0, 0, 0) 2px calc(100% - 3px), rgba(10, 5, 2, .6) calc(100% - 3px)) left bottom / 100% var(--board) no-repeat,
		repeating-linear-gradient(179deg, rgba(255, 220, 170, .07) 0 1px, transparent 1px 4px, rgba(30, 14, 4, .18) 4px 5px, transparent 5px 7px) left bottom / 100% var(--board) no-repeat,
		linear-gradient(180deg, #7A4C2A, #6A4224 55%, #4E311B) left bottom / 100% var(--board) no-repeat,
		linear-gradient(180deg, rgba(22, 17, 13, .3), rgba(22, 17, 13, .1) 45%, rgba(22, 17, 13, .5)),
		url("assets/bg/collage-1600.webp") center 32% / cover no-repeat,
		var(--night); }
@media (max-width: 720px) { .cr-strip { background-image:
		linear-gradient(180deg, #A9784A 0 2px, rgba(0, 0, 0, 0) 2px calc(100% - 3px), rgba(10, 5, 2, .6) calc(100% - 3px)),
		repeating-linear-gradient(179deg, rgba(255, 220, 170, .07) 0 1px, transparent 1px 4px, rgba(30, 14, 4, .18) 4px 5px, transparent 5px 7px),
		linear-gradient(180deg, #7A4C2A, #6A4224 55%, #4E311B),
		linear-gradient(180deg, rgba(22, 17, 13, .3), rgba(22, 17, 13, .1) 45%, rgba(22, 17, 13, .5)),
		url("assets/bg/collage-900.webp"); } }
/* New this fall: dusk over the painted desert; the book text sits on paper cards */
.cr-newest { background: var(--night); color: var(--parch); }
.cr-newest.is-bg, html:not(.cr-js) .cr-newest { background:
		linear-gradient(180deg, rgba(22, 17, 13, .97) 0, rgba(22, 17, 13, .94) 22%, rgba(22, 17, 13, .62) 55%, rgba(22, 17, 13, .25) 100%),
		url("assets/bg/desert-1600.webp") center bottom / cover no-repeat, var(--night); }
@media (max-width: 720px) { .cr-newest.is-bg, html:not(.cr-js) .cr-newest { background-image:
		linear-gradient(180deg, rgba(22, 17, 13, .97) 0, rgba(22, 17, 13, .94) 22%, rgba(22, 17, 13, .62) 55%, rgba(22, 17, 13, .25) 100%), url("assets/bg/desert-900.webp"); } }
.cr-newest .cr-sechead .cr-h2 { color: var(--paper); }
.cr-newest .cr-sechead .cr-kicker, .cr-newest .cr-sechead .cr-rule { color: var(--gold); }
.cr-newbook__text { background: var(--paper); color: var(--ink); padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 6px; box-shadow: 0 0 0 1px rgba(42, 30, 21, .08), 0 18px 36px rgba(0, 0, 0, .45); }
.cr-newest .cr-newbook__cover :focus-visible { outline-color: var(--mustard); }
.cr-newest .cr-flip__hint { margin-top: .5rem; padding: .3rem .7rem; border-radius: 3px; background: rgba(22, 17, 13, .88); color: var(--parch); } /* over the art */
/* the call-out: the cover collage, shaded further for its text */
.cr-cta.is-bg, html:not(.cr-js) .cr-cta { background: linear-gradient(rgba(22, 17, 13, .55), rgba(22, 17, 13, .55)), url("assets/bg/collage-1600.webp") center / cover no-repeat, var(--night); }
@media (max-width: 720px) { .cr-cta.is-bg, html:not(.cr-js) .cr-cta { background-image: linear-gradient(rgba(22, 17, 13, .55), rgba(22, 17, 13, .55)), url("assets/bg/collage-900.webp"); } }
/* page heads with a horizon (the text keeps clear of it: the head grows by the horizon's height) */
.cr-pagehead--art { padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + clamp(90px, 13vw, 200px)); }
.cr-pagehead__in { z-index: 1; }
.cr-pagehead__edge { z-index: 2; }
.cr-pagehead__art { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 18vw, 270px); z-index: 0; pointer-events: none;
	background: linear-gradient(180deg, var(--night) 0, rgba(22, 17, 13, .66) 34%, rgba(22, 17, 13, .3) 100%), var(--cr-art) center 62% / cover no-repeat, var(--night); }
.cr-pagehead--dunes { --cr-art: url("assets/bg/dunes-1600.webp"); }
.cr-pagehead--plains { --cr-art: url("assets/bg/plains-1600.webp"); }
@media (max-width: 720px) { .cr-pagehead--dunes { --cr-art: url("assets/bg/dunes-900.webp"); } .cr-pagehead--plains { --cr-art: url("assets/bg/plains-900.webp"); } }
@media print { .cr-strip, .cr-newest, .cr-cta, .cr-pagehead__art { background: none !important; } }

/* ------------------------------------------------------------------------------------------------ SearchShifter (2026-11-03)
   Glossary terms and Q&A pages come from the plugin's own PHP templates through header.php / footer.php: a slim night page
   head (crumbs + kicker), then the plugin's markup in the prose column. The Glossary and FAQ pages are ordinary pages with
   its shortcodes in the same column. */
.cr-pagehead--ss { padding-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.cr-ss h1, .cr-ss h1.ss-term-title { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); line-height: 1.05; color: var(--ink); margin: 0 0 .6em; }
.cr-ss > .ss-glossary-wrapper, .cr-ss > .container { padding: 0 !important; max-width: none !important; margin: 0 !important; }
.cr-ss .ss-section-title { font: 700 .84rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ember-ink); margin: 2em 0 .6em; }
.cr-ss .ss-section-text, .cr-ss .container > div { font-size: 1.15rem; line-height: 1.7; }
.cr-ss .ss-section-text p:first-child { margin-top: 0; }
.cr-ss .ss-qa-updated { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; }
.cr-ss hr, .cr-ssband hr { border: 0; border-top: 1px solid var(--parch-2); margin-block: 1.6rem; }
.cr-text ul.ss-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cr-text .ss-related-list li { margin: 0; }
.cr-text .ss-related-list a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: .35rem 1rem; border: 1px solid #8B6A3A; border-radius: 3px; background: #F0E2BE; color: #3A220F; font: 700 1rem/1.2 var(--display); text-decoration: none; }
.cr-text .ss-related-list a:hover, .cr-text .ss-related-list a:focus-visible { background: #FFF9E8; border-color: #5A3A16; color: #2B1606; }
.cr-ss .ss-brand-reinforce { font-style: italic; color: var(--ink-soft); }
.cr-ss .ss-authority-badge, .cr-ss .ss-locked, .cr-ss .ss-back-link { display: none; } /* footer.php prints the way back */
.cr-text ul.ss-appears-list { list-style: none; padding: 0; margin: 0; }
.cr-text .ss-appears-list li { padding: .45rem 0; margin: 0; border-bottom: 1px dotted var(--parch-2); }
.cr-text .ss-appears-list a { font: 700 1.15rem/1.3 var(--display); text-decoration: none; }
.cr-text .ss-appears-list a:hover { text-decoration: underline; }
.cr-ss__back { margin: 2.4rem 0 0; }
/* the glossary page */
.cr-text .ss-glossary-wrapper .ss-glossary-page { max-width: none; }
.cr-text .ss-glossary-search-wrapper input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: .75rem 1.1rem; min-height: 48px; border: 2px solid #8B6A3A; border-radius: 3px; background: #fff; color: var(--ink); }
.cr-text .ss-glossary-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.6rem; }
.cr-text .ss-glossary-nav a { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid #8B6A3A; border-radius: 3px; background: #F0E2BE; color: #3A220F; font: 400 1.15rem/1 var(--word); text-decoration: none; }
.cr-text .ss-glossary-nav a:hover, .cr-text .ss-glossary-nav a:focus-visible { background: var(--mustard); color: #2B1606; }
.cr-text .ss-letter-section { margin: 0 0 1.4rem; }
.cr-text .ss-letter-section h2 { font: 400 1.25rem/1.2 var(--word); letter-spacing: .06em; color: var(--ember-ink); border-bottom: 1px solid var(--parch-2); padding-bottom: .3rem; margin: 0 0 .4rem !important; }
.cr-text ul.ss-term-list { list-style: none; padding: 0; margin: 0; }
.cr-text .ss-term-list li { padding: .6rem 0; border-bottom: 1px dotted var(--parch-2); margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.5; }
.cr-text .ss-term-list li p, .cr-text .ss-term-list .ss-term-preview { font: inherit; color: var(--ink-soft); margin: .15rem 0 0; }
.cr-text .ss-term-list a { font: 800 1.2rem/1.3 var(--display); text-decoration: none; }
.cr-text .ss-term-list a:hover { text-decoration: underline; }
/* the FAQ page: the plugin's duplicate heading out of the way (the page head says it) */
.cr-text .ss-public-faq .ss-faq-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-text > .ss-public-faq { max-width: none; margin: 0; padding: 0; }
.cr-text .ss-public-faq .ss-faq-item { border: 0; border-bottom: 1px solid var(--parch-2); border-radius: 0; background: none; padding: 1rem 0; margin: 0; }
.cr-text .ss-public-faq .ss-faq-question { display: block; font: 800 1.3rem/1.25 var(--display); color: var(--ink); cursor: pointer; list-style: none; position: relative; padding: 0 2.4rem 0 0; background: none; min-height: 44px; }
.cr-text .ss-public-faq .ss-faq-question::-webkit-details-marker { display: none; }
.cr-text .ss-public-faq .ss-faq-icon { display: none; }
.cr-text .ss-public-faq .ss-faq-question::after { content: "+"; content: "+" / ""; position: absolute; right: .2rem; top: .05rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 2px;
	background: linear-gradient(180deg, #F7DE8A, #ECC04E 50%, #D8A23A); color: #2B1606; font: 400 1.1rem/1 var(--word); transition: transform .3s var(--ease); }
.cr-text .ss-public-faq .ss-faq-item[open] .ss-faq-question::after { transform: rotate(45deg); }
.cr-text .ss-public-faq .ss-faq-answer { margin: .7rem 0 0; padding: 0; color: var(--ink); }
.cr-text .ss-public-faq .ss-faq-answer p { margin: 0 0 .7rem; }
.cr-paused .cr-text .ss-public-faq .ss-faq-question::after { transition: none; }
/* glossary links in prose */
a.ss-glossary-term { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a.ss-glossary-term:hover { text-decoration-style: solid; }

/* the plugin's own system-ui font, blue links and 40 px margins give way to the theme */
.cr-ssband { padding-top: clamp(1.8rem, 4vw, 3rem); }
.cr-text .ss-glossary-page, .cr-ss.ss-glossary-wrapper, .cr-ss .ss-glossary-wrapper, .cr-text .ss-glossary-wrapper { max-width: none; margin: 0; padding: 0; font-family: var(--body); color: var(--ink); }
.cr-ss .ss-section-text, .cr-text .ss-term-preview, .cr-text .ss-public-faq { font-family: var(--body); color: var(--ink); }
.cr-ss .ss-section-text { font-size: 1.15rem; line-height: 1.7; }
.cr-text .ss-term-list a, .cr-text .ss-term-title { color: var(--leather); }
.cr-text .ss-term-preview { font-size: 1.02rem; color: var(--ink-soft); }
.cr-text .ss-glossary-search-wrapper { text-align: left; }
.cr-text .ss-glossary-search-wrapper input { font-family: var(--body); max-width: none; }