/* ==========================================================================
   Serendib — design tokens and layout
   Palette is drawn from the island itself: deep jade (tea and ocean), warm
   saffron (temple and spice), sand, and a near-black ink.
   ========================================================================== */

:root {
	/* Brand */
	--sd-jade: #0d6f68;
	--sd-jade-deep: #084a46;
	--sd-jade-soft: #e3f2ef;
	--sd-saffron: #e8912f;
	--sd-saffron-soft: #fdf1e0;
	--sd-clay: #b4472f;

	/* Surfaces */
	--sd-ink: #10211f;
	--sd-body: #35504c;
	--sd-muted: #55706c;
	/* Always dark, in both themes: backgrounds that invert the content. */
	--sd-deep: #0c1c1a;
	--sd-on-deep: #cfe4df;
	--sd-on-deep-dim: #93b3ad;
	--sd-line: #dde7e4;
	--sd-surface: #ffffff;
	--sd-raised: #f6faf8;
	--sd-sand: #faf6ef;
	--sd-bg: #fdfdfb;

	/* Typography — fluid, so headings scale without breakpoints */
	--sd-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--sd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sd-step--1: clamp(.82rem, .79rem + .14vw, .9rem);
	--sd-step-0: clamp(1rem, .96rem + .2vw, 1.12rem);
	--sd-step-1: clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
	--sd-step-2: clamp(1.45rem, 1.3rem + .75vw, 1.95rem);
	--sd-step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.8rem);
	--sd-step-4: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
	--sd-step-5: clamp(2.6rem, 1.5rem + 5.2vw, 6rem);

	/* Space and shape */
	--sd-gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
	--sd-wrap: 1280px;
	--sd-wrap-narrow: 760px;
	--sd-section: clamp(3.5rem, 2rem + 7vw, 7.5rem);
	--sd-radius: 18px;
	--sd-radius-lg: 28px;
	--sd-radius-pill: 999px;

	--sd-shadow-sm: 0 1px 2px rgba(10, 35, 32, .06), 0 2px 8px rgba(10, 35, 32, .05);
	--sd-shadow: 0 2px 6px rgba(10, 35, 32, .06), 0 12px 32px rgba(10, 35, 32, .09);
	--sd-shadow-lg: 0 8px 20px rgba(10, 35, 32, .10), 0 28px 70px rgba(10, 35, 32, .16);

	--sd-ease: cubic-bezier(.22, 1, .36, 1);
	--sd-dur: .5s;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-sd-theme="light"]) {
		--sd-jade: #3fb3a6;
		--sd-jade-deep: #8fd8cc;
		--sd-jade-soft: #11322f;
		--sd-saffron: #f5ab52;
		--sd-saffron-soft: #33240f;
		--sd-clay: #e27357;

		--sd-ink: #f2f7f5;
		--sd-body: #c2d4d0;
		--sd-muted: #9ab4af;
		--sd-line: #24403c;
		--sd-surface: #11211f;
		--sd-raised: #162926;
		--sd-sand: #14201e;
		--sd-bg: #0b1716;

		--sd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--sd-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
		--sd-shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 28px 70px rgba(0, 0, 0, .55);
	}
}

:root[data-sd-theme="dark"] {
	--sd-jade: #3fb3a6;
	--sd-jade-deep: #8fd8cc;
	--sd-jade-soft: #11322f;
	--sd-saffron: #f5ab52;
	--sd-saffron-soft: #33240f;
	--sd-clay: #e27357;
	--sd-ink: #f2f7f5;
	--sd-body: #c2d4d0;
	--sd-muted: #9ab4af;
	--sd-line: #24403c;
	--sd-surface: #11211f;
	--sd-raised: #162926;
	--sd-sand: #14201e;
	--sd-bg: #0b1716;
	--sd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--sd-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
	--sd-shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 28px 70px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- 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; } }

body {
	margin: 0;
	background: var(--sd-bg);
	color: var(--sd-body);
	font-family: var(--sd-font-body);
	font-size: var(--sd-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sd-font-display);
	color: var(--sd-ink);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	font-weight: 600;
	text-wrap: balance;
}
h1 { font-size: var(--sd-step-4); }
h2 { font-size: var(--sd-step-3); }
h3 { font-size: var(--sd-step-2); }
h4 { font-size: var(--sd-step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sd-jade); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sd-jade-deep); }

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sd-saffron);
	outline-offset: 2px;
	border-radius: 6px;
}

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

