/*
 * ISLC 2026 — conference banner and page.
 *
 * Everything is scoped under .islc-root. That prefix is doing real work: this
 * markup lands inside somebody else's theme, and without it a theme's own
 * h2 or ul rules would walk straight through the layout.
 *
 * The design commits to one visual world — the brochure's purple and gold —
 * rather than following the host's light/dark scheme, so every colour is
 * declared explicitly and nothing is inherited from the page around it.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────
   Sampled from the brochure PDF: #49317d is the exact plate purple and
   #cea60a the exact gold, both taken off the printed pages rather than
   eyeballed. The neutrals are pulled toward the purple so that the light
   sections read as part of the same world and not as unstyled page.        */

.islc-root.islc-root {
	--islc-purple: #49317d;
	--islc-purple-lift: #5b3f96;
	--islc-violet: #7b3fa8;
	--islc-magenta: #9648be;
	--islc-deep: #2b1c4f;
	--islc-gold: #cea60a;
	--islc-gold-warm: #e8c455;

	--islc-paper: #ffffff;
	--islc-mist: #f4f1f8;
	--islc-ink: #1e1533;
	--islc-ink-soft: #574c6e;
	--islc-line: #e2dcec;

	--islc-on-dark: #ffffff;
	--islc-on-dark-soft: #d5c9e8;
	--islc-on-dark-line: rgba(255, 255, 255, 0.18);

	--islc-display: "Jost", "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS", sans-serif;
	--islc-body: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--islc-max: 1180px;
	--islc-gutter: clamp(1.25rem, 5vw, 4rem);
	--islc-band-y: clamp(3.25rem, 7vw, 6.5rem);
	--islc-skyfoot: clamp(66px, 11vw, 158px);

	/* Set by islc.js from the real document width, so the full-bleed sections
	   do not overshoot by the width of the scrollbar. */
	--islc-vw: 100vw;

	--islc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Scoped reset ──────────────────────────────────────────────────────── */

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

.islc-root.islc-root {
	margin: 0;
	color: var(--islc-ink);
	font-family: var(--islc-body);
	font-size: clamp(1rem, 0.955rem + 0.19vw, 1.0625rem);
	line-height: 1.62;
	font-weight: 400;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.islc-root.islc-root h1,
.islc-root.islc-root h2,
.islc-root.islc-root h3,
.islc-root.islc-root p,
.islc-root.islc-root ul,
.islc-root.islc-root ol,
.islc-root.islc-root li,
.islc-root.islc-root dl,
.islc-root.islc-root dt,
.islc-root.islc-root dd,
.islc-root.islc-root figure {
	margin: 0;
	padding: 0;
	border: 0;
}

.islc-root.islc-root ul,
.islc-root.islc-root ol {
	list-style: none;
}

.islc-root.islc-root img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.islc-root.islc-root a {
	color: inherit;
	text-decoration: none;
}

.islc-root.islc-root a:focus-visible,
.islc-root.islc-root :focus-visible {
	outline: 3px solid var(--islc-gold-warm);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── Full-bleed ─────────────────────────────────────────────────────────
   The CSS below handles the common case, where the theme centres its content
   column. islc.js measures the element instead and overrides these, which
   also covers themes with a sidebar or an off-centre column.               */

.islc-root.islc-root.islc-bleed {
	width: var(--islc-vw);
	max-width: var(--islc-vw);
	margin-left: calc(50% - var(--islc-vw) / 2);
	margin-right: calc(50% - var(--islc-vw) / 2);
}

/* ── Shared furniture ───────────────────────────────────────────────────── */

.islc-root.islc-root .islc-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--islc-max);
	margin: 0 auto;
	padding: 0 var(--islc-gutter);
}

.islc-root.islc-root .islc-band {
	position: relative;
	overflow: hidden;
	padding: var(--islc-band-y) 0;
	isolation: isolate;
}

.islc-root.islc-root .islc-band--light {
	background: var(--islc-paper);
}

.islc-root.islc-root .islc-band--mist {
	background: var(--islc-mist);
}

.islc-root.islc-root .islc-band--purple {
	background: var(--islc-purple);
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-band--deep {
	background: var(--islc-deep);
	color: var(--islc-on-dark);
}

/* The running horizon. Every purple band closes on the same line-art skyline,
   cropped at the band edge so the buildings appear to stand on the boundary
   with the section below. */
.islc-root.islc-root .islc-skyfoot {
	padding-bottom: calc(var(--islc-band-y) + var(--islc-skyfoot) * 0.62);
}

.islc-root.islc-root .islc-skyfoot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--islc-skyfoot);
	background: url("../img/skyline-wide.webp") no-repeat center top / cover;
	opacity: 0.42;
	pointer-events: none;
	z-index: 1;
}

