/* ==========================================================================
   Wine&Siena — landing page.
   Full-screen video with the dark vertical menu exactly where the previous
   site kept it (50px from the top-left, 300px wide, black at 70%).
   To be redesigned later; this only carries it over without the old theme.
   ========================================================================== */

:root {
	--ws-gold: #e0b46b;
	--ws-font-display: 'Cormorant Garamond', Georgia, serif;
	--ws-font-text: 'Raleway', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.ws-landing {
	margin: 0;
	overflow: hidden;
	background: #000;
	color: #eee;
	font-family: var(--ws-font-text);
	-webkit-font-smoothing: antialiased;
}
.ws-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-skip { position: absolute; left: -999px; }

/* video stage */
.ws-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #d8d8d8; }
.ws-stage__video { position: absolute; inset: 0; }
.ws-stage__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100vw, calc(100vh * 16 / 9));
	height: max(100vh, calc(100vw * 9 / 16));
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}
.ws-stage__shield { position: absolute; inset: 0; }

/* the vertical menu, in the previous geometry */
.ws-side {
	position: fixed;
	top: 50px;
	left: 50px;
	z-index: 999;
	width: 300px;
	max-height: calc(100vh - 50px);
	background: rgba(0, 0, 0, .7);
	color: #eee;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ws-side__inner { max-height: calc(100vh - 50px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }
.ws-side__inner::-webkit-scrollbar { display: none; }
.ws-side__logo { display: block; padding: 30px 15px 15px; line-height: 0; text-align: center; }
.ws-side__logo img { width: 100%; max-width: 270px; height: auto; }
.ws-side__edition { margin: 0; padding: 0 35px 16px; display: grid; gap: 2px; text-align: center; }
.ws-side__ed { font: 700 9px/1.4 var(--ws-font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--ws-gold); }
.ws-side__dates { font: 600 14px/1.3 var(--ws-font-text); letter-spacing: .5px; color: #f4f4f4; }
.ws-side__venue { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(244, 244, 244, .6); }
.ws-nav { background: rgba(0, 0, 0, .5); padding: 35px; }
.ws-nav__list { list-style: none; margin: 0; padding: 0; }
.ws-nav__list a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: .5px;
	font-weight: 600;
	color: #a9a9a9;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .03);
	transition: color .3s;
}
.ws-nav__list a:hover, .ws-nav__list a:focus-visible { color: #fff; }
.ws-side__foot { padding: 20px 35px 40px; margin-bottom: 50px; text-align: center; }
.ws-side__copy { margin: 10px 0 0; font-size: 10px; line-height: 1.7; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #f4f4f4; }
.ws-side__wh { display: block; margin: 14px auto 0; width: 140px; }
.ws-side__wh img { width: 140px; height: 52px; object-fit: contain; display: block; }

/* video controls: small, bottom centre, fade out when idle (landing.js) */
.ws-landing__main { position: relative; z-index: 5; height: 100vh; pointer-events: none; }
.ws-stage__controls { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; pointer-events: auto; transition: opacity .5s ease; }
.ws-stage__controls.is-idle { opacity: 0; pointer-events: none; }
.ws-stage__controls:hover { opacity: 1; }
.ws-stage__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .2s, transform .2s;
}
.ws-stage__btn:hover { background: rgba(0, 0, 0, .75); transform: scale(1.05); }
.ws-stage__btn--small { width: 38px; height: 38px; }
.ws-stage__btn--small .ws-stage__ico { width: 16px; height: 16px; }
.ws-stage__btn .ws-stage__ico--pause, .ws-stage__btn .ws-stage__ico--play { width: 18px; height: 18px; }
@media (max-width: 900px) { .ws-stage__controls { bottom: 84px; } }
.ws-stage__ico--play, .ws-stage__ico--sound { display: none; }
.is-paused .ws-stage__ico--pause { display: none; }
.is-paused .ws-stage__ico--play { display: block; }
.is-unmuted .ws-stage__ico--muted { display: none; }
.is-unmuted .ws-stage__ico--sound { display: block; }
:focus-visible { outline: 2px solid var(--ws-gold); outline-offset: 3px; }

/* promo banner (shared markup with the inner pages) */
.ws-promo { position: fixed; bottom: 20px; right: 20px; z-index: 9999; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: opacity .3s, transform .3s; }
.ws-promo.is-hiding { opacity: 0; transform: translateY(20px); }
.ws-promo__link { display: block; line-height: 0; }
.ws-promo img { display: block; max-width: 33vw; height: auto; transition: transform .5s; transform-origin: bottom right; }
.ws-promo img:hover { transform: scale(1.1); }
.ws-promo__close { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; color: #333; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* phones and small tablets: top bar + drawer */
.ws-topbar { display: none; }
.ws-overlay[hidden] { display: none; }
.ws-burger { display: none; }
@media (max-width: 900px) {
	.ws-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
	.ws-topbar__logo { display: block; line-height: 0; }
	.ws-topbar__logo img { height: 34px; width: auto; }
	.ws-burger { margin-left: auto; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .06); display: grid; place-content: center; gap: 5px; cursor: pointer; }
	.ws-burger__bar { display: block; width: 20px; height: 2px; background: #fff; transition: transform .25s, opacity .2s; }
	body.ws-menu-open .ws-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.ws-menu-open .ws-burger__bar:nth-child(2) { opacity: 0; }
	body.ws-menu-open .ws-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.ws-side { top: 0; left: 0; bottom: 0; width: min(88vw, 340px); max-height: none; background: rgba(0, 0, 0, .92); transform: translateX(-105%); }
	.ws-side__inner { max-height: 100vh; padding-top: 64px; }
	body.ws-menu-open .ws-side { transform: none; }
	.ws-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .5); }
	.ws-promo img { max-width: 60vw; }
	.ws-promo { bottom: 8px; right: 8px; }
}