/*
Theme Name: The Arabic Journey
Author: Abu Sufian Mahmud
Description: "Morning light" block theme for The Arabic Journey: Arabic books and journals. Warm paper and sand with the brand purples and a touch of sand-gold, soft drifting light, floating covers and clean, gentle motion.
Version: 2.2.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ilm-editions
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
	--ilm-paper: #FBF7EF;
	--ilm-paper-2: #F4ECDC;
	--ilm-sand: #E9DCC0;
	--ilm-sand-deep: #D9C7A3;
	--ilm-olive: #5E4A9C;
	--ilm-olive-deep: #4A3A82;
	--ilm-olive-light: #A893D9;
	--ilm-olive-pale: #F1EBFB;
	--ilm-sage: #9E88D2;
	--ilm-gold: #C9A465;
	--ilm-gold-deep: #8A6A3B;
	--ilm-ink: #2E1B54;
	--ilm-white: #FFFDF8;
	--ilm-grad-gold: linear-gradient(180deg, #D8B87C 0%, #B9935A 100%);
	--ilm-grad-olive: linear-gradient(145deg, #7A5FB8 0%, #5E4A9C 100%);
	--ilm-shadow-book: 0 30px 44px -22px rgba(52, 36, 92, 0.5), 0 6px 14px rgba(52, 36, 92, 0.1);
	--ilm-shadow-soft: 0 24px 46px -30px rgba(52, 36, 92, 0.45);
	--ilm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Context colours (switched only inside the olive accent cards). */
	--c-h: #2E1B54;
	--c-t: #3A3155;
	--c-m: #6A6382;
	--c-eb: #8A6A3B;
	--c-ar: #4A3A82;
	--c-link: #4A3A82;
	--c-link-hover: #2E1B54;
	--c-line: rgba(46, 27, 84, 0.12);
	--c-line-strong: rgba(46, 27, 84, 0.22);
	--c-card: #FFFDF8;
	--c-ring: var(--ilm-paper);
	/* Older names, kept so earlier content still works. */
	--ilm-ivory: var(--ilm-paper);
	--ilm-parchment: var(--ilm-paper-2);
	--ilm-cream: var(--ilm-paper);
	--ilm-brown: var(--ilm-ink);
	--ilm-forest: var(--ilm-ink);
	--ilm-bronze: var(--ilm-gold);
	--ilm-bronze-deep: var(--ilm-gold-deep);
	--ilm-terra: var(--ilm-olive);
	--ilm-clay: var(--ilm-gold-deep);
	--ilm-line: var(--c-line);
	--ilm-line-strong: var(--c-line-strong);
	/* Pointed (lancet) arch, spring line at 40% height */
	--ilm-arch: polygon(0% 100%, 0% 40%, 0.19% 36.65%, 0.75% 33.32%, 1.68% 30.04%, 2.97% 26.83%, 4.61% 23.71%, 6.6% 20.71%, 8.91% 17.84%, 11.54% 15.13%, 14.45% 12.59%, 17.65% 10.24%, 21.09% 8.1%, 24.76% 6.18%, 28.63% 4.5%, 32.67% 3.07%, 36.86% 1.9%, 41.16% 0.99%, 45.55% 0.36%, 50% 0%, 54.45% 0.36%, 58.84% 0.99%, 63.14% 1.9%, 67.33% 3.07%, 71.37% 4.5%, 75.24% 6.18%, 78.91% 8.1%, 82.35% 10.24%, 85.55% 12.59%, 88.46% 15.13%, 91.09% 17.84%, 93.4% 20.71%, 95.39% 23.71%, 97.03% 26.83%, 98.32% 30.04%, 99.25% 33.32%, 99.81% 36.65%, 100% 40%, 100% 100%);
}

/* Olive accent cards: light text on bright olive. */
.ilm-olive-card,
.ilm-announce {
	--c-h: #FBF7EF;
	--c-t: rgba(251, 247, 239, 0.92);
	--c-m: rgba(251, 247, 239, 0.78);
	--c-eb: #F1DDB0;
	--c-ar: #F6E7C4;
	--c-link: #F6E7C4;
	--c-link-hover: #FFFFFF;
	--c-line: rgba(251, 247, 239, 0.2);
	--c-line-strong: rgba(251, 247, 239, 0.32);
	--c-card: rgba(255, 255, 255, 0.08);
	color: var(--c-t);
}

/* =========================================================
   2. Base
   ========================================================= */
html { scroll-behavior: smooth; }
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: var(--ilm-paper);
	color: var(--c-t);
	overflow-x: hidden;
}
img { height: auto; }
:where(h1, h2, h3, .ilm-section-head p) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
::selection { background: var(--ilm-olive-light); color: var(--ilm-ink); }
:where(a, button, summary, input):focus-visible { outline: 2px solid var(--ilm-olive); outline-offset: 3px; border-radius: 3px; }
[id] { scroll-margin-top: 100px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.ilm-main--landing > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
.ilm-main--landing > .wp-block-post-content { margin: 0; }
.ilm-main p:empty { display: none; }

/* =========================================================
   3. Type helpers
   ========================================================= */
.ilm-eyebrow,
.is-style-ilm-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem !important;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-eb);
	margin-bottom: 0.35rem;
}
.ilm-eyebrow--line { display: flex; align-items: center; gap: 0.9rem; }
.ilm-eyebrow--line::before { content: ""; width: 34px; height: 1px; background: var(--ilm-gold); }
.ilm-ar,
.is-style-ilm-arabic {
	font-family: var(--wp--preset--font-family--arabic-display) !important;
	color: var(--c-ar);
	direction: rtl;
	unicode-bidi: isolate;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.5;
	font-weight: 400;
}
.ilm-ar:not(.has-text-align-center),
.is-style-ilm-arabic:not(.has-text-align-center) { text-align: left; }
.is-style-ilm-arch-card .ilm-ar,
.ilm-center .ilm-ar { text-align: center; }
.ilm-ar-text, [lang="ar"] {
	font-family: var(--wp--preset--font-family--arabic);
	direction: rtl;
	unicode-bidi: isolate;
}
.ilm-lead { font-size: var(--wp--preset--font-size--large); color: var(--c-m); max-width: 38em; }
.has-text-align-center.ilm-lead, .ilm-center .ilm-lead { margin-inline: auto; }
.ilm-muted { color: var(--c-m); font-size: 0.92rem; }
.ilm-center { text-align: center; }
.ilm-center > * { margin-inline: auto; }
.ilm-hl {
	background-image: linear-gradient(90deg, #6A52B0, #A78BE0 55%, #7A5FB8);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ilm-shimmer 7s ease-in-out infinite alternate;
}
@keyframes ilm-shimmer { to { background-position: 100% 0; } }

/* Ornament: a line, a small dome, a line */
.ilm-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin: 0.7rem auto 1.3rem;
	max-width: 210px;
}
.ilm-section-head .ilm-ornament,
.ilm-page-head .ilm-ornament,
.ilm-night .ilm-ornament { max-width: 210px !important; }
.ilm-ornament::before,
.ilm-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ilm-gold)); }
.ilm-ornament::after { background: linear-gradient(90deg, var(--ilm-gold), transparent); }
.ilm-ornament span {
	width: 16px;
	height: 16px;
	background: var(--ilm-grad-gold);
	clip-path: polygon(50% 0%, 56% 14%, 72% 26%, 86% 44%, 92% 64%, 92% 100%, 8% 100%, 8% 64%, 14% 44%, 28% 26%, 44% 14%);
}

