/* =========================================================================
   DigiAI theme - main stylesheet
   Dark by default. Mobile first. No frameworks.
   Sections: 1 tokens, 2 reset/base, 3 layout, 4 header, 5 footer,
             6 components, 7 pages (cards, tutorial, prompt), 8 utilities
   ========================================================================= */

/* 1. Design tokens ------------------------------------------------------- */
:root {
	color-scheme: dark;

	/* colours */
	--bg: #0b0f1a;
	--bg-2: #131a2b;       /* surface */
	--bg-3: #1a2338;
	--line: #222c45;
	--line-2: #2f3b5a;
	--text: #eaf0ff;
	--text-2: #8a94b0;     /* muted */
	--text-3: #7c86a3;     /* dimmer, still AA on surface */
	--primary: #22d3ee;    /* cyan: links, buttons, active states */
	--primary-soft: rgba(34, 211, 238, 0.14);
	--on-primary: #0b0f1a;
	--accent: #f5a623;     /* amber: Pro badges, locks, highlights */
	--accent-soft: rgba(245, 166, 35, 0.14);
	--ok: #4ade80;
	--warn: #f5a623;
	--focus: #ffffff;

	/* type */
	--font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1.0625rem;
	--fs-lg: 1.25rem;
	--fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--fs-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
	--fs-3xl: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
	--lh-tight: 1.15;
	--lh-body: 1.6;
	--tracking-tight: -0.02em;

	/* spacing (4px base) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* shape and layout */
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
	--container: 1200px;
	--narrow: 760px;
	--gutter: 16px;
	--header-h: 64px;
	--shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
		--header-h: 72px;
	}
}

/* Light theme hook (optional later). Add data-theme="light" to <html>.
:root[data-theme="light"] { color-scheme: light; --bg:#ffffff; ... }
*/

/* 2. Reset and base ------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--sp-3);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p,
ul,
ol,
figure,
pre {
	margin: 0 0 var(--sp-4);
}

a {
	color: var(--primary);
	text-decoration: none;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
}

pre,
code {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--sp-6) 0;
}

::selection {
	background: var(--primary);
	color: var(--on-primary);
}

/* 3. Layout -------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: calc(var(--narrow) + var(--gutter) * 2);
}

.container--video {
	max-width: calc(1000px + var(--gutter) * 2);
}

.site-main {
	padding-bottom: var(--sp-8);
	min-height: 60vh;
}

.section {
	margin-top: var(--sp-8);
}

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.section__title {
	margin: 0;
}

.section__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.page-header {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-5);
}

.page-header__eyebrow {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
}

.page-header__title {
	margin-bottom: var(--sp-3);
}

.page-header__title span {
	color: var(--primary);
}

.page-header__desc {
	max-width: 60ch;
	color: var(--text-2);
	font-size: var(--fs-lg);
}

.page-header__search {
	max-width: 560px;
	margin-top: var(--sp-4);
}

.grid {
	display: grid;
	gap: var(--sp-5);
}

.grid--cards {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.grid--cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid--cards {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-6);
	}
}

/* 4. Header -------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 1000;
	padding: var(--sp-2) var(--sp-4);
	background: var(--primary);
	color: var(--on-primary);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.skip-link:focus {
	top: var(--sp-4);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 15, 26, 0.82);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--header-h);
}

.site-brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-brand .custom-logo {
	max-height: 40px;
	width: auto;
}

.site-brand__link {
	display: inline-flex;
	align-items: center;
}

.site-brand__link:hover {
	text-decoration: none;
}

.site-brand__img,
.site-brand__img img {
	display: block;
	height: 41px;
	width: auto;
}

.site-footer__logo .site-brand__img,
.site-footer__logo .site-brand__img img {
	height: 45px;
}

.site-brand__text {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	color: var(--text);
}

.site-brand__text span {
	color: var(--primary);
	margin-left: 0.15em;
	font-weight: 600;
}

.site-brand__text:hover {
	text-decoration: none;
}

/* mobile toggle */
.nav-toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: var(--text);
	margin-left: auto;
}

