/* ------------------------------------------------------------
   GLOBAL CLEANUP & FOUNDATION
------------------------------------------------------------ */
/* =======================================
   GLOBAL FORM SYSTEM — DESIGN 4
   Applies to all <forms:*> elements
   ======================================= */

/* Labels */
.form-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: white;
  letter-spacing: 0.02em;
}

/* Text fields, editboxes, and textarea */
.form-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: #0b1120;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  border: 1px solid rgba(148,163,184,0.25);
  transition: 0.25s ease;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 15px rgba(62,147,239,0.35);
}

/* Checkbox row */
.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.8rem;
}

.form-checkbox-row label {
  color: white;
  font-size: 0.95rem;
}

/* Submit button */
.form-submit {
  width: 100%;
  padding: 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  text-transform: uppercase;
  font-family: var(--font-typewriter);
  font-size: 1.05rem;
  cursor: pointer;
  transition: 0.25s ease;
  border: none;
}

.form-submit:hover {
  letter-spacing: 0.02em;
  box-shadow: 0 0 25px rgba(62,147,239,0.35);
}

.form-success {
  text-align: center;
  padding: 2rem;
  color: white;
}

:root {
  --form-bg: rgba(11,17,32,0.8);
  --form-border: rgba(148,163,184,0.3);
  --form-focus-shadow: rgba(62,147,239,0.5);
  --form-label: var(--color-text-muted);
  --form-button-radius: 999px;
  --form-field-radius: 10px;
}
input[type="text"],
input[type="email"],
textarea,
select {
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-field-radius) !important;
}

forms\:submitbutton {
  border-radius: var(--form-button-radius);
}

/* Typography helpers */
.fs-26 { font-size: 1.625rem; }
.fs-12 { font-size: 0.75rem; }
.fs-11 { font-size: 0.6875rem; }
.fs-95 { font-size: 0.95rem; }
.fs-90 { font-size: 0.9rem; }
.fs-80 { font-size: 0.8rem; }

.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-17 { line-height: 1.7; }
.lh-18 { line-height: 1.8; }

/* Utility spacing */
.u-mb-0-5 { margin-bottom: 0.5rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-1-5 { margin-bottom: 1.5rem; }
.u-mb-2 { margin-bottom: 2rem; }
.u-mb-3 { margin-bottom: 3rem; }
.u-mb-4 { margin-bottom: 4rem; }

.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }

.u-pt-1 { padding-top: 1rem; }
.u-pt-2 { padding-top: 2rem; }

.u-maxw-600 { max-width: 600px; }
.u-maxw-650 { max-width: 650px; }
.u-maxw-700 { max-width: 700px; }
.u-maxw-750 { max-width: 750px; }
.u-maxw-800 { max-width: 800px; }
.u-maxw-850 { max-width: 850px; }
.u-maxw-900 { max-width: 900px; }
.u-maxw-1050 { max-width: 1050px; }

.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-text-center { text-align: center; }