/* ------------------------------------------------------------- layout --- */

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

.sd-section { padding-block: var(--sd-section); }
.sd-section--tight { padding-block: calc(var(--sd-section) * .6); }
.sd-section--sand { background: var(--sd-sand); }
.sd-section--ink {
	background:
		radial-gradient(90rem 50rem at 15% -10%, rgba(13, 111, 104, .55), transparent 60%),
		radial-gradient(70rem 40rem at 95% 110%, rgba(232, 145, 47, .3), transparent 60%),
		var(--sd-deep);
	color: var(--sd-on-deep);
}
.sd-section--ink h2, .sd-section--ink h3 { color: #ffffff; }
.sd-section--ink .sd-section__lede { color: var(--sd-on-deep-dim); }

/* Section heading block */
.sd-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.sd-head--center { margin-inline: auto; text-align: center; }
.sd-head--split {
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}
.sd-head--split > div { max-width: 62ch; }

.sd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6ch;
	font-size: var(--sd-step--1);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sd-jade);
	margin: 0 0 .9rem;
}
.sd-eyebrow::before {
	content: "";
	width: 1.8rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.sd-section--ink .sd-eyebrow { color: var(--sd-saffron); }

.sd-section__lede {
	font-size: var(--sd-step-1);
	color: var(--sd-muted);
	max-width: 56ch;
	margin-bottom: 0;
}

/* ------------------------------------------------------------ buttons --- */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6ch;
	min-height: 48px;
	padding: .85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--sd-radius-pill);
	font: inherit;
	font-weight: 600;
	font-size: var(--sd-step-0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--sd-ease), box-shadow .25s var(--sd-ease),
		background-color .25s var(--sd-ease), color .25s var(--sd-ease);
}
.sd-btn:hover { transform: translateY(-2px); }
.sd-btn:active { transform: translateY(0); }

.sd-btn--primary {
	background: var(--sd-jade);
	color: #fff;
	box-shadow: 0 6px 18px rgba(13, 111, 104, .32);
}
.sd-btn--primary:hover { background: var(--sd-jade-deep); color: #fff; box-shadow: 0 10px 28px rgba(13, 111, 104, .38); }
:root[data-sd-theme="dark"] .sd-btn--primary { color: #04201d; }
:root[data-sd-theme="dark"] .sd-btn--primary:hover { color: #04201d; }

.sd-btn--accent {
	background: var(--sd-saffron);
	color: #2a1a05;
	box-shadow: 0 6px 18px rgba(232, 145, 47, .35);
}
.sd-btn--accent:hover { background: #d07e1f; color: #2a1a05; }

.sd-btn--ghost {
	background: transparent;
	color: var(--sd-ink);
	border-color: var(--sd-line);
}
.sd-btn--ghost:hover { border-color: var(--sd-jade); color: var(--sd-jade); }

.sd-btn--on-dark {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
	backdrop-filter: blur(8px);
}
.sd-btn--on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.sd-btn--lg { min-height: 56px; padding: 1.05rem 2.1rem; font-size: var(--sd-step-1); }

.sd-btns { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --------------------------------------------------------------- hero --- */

.sd-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(560px, 86svh, 920px);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: var(--sd-ink);
	perspective: 1200px;
}
.sd-hero__canvas,
.sd-hero__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}
.sd-hero__fallback { object-fit: cover; }
.sd-hero__canvas { display: block; }
.sd-hero canvas { display: block; width: 100%; height: 100%; }

/* The canvas is decorative; the text below it carries the meaning. */
.sd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(6, 22, 20, .92) 0%, rgba(6, 22, 20, .55) 32%, rgba(6, 22, 20, .12) 62%, rgba(6, 22, 20, .3) 100%);
}

.sd-hero__inner {
	position: relative;
	padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 5vw, 5rem);
	color: #fff;
	max-width: 46rem;
}
.sd-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7ch;
	padding: .45rem 1rem;
	border-radius: var(--sd-radius-pill);
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(10px);
	font-size: var(--sd-step--1);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.4rem;
}
.sd-hero__title {
	font-size: var(--sd-step-5);
	color: #fff;
	margin-bottom: .45em;
	letter-spacing: -.03em;
}
.sd-hero__title em {
	font-style: italic;
	color: var(--sd-saffron);
}
.sd-hero__lede {
	font-size: var(--sd-step-1);
	color: rgba(255, 255, 255, .88);
	max-width: 38ch;
	margin-bottom: 2rem;
}

