@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--navy: #16324f;
	--navy-deep: #0e2138;
	--gold: #b8862f;
	--gold-light: #d9ab55;
	--ink: #232323;
	--muted: #667080;
	--paper: #fdfcfa;
	--card: #f3f0ea;
	--line: #e2ddd2;

	--fs-h1: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
	--fs-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
	--fs-deck: clamp(1rem, .9rem + .4vw, 1.2rem);
	--fs-body: clamp(.92rem, .88rem + .15vw, 1.02rem);
	--fs-small: clamp(.78rem, .76rem + .1vw, .86rem);

	--gap: clamp(1rem, .7rem + 1.2vw, 2rem);
	--pad-x: clamp(1.1rem, .8rem + 2vw, 4rem);
	--pad-y: clamp(2rem, 1.5rem + 2vw, 4rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Lora", Georgia, serif;
	font-size: var(--fs-body);
	line-height: 1.6;
}
h1, h2, h3 { font-family: "Lora", Georgia, serif; margin: 0; line-height: 1.15; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.ui { font-family: "Inter", system-ui, sans-serif; }

/* ---------- notice ---------- */
.notice {
	margin: 0;
	padding: .6rem var(--pad-x);
	background: var(--navy-deep);
	color: #cfd8e3;
	font-family: "Inter", system-ui, sans-serif;
	font-size: var(--fs-small);
	text-align: center;
}

/* ---------- header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem var(--pad-x);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.brand {
	font-family: "Lora", serif;
	font-weight: 700;
	letter-spacing: .04em;
	font-size: 1.1rem;
	color: var(--navy);
	text-decoration: none;
}
.brand small {
	display: block;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: .62rem;
	letter-spacing: .18em;
	color: var(--gold);
	text-transform: uppercase;
}
.toc-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	font-weight: 500;
}
.toc-nav a { text-decoration: none; color: var(--muted); }
.toc-nav a:hover { color: var(--navy); }
@media (max-width: 899px) { .toc-nav { display: none; } }

/* ---------- spread / page shell ---------- */
.spread {
	padding: 0 0 100px;
	border-bottom: 1px solid var(--line);
}
.spread .wrap { padding: var(--pad-y) var(--pad-x) 0; }
.page-kicker {
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .5rem;
}
.article-head { max-width: 46rem; margin-bottom: var(--gap); }
.article-head h1 { font-size: var(--fs-h1); font-weight: 600; color: var(--navy-deep); }
.deck { font-size: var(--fs-deck); font-style: italic; color: var(--muted); margin-top: .7rem; }

.hero-photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.hero-photo.tall { aspect-ratio: 3/4; }

/* ---------- body copy ---------- */
.lede {
	font-size: var(--fs-deck);
	max-width: 42rem;
	margin: var(--gap) 0;
	color: var(--navy-deep);
}
.article-columns {
	columns: 1;
	column-gap: var(--gap);
	margin-top: var(--gap);
}
.article-columns p { margin: 0 0 1em; }
.article-columns h3 {
	font-size: 1rem;
	color: var(--navy);
	margin: 1.2em 0 .3em;
	break-after: avoid;
}
@media (min-width: 640px) { .article-columns.cols-2 { columns: 2; } }
@media (min-width: 900px) { .article-columns.cols-3 { columns: 3; } }

.pull-quote {
	font-family: "Lora", serif;
	font-style: italic;
	font-size: var(--fs-h2);
	line-height: 1.35;
	color: var(--navy);
	border-left: 3px solid var(--gold);
	padding-left: 1rem;
	margin: var(--gap) 0;
	max-width: 34rem;
}
.pull-quote cite { display: block; font-style: normal; font-family: "Inter", sans-serif; font-size: .78rem; color: var(--muted); margin-top: .5rem; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin-top: var(--gap); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.photo-grid .tall img { aspect-ratio: 3/4; }
.photo-caption {
	font-family: "Inter", sans-serif;
	font-size: var(--fs-small);
	color: var(--muted);
	margin-top: .6rem;
	max-width: 46rem;
}

.tbc {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid var(--gold);
	border-radius: 2px;
	padding: .15rem .5rem;
	margin: .5rem 0;
}

.cta-link {
	display: inline-block;
	margin-top: 1rem;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: .82rem;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 2px;
}
.cta-link:hover { color: var(--gold); }

.contact-block {
	font-family: "Inter", sans-serif;
	font-size: var(--fs-small);
	margin-top: 1.2rem;
	color: var(--muted);
}
.contact-block a { color: var(--navy); }

/* ---------- cover ---------- */
.cover {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	background-size: cover;
	background-position: center;
	padding: var(--pad-y) var(--pad-x);
}
.cover::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,33,56,.55) 0%, rgba(14,33,56,.05) 30%, rgba(14,33,56,.15) 60%, rgba(14,33,56,.85) 100%);
	pointer-events: none;
}
.cover > * { position: relative; z-index: 1; }
.cover-top { display: flex; align-items: center; justify-content: space-between; }
.cover-kicker { font-family: "Inter", sans-serif; letter-spacing: .3em; font-size: .8rem; text-transform: uppercase; }
.cover-crest { width: 56px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.cover-bottom { max-width: 40rem; }
.cover-headline { font-size: clamp(2rem, 1.3rem + 3.5vw, 4.2rem); font-weight: 600; }
.cover-teaser {
	margin-top: 1rem;
	font-family: "Inter", sans-serif;
	font-size: .85rem;
	color: rgba(255,255,255,.75);
}

/* ---------- masthead / ad / contents (page-02) ---------- */
.masthead-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--gap) * 1.5);
}
@media (min-width: 760px) { .masthead-grid { grid-template-columns: 1.3fr 1fr; } }

