/* ==========================================================================
   Blue Ribbons Publishing: foundation layer
   Visual tokens and component classes live in Elementor (global variables
   and global classes, labelled br-*). This file adds only what the editor
   cannot express: fonts, base defaults, motion, pseudo-elements, the sticky
   header, navigation skin, the ribbon artwork and reduced-motion rules.
   ========================================================================== */

/* 1. Fonts (SIL Open Font License, self-hosted, Latin subset) ------------- */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
	font-weight: 300 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* 2. Motion tokens --------------------------------------------------------- */
:root {
	--br-dur-micro: 120ms;     /* press, toggle */
	--br-dur-fast: 220ms;      /* hover, focus, arrow nudge */
	--br-dur-standard: 520ms;  /* reveals, header state */
	--br-dur-slow: 860ms;      /* image reveals, book settle */
	--br-dur-hero: 1300ms;     /* hero choreography, ribbon unfurl */
	--br-ease-out: cubic-bezier(.22, .8, .24, 1);     /* soft settle: the house curve */
	--br-ease-in-out: cubic-bezier(.62, .05, .32, 1); /* state changes */
	--br-ease-press: cubic-bezier(.3, 1.35, .6, 1);   /* tiny overshoot, press/hover only */
	--br-rise: 18px;
	--br-stagger: 70ms;
	--br-tilt-max: 6deg;
	--br-shadow-book: 0 1px 1px rgba(21, 32, 58, .10), 0 12px 20px -8px rgba(21, 32, 58, .24), 0 34px 60px -30px rgba(21, 32, 58, .38);
	--br-shadow-lift: 0 18px 40px -22px rgba(21, 32, 58, .38);
}

