/* ==========================================================================
   Unlearn — main styles
   Uses logical properties (inline-start/end) so Arabic (RTL) and English
   (LTR) both work from the same rules.
   ========================================================================== */

:root {
	--pink: #FF0078;
	--pink-btn: #E0006E;
	--pink-text: #C2005E;
	--pink-deep: #D9006A;
	--pink-soft: #FF4D9A;
	--pink-bg: #E0006E; /* hot pink that still passes contrast with white text */
	--magenta: #FF1CC9;
	--sun: #F7D200;
	--butter: #FDE672;
	--cream: #FFF9E3;
	--ink: #2A0A20;
	--ink-soft: #5A3A4F;
	--white: #FFFFFF;

	--content: 760px;
	--wide: 1200px;
	--gutter: 20px;
	--radius: 22px;
	--shadow: 6px 6px 0 var(--ink);
	--font: "Baloo Bhaijaan 2", "Segoe UI", Tahoma, system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1.125rem;
	line-height: 1.7;
	font-weight: 450;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
html[dir="rtl"] body { font-size: 1.2rem; line-height: 1.85; }

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--pink-text); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-weight: 900; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; line-height: 1.35; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
strong, b { font-weight: 800; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.ul-skip {
	position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000;
	background: var(--ink); color: var(--white); padding: 10px 18px; border-radius: 999px; font-weight: 800;
}
.ul-skip:focus { top: 12px; }

.ul-wrap { width: min(var(--wide), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.ul-narrow { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* --------------------------------------------------------------- Buttons */
.ul-btn,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .7em 1.6em; border-radius: 999px;
	font-family: var(--font); font-weight: 800; font-size: 1.1rem; line-height: 1.3;
	text-decoration: none; border: 2px solid var(--ink);
	background: var(--ink); color: var(--butter);
	box-shadow: 4px 4px 0 var(--pink);
	transition: transform .15s ease, box-shadow .15s ease;
	cursor: pointer;
}
.ul-btn:hover,
.wp-block-button__link:hover { color: var(--butter); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pink); }
.ul-btn--pink { background: var(--pink-btn); color: var(--white); box-shadow: var(--shadow); }
.ul-btn--pink:hover { color: var(--white); box-shadow: 8px 8px 0 var(--ink); }
.ul-btn--butter { background: var(--butter); color: var(--ink); border-color: var(--butter); box-shadow: none; }
.ul-btn--butter:hover { color: var(--ink); box-shadow: 4px 4px 0 var(--pink); }
.ul-btn--sm { font-size: .95rem; padding: .5em 1.2em; }
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); box-shadow: none; }
.is-style-outline > .wp-block-button__link:hover { background: var(--ink); color: var(--butter); box-shadow: none; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

.ul-arrowlink { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--pink); }
.ul-arrowlink:hover { color: var(--pink-text); }
html[dir="rtl"] .ul-icon--arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------- Header */
.ul-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--sun);
	border-bottom: 3px solid var(--ink);
}
.admin-bar .ul-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ul-header { top: 0; } }

.ul-header__inner {
	width: min(var(--wide), calc(100% - 2 * var(--gutter))); margin-inline: auto;
	display: flex; align-items: center; gap: 24px; min-height: 84px;
}
.ul-logo { display: block; flex: none; line-height: 0; }
.ul-logo img { height: 54px; width: auto; }

.ul-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.ul-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ul-menu a {
	display: block; padding: 8px 14px; border-radius: 999px;
	color: var(--ink); font-weight: 800; text-decoration: none; font-size: 1.02rem;
}
.ul-menu a:hover { background: rgba(42, 10, 32, .08); }
.ul-menu .current-menu-item > a,
.ul-menu .current_page_item > a,
.ul-menu .current_page_parent > a { background: var(--ink); color: var(--sun); }
.ul-menu .sub-menu { display: none; }
.ul-nav__extra { display: none; }

.ul-header__tools { display: flex; align-items: center; gap: 10px; }
.ul-langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.ul-langs a {
	display: inline-block; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 999px;
	color: var(--ink); font-weight: 800; text-decoration: none; font-size: .98rem; line-height: 1.4;
	background: var(--white);
}
.ul-langs a:hover { background: var(--ink); color: var(--sun); }

.ul-burger {
	display: none; width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid var(--ink); background: var(--ink); color: var(--sun);
	align-items: center; justify-content: center; cursor: pointer;
}
.ul-burger__close { display: none; }
.ul-burger[aria-expanded="true"] .ul-burger__open { display: none; }
.ul-burger[aria-expanded="true"] .ul-burger__close { display: inline; }
.ul-burger .ul-icon { display: block; }