/* Same frieze, purple ink, so the horizon carries through the light bands
   instead of stopping at every section boundary. At a tenth opacity it does
   not need the full clearance the purple bands give it — reserving that much
   white just reads as dead space. */
.islc-root.islc-root .islc-skyfoot--light {
	padding-bottom: calc(var(--islc-band-y) + var(--islc-skyfoot) * 0.24);
}

.islc-root.islc-root .islc-skyfoot--light::after {
	height: calc(var(--islc-skyfoot) * 0.8);
	background-image: url("../img/skyline-wide-ink.webp");
	opacity: 0.11;
}

/* Eyebrow: small caps label with a short gold tick in front of it. */
.islc-root.islc-root .islc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--islc-body);
	font-size: 0.775rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-eyebrow--ink {
	color: var(--islc-gold);
}

.islc-root.islc-root .islc-eyebrow__tick {
	flex: none;
	width: 26px;
	height: 2px;
	background: currentColor;
}

/* The brochure puts a short gold rule under every heading. It is the single
   most recognisable thing on the printed page, so it is carried through here
   unchanged. */
.islc-root.islc-root .islc-rule {
	display: block;
	width: 82px;
	height: 3px;
	margin: 1.1rem 0 1.6rem;
	background: var(--islc-gold);
}

.islc-root.islc-root .islc-h2 {
	font-family: var(--islc-display);
	font-size: clamp(1.85rem, 1.15rem + 2.9vw, 3rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.012em;
	text-wrap: balance;
	color: var(--islc-purple);
}

.islc-root.islc-root .islc-h2--on-dark {
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-h3 {
	font-family: var(--islc-display);
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--islc-purple);
}

.islc-root.islc-root .islc-h3--on-dark {
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-lede {
	max-width: 62ch;
	font-size: 1.075em;
	line-height: 1.68;
	color: var(--islc-on-dark-soft);
}

.islc-root.islc-root .islc-band--light .islc-lede,
.islc-root.islc-root .islc-band--mist .islc-lede {
	color: var(--islc-ink-soft);
}

.islc-root.islc-root .islc-lede--narrow {
	max-width: 54ch;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.2rem;
}

.islc-root.islc-root .islc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.95em 1.6em;
	font-family: var(--islc-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	line-height: 1;
	border: 2px solid transparent;
	transition: background-color 0.22s var(--islc-ease),
		color 0.22s var(--islc-ease), border-color 0.22s var(--islc-ease);
}

.islc-root.islc-root .islc-btn--gold {
	background: var(--islc-gold);
	color: #241736;
	border-color: var(--islc-gold);
}

.islc-root.islc-root .islc-btn--gold:hover,
.islc-root.islc-root .islc-btn--gold:focus-visible {
	background: var(--islc-gold-warm);
	border-color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-btn--ghost {
	color: var(--islc-on-dark);
	border-color: rgba(255, 255, 255, 0.4);
}

.islc-root.islc-root .islc-btn--ghost:hover,
.islc-root.islc-root .islc-btn--ghost:focus-visible {
	border-color: var(--islc-gold-warm);
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-arrow {
	width: 24px;
	height: 12px;
	flex: none;
	transition: transform 0.28s var(--islc-ease);
}

.islc-root.islc-root .islc-btn:hover .islc-arrow,
.islc-root.islc-root .islc-banner:hover .islc-arrow {
	transform: translateX(5px);
}

/* ── Badge ──────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-badge {
	width: clamp(132px, 15vw, 178px);
	height: auto;
	border-radius: 10px;
}

.islc-root.islc-root .islc-badge--lg {
	width: clamp(150px, 17vw, 206px);
	margin-bottom: 1.75rem;
}

/* ── Banner ─────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(58% 46% at 80% 16%, rgba(150, 72, 190, 0.9) 0%, rgba(150, 72, 190, 0) 64%),
		radial-gradient(50% 44% at 8% 84%, rgba(123, 63, 168, 0.75) 0%, rgba(123, 63, 168, 0) 62%),
		linear-gradient(158deg, #5b3f96 0%, #49317d 44%, #2f1f59 100%);
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-banner--compact {
	--islc-banner-pad: clamp(2rem, 4.5vw, 3rem);
}

.islc-root.islc-root .islc-banner--standard {
	--islc-banner-pad: clamp(2.5rem, 6vw, 4.25rem);
}

.islc-root.islc-root .islc-banner--tall {
	--islc-banner-pad: clamp(3.25rem, 8vw, 6rem);
}

.islc-root.islc-root .islc-banner__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--islc-max);
	margin: 0 auto;
	padding: var(--islc-banner-pad) var(--islc-gutter)
		calc(var(--islc-banner-pad) + var(--islc-skyfoot) * 0.5);
}

/* Soft bokeh, the way the brochure cover carries it. */
.islc-root.islc-root .islc-banner__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.09) 0 5.5%, transparent 6%),
		radial-gradient(circle at 26% 68%, rgba(255, 255, 255, 0.07) 0 3.4%, transparent 3.8%),
		radial-gradient(circle at 62% 14%, rgba(255, 255, 255, 0.06) 0 4.2%, transparent 4.6%),
		radial-gradient(circle at 88% 62%, rgba(255, 255, 255, 0.08) 0 6.5%, transparent 7%),
		radial-gradient(circle at 74% 88%, rgba(255, 255, 255, 0.05) 0 3%, transparent 3.4%);
}

.islc-root.islc-root .islc-banner__flag,
.islc-root.islc-root .islc-hero__flag {
	position: absolute;
	top: -2px;
	left: -2px;
	z-index: 2;
	width: clamp(140px, 22vw, 290px);
	height: auto;
	opacity: 0.92;
	pointer-events: none;
}

.islc-root.islc-root .islc-banner .islc-skyline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--islc-skyfoot);
	background: url("../img/skyline-wide.webp") no-repeat center top / cover;
	opacity: 0.4;
	pointer-events: none;
	z-index: 2;
}