/* =========================================================
   4. Buttons
   ========================================================= */
.wp-block-button .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--ilm-olive);
	color: #FBF7EF;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 26px -14px rgba(74, 58, 130, 0.75);
	transition: transform 0.35s var(--ilm-ease), box-shadow 0.35s var(--ilm-ease), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wp-block-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.8s var(--ilm-ease);
}
.wp-block-button .wp-block-button__link:hover {
	background: var(--ilm-olive-deep);
	color: #FBF7EF;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(74, 58, 130, 0.85);
}
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(120%); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 253, 248, 0.6);
	color: var(--ilm-ink);
	border: 1.5px solid rgba(46, 27, 84, 0.22);
	box-shadow: none;
	padding: calc(0.85rem - 1.5px) calc(1.6rem - 1.5px);
}
.wp-block-button.is-style-outline .wp-block-button__link::after { display: none; }
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ilm-olive-pale);
	border-color: var(--ilm-olive);
	color: var(--ilm-olive-deep);
	box-shadow: none;
}
/* On olive cards the main button turns sand-gold. */
.ilm-olive-card .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ilm-grad-gold);
	color: var(--ilm-ink);
	box-shadow: 0 12px 26px -14px rgba(120, 90, 40, 0.8);
}
.ilm-olive-card .wp-block-button.is-style-outline .wp-block-button__link {
	color: #FBF7EF;
	border-color: rgba(251, 247, 239, 0.45);
	background: transparent;
}
.ilm-price-tag { font-weight: 400; opacity: 0.85; margin-left: 0.35rem; }

/* Images */
.is-style-ilm-book img, .ilm-book img { box-shadow: var(--ilm-shadow-book); border-radius: 2px 6px 6px 2px; }
.is-style-ilm-framed img { border: 1px solid var(--c-line); border-radius: 16px; background: var(--ilm-white); box-shadow: var(--ilm-shadow-soft); }
.is-style-ilm-arch img { clip-path: var(--ilm-arch); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ilm-ill { margin: 0; }
.ilm-ill img { display: block; width: 100%; height: auto; }

/* =========================================================
   5. Announcement bar and header
   ========================================================= */
.ilm-announce {
	position: relative;
	z-index: 61;
	background: linear-gradient(90deg, #56428F, #6F5AAE 50%, #56428F);
	text-align: center;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	padding: 0.55rem 3rem;
}
.ilm-announce p { margin: 0; }
.ilm-announce a { color: #F6E7C4; font-weight: 700; text-decoration: none; margin-left: 0.4rem; }
.ilm-announce a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.ilm-announce__close {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #FBF7EF;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	opacity: 0.75;
}
.ilm-announce__close:hover { opacity: 1; }
.ilm-announce.is-hidden { display: none; }

.ilm-header-wrap { display: contents; }
.ilm-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(251, 247, 239, 0.88);
	-webkit-backdrop-filter: saturate(1.2) blur(14px);
	backdrop-filter: saturate(1.2) blur(14px);
	border-bottom: 1px solid rgba(46, 27, 84, 0.08);
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	transition: padding 0.35s var(--ilm-ease), background-color 0.35s ease, box-shadow 0.35s ease;
}
.ilm-header.is-scrolled {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	background: rgba(251, 247, 239, 0.96);
	box-shadow: 0 12px 30px -20px rgba(46, 27, 84, 0.35);
}
.admin-bar .ilm-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* The frosted glass would trap the full-screen mobile menu inside the header, so it is switched off while the menu is open. */
.ilm-header:has(.is-menu-open) { z-index: 100; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ilm-paper); }
.ilm-header__inner { gap: 1.5rem; }
.ilm-header__nav-group { gap: 1.8rem; }
.ilm-header .wp-block-navigation { gap: 1.7rem; }
.ilm-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	color: var(--ilm-ink);
	text-decoration: none;
	font-size: 1rem;
	padding: 0.3rem 0;
	transition: color 0.25s ease;
}
.ilm-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--ilm-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ilm-ease);
}
.ilm-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--ilm-olive); }
.ilm-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.ilm-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; }
.ilm-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--ilm-olive); }
.ilm-header__cta .wp-block-button__link { padding: 0.68rem 1.25rem; font-size: 0.88rem; }
.ilm-header .wp-block-navigation__responsive-container-open { color: var(--ilm-ink); }
.ilm-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* Logo */
/* The wordmark sits in the same 56px slot the old arch mark used, so the header keeps its height. */
.ilm-logo { display: inline-flex; align-items: center; min-height: 56px; text-decoration: none !important; }
.ilm-logo__img { display: block; width: auto; height: 36px; flex: none; transition: transform 0.5s var(--ilm-ease); }
.ilm-logo:hover .ilm-logo__img { transform: translateY(-2px); }

/* Mobile navigation overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: radial-gradient(70% 45% at 85% 5%, rgba(168, 147, 217, 0.3), transparent 70%), radial-gradient(60% 45% at 5% 95%, rgba(217, 183, 118, 0.3), transparent 70%), var(--ilm-paper) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.8rem;
	color: var(--ilm-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a::after { display: none; }
.wp-block-navigation__responsive-container-close { color: var(--ilm-ink); }

/* =========================================================
   6. Bands: paper, sand, olive mist and soft moving light
   ========================================================= */
.ilm-section {
	position: relative;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.ilm-section--tight { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.ilm-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--wp--preset--spacing--50) !important; }
.ilm-section-head > * { margin-inline: auto; }
.ilm-section-head h2 { margin-top: 0.2rem; }