@media (max-width: 1180px) {
	.ul-burger { display: inline-flex; }
	.ul-header__inner { justify-content: space-between; min-height: 72px; }
	.ul-logo img { height: 46px; }
	.ul-nav__extra .ul-langs--mobile { display: none; }
	.ul-nav {
		position: fixed; inset: 75px 0 0 0; z-index: 49;
		background: var(--pink-bg); padding: 28px var(--gutter) 120px;
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
		overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-12px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	.admin-bar .ul-nav { top: 121px; }
	body.nav-open { overflow: hidden; }
	body.nav-open .ul-nav { visibility: visible; opacity: 1; transform: none; }
	.ul-menu { flex-direction: column; gap: 0; }
	.ul-menu a { font-size: 1.9rem; padding: 6px 0; border-radius: 0; color: var(--white); font-weight: 900; }
	.ul-menu a:hover { background: none; color: var(--butter); }
	.ul-menu .current-menu-item > a,
	.ul-menu .current_page_item > a,
	.ul-menu .current_page_parent > a { background: none; color: var(--butter); }
	.ul-nav__extra { display: flex; flex-direction: column; gap: 16px; border-top: 2px solid rgba(255,255,255,.5); padding-top: 24px; }
	.ul-nav__extra .ul-langs a { font-size: 1.1rem; }
}

/* ---------------------------------------------------------------- Search */
.ul-search { display: flex; align-items: stretch; max-width: 520px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.ul-search label { flex: 1; display: flex; }
.ul-search input { flex: 1; border: 0; padding: 12px 20px; font: inherit; font-size: 1.05rem; background: transparent; color: var(--ink); min-width: 0; }
.ul-search input:focus { outline: none; }
.ul-search:focus-within { box-shadow: 0 0 0 3px var(--magenta); }
.ul-search button { border: 0; background: var(--ink); color: var(--sun); padding: 0 18px; cursor: pointer; }
.ul-searchagain { margin-block: 0 36px; }

/* --------------------------------------------------------- Page headers */
.ul-pagehead { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(44px, 7vw, 80px); border-bottom: 3px solid var(--ink); }
.ul-pagehead--pink { background: var(--pink-bg); color: var(--white); }
.ul-pagehead--pink .ul-pagehead__title { color: var(--white); }
.ul-pagehead--pink .ul-pagehead__intro { color: var(--white); }
.ul-pagehead--ink { background: var(--ink); color: var(--cream); }
.ul-pagehead--ink .ul-pagehead__title { color: var(--sun); }
.ul-pagehead--ink .ul-pagehead__sun { color: var(--pink); }
.ul-pagehead--butter { background: var(--butter); }
.ul-pagehead--butter .ul-pagehead__sun { color: var(--pink); }
.ul-pagehead--sun { background: var(--sun); }
.ul-pagehead--sun .ul-pagehead__title { color: var(--pink-deep); }
.ul-pagehead--sun .ul-pagehead__sun { color: var(--magenta); }
.ul-pagehead .ul-wrap { position: relative; z-index: 1; }
.ul-pagehead__title { font-size: clamp(2.6rem, 7.5vw, 5.2rem); margin: 0; max-width: 16ch; }
.ul-pagehead__intro { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; max-width: 40ch; margin-top: 18px; }
.ul-pagehead__intro p:last-child { margin: 0; }
.ul-pagehead__sun { position: absolute; inset-inline-end: -40px; bottom: -6px; width: min(420px, 55vw); color: var(--butter); opacity: .9; }
@media (max-width: 700px) {
	.ul-pagehead { padding-bottom: 120px; }
	.ul-pagehead__sun { width: 190px; opacity: .9; }
}

.ul-kicker {
	display: inline-block; width: fit-content; margin: 0 0 18px; padding: 4px 14px; border-radius: 999px;
	background: var(--ink); color: var(--butter); font-weight: 800; font-size: .92rem; letter-spacing: .02em;
}

/* --------------------------------------------------------------- Content */
.ul-content { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.ul-content:has(> .alignfull:last-child) { padding-bottom: 0; }
.ul-content:has(> .alignfull:first-child) { padding-top: 0; }

.ul-content > *,
.ul-content .wp-block-group > * {
	width: min(var(--content), calc(100% - 2 * var(--gutter)));
	margin-inline: auto;
}
.ul-content .wp-block-group > * { width: min(var(--content), 100%); }
.ul-content .wp-block-group.alignfull > * { width: min(var(--content), calc(100% - 2 * var(--gutter))); }
.ul-content > .alignwide,
.ul-content .wp-block-group > .alignwide,
.ul-content .wp-block-group.alignwide > *,
.ul-content .wp-block-group.alignfull > .alignwide { width: min(var(--wide), calc(100% - 2 * var(--gutter))); }
.ul-content .wp-block-group.alignwide > * { width: 100%; }
.ul-content > .alignfull { width: 100%; max-width: none; }
/* Override WordPress's own constrained-layout caps: the theme sets widths above. */
.ul-content .is-layout-constrained > * { max-width: none; }

.ul-content > * + * { margin-block-start: 1.2em; }
.ul-content > h2, .ul-content > .wp-block-heading { margin-block: 1.6em .5em; }
.ul-content > :first-child { margin-top: 0; }
.ul-content > .alignfull + .alignfull { margin-top: 0; }
.ul-content > .alignfull { margin-block: 2.5em; }
.ul-content > .alignfull:first-child { margin-top: 0; }
.ul-content > .alignfull:last-child { margin-bottom: 0; }

.ul-content .wp-block-group { margin-block-end: 0; }
.ul-content .wp-block-group > :last-child { margin-bottom: 0; }

/* Prose (articles) */
.ul-prose { font-size: 1.18rem; }
html[dir="rtl"] .ul-prose { font-size: 1.25rem; }
.ul-prose > p:first-of-type { font-size: 1.12em; }

.wp-block-quote,
.ul-content blockquote {
	position: relative; margin-block: 1.8em; padding: 28px 30px 24px; padding-inline-start: 34px;
	background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
	box-shadow: 6px 6px 0 var(--pink);
}
.wp-block-quote p { font-size: 1.35em; font-weight: 800; line-height: 1.45; margin: 0; }
.wp-block-quote cite { display: block; margin-top: 12px; font-style: normal; font-weight: 700; color: var(--ink-soft); font-size: .95em; }
.wp-block-quote::before {
	content: "“"; position: absolute; top: -32px; inset-inline-start: 18px;
	font-size: 5rem; line-height: 1; font-weight: 900; color: var(--pink);
}
html[dir="rtl"] .wp-block-quote::before { content: "”"; }

.ul-content ul, .ul-content ol { padding-inline-start: 1.3em; }
.ul-content li { margin-bottom: .45em; }
.ul-content li::marker { color: var(--pink); font-weight: 900; }

.ul-checklist { list-style: none; padding-inline-start: 0 !important; }
.ul-checklist li { position: relative; padding-inline-start: 38px; margin-bottom: .8em; }
.ul-checklist li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .32em; width: 24px; height: 24px; border-radius: 50%;
	background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FDE672' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
html[dir="rtl"] .ul-checklist li::before { top: .45em; }

.ul-booklist { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.ul-booklist li { background: var(--white); border: 2px solid var(--ink); border-radius: 14px; padding: 12px 18px; margin: 0; border-inline-start-width: 10px; border-inline-start-color: var(--pink); }

.wp-block-details { border-bottom: 2px solid var(--ink); padding-block: 14px; margin-block: 0 !important; }
.wp-block-details + .wp-block-details { margin-top: 0 !important; }
.wp-block-details summary { cursor: pointer; font-weight: 800; font-size: 1.15em; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sun); border: 2px solid var(--ink); font-size: 1.3rem; line-height: 1; font-weight: 900; transition: transform .2s;
}
.wp-block-details[open] summary::after { content: "−"; background: var(--pink); color: var(--white); }
.wp-block-details > :not(summary) { margin-top: 10px; }

.wp-block-separator { border: 0; height: 12px; margin-block: 2.4em !important; background: radial-gradient(circle, var(--pink) 5px, transparent 6px) center / 28px 12px repeat-x; max-width: 200px !important; }

.ul-content figure { margin-block: 1.8em; }
.ul-content figure img { border-radius: var(--radius); border: 2px solid var(--ink); }
.ul-content figcaption { font-size: .9em; color: var(--ink-soft); margin-top: 8px; text-align: center; }

.ul-small { font-size: .92em; color: var(--ink-soft); }
.ul-lead { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.55; }

/* Notes for the team: only visible to logged-in editors. */
.ul-todo { display: none !important; }
body.logged-in .ul-todo {
	display: block !important; padding: 12px 16px; border: 2px dashed #b26b00; border-radius: 12px;
	background: #fff4cc; color: #5c3b00; font-size: .95rem;
}

/* --------------------------------------------------------------- Sections */
.ul-hero {
	position: relative; overflow: hidden;
	background: var(--sun);
	padding-block: clamp(56px, 10vw, 128px) clamp(64px, 10vw, 136px);
	border-bottom: 3px solid var(--ink);
}
.ul-hero::after {
	content: ""; position: absolute; inset-inline-end: -6%; bottom: -3px; width: min(620px, 70vw); aspect-ratio: 200 / 110;
	background: url("../img/sun-magenta.png") bottom center / contain no-repeat; opacity: .95; pointer-events: none;
}
.ul-content .ul-hero { padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2)); }
.ul-content .ul-hero > * { width: auto; margin-inline: 0 !important; position: relative; z-index: 1; }
.ul-content .ul-hero > .ul-kicker { width: fit-content; }
.ul-hero .ul-hero__title { font-size: clamp(3rem, 9vw, 7rem); line-height: .98; color: var(--pink-deep); max-width: 11ch; margin: 0 0 .3em; letter-spacing: -.025em; }
html[dir="rtl"] .ul-hero .ul-hero__title { line-height: 1.2; letter-spacing: 0; }
.ul-hero .ul-lead { max-width: 34ch; }
.ul-hero .wp-block-buttons { margin-top: 30px; }
@media (max-width: 700px) {
	.ul-content .ul-hero { padding-bottom: 120px; }
	.ul-hero::after { width: 190px; opacity: 1; }
}

.ul-section { padding-block: clamp(48px, 7vw, 88px); }
.ul-content > .ul-section { margin-block: 0; }
.ul-section__title { position: relative; display: inline-block; }
.ul-section__title::after { content: ""; display: block; height: 8px; width: 72px; background: var(--pink); border-radius: 8px; margin-top: 10px; }

.ul-intro h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.ul-intro p { font-size: 1.25rem; }

.ul-band { padding-block: clamp(56px, 8vw, 104px); border-block: 3px solid var(--ink); }
.ul-band--pink { background: var(--pink-bg); color: var(--white); }
.ul-band--pink h2 { color: var(--white); }
.ul-band--pink a:not(.wp-block-button__link) { color: var(--white); }
.ul-band--pink .wp-block-button__link { background: var(--butter); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); border-color: var(--ink); }
.ul-band--pink .is-style-outline .wp-block-button__link { background: transparent; }
.ul-band--butter { background: var(--butter); }
.ul-statement {
	font-size: clamp(2rem, 5.4vw, 4rem); font-weight: 900; line-height: 1.12; color: var(--butter); margin: 0;
	text-wrap: balance;
}
html[dir="rtl"] .ul-statement { line-height: 1.4; }
.ul-content .ul-band > .ul-statement { width: min(1000px, calc(100% - 2 * var(--gutter))); }
.ul-cta { text-align: center; }
.ul-cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.ul-cta p { font-size: 1.2rem; max-width: 46ch; margin-inline: auto; }
.ul-cta .wp-block-buttons { justify-content: center; margin-top: 26px; }