/* Stat strip under the hero copy */
.sd-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.2rem, .5rem + 2.5vw, 3rem);
	margin-top: 2.6rem;
	padding-top: 1.8rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
}
.sd-stat__value {
	display: block;
	font-family: var(--sd-font-display);
	font-size: var(--sd-step-2);
	color: #fff;
	line-height: 1;
}
.sd-stat__label {
	display: block;
	font-size: var(--sd-step--1);
	color: rgba(255, 255, 255, .72);
	margin-top: .35rem;
}

.sd-hero__hint {
	position: absolute;
	right: var(--sd-gutter);
	bottom: 1.6rem;
	display: inline-flex;
	align-items: center;
	gap: .6ch;
	font-size: var(--sd-step--1);
	color: rgba(255, 255, 255, .7);
	pointer-events: none;
}
@media (max-width: 860px) { .sd-hero__hint { display: none; } }

/* ---------------------------------------------------------- cards 3D --- */

/* Depth on hover: a small tilt plus a lift. Pointer-only, and only when the
   visitor has not asked for reduced motion. */
.sd-tilt { transform-style: preserve-3d; will-change: transform; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sd-tilt {
		transition: transform .45s var(--sd-ease), box-shadow .45s var(--sd-ease);
	}
	.sd-tilt:hover { box-shadow: var(--sd-shadow-lg); }
	.sd-tilt__layer { transform: translateZ(28px); transition: transform .45s var(--sd-ease); }
}

/* Feature card used across the front page */
.sd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-lg);
	overflow: hidden;
	box-shadow: var(--sd-shadow-sm);
	transition: box-shadow .35s var(--sd-ease), border-color .35s var(--sd-ease);
	height: 100%;
}
.sd-card:hover { box-shadow: var(--sd-shadow); border-color: transparent; }
.sd-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sd-jade-soft);
}
.sd-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s var(--sd-ease);
}
.sd-card:hover .sd-card__media img { transform: scale(1.06); }
.sd-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.sd-card__title { font-size: var(--sd-step-1); margin: 0; }
.sd-card__title a { color: inherit; text-decoration: none; }
.sd-card__title a::after { content: ""; position: absolute; inset: 0; }
.sd-card__meta { font-size: var(--sd-step--1); color: var(--sd-muted); margin: 0; }
.sd-card__text { color: var(--sd-body); margin: 0; font-size: var(--sd-step-0); }
.sd-card__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.sd-badge {
	display: inline-flex;
	align-items: center;
	padding: .3rem .75rem;
	border-radius: var(--sd-radius-pill);
	background: var(--sd-saffron-soft);
	color: #8a5110;
	font-size: var(--sd-step--1);
	font-weight: 600;
}
:root[data-sd-theme="dark"] .sd-badge { color: var(--sd-saffron); }

/* ---------------------------------------------------------- the grid --- */