.nav-toggle:hover {
	background: var(--bg-3);
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

/* nav: dropdown panel on mobile, inline on desktop */
.site-nav {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: var(--sp-3) var(--gutter) var(--sp-5);
	background: var(--bg-2);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.site-nav.is-open {
	display: block;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.site-nav__list a {
	display: block;
	padding: var(--sp-3) var(--sp-2);
	color: var(--text-2);
	font-weight: 600;
	border-radius: var(--radius-sm);
}

.site-nav__list a:hover {
	color: var(--text);
	text-decoration: none;
	background: var(--bg-3);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_parent > a {
	color: var(--text);
}

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}

.iconbutton {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	color: var(--text-2);
}

.iconbutton:hover,
.iconbutton[aria-expanded="true"] {
	color: var(--text);
	background: var(--bg-3);
}

.site-search {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	padding: var(--sp-3) 0;
}

.site-search.is-open {
	display: block;
}

@media (min-width: 900px) {
	.nav-toggle {
		display: none;
	}

	.site-nav {
		display: flex;
		align-items: center;
		gap: var(--sp-5);
		position: static;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		margin-left: auto;
	}

	.site-nav__list {
		flex-direction: row;
		gap: var(--sp-1);
	}

	.site-nav__list a {
		padding: var(--sp-2) var(--sp-3);
		font-size: var(--fs-sm);
	}

	.site-nav__list .current-menu-item > a {
		background: var(--bg-3);
	}

	.site-nav__actions {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* 5. Footer -------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	color: var(--text-2);
	font-size: var(--fs-sm);
}

.site-footer__grid {
	display: grid;
	gap: var(--sp-6);
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-6);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--sp-8);
	}
}

.site-footer__about p {
	max-width: 42ch;
	margin-top: var(--sp-3);
}

.site-footer__heading {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: var(--sp-3);
}

.footer-links,
.legal-links,
.social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: var(--sp-2);
}

.footer-links a,
.legal-links a,
.site-footer__copy a {
	color: var(--text-2);
}

.footer-links a:hover,
.legal-links a:hover,
.site-footer__copy a:hover {
	color: var(--text);
}

.social {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

.social__link {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--bg-3);
	color: var(--text);
}

.social__link:hover {
	background: var(--primary);
	color: var(--on-primary);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	justify-content: space-between;
	padding-top: var(--sp-4);
	padding-bottom: var(--sp-5);
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

.site-footer__bottom p {
	margin: 0;
}

.legal-links {
	display: flex;
	gap: var(--sp-4);
}

/* 6. Components ---------------------------------------------------------- */

/* buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0 var(--sp-5);
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: var(--on-primary);
	font-weight: 600;
	font-size: var(--fs-sm);
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.button:hover {
	background: #67e3f5;
	text-decoration: none;
}

.button--ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--line-2);
}

.button--ghost:hover {
	background: var(--bg-3);
	border-color: var(--text-3);
}

.button--small {
	min-height: 36px;
	padding: 0 var(--sp-3);
	font-size: var(--fs-xs);
}

.button--large {
	min-height: 52px;
	padding: 0 var(--sp-6);
	font-size: var(--fs-base);
}

/* pills (taxonomy terms, status) */
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.75em;
	border-radius: var(--radius-pill);
	background: var(--bg-3);
	color: var(--text-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid var(--line);
}

a.pill:hover {
	color: var(--text);
	border-color: var(--text-3);
	text-decoration: none;
}

.pills--small .pill {
	padding: 0.2em 0.6em;
	font-size: 0.75rem;
}

.pill--tool {
	color: var(--primary);
	background: var(--primary-soft);
	border-color: transparent;
}

.pill--difficulty {
	color: var(--text-2);
}

.pill--locked {
	color: var(--accent);
	background: rgba(245, 166, 35, 0.14);
	border-color: transparent;
}

.pill--unlocked {
	color: var(--ok);
	background: rgba(74, 222, 128, 0.12);
	border-color: transparent;
}

.pill--filter.is-active {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

/* search form */
.searchform {
	display: flex;
	gap: var(--sp-2);
	width: 100%;
	max-width: 640px;
}

.searchform__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--sp-4);
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-2);
	background: var(--bg-3);
	color: var(--text);
}