/* Columns */
.wp-block-columns { display: flex; gap: 28px; flex-wrap: wrap; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) {
	.wp-block-columns { flex-direction: column; }
	.wp-block-column { flex-basis: 100% !important; }
}

.ul-pillars { counter-reset: pillar; margin-top: 28px; }
.ul-pillars > .wp-block-column {
	counter-increment: pillar; position: relative;
	background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 64px 26px 22px;
}
.ul-pillars > .wp-block-column::before {
	content: counter(pillar, decimal-leading-zero); position: absolute; top: 18px; inset-inline-start: 26px;
	font-weight: 900; font-size: 1.1rem; color: var(--white); background: var(--pink);
	border-radius: 999px; padding: 0 12px; border: 2px solid var(--ink);
}
.ul-pillars > .wp-block-column:nth-child(2) { background: var(--butter); }
.ul-pillars > .wp-block-column:nth-child(3) { background: #FFE0F0; }
.ul-pillars h3 { font-size: 1.7rem; }
.ul-pillars a { font-weight: 800; color: var(--ink); text-decoration-color: var(--pink); }

.ul-boxes { margin-block: 28px !important; }
.ul-boxes > .wp-block-column {
	background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
	padding: 24px 26px 10px; box-shadow: 5px 5px 0 var(--sun);
}
.ul-boxes > .wp-block-column:nth-child(2) { box-shadow: 5px 5px 0 var(--pink); }
.ul-boxes h3 { font-size: 1.35rem; }
.ul-boxes a { font-weight: 800; }

.ul-alertbox {
	background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius);
	padding: 26px 28px 12px; box-shadow: 8px 8px 0 var(--pink); margin-block: 0 2em !important;
	border-inline-start-width: 14px;
}
.ul-alertbox h2 { font-size: 1.6rem; }

.ul-contact { align-items: flex-start; }
.ul-contact > .wp-block-column:first-child { flex: 1.5 1 0; }

/* ------------------------------------------------------------------ Cards */
.ul-listing { padding-block: 44px 96px; }
.ul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 30px; }
.ul-grid--latest { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 26px; }
.ul-content .ul-grid { width: 100%; }

.ul-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}
.ul-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.ul-card__media {
	position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
	border-bottom: 2px solid var(--ink); text-decoration: none;
}
.ul-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ul-card__media .ul-sun { position: absolute; width: 62%; inset-inline-end: -8%; bottom: -2px; }
.ul-card__word {
	position: absolute; top: 16px; inset-inline-start: 20px; font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1;
}
.ul-card__media--pink { background: var(--pink-bg); color: var(--butter); }
.ul-card__media--pink .ul-card__word { color: var(--white); }
.ul-card__media--butter { background: var(--butter); color: var(--pink); }
.ul-card__media--butter .ul-card__word { color: var(--ink); }
.ul-card__media--sun { background: var(--sun); color: var(--magenta); }
.ul-card__media--sun .ul-card__word { color: var(--ink); }
.ul-card__media--ink { background: var(--ink); color: var(--pink); }
.ul-card__media--ink .ul-card__word { color: var(--sun); }

.ul-card__body { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ul-card__title { font-size: 1.4rem; margin: 0; line-height: 1.25; }
html[dir="rtl"] .ul-card__title { line-height: 1.45; }
.ul-card__title a { color: var(--ink); text-decoration: none; }
.ul-card__title a:hover { color: var(--pink-text); }
.ul-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ul-card { position: relative; }
.ul-card .ul-tag { position: relative; z-index: 1; }
.ul-card__excerpt { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.ul-card .ul-meta { margin-top: auto; padding-top: 6px; }

.ul-tag {
	align-self: flex-start; display: inline-block; padding: 2px 12px; border-radius: 999px;
	background: var(--sun); color: var(--ink); border: 2px solid var(--ink);
	font-weight: 800; font-size: .85rem; text-decoration: none; line-height: 1.6;
}
.ul-tag:hover { background: var(--ink); color: var(--sun); }
.ul-tag--light { background: var(--white); }

.ul-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink-soft); }

@media (min-width: 900px) {
	.ul-card--feature { grid-column: 1 / -1; flex-direction: row; }
	.ul-card--feature .ul-card__media { flex: 1.15; aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-inline-end: 2px solid var(--ink); }
	.ul-card--feature .ul-card__body { flex: 1; padding: 40px 40px 32px; justify-content: center; }
	.ul-card--feature .ul-card__title { font-size: clamp(2rem, 3vw, 2.8rem); }
	.ul-card--feature .ul-card__excerpt { font-size: 1.15rem; }
	.ul-card--feature .ul-card__word { font-size: 3.4rem; top: 28px; inset-inline-start: 32px; }
}

.ul-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.ul-chip {
	display: inline-block; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--ink);
	background: var(--white); color: var(--ink); font-weight: 800; text-decoration: none;
}
.ul-chip:hover { background: var(--butter); color: var(--ink); }
.ul-chip.is-active { background: var(--ink); color: var(--sun); }