.sd-grid {
	display: grid;
	gap: clamp(1.1rem, .6rem + 1.6vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.sd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.sd-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* Editorial split: image one side, copy the other */
.sd-split {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.sd-split { grid-template-columns: 1.05fr .95fr; }
	.sd-split--flip > :first-child { order: 2; }
}
.sd-split__media {
	position: relative;
	border-radius: var(--sd-radius-lg);
	overflow: hidden;
	box-shadow: var(--sd-shadow);
	aspect-ratio: 4 / 3;
}
.sd-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Numbered steps */
.sd-steps { counter-reset: sd-step; display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .sd-steps { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.sd-step {
	counter-increment: sd-step;
	position: relative;
	padding: 2.2rem 1.6rem 1.7rem;
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
}
.sd-step::before {
	content: counter(sd-step);
	position: absolute;
	top: -1.1rem;
	left: 1.6rem;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sd-jade);
	color: #fff;
	font-family: var(--sd-font-display);
	font-size: 1.1rem;
	box-shadow: 0 6px 16px rgba(13, 111, 104, .3);
}
.sd-step h3 { font-size: var(--sd-step-1); margin-bottom: .35em; }
.sd-step p { color: var(--sd-muted); margin: 0; font-size: var(--sd-step-0); }

/* -------------------------------------------------------- the plugin --- */

/* The plugin paints its own UI; this keeps it in the theme's rhythm. */
.sd-plugin { margin-block: 0; }
.sd-plugin .tep { --tep-radius: var(--sd-radius); }
.sd-plugin--panel {
	background: var(--sd-surface);
	/* The panel is a light card even on an inverted section, so reset the text
	   colour it would otherwise inherit from that section. */
	color: var(--sd-body);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-lg);
	padding: clamp(1.2rem, .6rem + 2vw, 2.5rem);
	box-shadow: var(--sd-shadow-sm);
}
/* Beats .sd-section--ink's white headings: the panel is a light card. */
.sd-section--ink .sd-plugin--panel :is(h1, h2, h3, h4, h5, h6),
.sd-plugin--panel :is(h1, h2, h3, h4, h5, h6) { color: var(--sd-ink); }
.sd-section--ink .sd-plugin--panel { color: var(--sd-body); }

/* Said plainly when the plugin is not active — never faked. */
.sd-notice {
	display: grid;
	gap: .6rem;
	padding: 1.4rem 1.6rem;
	border: 1px dashed var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-raised);
	color: var(--sd-muted);
}
.sd-notice strong { color: var(--sd-ink); font-weight: 600; }
.sd-notice code {
	font-size: .9em;
	background: var(--sd-jade-soft);
	color: var(--sd-jade-deep);
	padding: .15em .45em;
	border-radius: 5px;
}

/* ------------------------------------------------------------- header --- */

.sd-header {
	position: sticky;
	top: 0;
	z-index: 90;
	/* Over the hero, not above it, so the artwork starts at the very top. */
}
body.sd-has-hero .sd-header {
	position: fixed;
	inset: 0 0 auto;
}
body.sd-has-hero .sd-main { padding-top: 0; }
.sd-header {
	transition: background-color .35s var(--sd-ease), box-shadow .35s var(--sd-ease),
		border-color .35s var(--sd-ease);
	border-bottom: 1px solid transparent;
}
.sd-header__inner {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	min-height: 72px;
	padding-block: .6rem;
}
.sd-header.is-stuck,
body:not(.sd-has-hero) .sd-header {
	background: color-mix(in srgb, var(--sd-bg) 86%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--sd-line);
}
body.sd-has-hero .sd-header:not(.is-stuck) { color: #fff; }
body.sd-has-hero .sd-header:not(.is-stuck) .sd-brand__name,
body.sd-has-hero .sd-header:not(.is-stuck) .sd-nav a,
body.sd-has-hero .sd-header:not(.is-stuck) .sd-icon-btn { color: #fff; }
body.sd-has-hero .sd-header:not(.is-stuck) .sd-icon-btn { border-color: rgba(255,255,255,.3); }

/* Header items keep their own shape: a squeezed row should never break a brand
   name or a menu label over two lines. */
.sd-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; flex: none; }
.sd-brand__mark { width: 38px; height: 38px; flex: none; }
.sd-brand__name {
	font-family: var(--sd-font-display);
	font-size: 1.22rem;
	font-weight: 600;
	color: var(--sd-ink);
	letter-spacing: -.02em;
	line-height: 1.1;
	white-space: nowrap;
}
.sd-brand__tag { display: block; font-family: var(--sd-font-body); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sd-muted); }
body.sd-has-hero .sd-header:not(.is-stuck) .sd-brand__tag { color: rgba(255,255,255,.75); }

.sd-nav { flex: none; }
.sd-nav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.sd-nav a {
	display: inline-block;
	padding: .55rem .85rem;
	border-radius: var(--sd-radius-pill);
	color: var(--sd-body);
	text-decoration: none;
	font-weight: 500;
	font-size: .98rem;
	white-space: nowrap;
	transition: background-color .25s var(--sd-ease), color .25s var(--sd-ease);
}
.sd-nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sd-nav .current-menu-item > a { color: var(--sd-jade); font-weight: 600; }
body.sd-has-hero .sd-header:not(.is-stuck) .sd-nav .current-menu-item > a { color: var(--sd-saffron); }
.sd-nav ul ul {
	position: absolute;
	flex-direction: column;
	gap: 0;
	min-width: 13rem;
	padding: .45rem;
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.sd-nav li { position: relative; }
.sd-nav li:hover > ul, .sd-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.sd-nav ul ul a { color: var(--sd-body); width: 100%; }

.sd-header__actions { display: flex; align-items: center; gap: .5rem; }
.sd-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sd-line);
	background: transparent;
	color: var(--sd-ink);
	cursor: pointer;
	transition: background-color .25s var(--sd-ease), border-color .25s var(--sd-ease);
}
.sd-icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sd-icon-btn svg { width: 20px; height: 20px; }
.sd-icon-btn .sd-icon-moon { display: none; }
:root[data-sd-theme="dark"] .sd-icon-btn .sd-icon-moon { display: block; }
:root[data-sd-theme="dark"] .sd-icon-btn .sd-icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-sd-theme="light"]) .sd-icon-btn .sd-icon-moon { display: block; }
	:root:not([data-sd-theme="light"]) .sd-icon-btn .sd-icon-sun { display: none; }
}