/* Sand band */
.is-style-ilm-parchment,
.ilm-band-sand {
	--c-ring: var(--ilm-paper-2);
	background-color: var(--ilm-paper-2);
	background-image: radial-gradient(55% 50% at 90% 0%, rgba(217, 183, 118, 0.18), transparent 70%), radial-gradient(45% 40% at 0% 100%, rgba(168, 147, 217, 0.14), transparent 70%);
}
/* Olive mist band (also used where older pages asked for a dark or green band) */
.ilm-band-olive,
.ilm-dark,
.is-style-ilm-emerald,
.is-style-ilm-pattern,
.ilm-band-sage {
	--c-ring: var(--ilm-olive-pale);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--ilm-olive-pale);
}
/* Soft light that drifts slowly across the bright bands */
.ilm-band-olive::before,
.ilm-dark::before,
.is-style-ilm-emerald::before,
.ilm-page-head::before,
.ilm-product-hero::before,
.ilm-hero::before,
.ilm-night::before,
.is-style-ilm-night::before {
	content: "";
	position: absolute;
	inset: -30% -15%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(34% 42% at 78% 22%, rgba(168, 147, 217, 0.34), transparent 70%),
		radial-gradient(36% 44% at 10% 88%, rgba(217, 183, 118, 0.3), transparent 70%),
		radial-gradient(28% 30% at 46% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
		radial-gradient(26% 30% at 92% 86%, rgba(201, 164, 101, 0.18), transparent 70%);
	animation: ilm-drift 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes ilm-drift {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
	100% { transform: translate3d(3%, -2%, 0) scale(1.03); }
}
.ilm-page-head::before { animation-duration: 22s; animation-direction: alternate-reverse; }
.ilm-product-hero::before { animation-duration: 30s; }

/* Closing band: a bright sky over the dunes */
.ilm-night,
.is-style-ilm-night {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	background:
		var(--ilm-skyline) 50% 100% / max(1600px, 100%) auto no-repeat,
		radial-gradient(28% 40% at 50% 70%, rgba(246, 221, 168, 0.7), transparent 70%),
		linear-gradient(180deg, #FBF6EA 0%, #F5EBD6 100%);
	padding-top: clamp(4.5rem, 9vw, 7rem);
	padding-bottom: clamp(10rem, 18vw, 15rem);
}
.ilm-night .ilm-ar { text-align: center; }
.ilm-night .ilm-lead { margin-inline: auto; }
.ilm-night h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

/* Sparkles (added by theme.js in the home hero) */
.ilm-sparks { position: absolute !important; inset: 0 !important; margin: 0 !important; max-width: none !important; z-index: -1; pointer-events: none; overflow: hidden; animation: none !important; }
.ilm-sparks i {
	position: absolute;
	bottom: -10px;
	border-radius: 50%;
	background: var(--ilm-gold);
	opacity: 0;
	animation: ilm-rise linear infinite;
}
@keyframes ilm-rise {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	12% { opacity: var(--o, 0.5); }
	85% { opacity: var(--o, 0.5); }
	100% { transform: translate3d(var(--dx, 0), -240px, 0); opacity: 0; }
}

/* =========================================================
   7. Home hero: morning light with floating covers
   ========================================================= */
.ilm-aurora-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(540px, calc(92svh - 130px), 720px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5rem);
	background: linear-gradient(160deg, #FCF9F2 0%, #F6EFE0 60%, #F1E7D2 100%);
	margin-block: 0 !important;
}
.ilm-aurora-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ilm-au {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	will-change: transform;
	transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -12px), 0);
}
.ilm-au--1 { left: 52%; top: -22%; width: 54%; height: 74%; background: radial-gradient(closest-side, rgba(168, 147, 217, 0.55), rgba(168, 147, 217, 0)); animation: ilm-d1 20s ease-in-out infinite alternate; }
.ilm-au--2 { left: -14%; top: 54%; width: 54%; height: 66%; background: radial-gradient(closest-side, rgba(217, 183, 118, 0.5), rgba(217, 183, 118, 0)); animation: ilm-d3 24s ease-in-out infinite alternate; }
.ilm-au--3 { left: 68%; top: 56%; width: 36%; height: 50%; background: radial-gradient(closest-side, rgba(201, 164, 101, 0.32), rgba(201, 164, 101, 0)); animation: ilm-d2 22s ease-in-out infinite alternate; }
.ilm-au--4 { left: 30%; top: -10%; width: 40%; height: 40%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); animation: ilm-d2 18s ease-in-out infinite alternate-reverse; }
.ilm-au--5 { left: 58%; top: 20%; width: 34%; height: 60%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); filter: blur(30px); animation: ilm-breathe 8s ease-in-out infinite; }
@keyframes ilm-d1 { to { translate: -80px 50px; scale: 1.12; } }
@keyframes ilm-d2 { to { translate: 60px -40px; scale: 0.92; } }
@keyframes ilm-d3 { to { translate: 100px -40px; scale: 1.15; } }
@keyframes ilm-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.ilm-aurora-hero__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
.ilm-aurora-hero__text > * { margin: 0; }
.ilm-aurora-hero h1 {
	font-size: clamp(2.8rem, 5.8vw, 4.8rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 1.4rem 0 1.3rem !important;
	color: var(--ilm-ink);
}
.ilm-aurora-hero .ilm-lead { font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.65; color: var(--c-m); max-width: 31em; }
.ilm-aurora-hero__buttons { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem !important; }
.ilm-aurora-hero__buttons .wp-block-button__link { padding: 1rem 1.7rem; font-size: 1rem; }
.ilm-aurora-hero__buttons .is-style-outline .wp-block-button__link { padding: calc(1rem - 1.5px) calc(1.6rem - 1.5px); }
.ilm-aurora-hero__buttons .wp-block-button__link span { display: inline-block; margin-left: 0.35rem; transition: transform 0.3s var(--ilm-ease); }
.ilm-aurora-hero__buttons .wp-block-button__link:hover span { transform: translateX(4px); }
.ilm-aurora-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	list-style: none;
	padding: 0;
	margin-top: 2.2rem !important;
	font-size: 0.9rem;
	color: var(--c-m);
}
.ilm-aurora-hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ilm-aurora-hero__trust svg { width: 17px; height: 17px; color: var(--ilm-olive); flex: none; }

