/*
Theme Name: Blank
Author: Anon Code
Description: Lightweight one-page theme: logo, hero, about and an optional call to action, edited in Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: blank
*/

@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("assets/fonts/rajdhani-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("assets/fonts/rajdhani-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Exo 2"; font-weight: 400; font-display: swap; src: url("assets/fonts/exo-2-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Exo 2"; font-weight: 400; font-display: swap; src: url("assets/fonts/exo-2-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 500; font-display: swap; src: url("assets/fonts/saira-semi-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira Semi Condensed"; font-weight: 500; font-display: swap; src: url("assets/fonts/saira-semi-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--accent: #ca2c2e;
	--accent-text: #e84e50;
	--bg: #151516;
	--deep: #0c0c0d;
	--line: #2a2a2c;
	--muted: #9a9a9e;
	--soft: #cfcfd2;
	--pixels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23ca2c2e' d='M4 0h1v1H4zM6 1h1v1H6zM8 1h1v1H8zM5 2h1v1H5zM2 3h1v1H2zM4 3h1v1H4zM6 3h1v1H6zM8 3h1v1H8zM3 4h1v1H3zM7 4h1v1H7zM0 5h1v1H0zM2 5h1v1H2zM4 5h1v1H4zM6 5h1v1H6z'/%3E%3C/svg%3E");
	--pixels-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23151516' d='M4 0h1v1H4zM6 1h1v1H6zM8 1h1v1H8zM5 2h1v1H5zM2 3h1v1H2zM4 3h1v1H4zM6 3h1v1H6zM8 3h1v1H8zM3 4h1v1H3zM7 4h1v1H7zM0 5h1v1H0zM2 5h1v1H2zM4 5h1v1H4zM6 5h1v1H6z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--accent) var(--deep); scrollbar-width: thin; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font: 15px/1.6 "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffffff; background: var(--bg); }
a { color: var(--accent-text); }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.top { padding: 28px 0; background: var(--deep); border-bottom: 1px solid var(--line); }
.logo { display: inline-block; line-height: 0; text-decoration: none; }
.logo img { display: block; width: auto; max-width: 300px; height: auto; max-height: 54px; }
.custom-logo-link { display: inline-block; line-height: 0; }
.custom-logo { display: block; width: auto; max-width: 300px; height: auto; max-height: 54px; }
.logo-text { font: 700 28px/1 Rajdhani, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #ffffff; }

main { flex: 1; }
.hero { padding: 72px 0 56px; }
.kicker { margin: 0 0 14px; font: 500 13px/1.2 "Saira Semi Condensed", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero h1 { margin: 0; max-width: 820px; font: 700 clamp(38px, 6vw, 64px)/.98 Rajdhani, system-ui, sans-serif; text-transform: uppercase; }
.hl { color: var(--accent-text); }
.lead { max-width: 720px; margin: 22px 0 0; font-size: 17px; line-height: 1.65; color: var(--soft); }

.box { margin: 0 0 40px; padding: 40px 40px 56px; background: var(--pixels) no-repeat right bottom / 144px 96px, #000000; border-top: 3px solid var(--accent); border-radius: 2px; }
.box h2 { margin: 0 0 14px; font: 700 30px/1.05 Rajdhani, system-ui, sans-serif; text-transform: uppercase; }
.box-text { max-width: 760px; color: var(--soft); }
.box-text p { margin: 0 0 1em; }
.box-text p:last-child { margin-bottom: 0; }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin: 0 0 56px; padding: 40px; background: var(--pixels-dark) no-repeat right bottom / auto 100%, linear-gradient(120deg, #d33034 0%, #b11b20 45%, #8f080c 100%); border-radius: 2px; }
.cta-copy { max-width: 640px; }
.cta h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 38px)/1 Rajdhani, system-ui, sans-serif; text-transform: uppercase; color: #ffffff; }
.cta .hl { color: #000000; }
.cta p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #ffffff; }
.cta-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px; font: 13px/1 "Exo 2", system-ui, sans-serif; text-transform: uppercase; text-decoration: none; color: #ffffff; background: #000000; border-radius: 6px; transition: background-color .2s ease, color .2s ease; }
.cta-btn:hover, .cta-btn:focus-visible { color: #000000; background: #ffffff; }

.foot { padding: 26px 0; font-size: 12px; line-height: 18px; color: var(--muted); background: var(--deep); border-top: 1px solid var(--line); }
.foot p { margin: 0; }

@media (max-width: 820px) {
	.hero { padding: 48px 0 40px; }
	.box { padding: 28px 22px 44px; background-size: 108px 72px, auto; }
	.cta { flex-direction: column; align-items: flex-start; padding: 32px 22px; background-size: auto 70%, auto; }
	.cta-btn { width: 100%; }
}
@media (max-width: 480px) {
	.wrap { padding: 0 16px; }
	.logo img, .custom-logo { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.cta-btn { transition: none; }
}