.u-color-white { color: #f9fafb; }
.color-muted { color: #9ca3af; }

/* Grids */
.u-grid-auto-320 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
}

.u-grid-auto-240 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

/* Global body background if used with ink-depth-base */
body.ink-depth-base {
	background: radial-gradient(circle at top left, #3b0764 0%, #020617 48%, #020617 100%);
	color: #e5e7eb;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Skip link styling */
.skip-link {
	position: absolute;
	top: -40px;
	left: 6px;
	background: #3b82f6;
	color: #fff;
	padding: 8px 12px;
	text-decoration: none;
	border-radius: 4px;
	z-index: 99999;
	transition: top 0.2s ease, box-shadow 0.2s ease;
	font-size: 0.85rem;
}
.skip-link:focus {
	top: 10px;
	box-shadow: 0 0 0 3px rgba(59,130,246,0.5);
}

/* ------------------------------------------------------------
   GLOBAL BACKDROP / CINEMATIC LAYERS
------------------------------------------------------------ */

.cinematic-global-layers {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: radial-gradient(circle at top left, #1e293b 0%, #020617 45%, #000000 100%);
}

/* starfield */
.global-starfield {
	position: absolute;
	inset: -10%;
	background-image:
		radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15) 0, transparent 40%),
		radial-gradient(circle at 80% 10%, rgba(255,255,255,0.15) 0, transparent 42%),
		radial-gradient(circle at 50% 80%, rgba(255,255,255,0.12) 0, transparent 40%);
	opacity: 0.35;
	mix-blend-mode: screen;
}

/* aurora */
.global-aurora {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(circle at 0% 0%, rgba(56,189,248,0.22) 0, transparent 55%),
		radial-gradient(circle at 85% 0%, rgba(244,63,94,0.25) 0, transparent 60%),
		radial-gradient(circle at 15% 100%, rgba(129,140,248,0.20) 0, transparent 55%);
	mix-blend-mode: screen;
	filter: blur(18px);
	opacity: 0.9;
}

/* inkmist */
.global-inkmist {
	position: absolute;
	inset: -20%;
	background:
		linear-gradient(135deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.4) 40%, rgba(15,23,42,0.95) 100%);
	mix-blend-mode: multiply;
	opacity: 0.9;
}

/* ------------------------------------------------------------
   HERO IMAGES & CINEMATIC ELEMENTS
------------------------------------------------------------ */

.coming-soon {
	padding: 4rem 1.5rem;
}

.coming-soon__layout {
	max-width: 1050px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 2.5rem;
	align-items: center;
	position: relative;
}

/* hero card frame */
.coming-soon::before {
	content: "";
	position: absolute;
	inset: -3rem 0 -3rem 0;
	margin-inline: auto;
	max-width: 1100px;
	border-radius: 28px;
	background:
		radial-gradient(circle at 0% 0%, rgba(56,189,248,0.18) 0, transparent 55%),
		radial-gradient(circle at 100% 0%, rgba(236,72,153,0.28) 0, transparent 58%),
		radial-gradient(circle at 0% 100%, rgba(251,191,36,0.16) 0, transparent 55%),
		linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.96));
	border: 1px solid rgba(148,163,184,0.45);
	box-shadow:
		0 24px 80px rgba(0,0,0,0.85),
		0 0 0 0.5px rgba(148,163,184,0.35);
	z-index: -1;
}

/* wrap hero content so it doesn't stretch */
.coming-soon__content {
	max-width: 620px;
}

.coming-soon__content h1 {
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 1.2rem;
}

.coming-soon__lede {
	margin: 0.2rem 0;
	color: #e5e7eb;
	font-size: 0.95rem;
	line-height: 1.7;
}

/* hero image styling (container) */
.coming-soon-img {
	border-radius: 18px;
	border: 2px solid rgba(148,163,184,0.35);
	box-shadow: 0 14px 35px rgba(0,0,0,0.65);
	overflow: hidden;
}

/* we’ll further constrain the <img> at the end of the file */

/* Left-aligned text inside cinematic hero */
.hero-cinematic h1,
.hero-cinematic p {
	text-align: left;
}

/* Cinematic flicker (used for any punk-style glows) */
@keyframes punkFlicker {
	0%   { transform: translateX(-50%) scale(1);    opacity:0.85; filter:hue-rotate(0deg); }
	50%  { transform: translateX(-52%) scale(1.15); opacity:1;    filter:hue-rotate(20deg); }
	100% { transform: translateX(-50%) scale(0.92); opacity:0.9;  filter:hue-rotate(-15deg); }
}

/* ------------------------------------------------------------
   SECOND HERO / CINEMATIC TITLE
------------------------------------------------------------ */

.coming-soon-hero {
	padding: 5rem 1.5rem;
	position: relative;
}

.coming-soon-hero .hero-inner {
	position: relative;
	z-index: 1;
	text-align: left;
}

.coming-soon-hero .aurora-sheet {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.95)),
		repeating-linear-gradient(
			-45deg,
			rgba(15,23,42,0.0) 0,
			rgba(15,23,42,0.0) 6px,
			rgba(15,23,42,0.5) 6px,
			rgba(15,23,42,0.5) 10px
		);
	border-radius: 18px;
	opacity: 0.9;
	z-index: 0;
}

