/* CHT Ningi portal gateway — committed brand red on warm cream */

:root {

	--pg-brand: oklch(0.58 0.24 27);

	--pg-brand-dark: oklch(0.48 0.22 27);

	--pg-brand-deep: oklch(0.38 0.18 27);

	--pg-hue: 27;

	--pg-surface: oklch(0.97 0.008 var(--pg-hue));

	--pg-surface-raised: oklch(0.99 0.005 var(--pg-hue));

	--pg-ink: oklch(0.22 0.025 var(--pg-hue));

	--pg-ink-muted: oklch(0.48 0.03 var(--pg-hue));

	--pg-accent: var(--pg-brand);

	--pg-accent-soft: oklch(0.94 0.04 var(--pg-hue));

	--pg-line: oklch(0.88 0.018 var(--pg-hue));

	--pg-on-brand: oklch(0.99 0.006 var(--pg-hue));

	--pg-hero-veil: oklch(0.16 0.06 var(--pg-hue) / 0.72);

	--pg-radius: 0.875rem;

	--pg-radius-lg: 1.25rem;

	--pg-space-xs: 0.5rem;

	--pg-space-sm: 0.75rem;

	--pg-space-md: 1.25rem;

	--pg-space-lg: 2rem;

	--pg-space-xl: clamp(2.5rem, 5vw, 4rem);

	--pg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--pg-ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

	--pg-font-display: "Bitter", Georgia, serif;

	--pg-font-body: "Atkinson Hyperlegible", system-ui, sans-serif;

}



body.portal-gateway-active {

	font-family: var(--pg-font-body);

	background: var(--pg-surface) !important;

	background-image: none !important;

	margin: 0;

}



.portal-gateway {

	position: relative;

	min-height: 100vh;

	overflow-x: clip;

	font-family: var(--pg-font-body);

	color: var(--pg-ink);

}



.portal-gateway__canvas {

	position: fixed;

	inset: 0;

	width: 100%;

	height: 100%;

	z-index: 0;

	pointer-events: none;

	opacity: 0.42;

}



.portal-gateway__shell {

	position: relative;

	z-index: 1;

	display: grid;

	grid-template-columns: minmax(0, 1fr);

	min-height: 100vh;

}



@media (min-width: 1024px) {

	.portal-gateway__shell {

		grid-template-columns: minmax(320px, 1.08fr) minmax(400px, 0.92fr);

	}

}



/* Hero */

.portal-gateway__hero {

	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: flex-end;

	min-height: clamp(320px, 48vh, 560px);

	padding: var(--pg-space-lg) var(--pg-space-md);

	color: var(--pg-on-brand);

	isolation: isolate;

	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);

}



@media (min-width: 1024px) {

	.portal-gateway__hero {

		min-height: 100vh;

		padding: var(--pg-space-xl);

		clip-path: polygon(0 0, 100% 0, calc(100% - 3.5rem) 100%, 0 100%);

	}

}



.portal-gateway__hero-media {

	position: absolute;

	inset: 0;

	z-index: -2;

	overflow: hidden;

}



.portal-gateway__hero-media img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center 28%;

	transform: scale(1.06);

	will-change: transform;

}



.portal-gateway__hero-scrim {

	position: absolute;

	inset: 0;

	z-index: -1;

	background:

		linear-gradient(0deg, var(--pg-hero-veil) 0%, oklch(0.2 0.05 var(--pg-hue) / 0.2) 55%, oklch(0.25 0.04 var(--pg-hue) / 0.35) 100%),

		linear-gradient(95deg, oklch(0.14 0.08 var(--pg-hue) / 0.85) 0%, transparent 58%);

}



.portal-gateway__hero-inner {

	position: relative;

	display: flex;

	flex-direction: column;

	gap: var(--pg-space-md);

	max-width: 42ch;

}



.portal-gateway__brand {

	display: flex;

	align-items: center;

	gap: var(--pg-space-md);

	text-decoration: none;

	color: inherit;

}



.portal-gateway__logo {

	width: 3.75rem;

	height: 3.75rem;

	object-fit: contain;

	flex-shrink: 0;

	filter: drop-shadow(0 6px 20px oklch(0.1 0.02 var(--pg-hue) / 0.5));

}



