/*
Theme Name: LunarBase
Theme URI: https://lunarbase.us/
Author: LunarBase
Author URI: https://lunarbase.us/
Description: A precision-engineered WordPress theme for LunarBase.us — "The Future Is Under Construction." Faithfully reproduces the original static design (mission-control meets lunar construction) and adds a dashboard-managed blog, editable homepage sections, native WordPress menus, and a secure AJAX contact/briefing form that delivers through wp_mail() so WP Mail SMTP handles all mail transport.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lunarbase
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready

LunarBase is distributed under the terms of the GNU GPL v2 or later.

--------------------------------------------------------------------------
ABOUT THIS FILE
--------------------------------------------------------------------------

style.css carries the theme header, the design-token system, the reset and
the base typography only. The remaining layers are separate, individually
cacheable stylesheets loaded in this order:

	assets/css/layout.css       Header, navigation, footer, page scaffolding
	assets/css/components.css   Buttons, forms, homepage sections, cards, UI
	assets/css/content.css      Blog, archives, single posts, search, 404
	assets/css/responsive.css   All breakpoint rules (loaded last)
	assets/css/editor.css       Block editor canvas (editor context only)

Everything below the theme header is the "base" layer.
*/

/* --------------------------------------------------------------------------
Design tokens — see the brand system table in DEVELOPER-HANDOFF.md.
-------------------------------------------------------------------------- */

:root {
	--black: #08090a;
	--ink: #0d0f10;
	--panel: #141719;
	--line: rgba(255, 255, 255, 0.14);
	--muted: #9da2a4;
	--white: #f3f4f0;
	--orange: #ff5a1f;
	--orange-bright: #ff6a2f;

	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
	--body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--gutter: clamp(1.25rem, 8vw, 9rem);
	--section-pad: clamp(6rem, 10vw, 10rem);
	--header-h: 82px;
	--header-h-sm: 68px;
	--max-width: 1440px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition: 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h-sm) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

a:hover,
a:focus {
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
ul,
ol,
dl {
	margin-top: 0;
}

ul,
ol {
	padding-left: 1.25rem;
}

img {
	height: auto;
}

/* --------------------------------------------------------------------------
Base typography
-------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(3rem, 6.4vw, 5.6rem);
	line-height: 0.92;
	text-transform: uppercase;
}

h2 {
	font-size: clamp(2.4rem, 4.6vw, 4rem);
	line-height: 0.96;
	text-transform: uppercase;
}

h3 {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.1;
}

p {
	margin-bottom: 1.25em;
}

strong,
b {
	font-weight: 700;
}

::selection {
	background: var(--orange);
	color: #fff;
}

/* --------------------------------------------------------------------------
Accessibility helpers
-------------------------------------------------------------------------- */

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: -5rem;
	left: 1rem;
	z-index: 1000;
	background: var(--orange);
	color: #fff;
	padding: 0.7rem 1rem;
	font: 500 0.74rem/1 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: top 0.2s var(--ease);
}

.skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
}

/* Reveal animations are progressive enhancement: without JavaScript the
   content must never be hidden. See assets/js/main.js. */
html.no-js .reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}