.ul-more { margin-top: 30px; text-align: end; }
.ul-empty { font-size: 1.2rem; font-weight: 700; padding: 40px 0; }

.ul-pagination { margin-top: 48px; }
.ul-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ul-pagination a, .ul-pagination span {
	display: inline-block; min-width: 46px; padding: 8px 16px; text-align: center; border-radius: 999px;
	border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 800; text-decoration: none;
}
.ul-pagination .current { background: var(--ink); color: var(--sun); }

/* ---------------------------------------------------------------- Article */
.ul-articlehead { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 100px) 0 clamp(56px, 8vw, 96px); border-bottom: 3px solid var(--ink); }
.ul-articlehead__inner { width: min(900px, calc(100% - 2 * var(--gutter))); margin-inline: auto; position: relative; z-index: 1; }
.ul-articlehead__title { font-size: clamp(2.3rem, 5.6vw, 4.2rem); margin: 18px 0 14px; text-wrap: balance; }
.ul-articlehead__dek { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; max-width: 46ch; }
.ul-articlehead .ul-meta { color: inherit; opacity: .9; font-size: 1rem; }
.ul-articlehead__sun { position: absolute; width: min(380px, 50vw); inset-inline-end: -50px; bottom: -4px; opacity: .9; }
.ul-articlehead--pink { background: var(--pink-bg); color: var(--white); }
.ul-articlehead--pink .ul-articlehead__title { color: var(--white); }
.ul-articlehead--pink .ul-meta { opacity: 1; }
.ul-articlehead--pink .ul-articlehead__sun { color: var(--butter); }
.ul-articlehead--butter { background: var(--butter); }
.ul-articlehead--butter .ul-articlehead__sun { color: var(--pink); }
.ul-articlehead--sun { background: var(--sun); }
.ul-articlehead--sun .ul-articlehead__sun { color: var(--magenta); }
.ul-articlehead--ink { background: var(--ink); color: var(--cream); }
.ul-articlehead--ink .ul-articlehead__title { color: var(--sun); }
.ul-articlehead--ink .ul-articlehead__sun { color: var(--pink); }
@media (max-width: 700px) {
	.ul-articlehead { padding-bottom: 120px; }
	.ul-articlehead__sun { width: 190px; opacity: .9; }
}

.ul-articleimg { width: min(1100px, calc(100% - 2 * var(--gutter))); margin: -40px auto 0; position: relative; z-index: 2; }
.ul-articleimg img { width: 100%; border-radius: var(--radius); border: 2px solid var(--ink); box-shadow: var(--shadow); display: block; }
.ul-articleimg figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; text-align: center; }

.ul-trnote { margin-bottom: 1.6em !important; }
.ul-trnote a { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--butter); border: 2px solid var(--ink); color: var(--ink); font-weight: 800; text-decoration: none; font-size: .95rem; }

