/* ==========================================================================
   Base: fonts, tokens, reset, typography, layout, shared components.
   The design is drawn at 1920px; sizes scale with the viewport and are
   clamped so they stay readable on small screens.
   ========================================================================== */

/* Fonts -------------------------------------------------------------------- */
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bai-jamjuree-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bai-jamjuree-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/bai-jamjuree-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/bai-jamjuree-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bai-jamjuree-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bai-jamjuree-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bai-jamjuree-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bai Jamjuree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bai-jamjuree-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Tokens ------------------------------------------------------------------- */
:root {
	--c-bg: #f0efe9;
	--c-ink: #111111;
	--c-ink-2: #555555;
	--c-ink-3: #9b9a94;
	--c-white: #ffffff;
	--c-line: rgb(17 17 17 / 0.10);
	--c-line-2: rgb(17 17 17 / 0.14);
	--c-line-3: rgb(17 17 17 / 0.18);
	--c-line-strong: rgb(17 17 17 / 0.28);
	--c-rule: #dadada;

	--font: "Bai Jamjuree", "Helvetica Neue", Arial, sans-serif;

	/* px at 1920 → vw = px / 19.2 */
	--fs-display: clamp(3rem, 6.77vw, 8.125rem);      /* 130 */
	--fs-h1: clamp(2.25rem, 4.0625vw, 4.875rem);      /* 78 */
	--fs-hero: clamp(2.125rem, 3.125vw, 3.75rem);     /* 60 */
	--fs-h2: clamp(1.875rem, 2.604vw, 3.125rem);      /* 50 */
	--fs-h3: clamp(1.5rem, 1.771vw, 2.125rem);        /* 34 */
	--fs-h4: clamp(1.1875rem, 1.25vw, 1.5rem);        /* 24 */
	--fs-body-lg: clamp(1rem, 1.094vw, 1.3125rem);    /* 21 */
	--fs-body: clamp(0.9375rem, 0.99vw, 1.1875rem);   /* 19 */
	--fs-small: clamp(0.875rem, 0.833vw, 1rem);       /* 16 */
	--fs-stat: clamp(3.25rem, 4.79vw, 5.75rem);       /* 92 */

	--gutter: 16px;
	--inset-wide: clamp(16px, 3.646vw, 70px);
	--inset-default: clamp(16px, 7.03vw, 135px);
	--inset-large: clamp(16px, 7.81vw, 150px);
	--inset-course: clamp(16px, 14.48vw, 278px);
	--inset-narrow: clamp(16px, 15.625vw, 300px);

	--space-s: clamp(32px, 3.125vw, 60px);
	--space-m: clamp(52px, 5.2vw, 100px);
	--space-l: clamp(64px, 6.77vw, 130px);
	--space-xl: clamp(72px, 7.8vw, 150px);

	--site-max: 1920px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* On phones every inset collapses to the page gutter: the proportional ones leave too little text width. */
@media (max-width: 767px) {
	:root {
		--inset-wide: var(--gutter);
		--inset-default: var(--gutter);
		--inset-large: var(--gutter);
		--inset-course: var(--gutter);
		--inset-narrow: var(--gutter);
	}
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.37;
	letter-spacing: -0.025em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip-path: none;
	background: var(--c-ink);
	color: var(--c-white);
}

/* Layout ------------------------------------------------------------------- */
.site {
	max-width: var(--site-max);
	margin-inline: auto;
	overflow-x: clip;
}

@media (min-width: 1921px) {
	.site { border-inline: 1px solid #dadada; }
}

.container { padding-inline: var(--gutter); }
.container--wide { padding-inline: var(--inset-wide); }
.container--default { padding-inline: var(--inset-default); }
.container--large { padding-inline: var(--inset-large); }
.container--course { padding-inline: var(--inset-course); }
.container--narrow { padding-inline: var(--inset-narrow); }

/* Sections: blocks set their own default spacing through these variables;
   the Section Settings classes override them. */
.section {
	--pt: var(--space-l);
	--pb: 0px;
	position: relative;
	padding-block: var(--pt) var(--pb);
}

.section.pt-none { --pt: 0px; }
.section.pt-s { --pt: var(--space-s); }
.section.pt-m { --pt: var(--space-m); }
.section.pt-l { --pt: var(--space-l); }
.section.pb-none { --pb: 0px; }
.section.pb-s { --pb: var(--space-s); }
.section.pb-m { --pb: var(--space-m); }
.section.pb-l { --pb: var(--space-l); }

.section.is-dark {
	--c-bg: #0f0f0f;
	--c-ink: #ffffff;
	--c-ink-2: rgb(255 255 255 / 0.62);
	--c-ink-3: rgb(255 255 255 / 0.5);
	--c-line: rgb(255 255 255 / 0.14);
	--c-line-2: rgb(255 255 255 / 0.18);
	--c-line-3: rgb(255 255 255 / 0.24);
	--c-line-strong: rgb(255 255 255 / 0.28);
	--c-rule: rgb(255 255 255 / 0.18);
	background: var(--c-bg);
	color: var(--c-ink);
}

/* Two dark sections in a row read as one band. */
.section.is-dark + .section.is-dark:not([class*="pt-"]) { --pt: clamp(16px, 1.56vw, 30px); }

/* A dark section needs inner bottom space, otherwise its content touches the edge. */
.section.is-dark:not([class*="pb-"]) { --pb: var(--space-l); }

/* Typography helpers -------------------------------------------------------- */
.t-display { font-size: var(--fs-display); line-height: 0.96; letter-spacing: -0.03em; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.013em; }
.t-hero { font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -0.017em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.04em; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.014em; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.083; letter-spacing: -0.02em; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: 1.333; letter-spacing: -0.023em; }
.t-small { font-size: var(--fs-small); line-height: 1.25; letter-spacing: -0.03em; }
.t-muted { color: var(--c-ink-2); }

/* Rich text from the editor */
.rich-text > * + * { margin-top: 1.15em; }
.rich-text a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.rich-text a:hover { text-decoration-thickness: 2px; }
.rich-text ul, .rich-text ol { padding-left: 1.2em; }
.rich-text li + li { margin-top: 0.4em; }

/* Components --------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(52px, 3.646vw, 70px);
	padding: 0 clamp(26px, 1.875vw, 36px);
	background: var(--c-white);
	color: #111111;
	border: 1px solid var(--c-line);
	border-radius: 500px;
	font-size: var(--fs-small);
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}

.btn--outline {
	gap: 0.5em;
	background: transparent;
	border-color: var(--c-ink);
	color: var(--c-ink);
}

.btn .icon { width: 0.95em; height: 0.95em; transition: transform 0.35s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* Small rounded label: post meta, tags, section labels */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid var(--c-rule);
	border-radius: 500px;
	font-size: var(--fs-small);
	line-height: 1;
	letter-spacing: -0.03em;
	transition: border-color 0.3s var(--ease);
}

.pill .icon { width: 16px; height: 16px; }
a.pill:hover { border-color: var(--c-ink); }
.pill--label { min-height: 38px; padding: 0 22px; }
.pill--dot::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.is-dark .pill { border-color: rgb(255 255 255 / 0.45); }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding-bottom: 0.2em;
	border-bottom: 2px solid currentColor;
	font-size: var(--fs-body);
	line-height: 1.05;
	letter-spacing: 0.026em;
	text-transform: uppercase;
	transition: opacity 0.3s var(--ease);
}