.islc-root.islc-root .islc-banner .islc-eyebrow {
	margin-bottom: 1rem;
}

.islc-root.islc-root .islc-banner__theme {
	font-family: var(--islc-display);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.islc-root.islc-root .islc-banner__theme-label {
	display: block;
	font-weight: 700;
	font-size: clamp(1.6rem, 0.95rem + 2.7vw, 2.85rem);
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-banner__theme-line {
	display: block;
	max-width: 24ch;
	font-size: clamp(1.35rem, 0.9rem + 1.95vw, 2.3rem);
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-banner .islc-rule {
	margin: 1.35rem 0 1.25rem;
}

.islc-root.islc-root .islc-banner__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 1.15rem;
	font-size: 0.925rem;
	font-weight: 500;
	letter-spacing: 0.035em;
	color: var(--islc-on-dark-soft);
	font-variant-numeric: tabular-nums;
}

.islc-root.islc-root .islc-banner__meta li {
	display: flex;
	align-items: center;
	gap: 1.15rem;
}

.islc-root.islc-root .islc-banner__meta li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	background: var(--islc-gold);
	transform: rotate(45deg);
	flex: none;
}

.islc-root.islc-root .islc-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-top: 1.9rem;
	padding-bottom: 0.4em;
	font-family: var(--islc-display);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--islc-gold-warm);
	border-bottom: 2px solid rgba(232, 196, 85, 0.45);
	transition: color 0.22s var(--islc-ease), border-color 0.22s var(--islc-ease);
}