.ad-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ad-card img { width: 100%; }
.ad-card a { display: block; }
.ad-label {
	font-family: "Inter", sans-serif;
	font-size: .65rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	padding: .4rem .7rem;
	background: var(--card);
}

.masthead-box {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1.2rem 1.4rem;
	font-family: "Inter", sans-serif;
	font-size: var(--fs-small);
}
.masthead-box dt { font-weight: 600; color: var(--navy); margin-top: .7rem; }
.masthead-box dt:first-child { margin-top: 0; }
.masthead-box dd { margin: .15rem 0 0; color: var(--muted); }

.contents-title { font-size: var(--fs-h2); color: var(--navy-deep); margin-bottom: 1rem; }
.toc-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; margin-bottom: var(--gap); }
.toc-featured a, .toc-featured .unavailable { display: block; text-decoration: none; color: inherit; }
.toc-featured img { aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.toc-featured .unavailable img { opacity: .45; filter: grayscale(1); }
.toc-featured .num {
	display: inline-block; margin-top: .4rem;
	font-family: "Inter", sans-serif; font-weight: 700; font-size: .72rem;
	color: var(--gold);
}
.toc-featured .unavailable .num { color: var(--muted); }
.toc-featured .t { display: block; font-family: "Inter", sans-serif; font-size: .78rem; }

.toc-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.toc-list li { border-bottom: 1px solid var(--line); }
.toc-list li > a,
.toc-list li.unavailable {
	display: flex; gap: .9rem; align-items: baseline; padding: .5rem 0;
}
.toc-list li > a { text-decoration: none; color: var(--ink); }
.toc-list li > a:hover { color: var(--navy); }
.toc-list li > a:hover .num { color: var(--navy); text-decoration: underline; }
.toc-list li.unavailable { color: var(--muted); opacity: .55; }
.toc-list li.unavailable .num { color: var(--muted); }
.toc-list .num {
	font-family: "Lora", serif; font-weight: 700; color: var(--gold); min-width: 2.4ch;
}
.toc-sub {
	font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
	margin: 1.5rem 0 .5rem;
}
.toc-note {
	font-size: var(--fs-small); color: var(--muted); font-style: italic; margin-top: .75rem;
}

/* ---------- prefect list ---------- */
.prefect-list {
	columns: 2;
	column-gap: 1.5rem;
	font-family: "Inter", sans-serif;
	font-size: var(--fs-small);
	margin-top: var(--gap);
}
@media (min-width: 640px) { .prefect-list { columns: 3; } }
@media (min-width: 900px) { .prefect-list { columns: 4; } }
.prefect-list .p {
	break-inside: avoid;
	padding: .35rem 0;
	border-bottom: 1px solid var(--line);
	margin-bottom: .1rem;
}
.prefect-list .p b { display: block; color: var(--navy); font-weight: 600; }
.prefect-list .p span { color: var(--muted); font-size: .82em; }
.prefect-list .p.lead b { color: var(--gold); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #cbd5e0; text-align: center; }
.site-footer .wrap { padding-block: var(--pad-y); }
.site-footer p { margin: .3rem 0; font-family: "Inter", sans-serif; font-size: var(--fs-small); }

/* =========================================================
   DESKTOP: horizontal slider
   ========================================================= */
@media (min-width: 900px) {
	html, body { height: 100%; }
	body { display: flex; flex-direction: column; overflow: hidden; }
	.notice, .site-header { flex: 0 0 auto; }
	main {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	main::-webkit-scrollbar { display: none; height: 0; }
	main > .spread {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		scroll-snap-align: start;
		border-bottom: none;
		border-right: 1px solid var(--line);
	}
	main > .spread:last-child { border-right: none; }
	.cover { min-height: 100%; height: 100%; }
}

/* prev/next arrows — sit beside the floating pager, same styling, every breakpoint */
.slide-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.6rem; height: 2.6rem;
	border-radius: 50%;
	border: 1px solid var(--gold-light);
	background: var(--navy-deep);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.slide-nav:hover { background: var(--gold); border-color: var(--gold); }

/* =========================================================
   MOBILE: floating pager
   ========================================================= */
.mobile-pager {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 70;
	font-family: "Inter", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.pager-row { display: flex; align-items: center; gap: .6rem; }
.pager-sheet {
	background: var(--navy-deep);
	color: #fff;
	border-radius: 10px;
	padding: .5rem;
	margin-bottom: .5rem;
	max-height: 60vh;
	overflow-y: auto;
	box-shadow: 0 10px 30px rgba(0,0,0,.3);
	width: min(78vw, 320px);
}
.pager-sheet[hidden] { display: none; }
.pager-sheet ul { list-style: none; margin: 0; padding: 0; }
.pager-sheet a {
	display: flex; gap: .6rem; align-items: baseline;
	padding: .5rem .6rem; border-radius: 6px;
	text-decoration: none; color: #dbe4f0; font-size: .82rem;
}
.pager-sheet a .n { color: var(--gold-light); font-weight: 700; min-width: 1.6em; }
.pager-sheet a.active { background: rgba(255,255,255,.1); color: #fff; }
.pager-sheet a:hover { background: rgba(255,255,255,.08); }

.pager-toggle {
	display: flex; align-items: center; justify-content:center; gap: .5rem;
	background: var(--navy-deep);
	color: #fff;
	border: none;
	border: 1px solid var(--gold-light);
	border-radius: 999px;
	padding: .7rem;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	cursor: pointer;
	width: 200px;
}
.pager-num { font-weight: 700; font-size: .85rem; }
.pager-sep { opacity: .5; font-size: .8rem; }
.pager-name { display: block; font-size: .62rem; color: var(--gold-light); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15;width: 100%; }
.pager-page-wrapper{ display: flex; gap: 5px;justify-content:center;width: 50%; margin: 5px 0; }