/* 286 Tour – Haiti Landing. Everything is scoped to #tvh / body.tvh-landing so theme + Elementor styles can't leak in. */

@font-face {
	font-family: 'Glacial';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://286tour.com/wp-content/uploads/2026/03/GlacialIndifference-Bold.woff2') format('woff2'),
	     url('https://286tour.com/wp-content/uploads/2026/03/GlacialIndifference-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Glacial';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://286tour.com/wp-content/uploads/2026/03/GlacialIndifference-Regular.woff2') format('woff2'),
	     url('https://286tour.com/wp-content/uploads/2026/03/GlacialIndifference-Regular.woff') format('woff');
}

body.tvh-landing {
	--tvh-bg: #000;
	--tvh-fg: #f7f5f0;
	--tvh-fg-2: rgba(247, 245, 240, .72);
	--tvh-fg-3: rgba(247, 245, 240, .45);
	--tvh-line: rgba(255, 255, 255, .12);
	--tvh-blue: #2a9fd8;        /* pulled from the flyer */
	--tvh-blue-deep: #0d2b4a;
	--tvh-red: #cf1f2b;
	--tvh-wa: #25d366;
	--tvh-head: 'Glacial', 'Inter', system-ui, sans-serif;
	--tvh-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	margin: 0;
	background: var(--tvh-bg) !important;
	color: var(--tvh-fg);
	font-family: var(--tvh-text);
	-webkit-font-smoothing: antialiased;
}

#tvh { display: block; width: 100%; overflow-x: hidden; background: #000; color: var(--tvh-fg); font-family: var(--tvh-text); line-height: 1.5; }
#tvh *, #tvh *::before, #tvh *::after { box-sizing: border-box; }
#tvh img, #tvh video { display: block; max-width: 100%; height: auto; }
#tvh a { color: inherit; }
#tvh p { margin: 0; }
#tvh .tvh-wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px; }
#tvh .tvh-wrap-narrow { max-width: 720px; }
#tvh .tvh-center { text-align: center; }

/* Top / logo */
#tvh .tvh-top { display: flex; justify-content: center; padding: 34px 20px 8px; }
#tvh .tvh-logo { width: 200px; max-width: 56vw; height: auto; }

/* Video */
#tvh .tvh-video { padding: 16px 0 0; }
#tvh .tvh-video .tvh-wrap { max-width: 720px; }
#tvh .tvh-player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; outline: 0; }

/* Date strip */
#tvh .tvh-strip { padding: 22px 0 0; }
#tvh .tvh-strip-in { display: flex; align-items: center; justify-content: center; gap: 14px 22px; flex-wrap: wrap; max-width: 720px; padding-top: 18px; border-top: 1px solid var(--tvh-line); }
#tvh .tvh-strip-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-family: var(--tvh-head); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--tvh-fg); }
#tvh .tvh-strip-tag { font-size: 11px; letter-spacing: .18em; color: var(--tvh-fg-3); }
#tvh .tvh-strip-city { color: var(--tvh-blue); font-weight: 700; }
#tvh .tvh-strip-sep { color: var(--tvh-fg-3); }

/* Buttons */
#tvh .tvh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; font-family: var(--tvh-head); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
#tvh .tvh-btn:active { transform: scale(.98); }
#tvh .tvh-btn-light { background: var(--tvh-fg); color: #000; }
#tvh .tvh-btn-light:hover { background: #fff; }
#tvh .tvh-btn-wa { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: 'icon text num'; align-items: center; column-gap: 12px; width: 100%; max-width: 440px; background: var(--tvh-wa); color: #04210f; margin-top: 22px; padding: 14px 20px; text-align: left; }
#tvh .tvh-btn-wa:hover { background: #30e676; }
#tvh .tvh-btn-wa svg { grid-area: icon; width: 22px; height: 22px; display: block; }
#tvh .tvh-wa-text { grid-area: text; line-height: 1.2; }
#tvh .tvh-wa-num { grid-area: num; font-family: var(--tvh-text); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; opacity: .85; white-space: nowrap; }

/* Flyer + tickets */
#tvh .tvh-show { padding: 56px 0 20px; }
#tvh .tvh-show-grid { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; }
#tvh .tvh-flyer { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(42, 159, 216, .18), 0 10px 30px rgba(0, 0, 0, .6); }
#tvh .tvh-flyer img { width: 100%; }
#tvh .tvh-kicker { font-family: var(--tvh-head); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--tvh-blue); margin-bottom: 10px; }
#tvh .tvh-h1 { margin: 0 0 10px; font-family: var(--tvh-head); font-weight: 700; font-size: 44px; line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; color: var(--tvh-fg); }
#tvh .tvh-h1 span { color: var(--tvh-fg-2); font-weight: 400; }
#tvh .tvh-venue { font-family: var(--tvh-head); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; color: var(--tvh-fg); }
#tvh .tvh-venue span { display: block; margin-top: 2px; font-family: var(--tvh-text); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--tvh-fg-3); }
#tvh .tvh-h2 { margin: 30px 0 12px; font-family: var(--tvh-head); font-weight: 400; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; color: var(--tvh-fg); }
#tvh .tvh-outlets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#tvh .tvh-outlets li { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border: 1px solid var(--tvh-line); border-radius: 10px; font-size: 15px; }
#tvh .tvh-outlets li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tvh-red); flex: 0 0 8px; transform: translateY(-1px); }
#tvh .tvh-outlets strong { font-weight: 600; color: var(--tvh-fg); }
#tvh .tvh-outlets span { font-size: 12px; color: var(--tvh-fg-3); }
#tvh .tvh-note { margin-top: 12px; font-size: 13px; color: var(--tvh-fg-2); }

/* FAQ */
#tvh .tvh-faq { padding: 56px 0 10px; }
#tvh .tvh-faq .tvh-h2 { margin: 0 0 18px; font-size: 28px; letter-spacing: .12em; }
#tvh .tvh-faq-list { border-top: 1px solid var(--tvh-line); }
#tvh .tvh-q { border-bottom: 1px solid var(--tvh-line); }
#tvh .tvh-q summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-size: 16px; font-weight: 500; color: var(--tvh-fg); }
#tvh .tvh-q summary::-webkit-details-marker { display: none; }
#tvh .tvh-q summary:hover { color: #fff; }
#tvh .tvh-q-icon { position: absolute; right: 2px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border: 1px solid var(--tvh-line); border-radius: 50%; }
#tvh .tvh-q-icon::before, #tvh .tvh-q-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--tvh-fg); transform: translate(-50%, -50%); transition: transform .25s; }
#tvh .tvh-q-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
#tvh .tvh-q[open] .tvh-q-icon::after { transform: translate(-50%, -50%) rotate(0); }
#tvh .tvh-a { padding: 0 44px 20px 0; font-size: 15px; font-weight: 300; color: var(--tvh-fg-2); }
#tvh .tvh-a a { color: var(--tvh-fg); text-decoration: underline; text-underline-offset: 3px; }
#tvh .tvh-a strong { color: var(--tvh-fg); font-weight: 500; }

/* Join the movement – smaller than before, inline row */
#tvh .tvh-join { padding: 64px 0 40px; text-align: center; }
#tvh .tvh-join-title { font-family: var(--tvh-head); font-size: 26px; letter-spacing: .02em; text-transform: uppercase; color: var(--tvh-fg); }
#tvh .tvh-join-title strong { font-weight: 700; }
#tvh .tvh-join-sub { margin: 6px auto 20px; max-width: 460px; font-size: 13.5px; font-weight: 300; letter-spacing: -.2px; color: var(--tvh-fg-2); }
#tvh .tvh-form { max-width: 620px; margin: 0 auto; }
#tvh .tvh-form-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 8px; }
#tvh .tvh-form input { width: 100%; min-height: 44px; padding: 10px 14px; background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding-left: 20px; color: #fff; font-family: var(--tvh-text); font-size: 13px; letter-spacing: .04em; outline: 0; -webkit-appearance: none; }
#tvh .tvh-form input::placeholder { color: rgba(255, 255, 255, .55); }
#tvh .tvh-form input:focus { border-color: #fff; }
#tvh .tvh-form input:user-invalid { border-color: var(--tvh-red); }
#tvh .tvh-btn-sub { background: var(--tvh-fg); color: #000; border-radius: 999px; padding: 10px 26px; font-size: 14px; }
#tvh .tvh-btn-sub:hover { background: #fff; }
#tvh .tvh-btn-sub[disabled] { opacity: .6; cursor: wait; }
#tvh .tvh-form-msg { min-height: 20px; margin-top: 12px; font-size: 13px; color: #b6b6b6; }
#tvh .tvh-form-msg.is-error { color: #ff6b6b; }
#tvh .tvh-form-msg.is-success { color: #8fe3a9; }
#tvh .tvh-form.is-done .tvh-form-row { display: none; }
#tvh .tvh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer */
#tvh .tvh-footer { padding: 24px 20px 120px; text-align: center; font-size: 11px; color: var(--tvh-fg-3); }
#tvh .tvh-footer a { text-decoration: none; color: var(--tvh-fg-2); }
#tvh .tvh-footer a:hover { color: #fff; }

/* Mobile */
@media (max-width: 767px) {
	#tvh .tvh-top { padding-top: 28px; }
	#tvh .tvh-video { padding-top: 10px; }
	#tvh .tvh-player { border-radius: 6px; }
	#tvh .tvh-strip-text { font-size: 13px; }
	#tvh .tvh-show { padding-top: 44px; }
	#tvh .tvh-show-grid { grid-template-columns: 1fr; gap: 28px; }
	#tvh .tvh-flyer { max-width: 86vw; margin: 0 auto; }
	#tvh .tvh-show-info { text-align: center; }
	#tvh .tvh-h1 { font-size: 36px; }
	#tvh .tvh-outlets li { justify-content: center; }
	#tvh .tvh-btn-wa { margin-left: auto; margin-right: auto; grid-template-columns: 22px auto; grid-template-areas: 'icon text' 'num num'; justify-content: center; row-gap: 4px; padding: 14px 18px 12px; text-align: center; }
	#tvh .tvh-btn-wa .tvh-wa-text { font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
	#tvh .tvh-wa-num { text-align: center; opacity: .8; font-size: 13px; }
	#tvh .tvh-faq { padding-top: 48px; }
	#tvh .tvh-join { padding: 52px 0 30px; }
	#tvh .tvh-join-title { font-size: 22px; }
	#tvh .tvh-form-row { grid-template-columns: 1fr; }
	#tvh .tvh-footer { padding-bottom: 150px; }
}

/* ---------------------------------------------------------------------------
   Intro: the rigged 286 eagle (eagle-fly.js) flies in, settles under "286 TOUR — HAITI", then lands on the
   eagle in the logo while the page fades in. ~2s, once per session. The <html> gets .tvh-intro-on before
   paint (inline script in the template); landing.js adds .tvh-intro-reveal on the way to the logo and
   removes both classes at the end.
   --------------------------------------------------------------------------- */
#tvh-intro { display: none; }
html.tvh-intro-on { background: #000; }
html.tvh-intro-on #tvh { opacity: 0; }
html.tvh-intro-on.tvh-intro-reveal #tvh { opacity: 1; }
html.tvh-intro-on #tvh-intro { display: block; }
html.tvh-intro-on #tvcn { opacity: 0 !important; pointer-events: none !important; }
#tvh { transition: opacity .5s ease; }

#tvh-intro { position: fixed; inset: 0; z-index: 9000; overflow: hidden; cursor: pointer; background: rgba(0, 0, 0, 1); transition: background-color .5s ease; --tvh-ew: min(36vw, 260px); }
html.tvh-intro-reveal #tvh-intro { background: rgba(0, 0, 0, 0); pointer-events: none; }

/* soft stage light from the flyer */
#tvh-intro .tvh-intro-glow { position: absolute; left: 50%; top: 48%; width: 90vmin; height: 90vmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(42, 159, 216, .16), rgba(13, 43, 74, .08) 45%, rgba(0, 0, 0, 0) 75%); animation: tvh-glow 1.2s ease-out both; transition: opacity .4s ease; }
html.tvh-intro-reveal #tvh-intro .tvh-intro-glow { opacity: 0; }

/* the eagle's rest box (same proportions as the logo); eagle-intro.js moves and scales it, the canvas inside draws the wings */
#tvh-intro .tvh-intro-eagle { position: absolute; width: var(--tvh-ew); aspect-ratio: 1000 / 426.56; left: calc(50% - var(--tvh-ew) / 2); top: calc(48% - var(--tvh-ew) * .21328); opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }

/* thin spaced line under the eagle */
#tvh-intro .tvh-intro-line { position: absolute; left: 0; right: 0; margin: 0; top: calc(48% + var(--tvh-ew) * .21328 + 22px); text-align: center; font-family: 'Glacial', 'Inter', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: rgba(247, 245, 240, .72); opacity: 0; transition: opacity .3s ease; }
#tvh-intro .tvh-intro-line.is-on { opacity: 1; }
#tvh-intro .tvh-intro-line span { display: inline-block; width: 18px; height: 1px; margin: 0 14px 3px; background: rgba(247, 245, 240, .35); vertical-align: middle; }

@keyframes tvh-glow { from { opacity: 0; } to { opacity: 1; } }