:root {
  --site-ink:#1d1d1f;
  --site-muted:#6b6b70;
  --site-line:#e4e2dd;
  --site-paper:#fff;
  --site-red:#b3261e;
}

* {
  box-sizing:border-box;
}

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

body {
	margin:0;
	background:var(--site-paper);
	color:var(--site-ink);

	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	font-size:16px;
	line-height:1.5;
}

h1,h2 {
	font-family:Fraunces,Georgia,serif;
	font-weight:600;
}

a {
	color:inherit;
}

.site-skip {
	position:absolute;
	left:-9999px;
}

.site-skip:focus {
	left:16px;
	top:12px;
	z-index:10;
	background:var(--site-ink);
	color:#fff;
	padding:8px 12px;
	border-radius:6px;
}

.site-top-bar {
    background: purple;
    color:white;
    width:100%;
    text-align:center;
    font-size:0.9rem;
}

.site-header {
	position:sticky;
	top:0;
	z-index:5;
	background:rgba(255,255,255,.94);

	backdrop-filter:saturate(1.4) blur(8px);
	-webkit-backdrop-filter:saturate(1.4) blur(8px);

	border-bottom:1px solid var(--site-line);
}

.site-header-in {
	max-width:1280px;
	margin:0 auto;
	padding:14px 16px;
	display:flex;
	align-items:center;

	justify-content:space-between;
	gap:16px;
}

.site-logo {
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	font-family:Fraunces,Georgia,serif;

	font-size:22px;
	font-weight:600;
	letter-spacing:-.01em;
	white-space:nowrap;
}

.site-logo svg {
	width:26px;
	height:26px;
	fill:var(--site-red);
	flex:none;
}

.site-nav {
	display:flex;
	gap:4px;
}

.site-nav a {
	text-decoration:none;
	padding:8px 14px;
	border-radius:999px;
	font-size:15px;
	color:var(--site-muted);
}

.site-nav a:hover {
	color:var(--site-ink);
	background:#f4f2ee;
}

.site-nav a[aria-current="page"] {
	color:var(--site-ink);
	background:#f4f2ee;
	font-weight:600;
}

.site-main {
	min-height:60vh;
}


.site-footer {
	margin-top:64px;
	background:#1d1d1f;
	color:#d9d7d2;
}

.site-footer-in {
	max-width:1280px;
	margin:0 auto;
	padding:40px 16px 28px;
	display:flex;
	justify-content:space-between;

	gap:32px;
	flex-wrap:wrap;
}

.site-footer-name {
	margin:0 0 8px;
	font-family:Fraunces,Georgia,serif;
	font-size:20px;
	font-weight:600;
	color:#fff;
}

.site-footer-text {
	margin:0;
	max-width:440px;
	font-size:14px;
	line-height:1.6;
	color:#a9a6a0;
}

.site-footer-nav {
	display:flex;
	gap:20px;
	font-size:15px;
}

.site-footer-nav a {
	color:#fff;
	text-decoration:none;
}

.site-footer-nav a:hover {
	text-decoration:underline;
}

.site-footer-base {
	max-width:1280px;
	margin:0 auto;
	padding:16px;
	border-top:1px solid #34343a;
	display:flex;

	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	font-size:13px;
	color:#8d8a84;
}

/* Language selector: EN | FR */
.site-language-selector{display:flex;margin-left:auto;padding:3px;border:1px solid var(--site-line);
  border-radius:999px;background:var(--site-paper)}
.site-language-selector a{min-width:36px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;
  letter-spacing:.04em;line-height:1.4;text-align:center;text-decoration:none;color:var(--site-muted)}
.site-language-selector a:hover{color:var(--site-ink)}
.site-language-selector a[aria-current="true"]{background:var(--site-ink);color:#fff}
.site-language-selector a:focus-visible{outline:2px solid var(--site-red);outline-offset:2px}


.site-saved{display:inline-flex;align-items:center;gap:6px}
.site-saved-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--site-red);
  color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}
.site-saved-count[hidden]{display:none}

@media (max-width:560px){
  .site-language-selector a{min-width:30px;padding:3px 7px;font-size:12px}
}
/* Very narrow phones: logo and language on the first row, menu below */
@media (max-width:420px){
  .site-header-in{flex-wrap:wrap;row-gap:10px}
  .site-nav{width:100%}
}


@media (max-width:560px) {

	.site-logo {
		font-size:18px;
	}

	.site-logo svg {
		width:22px;
		height:22px;
	}

	.site-nav a {
		padding:7px 10px;
		font-size:14px;

	}
}