.islc-root.islc-root .islc-banner:hover .islc-banner__cta {
	color: #ffffff;
	border-bottom-color: var(--islc-gold-warm);
}

/* One tab stop, one link, and the whole banner is still the click target. */
.islc-root.islc-root .islc-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

.islc-root.islc-root .islc-banner:has(.islc-stretch:focus-visible) {
	outline: 3px solid var(--islc-gold-warm);
	outline-offset: -3px;
}

.islc-root.islc-root .islc-banner .islc-stretch:focus-visible {
	outline: none;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-band--hero {
	padding-top: clamp(3rem, 7vw, 6rem);
	background:
		radial-gradient(56% 44% at 82% 14%, rgba(150, 72, 190, 0.92) 0%, rgba(150, 72, 190, 0) 62%),
		radial-gradient(52% 46% at 6% 82%, rgba(123, 63, 168, 0.78) 0%, rgba(123, 63, 168, 0) 60%),
		linear-gradient(162deg, #5b3f96 0%, #49317d 46%, #2d1d54 100%);
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-band__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.08) 0 4.5%, transparent 5%),
		radial-gradient(circle at 30% 72%, rgba(255, 255, 255, 0.06) 0 2.8%, transparent 3.2%),
		radial-gradient(circle at 68% 12%, rgba(255, 255, 255, 0.055) 0 3.6%, transparent 4%),
		radial-gradient(circle at 90% 58%, rgba(255, 255, 255, 0.07) 0 5.5%, transparent 6%);
}

.islc-root.islc-root .islc-hero__title {
	font-family: var(--islc-display);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.018em;
	text-wrap: balance;
	margin-top: 1.1rem;
}

.islc-root.islc-root .islc-hero__label {
	display: block;
	font-weight: 700;
	font-size: clamp(2rem, 1.05rem + 4vw, 4.15rem);
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-hero__line {
	display: block;
	max-width: 24ch;
	font-size: clamp(1.5rem, 0.95rem + 2.4vw, 2.85rem);
	color: var(--islc-on-dark);
	margin-top: 0.12em;
}

.islc-root.islc-root .islc-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.6rem 2.4rem;
	max-width: 820px;
	border-top: 1px solid var(--islc-on-dark-line);
}

.islc-root.islc-root .islc-hero__meta > div {
	padding-top: 1.1rem;
}

.islc-root.islc-root .islc-hero__meta dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--islc-gold);
	margin-bottom: 0.45rem;
}

.islc-root.islc-root .islc-hero__meta dd {
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--islc-on-dark);
	font-variant-numeric: tabular-nums;
}

.islc-root.islc-root .islc-hero__address {
	font-weight: 400;
	font-size: 0.925rem;
	color: var(--islc-on-dark-soft);
}

/* ── Welcome ────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-welcome {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.islc-root.islc-root .islc-welcome__photo {
	margin-top: 2.25rem;
	max-width: 340px;
}

.islc-root.islc-root .islc-welcome__body {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	max-width: 62ch;
	color: var(--islc-ink-soft);
	font-size: 1.06em;
	line-height: 1.7;
}

/* ── Theme + topics ─────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-theme {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.islc-root.islc-root .islc-theme__topics .islc-h3 {
	margin-bottom: 1.15rem;
}

.islc-root.islc-root .islc-ticks {
	display: grid;
	gap: 0.7rem 2rem;
}

.islc-root.islc-root .islc-ticks li {
	position: relative;
	padding-left: 1.9rem;
	font-size: 0.995em;
	line-height: 1.5;
	color: var(--islc-on-dark);
}

/* A small gold lozenge instead of a bullet, echoing the brochure's list marks. */
.islc-root.islc-root .islc-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 11px;
	height: 3px;
	background: var(--islc-gold);
}