/* A six-item menu plus the brand, the theme toggle and the call to action
   needs about 1100px before the items start compressing and breaking their
   labels over two lines. Below that the menu goes into the drawer instead. */
.sd-burger { display: none; }
@media (max-width: 1100px) {
	.sd-burger { display: grid; }
	.sd-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(22rem, 86vw);
		padding: 5.5rem 1.4rem 2rem;
		background: var(--sd-surface);
		box-shadow: var(--sd-shadow-lg);
		transform: translateX(100%);
		transition: transform .4s var(--sd-ease);
		overflow-y: auto;
		z-index: 95;
	}
	.sd-nav[data-open="true"] { transform: translateX(0); }
	.sd-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
	.sd-nav a { padding: .8rem 1rem; color: var(--sd-body) !important; }
	.sd-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--sd-line);
		border-radius: 0; margin-left: 1rem; padding-left: .3rem;
	}
	.sd-scrim {
		position: fixed; inset: 0; background: rgba(8, 24, 22, .5);
		backdrop-filter: blur(2px); z-index: 94; border: 0;
	}
}

/* ------------------------------------------------------------- footer --- */

.sd-footer {
	background: var(--sd-deep);
	color: var(--sd-on-deep);
	padding-block: var(--sd-section) 2rem;
	margin-top: 0;
}
.sd-footer a { color: #e8f4f0; text-decoration: none; }
.sd-footer a:hover { color: var(--sd-saffron); text-decoration: underline; }
.sd-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sd-footer__grid > div:first-child { grid-column: span 1; max-width: 26rem; }
@media (min-width: 900px) { .sd-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.sd-footer h2, .sd-footer h3 { font-family: var(--sd-font-body); font-size: var(--sd-step--1); letter-spacing: .14em; text-transform: uppercase; color: #a8c8c2; margin-bottom: 1rem; }
.sd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sd-footer .sd-brand__name { color: #ffffff; }
.sd-footer .sd-brand__tag { color: var(--sd-on-deep-dim); }
.sd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.8rem;
	font-size: var(--sd-step--1);
	color: var(--sd-on-deep-dim);
}

/* ------------------------------------------------------------ content --- */

.sd-page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--sd-section); }
.sd-page__header { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sd-page__title { margin-bottom: .3em; }
.sd-page__meta { color: var(--sd-muted); font-size: var(--sd-step--1); }

.sd-prose { max-width: 70ch; }
/* On an app page the plugin lays out its own width. */
.sd-prose--full { max-width: none; }
.sd-prose > * + * { margin-top: 1.1em; }
.sd-prose h2 { margin-top: 1.8em; }
.sd-prose h3 { margin-top: 1.5em; }
.sd-prose img, .sd-prose figure { border-radius: var(--sd-radius); overflow: hidden; }
.sd-prose blockquote {
	margin: 1.8em 0;
	padding: .2em 0 .2em 1.6rem;
	border-left: 3px solid var(--sd-saffron);
	font-family: var(--sd-font-display);
	font-size: var(--sd-step-1);
	color: var(--sd-ink);
	font-style: italic;
}
.sd-prose ul, .sd-prose ol { padding-left: 1.3rem; }
.sd-prose li + li { margin-top: .4em; }
.sd-prose code {
	background: var(--sd-raised); padding: .15em .4em; border-radius: 5px;
	font-size: .92em;
}
.sd-prose pre {
	background: var(--sd-ink); color: #dff0ec; padding: 1.2rem;
	border-radius: var(--sd-radius); overflow-x: auto;
}
.sd-prose table { width: 100%; border-collapse: collapse; }
.sd-prose th, .sd-prose td { border-bottom: 1px solid var(--sd-line); padding: .7rem .5rem; text-align: left; }

.sd-pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 3rem; }
.sd-pagination .page-numbers {
	display: grid; place-items: center; min-width: 44px; min-height: 44px;
	padding: 0 .7rem; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-pill);
	text-decoration: none; color: var(--sd-body);
}
.sd-pagination .page-numbers.current { background: var(--sd-jade); color: #fff; border-color: transparent; }

/* --------------------------------------------------------- utilities --- */

.sd-marquee {
	display: flex;
	gap: 2.5rem;
	align-items: center;
	overflow: hidden;
	padding-block: 1.2rem;
	border-block: 1px solid var(--sd-line);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sd-marquee__track {
	display: flex;
	gap: 2.5rem;
	align-items: center;
	flex: none;
	animation: sd-slide 42s linear infinite;
}
.sd-marquee span {
	font-family: var(--sd-font-display);
	font-size: var(--sd-step-2);
	color: var(--sd-muted);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
}
.sd-marquee span::after { content: "✦"; color: var(--sd-saffron); font-size: .6em; }
@keyframes sd-slide { to { transform: translateX(-50%); } }

/* Scroll-reveal: starts hidden only when JS is present and motion is welcome */
.js .sd-reveal { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: no-preference) {
	.js .sd-reveal { transition: opacity .75s var(--sd-ease), transform .75s var(--sd-ease); }
}
.js .sd-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .sd-reveal { opacity: 1; transform: none; }
	.sd-marquee__track { animation: none; }
}

/* Print: drop the furniture, keep the words. */
@media print {
	.sd-header, .sd-footer, .sd-hero__canvas, .sd-hero__hint, .sd-marquee { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ------------------------------------------------------- hero extras --- */

/* The still artwork fades out once WebGL has drawn its first frame. */
.sd-hero__fallback { transition: opacity .9s var(--sd-ease); }
.sd-hero--live .sd-hero__fallback { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.sd-hero__fallback { transition: none; }
	.sd-hero--live .sd-hero__fallback { opacity: 1; }
}

/* Destination list under the hero copy. Real links, always present. */
/* --------------------------------------------- markers and the card --- */

/* Markers are positioned in JavaScript from where each destination actually is
   on the island, so they only carry their own appearance here. */
.sd-hero__markers {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
.sd-marker {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: .3rem .7rem .3rem .35rem;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--sd-radius-pill);
	background: rgba(10, 28, 26, .62);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 500 var(--sd-step--1) / 1 var(--sd-font-body);
	white-space: nowrap;
	cursor: pointer;
	pointer-events: auto;
	/* Pin the marker to the place rather than its own top-left corner. */
	translate: -50% -100%;
	transition: background-color .2s var(--sd-ease), border-color .2s var(--sd-ease);
}
.sd-marker__dot {
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--sd-saffron);
	box-shadow: 0 0 0 3px rgba(232, 145, 47, .3);
}
.sd-marker:hover,
.sd-marker.is-selected {
	background: var(--sd-saffron);
	border-color: var(--sd-saffron);
	color: #1a1208;
}
.sd-marker:hover .sd-marker__dot,
.sd-marker.is-selected .sd-marker__dot {
	background: #1a1208;
	box-shadow: 0 0 0 3px rgba(26, 18, 8, .22);
}
/* Too crowded for a name: keep the dot, drop the label. Hovering brings the
   name back, so nothing becomes unreachable. */
.sd-marker.is-bare {
	padding: .35rem;
	border-radius: 50%;
}
.sd-marker.is-bare .sd-marker__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sd-marker.is-bare:hover,
.sd-marker.is-bare:focus-visible {
	padding: .3rem .7rem .3rem .35rem;
	border-radius: var(--sd-radius-pill);
	z-index: 400;
}
.sd-marker.is-bare:hover .sd-marker__label,
.sd-marker.is-bare:focus-visible .sd-marker__label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}

.sd-hero__card {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 5;
	width: min(23rem, calc(100% - 2rem));
	overflow: hidden;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-lg);
	background: var(--sd-surface);
	color: var(--sd-body);
	box-shadow: var(--sd-shadow-lg);
}
.sd-hero__card[hidden] { display: none; }
/* The drag hint sits in the same corner as the card. */
.sd-hero.is-picking .sd-hero__hint { opacity: 0; }
.sd-hero-card__img {
	display: block;
	width: 100%;
	height: 8.5rem;
	object-fit: cover;
}
.sd-hero-card__close {
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 28, 26, .6);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.sd-hero-card__close:hover { background: rgba(10, 28, 26, .85); }
.sd-hero-card__body { padding: 1.1rem 1.2rem 1.2rem; }
.sd-hero-card__region {
	margin: 0 0 .15rem;
	color: var(--sd-muted);
	font-size: var(--sd-step--1);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sd-hero-card__title {
	margin: 0 0 .4rem;
	font-size: var(--sd-step-1);
	line-height: 1.2;
	color: var(--sd-ink);
}
.sd-hero-card__text {
	margin: 0 0 1rem;
	font-size: var(--sd-step--1);
	color: var(--sd-body);
}
.sd-hero-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}
.sd-hero-card__actions .sd-btn { font-size: var(--sd-step--1); }
/* The card is a light panel, so a button styled for the dark hero would
   disappear on it. */
