/**
 * PL ILM Club widget styles.
 *
 * Every rule is scoped under .ilm-page so the generic inner class names
 * (.main, .rail, .sec, .reveal ...) cannot collide with theme styles.
 * The quilted background tile is passed in from the widget as --ilm-pattern.
 */

.ilm-page {
	--cream: #f4efe3;
	--ink: #211b17;
	--soft: rgba(33, 27, 23, .62);
	--line: rgba(33, 27, 23, .16);
	--gold: #a97e34;
	--gold-lt: #d8b968;
	--rail-cream: #efe6d6;
	width: 100%;
	overflow-x: clip;
	background: #0c0c0d;
	background-image: var(--ilm-pattern);
	background-size: 400px 400px;
	color: var(--ink);
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
}

.ilm-page * { box-sizing: border-box; }
.ilm-page a { color: inherit; text-decoration: none; }
.ilm-page img { max-width: 100%; }

.ilm-page .serif { font-family: 'Cormorant Garamond', serif; }
.ilm-page .eyebrow {
	font-family: 'Cinzel', serif;
	letter-spacing: .3em;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
}

/* ---------- shell : scrolling column + sticky rail ---------- */

.ilm-page .shell { display: flex; align-items: flex-start; }

.ilm-page .main {
	flex: 1 1 61%;
	min-width: 0;
	overflow: clip;
	background: var(--cream);
	color: var(--ink);
	border-radius: 26px;
	position: relative;
	z-index: 2;
	margin: 26px 20px 26px 26px;
}

.ilm-page .rail {
	flex: 0 0 39%;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 40px;
	color: var(--rail-cream);
	background: transparent;
}

.ilm-page .rail-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

/* Headings must name their own colour. The theme styles h1/h2/h3 by element,
   and a direct rule beats the colour inherited from .rail / .vcard, which
   would otherwise render this cream type in the theme's near-black. */
.ilm-page .rail h1 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: clamp(44px, 4.8vw, 74px);
	letter-spacing: .08em;
	line-height: 1;
	margin: 0;
	color: var(--rail-cream);
}

.ilm-page .rail .loc {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: 'Cinzel', serif;
	letter-spacing: .28em;
	font-size: 11.5px;
	margin: 24px 0;
	opacity: .92;
}

.ilm-page .rail .tag {
	color: var(--rail-cream);
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(20px, 2vw, 27px);
	line-height: 1.35;
	margin: 32px 0 0;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ilm-page .rail .tag .t1 { font-style: normal; font-weight: 500; }
.ilm-page .rail .tag .t2 { font-style: italic; }

/* ---------- apply button ---------- */

.ilm-page .apply {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 16px 34px;
	border: 1px solid;
	transition: .35s;
	cursor: pointer;
}

.ilm-page .rail .apply { margin-top: 38px; border-color: rgba(239, 230, 214, .55); color: var(--rail-cream); }
.ilm-page .rail .apply:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: #141210; }

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

.ilm-page .hero {
	height: 100vh;
	position: relative;
	overflow: hidden;
	border-top-right-radius: 24px;
	background: #0b0a09;
}

.ilm-page .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ilm-page .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, .26), rgba(11, 10, 9, .1) 44%, rgba(11, 10, 9, .85)); }

.ilm-page .hero .cue { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; color: #efe6d6; z-index: 3; }
.ilm-page .hero .cue span { font-family: 'Cinzel', serif; letter-spacing: .34em; font-size: 11px; text-transform: uppercase; }
.ilm-page .hero .cue .ln {
	display: block;
	width: 1px;
	height: 44px;
	margin: 14px auto 0;
	background: linear-gradient(var(--gold-lt), transparent);
	animation: ilmCue 2.4s ease-in-out infinite;
}

@keyframes ilmCue {
	0%, 100% { opacity: .3; transform: scaleY(.6); }
	50% { opacity: 1; transform: scaleY(1); }
}

/* ---------- section shell + scroll reveal ---------- */

.ilm-page .sec { padding: clamp(64px, 8.5vh, 112px) clamp(30px, 6vw, 96px); }
.ilm-page .center { text-align: center; }

/* The hidden state is applied only once JS has added .ilm-anim, so the page
   stays fully readable when JS is unavailable. */
.ilm-page.ilm-anim .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.05s cubic-bezier(.2, .7, .2, 1);
}
.ilm-page.ilm-anim .reveal.in { opacity: 1; transform: none; }