.ul-articlefoot { padding-bottom: 72px; }
.ul-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ul-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 22px 0; border-block: 2px solid var(--ink); margin-block: 24px; }
.ul-share__label { font-weight: 900; margin-inline-end: 6px; }
.ul-share__btn {
	display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	background: var(--white); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; text-decoration: none; position: relative;
}
.ul-share__btn:hover { background: var(--pink); color: var(--white); }
.ul-share__btn.is-copied::after {
	content: attr(data-msg); position: absolute; bottom: 120%; white-space: nowrap; background: var(--ink); color: var(--white);
	padding: 4px 10px; border-radius: 8px; font-size: .8rem; font-weight: 700;
}
.ul-author {
	display: flex; gap: 18px; align-items: center; margin-top: 32px;
	background: var(--butter); border: 2px solid var(--ink); border-radius: var(--radius); padding: 22px 24px;
	box-shadow: 6px 6px 0 var(--pink);
}
.ul-author__img {
	flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
	background: var(--pink-bg); color: var(--white); border: 2px solid var(--ink);
	font-weight: 900; font-size: 2rem; line-height: 1;
}
.ul-author__label { margin: 0; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.ul-author__name { font-weight: 900; font-size: 1.35rem; margin: 0 0 2px; line-height: 1.3; }
.ul-byline { font-weight: 800; }
.ul-author__bio { margin: 0; color: var(--ink-soft); }

.ul-related { background: var(--butter); padding-block: 64px 88px; border-top: 3px solid var(--ink); }

/* ------------------------------------------------------------------ Forms */
.ul-form { display: grid; gap: 18px; }
.ul-form label { display: grid; gap: 6px; font-weight: 800; }
.ul-form label span { font-size: .98rem; }
.ul-form input, .ul-form select, .ul-form textarea {
	width: 100%; font: inherit; font-weight: 500; padding: 12px 16px; border-radius: 14px;
	border: 2px solid var(--ink); background: var(--white); color: var(--ink);
}
.ul-form input:focus, .ul-form select:focus, .ul-form textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--magenta); }
.ul-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .ul-form__row { grid-template-columns: 1fr; } }
.ul-form__hp { position: absolute !important; inset-inline-start: -9999px; height: 0; overflow: hidden; }
.ul-form__privacy { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.ul-form button { justify-self: start; }
.ul-form__notice { padding: 14px 18px; border-radius: 14px; border: 2px solid var(--ink); font-weight: 800; margin: 0; }
.ul-form__notice--ok { background: #D7F5DC; }
.ul-form__notice--err { background: #FFE0E6; }

.ul-contactcard { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 22px; box-shadow: 5px 5px 0 var(--sun); margin-bottom: 18px; }
.ul-contactcard__email { display: flex; align-items: center; gap: 10px; font-weight: 800; word-break: break-all; }
.ul-contactcard__email a { color: var(--ink); }

.ul-social { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ul-social li { margin: 0; }
.ul-social a {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--pink); color: var(--white); text-decoration: none; border: 2px solid var(--ink);
}
.ul-social a:hover { background: var(--sun); color: var(--ink); }

/* ----------------------------------------------------------------- Footer */
.ul-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); padding-top: 72px; }
.ul-footer a { color: var(--cream); }
.ul-footer a:hover { color: var(--sun); }
.ul-footer__inner { width: min(var(--wide), calc(100% - 2 * var(--gutter))); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; position: relative; z-index: 1; }
@media (max-width: 860px) { .ul-footer__inner { grid-template-columns: 1fr; gap: 36px; } }
.ul-footer .ul-logo img { height: 74px; }
.ul-footer__tag { font-size: 1.5rem; font-weight: 900; color: var(--sun); margin: 20px 0 8px; }
.ul-footer__brand p:last-child { max-width: 40ch; opacity: .85; }
.ul-footer__title { font-size: 1.05rem; color: var(--pink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
html[dir="rtl"] .ul-footer__title { letter-spacing: 0; font-size: 1.15rem; }
.ul-footer__menu, .ul-footer .ul-menu-fallback ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ul-footer__menu a, .ul-footer .ul-menu-fallback a { text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.ul-footer__email { font-weight: 800; }
.ul-footer .ul-btn--butter, .ul-footer .ul-btn--butter:hover { color: var(--ink); }
.ul-footer .ul-social a { background: transparent; border-color: var(--cream); color: var(--cream); }
.ul-footer .ul-social a:hover { background: var(--pink); border-color: var(--pink); color: var(--white); }
.ul-footer__bottom {
	width: min(var(--wide), calc(100% - 2 * var(--gutter))); margin: 56px auto 0; padding: 22px 0 32px;
	border-top: 1px solid rgba(255, 249, 227, .25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center;
	font-size: .95rem; position: relative; z-index: 1;
}
.ul-footer__bottom p { margin: 0; opacity: .8; }
.ul-footer .ul-langs a { background: transparent; color: var(--cream); border-color: var(--cream); }
.ul-footer .ul-langs a:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.ul-footer__sun { position: absolute; width: min(520px, 80vw); inset-inline-end: -60px; bottom: -6px; color: var(--pink); opacity: .22; }

/* ------------------------------------------------------------- Quick exit */
.ul-exit {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	padding: 7px 16px; border-radius: 999px; border: 2px solid var(--ink);
	background: var(--pink-bg); color: var(--white); font: 800 .98rem/1.4 var(--font);
	cursor: pointer;
}
.ul-exit:hover { background: var(--ink); color: var(--white); }
.ul-exit .ul-icon { width: 16px; height: 16px; }
.ul-exit__short { display: none; }
@media (max-width: 1180px) {
	.ul-exit { padding: 6px 12px; }
	.ul-exit__long { display: none; }
	.ul-exit__short { display: inline; }
	.ul-header__tools { gap: 8px; }
	.ul-header__tools .ul-langs a { padding: 5px 12px; }
}
@media (max-width: 370px) {
	.ul-logo img { height: 40px; }
	.ul-burger { width: 44px; height: 44px; }
}

/* -------------------------------------------------------------------- 404 */
.ul-404 { background: var(--sun); padding-block: 96px 120px; text-align: center; border-bottom: 3px solid var(--ink); }
.ul-404 h1 { color: var(--pink-deep); font-size: clamp(2.6rem, 7vw, 5rem); }
.ul-404 .ul-lead { max-width: 40ch; margin-inline: auto; }
.ul-404 .ul-search { margin-inline: auto; }
.ul-404__sun { width: 220px; color: var(--magenta); display: block; margin: 0 auto 10px; }

/* ---------------------------------------------------------- WP utilities */
.alignleft { float: inline-start; margin-inline-end: 1.5em; }
.alignright { float: inline-end; margin-inline-start: 1.5em; }
.aligncenter { margin-inline: auto; text-align: center; }
.has-pink-color { color: var(--pink) !important; }
.has-pink-background-color { background-color: var(--pink) !important; }
.has-magenta-color { color: var(--magenta) !important; }
.has-magenta-background-color { background-color: var(--magenta) !important; }
.has-sun-color { color: var(--sun) !important; }
.has-sun-background-color { background-color: var(--sun) !important; }
.has-butter-color { color: var(--butter) !important; }
.has-butter-background-color { background-color: var(--butter) !important; }
.has-cream-background-color { background-color: var(--cream) !important; }
.has-ink-color { color: var(--ink) !important; }
.has-ink-background-color { background-color: var(--ink) !important; }
.has-white-color { color: var(--white) !important; }
.has-white-background-color { background-color: var(--white) !important; }
.has-background { padding: 1.4em 1.6em; border-radius: var(--radius); }
.wp-block-image img { height: auto; }
.wp-block-embed iframe { max-width: 100%; }

/* ------------------------------------------------------------------ Slider */
.ul-slider-band { background: var(--cream); padding-block: clamp(36px, 5vw, 64px); }
.ul-content .wp-block-group.ul-slider-band > * { width: min(var(--wide), calc(100% - 2 * var(--gutter))); }
.ul-content > .ul-hero + .ul-slider-band { margin-top: 0; }
.ul-slider { position: relative; }
.ul-slider__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none; background: var(--white);
	border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--pink);
}
.ul-slider__track::-webkit-scrollbar { display: none; }
.ul-slider__track:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.ul-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1.35fr 1fr; min-height: 440px; }
.ul-slide__media { position: relative; display: block; overflow: hidden; min-height: 260px; }
.ul-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ul-slide__media .ul-sun { position: absolute; width: 55%; inset-inline-end: -6%; bottom: -2px; }
.ul-slide__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(24px, 4vw, 48px); border-inline-start: 3px solid var(--ink); }
.ul-slide__title { font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0; text-wrap: balance; }
html[dir="rtl"] .ul-slide__title { line-height: 1.45; }
.ul-slide__title a { color: var(--ink); text-decoration: none; }
.ul-slide__title a:hover { color: var(--pink-text); }
.ul-slide__excerpt { margin: 0; color: var(--ink-soft); font-size: 1.08rem; }
.ul-slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.ul-slider__btn {
	display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--ink); color: var(--sun); border: 2px solid var(--ink); cursor: pointer;
}
.ul-slider__btn:hover { background: var(--pink-bg); color: var(--white); }
.ul-slider__btn:not(.ul-slider__btn--next) .ul-icon { transform: scaleX(-1); }
html[dir="rtl"] .ul-slider__btn:not(.ul-slider__btn--next) .ul-icon { transform: none; }
.ul-slider__dots { display: flex; gap: 8px; }
.ul-slider__dot { width: 12px; height: 12px; padding: 0; border-radius: 99px; border: 2px solid var(--ink); background: var(--white); cursor: pointer; transition: width .2s ease, background .2s ease; }
.ul-slider__dot.is-active { width: 34px; background: var(--pink-bg); }
@media (max-width: 800px) {
	.ul-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
	.ul-slide__body { justify-content: flex-start; }
	.ul-slide__media { min-height: 0; }
	.ul-slide__media img { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 16 / 9; }
	.ul-slide__media:not(:has(img)) { aspect-ratio: 16 / 9; }
	.ul-slide__body { border-inline-start: 0; border-top: 3px solid var(--ink); }
	.ul-slider__track { box-shadow: 5px 5px 0 var(--pink); }
}

/* -------------------------------------------------- Images inside articles */
.ul-content .wp-block-image { margin-block: 2em; }
.ul-content .wp-block-image img { width: 100%; height: auto; display: block; }
.ul-content .wp-block-image.alignwide img,
.ul-content .wp-block-image.alignfull img { border-radius: 0; border-inline: 0; }
.ul-content .wp-element-caption { font-size: .92rem; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-gallery > .wp-block-image { flex: 1 1 calc(33.333% - 12px); margin: 0 !important; min-width: 180px; }
.wp-block-gallery > .wp-block-image img { height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.wp-block-embed { margin-block: 2em; }
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); border: 2px solid var(--ink); }
.ul-card__media img, .ul-slide__media img { background: var(--cream); }

/* ================================================================ Glossary */
.ul-glossary__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.ul-glossary__search { flex: 1 1 320px; max-width: 560px; position: relative; }
.ul-glossary__search input { padding-inline-end: 56px; font-size: 1.15rem; padding-block: 14px; }
.ul-glossary__searchicon { position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.ul-glossary__count { margin: 0; font-weight: 800; color: var(--soft, var(--ink-soft)); }
.ul-glossary__count span { color: var(--pink-text); font-size: 1.4em; }
.ul-content .ul-glossary { width: min(var(--wide), calc(100% - 2 * var(--gutter))); }
.ul-glossary__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; }
@media (max-width: 420px) { .ul-glossary__grid { grid-template-columns: 1fr; } }

