/*
	Qampli LLC -- Style

	The custom properties below carry forward the current site's visual
	values as PLACEHOLDERS for this structural scaffold -- actual
	typography/color/spacing decisions come later in the design phase
	(see website_rebuild_stage.md). Only the code organization is final
	here, not the values themselves.
*/

/*
	Mondapick -- self-hosted webfont (converted from the Envato TTF
	source to WOFF2 via fonttools; see website_rebuild_stage.md's font
	candidates section). Assigned to .readable, the main body/readable
	text role -- see --font-family below. font-display:swap shows the
	fallback font immediately rather than invisible text while this
	loads, then swaps once it's ready.

	License: Envato Elements item "Modern Elegant Font Modern Elegant"
	by uicreativenet, licensed to Ken Jones for qampli.com (license code
	6MQZFY7DX8, 2026-09-04). Envato Elements License
	(https://elements.envato.com/license-terms) permits self-hosting for
	display; do not offer the font file itself for download or let users
	create new text with it directly.
*/
@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-Thin.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-ThinItalic.woff2') format('woff2');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-Semiblod.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-Extrabold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mondapick';
	src: url('../fonts/mondapick/Mondapick-ExtraboldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/*
	Malking -- self-hosted webfont (converted from the Envato TTF
	source to WOFF2 via fonttools). Only one real weight exists in the
	source file. Registered twice, at both 400 and 700, pointing to the
	same file -- headings request font-weight:700, and without an exact
	match at 700 the browser synthesizes ("faux") bold by algorithmically
	thickening the 400 outlines, which squeezes the counters (the white
	space inside letters). Registering the same face at 700 too gives the
	browser an exact match, so it renders the real glyphs with no
	synthesis (same fix applied previously for Hevernost, which this
	replaces as the .topic font).

	License: Envato Elements item "Malking - Modern Techno Logo Font" by
	HamzStudio, licensed to Ken Jones for qampli.com (license code
	47T5QRHAVF, 2026-09-05). Envato Elements License
	(https://elements.envato.com/license-terms) permits self-hosting for
	display; do not offer the font file itself for download or let users
	create new text with it directly.
*/
@font-face {
	font-family: 'Malking';
	src: url('../fonts/malking/Malking.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Malking';
	src: url('../fonts/malking/Malking.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
	Decoment -- --font-brand (the "Qampli LLC" H1). Only one real weight
	in the source file, registered at
	both 400 and 700 (same reasoning as Hevernost/Malking above: gives
	the browser an exact match for H1's font-weight:700 instead of
	synthesizing/faux-bolding it).

	License: Envato Elements item "Decoment Font" by alit_design,
	licensed to Ken Jones for qampli.com (license code QBRDJNXP85,
	2026-09-05). Envato Elements License
	(https://elements.envato.com/license-terms) permits self-hosting for
	display; do not offer the font file itself for download or let users
	create new text with it directly.
*/
@font-face {
	font-family: 'Decoment';
	src: url('../fonts/decoment/Decoment-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Decoment';
	src: url('../fonts/decoment/Decoment-Regular.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
	Clarity Nuvo -- trial for --font-locator (the header subtitle line).
	Ships proper WOFF2 for multiple real weights already, no conversion
	needed.

	License: Envato Elements item "Clarity Nuvo - Clean & Modern
	Sans-Serif Typeface" by designova, licensed to Ken Jones for
	qampli.com (license code WG93LV24AK, 2026-09-04). Envato Elements
	License (https://elements.envato.com/license-terms) permits
	self-hosting for display; do not offer the font file itself for
	download or let users create new text with it directly.
*/
@font-face {
	font-family: 'Clarity Nuvo';
	src: url('../fonts/clarity-nuvo/ClarityNuvo-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Clarity Nuvo';
	src: url('../fonts/clarity-nuvo/ClarityNuvo-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-bg: #180000;
	--color-fg: rgba(255, 255, 255, 0.80);
	--color-fg-bold: #ffffff;
	--color-fg-light: rgba(255, 255, 255, 0.6);
	--color-border: rgba(255, 255, 255, 0.38);
	--color-border-light: rgba(255, 255, 255, 0.125);

	--color-accent: #9f38ee;
	--color-contact-link: #fce479;

	--font-family: 'Mondapick', sans-serif; /* .readable -- main body text */
	--font-weight: 400;
	--font-weight-bold: 700;
	--letter-spacing: -0.01em;

	/*
		Font slots for the design phase (contrast/repetition via distinct
		typefaces per element). Each defaults to the base font for now --
		fonts not chosen yet, just reserving the placement.
	*/
	--font-brand: 'Decoment', var(--font-family);   /* the "Qampli LLC" H1 */
	--font-topic: 'Malking', var(--font-family); /* .topic sections (About/QampliLIST/Contact) */
	--font-locator: 'Clarity Nuvo', var(--font-family); /* .locator (the header subtitle line) */

	--space-unit: 2em;

	/*
		--content-width -- shared column width for #main and #header, so
		the header aligns to (and grows with) the same column instead of
		sitting pinned to the page's raw left padding. Expressed partly in
		em so it grows in step with the fluid font-size below (46em at the
		~17px baseline is close to the old fixed 640px cap; at the larger
		end of the font-size clamp it grows past that for large/4K
		screens, per the user's request that "everything would have to
		enlarge" together).
	*/
	--content-width: clamp(480px, 55vw, 46em);
}

/* Reset (minimal -- only what this site actually needs) */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background-color: var(--color-bg);
	padding: 5em 5em 5em 5em;

	@media (max-width: 1680px) {
		padding: 4.5em 4.5em 4.5em 4.5em;
	}

	@media (max-width: 736px) {
		padding: 2.5em 2.5em 2.5em 2.5em;
	}

	@media (max-width: 360px) {
		padding: 1.25em 1.25em 1.25em 1.25em;
	}

	> * {
		position: relative;
		z-index: 2;
	}
}

/*
	Typography -- font-size is fluid (clamp) rather than a fixed 13pt, so
	the whole page actually grows on larger screens instead of staying
	pinned to a physically tiny size on a 4K display. Nearly everything
	else (spacing, headings, --space-unit) is already sized in em relative
	to this, so this one value cascades size increases through most of
	the page. 17px is the old ~13pt baseline (unchanged on typical laptop/
	desktop widths); it grows past that above ~1500px of viewport width,
	capped at 26px so it doesn't run away on ultrawide monitors.
*/
body,
input,
select,
textarea {
	color: var(--color-fg);
	font-family: var(--font-family);
	font-size: clamp(17px, 12px + 0.36vw, 26px);
	font-weight: var(--font-weight);
	letter-spacing: var(--letter-spacing);
	line-height: 1.65em;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: dotted 1px var(--color-border);
	transition: color 0.2s ease, border-bottom-color 0.2s ease;

	&:visited {
		color: var(--color-contact-link);
	}

	&:hover {
		color: var(--color-contact-link) !important;
		border-bottom-color: transparent;
	}
}

strong,
b {
	color: var(--color-fg-bold);
	font-weight: var(--font-weight-bold);
}

em,
i {
	font-style: italic;
}

p {
	margin: 0 0 var(--space-unit) 0;
	text-wrap: balance;
}

/*
	.readable -- explicit class for regular body text (as opposed to
	relying on inheritance from body's own font-family). Matches the
	base font already, but being explicit here means body text stays
	correct even if something else nearby changes its own font-family
	later -- the same reasoning that led to .explainer replacing the
	old h2 + p position-based rule.
*/
.readable {
	font-family: var(--font-family);
}

h1,
h2,
h3 {
	color: var(--color-fg-bold);
	font-weight: var(--font-weight-bold);
	line-height: 1em;
	margin: 0 0 calc(var(--space-unit) / 2) 0;

	a {
		color: inherit;
		text-decoration: none;
	}
}

h1 {
	font-size: 2.6em;
	line-height: 1.28em;
	margin: 0 0 0.1em 0;
}

h2 {
	font-size: 1.77em;
	line-height: 1.7em;
	margin-bottom: 0;
}

h3 {
	font-size: 1.37em;
	line-height: 1.7em;
	margin-bottom: 0;
}

/* Header */
/*
	Aligned to the same --content-width column as #main (not the raw
	body padding edge), so the header and the paragraph column below it
	share the same left/right bounds and move together as that column's
	fluid width changes -- rather than the header sitting pinned to the
	far page edge while the column floats centered on wide screens.
*/
#header {
	display: block;
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;

	h1 {
		font-family: var(--font-brand);
		font-size: 3.25em;
		margin: 0 0 -0.05em 0;
	}

	p {
		font-size: 1.35em;
		line-height: 1.65em;
	}

	a {
		color: inherit;
	}

	.back-link {
		font-size: 0.9em;
		margin-top: 0.5em;
	}

	@media (max-width: 736px) {
		h1 {
			font-size: 2em;
		}

		p {
			font-size: 1em;
		}
	}
}

p.locator {
	font-family: var(--font-locator);
	line-height: 1.15;
	margin-left: 0.6em;

	@media (min-width: 981px) {
		font-size: 1.1em;
	}

	@media (min-width: 1281px) {
		font-size: 1.2em;
	}
}

/*
	Section / homepage content -- max-width is fluid (clamp) rather than
	a fixed 640px. A hard pixel cap makes the column exactly 640px on
	every desktop viewport wider than ~700px, so long paragraphs always
	wrap at the same points -- including leaving a single orphan word
	(e.g. "over") stranded alone on the last line, every time, regardless
	of how wide the actual window is. Scaling with viewport width lets
	the wrap points shift instead of being permanently fixed.
*/
#main {
	max-width: var(--content-width);
	margin: 0 auto;
}

section.topic {
	text-align: center;
	margin: 0 0 3em 0;

	&:last-child {
		margin-bottom: 0;
	}

	/*
		Scoped to the heading only -- font-family is inherited, so
		setting it on the whole section previously cascaded down into
		the paragraphs too (that was the "child classes taking on the
		parent's font" bug). .topic is a headings-only treatment; body
		text inside these sections uses .readable/.explainer/.callout
		instead, whichever applies.
	*/
	h2 {
		font-family: var(--font-topic);
	}

	.explainer {
		margin-top: -1em;
		font-size: 1.25em;
		line-height: 1.5em;
	}
}

/*
	Frosted-glass notice box: a soft, semi-opaque tint plus backdrop-filter
	blur so the moving gradient background shows through softly frosted
	rather than sharply visible, with a heavily rounded rectangle instead
	of the earlier left-border-accent treatment.
*/
.callout {
	text-align: center;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 28px;
	padding: 1.5em 2em;
}

/*
	.callout-note -- the smaller/lighter follow-up line inside .callout,
	kept as its own hook so its size/weight/color can be tuned
	independently of the bold statement above it.
*/
.callout-note {
	display: block;
	margin-top: 0.5em;
	font-size: 0.85em;
	font-weight: var(--font-weight);
	color: var(--color-fg-light);
}

/*
	.screenshots breaks out of the narrow --content-width text column so
	the screenshots can actually be seen in detail (the app UI's text is
	small at column width). The classic "full-bleed" technique: this
	outer element spans the full viewport width via a negative margin
	calc'd against 100vw, with only a comfortable padding gutter of its
	own; the size CAP and re-centering happen one level down, on
	.screenshot-frame itself, so each frame lands centered under the
	text column above it instead of pinned to the viewport's edge.
*/
.screenshots {
	margin: 2em calc(50% - 50vw) 0 calc(50% - 50vw);
	padding: 0 2em;

	@media (max-width: 736px) {
		padding: 0 1em;
	}
}

/*
	.screenshot-frame -- same frosted-glass treatment as .callout (tint +
	backdrop blur + rounded rect), sitting behind the screenshot as its
	own layer. The image itself is cropped tight to the app window with
	a feathered alpha edge (baked in via a Python/PIL script, not CSS --
	see website_rebuild_stage.md), so its soft white fringe blends into
	this frame's tint instead of ending in a hard rectangular cutoff.

	max-width used to be a flat 1400px, but since .screenshots' outer
	bleed always offers ~100vw regardless of viewport, a flat cap didn't
	engage until ~1470px wide -- below that, the frame just tracked
	100vw directly with zero relationship to how wide the text column
	actually was, ballooning to ~90%+ of the screen in the 700-1400px
	range while the column next to it stayed modest. Tying the cap to
	--content-width (plus a 12vw top-up) holds it at a constant ~67% of
	viewport width across the whole "typical desktop" range (roughly
	873px, where --content-width's own 480px floor stops binding, up to
	~1470px, where --content-width's 46em ceiling takes over) --
	max() keeps it from ever going narrower than the column itself.

	Tradeoff: this coefficient was tuned to hit ~67% specifically in the
	1200-1400px range, which is flatter/gentler than the previous
	version -- so unlike before, it no longer climbs back up to the
	1400px cap by ~1920px (it lands around 1100px there instead). If
	very large screens should still reach the full 1400px/native-
	resolution ceiling, that needs its own rule (e.g. a min-width
	override) layered on top rather than stretching this one curve to
	cover both ends.
*/
.screenshot-frame {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 28px;
	padding: 2em;
	max-width: max(var(--content-width), min(calc(var(--content-width) + 12vw), 1400px));
	margin: 0 auto 1.5em auto;

	&:last-child {
		margin-bottom: 0;
	}

	img {
		display: block;
		width: 100%;
	}
}

/*
	Contact links (mailto/tel) get their own highlight color instead of
	the general link accent -- targeted by protocol rather than a
	page-specific selector so it applies consistently everywhere one
	appears (index's Contact section, and the mailto links inside
	terms.html/privacy.html's own Contact Us / data-sharing sections).
*/
a[href^="mailto:"],
a[href^="tel:"] {
	color: var(--color-contact-link);

	&:visited {
		color: var(--color-contact-link);
	}

	&:hover {
		color: var(--color-contact-link) !important;
	}
}

/* Policy pages (Privacy/Terms) */
#policy {
	h2 {
		margin-top: 1.5em;
	}

	h3 {
		margin-top: 1.25em;
	}
}

/* Footer */
#footer {
	position: relative;
	max-width: 640px;
	margin: 3em auto 0 auto;
	text-align: center;
	color: var(--color-fg-light);
	font-size: 0.8em;

	.copyright {
		list-style: none;
		padding: 0;
		text-align: center;

		li {
			display: inline-block;
			border-left: solid 1px var(--color-border-light);
			margin: 0 0 0.5em 0.75em;
			padding: 0 0 0 0.75em;

			&:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}
		}

		a {
			color: inherit;
		}
	}
}

/* Page-load fade-in for Privacy/Terms only (see qampli-bg.js for why) */
body.page-fade-in {

	#header,
	#main,
	#footer {
		opacity: 0;
		animation: qampli-content-fade 0.7s ease forwards;
		animation-delay: 0.05s;
	}
}

@keyframes qampli-content-fade {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-fade-in {

		#header,
		#main,
		#footer {
			animation: none;
			opacity: 1;
		}
	}
}

/* ============================================================
   Background system -- unchanged from the previous custom.css.
   Already fully original Qampli code (qampli-bg.js drives it);
   migrated here as-is, not rewritten.
   ============================================================ */

.qbg {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 2s ease-in-out;
	isolation: isolate;

	&.qbg-preload {
		opacity: 0;
	}
}

.qbg-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 160vmax;
	height: 160vmax;
	object-fit: cover;
	opacity: 0;
	transition: opacity 3s ease;
	will-change: transform, opacity;
	mix-blend-mode: lighten;
	filter: contrast(210%);
}

@keyframes qbg-rotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}