.coming-soon-hero h1 {
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

.coming-soon-hero p {
	color: #9ca3af;
	font-size: 0.9rem;
	line-height: 1.7;
}

/* ------------------------------------------------------------
   INTRO SECTION (TWO WINGS)
------------------------------------------------------------ */

.introduction {
	padding: 4rem 1.5rem;
}

.introduction .container {
	max-width: 1050px;
	margin: 0 auto;
}

.two-wing-card,
.aac-card--wing {
	background: radial-gradient(circle at top left, rgba(14,116,144,0.35) 0, rgba(15,23,42,1) 55%);
	border-radius: 18px;
	padding: 1.5rem 1.75rem;
	box-shadow: 0 18px 40px rgba(0,0,0,0.7);
	border: 1px solid rgba(248,250,252,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	overflow: hidden;
}

.two-wing-card::before,
.aac-card--wing::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at top right, rgba(244,63,94,0.2) 0, transparent 60%),
		radial-gradient(circle at bottom left, rgba(59,130,246,0.18) 0, transparent 60%);
	opacity: 0.45;
	mix-blend-mode: screen;
	z-index: -1;
}

.two-wing-inner p {
	margin: 0.25rem 0;
	color: #e5e7eb;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------
   TIMELINE SECTION
------------------------------------------------------------ */

.timeline {
	padding: 4rem 1.5rem 5rem;
}

.timeline-container {
	max-width: 900px;
	margin: 0 auto;
}

.timeline-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.timeline-list li {
	position: relative;
	padding-left: 1.75rem;
	color: #e5e7eb;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* timeline vertical line */
.timeline-list li::before {
	content: "";
	position: absolute;
	left: 0.4rem;
	top: 0.8rem;
	bottom: -1.4rem;
	border-left: 2px dashed rgba(244,63,94,0.7);
	opacity: 0.85;
}

/* timeline bullet */
.timeline-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8rem;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: radial-gradient(circle, #f97316 0, #f97316 45%, transparent 70%);
	box-shadow:
		0 0 0 2px rgba(15,23,42,1),
		0 0 25px rgba(248,113,113,0.65);
}

/* variant using aac-card style for each step */
.aac-card--timeline {
	border-radius: 14px;
	background:
		linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,1)),
		radial-gradient(circle at 0 0, rgba(59,130,246,0.15) 0, transparent 55%);
	border: 1px solid rgba(248,250,252,0.08);
	box-shadow: 0 14px 35px rgba(0,0,0,0.75);
	padding: 1rem 1.25rem 1rem 1.75rem;
}

/* timeline phase label */
.timeline-phase {
	font-weight: 600;
	color: #fbbf24;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.78rem;
	display: block;
	margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   AAC CARDS (Used throughout multiple sections)
------------------------------------------------------------ */

.aac-card {
	background:
		linear-gradient(135deg, rgba(15,23,42,0.97), rgba(15,23,42,1)),
		radial-gradient(circle at 0% 0%, rgba(59,130,246,0.15) 0, transparent 55%);
	border-radius: 18px;
	padding: 1.5rem 1.75rem;
	box-shadow:
		0 18px 40px rgba(0,0,0,0.85),
		0 0 0 1px rgba(15,23,42,1);
	border: 1px solid rgba(248,250,252,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	overflow: hidden;
}

/* top “faux window edge” */
.aac-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		rgba(244,63,94,0) 0%,
		rgba(244,63,94,0.7) 12%,
		rgba(59,130,246,0.9) 50%,
		rgba(244,63,94,0.7) 88%,
		rgba(244,63,94,0) 100%);
	opacity: 0.9;
}

/* subtle diagonal pattern */
.aac-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		135deg,
		rgba(15,23,42,0.0) 0,
		rgba(15,23,42,0.3) 48%,
		rgba(15,23,42,0.6) 100%);
	opacity: 0.7;
	mix-blend-mode: soft-light;
	z-index: -1;
}

.aac-card > * {
	position: relative;
	z-index: 1;
}

/* card header row */
.aac-card .card-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.aac-card .card-title {
	margin: 0;
	font-size: 1.05rem;
	color: #f9fafb;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* icon circles */
.aac-card .card-icon {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 30% 20%, rgba(248,250,252,0.4) 0, rgba(15,23,42,0.9) 70%);
	box-shadow:
		0 0 0 1px rgba(15,23,42,1),
		0 0 22px rgba(248,250,252,0.18);
}