/* 3. Base ------------------------------------------------------------------ */
html { background-color: var(--br-paper, #FBF7EF); }
body {
	background-color: var(--br-paper, #FBF7EF);
	color: var(--br-text, #2A2B38);
	font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
	font-size: var(--fs-body, 1.0625rem);
	line-height: 1.65;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/* In-page anchors land clear of the sticky header */
[id] { scroll-margin-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--br-ribbon-tint, #E7EDF7); color: var(--br-ink, #15203A); }

a { color: var(--br-ribbon, #1F4E9E); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--br-ribbon-deep, #14336B); }

/* Same-family italic for emphasis inside headings */
:is(.br-display, .br-h1, .br-h2, .br-h3, .br-h4) em { font-style: italic; font-weight: inherit; }
:is(.br-display, .br-h1, .br-h2) { font-optical-sizing: auto; text-wrap: balance; }
:is(.br-lead, .br-body) { text-wrap: pretty; }

/* Focus: always visible for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--br-ribbon, #1F4E9E);
	outline-offset: 3px;
}
:is(.br-bg-ink, .br-footer, .br-cta-band) :focus-visible { outline-color: var(--br-sky, #A8C3E2); }
.skip-link.screen-reader-text:focus {
	background: var(--br-ink, #15203A); color: var(--br-paper, #FBF7EF);
	padding: .75rem 1.25rem; border-radius: 0 0 8px 0; z-index: 100000; font-weight: 600;
}

/* 4. Sticky header --------------------------------------------------------- */
.elementor-location-header {
	position: sticky; top: 0; z-index: 90;
	background-color: rgba(251, 247, 239, 0);
	transition: background-color var(--br-dur-standard) var(--br-ease-out),
		box-shadow var(--br-dur-standard) var(--br-ease-out),
		translate var(--br-dur-standard) var(--br-ease-in-out);
}
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }
.br-scrolled .elementor-location-header {
	background-color: rgba(251, 247, 239, .94);
	box-shadow: 0 1px 0 var(--br-line, #E3D9C6);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
}
.br-menu-open .elementor-location-header { background-color: var(--br-paper, #FBF7EF); }
.elementor .br-header { transition: padding var(--br-dur-standard) var(--br-ease-out); }
.br-scrolled .elementor .br-header { padding-top: .7rem; padding-bottom: .7rem; }
@media (prefers-reduced-motion: no-preference) {
	.br-header-hidden .elementor-location-header { translate: 0 -100%; }
}

/* 5. Temporary typographic brand mark (one replaceable slot) ------------- */
.br-brand { text-decoration: none; }
.br-brand-sub { display: flex; align-items: center; gap: .55em; }
.br-brand-sub::before, .br-brand-sub::after {
	content: ""; flex: 1 1 0; min-width: .9em; height: 1px; background: currentColor; opacity: .55;
}
.br-brand:hover .br-brand-name { color: var(--br-ribbon-deep, #14336B); }
.elementor .br-footer .br-brand-name { color: var(--br-paper, #FBF7EF); }
.elementor .br-footer .br-brand-sub { color: var(--br-sky, #A8C3E2); }
.br-footer .br-brand:hover .br-brand-name { color: var(--br-sky, #A8C3E2); }

/* 6. Navigation skin (Elementor Pro Nav Menu inside the header) ---------- */
.br-nav .elementor-nav-menu--main .elementor-item {
	font-family: "Figtree", sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.2;
	color: var(--br-ink, #15203A); padding: .6rem .85rem; position: relative;
}
.br-nav .elementor-nav-menu--main .elementor-item::after {
	content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 1.5px;
	background: var(--br-ribbon, #1F4E9E); transform: scaleX(0); transform-origin: left center;
	transition: transform var(--br-dur-fast) var(--br-ease-out); opacity: 1;
}
.br-nav .elementor-nav-menu--main .elementor-item:hover,
.br-nav .elementor-nav-menu--main .elementor-item:focus-visible { color: var(--br-ribbon, #1F4E9E); }
.br-nav .elementor-nav-menu--main .elementor-item:hover::after,
.br-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after { transform: scaleX(1); }
.br-nav .elementor-menu-toggle {
	display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
	background: transparent; color: var(--br-ink, #15203A); border: 1.5px solid var(--br-ink, #15203A);
	border-radius: 999px; font: 600 .9375rem/1 "Figtree", sans-serif; cursor: pointer;
	transition: background-color var(--br-dur-fast) var(--br-ease-out), color var(--br-dur-fast) var(--br-ease-out);
}
.br-nav .elementor-menu-toggle::before { content: "Menu"; }
.br-nav .elementor-menu-toggle.elementor-active::before { content: "Close"; }
.br-nav .elementor-menu-toggle:hover { background: var(--br-ink, #15203A); color: var(--br-paper, #FBF7EF); }
.br-nav .elementor-menu-toggle svg { width: 1em; height: 1em; fill: currentColor; }
@media (max-width: 1024px) { .br-nav .elementor-menu-toggle { display: inline-flex; } }
/* Header layout: brand | navigation (one line, right-aligned) | Buy Books */
.br-header > .br-brand { flex-shrink: 0; }
.br-header > .br-nav { min-width: 0; }
@media (min-width: 1025px) {
	.br-header > .br-nav { flex: 0 1 auto; margin-left: auto; }
}
.br-nav .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; justify-content: flex-end; }
.br-nav .elementor-nav-menu--main .elementor-nav-menu > li { flex-shrink: 0; }
@media (max-width: 1024px) {
	.br-header > .br-nav { order: 3; flex: 0 0 auto; }
	.br-header > .br-header-actions { margin-left: auto; }
}
@media (max-width: 479px) {
	.br-nav .elementor-menu-toggle::before, .br-nav .elementor-menu-toggle.elementor-active::before { content: none; }
	.br-nav .elementor-menu-toggle { padding: .5rem .8rem; }
}
/* current page: ribbon blue, never Elementor's default accent */
.br-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.br-nav .elementor-nav-menu--main .current-menu-ancestor > .elementor-item { color: var(--br-ribbon, #1F4E9E); }
/* Our Worlds dropdown (desktop) */
.br-nav .elementor-nav-menu--main .sub-menu {
	background: var(--br-paper, #FBF7EF); border: 1px solid var(--br-line, #E3D9C6); border-radius: 12px;
	box-shadow: 0 24px 48px -28px rgba(21, 32, 58, .45); padding: .5rem; min-width: 17rem !important;
}
.br-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	font-family: "Figtree", sans-serif; font-weight: 500; font-size: .9375rem; color: var(--br-ink, #15203A);
	padding: .7rem .9rem; border-radius: 8px; background: transparent; border: 0;
}
.br-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item::after { display: none; }
.br-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.br-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus-visible,
.br-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active { background: var(--br-paper-deep, #F2EBDD); color: var(--br-ribbon, #1F4E9E); }
.br-nav .sub-arrow svg { width: .6em; height: .6em; fill: currentColor; }
/* mobile menu: world pages indented under Our Worlds */
.br-nav .elementor-nav-menu--dropdown .sub-menu { background: var(--br-paper-deep, #F2EBDD); border: 0; }
.br-nav .elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
	font-family: "Figtree", sans-serif; font-size: 1.0625rem; font-weight: 500; color: var(--br-ink, #15203A);
	padding: .85rem var(--space-gutter, 1.25rem) .85rem calc(var(--space-gutter, 1.25rem) + 1rem); border-bottom: 1px solid var(--br-line, #E3D9C6); min-height: 44px;
}
.br-nav .elementor-nav-menu--dropdown {
	background: var(--br-paper, #FBF7EF); border-top: 1px solid var(--br-line, #E3D9C6);
	box-shadow: 0 40px 50px -40px rgba(21, 32, 58, .45); margin-top: .75rem !important;
}
.br-nav .elementor-nav-menu--dropdown .elementor-item {
	font-family: "Fraunces", serif; font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
	line-height: 1.2; color: var(--br-ink, #15203A); background: transparent;
	padding: 1rem var(--space-gutter, 1.25rem); border-bottom: 1px solid var(--br-line, #E3D9C6);
}
.br-nav .elementor-nav-menu--dropdown .elementor-item:hover,
.br-nav .elementor-nav-menu--dropdown .elementor-item:focus-visible,
.br-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	background: var(--br-paper-deep, #F2EBDD); color: var(--br-ribbon, #1F4E9E);
}

/* 7. Buttons and links: interaction layer --------------------------------- */
.br-btn { white-space: nowrap; }
.br-btn {
	transition: background-color var(--br-dur-fast) var(--br-ease-out), color var(--br-dur-fast) var(--br-ease-out),
		border-color var(--br-dur-fast) var(--br-ease-out), box-shadow var(--br-dur-fast) var(--br-ease-out),
		translate var(--br-dur-fast) var(--br-ease-press);
	-webkit-tap-highlight-color: transparent;
}
.br-btn:hover { translate: 0 -1px; }
.br-btn:active { translate: 0 1px; transition-duration: var(--br-dur-micro); }
.br-btn-primary:hover { box-shadow: 0 10px 22px -12px rgba(31, 78, 158, .65); }
.br-btn-arrow::after, .br-btn-text::after, .br-btn-retailer::after {
	content: "\2192"; display: inline-block; font-weight: 500;
	transition: translate var(--br-dur-fast) var(--br-ease-out);
}
.br-btn-arrow:hover::after, .br-btn-text:hover::after, .br-btn-retailer:hover::after { translate: 4px 0; }
.br-btn-text {
	background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
	background-size: 100% 1.5px; background-position: 0 100%;
	transition: background-size var(--br-dur-fast) var(--br-ease-out), color var(--br-dur-fast) var(--br-ease-out);
}
.br-btn-text:hover { background-size: 35% 1.5px; translate: none; }

/* 7b. Cascade guard for modifier classes -----------------------------------
   Elementor writes each document's V4 class CSS to its own file, and the page's file
   loads after the header's and footer's. When a page also uses a base class (br-btn,
   br-h3...), that later copy would override modifiers used in the header or footer.
   These (0,3,0) rules restate only the properties a modifier shares with its base. */
.elementor .br-btn.br-btn-small { padding: 0.7rem 1.2rem; font-size: 0.9375rem; min-height: 44px; }
.elementor .br-btn.br-btn-primary { border-color: var(--br-ribbon); }
.elementor .br-btn.br-btn-secondary { border-color: var(--br-ink); }
.elementor .br-btn.br-btn-text { padding: 0.35rem 0; min-height: 44px; border-width: 0; border-radius: 0; }
.elementor .br-btn.br-btn-retailer { border-color: var(--br-line); border-radius: var(--radius-s); justify-content: space-between; width: 100%; padding: 1rem 1.25rem; }
.elementor .br-btn.br-btn-on-dark { border-color: var(--br-paper); }
.elementor .br-btn.br-btn-ghost-on-dark { border-color: var(--br-paper); }
.elementor .br-on-dark[class] { color: var(--br-paper); }
.elementor .br-on-dark-muted[class] { color: #C3C9D6; }
.elementor .br-badge.br-badge-gold { background-color: var(--br-rosette); color: var(--br-ink); }
.elementor .br-art.br-placeholder { padding: var(--space-m); }

/* 7c. Buy links (rendered by [br_buy]; external retailers open in a new tab) */
.elementor .br-buy, .br-buy { display: flex; flex-wrap: wrap; gap: .75rem; }
.elementor .br-buy .br-buy-link, .br-buy-link {
	display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .9rem 1.5rem; border-radius: 999px;
	font: 600 1rem/1.2 "Figtree", sans-serif; text-decoration: none; border: 1.5px solid var(--br-ink, #15203A); color: var(--br-ink, #15203A);
	transition: background-color var(--br-dur-fast) var(--br-ease-out), color var(--br-dur-fast) var(--br-ease-out);
}
.elementor .br-buy .br-buy-link::after, .br-buy-link::after { content: "\2197"; font-weight: 500; }
.elementor .br-buy .br-buy-link:hover, .br-buy-link:hover { background: var(--br-ink, #15203A); color: var(--br-paper, #FBF7EF); }
.elementor .br-buy .br-buy-link.is-primary, .br-buy-link.is-primary { background: var(--br-ribbon, #1F4E9E); border-color: var(--br-ribbon, #1F4E9E); color: var(--br-paper, #FBF7EF); }
.elementor .br-buy .br-buy-link.is-primary:hover, .br-buy-link.is-primary:hover { background: var(--br-ribbon-deep, #14336B); border-color: var(--br-ribbon-deep, #14336B); }
.br-buy-pending { display: block; }

/* 8. Artwork placeholders ------------------------------------------------- */
.br-placeholder {
	background-image: repeating-linear-gradient(135deg, rgba(203, 191, 169, .22) 0 1px, transparent 1px 12px);
	position: relative;
}
.br-placeholder::before, .br-placeholder::after { /* crop marks: reads as "artwork goes here" */
	content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
	border-color: var(--br-neutral, #CBBFA9); border-style: solid;
}
.br-placeholder::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.br-placeholder::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.br-art > img, img.br-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-placeholder-label { text-wrap: balance; }
/* A placeholder that is also a book keeps the spine and sheen, not the crop marks */
.br-book.br-placeholder::before { inset: 0 auto 0 0; top: 0; left: 0; width: 6%; height: auto; border: 0; }
.br-book.br-placeholder::after { inset: 0; top: 0; left: 0; width: auto; height: auto; border: 0; }

/* 9. Book as an object ---------------------------------------------------- */
.br-book {
	transform: perspective(1400px) rotateX(var(--br-rx, 0deg)) rotateY(var(--br-ry, 0deg));
	transition: transform var(--br-dur-slow) var(--br-ease-out), translate var(--br-dur-standard) var(--br-ease-out),
		box-shadow var(--br-dur-standard) var(--br-ease-out);
	will-change: transform;
}
.br-book::before { /* spine shading on the left edge */
	content: ""; position: absolute; inset: 0 auto 0 0; width: 6%; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, rgba(21, 32, 58, .22), rgba(255, 255, 255, .16) 55%, rgba(21, 32, 58, .06));
}
.br-book::after { /* faint cover sheen */
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%);
}
.br-card-book:hover .br-book, .br-card-book:focus-visible .br-book { translate: 0 -6px; }
.br-card-book:hover .br-book { box-shadow: var(--br-shadow-book), var(--br-shadow-lift); }

/* 10. Cards: small signature details ------------------------------------- */
.br-card-world .br-world-window { overflow: hidden; }
.br-card-world:hover .br-world-window > * { scale: 1.035; }
.br-world-window > * { transition: scale var(--br-dur-slow) var(--br-ease-out); }
.br-card-activity { position: relative; }
.br-card-activity::after { /* folded corner: a printable sheet */
	content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; pointer-events: none;
	background: linear-gradient(225deg, var(--br-paper, #FBF7EF) 50%, var(--br-line, #E3D9C6) 50%);
}
.br-card-activity, .br-card-product, .br-card-world { transition: translate var(--br-dur-standard) var(--br-ease-out), box-shadow var(--br-dur-standard) var(--br-ease-out); }
.br-card-activity:hover, .br-card-product:hover { translate: 0 -4px; box-shadow: var(--br-shadow-lift); }
.br-card-article .br-art { overflow: hidden; }
.br-card-article .br-art > * { transition: scale var(--br-dur-slow) var(--br-ease-out); }
.br-card-article:hover .br-art > * { scale: 1.03; }
.br-card-article:hover .br-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.br-character-art { position: relative; }
.br-character-art::after { /* soft ground shadow beneath a character */
	content: ""; position: absolute; left: 18%; right: 18%; bottom: -10px; height: 18px; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(21, 32, 58, .16), rgba(21, 32, 58, 0)); pointer-events: none;
}
.br-badge { clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.br-input::placeholder { color: var(--br-muted, #5D5B68); opacity: 1; }

/* 11. Blue Ribbon artwork ------------------------------------------------- */
.br-ribbon {
	display: block; width: 100%; padding: 0; pointer-events: none;
	background-repeat: no-repeat; background-position: center; background-size: contain;
}
.br-ribbon-hero { background-image: url("../img/ribbon-hero.svg"); aspect-ratio: 1200 / 460; }
.br-hero-stage .br-ribbon-hero { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.br-ribbon-divider { background-image: url("../img/ribbon-divider.svg"); aspect-ratio: 360 / 40; width: min(100%, 220px); }
.br-ribbon-lead { background-image: url("../img/ribbon-lead.svg"); aspect-ratio: 180 / 900; width: clamp(56px, 7vw, 90px); }
.br-ribbon-band { background-image: url("../img/ribbon-band.svg"); aspect-ratio: 1200 / 80; }
.br-ribbon-mark { background-image: url("../img/ribbon-mark.svg"); aspect-ratio: 120 / 16; width: 64px; }
/* On dark grounds the ribbon turns to pale satin so it still reads */
:is(.br-bg-ink, .br-footer, .br-cta-band) .br-ribbon-divider { background-image: url("../img/ribbon-divider-light.svg"); }
:is(.br-bg-ink, .br-footer, .br-cta-band) .br-ribbon-band { background-image: url("../img/ribbon-band-light.svg"); }

/* 12. Motion patterns (progressive enhancement; all disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
	/* fade + rise */
	.br-js .br-reveal { opacity: 0; translate: 0 var(--br-rise); }
	.br-js .br-reveal.is-inview {
		opacity: 1; translate: 0 0;
		transition: opacity var(--br-dur-standard) var(--br-ease-out), translate var(--br-dur-standard) var(--br-ease-out);
	}
	/* stagger: children enter one after another */
	.br-js .br-stagger > * { opacity: 0; translate: 0 var(--br-rise); }
	.br-js .br-stagger.is-inview > * {
		opacity: 1; translate: 0 0;
		transition: opacity var(--br-dur-standard) var(--br-ease-out), translate var(--br-dur-standard) var(--br-ease-out);
		transition-delay: calc(var(--br-i, 0) * var(--br-stagger));
	}
	/* image reveal: a mask opens upward */
	.br-js .br-mask-reveal { clip-path: inset(100% 0 0 0); }
	.br-js .br-mask-reveal.is-inview { clip-path: inset(0 0 0 0); transition: clip-path var(--br-dur-slow) var(--br-ease-out); }
	/* hover elevation */
	.br-lift { transition: translate var(--br-dur-standard) var(--br-ease-out), box-shadow var(--br-dur-standard) var(--br-ease-out); }
	.br-lift:hover { translate: 0 -4px; box-shadow: var(--br-shadow-lift); }
	/* touch devices: a single gentle settle instead of cursor tilt */
	@media (hover: none) {
		.br-js .br-tilt .br-book { rotate: -2.5deg; }
		.br-js .br-tilt.is-inview .br-book { rotate: 0deg; transition: rotate var(--br-dur-slow) var(--br-ease-out); }
	}
	/* ribbon unfurl: a soft-edged mask draws the ribbon along its length */
	.br-js .br-ribbon-unfurl {
		-webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 58%);
		mask-image: linear-gradient(90deg, #000 0 40%, transparent 58%);
		-webkit-mask-size: 260% 100%; mask-size: 260% 100%;
		-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
		-webkit-mask-position: 100% 0; mask-position: 100% 0;
	}
	.br-js .br-ribbon-unfurl.is-inview { animation: br-unfurl var(--br-dur-hero) var(--br-ease-out) both; }
	.br-js .br-ribbon-lead.br-ribbon-unfurl {
		-webkit-mask-image: linear-gradient(180deg, #000 0 40%, transparent 58%);
		mask-image: linear-gradient(180deg, #000 0 40%, transparent 58%);
		-webkit-mask-size: 100% 260%; mask-size: 100% 260%;
		-webkit-mask-position: 0 100%; mask-position: 0 100%;
	}
	.br-js .br-ribbon-lead.br-ribbon-unfurl.is-inview { animation-name: br-unfurl-down; }
	@keyframes br-unfurl {
		from { -webkit-mask-position: 100% 0; mask-position: 100% 0; rotate: -1.2deg; translate: -1% 0; }
		to { -webkit-mask-position: 0 0; mask-position: 0 0; rotate: 0deg; translate: 0 0; }
	}
	@keyframes br-unfurl-down {
		from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
		to { -webkit-mask-position: 0 0; mask-position: 0 0; }
	}
	/* scroll-linked: the ribbon draws as the visitor scrolls (browsers that support it) */
	@supports (animation-timeline: view()) {
		.br-js .br-ribbon-scroll.br-ribbon-unfurl,
		.br-js .br-ribbon-scroll.br-ribbon-unfurl.is-inview {
			animation: br-unfurl linear both; animation-timeline: view(); animation-range: entry 5% cover 45%;
		}
		.br-js .br-ribbon-lead.br-ribbon-scroll.br-ribbon-unfurl,
		.br-js .br-ribbon-lead.br-ribbon-scroll.br-ribbon-unfurl.is-inview { animation-name: br-unfurl-down; }
		/* subtle parallax depth: layers drift a few percent against the scroll */
		.br-depth-1, .br-depth-2, .br-depth-3 { animation: br-drift linear both; animation-timeline: view(); animation-range: cover; }
		.br-depth-1 { --br-depth: 2%; } .br-depth-2 { --br-depth: 4%; } .br-depth-3 { --br-depth: 6%; }
		@keyframes br-drift { from { translate: 0 var(--br-depth); } to { translate: 0 calc(var(--br-depth) * -1); } }
	}
}

/* 12b. Homepage: hero entrance, sparkles, world details ------------------- */
.br-sparkle {
	width: 14px; aspect-ratio: 1; pointer-events: none; background: var(--br-rosette, #C89A3E);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.br-hero-stage .br-sheet img, .br-look-inside img, .br-character-frame img { filter: contrast(1.02); }
.br-look-inside > * { transition: translate var(--br-dur-standard) var(--br-ease-out), rotate var(--br-dur-standard) var(--br-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.br-look-inside > *:hover { translate: 0 -4px; rotate: -1deg; }
	.br-character-frame > * { transition: scale var(--br-dur-slow) var(--br-ease-out); }
	.br-character-frame:hover > * { scale: 1.04; }
}
/* The homepage carries its own newsletter block, so the footer band steps aside there */
.home .br-footer-top { display: none; }
@media (prefers-reduced-motion: no-preference) {
	/* Hero choreography: wordmark, headline, copy, artwork, then the ribbon. Under 1.4s in total. */
	.br-enter-1, .br-enter-2, .br-enter-3, .br-enter-4, .br-enter-5 { animation: br-enter var(--br-dur-slow) var(--br-ease-out) both; }
	.br-enter-2 { animation-delay: 110ms; }
	.br-enter-3 { animation-delay: 220ms; }
	.br-enter-4 { animation-delay: 340ms; }
	.br-enter-5 { animation-delay: 460ms; }
	.home .elementor-location-header .br-brand { animation: br-enter var(--br-dur-standard) var(--br-ease-out) both; }
	.br-hero-stage .br-ribbon-unfurl.is-inview { animation-delay: 520ms; }
	/* the hero ribbon fades in from the left instead of starting with a cut end */
	.br-js .br-hero-stage .br-ribbon-hero.br-ribbon-unfurl {
		-webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 58%), linear-gradient(90deg, transparent 0, #000 16%);
		mask-image: linear-gradient(90deg, #000 0 40%, transparent 58%), linear-gradient(90deg, transparent 0, #000 16%);
		-webkit-mask-size: 260% 100%, 100% 100%; mask-size: 260% 100%, 100% 100%;
		-webkit-mask-composite: source-in; mask-composite: intersect;
	}
	@keyframes br-enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}

/* 12c. World theming ------------------------------------------------------
   Each world sets --w-* tokens; the shared world classes (br-world-hero, br-door,
   br-char-*, br-chip...) read them, so one structure takes on each world's atmosphere. */
:root, .br-theme-mua { --w-sky: var(--mua-sky, #EAF0FB); --w-tint: var(--mua-tint, #F6ECF6); --w-title: var(--mua-deep, #4B2A7B); --w-accent-text: #6A4A9E; --w-ink: var(--br-text, #2A2B38); --w-muted: #4F4D5C; --w-chip: rgba(255, 255, 255, .72); }
.br-theme-rex { --w-sky: var(--rex-sky, #FBF6EA); --w-tint: var(--rex-tint, #EAF3D6); --w-title: var(--rex-deep, #2D5A1F); --w-accent-text: #3E6F22; --w-ink: #26301F; --w-muted: #4A5540; --w-chip: rgba(255, 255, 255, .75); }
.br-theme-mc { --w-sky: var(--mc-sky, #D9F0F7); --w-tint: var(--mc-tint, #D2EFEC); --w-title: var(--mc-deep, #0A4F66); --w-accent-text: #A02A5C; --w-ink: #123845; --w-muted: #2E5361; --w-chip: rgba(255, 255, 255, .72); }
.br-theme-mm { --w-sky: var(--mm-sky, #DCEBF7); --w-tint: var(--mm-tint, #FFF1C9); --w-title: var(--mm-deep, #23324A); --w-accent-text: #8A5A00; --w-ink: #23324A; --w-muted: #465269; --w-chip: rgba(255, 255, 255, .8); }
.br-theme-sq { --w-sky: var(--sq-sky, #1B2A5C); --w-tint: var(--sq-tint, #0D1838); --w-title: #FFFFFF; --w-accent-text: var(--sq-accent, #F5C542); --w-ink: #E8ECF8; --w-muted: #BCC6E4; --w-chip: rgba(255, 255, 255, .1); }
.br-theme-meadow { --w-sky: var(--meadow-sky, #EEF3E4); --w-tint: var(--meadow-tint, #F1EBDD); --w-title: var(--meadow-deep, #3E5534); --w-accent-text: #4F6B3F; --w-ink: #2E3527; --w-muted: #4E5646; --w-chip: rgba(255, 255, 255, .7); }
/* Star Quest is the one dark world: a night sky with a faint star field */
.elementor .br-theme-sq.br-world-hero { background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 68%, #cfe8ff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 16%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 44%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 78%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 46% 88%, #fff 50%, transparent 51%), linear-gradient(180deg, #0D1838 0%, #16255A 60%, #0D1838 100%); }
.br-theme-sq :focus-visible { outline-color: var(--sq-cyan, #53D3EA); }
:is(.br-world-hero, .br-w-section, .br-gateway).br-theme-sq .br-btn-primary { background-color: var(--sq-accent, #F5C542); border-color: var(--sq-accent, #F5C542); color: #0D1838; }
:is(.br-world-hero, .br-w-section, .br-gateway).br-theme-sq .br-btn-primary:hover { background-color: #FFFFFF; border-color: #FFFFFF; color: #0D1838; }
:is(.br-world-hero, .br-w-section, .br-gateway, .br-door).br-theme-sq .br-btn-text, .br-theme-sq .br-crumb a { color: var(--sq-cyan, #53D3EA); }
.br-door, .br-cast-item, .br-char-frame { transition: translate var(--br-dur-standard) var(--br-ease-out), box-shadow var(--br-dur-standard) var(--br-ease-out); }
.br-door-window > img, .br-char-frame > img, .br-cast-item > img, .br-hero-art > img { transition: scale var(--br-dur-slow) var(--br-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.br-door:hover { translate: 0 -6px; box-shadow: var(--br-shadow-lift); }
	.br-door:hover .br-door-window > img { scale: 1.05; }
	.br-char-card:hover .br-char-frame > img { scale: 1.04; }
}
.br-door:hover .br-btn-text::after, .br-door:focus-visible .br-btn-text::after { translate: 4px 0; }
/* a corridor of doors: gentle alternating heights on wide screens */
@media (min-width: 1025px) { .br-door-row > *:nth-child(even) { margin-bottom: 2.25rem; } }
/* phones: the doors become a swipeable row inside the page (no page overflow) */
@media (max-width: 767px) {
	.elementor .br-door-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0 0 1rem; margin-right: calc(var(--space-gutter, 1.25rem) * -1); padding-right: var(--space-gutter, 1.25rem); -webkit-overflow-scrolling: touch; }
	.elementor .br-door-row > * { flex: 0 0 72%; scroll-snap-align: start; }
}
.br-chip-row + .br-chip-row { margin-top: .25rem; }
/* the flagship world ribbon enters softly from the gutter instead of starting with a cut end */
.br-world-grid .br-world-band { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.elementor .br-bg-paper .br-chip { background-color: var(--w-tint); }
.br-crumb a { color: inherit; text-decoration-thickness: 1px; }
.br-crumb a:hover { color: var(--w-title); }

/* 13. Reduced motion: a complete, static experience ----------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
	.br-btn, .br-book, .br-lift, .br-card-activity, .br-card-product, .br-card-world,
	.elementor-location-header, .br-header { transition-duration: 1ms !important; }
	.br-btn:hover, .br-btn:active, .br-card-book:hover .br-book, .br-card-activity:hover,
	.br-card-product:hover, .br-lift:hover { translate: none !important; }
	.br-book { transform: none !important; }
	.br-look-inside > *:hover { translate: none; rotate: none; }
	.br-door:hover { translate: none; }
	.br-door:hover .br-door-window > img, .br-char-card:hover .br-char-frame > img { scale: none; }
	.br-card-world:hover .br-world-window > *, .br-card-article:hover .br-art > * { scale: none !important; }
	.br-btn-arrow:hover::after, .br-btn-text:hover::after, .br-btn-retailer:hover::after { translate: none; }
}