.searchform__input::placeholder {
	color: var(--text-3);
}

.searchform__input:focus {
	border-color: var(--primary);
	outline: none;
}

.searchform .button {
	min-height: 44px;
}

/* panels and CTA */
.panel {
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-2);
	color: var(--text-2);
}

.panel p:last-child {
	margin-bottom: 0;
}

.cta {
	padding: var(--sp-7) var(--sp-5);
	text-align: center;
	border-radius: var(--radius-lg);
	background: radial-gradient(120% 140% at 50% 0%, rgba(34, 211, 238, 0.35), transparent 60%), var(--bg-2);
	border: 1px solid var(--line);
}

.cta__title {
	font-size: var(--fs-2xl);
}

.cta__text {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--sp-5);
	color: var(--text-2);
	font-size: var(--fs-lg);
}

/* pagination */
.pagination {
	margin-top: var(--sp-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--sp-3);
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-2);
	color: var(--text-2);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.pagination .page-numbers:hover {
	text-decoration: none;
	color: var(--text);
	background: var(--bg-3);
}

.pagination .page-numbers.current {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

.pagination .page-numbers.dots {
	border: 0;
}

/* lightweight YouTube embed */
.yt {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--bg-3);
	box-shadow: var(--shadow);
}

.yt__poster,
.yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.yt__play {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-primary);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}

.yt__play:hover {
	transform: scale(1.06);
	background: #67e3f5;
}

.yt__play svg {
	margin-left: 3px;
}

.yt__link {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	padding: var(--sp-2) var(--sp-3);
	background: var(--bg);
	border-radius: var(--radius-sm);
}

/* copy block (unlocked prompt) */
.copyblock {
	margin-bottom: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	overflow: hidden;
}

.copyblock__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
	border-bottom: 1px solid var(--line);
	background: var(--bg-3);
}

.copyblock__label {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-3);
}

.copyblock__text {
	margin: 0;
	padding: var(--sp-4);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--text);
	max-height: 60vh;
	overflow: auto;
}

.button.is-copied {
	color: var(--ok);
	border-color: var(--ok);
}

/* 7. Pages --------------------------------------------------------------- */

/* cards */
.card {
	position: relative; /* anchor for the stretched title link */
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);   /* square top: the covers have their own frame line that a rounded corner would cut */
	background: var(--bg-2);
	overflow: hidden;
	transition: border-color 0.15s var(--ease), transform 0.2s var(--ease);
}

.card:hover {
	border-color: var(--line-2);
	transform: translateY(-2px);
}

.card__media {
	position: relative;
	display: block;
	aspect-ratio: 1460 / 752;   /* Skool cover ratio; a cover of another ratio letterboxes on navy, never crops */
	overflow: hidden;
	background: var(--bg);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.03);
}

.card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-3), var(--line-2));
}

.card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(11, 15, 26, 0.75);
	color: var(--text);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.card:hover .card__play,
.card:focus-within .card__play {
	opacity: 1;
}

.card__badge {
	position: absolute;
	left: var(--sp-3);
	top: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.7em;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(11, 15, 26, 0.85);
	color: var(--accent);
}

.card__badge--unlocked {
	color: var(--ok);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

.card__eyebrow {
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-3);
}

.card__title {
	margin: 0;
	font-size: var(--fs-lg);
}

.card__title a {
	color: var(--text);
}

.card__title a::after {
	/* whole card clickable */
	content: "";
	position: absolute;
	inset: 0;
}

.card__title a:hover {
	text-decoration: none;
	color: var(--primary);
}

.card__text {
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

.card__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: auto 0 0;
	padding-top: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--text-3);
}

.card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

/* pills inside cards must stay clickable above the stretched link */
.card .pills,
.card__badge {
	position: relative;
	z-index: 1;
}

/* single entries */
.entry-header {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-5);
}

.entry-title {
	font-size: var(--fs-2xl);
}