/* ---------- intro ---------- */

.ilm-page .intro { padding-bottom: clamp(26px, 3.4vh, 44px); }
.ilm-page .intro .crest { height: 88px; margin-bottom: 24px; }
.ilm-page .intro .wm {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: clamp(46px, 6vw, 84px);
	letter-spacing: .06em;
	line-height: .98;
	margin: 0;
}
.ilm-page .intro .meta {
	font-family: 'Cinzel', serif;
	letter-spacing: .28em;
	font-size: 11.5px;
	margin: 16px 0 34px;
	color: var(--ink);
	font-weight: 500;
}
.ilm-page .intro p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.72; max-width: 620px; margin: 0 auto; color: var(--ink); }

/* ---------- statement ---------- */

.ilm-page .statement { padding-top: clamp(26px, 3.4vh, 44px); }
.ilm-page .statement .eyebrow { display: block; margin-bottom: 24px; }
.ilm-page .statement .big {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(26px, 3.6vw, 52px);
	line-height: 1.12;
	letter-spacing: .01em;
	max-width: 22ch;
}
.ilm-page .statement .big em { font-style: normal; color: var(--gold); }

/* ---------- image band ---------- */

.ilm-page .imgband { position: relative; height: clamp(420px, 80vh, 760px); overflow: hidden; }
.ilm-page .imgband .band-track { position: absolute; inset: 0; }

/* Slides stack and crossfade. A single image simply sits at full opacity. */
.ilm-page .imgband .band-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.ilm-page .imgband .band-slide.is-active { opacity: 1; }

/* Dots sit above the slides. */
.ilm-page .imgband .band-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.ilm-page .imgband .band-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(239, 230, 214, .7);
	background: transparent;
	cursor: pointer;
	transition: background .35s, border-color .35s, transform .35s;
}
.ilm-page .imgband .band-dot:hover { border-color: var(--gold-lt); }
.ilm-page .imgband .band-dot.is-active { background: var(--gold-lt); border-color: var(--gold-lt); transform: scale(1.15); }
.ilm-page .imgband .band-dot:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.ilm-page .imgband .band-slide { transition: none; }
}
/* ---------- benefits ---------- */

.ilm-page .lbl { text-align: center; display: block; margin-bottom: 48px; color: var(--ink); }
.ilm-page .benefits { padding-bottom: clamp(26px, 3.4vh, 46px); }

.ilm-page .benefit {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 28px;
	padding: 24px 0;
	border-top: 1px solid var(--line);
}
.ilm-page .benefit:last-child { border-bottom: 1px solid var(--line); }
.ilm-page .benefit .n { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; color: var(--gold); flex: 0 0 auto; padding-top: 5px; }
.ilm-page .benefit .r { text-align: right; max-width: 74%; }
.ilm-page .benefit .t { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.15; }
.ilm-page .benefit .d { font-size: 13.5px; color: var(--soft); margin-top: 5px; line-height: 1.5; }

/* ---------- values marquee ---------- */

.ilm-page .values { padding-top: clamp(26px, 3.4vh, 46px); padding-bottom: clamp(40px, 5vh, 64px); }