.ilm-aurora-hero__stage { position: relative; }
.ilm-aurora-hero__books {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin-inline: auto;
	aspect-ratio: 600 / 560;
	perspective: 1800px;
	transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 9px), 0) rotateY(calc(var(--mx, 0) * 4deg)) rotateX(calc(var(--my, 0) * -3deg));
	transform-style: preserve-3d;
	transition: transform 0.6s var(--ilm-ease);
}
.ilm-aurora-hero__halo {
	position: absolute;
	left: 6.7%; top: 7.1%; width: 86.7%; height: 82.1%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
	filter: blur(24px);
	animation: ilm-breathe 7s ease-in-out infinite;
}
.ilm-aurora-hero__floor {
	position: absolute;
	left: 13%; top: 88%; width: 74%; height: 9%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(70, 52, 112, 0.3), rgba(70, 52, 112, 0));
	filter: blur(6px);
	animation: ilm-floor 6s ease-in-out infinite;
}
@keyframes ilm-floor { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.92); opacity: 0.75; } }
.ilm-fl { position: absolute; display: block; animation: ilm-float ease-in-out infinite; text-decoration: none; }
@keyframes ilm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.ilm-bk {
	position: relative;
	display: block;
	border-radius: 3px 6px 6px 3px;
	overflow: hidden;
	transform: var(--ilm-r);
	box-shadow: 0 36px 56px -24px rgba(52, 36, 92, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.04);
	transition: transform 0.6s var(--ilm-ease), box-shadow 0.6s var(--ilm-ease);
}
.ilm-bk img { display: block; width: 100%; height: auto; }
.ilm-bk::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) 2.6%, rgba(0, 0, 0, 0.14) 4%, rgba(0, 0, 0, 0) 8.5%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 38%);
}
.ilm-fl:hover .ilm-bk { transform: var(--ilm-r) translateY(-10px) scale(1.03); box-shadow: 0 44px 64px -24px rgba(52, 36, 92, 0.6), 0 0 0 1px rgba(201, 164, 101, 0.4); }
/* Arrival: the text rises in, the covers drift up after it. */
.ilm-aurora-hero__text > * { animation: ilm-arrive 1s var(--ilm-ease) both; }
.ilm-aurora-hero__text > :nth-child(2) { animation-delay: 0.08s; }
.ilm-aurora-hero__text > :nth-child(3) { animation-delay: 0.16s; }
.ilm-aurora-hero__text > :nth-child(4) { animation-delay: 0.24s; }
.ilm-aurora-hero__text > :nth-child(5) { animation-delay: 0.32s; }
.ilm-aurora-hero__stage { animation: ilm-arrive 1.3s 0.2s var(--ilm-ease) both; }
@keyframes ilm-arrive { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ilm-aurora-hero__card, .ilm-aurora-hero__scroll, .ilm-marquee { display: none !important; }

/* =========================================================
   8. Heroes on other pages
   ========================================================= */
/* Page title bands (shop, about, FAQ, journal…) */
.ilm-page-head,
.ilm-product-hero,
.ilm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(170deg, #FCF9F2 0%, #F5EDDD 100%);
	border-bottom: 1px solid rgba(46, 27, 84, 0.06);
}
.ilm-page-head {
	text-align: center;
	padding-top: clamp(3.5rem, 8vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}
.ilm-page-head > * { margin-inline: auto !important; position: relative; animation: ilm-arrive 1s var(--ilm-ease) both; }
.ilm-page-head > :nth-child(2) { animation-delay: 0.06s; }
.ilm-page-head > :nth-child(3) { animation-delay: 0.12s; }
.ilm-page-head > :nth-child(4) { animation-delay: 0.18s; }
.ilm-page-head .wp-block-post-title,
.ilm-page-head .wp-block-query-title,
.ilm-page-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 0; color: var(--ilm-ink); }
.ilm-page-head .wp-block-term-description { color: var(--c-m); }

/* Free sample page hero */
.ilm-hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.ilm-hero > * { position: relative; }
.ilm-hero h1 { margin: 0.2rem 0 0.9rem; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.ilm-hero .ilm-ar { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); }
.ilm-hero .wp-block-buttons { margin-top: 1.6rem; }

.ilm-trust-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.3rem;
	margin-top: 1.4rem !important;
	font-size: 0.88rem;
	color: var(--c-m);
	letter-spacing: 0.02em;
}
.ilm-trust-inline span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ilm-trust-inline span::before,
.ilm-checklist li::before,
.ilm-trust p::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--ilm-olive-light);
	box-shadow: 0 0 0 3px rgba(168, 147, 217, 0.25);
}

/* Arch art: an illustrated window with the cover in front of it */
.ilm-art {
	position: relative;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ilm-art .ilm-arch-deco { position: absolute; inset: 0; }
.ilm-arch-deco {
	display: block;
	clip-path: var(--ilm-arch);
	background-color: var(--ilm-paper-2);
	background-image: var(--ilm-scene, var(--ilm-scene-default));
	background-size: cover;
	background-position: 50% 82%;
}
.ilm-arch-deco__sun { display: none; }
.ilm-hero .ilm-arch-deco,
.ilm-art--notebook .ilm-arch-deco { background-image: var(--ilm-scene-notebook) !important; }
.ilm-art .wp-block-image,
.ilm-art > figure {
	position: relative;
	z-index: 2;
	width: 58%;
	margin: 0 0 9% !important;
	transition: transform 0.6s var(--ilm-ease);
}
.ilm-art .wp-block-image img,
.ilm-art > figure img {
	display: block;
	width: 100%;
	box-shadow: var(--ilm-shadow-book);
	border-radius: 2px 6px 6px 2px;
}
.ilm-art::after {
	content: "";
	position: absolute;
	inset: 10% -8% 0;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), transparent);
	filter: blur(18px);
	pointer-events: none;
}
.ilm-art--notebook > figure { transform: rotate(-3deg); }
.ilm-art--notebook:hover > figure { transform: rotate(-1deg) translateY(-8px); }

/* Level badge */
.ilm-level {
	position: absolute;
	z-index: 3;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--ilm-tint, var(--ilm-olive));
	color: var(--ilm-white);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	box-shadow: 0 0 0 3px var(--ilm-white), 0 8px 16px -6px rgba(52, 36, 92, 0.4);
}
.ilm-level.is-large { width: 3.6rem; height: 3.6rem; font-size: 1.1rem; top: 9%; right: 6%; }

