/* Riad — plaster and sand, Fes blue, emerald and saffron, one zellige tile motif. For riads, hotels, travel, guides. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
	--bg: #f4ead7;
	--fg: #1b2a3e;
	--muted: #6c5f4a;
	--accent: #1f4f8f;
	--accent-fg: #fff;
	--accent-glyph: none;
	--gold: #d9a520;
	--emerald: #166352;
	--font-head: 'Marcellus', Georgia, serif;
	--font-body: 'Nunito Sans', system-ui, sans-serif;

	--btn-radius: 12px;
	--btn-pad: 18px 22px;

	--chip-bg: var(--emerald);
	--chip-border: 2px solid var(--gold);
	--chip-size: 48px;
	--chip-glyph: none;

	--glyph-page: invert(1);
	--pop-bg: #fbf4e4;
	--pop-fg: #1b2a3e;
	--pop-border: var(--gold);
	--pop-shade: rgba(20, 32, 48, .5);
	--field-bg: #fff;
	--star-filter: invert(1);
}

/* the tile band: an eight-point star, tiled, fading out into the page */
body::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 190px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23f4ead7'/%3E%3Cg fill='none' stroke='%231f4f8f' stroke-width='1.8'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='3.4' fill='%23d9a520'/%3E%3Cpath d='M0 0h7L0 7zM56 0v7l-7-7zM0 56h7l-7-7zM56 56h-7l7-7z' fill='%231b7a66'/%3E%3C/svg%3E") 0 0 / 56px 56px;
	-webkit-mask-image: linear-gradient(#000 55%, transparent);
	mask-image: linear-gradient(#000 55%, transparent);
	opacity: .85;
}

.bg {
	width: min(68vw, 262px);
	max-width: none;
	max-height: none;
	aspect-ratio: 3 / 4;
	margin-top: 62px;
	border-radius: 50% 50% 16px 16px / 36% 36% 16px 16px;
	border: 5px solid var(--accent);
	box-shadow: 0 0 0 3px var(--gold), 0 28px 44px -22px rgba(20, 32, 48, .6);
	background: var(--bg);
}
.bg > img { object-position: 50% 15%; }
.bg::after { display: none; }

.header { margin-top: 28px; gap: 8px; }
.header .title h1 { font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.35rem); letter-spacing: .02em; }
.header h2 {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--emerald);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--gold);
}

.social-media { padding-top: 24px; }

.links { padding-top: 28px; gap: 12px; }
.link {
	font-weight: 700;
	letter-spacing: .03em;
	/* a saffron keyline inside the blue */
	outline: 1.5px solid var(--gold);
	outline-offset: -6px;
	box-shadow: 0 10px 20px -12px rgba(31, 79, 143, .8);
}
.link:hover { filter: brightness(1.1); }
.link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#rating-form h4 { font-weight: 400; font-size: 1.2rem; }