.entry-summary {
	font-size: var(--fs-lg);
	color: var(--text-2);
	max-width: 60ch;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--text-3);
}

.entry-thumb img {
	border-radius: var(--radius-lg);
}

.entry-content {
	padding-top: var(--sp-6);
	font-size: var(--fs-base);
}

.entry-content > * + * {
	margin-top: var(--sp-4);
}

.entry-content h2 {
	margin-top: var(--sp-7);
}

.entry-content h3 {
	margin-top: var(--sp-6);
}

.entry-content img,
.entry-content video,
.entry-content .wp-block-embed iframe {
	border-radius: var(--radius);
}

.entry-content .wp-block-embed__wrapper {
	border-radius: var(--radius);
	overflow: hidden;
}

.entry-content blockquote {
	margin: var(--sp-5) 0;
	padding: var(--sp-3) var(--sp-5);
	border-left: 3px solid var(--primary);
	color: var(--text-2);
}

.entry-content pre {
	padding: var(--sp-4);
	border-radius: var(--radius);
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: auto;
}

.entry-content code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--bg-3);
}

.entry-content pre code {
	padding: 0;
	background: none;
}

.entry-content a {
	text-decoration: underline;
}

.alignwide {
	margin-inline: calc(50% - min(50vw, calc(var(--container) / 2)) + var(--gutter));
}

/* tutorial steps */
.steps {
	padding-top: var(--sp-7);
}

.steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.step {
	position: relative;
	padding: var(--sp-5) 0 var(--sp-5) 0;
	border-top: 1px solid var(--line);
}

.step__title {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-lg);
}

.step__num {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-primary);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.step__text {
	color: var(--text-2);
}

.step__text > :last-child {
	margin-bottom: 0;
}

.step__figure {
	margin: var(--sp-4) 0 0;
}

.step__figure img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

/* resources */
.resources {
	padding-top: var(--sp-6);
}

.resources__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sp-2);
}

.resources__list a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	color: var(--text);
	font-weight: 600;
}

.resources__list a:hover {
	border-color: var(--primary);
	text-decoration: none;
}

/* prompt page */
.prompt__media {
	display: grid;
	gap: var(--sp-4);
}

.prompt__video {
	width: 100%;
	border-radius: var(--radius-lg);
	background: #000;
}

.gallery {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
}

.gallery--grid {
	grid-template-columns: repeat(2, 1fr);
}

.gallery__item {
	margin: 0;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--line);
}

.gallery--single img {
	border-radius: var(--radius-lg);
}

.prompt__locked {
	padding-top: var(--sp-7);
}

/* 404 */
.notfound__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

/* 8. Utilities ----------------------------------------------------------- */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.icon {
	flex-shrink: 0;
}

/* WordPress admin bar offset for the sticky header */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Below 601 px WordPress stops pinning its admin bar (it scrolls away with the page), so the
   header must stick to the very top or an empty 46 px band stays above it. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* 9. Homepage: scroll-world hero + sections (layout per homepage-mockup/draft-01) */

/* Engine theme tokens. Unlayered, so they beat the engine's @layer defaults.
   Also set on :root because the engine paints html/body with --sw-bg. */
:root,
.digiai-world {
	--sw-bg: var(--bg);
	--sw-ink: var(--text);
	--sw-ink-soft: var(--text-2);
	--sw-accent: var(--primary);
	--sw-font-display: var(--font-sans);
	--sw-font-body: var(--font-sans);
}

/* The site header already occupies the top edge. No particles: the scenes are the show. */
.digiai-world .sw-scrollbar,
.digiai-world .sw-topbar,
.digiai-world .sw-particles {
	display: none;
}

/* The theme's global img/video rule (height:auto, max-width:100%) is unlayered and
   would beat the engine's layered sizing, leaving the scene at its natural aspect.
   Restore full-bleed cover sizing for the engine's media. */
