/*
Vintage Travel brand foundation (WEB-684 "Editorial Heritage").
Tokens and generics shared by header.css, footer.css and style.css.
Values mirror the main site's css/_src/partials/settings.scss and generics.scss.
*/

/* Fonts */
@font-face{
	font-family: "Inter";
	src: url("../fonts/inter/inter-v20-latin-regular.woff2") format("woff2"), url("../fonts/inter/inter-v20-latin-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Inter";
	src: url("../fonts/inter/inter-v20-latin-italic.woff2") format("woff2"), url("../fonts/inter/inter-v20-latin-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: "Inter";
	src: url("../fonts/inter/inter-v20-latin-500.woff2") format("woff2"), url("../fonts/inter/inter-v20-latin-500.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Inter";
	src: url("../fonts/inter/inter-v20-latin-600.woff2") format("woff2"), url("../fonts/inter/inter-v20-latin-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Inter";
	src: url("../fonts/inter/inter-v20-latin-700.woff2") format("woff2"), url("../fonts/inter/inter-v20-latin-700.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Crimson Pro";
	src: url("../fonts/crimson-pro/crimson-pro-v28-latin-300.woff2") format("woff2"), url("../fonts/crimson-pro/crimson-pro-v28-latin-300.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Crimson Pro";
	src: url("../fonts/crimson-pro/crimson-pro-v28-latin-regular.woff2") format("woff2"), url("../fonts/crimson-pro/crimson-pro-v28-latin-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Crimson Pro";
	src: url("../fonts/crimson-pro/crimson-pro-v28-latin-italic.woff2") format("woff2"), url("../fonts/crimson-pro/crimson-pro-v28-latin-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face{
	font-family: "Crimson Pro";
	src: url("../fonts/crimson-pro/crimson-pro-v28-latin-500.woff2") format("woff2"), url("../fonts/crimson-pro/crimson-pro-v28-latin-500.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Crimson Pro";
	src: url("../fonts/crimson-pro/crimson-pro-v28-latin-600.woff2") format("woff2"), url("../fonts/crimson-pro/crimson-pro-v28-latin-600.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
/* Josefin weights follow the main site: SemiBold file is 500, Bold file is 600 */
@font-face{
	font-family: "Josefin Sans";
	src: url("../fonts/josefin-sans/josefinsans-light-webfont.woff2") format("woff2"), url("../fonts/josefin-sans/josefinsans-light-webfont.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Josefin Sans";
	src: url("../fonts/josefin-sans/josefinsans-regular-webfont.woff2") format("woff2"), url("../fonts/josefin-sans/josefinsans-regular-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Josefin Sans";
	src: url("../fonts/josefin-sans/josefinsans-semibold-webfont.woff2") format("woff2"), url("../fonts/josefin-sans/josefinsans-semibold-webfont.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: "Josefin Sans";
	src: url("../fonts/josefin-sans/josefinsans-bold-webfont.woff2") format("woff2"), url("../fonts/josefin-sans/josefinsans-bold-webfont.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Tokens */
:root{
	--vt-blue-deep: #234356;
	--vt-blue: #4F86A0;
	--vt-blue-action: #2B85AA;
	--vt-blue-teal: #23637B;
	--vt-blue-soft: #EDF3F6;
	--vt-blue-border: #BFD3DC;
	--vt-cream: #F9F7F2;
	--vt-cream-band: #EFEFE9;
	--vt-clay: #E8E4DD;
	--vt-stone: #D6D1CF;
	--vt-stone-strong: #C1BAB7;
	--vt-warm-grey: #8D847F;
	--vt-ink: #222222;
	--vt-text-muted: #5C6670;
	--vt-gold: #B38B3D;
	--vt-gold-soft: #E4D4B4;

	--color-page: var(--vt-cream);
	--color-surface: #FFFFFF;
	--color-band: var(--vt-cream-band);
	--color-surface-warm: var(--vt-clay);
	--color-surface-inverted: var(--vt-blue-deep);
	--color-heading: var(--vt-blue-deep);
	--color-text: var(--vt-ink);
	--color-text-muted: var(--vt-text-muted);
	--color-text-on-dark: #FFFFFF;
	--color-text-on-dark-muted: rgba(255, 255, 255, .78);
	--color-link: var(--vt-blue-action);
	--color-link-hover: var(--vt-blue-deep);
	--color-button: var(--vt-blue-teal);
	--color-button-hover: var(--vt-blue-action);
	--color-border: var(--vt-stone);
	--color-border-strong: var(--vt-stone-strong);
	--color-border-on-dark: rgba(255, 255, 255, .18);
	--color-raised-on-dark: rgba(255, 255, 255, .05);

	--font-body: "Inter", "Open Sans", "Trebuchet MS", system-ui, sans-serif;
	--font-display: "Josefin Sans", "Century Gothic", "Avenir Next", Arial, sans-serif;
	--font-heading: "Crimson Pro", Georgia, serif;

	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(17, 34, 48, .05);
	--shadow-sm: 0 2px 6px rgba(17, 34, 48, .07);
	--shadow-md: 0 6px 18px rgba(17, 34, 48, .10);
	--shadow-lg: 0 14px 34px rgba(17, 34, 48, .13);

	--dur-fast: 180ms;
	--dur-mid: 280ms;
	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* Generics */
*,
*::before,
*::after{
	box-sizing: border-box;
}

body{
	margin: 0;
	background-color: var(--color-page);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:focus-visible{
	outline: 2px solid var(--vt-blue-action);
	outline-offset: 3px;
}

::selection{
	background: var(--vt-gold-soft);
	color: var(--vt-blue-deep);
}

img{
	max-width: 100%;
	height: auto;
}

a{
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-standard);
}

a:hover{
	color: var(--color-link-hover);
}

p{
	font-size: 1rem;
	line-height: 1.55;
	word-spacing: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6{
	color: var(--color-heading);
	font-family: var(--font-display);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.08;
	text-wrap: balance;
}

h1{
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 4vw, 3.25rem);
}

h2{
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.35rem);
}

h3{
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	margin-top: .5ex;
	margin-bottom: 1ex;
}

h4,
h5,
h6{
	font-size: 1.125rem;
	margin-top: .5ex;
	margin-bottom: 1ex;
}

/* Layout */
.page-block{
	width: min(calc(100% - 2.25rem), 1360px);
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 480px){
	.page-block{
		width: min(calc(100% - 3rem), 1360px);
	}
}

@media screen and (min-width: 1024px){
	.page-block{
		width: min(calc(100% - 4rem), 1360px);
	}
}

/* Gold accent rule above section headings */
.heading__section--light{
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.08;
	text-align: center;
	margin: 0;
}

.heading__section--light::before{
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--vt-gold);
	margin: 0 auto .75rem;
}

.heading__section--light.left-align{
	text-align: left;
}

.heading__section--light.left-align::before{
	margin-left: 0;
}

@media screen and (max-width: 764.98px){
	.heading__section--light::before{
		width: 40px;
		margin-bottom: .625rem;
	}
}

.eyebrow{
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.25;
	text-transform: uppercase;
}

.eyebrow--gold{
	color: var(--vt-gold);
}

/* Buttons */
.vt-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .8rem 1.25rem .72rem;
	border: 1px solid var(--color-button);
	border-radius: var(--radius-sm);
	background: var(--color-button);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.vt-button:hover,
.vt-button:focus{
	background: var(--color-button-hover);
	border-color: var(--color-button-hover);
	color: #FFFFFF;
}

.vt-button--secondary{
	background: transparent;
	border-color: var(--vt-blue-action);
	color: var(--vt-blue-action);
}

.vt-button--secondary:hover,
.vt-button--secondary:focus{
	background: var(--vt-blue-soft);
	border-color: var(--vt-blue-action);
	color: var(--vt-blue-deep);
}

.vt-button--text{
	background: transparent;
	border-color: transparent;
	color: var(--vt-blue-action);
	min-height: 0;
	padding: 0;
}

.vt-button--text::after{
	content: '\2192';
}

.vt-button--text:hover,
.vt-button--text:focus{
	background: transparent;
	border-color: transparent;
	color: var(--vt-blue-deep);
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Accessibility */
.screen-reader-text{
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}