@media (min-width: 768px) {

	.portal-gateway__logo {

		width: 4.5rem;

		height: 4.5rem;

	}

}



.portal-gateway__brand-text {

	display: flex;

	flex-direction: column;

	gap: 0.15rem;

}



.portal-gateway__eyebrow {

	font-family: var(--pg-font-display);

	font-size: clamp(0.8rem, 1.5vw, 0.95rem);

	font-weight: 700;

	line-height: 1.25;

	letter-spacing: 0.01em;

}



.portal-gateway__tagline {

	font-size: 0.8125rem;

	opacity: 0.88;

	letter-spacing: 0.04em;

}



.portal-gateway__title {

	font-family: var(--pg-font-display);

	font-size: clamp(2rem, 5vw, 3.15rem);

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.02em;

	margin: 0;

	max-width: 12ch;

}



.portal-gateway__subtitle {

	font-size: clamp(0.95rem, 1.7vw, 1.0625rem);

	line-height: 1.55;

	margin: 0.5rem 0 0;

	opacity: 0.92;

	max-width: 38ch;

}



.portal-gateway__chips {

	display: flex;

	flex-wrap: wrap;

	gap: 0.5rem;

	margin: 0;

	padding: 0;

	list-style: none;

}



.portal-gateway__chips li {

	font-size: 0.75rem;

	font-weight: 600;

	letter-spacing: 0.05em;

	text-transform: uppercase;

	padding: 0.4rem 0.7rem;

	border-radius: 999px;

	background: oklch(0.99 0.01 var(--pg-hue) / 0.12);

	border: 1px solid oklch(0.99 0.01 var(--pg-hue) / 0.28);

}



/* Main */

.portal-gateway__main {

	display: flex;

	flex-direction: column;

	justify-content: center;

	padding: calc(var(--pg-space-lg) + 0.5rem) var(--pg-space-md) var(--pg-space-lg);

	background: var(--pg-surface);

}



@media (min-width: 1024px) {

	.portal-gateway__main {

		padding: var(--pg-space-xl);

		margin-top: 0;

		box-shadow: -32px 0 64px oklch(0.2 0.03 var(--pg-hue) / 0.07);

	}

}



.portal-gateway__panel {

	width: 100%;

	max-width: 38rem;

	margin: 0 auto;

}



.portal-gateway__panel-heading {

	margin-bottom: var(--pg-space-lg);

}



.portal-gateway__panel-kicker {

	font-family: var(--pg-font-display);

	font-size: 0.8125rem;

	font-weight: 700;

	color: var(--pg-brand);

	margin: 0 0 var(--pg-space-xs);

	letter-spacing: 0.06em;

	text-transform: uppercase;

}



.portal-gateway__panel-heading h2 {

	font-family: var(--pg-font-display);

	font-size: clamp(1.35rem, 2.8vw, 1.75rem);

	font-weight: 700;

	color: var(--pg-ink);

	margin: 0 0 var(--pg-space-xs);

	line-height: 1.15;

	letter-spacing: -0.02em;

}



.portal-gateway__panel-heading p {

	margin: 0;

	color: var(--pg-ink-muted);

	font-size: 0.9375rem;

	line-height: 1.55;

	max-width: 42ch;

}



/* Admission notice */

.portal-admission-notice {

	display: grid;

	grid-template-columns: 1fr;

	gap: 0;

	background: var(--pg-accent-soft);

	border: 1px solid oklch(0.86 0.035 var(--pg-hue));

	border-radius: var(--pg-radius-lg);

	margin-bottom: var(--pg-space-lg);

	overflow: hidden;

	transform-origin: top center;

}



.portal-admission-notice.is-hidden {

	display: none;

}



.portal-admission-notice.is-dismissing {

	pointer-events: none;

}



@media (min-width: 540px) {

	.portal-admission-notice {

		grid-template-columns: 7.5rem 1fr;

	}

}



.portal-admission-notice__visual {

	position: relative;

	min-height: 5rem;

	overflow: hidden;

}



@media (min-width: 540px) {

	.portal-admission-notice__visual {

		min-height: 100%;

	}

}