.text-link .icon { width: 0.85em; height: 0.85em; transition: transform 0.35s var(--ease); }
.text-link:hover { opacity: 0.6; }
.text-link:hover .icon { transform: translate(2px, -2px); }

/* Image frame that fills its box; blocks set aspect-ratio on .media. */
.media {
	position: relative;
	overflow: hidden;
	background: rgb(17 17 17 / 0.06);
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a .media img { transition: transform 0.9s var(--ease); }
a:hover .media img { transform: scale(1.04); }

/* Slider dots (Swiper pagination restyled) */
.dots {
	--dot: 8px;
	--dot-active: currentColor;
	--dot-idle: var(--c-line-2);
	display: flex;
	align-items: center;
	gap: calc(var(--dot) * 0.6);
}

/* Swiper stretches its pagination to 100%; ours sits inline. */
.dots.swiper-pagination-horizontal { width: auto; }

.dots .swiper-pagination-bullet {
	width: var(--dot);
	height: var(--dot);
	margin: 0 !important;
	background: var(--dot-idle);
	border-radius: 50%;
	opacity: 1;
	transition: background-color 0.3s var(--ease);
}

.dots .swiper-pagination-bullet-active { background: var(--dot-active); }

/* Plain pages (no sections) and posts index fallback */
.entry {
	padding: var(--space-l) var(--inset-narrow);
}

.entry__title { font-size: var(--fs-h1); line-height: 1.1; margin-bottom: var(--space-s); }
.entry__content > * + * { margin-top: 1.15em; }