.ul-term {
	--bg: var(--pinkbg, #E0006E); --fg: var(--white); --tr: var(--butter); --line: var(--butter); --exbg: var(--cream); --exfg: var(--ink);
	position: relative; overflow: hidden; scroll-margin-top: 120px;
	background: var(--bg); color: var(--fg);
	border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
	padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 10px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ul-term:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--ink); }
.ul-term--pink { --bg: var(--pink-bg); }
.ul-term--butter { --bg: var(--butter); --fg: var(--ink); --tr: var(--pink-text); --line: var(--pink-bg); --exbg: var(--white); }
.ul-term--ink { --bg: var(--ink); --fg: var(--cream); --tr: var(--pink-soft); --line: var(--sun); --exbg: var(--cream); }
.ul-term--magenta { --bg: var(--magenta); --fg: var(--ink); --tr: var(--white); --line: var(--ink); --exbg: var(--white); }
.ul-term--sun { --bg: var(--sun); --fg: var(--ink); --tr: var(--pink-deep); --line: var(--pink-bg); --exbg: var(--white); }
.ul-term__num { position: absolute; top: 14px; inset-inline-end: 20px; font-weight: 900; font-size: 1rem; opacity: .75; }
.ul-term__title { font-size: clamp(2rem, 3.4vw, 2.6rem); margin: 6px 0 0; color: var(--fg); line-height: 1.1; }
html[dir="rtl"] .ul-term__title { line-height: 1.35; }
.ul-term--sun .ul-term__title { color: var(--pink-deep); }
.ul-term--ink .ul-term__title { color: var(--sun); }
.ul-term__tr { margin: 0; font-weight: 800; font-size: 1.2rem; color: var(--tr); }
.ul-squiggle { width: 96px; height: 14px; color: var(--line); display: block; }
.ul-term__def { margin: 4px 0 6px; font-size: 1.08rem; line-height: 1.6; }
.ul-term__ex { position: relative; margin-top: auto; background: var(--exbg); color: var(--exfg); border: 2px solid var(--ink); border-radius: 18px; padding: 22px 18px 14px; }
.ul-term__ex p { margin: 0; font-weight: 800; }
.ul-term__exlabel { position: absolute; top: -14px; inset-inline-start: 14px; background: var(--ink); color: var(--butter); border-radius: 999px; padding: 1px 12px; font-size: .82rem; font-weight: 800; transform: rotate(-3deg); }
.ul-term__edit { position: absolute; bottom: 10px; inset-inline-end: 16px; font-size: .8rem; font-weight: 800; color: inherit; opacity: .7; }
.ul-term:target { animation: ulPulse 1.2s ease 2; }
@keyframes ulPulse { 50% { box-shadow: 0 0 0 10px var(--sun), var(--shadow); } }
.ul-term.is-hidden { display: none; }

/* --------------------------------------------------- Flip cards (home) */
.ul-words > p { max-width: 52ch; }
.ul-flips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 26px; }
.ul-content .ul-flips { width: 100%; }
.ul-flip { all: unset; box-sizing: border-box; display: block; cursor: pointer; perspective: 1100px; min-height: 290px; border-radius: var(--radius); }
.ul-flip:focus-visible { outline: 3px solid var(--magenta); outline-offset: 5px; }
.ul-flip__inner { position: relative; display: block; width: 100%; height: 100%; min-height: 290px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.ul-flip:hover .ul-flip__inner { transform: rotateY(-8deg) rotateX(4deg); }
.ul-flip[aria-pressed="true"] .ul-flip__inner { transform: rotateY(180deg); }
html[dir="rtl"] .ul-flip:hover .ul-flip__inner { transform: rotateY(8deg) rotateX(4deg); }
html[dir="rtl"] .ul-flip[aria-pressed="true"] .ul-flip__inner { transform: rotateY(-180deg); }
.ul-flip__face {
	position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px;
	border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
	backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.ul-flip__front { justify-content: flex-end; }
.ul-flip__back { transform: rotateY(180deg); background: var(--white); color: var(--ink); justify-content: center; }
.ul-flip--pink .ul-flip__front { background: var(--pink-bg); color: var(--white); }
.ul-flip--butter .ul-flip__front { background: var(--butter); color: var(--ink); }
.ul-flip--ink .ul-flip__front { background: var(--ink); color: var(--sun); }
.ul-flip--magenta .ul-flip__front { background: var(--magenta); color: var(--ink); }
.ul-flip--sun .ul-flip__front { background: var(--sun); color: var(--pink-deep); }
.ul-flip__num { position: absolute; top: 18px; inset-inline-start: 22px; font-weight: 900; opacity: .7; }
.ul-flip__term { font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.1; }
html[dir="rtl"] .ul-flip__term { line-height: 1.35; }
.ul-flip__tr { font-weight: 800; font-size: 1.1rem; opacity: .9; }
.ul-flip__hint { margin-top: 10px; font-size: .9rem; font-weight: 700; opacity: .8; }
.ul-flip__def { font-size: 1.05rem; line-height: 1.55; font-weight: 600; }
.ul-flip__ex { margin-top: 6px; padding: 10px 14px; border-radius: 14px; background: var(--butter); font-weight: 800; font-size: .95rem; }

/* ------------------------------------------------------ Word ticker */
.ul-marquee-band { background: var(--ink); border-block: 3px solid var(--ink); padding-block: 0 !important; overflow: hidden; }
.ul-content .wp-block-group.ul-marquee-band > * { width: 100%; max-width: none; }
.ul-content > .ul-marquee-band { margin-block: 0; }
.ul-marquee { overflow: hidden; padding-block: 22px; }
.ul-marquee__track { display: flex; width: max-content; animation: ulMarquee 70s linear infinite; }
html[dir="rtl"] .ul-marquee__track { animation-name: ulMarqueeRtl; }
.ul-marquee:hover .ul-marquee__track, .ul-marquee:focus-within .ul-marquee__track { animation-play-state: paused; }
.ul-marquee__list { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.ul-marquee__list li { display: flex; align-items: center; margin: 0; }
.ul-marquee__list li::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--pink-bg); margin-inline: 28px; flex: none; }
.ul-marquee__list li:nth-child(3n+2)::after { background: var(--sun); }
.ul-marquee__list li:nth-child(3n)::after { background: var(--cream); }
.ul-marquee__list a { color: var(--cream); text-decoration: none; font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.1rem); white-space: nowrap; }
.ul-marquee__list li:nth-child(3n+1) a { color: var(--sun); }
.ul-marquee__list a:hover { color: var(--pink-soft); }
@keyframes ulMarquee { to { transform: translateX(-50%); } }
@keyframes ulMarqueeRtl { to { transform: translateX(50%); } }

