/*
 * Design "Ember": Immersive's scenes in warm firelight: brown-black, copper light, Fraunces titles, the hero centred on the screen.
 * A variant of Immersive (villa_designs() 'base'): design-immersive.css loads first, this file after it,
 * so only the colours, fonts and a few details change; the scenes, panels and layout are Immersive's.
 */

/* Fonts (self-hosted) */

@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.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: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.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: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.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: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-italic.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: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-ext-400-normal.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: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-ext-500-normal.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 {
	--ink: #130f0c;
	--ink-0: #0a0806;
	--ink-2: #1a1410;
	--ink-2-rgb: 26 20 16;
	--ink-3: #211a15;
	--shade: 12 8 5;
	--glass: rgb(24 17 12 / 0.6);
	--glass-strong: rgb(24 17 12 / 0.78);
	--glass-line: rgb(217 144 94 / 0.2);
	--header-bg: rgb(16 11 8 / 0.74);
	--text-rgb: 242 230 218;
	--field: #2a211b;
	--hover: #352a22;
	--past: #6b5d52;

	--color-text: #f2e6da;
	--color-text-muted: #bfae9d;
	--color-bg-soft: #2a211b;
	--color-bg-sand: #211a15;
	--color-dark: #f2e6da;
	--color-footer: #0a0806;
	--color-day-available: #3b2c20;
	--color-day-booked: #8c3a2b;
	--color-day-past: #211a15;

	--font-heading: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius: 4px;
}

.hero__title {
	font-weight: 400;
	letter-spacing: -0.025em;
}

/* The hero centred: title, text and the search form */
.hero__content {
	max-width: min(1100px, 90vw);
	margin-inline: auto;
	text-align: center;
}

.hero__title,
.hero__text,
.hero .availability-form {
	margin-inline: auto;
}

.hero::after {
	background:
		radial-gradient(70% 60% at 50% 100%, rgb(12 8 5 / 0.78), rgb(12 8 5 / 0) 70%),
		linear-gradient(180deg, rgb(12 8 5 / 0.35), rgb(12 8 5 / 0) 30%);
}

/* A short copper line before each label */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.section-label::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.section-header--center .section-label {
	justify-content: center;
}

.hero .availability-form,
.about:not(.about--no-photo) .about__content,
.prices__card,
.get-in-touch:not(.get-in-touch--no-photo) .get-in-touch__content {
	border-radius: 4px;
	border-top: 2px solid var(--color-accent);
}