@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
:root {
		--font-size: 100%;
		--font-scale-sm: 0.5848rem;
		--font-scale-0: 1.0rem;
		--font-scale-1: 1.71rem;
		--font-scale-2: 2.924rem;
		--font-scale-3: 5.0rem;
		--typeface:  "Roboto Flex", Helvetica, Arial, sans-serif;
		--typeface-alt: "Cormorant Garamond", "Times New Roman", serif;

		--colour-text: #333333;
		--colour-background: #FAF8F5;
		--colour-accent: #A48550;
		--colour-focus: #5EA4CB;
		--colour-headings: #000000;
		--colour-section: #EFECE7;
		--colour-section_2: #D8D4CE;
		--colour-section_3: #662115;

		--max-page-width: 80rem;
		--gap: 1rem;
}


*, *::before, *::after { box-sizing: border-box; }
body {
		-webkit-text-size-adjust: 100%;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		margin: 0;
}
@supports not (-ms-ime-align: auto) {
		details summary { cursor: pointer; }
		details summary > * { display: inline; }
}
::selection {
		background-color: var(--colour-accent);
		color: white;
}
:focus {
		transition: outline-offset 1s ease;
		outline: 2px solid var(--colour-focus) !important;
		outline-offset: 3px;
}
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }


html {
		font-size: var(--font-size);
}
body {
		font-family: var(--typeface);
		font-size: var(--font-scale-0);
		line-height: 1.5;
		background-color: var(--colour-background);
		color: var(--colour-text);
}
p {
		padding-bottom: 1rem;
}
h1, h2, h3 {
		font-family: var(--typeface-alt);
		line-height: 1;
		color: var(--colour-headings);
		padding-bottom: 1rem;
}
body#legal h1, body#legal h2, body#legal h3, body#legal h4 {
		font-family: var(--typeface);
}
h1 {
		font-size: var(--font-scale-3);
}
h2 {
		font-size: var(--font-scale-2);
}
h3 {
		font-size: var(--font-scale-1);
}
.txt-centre {
		text-align: center;
}
.ital {
		font-style: italic;
}
figure { padding: 0; margin: 0; }
.txt-sm { font-size: var(--font-scale-sm); }


a {
		color: var(--colour-accent);
		text-decoration: none;
		text-decoration-color: var(--colour-accent);
}
a:hover, a[aria-selected="true"] {
		color: var(--colour-text);
		text-decoration-color: var(--colour-text);
}
button, a.btn {
		appearance: none;
		-moz-appearance: none;
		unicode-range:-webkit-appearance: none;
		outline: none;
		border: none;
		cursor: pointer;
		display: inline-flex;
		padding: 1em;
		background-color: var(--colour-accent);
		color: white;
		transition: all 0.5s ease-in-out;
}
button:hover, a.btn:hover {
		transform: scale(1.1);
}
a.icon {
		display: inline-flex;
		align-items: center;
}
a.btn.icon {
		padding: 0;
		background-color: transparent;
		margin: 1em 0;
}
a.btn.icon.wa svg {
		stroke: lightgreen;
		stroke-width: 2;
}
nav ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--gap);
}

svg {
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		width: 3rem;
		height: 3rem;
		stroke-width: 1;
}

ul.icon-list {
		--gap: 1rem;
		padding: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
		padding: var(--gap) 0;
}
ul.icon-list li {
		display: flex;
		align-items: center;
}
.icon-list svg {
		width: 2rem;
		height: 2rem;
}
.icon-list.amenities {
		margin-top: 0;
}
.icon-list-vert {
		list-style: none;
		padding: 0;
}


[role="banner"] {
		position: fixed;
		top: 0;
		width: 100%;
		background: transparent;
		transition: all 0.5s ease;
		padding: var(--gap);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
}
[role="banner"].active {
		background: HSLA(211, 31.3%, 37.6%, 0.88);
		gap: var(--gap);
		z-index: 1000;
}
@media screen and (min-width: 40em) {
		[role="banner"].active {
				flex-direction: row;
		}
}
[role="banner"].active a {
		color: white;
}
[role="banner"].active a#logo {
		width: 5rem;
}
[role="banner"].active #nav-primary {
		border: none;
}
[role="banner"].active #nav-primary a:hover,
[role="banner"].active #nav-primary a.active {
		color: #E7BC73;
		text-shadow: none;
		/*text-shadow: 1px 1px 1px black;*/
}
[role="banner"].active #logo-svg {
		width: 5rem;
		height: 5rem;
}
[role="banner"].active #logo-svg > path {
		fill: white;
}
[role="banner"].active #logo-bg {
		display: none;
}
a#logo {
		display: block;
		transition: all 0.5s ease;
}
#nav-primary {
		border-top: 1px solid white;
		transition: all 0.5s ease;
}
#nav-primary a {
		color: white;
		text-transform: uppercase;
		text-shadow: 1px 1px 1px black;
		transition: all 0.75s ease;
}
#nav-primary a:hover, #nav-primary a.active {
		text-decoration: underline;
		text-shadow: 2px 2px 2px var(--colour-accent);
}
svg#logo-svg {
		fill-rule: evenodd;
		clip-rule: evenodd;
		stroke-linejoin: round;
		stroke-miterlimit: 2;
		width: 10rem;
		height: 10rem;
		transition: all 0.5s ease;
}
#logo-svg:hover > #logo-bg {
		display: none;
}
#logo-bg {
		fill: white;
}
#logo-frame {
		fill: rgb(181,155,106);
		fill-fule: nonzero;
}
#logo-anchor-black {
		fill: black;
}
#logo-anchor-gold {
		fill: rgb(181,155,106);
}
#logo-waves {
		fill: rgb(72,153,211);
}
#logo-text {
		fill: rgb(19,19,39);
}