.islc-root.islc-root .islc-tile {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	width: clamp(76px, 9vw, 118px);
	height: auto;
}

.islc-root.islc-root .islc-tile--diagonal {
	top: clamp(1.5rem, 4vw, 3rem);
	right: clamp(1.5rem, 5vw, 4.5rem);
	opacity: 0.85;
}

.islc-root.islc-root .islc-tile--dots {
	top: clamp(1.5rem, 4vw, 3rem);
	right: clamp(1.5rem, 5vw, 4.5rem);
	width: clamp(96px, 12vw, 168px);
	opacity: 0.5;
}

/* ── Why attend ─────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.islc-root.islc-root .islc-split--reverse .islc-split__text {
	order: 2;
}

.islc-root.islc-root .islc-reasons {
	display: grid;
	gap: 1.5rem;
}

.islc-root.islc-root .islc-reasons li {
	padding-top: 1.15rem;
	border-top: 2px solid var(--islc-line);
	transition: border-color 0.25s var(--islc-ease);
}

.islc-root.islc-root .islc-reasons li:hover {
	border-top-color: var(--islc-gold);
}

.islc-root.islc-root .islc-reasons h3 {
	font-family: var(--islc-display);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--islc-purple);
	margin-bottom: 0.3rem;
}

.islc-root.islc-root .islc-reasons p {
	color: var(--islc-ink-soft);
	max-width: 56ch;
}

/* ── Photographs ────────────────────────────────────────────────────────── */

/* The brochure prints its photographs as tilted prints with a white border.
   The exported files already carry that border and a small rotation, so the
   only thing added here is a shadow and a fractional counter-tilt. */
.islc-root.islc-root .islc-photo {
	filter: drop-shadow(0 18px 34px rgba(29, 18, 54, 0.28));
	transition: transform 0.4s var(--islc-ease);
}

.islc-root.islc-root .islc-photo--tilt-a {
	transform: rotate(-1.25deg);
}

.islc-root.islc-root .islc-photo--tilt-b {
	transform: rotate(1.5deg);
}

.islc-root.islc-root .islc-photo:hover {
	transform: rotate(0) scale(1.015);
}

/* ── Programme ──────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-band--programme {
	background: var(--islc-purple);
}

/* The gold band down the right edge is straight off brochure page 6. */
.islc-root.islc-root .islc-goldband {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: clamp(26px, 6vw, 92px);
	background: var(--islc-gold);
	opacity: 0.92;
	z-index: 1;
	pointer-events: none;
}

.islc-root.islc-root .islc-programme {
	display: grid;
	gap: 1.5rem;
	counter-reset: islc-prog;
}

.islc-root.islc-root .islc-programme li {
	position: relative;
	padding-left: 3.1rem;
}

/* These are numbered because the programme genuinely runs in this order
   across the week — sessions, then schools, then the city, then the dinner. */
.islc-root.islc-root .islc-programme li::before {
	counter-increment: islc-prog;
	content: counter(islc-prog, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--islc-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--islc-gold);
	font-variant-numeric: tabular-nums;
}

.islc-root.islc-root .islc-programme h3 {
	font-family: var(--islc-display);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--islc-on-dark);
	margin-bottom: 0.28rem;
}

.islc-root.islc-root .islc-programme p {
	color: var(--islc-on-dark-soft);
	max-width: 54ch;
}

/* ── Who should attend ──────────────────────────────────────────────────── */

.islc-root.islc-root .islc-audience {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--islc-line);
	border: 1px solid var(--islc-line);
}

.islc-root.islc-root .islc-audience li {
	background: var(--islc-mist);
	padding: 1.6rem 1.5rem;
	font-family: var(--islc-display);
	font-size: 1.06rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--islc-purple);
	text-wrap: balance;
}