.digiai-world .sw-scene__still,
.digiai-world .sw-scene__video {
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Server-rendered scene 01 poster: visible from the first paint, under the engine's
   stage (z 10) but above its sky (z 0). Fades once the engine's still has painted. */
.digiai-world__poster {
	position: fixed;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	transition: opacity 0.4s var(--ease);
}

.digiai-world.is-live .digiai-world__poster {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}

/* Before the engine mounts, keep the hero one viewport tall so the page has no
   layout shift when the track arrives. */
.digiai-world:not(.sw-root) {
	min-height: 100vh;
}

@media (max-width: 860px) and (orientation: portrait) {
	.digiai-world__poster {
		object-position: center 44%;
	}
}

/* Copy panel, matched to the mockup: cyan eyebrow, tight 800 headline, muted body. */
.digiai-world .sw-copy {
	left: var(--gutter);
	width: min(46vw, 620px);
}

.digiai-world .sw-copy__num {
	color: var(--text-3);
}

.digiai-world .sw-copy__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
}

.digiai-world .sw-copy__title {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	font-size: clamp(2.5rem, 6.4vw, 5.25rem);
	text-shadow: 0 2px 24px rgba(11, 15, 26, 0.8);
}

.digiai-world .sw-copy:not(:first-child) .sw-copy__title {
	font-size: clamp(2rem, 4.6vw, 3.75rem);
}

.digiai-world .sw-copy__body {
	color: var(--text-2);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	max-width: 32em;
}

.digiai-world .sw-copy__tags li {
	color: var(--text);
	background: rgba(19, 26, 43, 0.6);
	border: 1px solid rgba(234, 240, 255, 0.12);
	font-size: 0.75rem;
	padding: 6px 12px;
}

/* Vault scene carries the amber accent: its tags go amber too. */
.digiai-world .sw-copy[style*="#f5a623"] .sw-copy__tags li {
	color: var(--accent);
	background: rgba(245, 166, 35, 0.08);
	border-color: rgba(245, 166, 35, 0.45);
}

.digiai-world .sw-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	font-weight: 700;
	font-size: 0.95rem;
	border: 1px solid transparent;
}

.digiai-world .sw-btn--primary {
	background: var(--primary);
	color: var(--on-primary);
}

.digiai-world .sw-btn--ghost {
	color: var(--text);
	border-color: rgba(234, 240, 255, 0.25);
	background: rgba(19, 26, 43, 0.45);
}

/* Left scrim like the mockup's vignette, plus a soft bottom fade. */
.digiai-world .sw-copylayer::before {
	width: min(62vw, 820px);
	background:
		linear-gradient(90deg, rgba(11, 15, 26, 0.88) 0%, rgba(11, 15, 26, 0.55) 38%, rgba(11, 15, 26, 0.05) 100%);
}

.digiai-world .sw-copylayer::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 30vh;
	background: linear-gradient(180deg, transparent, rgba(11, 15, 26, 0.9));
}

.digiai-world .sw-hint {
	left: auto;
	right: var(--gutter);
	transform: none;
	flex-direction: row;
	color: var(--text-2);
}

.digiai-world .sw-route__label {
	color: var(--text);
	background: rgba(19, 26, 43, 0.85);
	border-color: rgba(234, 240, 255, 0.12);
}

.digiai-world .sw-route__dot i {
	background: rgba(234, 240, 255, 0.25);
}

/* Fade the fixed chrome once the hero is behind us. */
.digiai-world.is-done .sw-route,
.digiai-world.is-done .sw-hint,
.digiai-world.is-done .sw-copylayer {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
}

/* Everything after the hero rides above the engine's fixed layers. */
.home-after {
	position: relative;
	z-index: 70;
	background: var(--bg);
	padding-top: var(--sp-8);
	padding-bottom: var(--sp-4);
	box-shadow: 0 -40px 80px rgba(11, 15, 26, 0.9);
}

.is-front .site-footer {
	position: relative;
	z-index: 70;
}

.is-front .site-main {
	padding-bottom: 0;
}

.section--first {
	margin-top: 0;
}

.section {
	margin-top: var(--sp-8);
}