.sd-hero__card .sd-btn--on-dark {
	border-color: var(--sd-line);
	color: var(--sd-ink);
	background: transparent;
}
.sd-hero__card .sd-btn--on-dark:hover { background: var(--sd-soft); }

.sd-hero__pins a[aria-current="true"] {
	background: var(--sd-saffron);
	border-color: var(--sd-saffron);
	color: #1a1208;
}

@media (max-width: 720px) {
	.sd-hero__markers { display: none; }
	.sd-hero__card {
		right: 1rem;
		left: 1rem;
		width: auto;
	}
}

.sd-hero__pins { margin-top: 1.8rem; }
.sd-hero__pins ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.sd-hero__pins a {
	display: inline-flex;
	align-items: center;
	gap: .5ch;
	min-height: 40px;
	padding: .45rem 1rem;
	border-radius: var(--sd-radius-pill);
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(8px);
	color: #fff;
	text-decoration: none;
	font-size: var(--sd-step--1);
	font-weight: 500;
	transition: background-color .25s var(--sd-ease), border-color .25s var(--sd-ease);
}
.sd-hero__pins a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sd-saffron);
	box-shadow: 0 0 0 3px rgba(232, 145, 47, .25);
}
.sd-hero__pins a:hover,
.sd-hero__pins a:focus-visible {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

/* Stats are a definition list, so the label reads before the number. */
.sd-hero__stats { margin-block: 2.4rem 0; }
.sd-hero__stats .sd-stat { display: flex; flex-direction: column-reverse; }
.sd-hero__stats dd { margin: 0; }

/* Turn controls — the keyboard path to what dragging does. */
.sd-hero__controls {
	position: absolute;
	right: var(--sd-gutter);
	bottom: 4.2rem;
	display: flex;
	gap: .5rem;
	z-index: 2;
}
.sd-icon-btn--on-dark {
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(8px);
}
.sd-icon-btn--on-dark:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 860px) { .sd-hero__controls { display: none; } }