/* card body text */
.aac-card .card-body {
	font-size: 0.95rem;
	color: #e5e7eb;
	line-height: 1.7;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* bullet dotted entries inside card body */
.aac-card .card-body p {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.2rem 0;
}

/* ------------------------------------------------------------
   SKILL TAGS & BADGES
------------------------------------------------------------ */

.skill-tag {
	font-size: 0.8rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: rgba(148,163,184,0.18);
	color: #e5e7eb;
	border: 1px solid rgba(148,163,184,0.35);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   FEATURE CARDS (What You’ll Find Here)
------------------------------------------------------------ */

.coming-soon-features {
	padding: 4rem 1.5rem 5rem;
}

.coming-soon-features .container {
	max-width: 1050px;
	margin: 0 auto;
}

.feature-card,
.aac-card--feature {
	background:
		linear-gradient(135deg, rgba(15,23,42,0.97), rgba(15,23,42,1)),
		radial-gradient(circle at top left, rgba(56,189,248,0.22) 0, transparent 60%);
	border-radius: 18px;
	padding: 1.4rem 1.5rem;
	box-shadow:
		0 16px 40px rgba(0,0,0,0.85),
		0 0 0 1px rgba(15,23,42,1);
	border: 1px solid rgba(248,250,252,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-align: left;
	position: relative;
	overflow: hidden;
}

/* Icon wrapper with ripple effect */
.cs-icon-wrapper {
	position: relative;
	font-size: 1.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.cs-ripple {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 999px;
	animation: ripplePulse 2.5s infinite ease-out;
}

@keyframes ripplePulse {
	0%   { transform: scale(1);   opacity: 0.4; }
	70%  { transform: scale(2.1); opacity: 0;   }
	100% { opacity: 0; }
}

/* ------------------------------------------------------------
   QUICK FACTS
------------------------------------------------------------ */

.quick-facts {
	padding: 4rem 1.5rem;
}

.facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

/* ------------------------------------------------------------
   PROFILE SECTION (About Ateisha)
------------------------------------------------------------ */

.writer-profile {
	padding: 4rem 1.5rem 5rem;
}

.profile-container {
	max-width: 1050px;
	margin: 0 auto;
}

.profile-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.1fr);
	gap: 2rem;
	align-items: flex-start;
}

/* left card with portrait */
.profile-image img {
	border-radius: 14px;
	box-shadow: 0 14px 32px rgba(0,0,0,0.75);
}

/* skill list */
.profile-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
}

/* right-hand grid of highlight cards */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
}

/* variant card for writer profile highlight */
.aac-card--simple {
	background:
		linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,1)),
		radial-gradient(circle at 0% 0%, rgba(244,63,94,0.25) 0, transparent 55%);
	border-radius: 18px;
	border: 1px solid rgba(248,250,252,0.12);
	box-shadow:
		0 18px 45px rgba(0,0,0,0.85),
		0 0 0 1px rgba(15,23,42,1);
	padding: 1.4rem 1.5rem;
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------------------
   SERVICES SIDEBAR LAYOUT (if used in other pages)
------------------------------------------------------------ */

.services-layout {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
	position: relative;
}

.services-sidebar {
	position: sticky;
	top: 6rem;
	z-index: 50;
	max-width: 220px;
	padding: 1rem 0;
	border-left: 2px dashed rgba(255,38,142,0.35);
	font-family: "Courier New", monospace;
}

.services-sidebar nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.services-sidebar nav li {
	margin-bottom: 0.75rem;
}

.services-sidebar nav li a {
	display: block;
	padding: 0.4rem 0.2rem;
	color: #9ca3af;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: 0.25s ease;
	border-left: 3px solid transparent;
	font-size: 0.72rem;
}

/* Hover / zine highlight */
.services-sidebar nav li a:hover,
.services-sidebar nav li a:focus {
	color: #38bdf8;
	border-left-color: #38bdf8;
	outline: none;
}

/* Neon pulse for active section */
@keyframes neonPulse {
	0% {
		color: #f97316;
		text-shadow:
			0 0 6px rgba(255,38,142,0.65),
			0 0 12px rgba(255,38,142,0.35),
			0 0 16px rgba(255,38,142,0.25);
		border-left-color: #f97316;
	}
	50% {
		color: #38bdf8;
		text-shadow:
			0 0 10px rgba(255,38,142,0.9),
			0 0 20px rgba(255,38,142,0.6),
			0 0 28px rgba(255,38,142,0.45);
		border-left-color: #38bdf8;
	}
	100% {
		color: #f97316;
		text-shadow:
			0 0 6px rgba(255,38,142,0.65),
			0 0 12px rgba(255,38,142,0.35),
			0 0 16px rgba(255,38,142,0.25);
		border-left-color: #f97316;
	}
}