@media (min-width: 1024px) {
	.grid--cards-4 {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sp-5);
	}

	.section {
		margin-top: 6.875rem; /* 110px, as in the mockup */
	}

	.home-after {
		padding-top: 6.875rem;
	}
}

.panel--wide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	padding: var(--sp-6);
	border-style: dashed;
	border-color: rgba(234, 240, 255, 0.15);
}

.panel__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-lg);
	color: var(--text);
}

@media (max-width: 640px) {
	.panel--wide {
		flex-direction: column;
		align-items: flex-start;
	}

	.digiai-world .sw-copy {
		width: auto;
	}
}

@media (max-width: 860px) {
	/* The route rail collides with bottom-anchored copy on phones. */
	.digiai-world .sw-route {
		display: none;
	}

	.digiai-world .sw-copylayer::before {
		width: 100%;
		height: 70%;
		top: auto;
		bottom: 0;
		background: linear-gradient(0deg, rgba(11, 15, 26, 0.95) 10%, rgba(11, 15, 26, 0.6) 50%, transparent 100%);
	}

	.digiai-world .sw-copylayer::after {
		display: none;
	}
}

/* 10. Hero v2 "Layers of Reality": stills mode -------------------------------
   hero.js writes --dg-op (crossfade) and --dg-push (scale 1.00 to 1.12) on each
   scene. !important is deliberate: the engine sets opacity, z-index and transform
   as inline styles, and these rules have to win over them. */
.digiai-world.is-stills .sw-scene {
	opacity: var(--dg-op, 0) !important;
	z-index: var(--dg-z, 100) !important;
}

.digiai-world.is-stills .sw-scene__still {
	transform: scale(var(--dg-push, 1)) !important;
	transform-origin: var(--dg-ox, 50%) var(--dg-oy, 50%);
	object-position: var(--dg-px, 50%) var(--dg-py, 50%);
	will-change: transform;
	backface-visibility: hidden;
}

/* A still with no source yet (held back until the visitor is near) must not show
   the browser's broken-image outline. */
.digiai-world .sw-scene__still:not([src]) {
	visibility: hidden;
}

/* The poster matches scene 01's framing exactly so the handoff is invisible. */
.digiai-world__poster {
	object-position: 50% 15%;
}

/* Desktop copy: inside the left two-thirds, upper-middle. */
@media (min-width: 861px) {
	.digiai-world .sw-copy {
		top: 27vh;
		width: min(56vw, 640px);
	}

	/* Scene 01: top-left. The jellyfish owns the top right, the planet arc the bottom. */
	.digiai-world .sw-copy:first-child {
		top: calc(var(--header-h) + 7vh);
		width: min(52vw, 600px);
	}

	.digiai-world .sw-copy:first-child .sw-copy__title {
		font-size: clamp(2.4rem, 5vw, 4.25rem);
	}

	/* Let the planet arc and the core read: a lighter, shorter bottom fade. */
	.digiai-world .sw-copylayer::after {
		height: 16vh;
		background: linear-gradient(180deg, transparent, rgba(11, 15, 26, 0.7));
	}

	/* Busy, bright layers need a firmer left scrim than deep space does. */
	.digiai-world .sw-copylayer::before {
		width: min(70vw, 980px);
		background: linear-gradient(90deg, rgba(11, 15, 26, 0.9) 0%, rgba(11, 15, 26, 0.72) 34%, rgba(11, 15, 26, 0.28) 68%, rgba(11, 15, 26, 0) 100%);
	}
}

/* Portrait screens use the pre-cropped portrait files: centre them, zoom toward the
   upper middle where the subject sits. */
@media (max-aspect-ratio: 85/100) {
	.digiai-world.is-stills .sw-scene__still {
		object-position: 50% 50%;
		transform-origin: 50% 40%;
	}

	.digiai-world__poster {
		object-position: 50% 50%;
	}
}