.ilm-page .vmarquee {
	overflow: hidden;
	padding: 6px 0 18px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ilm-page .vtrack { display: flex; gap: 20px; width: max-content; animation: ilmMarq 44s linear infinite; }
.ilm-page .vmarquee:hover .vtrack { animation-play-state: paused; }

.ilm-page .vcard {
	flex: 0 0 clamp(258px, 26vw, 314px);
	background: #0c0c0d;
	background-image: var(--ilm-pattern);
	background-size: cover;
	color: var(--rail-cream);
	border-radius: 16px;
	padding: 34px 28px 30px;
	position: relative;
}
.ilm-page .vcard .n { font-family: 'Cinzel', serif; font-size: 11.5px; letter-spacing: .16em; color: var(--gold-lt); position: absolute; top: 24px; right: 26px; }
.ilm-page .vcard .ar { font-family: 'Amiri', serif; font-size: 34px; color: var(--gold-lt); line-height: 1; margin-bottom: 14px; }
.ilm-page .vcard h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; margin: 0; color: var(--rail-cream); }
.ilm-page .vcard .en { font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lt); display: block; margin: 5px 0 14px; }
.ilm-page .vcard p { font-size: 14.5px; line-height: 1.58; color: rgba(239, 230, 214, .8); margin: 0; }

/* ---------- community + institution marquee ---------- */

.ilm-page .community { padding-top: clamp(40px, 5vh, 64px); padding-bottom: clamp(18px, 2.4vh, 32px); }
.ilm-page .community h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(44px, 6vw, 90px); line-height: 1; margin: 0 auto; color: var(--ink); }
.ilm-page .community h2 .num { color: var(--gold); }
.ilm-page .community p { font-size: clamp(15px, 1.4vw, 19px); color: var(--ink); max-width: 520px; margin: 20px auto 0; line-height: 1.6; }

.ilm-page .marquee {
	margin-top: 48px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 22px 0;
}
.ilm-page .mtrack { display: flex; align-items: center; width: max-content; animation: ilmMarq 55s linear infinite; }
.ilm-page .marquee:hover .mtrack { animation-play-state: paused; }

@keyframes ilmMarq { to { transform: translateX(-50%); } }

.ilm-page .uni { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(22px, 2.3vw, 33px); padding: 0 8px; white-space: nowrap; }
.ilm-page .sep { color: var(--gold); font-size: 12px; padding: 0 6px; }

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

.ilm-page .foot {
	background: var(--cream);
	color: var(--ink);
	border-bottom-right-radius: 24px;
	padding: clamp(30px, 3.6vh, 48px) clamp(30px, 6vw, 96px) 40px;
	text-align: center;
}
.ilm-page .foot .apply { border-color: var(--ink); color: var(--ink); }
.ilm-page .foot .apply:hover { background: var(--ink); color: var(--cream); }

.ilm-page .foot-rule { display: flex; align-items: center; gap: 26px; margin: clamp(44px, 6vh, 72px) 0 32px; }
.ilm-page .foot-rule .l { flex: 1; height: 1px; background: var(--line); }
.ilm-page .foot-crest { height: 46px; }

.ilm-page .foot-bot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; text-align: left; }
.ilm-page .fb-left { display: flex; flex-direction: column; gap: 5px; }
.ilm-page .fb-left .tagit { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; }
.ilm-page .fb-left .cp { font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: .12em; color: var(--soft); }

.ilm-page .foot-links { display: flex; gap: 28px; }
.ilm-page .foot-links a { font-family: 'Newsreader', serif; font-size: 11px; letter-spacing: .05em; border-bottom: 1px solid rgba(33, 27, 23, .4); padding-bottom: 3px; }
.ilm-page .foot-links a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
	/* align-items must become stretch here: in a column flex container the
	   inherited flex-start would size .main to its max-content width, which is
	   the ~6800px marquee track, pushing every centered section off screen. */
	.ilm-page .shell { flex-direction: column; align-items: stretch; }
	.ilm-page .rail { position: static; flex: none; width: 100%; height: auto; min-height: 80vh; order: -1; padding: 80px 32px; }
	.ilm-page .main { width: auto; border-radius: 0; margin: 0; }
	.ilm-page .hero { border-radius: 0; height: 66vh; }
	.ilm-page .foot { border-radius: 0; }
	.ilm-page .benefit .r { max-width: 66%; }
	.ilm-page .foot-bot { flex-direction: column; align-items: center; text-align: center; }
	.ilm-page .fb-left { align-items: center; }
}

/* Elementor drops the widget inside a container; keep it edge to edge. */
.elementor-widget-pl-ilm-club .elementor-widget-container { width: 100%; }