/* ============================================================ Animations */
/* Entrances that run on load (no JavaScript needed). */
@keyframes ulRise { from { opacity: 0; transform: translateY(40px); } }
@keyframes ulSunRise { from { opacity: 0; transform: translateY(45%); } }
@keyframes ulPop { 0% { opacity: 0; transform: scale(0); } 70% { transform: scale(1.25); } }
@keyframes ulWiggle { 0% { opacity: 0; transform: rotate(-12deg) scale(.6); } 60% { transform: rotate(4deg) scale(1.05); } }
@keyframes ulDraw { from { stroke-dashoffset: 200; } }

@media (prefers-reduced-motion: no-preference) {
	.ul-hero .ul-hero__title { animation: ulRise .9s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-hero .ul-lead { animation: ulRise .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-hero .wp-block-buttons { animation: ulRise .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-hero::after { animation: ulSunRise 1.4s .2s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-kicker, .ul-articlehead .ul-tag { animation: ulWiggle .7s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
	.ul-pagehead__title, .ul-articlehead__title { animation: ulRise .9s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-pagehead__intro, .ul-articlehead__dek, .ul-articlehead .ul-meta { animation: ulRise .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-pagehead__sun path, .ul-articlehead__sun path, .ul-404__sun path { transform-box: fill-box; transform-origin: 50% 100%; animation: ulSunRise 1.1s .1s cubic-bezier(.2, .8, .2, 1) both; }
	.ul-pagehead__sun circle, .ul-articlehead__sun circle, .ul-404__sun circle { transform-box: fill-box; transform-origin: center; animation: ulPop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
	.ul-sun circle:nth-of-type(1) { animation-delay: .55s; }
	.ul-sun circle:nth-of-type(2) { animation-delay: .61s; }
	.ul-sun circle:nth-of-type(3) { animation-delay: .67s; }
	.ul-sun circle:nth-of-type(4) { animation-delay: .73s; }
	.ul-sun circle:nth-of-type(5) { animation-delay: .79s; }
	.ul-sun circle:nth-of-type(6) { animation-delay: .85s; }
	.ul-sun circle:nth-of-type(7) { animation-delay: .91s; }
	.ul-sun circle:nth-of-type(8) { animation-delay: .97s; }
	.ul-sun circle:nth-of-type(9) { animation-delay: 1.03s; }
	.ul-sun circle:nth-of-type(10) { animation-delay: 1.09s; }
	.ul-squiggle path { stroke-dasharray: 200; animation: ulDraw 1.2s .3s ease both; }
	.ul-logo:hover img { animation: ulWiggle .6s ease; }
	.wp-block-button__link:hover .ul-icon--arrow, .ul-arrowlink:hover .ul-icon--arrow { transform: translateX(4px); }
	.ul-icon--arrow { transition: transform .2s ease; }

	/* Scroll reveals: only when the script has started (html.js-anim), so content never stays hidden. */
	.js-anim :is(.ul-section__title, .ul-intro > *, .ul-pillars > .wp-block-column, .ul-boxes > .wp-block-column, .ul-card, .ul-cta > *,
		.ul-statement, .ul-checklist > li, .ul-booklist > li, .wp-block-details, .ul-term, .ul-flip, .ul-slider, .ul-alertbox,
		.ul-contactcard, .ul-form, .ul-author, .ul-share, .ul-content > .wp-block-heading, .ul-prose > figure, .ul-prose > .wp-block-quote,
		.ul-content > .wp-block-image, .ul-related .ul-section__title, .ul-footer__inner > *) {
		opacity: 0; transform: translateY(34px);
		transition: opacity .75s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
		transition-delay: var(--d, 0s);
	}
	.js-anim :is(.ul-section__title, .ul-intro > *, .ul-pillars > .wp-block-column, .ul-boxes > .wp-block-column, .ul-card, .ul-cta > *,
		.ul-statement, .ul-checklist > li, .ul-booklist > li, .wp-block-details, .ul-term, .ul-flip, .ul-slider, .ul-alertbox,
		.ul-contactcard, .ul-form, .ul-author, .ul-share, .ul-content > .wp-block-heading, .ul-prose > figure, .ul-prose > .wp-block-quote,
		.ul-content > .wp-block-image, .ul-related .ul-section__title, .ul-footer__inner > *).is-in { opacity: 1; transform: none; }
	.js-anim .ul-statement { transform: scale(.94); }
	.js-anim .ul-section__title::after { width: 0; transition: width .7s .35s cubic-bezier(.2, .8, .2, 1); }
	.js-anim .ul-section__title.is-in::after { width: 72px; }
	/* After a card has appeared, hover effects work normally again. */
	.js-anim .ul-card.is-in, .js-anim .ul-term.is-in { transition: opacity .75s ease, transform .2s ease, box-shadow .2s ease; transition-delay: 0s; }
	.js-anim .ul-card.is-in:hover { transform: translate(-3px, -3px); }
	.js-anim .ul-term.is-in:hover { transform: translate(-3px, -3px) rotate(-.4deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ul-marquee__track { animation: none; }
	.ul-marquee { overflow-x: auto; }
	.ul-flip__inner { transition: none; }
}

/* Flip-card grid: 3 / 2 / 1 columns, and translations aligned with the page. */
.ul-flips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ul-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ul-flips { grid-template-columns: 1fr; } .ul-flip, .ul-flip__inner { min-height: 250px; } }
.ul-flip__tr, .ul-term__tr { text-align: left; }
html[dir="rtl"] .ul-flip__tr, html[dir="rtl"] .ul-term__tr { text-align: right; }

/* ===================================================================== FAQ */
.ul-faq-search { margin-bottom: 18px; }
.ul-faq-search .ul-search { position: relative; max-width: none; }
.ul-faq-search input { padding-block: 14px; font-size: 1.15rem; padding-inline-end: 56px; }
.ul-faq-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2em !important; }
.ul-faq-nav a {
	display: inline-block; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--ink);
	background: var(--white); color: var(--ink); font-weight: 800; text-decoration: none; font-size: .98rem;
	transition: background .15s ease, transform .15s ease;
}
.ul-faq-nav a:nth-child(5n+1) { background: var(--sun); }
.ul-faq-nav a:nth-child(5n+2) { background: var(--blush, #FFD6E8); }
.ul-faq-nav a:nth-child(5n+3) { background: var(--butter); }
.ul-faq-nav a:nth-child(5n+4) { background: var(--white); }
.ul-faq-nav a:nth-child(5n) { background: var(--cream); }
.ul-faq-nav a:hover { transform: translateY(-2px) rotate(-1deg); background: var(--ink); color: var(--sun); }
.ul-content > .ul-faq-group { scroll-margin-top: 110px; margin-top: 2em; display: flex; align-items: center; gap: 12px; }
.ul-content > .ul-faq-group::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--pink-bg); box-shadow: 26px 0 0 -4px var(--sun); margin-inline-end: 24px; }
html[dir="rtl"] .ul-content > .ul-faq-group::before { box-shadow: -26px 0 0 -4px var(--sun); }
.ul-content .wp-block-details.is-hidden, .ul-content > .ul-faq-group.is-hidden { display: none; }
.wp-block-details[open] { background: linear-gradient(var(--cream), var(--cream)); }
.wp-block-details[open] summary { color: var(--pink-text); }
.wp-block-details summary { padding-block: 4px; }
.ul-faq-none { margin-top: 2.4em !important; font-weight: 800; font-size: 1.2rem; text-align: center; }

/* ======================================================== More animations */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: ulFadeOut .25s ease both; }
::view-transition-new(root) { animation: ulFadeIn .35s ease both; }
@keyframes ulFadeOut { to { opacity: 0; } }
@keyframes ulFadeIn { from { opacity: 0; } }

@keyframes ulWord { from { opacity: 0; transform: translateY(.45em) rotate(3deg); } }
@keyframes ulFloat { 50% { transform: translateY(-10px); } }
@keyframes ulDotTwinkle { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .45; } }
@keyframes ulTwinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ulPulseRing { 0% { box-shadow: 0 0 0 0 rgba(224, 0, 110, .55); } 100% { box-shadow: 0 0 0 16px rgba(224, 0, 110, 0); } }
@keyframes ulSweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ulSweepRtl { from { background-position: 0 0; } to { background-position: 100% 0; } }

@media (prefers-reduced-motion: no-preference) {
	/* Headlines, word by word */
	:is(.ul-hero__title, .ul-pagehead__title, .ul-articlehead__title).is-split { animation: none; }
	.ul-w { display: inline-block; animation: ulWord .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + .05s); }

	/* Hero: the sun floats and follows the scroll a little; sparkles twinkle */
	.ul-hero::after { translate: 0 var(--py, 0px); }
	.ul-hero::before {
		content: ""; position: absolute; z-index: 0; pointer-events: none;
		inset-inline-end: 8%; top: 14%; width: 180px; height: 180px;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23FF1CC9' d='M20 0l4 16 16 4-16 4-4 16-4-16L0 20l16-4z'/%3E%3C/svg%3E") 10% 20% / 46px no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23FFFFFF' d='M20 0l4 16 16 4-16 4-4 16-4-16L0 20l16-4z'/%3E%3C/svg%3E") 80% 70% / 28px no-repeat;
		animation: ulTwinkle 3.2s ease-in-out infinite;
	}
	/* Phones and tablets: sparkles sit beside the sun at the bottom, away from the text. */
	@media (max-width: 1180px) {
		.ul-hero::before { top: auto; bottom: calc(min(400px, 45vw) * .62 + 10px); inset-inline-end: 7%; width: 110px; height: 84px; }
	}
	@media (max-width: 700px) {
		.ul-hero::before { bottom: 18px; inset-inline-end: 200px; width: 96px; height: 76px; }
	}

	/* Pictures zoom gently on hover; the slider picture zooms slowly while shown */
	.ul-card__media img, .ul-slide__media img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
	.ul-card:hover .ul-card__media img { transform: scale(1.06); }
	.ul-slide__media img { transform: scale(1.0); transition: transform 7s ease-out; }
	.ul-slide.is-active .ul-slide__media img { transform: scale(1.07); }
	.ul-card__media .ul-sun { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
	.ul-card:hover .ul-card__media .ul-sun { transform: translateY(-8px) scale(1.04); }

	/* 3D tilt (set by the script on computers) */
	.ul-tilt { transform-style: preserve-3d; }
	.js-anim .ul-tilt.is-in:hover, .ul-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(-3px, -3px); }
	.ul-flip.ul-tilt:hover .ul-flip__inner { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
	.ul-flip.ul-tilt[aria-pressed="true"]:hover .ul-flip__inner { transform: rotateY(180deg); }
	html[dir="rtl"] .ul-flip.ul-tilt[aria-pressed="true"]:hover .ul-flip__inner { transform: rotateY(-180deg); }

	/* Buttons squish when pressed */
	.ul-btn:active, .wp-block-button__link:active, .ul-chip:active, .ul-slider__btn:active, .ul-share__btn:active, .ul-burger:active { transform: scale(.94) !important; transition-duration: .08s; }

	/* The statement sweeps into colour */
	.js-anim .ul-band--pink .ul-statement.is-in {
		background: linear-gradient(90deg, var(--butter) 50%, rgba(255, 255, 255, .35) 50%) 100% 0 / 200% 100% no-repeat;
		-webkit-background-clip: text; background-clip: text; color: transparent;
		animation: ulSweep 1.6s .35s cubic-bezier(.6, 0, .2, 1) both;
	}
	html[dir="rtl"] .js-anim .ul-band--pink .ul-statement.is-in { background-image: linear-gradient(270deg, var(--butter) 50%, rgba(255, 255, 255, .35) 50%); animation-name: ulSweepRtl; }

	/* Mobile menu items slide in one after another */
	body.nav-open .ul-menu > li { animation: ulRise .5s cubic-bezier(.2, .8, .2, 1) both; }
	body.nav-open .ul-menu > li:nth-child(2) { animation-delay: .04s; }
	body.nav-open .ul-menu > li:nth-child(3) { animation-delay: .08s; }
	body.nav-open .ul-menu > li:nth-child(4) { animation-delay: .12s; }
	body.nav-open .ul-menu > li:nth-child(5) { animation-delay: .16s; }
	body.nav-open .ul-menu > li:nth-child(6) { animation-delay: .2s; }
	body.nav-open .ul-menu > li:nth-child(7) { animation-delay: .24s; }
	body.nav-open .ul-menu > li:nth-child(8) { animation-delay: .28s; }
	body.nav-open .ul-nav__extra { animation: ulRise .5s .32s cubic-bezier(.2, .8, .2, 1) both; }

	/* Footer sun rises */
	.js-anim .ul-footer__sun { transform: translateY(45%); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
	.js-anim .ul-footer.is-in .ul-footer__sun { transform: none; }

	/* Quick exit: two soft pulses so visitors notice it */
	.ul-exit { animation: ulPulseRing 1.4s 1.2s ease-out 2; }

	/* Page header suns keep twinkling softly after they appear */
	.ul-pagehead__sun circle, .ul-articlehead__sun circle { animation: ulPop .45s cubic-bezier(.3, 1.5, .5, 1) both, ulDotTwinkle 4s 1.4s ease-in-out infinite; }
	.js-anim .ul-tilt.is-in { transition: opacity .75s ease, transform .25s ease, box-shadow .2s ease; transition-delay: 0s; }

	/* Links: underline grows on hover */
	.ul-prose a, .ul-intro a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s ease; }
	html[dir="rtl"] .ul-prose a, html[dir="rtl"] .ul-intro a { background-position: 100% 100%; }
	.ul-prose a:hover, .ul-intro a:hover { background-size: 100% 2px; }
}

/* Reading-progress bar (articles) */
.ul-progress { position: fixed; top: 0; inset-inline: 0; height: 6px; z-index: 60; background: var(--pink); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
html[dir="rtl"] .ul-progress { transform-origin: right center; }
.admin-bar .ul-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .ul-progress { top: 46px; } }

/* Tablets: a smaller sun that sits below the text and buttons, never behind them. */
@media (min-width: 701px) and (max-width: 1180px) {
	.ul-hero::after { width: min(400px, 45vw); }
	.ul-content .ul-hero { padding-bottom: calc(min(400px, 45vw) * .55 + 24px); }
}