@media (max-width: 860px) {
	/* Keep the subject clear: the scrim only covers the lower part where the copy sits. */
	.digiai-world .sw-copylayer::before {
		height: 62%;
		background: linear-gradient(0deg, rgba(11, 15, 26, 0.96) 0%, rgba(11, 15, 26, 0.82) 45%, rgba(11, 15, 26, 0) 100%);
	}

	.digiai-world .sw-copy__title,
	.digiai-world .sw-copy:not(:first-child) .sw-copy__title {
		font-size: clamp(1.9rem, 8vw, 2.6rem);
	}

	.digiai-world .sw-copy__num {
		display: none;
	}
}

/* The sticky header sits on top of the fixed stage and was hiding the top of the
   jellyfish bell. Start the scenes (and the matching poster) below the header. */
.digiai-world .sw-stage,
.digiai-world__poster {
	top: var(--header-h);
	height: calc(100% - var(--header-h));
}

.digiai-world .sw-stage {
	bottom: 0;
}

@media (min-width: 861px) {
	.digiai-world .sw-copylayer::before {
		background: linear-gradient(90deg, rgba(11, 15, 26, 0.92) 0%, rgba(11, 15, 26, 0.78) 34%, rgba(11, 15, 26, 0.4) 66%, rgba(11, 15, 26, 0) 100%);
	}
}

/* The engine sets overflow-x: hidden on html and body, which turns them into scroll
   containers and breaks the sticky header. "clip" hides overflow without doing that. */
html,
body {
	overflow-x: clip;
}

/* Metric-matched fallback for Inter: text set in Arial takes the same space as Inter,
   so nothing moves when the real font arrives (no layout shift on font swap). */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107.4%;
	ascent-override: 90.2%;
	descent-override: 22.48%;
	line-gap-override: 0%;
}

/* 12. Footer v2 and header account label (specs/home-content-v1.md) ---------------
   Copied from the approved mock-up, mapped to our tokens. Site-wide. */
.footer-v2 {
	position: relative;
	z-index: 5;
	padding: 57px clamp(24px, 5.55vw, 96px) 27px;
	border-top: 1px solid rgba(138, 148, 176, 0.18);
	background: var(--bg);
	color: var(--text-2);
	font-size: inherit;
}

.is-front .footer-v2 {
	z-index: 70; /* rides over the hero's fixed layers */
}

.footer-v2 .footer-inner {
	max-width: 1608px;
	margin: auto;
}

.footer-v2 .footer-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 45px;
	padding-bottom: 48px;
}

.footer-v2 .footer-about p {
	max-width: 295px;
	margin: 15px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--text-2);
}

.footer-v2 .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: 7px;
	font-size: 12px;
	color: var(--text-2);
}

.footer-v2 .footer-links a {
	color: inherit;
	text-decoration: none;
}

.footer-v2 .footer-links a:hover {
	color: var(--primary);
}

.footer-v2 .is-disabled {
	color: var(--text-2);   /* 6.5:1 on the footer background; opacity 0.6 fell to 3:1 */
	cursor: default;
}

.footer-v2 .socials {
	display: flex;
	gap: 15px;
}

.footer-v2 .socials a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(138, 148, 176, 0.18);
	border-radius: 50%;
	color: var(--text-2);
}

.footer-v2 .socials a:hover {
	color: var(--text);
	border-color: var(--text-2);
}

.footer-v2 svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer-v2 .footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding-top: 23px;
	border-top: 1px solid rgba(138, 148, 176, 0.18);
	font-size: 11px;
	color: var(--text-2);
}

.footer-v2 .footer-bottom a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: inherit;
	text-decoration: none;
}

.footer-v2 .footer-bottom a:hover {
	color: var(--text);
}

.footer-v2 .footer-bottom svg {
	width: 13px;
	height: 13px;
}

@media (max-width: 1100px) {
	.footer-v2 .footer-main {
		flex-wrap: wrap;
	}

	.footer-v2 .footer-links {
		gap: 20px;
	}
}

@media (max-width: 760px) {
	.footer-v2 {
		padding: 44px 24px 24px;
	}

	.footer-v2 .footer-main {
		flex-direction: column;
		gap: 28px;
		padding-bottom: 32px;
	}

	.footer-v2 .footer-links {
		gap: 14px 20px;
		padding-top: 0;
	}

	.footer-v2 .footer-bottom {
		gap: 10px 16px;
	}
}