main {
		/*overflow: hidden;*/
}
main > section {
		padding: var(--gap);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
}
#identity { 
		max-width: 20rem; 
}
.container {
		align-items: center;
		justify-content: center;
		gap: var(--gap);
		margin: 0 auto;
		max-width: var(--max-page-width);
}
.container.noflex {
		display: block;
}
.container.aligntop {
		align-items: start;
}
.container > article {
		flex: 1;
}
@media screen and (min-width: 60em) {
		main > section {
				--gap: 5rem;
		}
		.container {
				display: flex;
		}
		.container > aside {
				max-width: 30rem;
		}
		.container > aside.pc50 {
				width: 50%;
				max-width: none;
		}
}
.small-width {
		max-width: 90ch;
}

.grid {
		--gap: 1rem;
		display: grid;
		gap: var(--gap);
		grid-template-columns: repeat(2, 1fr);
}
.grid.g3c {
		grid-template-columns: repeat(3, 1fr);
}
.g_1_1x {
		grid-row: 1;
		grid-column: 1/-1;
}
.g_2_1x {
		grid-row: 2;
		grid-column: 1/-1;
}
.grid img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
.grid-sm  {
		column-width: 300px;
		column-gap: 1em;
}
.grid-sm > figure {
		break-inside: avoid;
}

section#hero {
		height: 100vh;
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		align-items: center;
		justify-items: center;
		padding: 0;
}
section#hero > * {
		grid-row: 1;
		grid-column: 1;
}
video#herovid {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
section#small-hero {
		padding: 0;
}
#small-hero img {
		width: 100%;
		height: 300px;
		object-fit: cover;
}
.heroslider {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index: -1;
		overflow: hidden;
}
.hero__slides {
		display: grid;
		padding: 0;
		margin: 0;
		height: 100%;
}
.hero__slide { 
		grid-row: 1;
		grid-column: 1;
		transition: opacity 2s ease-in-out;
}
.hero__slide img {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
}

#intro aside img {
		width: 100%;
		height: 100%;
}
#intro h2 {
		padding: 0;
}
#intro ul {
		margin: 0 0 var(--gap) 0;
}

#deluxe {
		background: var(--colour-section);
}
#suite {
		background: var(--colour-section_2);
}
#suite .container {
		flex-direction: row-reverse;
}
#facilities {
		background: white;
}
#dining {
		background: var(--colour-section_3);
		color: var(--colour-section);
}
#dining h2 {
		color: var(--colour-section);
}
#contact {
		background: var(--colour-focus);
		color: white;
}
#contact h2, #contact h3 {
		color: white;
}
#contact a {
		color: darkslategrey;
		text-decoration: underline;
}
#contact a:hover { color: var(--colour-accent); }
#contact ul { padding: 0; list-style: none; }
@media screen and (min-width: 50em) {
		#contact iframe {
				width: 600px;
				height: 450px;
		}
}
#contact h3 {
		margin: 0.5em 0 0 0;
		padding: 0;
}


[role="contentinfo"] {
		text-align: center;
		background: black;
		color: white;
		padding: var(--gap) 0;
}

[popover] {
		padding: var(--gap);
		max-width: 40rem;
}


@keyframes reveal {
		from {
				opacity: 0;
				clip-path: inset(45% 20% 45% 20%);
		}
		to {
				opacity: 1;
				clip-path: inset(0% 0% 0% 0%);
		}
}
@keyframes slideleft {
		from { transform: translateX(-20%); }
		to { transform: translateX(0); }
}
@keyframes slideright {
		from { transform: translateX(20%); }
		to { transform: translateX(0); }
}
@keyframes fadein {
		from { opacity: 0; }
		to  { opacity: 1; }
}
.reveal {
		animation: reveal linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 50%;
}
.slide-left {
		animation: slideleft linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 40%;
}
.slide-right {
		animation: slideright linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 40%;
}
.fade-in {
		animation: fadein 1.5s ease-in;
}
@media screen and (max-width: 60em) {
		.slide-left, .slide-right {
				animation: fadein 1.5s ease-in;
		}
}

@media (prefers-reduced-motion: reduce) {
		* {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
				scroll-behavior: auto !important;
		}
}

.glide { 
		max-width: 90vw; 
}
.glide__bullets {
		position: absolute;
		z-index: 2;
		bottom: 2em;
		left: 50%;
		display: inline-flex;
		list-style: none;
		transform: translateX(-50%);
}
.glide__bullet {
		background-color: var(--colour-accent);
		width: 1em;
		height: 1em;
		padding: 0;
		border-radius: 50%;
		border: 2px solid white;
		transition: all 300ms ease-in-out;
		cursor: pointer;
		line-height: 0;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
		margin: 0 0.25em;
}
.glide__bullet:focus {
		outline: none;
}
.glide__bullet:hover, .glide__bullet:focus {
		border: 2px solid white;
		background-color: rgba(255, 255, 255, 0.5);
}
.glide__bullet--active {
		background-color: white;
}

.calendar {
		--gap: 1em;
		background-color: white;
		padding: var(--gap);
		text-align: center;
}
.calendar ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
}
.calendar ul li {
		width: calc(100% / 7);
		padding-bottom: 2px;
		line-height: 1;
		margin-bottom: 0.5em;
}
.calendar ul li span {
		display: block;
		font-size: var(--font-scale-sm);
}
.cal {
		display: none;
}
.cal.active {
		display: block;
}