/* Trust strip under a product hero */
.ilm-trust {
	background: var(--ilm-paper-2);
	border-bottom: 1px solid rgba(46, 27, 84, 0.08);
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.ilm-trust .wp-block-group { gap: 0.6rem 2.6rem; }
.ilm-trust p {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	color: var(--ilm-ink);
}

/* =========================================================
   9. Grids, cards and sections
   ========================================================= */
.ilm-grid {
	display: grid !important;
	gap: clamp(1rem, 2.5vw, 1.6rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.ilm-grid.is-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.ilm-grid.is-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ilm-grid > * { margin: 0 !important; }

/* Parts of the notebook: a small round badge with the text beside it */
.ilm-grid:has(> .ilm-part) { gap: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); }
.ilm-part {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	column-gap: 1.1rem;
	align-content: start;
	text-align: left;
}
.ilm-part > * { grid-column: 2; margin-top: 0 !important; margin-bottom: 0.15rem !important; }
.ilm-part__num {
	grid-column: 1;
	grid-row: 1 / span 3;
	box-sizing: border-box;
	width: 4rem;
	height: 4rem;
	padding-top: 0.95rem;
	border-radius: 50%;
	background: var(--ilm-olive-pale);
	border: 1px solid rgba(168, 147, 217, 0.55);
	color: var(--ilm-olive-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.45rem !important;
	line-height: 1.05;
	text-align: center;
	/* The wide space puts the number on its own line under the word "Part". */
	word-spacing: 4rem;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ilm-part__num::first-line { font-family: var(--wp--preset--font-family--body); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ilm-part:hover .ilm-part__num { background: var(--ilm-olive); border-color: var(--ilm-olive); color: #FBF7EF; }
.ilm-part .ilm-ar { font-size: 1.35rem; line-height: 1.4; }
.ilm-part h3 { font-size: 1.15rem; }
.ilm-part p:last-child { font-size: 0.92rem; color: var(--c-m); margin-bottom: 0 !important; }
/* The bonus is one word, so it sits on one line in a filled badge. */
.ilm-part.is-bonus .ilm-part__num { padding-top: 0; line-height: 4rem; background: var(--ilm-olive); border-color: var(--ilm-olive); color: #FBF7EF; }

/* Gallery */
.ilm-gallery .wp-block-image { margin: 0; }
.ilm-gallery .wp-block-image img {
	border-radius: 16px;
	border: 1px solid var(--c-line);
	background: var(--ilm-white);
	width: 100%;
	transition: transform 0.5s var(--ilm-ease), box-shadow 0.5s var(--ilm-ease);
}
.ilm-gallery .wp-block-image img:hover { transform: translateY(-4px); box-shadow: var(--ilm-shadow-soft); }
.ilm-gallery figcaption { text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: 1rem !important; margin-top: 0.7rem; color: var(--c-h); }

/* Cards */
.is-style-ilm-card {
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 20px;
	padding: clamp(1.25rem, 3vw, 2rem);
}
.is-style-ilm-arch-card {
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 50% 50% 20px 20px / 110px 110px 20px 20px;
	padding: 3.2rem clamp(1.25rem, 3vw, 1.9rem) 1.9rem;
	text-align: center;
	transition: transform 0.4s var(--ilm-ease), box-shadow 0.4s var(--ilm-ease);
}
.is-style-ilm-arch-card:hover { transform: translateY(-5px); box-shadow: var(--ilm-shadow-soft); }
.ilm-audience .is-style-ilm-arch-card h3 { font-size: 1.2rem; margin: 0.3rem 0 0.5rem; }
.ilm-audience .is-style-ilm-arch-card p { font-size: 0.95rem; color: var(--c-m); margin: 0; }
.ilm-audience .is-style-ilm-arch-card p.ilm-ar { font-size: 2.1rem; color: var(--c-ar); margin: 0; }

/* Steps: numbered arches */
.ilm-step { text-align: center; padding: 0 0.5rem; }
.ilm-step__num {
	width: 64px;
	height: 80px;
	margin: 0 auto 1rem !important;
	display: grid;
	place-items: center;
	padding-top: 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem !important;
	color: #FBF7EF;
	background: var(--ilm-grad-olive);
	clip-path: var(--ilm-arch);
}
.ilm-step h3 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.ilm-step p { margin: 0; color: var(--c-m); }

/* Steps with small round illustrations (home page) */
.ilm-step-card { text-align: center; padding: 0 0.6rem; }
.ilm-step-card .ilm-ill { max-width: 220px; margin: 0 auto 0.6rem !important; transition: transform 0.6s var(--ilm-ease); }
.ilm-step-card:hover .ilm-ill { transform: translateY(-6px) rotate(-1deg); }
.ilm-step-card h3 { font-size: 1.3rem; margin: 0 0 0.4rem !important; }
.ilm-step-card p { margin: 0 auto !important; max-width: 22em; color: var(--c-m); }

/* What's inside each storybook: a small round picture and the words */
.ilm-story-cards { gap: clamp(1rem, 2vw, 1.4rem) !important; }
.ilm-story-card {
	align-items: flex-start !important;
	gap: 1.1rem !important;
	padding: 1.3rem 1.4rem;
	background: var(--ilm-white);
	border: 1px solid var(--c-line);
	border-radius: 20px;
	transition: transform 0.4s var(--ilm-ease), box-shadow 0.4s var(--ilm-ease), border-color 0.4s ease;
}
.ilm-story-card:hover { transform: translateY(-4px); box-shadow: var(--ilm-shadow-soft); border-color: rgba(168, 147, 217, 0.6); }
.ilm-story-thumb { flex: none; margin: 0 !important; }
.ilm-story-thumb img {
	display: block;
	width: 74px !important;
	height: 74px !important;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--ilm-white), 0 0 0 4px rgba(201, 164, 101, 0.45);
}
.ilm-story-card__body { min-width: 0; }
.ilm-story-card__body > * { margin: 0 0 0.3rem !important; }
.ilm-story-card__meta { font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-eb); }
.ilm-story-card h3 { font-size: 1.15rem; line-height: 1.3; }
.ilm-story-card p { font-size: 0.92rem; color: var(--c-m); line-height: 1.55; }
.ilm-story-card__link a { font-size: 0.85rem; font-weight: 700; color: var(--ilm-olive); text-decoration: none; }
.ilm-story-card__link a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Checklist */
.ilm-checklist { list-style: none; padding-left: 0; }
.ilm-checklist li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.32rem 0; }
.ilm-checklist li::before { position: relative; top: -1px; }

/* About */
.ilm-about-art .wp-block-image img {
	border-radius: 50% 50% 20px 20px / 34% 34% 20px 20px;
	border: 1px solid var(--c-line);
	background: var(--ilm-white);
	padding: 10px;
}
.ilm-about-ill, .ilm-notebook-art { max-width: 460px; margin-inline: auto !important; }

/* Closing card on a product page: a bright sand arch */
.ilm-final {
	max-width: 780px !important;
	margin-inline: auto !important;
	text-align: center;
	background: linear-gradient(180deg, #FBF5E8, #EFE2C6);
	border: 1px solid rgba(201, 164, 101, 0.4);
	border-radius: 50% 50% 22px 22px / 230px 230px 22px 22px;
	padding: clamp(5rem, 11vw, 7.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem) !important;
	box-shadow: 0 0 0 8px var(--ilm-paper), 0 0 0 9px rgba(201, 164, 101, 0.35), 0 40px 70px -40px rgba(52, 36, 92, 0.4);
}
.ilm-final > * { margin-inline: auto; position: relative; }
.ilm-final .wp-block-buttons, .ilm-final .ilm-cta-row { justify-content: center; }
.ilm-final .wp-block-image { max-width: 190px; margin: 0 auto 1.5rem; }

/* FAQ */
.ilm-faq { max-width: 800px; margin-inline: auto !important; }
.ilm-faq .wp-block-details {
	border-bottom: 1px solid var(--c-line-strong);
	padding: 1.2rem 0.25rem;
	margin: 0 !important;
}
.ilm-faq .wp-block-details:first-of-type { border-top: 1px solid var(--c-line-strong); }
.ilm-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.18rem;
	color: var(--c-h);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	transition: color 0.25s ease;
}
.ilm-faq summary:hover { color: var(--ilm-olive); }
.ilm-faq summary::-webkit-details-marker { display: none; }
.ilm-faq summary::after {
	content: "+";
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--ilm-olive-pale);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.2rem;
	color: var(--ilm-olive-deep);
	transition: transform 0.35s var(--ilm-ease), background-color 0.3s ease, color 0.3s ease;
	flex: none;
}
.ilm-faq details[open] summary::after { transform: rotate(45deg); background: var(--ilm-olive); color: #FBF7EF; }
.ilm-faq details p { margin: 0.75rem 0 0; color: var(--c-t); animation: ilm-arrive 0.5s var(--ilm-ease) both; }
.ilm-faq-section .wp-block-buttons { margin-top: 2rem; }

/* =========================================================
   10. The book shelf
   ========================================================= */
.ilm-shelf {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.4rem, 2.5vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
	margin-bottom: 2.6rem !important;
}
.ilm-shelf > * { flex: 0 1 262px; min-width: 0; }
.ilm-book { display: flex; flex-direction: column; text-align: center; }
.ilm-book__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 4.6;
	border-radius: 24px;
	isolation: isolate;
	background:
		radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--ilm-tint, var(--ilm-olive)) 20%, transparent), transparent 70%),
		linear-gradient(170deg, #F8F1E3, #ECDFC4);
	text-decoration: none;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(46, 27, 84, 0.06), 0 18px 36px -28px rgba(52, 36, 92, 0.5);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.5s var(--ilm-ease), box-shadow 0.5s var(--ilm-ease);
}
.ilm-book__media.is-tilting { transition: transform 0.12s linear, box-shadow 0.5s var(--ilm-ease); }
.ilm-book__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.4), transparent 45%);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.ilm-book__media:hover::after { opacity: 1; }
.ilm-book__media .ilm-arch-deco { position: absolute; inset: 8% 12% 0; }
.ilm-book__media img {
	position: relative;
	z-index: 2;
	width: 47%;
	margin-bottom: 9%;
	box-shadow: var(--ilm-shadow-book);
	border-radius: 2px 5px 5px 2px;
	transition: transform 0.6s var(--ilm-ease);
}
.ilm-book__media:hover { box-shadow: inset 0 0 0 1px rgba(201, 164, 101, 0.4), 0 30px 50px -30px rgba(52, 36, 92, 0.6); }
.ilm-book__media:hover img { transform: translateY(-10px) rotate(-1.5deg) scale(1.03); }
.ilm-book__body { padding: 1.05rem 0.4rem 0; }
.ilm-book__body > * { margin: 0 0 0.3rem; }
.ilm-book__series { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-eb); }
.ilm-book__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.28rem; line-height: 1.25; color: var(--c-h); }
.ilm-book__title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ilm-ease); }
.ilm-book__title a:hover { background-size: 100% 1px; }
.ilm-book__meta { font-size: 0.88rem; color: var(--c-m); }
.ilm-book__status {
	display: inline-block;
	margin-top: 0.35rem !important;
	padding: 0.28rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: var(--ilm-olive-pale);
	color: var(--ilm-olive-deep);
}
.ilm-book__status.is-soon { background: rgba(201, 164, 101, 0.18); color: var(--ilm-gold-deep); }

