/* Infiltrators — static rebuild of the original WordPress site
   (Twenty Seventeen theme, dark color scheme). Moved from
   infiltratorsthemovie.com to toppupmedia.com/infiltrators (Oct 2026). */

@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/libre-franklin-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/libre-franklin-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/libre-franklin-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/libre-franklin-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/libre-franklin-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/libre-franklin-latin-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/libre-franklin-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/libre-franklin-latin-800-italic.woff2) format("woff2"); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: #222;
	color: #eee;
	font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

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

a { color: #ddd; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(238, 238, 238, 0.6); transition: color 0.2s, box-shadow 0.2s; }
a:hover, a:focus { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
a:has(img), a.no-line { box-shadow: none; }

h1, h2, h3, h4 { color: #fff; font-weight: 300; line-height: 1.4; margin: 0 0 0.75em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.5em; }
em, i { font-style: italic; }
strong, b { font-weight: 700; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 12px 18px; background: #fff; color: #222; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 48px; }

/* ── HEADER ── */
.custom-header { position: relative; background: #000 url(../images/header/header-1024.jpg) 50% 50% / cover no-repeat; }
.home .custom-header { height: 100vh; min-height: 480px; }
.custom-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 75%, rgba(0,0,0,0.3) 100%); }
@media (min-width: 1025px) { .custom-header { background-image: url(../images/header/header.jpg); } }

.site-branding { position: relative; z-index: 2; padding: 6em 0 3em; }
.home .site-branding { position: absolute; bottom: 70px; left: 0; right: 0; padding: 0 0 3em; }
.site-title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; }
.site-title a { color: #fff; box-shadow: none; }
.site-title a:hover { opacity: 0.7; }
.site-description { margin: 0; color: #fff; font-size: 16px; }

/* ── NAVIGATION ── */
.navigation-top { position: relative; z-index: 10; background: #222; border-top: 1px solid #333; border-bottom: 1px solid #333; font-size: 14px; }
.home .navigation-top { position: absolute; bottom: 0; left: 0; right: 0; }
.home .navigation-top.site-navigation-fixed { position: fixed; top: 0; bottom: auto; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li { display: inline-block; }
.main-navigation a { display: block; padding: 14px 17.5px; color: #ccc; font-weight: 600; box-shadow: none; }
.main-navigation li:first-child a { padding-left: 0; }
.main-navigation a:hover, .main-navigation a[aria-current="page"] { color: #fff; }
.menu-toggle { display: none; }

.menu-scroll-down { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); color: #ccc; padding: 10px; box-shadow: none; line-height: 0; }
.menu-scroll-down:hover { color: #fff; box-shadow: none; }
.menu-scroll-down svg { width: 18px; height: 18px; transform: rotate(90deg); fill: currentColor; }
.site-navigation-fixed .menu-scroll-down { display: none; }

/* ── CONTENT ── */
.site-content { padding: 88px 0 52px; }

.page-layout { display: flex; justify-content: space-between; gap: 6%; }
.page-layout .entry-header { width: 36%; }
.page-layout .entry-content { width: 58%; }

.entry-title { margin: 0 0 1.5em; color: #ddd; font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.single .entry-title { color: #fff; font-size: 26px; font-weight: 300; letter-spacing: 0; text-transform: none; margin-bottom: 0.25em; }
.entry-meta { color: #999; font-size: 11px; font-weight: 800; letter-spacing: 0.1818em; text-transform: uppercase; margin-bottom: 1.5em; }
.entry-meta a { color: #999; box-shadow: none; }

.single-post { max-width: 740px; margin: 0 auto; }
.single-featured-image-header { background: #000; text-align: center; border-bottom: 1px solid #333; }
.single-featured-image-header img { display: block; margin: 0 auto; max-height: 70vh; width: auto; }

.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1.5em; text-align: center; }
.clear::after, .entry-content::after { content: ""; display: table; clear: both; }

figure { margin: 0 0 1.5em; }
figure img { display: block; margin: 0 auto; }
figcaption { color: #999; font-size: 13px; font-style: italic; line-height: 1.6; padding: 0.5em 0; text-align: center; }

/* Trailer (click-to-play facade, loads Vimeo only on click) */
.video-facade { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; margin: 0 0 2em; border: 0; padding: 0; width: 100%; display: block; }
.video-facade::after { content: ""; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 36px no-repeat; border: 2px solid rgba(255,255,255,0.8); transition: background-color 0.2s, transform 0.2s; }
.video-facade:hover::after, .video-facade:focus::after { background-color: rgba(0,0,0,0.85); transform: scale(1.06); }
.video-facade .label { position: absolute; left: 16px; bottom: 12px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 2em; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Home news list */
.home-section { margin-bottom: 4em; }
.section-heading { color: #ddd; font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 2em; padding-bottom: 1em; border-bottom: 1px solid #333; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list > li { display: flex; gap: 32px; align-items: flex-start; padding: 0 0 2.5em; margin: 0 0 2.5em; border-bottom: 1px solid #333; }
.post-list > li:last-child { border-bottom: 0; margin-bottom: 0; }
.post-thumb { flex: 0 0 300px; line-height: 0; box-shadow: none; }
.post-thumb img { width: 300px; aspect-ratio: 900 / 567; object-fit: cover; }
.post-summary h3 { font-size: 22px; margin-bottom: 0.4em; }
.post-summary h3 a { color: #fff; box-shadow: none; }
.post-summary h3 a:hover { box-shadow: inset 0 -2px 0 #fff; }
.post-summary p { color: #ccc; margin-bottom: 0.75em; }
.read-more { font-size: 14px; font-weight: 600; }

/* Cast */
.cast-member { padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid #333; }
.cast-member:last-of-type { border-bottom: 0; }
.cast-member img { float: left; margin: 0.25em 1.25em 0.5em 0; }
.cast-member h2 { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; margin: 0 0 0.25em; }
.cast-member h2 span { font-weight: 300; letter-spacing: 0; }
.cast-links { font-size: 14px; margin: 0 0 1em; }
.cast-links a { margin-right: 0.9em; }
.cast-member p:last-child { clear: both; }
.credits { list-style: none; margin: 0 0 2em; padding: 0; }
.credits li { padding: 6px 0; border-bottom: 1px solid #2e2e2e; color: #ccc; display: flex; justify-content: space-between; gap: 1em; }
.credits li span:first-child { color: #fff; }
.credits li span:last-child { text-align: right; }

/* Filmmakers */
.credit-block { margin: 0 0 2em; }
.credit-block h2 { color: #999; font-size: 11px; font-weight: 800; letter-spacing: 0.1818em; text-transform: uppercase; margin: 0 0 0.5em; }
.credit-block p { margin: 0; }
.credit-block .role { color: #999; font-size: 14px; }

/* Gallery thumbnails */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 2.5em; }
.gallery a { display: block; line-height: 0; box-shadow: none; border: 1px solid #333; overflow: hidden; }
.gallery a:hover, .gallery a:focus { border-color: #ccc; box-shadow: none; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.3s, opacity 0.3s; }
.gallery a:hover img { transform: scale(1.04); opacity: 0.85; }

/* Post navigation */
.post-navigation { border-top: 1px solid #333; border-bottom: 1px solid #333; margin: 3em 0 0; padding: 1.5em 0; display: flex; justify-content: space-between; gap: 2em; font-size: 15px; }
.post-navigation a { box-shadow: none; display: block; }
.post-navigation .nav-subtitle { display: block; color: #999; font-size: 11px; font-weight: 800; letter-spacing: 0.1818em; text-transform: uppercase; margin-bottom: 0.3em; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-navigation a:hover .nav-title { color: #fff; box-shadow: inset 0 -2px 0 #fff; }

/* ── FOOTER ── */
.site-footer { border-top: 1px solid #333; font-size: 14px; padding: 2.5em 0 3em; color: #999; }
.site-footer a { color: #ccc; }
.site-footer a:hover { color: #fff; }
.site-footer nav ul { list-style: none; margin: 0 0 1.5em; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5em; }
.site-footer nav a { font-weight: 600; box-shadow: none; }
.site-footer p { margin: 0 0 0.4em; }

/* ── LIGHTBOX ── */
#lb-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.85); opacity: 0; transition: opacity 0.3s; }
#lb-window { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; }
#lb-overlay.lb-open, #lb-window.lb-open { opacity: 1; }
#lb-titlebar { height: 30px; line-height: 30px; overflow: hidden; font-size: 14px; }
#lb-title { float: left; color: #fff; font-weight: 600; }
#lb-close { float: right; color: #ccc; cursor: pointer; box-shadow: none; text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#lb-close:hover { color: #fff; }
#lb-stage { position: relative; border: 10px solid #111; background: #111; line-height: 0; }
#lb-image { display: block; }
#lb-prev, #lb-next { position: absolute; top: 0; width: 49%; height: 100%; outline: none; box-shadow: none; }
#lb-prev { left: 0; }
#lb-next { right: 0; }
#lb-prev::before, #lb-next::before { content: ""; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(0,0,0,0.6) no-repeat center / 24px; opacity: 0; transition: opacity 0.2s; }
#lb-prev::before { left: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E"); }
#lb-next::before { right: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.6 16.6 10 18l6-6-6-6-1.4 1.4 4.6 4.6z'/%3E%3C/svg%3E"); }
#lb-prev:hover::before, #lb-next:hover::before, #lb-prev:focus::before, #lb-next:focus::before { opacity: 1; }
#lb-data { background: #111; padding: 0 10px 10px; color: #ccc; font-size: 13px; }
#lb-details { overflow: hidden; color: #999; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
#lb-count { float: left; }
#lb-author { float: right; }
#lb-caption { clear: both; padding-top: 6px; line-height: 1.5; }
#lb-caption:empty { padding: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
	.wrap { padding: 0 24px; }
	.site-content { padding: 48px 0 32px; }
	.site-branding { padding: 4em 0 2em; }
	.home .site-branding { bottom: 52px; padding-bottom: 1.5em; }
	.site-title { font-size: 24px; }
	.site-description { font-size: 14px; }
	.home .custom-header { height: 75vh; min-height: 380px; }

	.menu-toggle { display: block; margin: 0 auto; padding: 14px 0; background: none; border: 0; color: #ccc; font: 600 14px "Libre Franklin", sans-serif; cursor: pointer; width: 100%; }
	.menu-toggle svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; fill: currentColor; }
	.main-navigation ul { display: none; padding-bottom: 0.75em; }
	.main-navigation.toggled-on ul { display: block; }
	.main-navigation li { display: block; border-top: 1px solid #333; }
	.main-navigation a, .main-navigation li:first-child a { padding: 12px 0; }
	.menu-scroll-down { display: none; }

	.page-layout { display: block; }
	.page-layout .entry-header, .page-layout .entry-content { width: auto; }
	.alignleft, .alignright { float: none; display: block; margin: 0 auto 1.5em; }
	.post-list > li { display: block; }
	.post-thumb { display: block; margin-bottom: 1em; }
	.post-thumb img { width: 100%; }
	.post-navigation { display: block; }
	.post-navigation .nav-next { margin-top: 1.25em; }
	.gallery { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
	.credits li { display: block; }
	.credits li span:last-child { display: block; text-align: left; color: #999; font-size: 14px; }
}