.services-sidebar nav li a.active {
	animation: neonPulse 1.8s ease-in-out infinite;
	font-weight: 700;
}

/* Mobile toggle for sidebar */
.services-sidebar-mobile-toggle {
	display: none;
	background: rgba(10,10,15,0.45);
	padding: 0.8rem 1rem;
	border: 1px solid rgba(255,38,142,0.4);
	border-radius: 10px;
	font-family: "Courier New", monospace;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	margin-bottom: 1rem;
	box-shadow: 0 0 12px rgba(255,38,142,0.35);
	outline: none;
	font-size: 0.8rem;
}
.services-sidebar-mobile-toggle:hover,
.services-sidebar-mobile-toggle:focus {
	background: rgba(10,10,15,0.6);
	border-color: rgba(255,38,142,0.6);
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* ------------------------------------------------------------
   RESPONSIVE FIXES
------------------------------------------------------------ */

@media (max-width: 1024px) {
	.coming-soon__layout {
		grid-template-columns: minmax(0,1.2fr) minmax(0,0.9fr);
	}
}

@media (max-width: 900px) {
	.profile-layout {
		grid-template-columns: 1fr;
	}
	.services-layout {
		flex-direction: column;
	}
	.services-sidebar {
		position: static;
		max-width: 100%;
		display: none;
		border-left: none;
		border-top: 2px dashed rgba(255,38,142,0.35);
		padding-top: 1rem;
	}
	.services-sidebar-mobile-toggle {
		display: block;
	}
}

@media (max-width: 768px) {
	.coming-soon {
		padding-top: 3rem;
	}
	.coming-soon__layout {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.coming-soon__content h1 {
		text-align: center;
	}
	.coming-soon__content {
		margin: 0 auto;
	}
	.coming-soon-img {
		max-width: 220px;
		margin: 0 auto;
	}
	.writer-profile {
		padding-top: 3rem;
	}
}

/* ===========================================
   IMAGE & MEDIA SAFETY NET (Oncord + Ateisha)
   Ensures content images never overflow cards
=========================================== */

#site-main img,
#site-main picture img,
#site-main figure img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	box-sizing: border-box;
}

/* Normalise any inline dimensions from the editor */
#site-main img[width],
#site-main img[height],
#site-main img[style*="width"],
#site-main img[style*="height"] {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
}

/* Oncord <standard:image> markup, in case it is used */
#site-main standard\:image,
#site-main standard\:image *,
#site-main .standard-image,
#site-main .standard-image * {
	max-width: 100% !important;
	height: auto !important;
}

/* Hero image sizing */
.coming-soon img {
	max-width: 180px;
	height: auto;
}

/* Writer profile portrait */
.writer-profile .profile-image img {
	max-width: 180px;
	height: auto;
	border-radius: 12px;
}

/* Any images inside AAC cards */
.aac-card img {
	max-width: 100% !important;
	height: auto !important;
	object-fit: cover;
}

/* Cap tall infographic-style images inside writer-profile cards */
.writer-profile .aac-card img {
	max-height: 320px;
	object-fit: cover;
}
/* ===========================================
   FINAL ONCORD IMAGE OVERRIDE (WRAPPER + IMG)
   =========================================== */

/* Kill widths added to Oncord wrapper elements */
#site-main .image-block,
#site-main figure.image,
#site-main .oncord-image,
#site-main .image,
#site-main .content-image,
#site-main [class*="image"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Reset inline styles added by the editor */
#site-main .image-block[style],
#site-main figure.image[style],
#site-main .oncord-image[style],
#site-main .image[style],
#site-main img[style*="width"],
#site-main img[style*="height"] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Now constrain actual images */
#site-main img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
}
/* Sticky Cosmic Header */
.cosmic-sticky-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background: rgba(10, 12, 20, 0.75);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 38, 142, 0.35);
	box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Header inner layout */
.cosmic-sticky-header .site-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1250px;
	margin: 0 auto;
	padding: 1rem 2rem;
}

/* Navigation links */
.cosmic-sticky-header .main-menu a {
	color: #e5e7eb;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	transition: 0.25s ease;
}

.cosmic-sticky-header .main-menu a:hover {
	color: #38bdf8;
	text-shadow: 0 0 12px rgba(56,189,248,0.6);
}
/* ==============================================================
   UNIFIED ONCORD FORM THEME — COSMIC PUNK DESIGN 4
   Applies to ALL forms site-wide
   ============================================================== */