/* The canvas only accepts the drag gesture where it is actually visible. */
.sd-hero { touch-action: pan-y; }

/* ---------------------------------------------------------- widgets --- */

.sd-widget { margin-bottom: 2rem; }
.sd-widget__title { font-size: var(--sd-step-1); margin-bottom: .6rem; }
.sd-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.sd-table-wrap { max-width: 100%; }
.sd-table-wrap:focus-visible { outline: 3px solid var(--sd-saffron); outline-offset: 3px; }

/* ------------------------------------------------------- comments --- */

.sd-comments { margin-top: var(--sd-section); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-body {
	background: var(--sd-surface);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	padding: 1.2rem 1.4rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: .7rem 1rem;
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
	color: var(--sd-ink);
	font: inherit;
}
.comment-form textarea { min-height: 9rem; }
.comment-form .submit {
	min-height: 48px;
	padding: .85rem 1.6rem;
	border: 0;
	border-radius: var(--sd-radius-pill);
	background: var(--sd-jade);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ============================================================== dark mode ===
   The plugin paints its own components from its own custom properties. Without
   remapping them, a dark page would inherit dark-mode text colour onto the
   plugin's light surfaces and cards would be unreadable. These are the same
   tokens the plugin defines, given dark values.
   ========================================================================== */

:root[data-sd-theme="dark"],
:root[data-sd-theme="dark"] .tep {
	--tep-ink: #f2f7f5;
	--tep-surface: #152724;
	--tep-soft: #1b312d;
	--tep-line: #27443f;
	--tep-muted: #90aba6;
	--tep-accent: #3fb3a6;
	--tep-accent-ink: #04201d;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-sd-theme="light"]),
	:root:not([data-sd-theme="light"]) .tep {
		--tep-ink: #f2f7f5;
		--tep-surface: #152724;
		--tep-soft: #1b312d;
		--tep-line: #27443f;
		--tep-muted: #90aba6;
		--tep-accent: #3fb3a6;
		--tep-accent-ink: #04201d;
	}
}

/* ========================================================== layout guards === */

/* The off-canvas menu sits past the right edge when closed. Clipping here stops
   it adding to the page width, without the sticky-header side effects that
   overflow:hidden brings. */
html { overflow-x: clip; }
@supports not (overflow: clip) {
	html { overflow-x: hidden; }
}

/* ======================================================= reduced motion === */

/* Someone who has asked for less motion gets none of the theme's: no reveals,
   no tilt, no marquee, no cross-fade. Colour and focus changes stay, because
   losing those would cost more than it saves. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.sd-tilt { transform: none !important; }
	.sd-card:hover .sd-card__media img { transform: none; }
	.sd-btn:hover { transform: none; }
}

/* The plugin's badge is dark amber on a translucent amber wash — fine on a
   light card, unreadable once the card behind it goes dark. */
:root[data-sd-theme="dark"] .tep-card__badge,
:root[data-sd-theme="dark"] .tep-badge {
	background: rgba(245, 171, 82, .16);
	color: #ffc87a;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-sd-theme="light"]) .tep-card__badge,
	:root:not([data-sd-theme="light"]) .tep-badge {
		background: rgba(245, 171, 82, .16);
		color: #ffc87a;
	}
}

/* A site owner may swap in a pale hero image, so the scrim keeps enough weight
   at the top for the overlaid header to stay legible whatever sits behind it. */
body.sd-has-hero .sd-hero__scrim {
	background:
		linear-gradient(to top, rgba(6, 22, 20, .92) 0%, rgba(6, 22, 20, .55) 32%,
			rgba(6, 22, 20, .14) 58%, rgba(6, 22, 20, .52) 100%);
}

/* Plugin components placed on an inverted surface need the plugin's own tokens
   inverted too, or its cards and panels stay light-on-light. */
.sd-section--ink .tep,
.sd-footer .tep {
	--tep-ink: #f2f7f5;
	--tep-surface: #142623;
	--tep-soft: #1a2f2c;
	--tep-line: #2a4742;
	--tep-muted: #9ab4af;
	--tep-accent: #58c6b6;
	--tep-accent-ink: #04201d;
}
.sd-section--ink .tep-card__badge,
.sd-section--ink .tep-badge {
	background: rgba(245, 171, 82, .18);
	color: #ffc87a;
}
/* The builder panel keeps a light card on the dark section, so the plugin's
   own light tokens are correct inside it. */
.sd-plugin--panel .tep {
	--tep-ink: #1d2b36;
	--tep-surface: #ffffff;
	--tep-soft: #f2f5f6;
	--tep-line: #dde3e6;
	--tep-muted: #5a6872;
	--tep-accent: #0e6e73;
	/* Text that sits on the accent. The accent is dark here, so this is light;
	   it must not inherit the dark value set for inverted surfaces above. */
	--tep-accent-ink: #ffffff;
}
:root[data-sd-theme="dark"] .sd-plugin--panel,
:root[data-sd-theme="dark"] .sd-plugin--panel .tep {
	--tep-ink: #f2f7f5;
	--tep-surface: #152724;
	--tep-soft: #1b312d;
	--tep-line: #27443f;
	--tep-muted: #90aba6;
	--tep-accent: #3fb3a6;
	--tep-accent-ink: #04201d;
}