.portal-admission-notice__visual img {

	width: 100%;

	height: 100%;

	min-height: 5rem;

	object-fit: cover;

	object-position: center;

}



.portal-admission-notice__body {

	padding: var(--pg-space-md);

}



.portal-admission-notice__head {

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: var(--pg-space-sm);

	margin-bottom: var(--pg-space-sm);

}



.portal-admission-notice__kicker {

	font-size: 0.6875rem;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	color: var(--pg-brand);

	margin: 0 0 0.2rem;

}



.portal-admission-notice__title {

	font-family: var(--pg-font-display);

	font-size: 1rem;

	font-weight: 700;

	color: var(--pg-brand-deep);

	margin: 0;

	line-height: 1.3;

}



.portal-admission-notice__dismiss {

	flex-shrink: 0;

	border: 0;

	background: var(--pg-surface-raised);

	color: var(--pg-ink-muted);

	font-family: var(--pg-font-body);

	font-size: 0.8125rem;

	font-weight: 600;

	padding: 0.4rem 0.7rem;

	border-radius: var(--pg-radius);

	cursor: pointer;

	transition: color 0.2s var(--pg-ease-out), background 0.2s var(--pg-ease-out);

}



.portal-admission-notice__dismiss:hover {

	color: var(--pg-ink);

	background: oklch(0.99 0.005 var(--pg-hue));

}



.portal-admission-notice__dismiss:focus-visible {

	outline: 2px solid var(--pg-brand);

	outline-offset: 2px;

}



.portal-admission-notice__copy {

	font-size: 0.875rem;

	line-height: 1.55;

	margin: 0 0 var(--pg-space-md);

}



.portal-admission-notice__timer {

	display: flex;

	flex-direction: column;

	gap: var(--pg-space-sm);

}



.portal-admission-notice__timer-label {

	font-size: 0.8125rem;

	font-weight: 600;

	color: var(--pg-ink-muted);

}



.portal-admission-notice__timer-units {

	display: flex;

	flex-wrap: wrap;

	gap: 0.5rem;

}



.portal-countdown-unit {

	display: flex;

	flex-direction: column;

	align-items: center;

	min-width: 3.25rem;

	padding: 0.45rem 0.55rem;

	border-radius: var(--pg-radius);

	background: var(--pg-surface-raised);

	border: 1px solid var(--pg-line);

}



.portal-countdown-unit__value {

	font-family: var(--pg-font-display);

	font-size: 1.25rem;

	font-weight: 700;

	font-variant-numeric: tabular-nums;

	color: var(--pg-brand);

	line-height: 1;

}



.portal-countdown-unit__label {

	font-size: 0.625rem;

	font-weight: 600;

	text-transform: uppercase;

	letter-spacing: 0.06em;

	color: var(--pg-ink-muted);

	margin-top: 0.2rem;

}



.portal-admission-notice__timer-units.is-ended .portal-countdown-unit {

	width: 100%;

	align-items: flex-start;

}



.portal-admission-notice__timer-units.is-ended .portal-countdown-unit__value {

	font-size: 0.9375rem;

	color: var(--pg-ink-muted);

}



/* Routes */

.portal-routes-nav {

	margin-bottom: var(--pg-space-md);

}



.portal-routes {

	display: flex;

	flex-direction: column;

	gap: var(--pg-space-sm);

	margin: 0;

	padding: 0;

	list-style: none;

	counter-reset: route;

}



.portal-route {

	position: relative;

	display: grid;

	grid-template-columns: auto auto 1fr auto;

	align-items: center;

	gap: var(--pg-space-md);

	padding: var(--pg-space-md) var(--pg-space-md) var(--pg-space-md) var(--pg-space-sm);

	min-height: 4.5rem;

	border-radius: var(--pg-radius-lg);

	text-decoration: none;

	color: inherit;

	border: 1px solid var(--pg-line);

	background: var(--pg-surface-raised);

	transform-style: preserve-3d;

	will-change: transform;

}