/* =========================================================
   11. Storybook levels: six illustrated arches
   ========================================================= */
.ilm-levels,
.ilm-section .ilm-levels {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.3rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 640px;
}
.ilm-section > .ilm-levels { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1080px; }
.ilm-levels a { display: block; text-decoration: none; text-align: center; color: var(--c-h); }
.ilm-levels__arch {
	display: block;
	aspect-ratio: 3 / 3.7;
	clip-path: var(--ilm-arch);
	background: var(--ilm-scene, var(--ilm-scene-default)) 50% 80% / cover no-repeat, var(--ilm-paper-2);
	transition: transform 0.5s var(--ilm-ease), filter 0.5s ease;
}
.ilm-levels a:hover .ilm-levels__arch { transform: translateY(-6px); filter: saturate(1.15) brightness(1.03); }
.ilm-levels__code {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: -1.25rem auto 0.35rem;
	position: relative;
	border-radius: 50%;
	background: var(--ilm-tint, var(--ilm-olive));
	color: var(--ilm-white);
	font-weight: 700;
	font-size: 0.82rem;
	box-shadow: 0 0 0 3px var(--c-ring);
	transition: transform 0.4s var(--ilm-ease);
}
.ilm-levels a:hover .ilm-levels__code { transform: translateY(-6px) scale(1.08); }
.ilm-levels__name { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.04rem; }
.ilm-levels a.is-current .ilm-levels__code { transform: scale(1.18); }
.ilm-levels a.is-current .ilm-levels__name::after { content: "this book"; display: block; font-family: var(--wp--preset--font-family--body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-eb); }

/* =========================================================
   12. Story pictures and book pages
   ========================================================= */
.ilm-story { margin: 0 !important; }
.ilm-story img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 120px 120px 18px 18px / 60px 60px 18px 18px;
	box-shadow: var(--ilm-shadow-soft);
	transition: transform 0.6s var(--ilm-ease), box-shadow 0.6s var(--ilm-ease);
}
.ilm-story:hover img { transform: translateY(-6px); }
.ilm-story figcaption { text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: 1.02rem !important; color: var(--c-h); margin-top: 0.85rem; }
.ilm-story-stack { grid-template-columns: 1fr !important; gap: 1.4rem; }
.ilm-story-stack .ilm-story:nth-child(2) { width: 86%; margin-left: auto !important; }
.ilm-story-stack .ilm-story:nth-child(3) { width: 86%; }

.ilm-story-list {
	list-style: none;
	counter-reset: story;
	margin: 0;
	padding: 0.4rem clamp(1rem, 3vw, 2rem);
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 22px;
}
.ilm-story-list li {
	counter-increment: story;
	display: grid;
	grid-template-columns: 2rem 1fr;
	grid-template-areas: "n ar" "n en";
	column-gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px dashed var(--c-line-strong);
}
.ilm-story-list li:last-child { border-bottom: 0; }
.ilm-story-list li::before {
	content: counter(story);
	grid-area: n;
	align-self: center;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--ilm-olive-pale);
	color: var(--ilm-olive-deep);
	font-size: 0.8rem;
	font-weight: 700;
}
.ilm-story-list__ar { grid-area: ar; font-size: 1.3rem; line-height: 1.6; text-align: left; color: var(--c-h); }
.ilm-story-list__en { grid-area: en; font-size: 0.9rem; color: var(--c-m); }

.ilm-features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important; }
.ilm-feature {
	text-align: center;
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	padding: 1.6rem 1.1rem 1.4rem;
	transition: transform 0.4s var(--ilm-ease), box-shadow 0.4s var(--ilm-ease), border-color 0.4s ease;
}
.ilm-feature:hover { transform: translateY(-5px); box-shadow: var(--ilm-shadow-soft); border-color: rgba(168, 147, 217, 0.6); }
.ilm-feature .ilm-ill { width: 76px; margin: 0 auto 0.8rem !important; }
.ilm-feature h3 { font-size: 1.12rem; margin: 0 0 0.35rem !important; }
.ilm-feature p { margin: 0 !important; font-size: 0.92rem; color: var(--c-m); }