/* Header account state: "Log in" + "Join free" for visitors, first name for members. */
.site-nav__account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 18px;
	border: 1px solid rgba(138, 148, 176, 0.18);
	border-radius: 6px;
	background: rgba(19, 26, 43, 0.55);
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}

.site-nav__account:hover {
	border-color: rgba(34, 211, 238, 0.5);
	background: rgba(34, 211, 238, 0.1);
	text-decoration: none;
}

.site-nav__account svg {
	width: 16px;
	height: 16px;
	color: var(--primary);
}

.site-nav__login {
	margin-right: 4px;
	color: var(--text-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.site-nav__login:hover {
	color: var(--text);
	text-decoration: none;
}

.paywall__unlock {
	display: inline-block;
}

/* 14. Paywall (news-site pattern): teaser, fading lines, card over the fade ------- */
.paywall {
	position: relative;
	margin-top: var(--sp-4);
}

.paywall__fade {
	max-height: 140px;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}

.paywall__fade p {
	margin: 0;
}

.paywall__fade--code .copyblock__text {
	margin: 0;
	white-space: pre-wrap;
}

.paywall__card {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: -72px auto 0;
	padding: var(--sp-6) var(--sp-5);
	text-align: center;
	border: 1px solid rgba(34, 211, 238, 0.35);
	border-radius: var(--radius-lg);
	background: radial-gradient(120% 140% at 50% 0%, rgba(34, 211, 238, 0.22), transparent 60%), var(--bg-2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.paywall__fade + .paywall__card--small {
	margin-top: -28px;
}

.paywall__fade--code {
	max-height: 96px;
}

.paywall__card:first-child {
	margin-top: 0;
}

.paywall__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--sp-3);
	font-size: 12px;
	font-weight: 550;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--primary);
}

.paywall__eyebrow::before,
.paywall__eyebrow::after {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--primary);
}

.paywall__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
}

.paywall__card--small .paywall__title {
	font-size: var(--fs-lg);
}

.paywall .button {
	text-decoration: none;
}

.paywall__text {
	max-width: 40ch;
	margin: 0 auto var(--sp-4);
	color: var(--text-2);
}

.paywall__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.paywall__login {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-sm);
	color: var(--text-2);
}

.paywall__login a {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.paywall__login a:hover {
	color: var(--primary);
}

@media (max-width: 640px) {
	.paywall__card {
		margin-top: -48px;
		padding: var(--sp-5) var(--sp-4);
	}

	.paywall__actions {
		flex-direction: column;
	}

	.paywall__actions .button {
		width: 100%;
	}
}

/* Footer legal links (Privacy, Terms) */
/* Copyright, Privacy and Terms in one row; the row may wrap on a phone, the two links never split. */
.footer-bottom .footer-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
}

.footer-bottom .footer-legal-links {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
}

.footer-bottom .footer-legal {
	display: inline-block;
	padding: 6px 0;   /* 24 px tap target */
	color: var(--text-2);
	text-decoration: none;
}

.footer-bottom .footer-legal:hover {
	color: var(--text);
}

/* One-time message above an article (a checkout that could not start). Same look as on the
   member pages, where members.css styles it. */
.member-flash {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid rgba(138, 148, 176, 0.3);
	border-left-width: 3px;
	border-radius: 6px;
	background: rgba(11, 15, 26, 0.5);
	font-size: 14px;
}

.member-flash--error {
	border-left-color: var(--accent);
}

.member-flash--ok {
	border-left-color: var(--ok, #34d399);
}

/* Lesson resource files (digiai-core resources.php): one block per lesson, links go through the
   access check, so the list can sit in a paid body without giving the files away. */
.lesson-resources {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--primary-soft);
	font-size: var(--fs-sm);
	line-height: 1.7;
}
.lesson-resources strong { display: block; margin-bottom: 0.25rem; color: var(--text); }
.lesson-resources a { font-weight: 600; }
.lesson-resources small { opacity: 0.75; margin-left: 0.3rem; }