.portal-route__index {

	font-family: var(--pg-font-display);

	font-size: 0.75rem;

	font-weight: 700;

	color: var(--pg-ink-muted);

	opacity: 0.55;

	min-width: 1.75rem;

	text-align: center;

	letter-spacing: 0.04em;

}



.portal-route__icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 2.85rem;

	height: 2.85rem;

	border-radius: var(--pg-radius);

	background: var(--pg-accent-soft);

	color: var(--pg-brand-deep);

}



.portal-route__icon svg {

	width: 1.35rem;

	height: 1.35rem;

}



.portal-route__label {

	display: block;

	font-family: var(--pg-font-display);

	font-size: 1.02rem;

	font-weight: 700;

	color: var(--pg-ink);

	line-height: 1.25;

	margin-bottom: 0.12rem;

}



.portal-route__hint {

	display: block;

	font-size: 0.8125rem;

	font-weight: 500;

	color: var(--pg-ink-muted);

	line-height: 1.4;

}



.portal-route__arrow {

	color: var(--pg-ink-muted);

	opacity: 0.5;

	display: flex;

	align-items: center;

}



.portal-route--primary {

	background: var(--pg-brand);

	border-color: var(--pg-brand-dark);

	color: var(--pg-on-brand);

}



.portal-route--primary .portal-route__index {

	color: var(--pg-on-brand);

	opacity: 0.65;

}



.portal-route--primary .portal-route__label,

.portal-route--primary .portal-route__hint {

	color: inherit;

}



.portal-route--primary .portal-route__hint {

	opacity: 0.9;

}



.portal-route--primary .portal-route__icon {

	background: oklch(0.99 0.01 var(--pg-hue) / 0.16);

	color: var(--pg-on-brand);

}



.portal-route--primary .portal-route__arrow {

	color: var(--pg-on-brand);

	opacity: 0.85;

}



.portal-route:focus-visible {

	outline: 2px solid var(--pg-brand);

	outline-offset: 3px;

}



/* Contact */

.portal-contact {

	display: grid;

	grid-template-columns: 1fr;

	gap: var(--pg-space-md);

	margin-top: var(--pg-space-lg);

	padding: var(--pg-space-md);

	border-radius: var(--pg-radius-lg);

	background: oklch(0.95 0.012 var(--pg-hue));

	border: 1px solid var(--pg-line);

}



@media (min-width: 540px) {

	.portal-contact {

		grid-template-columns: 5.5rem 1fr;

		align-items: center;

	}

}



.portal-contact__visual {

	display: none;

	border-radius: var(--pg-radius);

	overflow: hidden;

	aspect-ratio: 1;

}



@media (min-width: 540px) {

	.portal-contact__visual {

		display: block;

	}

}



.portal-contact__visual img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.portal-contact__label {

	font-family: var(--pg-font-display);

	font-size: 0.8125rem;

	font-weight: 700;

	color: var(--pg-ink-muted);

	margin: 0 0 var(--pg-space-xs);

}



.portal-contact__email {

	display: inline-block;

	font-size: 0.9375rem;

	font-weight: 700;

	color: var(--pg-ink);

	text-decoration: none;

	margin-bottom: 0.35rem;

}



.portal-contact__email:hover {

	color: var(--pg-brand);

}



.portal-contact__phones {

	display: flex;

	flex-wrap: wrap;

	gap: 0.35rem 0.85rem;

	margin: 0;

	padding: 0;

	list-style: none;

}



.portal-contact__phones a {

	font-size: 0.875rem;

	font-weight: 600;

	color: var(--pg-ink-muted);

	text-decoration: none;

	transition: color 0.2s var(--pg-ease-out);

}



.portal-contact__phones a:hover {

	color: var(--pg-brand);

}



.portal-contact a:focus-visible {

	outline: 2px solid var(--pg-brand);

	outline-offset: 2px;

	border-radius: 2px;

}



/* Motion: initial hidden state (JS reveals) */

.portal-gateway[data-motion-ready="false"] [data-motion] {

	opacity: 0;

}



@media (prefers-reduced-motion: reduce) {

	.portal-gateway [data-motion] {

		opacity: 1 !important;

		transform: none !important;

	}



	.portal-gateway__hero-media img {

		transform: none !important;

	}

}