/* =========================================================
   13. Products: cards, product hero, shop
   ========================================================= */
.ilm-products {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 370px));
	justify-content: center;
}
.ilm-card {
	display: flex;
	flex-direction: column;
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 24px;
	overflow: hidden;
	transition: transform 0.45s var(--ilm-ease), box-shadow 0.45s var(--ilm-ease), border-color 0.45s ease;
}
.ilm-card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -34px rgba(52, 36, 92, 0.5); border-color: rgba(168, 147, 217, 0.6); }
.ilm-card__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 3.6;
	padding: 1.4rem 1rem 0;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--ilm-tint, var(--ilm-olive)) 20%, transparent), transparent 70%),
		linear-gradient(170deg, #F8F1E3, #ECDFC4);
	text-decoration: none;
}
.ilm-card__media .ilm-arch-deco { position: absolute; inset: 1.1rem 22% 0; }
.ilm-card__media img {
	position: relative;
	z-index: 2;
	width: 44%;
	margin-bottom: 1.1rem;
	box-shadow: var(--ilm-shadow-book);
	border-radius: 2px 5px 5px 2px;
	transition: transform 0.6s var(--ilm-ease);
}
.ilm-card:hover .ilm-card__media img { transform: translateY(-8px) rotate(-1.5deg); }
.ilm-card__badge {
	position: absolute;
	z-index: 3;
	top: 0.9rem;
	left: 0.9rem;
	background: var(--ilm-olive);
	color: #FBF7EF;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}
.ilm-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.45rem 1.5rem; }
.ilm-card__body > * { margin: 0 0 0.4rem; }
.ilm-card__ar { font-family: var(--wp--preset--font-family--arabic-display); color: var(--c-ar); font-size: 1.35rem; direction: rtl; text-align: left; line-height: 1.5; }
.ilm-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.38rem; line-height: 1.25; color: var(--c-h); }
.ilm-card__title a { color: inherit; text-decoration: none; }
.ilm-card__title a:hover { color: var(--ilm-olive); }
.ilm-card__excerpt { font-size: 0.93rem; color: var(--c-m); }
.ilm-card__foot { margin-top: auto; padding-top: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--c-line); }
.ilm-card__foot .wp-block-button__link { padding: 0.6rem 1.1rem; font-size: 0.84rem; }
.ilm-card__foot .is-style-outline .wp-block-button__link { padding: calc(0.6rem - 1.5px) calc(1.1rem - 1.5px); }

.ilm-price { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; color: var(--c-h); }
.ilm-price del { color: var(--c-m); font-size: 0.8em; margin-right: 0.35rem; }
.ilm-price ins { text-decoration: none; }

.ilm-card.is-soon .ilm-card__body { justify-content: center; text-align: center; }
.ilm-soon-art { position: relative; width: 52%; aspect-ratio: 3/4; margin-bottom: 0; }
.ilm-soon-art .ilm-arch-deco { position: absolute; inset: 0; }

/* Product hero */
.ilm-product-hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.ilm-product-hero__inner {
	position: relative;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem);
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
}
.ilm-product-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); margin: 0.1rem 0 0.7rem; }
.ilm-product-hero .ilm-ar { margin: 0; }
.ilm-product-hero .ilm-art { justify-content: flex-start; animation: ilm-arrive 1.2s var(--ilm-ease) both; }
.ilm-product-hero .ilm-art > figure { width: 50%; margin: 0 0 7% 4% !important; animation: ilm-float-tilt 7s ease-in-out infinite; }
@keyframes ilm-float-tilt { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }
.ilm-product-hero .ilm-arch-deco { background-position: 30% 82%; }
.ilm-product-hero__details > * { animation: ilm-arrive 1s var(--ilm-ease) both; }
.ilm-product-hero__details > :nth-child(2) { animation-delay: 0.06s; }
.ilm-product-hero__details > :nth-child(3) { animation-delay: 0.12s; }
.ilm-product-hero__details > :nth-child(4) { animation-delay: 0.18s; }
.ilm-product-hero__details > :nth-child(n+5) { animation-delay: 0.24s; }
.ilm-product-hero__price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 1.3rem 0 0.4rem; }
.ilm-product-hero__price .ilm-price { font-size: 2.2rem; }
.ilm-product-hero__note { font-size: 0.86rem; color: var(--c-m); }
.ilm-product-hero .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.2rem 0 0.9rem; }
.ilm-soon-pill {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: rgba(201, 164, 101, 0.18);
	color: var(--ilm-gold-deep);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}
.ilm-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
	margin: 1.7rem 0 0;
	border-top: 1px solid var(--c-line-strong);
}
.ilm-specs div { padding: 0.8rem 0; border-bottom: 1px solid var(--c-line-strong); }
.ilm-specs dt { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-eb); font-weight: 700; }
.ilm-specs dd { margin: 0.18rem 0 0; font-family: var(--wp--preset--font-family--heading); color: var(--c-h); }
.ilm-secure { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--c-m); margin-top: 0.9rem; }
.ilm-secure svg { width: 15px; height: 15px; color: var(--ilm-olive); flex: none; }
.ilm-admin-note {
	margin-top: 0.9rem;
	padding: 0.7rem 0.9rem;
	border: 1px dashed var(--ilm-gold);
	border-radius: 12px;
	background: rgba(201, 164, 101, 0.1);
	color: var(--c-h);
	font-size: 0.85rem;
}
.ilm-soon-label {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border: 1.5px dashed var(--ilm-gold);
	border-radius: 12px;
	color: var(--ilm-gold-deep);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

/* Shop filters */
.ilm-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 2.6rem; padding: 0; list-style: none; }
.ilm-filters a {
	display: inline-block;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--c-line-strong);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--c-h);
	background: var(--c-card);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ilm-filters a:hover { border-color: var(--ilm-olive); }