/* --------- LABELS --------- */
label,
.forms-row > label {
  font-family: var(--font-typewriter);
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.45rem;
  display: block;
  font-size: 0.9rem;
}

/* --------- BASE INPUTS --------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-typewriter) !important;
  font-size: 1rem !important;

  background: rgba(11,17,32,0.8) !important;
  color: white !important;
  border-radius: 10px !important;

  border: 1px solid rgba(148,163,184,0.3) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.4) !important;

  transition: all 0.25s ease !important;
}

/* Focus Glow */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 15px rgba(62,147,239,0.5) !important;
}

/* --------- TEXTAREA SPECIFICS --------- */
textarea {
  min-height: 140px;
  resize: vertical !important;
}

/* --------- SELECT DROPDOWNS --------- */
select {
  appearance: none !important;
  cursor: pointer;
  background-image: url("/media/website_designs/4/img/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

/* --------- CHECKBOXES & RADIOS --------- */
input[type="checkbox"],
input[type="radio"] {
  appearance: none !important;
  background: rgba(11,17,32,0.9) !important;
  border: 2px solid rgba(148,163,184,0.4) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  cursor: pointer;
  position: relative;
}

/* Checkbox Checkmark */
input[type="checkbox"]:checked::after {
  content: "✓";
  color: var(--color-primary);
  font-size: 16px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Radio Circle */
input[type="radio"] {
  border-radius: 999px !important;
}
input[type="radio"]:checked::after {
  content: "";
  background: var(--color-primary);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  position: absolute;
  inset: 0;
  margin: auto;
}

/* Checkbox + Label Alignment */
.forms-row .forms-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
}

/* --------- FILE UPLOAD --------- */
input[type="file"] {
  padding: 0.75rem !important;
  border-radius: 10px !important;
  background: rgba(11,17,32,0.7) !important;
  color: var(--color-text-muted) !important;
  cursor: pointer;
}

/* --------- SUBMIT BUTTON --------- */
forms\:submitbutton,
button.forms-submit,
input[type="submit"] {
  display: inline-block;
  width: 100%;
  padding: 1rem;
  margin-top: 1.2rem;

  font-family: var(--font-typewriter);
  text-transform: uppercase;
  letter-spacing: var(--tracking-medium);

  background: linear-gradient(135deg,var(--color-primary),var(--color-accent));
  border-radius: 999px;
  cursor: pointer;
  color: white !important;
  font-size: 1.05rem;

  border: 0;
  box-shadow: 0 0 20px rgba(255, 38, 142, 0.35);
  transition: all 0.3s ease;
}

forms\:submitbutton:hover,
button.forms-submit:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(255, 38, 142, 0.6);
}

/* --------- ERROR / VALIDATION --------- */
.forms-validation-error,
.error,
input.error,
textarea.error {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.forms-validation-error {
  font-size: 0.9rem;
  margin-top: 0.3rem;
  display: block;
}

/* --------- SUCCESS MESSAGE --------- */
.forms-success-message,
forms\:successcontent {
  color: white !important;
  background: rgba(15,23,42,0.75);
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 35px rgba(0,0,0,0.45);
}
/* ============================================================
   CONTROLLED CINEMATIC ACTIVATION
   These layers stay hidden until the JS engine sets .cinematic-active
=============================================================== */

.cinematic-global-layers,
.global-starfield,
.global-aurora,
.global-inkmist {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

html.cinematic-active .cinematic-global-layers,
html.cinematic-active .global-starfield,
html.cinematic-active .global-aurora,
html.cinematic-active .global-inkmist {
    opacity: 1;
}
/* ============================================================
   MICRO-MOTION TILT + REVEAL ANIMATIONS
=============================================================== */

/* scroll reveal baseline (hidden) */
.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* scroll reveal active */
.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* tilt motion cards (JS rotates them) */
.card {
    transition: transform 0.25s ease-out;
    will-change: transform;
}

/* hover flare highlight */
.flare {
    box-shadow:
        0 0 32px rgba(255, 60, 180, 0.35),
        0 0 12px rgba(90, 180, 255, 0.3);
}
/* ============================================================
   ATMOSPHERE CANVAS (STABLE ACROSS BROWSERS)
=============================================================== */

.atmosphere-canvas {
    position: fixed !important;
    inset: 0 !important;
    z-index: -4 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}