/* ── Investment ─────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: 1.15rem;
	margin-top: 2.6rem;
	align-items: stretch;
}

.islc-root.islc-root .islc-package {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.5rem 1.5rem;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--islc-on-dark-line);
	transition: background-color 0.25s var(--islc-ease),
		border-color 0.25s var(--islc-ease);
}

.islc-root.islc-root .islc-package:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(232, 196, 85, 0.55);
}

.islc-root.islc-root .islc-package--featured {
	background: rgba(206, 166, 10, 0.13);
	border-color: var(--islc-gold);
	box-shadow: 0 14px 40px rgba(19, 11, 38, 0.35);
}

.islc-root.islc-root .islc-package__flag {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-50%);
	margin-left: 1.5rem;
	padding: 0.35em 0.75em;
	background: var(--islc-gold);
	color: #241736;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.islc-root.islc-root .islc-package__name {
	font-family: var(--islc-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-package__price {
	font-family: var(--islc-display);
	font-size: clamp(2.1rem, 1.5rem + 1.9vw, 2.9rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--islc-on-dark);
	font-variant-numeric: tabular-nums;
	margin: 0.35rem 0 0.7rem;
}

.islc-root.islc-root .islc-package__summary {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--islc-on-dark-soft);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--islc-on-dark-line);
}

.islc-root.islc-root .islc-package__includes {
	display: grid;
	gap: 0.42rem;
	margin: 1.1rem 0 1.5rem;
	font-size: 0.9rem;
	color: var(--islc-on-dark);
}

.islc-root.islc-root .islc-package__includes li {
	position: relative;
	padding-left: 1.35rem;
	line-height: 1.4;
}

.islc-root.islc-root .islc-package__includes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 2px;
	background: var(--islc-gold);
}

.islc-root.islc-root .islc-package__cta {
	margin-top: auto;
	padding-top: 0.55em;
	align-self: flex-start;
	font-family: var(--islc-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--islc-gold-warm);
	border-bottom: 2px solid rgba(232, 196, 85, 0.4);
	transition: color 0.2s var(--islc-ease), border-color 0.2s var(--islc-ease);
}

.islc-root.islc-root .islc-package__cta:hover {
	color: #ffffff;
	border-bottom-color: var(--islc-gold-warm);
}

/* ── Gallery ────────────────────────────────────────────────────────────── */

/* Six photographs, three across, two rows — even. The seventh subject went to
   the welcome section, where the short heading column had room going spare. */
.islc-root.islc-root .islc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	margin-top: 2.5rem;
	align-items: center;
}

.islc-root.islc-root .islc-band--gallery .islc-photo {
	filter: drop-shadow(0 14px 26px rgba(29, 18, 54, 0.22));
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.islc-root.islc-root .islc-wash-flag {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	pointer-events: none;
}

.islc-root.islc-root .islc-contact__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.75rem 2.5rem;
	margin-top: 2.4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--islc-on-dark-line);
}

.islc-root.islc-root .islc-contact__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--islc-gold);
	margin-bottom: 0.55rem;
}

.islc-root.islc-root .islc-contact__list a {
	display: block;
	font-size: 1.04rem;
	font-weight: 500;
	color: var(--islc-on-dark);
	font-variant-numeric: tabular-nums;
	transition: color 0.18s var(--islc-ease);
}

.islc-root.islc-root .islc-contact__list a:hover {
	color: var(--islc-gold-warm);
}

.islc-root.islc-root .islc-contact__phones a + a {
	margin-top: 0.28rem;
}

.islc-root.islc-root .islc-closing {
	max-width: 52ch;
	margin-top: 2.4rem;
	font-family: var(--islc-display);
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--islc-gold-warm);
	text-wrap: balance;
}

.islc-root.islc-root .islc-organiser {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--islc-on-dark-line);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(213, 201, 232, 0.75);
}