.ilm-filters a.is-active { background: var(--ilm-olive); border-color: var(--ilm-olive); color: #FBF7EF; }

.ilm-related__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem);
}
.ilm-related .ilm-section-head > * { margin-inline: auto; }
.ilm-related .ilm-products { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ilm-cta-row { gap: 0.8rem !important; margin-top: 1.6rem !important; }
.ilm-cta-row + .ilm-trust-inline { margin-top: 1.2rem !important; }

/* =========================================================
   14. Prose and the journal
   ========================================================= */
.ilm-prose { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.ilm-prose h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.2rem; }
.ilm-prose h3 { font-size: var(--wp--preset--font-size--large); margin-top: 1.8rem; }
.ilm-prose blockquote { margin-left: 0; padding-left: 1.25rem; }
.ilm-prose a:not(.wp-block-button__link) { text-decoration-color: rgba(94, 74, 156, 0.5); text-underline-offset: 3px; }

.ilm-posts .wp-block-post-template { gap: clamp(1.25rem, 3vw, 2rem); }
.ilm-post-card {
	height: 100%;
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.45s var(--ilm-ease), box-shadow 0.45s var(--ilm-ease);
}
.ilm-post-card:hover { transform: translateY(-6px); box-shadow: var(--ilm-shadow-soft); }
.ilm-post-card .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.ilm-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform 0.8s var(--ilm-ease); }
.ilm-post-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.ilm-post-card__body { padding: 1.3rem 1.45rem 1.5rem; }
.ilm-post-card__body > * { margin-top: 0 !important; margin-bottom: 0.5rem !important; }
.ilm-post-card .wp-block-post-title { font-size: 1.38rem; line-height: 1.3; }
.ilm-post-card .wp-block-post-title a { text-decoration: none; color: var(--c-h); }
.ilm-post-card .wp-block-post-title a:hover { color: var(--ilm-olive); }
.ilm-post-card .wp-block-post-date,
.ilm-post-card .wp-block-post-terms { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-eb); font-weight: 700; }
.ilm-post-card .wp-block-post-terms a { color: inherit; text-decoration: none; }
.ilm-post-card .wp-block-post-excerpt { font-size: 0.93rem; color: var(--c-m); }
.ilm-post-card .wp-block-post-excerpt__more-text { display: none; }
.ilm-post-head .wp-block-post-date, .ilm-post-head .wp-block-post-terms { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-eb); font-weight: 700; }
.ilm-post-head .wp-block-post-terms a { color: inherit; text-decoration: none; }
.ilm-post-feature img { border-radius: 24px; border: 1px solid var(--c-line); box-shadow: var(--ilm-shadow-soft); }
.wp-block-query-pagination { margin-top: 2.5rem; font-family: var(--wp--preset--font-family--heading); }

/* =========================================================
   15. Footer: two small cards, then the links
   ========================================================= */
.ilm-footer {
	position: relative;
	background: var(--ilm-paper);
	border-top: 1px solid rgba(46, 27, 84, 0.08);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: 2rem;
	font-size: 0.94rem;
}
.wp-site-blocks:has(.ilm-night) .ilm-footer { border-top: 0; }
.ilm-footer__cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(1rem, 2vw, 1.4rem) !important; margin-bottom: clamp(2.5rem, 5vw, 3.5rem) !important; }
.ilm-footer__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 20px;
	padding: 1.6rem 1.8rem !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1.2rem !important;
}
.ilm-footer__card > * { margin: 0 !important; }
.ilm-footer__card h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.3rem !important; }
.ilm-footer__card p { font-size: 0.9rem; margin: 0 !important; }
.ilm-footer__card .wp-block-button__link { padding: 0.75rem 1.25rem; font-size: 0.88rem; white-space: nowrap; }
.ilm-footer__card.ilm-olive-card { background: var(--ilm-grad-olive); }
.ilm-footer__card.ilm-olive-card::before {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	background: radial-gradient(30% 50% at 85% 20%, rgba(255, 250, 230, 0.28), transparent 70%);
	animation: ilm-drift 18s ease-in-out infinite alternate;
}
.ilm-footer__card.is-sand { background: linear-gradient(150deg, #F3E8D2, #E8D8B6); }
.ilm-footer h4, .ilm-footer .ilm-footer__title {
	color: var(--ilm-olive-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem !important;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 1rem;
}
.ilm-footer ul { list-style: none; padding: 0; margin: 0; }
.ilm-footer li { margin: 0 0 0.5rem; }
.ilm-footer li a { color: var(--ilm-ink); text-decoration: none; transition: color 0.25s ease, padding 0.3s var(--ilm-ease); }
.ilm-footer li a:hover { color: var(--ilm-olive); padding-left: 4px; }
.ilm-footer__about { max-width: 360px; }
.ilm-footer__about p { margin-top: 1.1rem; color: var(--c-m); }
.ilm-footer__bottom {
	border-top: 1px solid var(--c-line);
	margin-top: 3rem !important;
	padding-top: 1.4rem;
	font-size: 0.82rem;
	color: var(--c-m);
}
.ilm-footer__bottom p { margin: 0; }

/* 404 */
.ilm-404 { text-align: center; }
.ilm-404 .ilm-art { max-width: 260px; margin-bottom: 1.5rem; }
.ilm-404 .ilm-art::after { display: none; }

/* =========================================================
   16. Motion: arrive on scroll
   ========================================================= */
/* theme.js adds .ilm-reveal to content below the fold, then .is-visible as it scrolls into view. */
.ilm-reveal {
	opacity: 0;
	transform: translateY(30px);
	filter: blur(5px);
	transition: opacity 0.9s ease var(--ilm-delay, 0s), transform 0.9s var(--ilm-ease) var(--ilm-delay, 0s), filter 0.9s ease var(--ilm-delay, 0s);
}
.ilm-reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media print {
	.ilm-reveal { opacity: 1; transform: none; filter: none; }
}

/* =========================================================
   17. Responsive
   ========================================================= */
@media (max-width: 1120px) {
	.ilm-header .ilm-header__cta { display: none !important; }
	.ilm-header .wp-block-navigation { gap: 1.3rem; }
}
/* Tablets and small laptops use the menu button too, so the links never wrap onto two lines. */
@media (max-width: 960px) {
	.ilm-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.ilm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (max-width: 960px) {
	.ilm-aurora-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.ilm-aurora-hero__stage { max-width: 500px; width: 100%; margin-inline: auto; }
	.ilm-aurora-hero { min-height: 0; }
}
@media (max-width: 781px) {
	.ilm-hero .wp-block-columns { flex-direction: column-reverse; }
	.ilm-hero .ilm-art { max-width: 300px; }
	.ilm-product-hero__inner { grid-template-columns: 1fr; }
	.ilm-product-hero .ilm-art { max-width: 320px; }
	.ilm-levels, .ilm-section .ilm-levels, .ilm-section > .ilm-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ilm-shelf > * { flex-basis: calc(50% - 0.6rem); }
	.ilm-book__title { font-size: 1.08rem; }
	.ilm-logo { min-height: 48px; }
	.ilm-logo__img { height: 28px; }
	.ilm-announce { padding-inline: 2.5rem; font-size: 0.8rem; }
	.ilm-final { border-radius: 50% 50% 22px 22px / 120px 120px 22px 22px; }
	.ilm-footer__bottom { flex-direction: column; align-items: flex-start !important; gap: 0.4rem; }
	.ilm-footer__cards { grid-template-columns: minmax(0, 1fr) !important; }
	.ilm-footer__card { flex-wrap: wrap !important; }
	.ilm-story-stack .ilm-story:nth-child(n) { width: 100%; }
	.ilm-aurora-hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.3rem); }
	.ilm-notebook-section .wp-block-columns, .ilm-about-section .wp-block-columns { gap: 2.5rem; }
	.ilm-art--notebook { max-width: 320px; }
	.ilm-about-ill { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.ilm-reveal { opacity: 1; transform: none; filter: none; }
	.ilm-sparks { display: none; }
}