/* ═══════════════════════════════════════════
   BASE — Reset, Tokens, Typography, Utilities
   ═══════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
	/* Backgrounds */
	--bg:       #F6F2E9;
	--bg-warm:  #EFE6D3;
	--bg-deep:  #E8DFC9;
	--paper:    #FBF8F0;

	/* Ink */
	--ink:      #1A1F2E;
	--ink-soft: #4A4F5E;
	--ink-mute: #7E8497;

	/* Line */
	--line: rgba(26,31,46,.12);

	/* Madras palette */
	--sea:       #1B5A6B;
	--sea-deep:  #0F3F4D;
	--sea-light: #6FA8B5;
	--sand:      #D4844A;
	--coral:     #E2725B;
	--leaf:      #4A6B3F;
	--gold:      #B8954B;

	/* Typography */
	--f-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--f-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
	--f-mono:    "DM Mono", ui-monospace, monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
	font-family: var(--f-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-wrap: pretty;
	overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--coral); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 10px; }

/* ── Madras Band ── */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	z-index: 60;
	background: linear-gradient(90deg,
		#E2725B 0% 22%,
		#D4844A 22% 36%,
		#1B5A6B 36% 60%,
		#4A6B3F 60% 78%,
		#B8954B 78% 100%);
}

/* ── Typography ── */
.display {
	font-family: var(--f-display);
	font-weight: 300;
	letter-spacing: -.012em;
	line-height: .98;
	color: var(--ink);
}

.display .it   { font-style: italic; font-weight: 300; }
.display .sea  { color: var(--sea);   font-style: italic; }
.display .coral{ color: var(--coral); font-style: italic; }
.display .sand { color: var(--sand);  font-style: italic; }
.display .gold { color: var(--gold);  font-style: italic; }

.eyebrow {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.chap {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--coral);
}

/* ── Links ── */
.uline {
	position: relative;
	text-decoration: none;
	color: inherit;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	transition: color .25s ease;
}
.uline:hover { color: var(--coral); }