/* ── Reveal ─────────────────────────────────────────────────────────────
   Only arms itself once the script has run, so the page is never blank for
   somebody without JavaScript.                                            */

.islc-root.islc-root.islc-js .islc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s var(--islc-ease), transform 0.75s var(--islc-ease);
}

.islc-root.islc-root.islc-js .islc-reveal.is-in {
	opacity: 1;
	transform: none;
}

.islc-root.islc-root.islc-js .islc-rule--draw {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.65s var(--islc-ease) 0.12s;
}

.islc-root.islc-root.islc-js .islc-rule--draw.is-in {
	transform: scaleX(1);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Four packages across three columns strands one on its own row. Two-by-two
   is the only even split between the four-across and one-across breakpoints. */
@media (min-width: 40.0625rem) and (max-width: 68rem) {
	.islc-root.islc-root .islc-packages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 62rem) {
	.islc-root.islc-root .islc-welcome,
	.islc-root.islc-root .islc-theme,
	.islc-root.islc-root .islc-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.islc-root.islc-root .islc-split--reverse .islc-split__text {
		order: 0;
	}

	.islc-root.islc-root .islc-ticks {
		grid-template-columns: minmax(0, 1fr);
	}

	.islc-root.islc-root .islc-goldband {
		width: 18px;
	}

	.islc-root.islc-root .islc-photo {
		max-width: 560px;
	}
}

@media (min-width: 62.0625rem) {
	.islc-root.islc-root .islc-ticks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.islc-root.islc-root .islc-hero__meta {
		grid-template-columns: 0.78fr 0.92fr 1.3fr;
	}
}

@media (max-width: 40rem) {
	.islc-root.islc-root .islc-banner__flag,
	.islc-root.islc-root .islc-hero__flag {
		width: 148px;
		opacity: 0.8;
	}

	.islc-root.islc-root .islc-banner__meta li + li::before {
		display: none;
	}

	.islc-root.islc-root .islc-banner__meta li {
		gap: 0;
	}

	.islc-root.islc-root .islc-banner__meta {
		gap: 0.3rem 1rem;
	}

	.islc-root.islc-root .islc-tile--diagonal,
	.islc-root.islc-root .islc-tile--dots {
		display: none;
	}

	.islc-root.islc-root .islc-actions .islc-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.islc-root.islc-root *,
	.islc-root.islc-root *::before,
	.islc-root.islc-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.islc-root.islc-root.islc-js .islc-reveal {
		opacity: 1;
		transform: none;
	}

	.islc-root.islc-root.islc-js .islc-rule--draw {
		transform: scaleX(1);
	}
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
	.islc-root.islc-root {
		color: #000;
	}

	.islc-root.islc-root .islc-band,
	.islc-root.islc-root .islc-banner {
		background: none !important;
		color: #000;
		padding: 1.5rem 0;
	}

	.islc-root.islc-root .islc-skyfoot::after,
	.islc-root.islc-root .islc-banner__wash,
	.islc-root.islc-root .islc-band__wash,
	.islc-root.islc-root .islc-skyline,
	.islc-root.islc-root .islc-goldband,
	.islc-root.islc-root .islc-wash-flag,
	.islc-root.islc-root .islc-tile {
		display: none !important;
	}

	.islc-root.islc-root .islc-h2,
	.islc-root.islc-root .islc-h3,
	.islc-root.islc-root .islc-hero__label,
	.islc-root.islc-root .islc-hero__line,
	.islc-root.islc-root .islc-package__price,
	.islc-root.islc-root .islc-package__name,
	.islc-root.islc-root .islc-programme h3,
	.islc-root.islc-root .islc-reasons h3,
	.islc-root.islc-root .islc-audience li,
	.islc-root.islc-root .islc-closing,
	.islc-root.islc-root .islc-ticks li,
	.islc-root.islc-root .islc-lede,
	.islc-root.islc-root .islc-hero__meta dd,
	.islc-root.islc-root .islc-contact__list a {
		color: #000 !important;
	}
}