/**
 * The whole stylesheet for buildexcitingthings.com, rewritten 6 Oct 2026.
 *
 * The site is one page that names the company's products and links to them, so
 * this file is short on purpose. It replaces the grey-and-white card site built
 * for Walt — a nav, a hero, a thesis, a how-it-works grid, five more pages — none
 * of which this page needs.
 *
 * The palette and the face are the Money Agents landing page's, which are in turn
 * `@repo/core/theme/colors`' own values restated as hexes. Keep them in step by
 * hand: there are five, and the alternative is a build step for a page with four
 * sentences on it.
 */

/* --------------------------------------------------------------- tokens --- */

:root {
	/* `colors.page`. The one ground on the page — the rows and the footer sit on
	   it rather than on a card, which is what lets the app icons read as drawings
	   lying on the page. Their own PNG ground is this exact hex, so a tile edge
	   never shows. */
	--page: #f2f0eb;
	/* `colors.text1`. The headline, the app names, the ink the drawings are
	   drawn in. 13.2:1 on the page. */
	--ink: #2a2622;
	/* `colors.text3`. The footer's address and copyright. 6.2:1 — plainly the
	   second voice, still clear of the 4.5 floor. */
	--ink-soft: #5e5850;
	/* `SPLASH.rest` — the ink at 20% blended onto the page and stored opaque,
	   because two translucent hairlines meeting paint their join twice. Every
	   rule on the page. */
	--rest: #cac8c3;
	/* The arrow at the end of a row at rest. Loud enough to be seen, quiet
	   enough not to be the thing you look at first. */
	--rest-type: #989591;

	/* `colors.card`. A card is white on a warm off-white page, which is the app's
	   whole depth system: nothing here casts a shadow and nothing has a border,
	   because on a light ground the eye reads brightness as nearer the light.
	   Raised is brighter; there is no third step on this page. */
	--card: #ffffff;
	/* What a card's ground becomes on hover: dimmer, and only just. It is the
	   midpoint between `--card` and `--page` rather than the app's own
	   `colors.nested` (#EEEBE5), which was here first and was a full step — the
	   app spends that step on a well cut into a card, and a whole ground change
	   is far too loud for a pointer passing over a link.

	   So the card stays plainly brighter than the page, which is what keeps it
	   reading as raised; what changes is about three percent of luminance, which
	   together with the arrow is enough to say *this is the one you are on*.

	   Neutral rather than a tint on purpose. A lavender hover was here briefly
	   and it was the only colour on the site that was not ink or paper — the
	   products bring their own colour (Chip is lavender), and the surface under
	   them should not be reaching for it too. */
	--hover: #f9f8f5;

	/* The page's one face, and the app's: Cal Sans, self-hosted below. One
	   weight, and that weight is already a display weight — so size and colour
	   are the only hierarchy here. */
	--font-display: "Cal Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;

	/* The content edge. A stated number and never a share of the viewport: a
	   `vw` gutter looks constant and is not, and past about 1500px it quietly
	   starts eating the width the words should be getting. It steps down twice,
	   at 900 and at 560, and each step is a second constant rather than a point
	   on a curve. */
	--gutter: 80px;

	color-scheme: light;
}

/* Self-hosted rather than fetched from a CDN — the same file the Money Agents
   site serves. `swap` because the fallback metrics are close enough that the
   reflow is a line-length shift rather than a relayout, and a blank headline is
   worse. */
@font-face {
	font-family: "Cal Sans";
	src: url("../fonts/cal-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- page --- */

html,
body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
}

/* `-webkit-font-smoothing` is set because this is one face at one weight on a
   light ground, which is the case where macOS's default synthetic bolding shows
   most: the headline comes out looking like a second weight the family does not
   have. */
body {
	display: flex;
	min-height: 100dvh;
	flex-direction: column;
	font-family: var(--font-display);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The content is one window tall and vertically centred, with the footer below
   it — so on any display the headline and the rows sit in the middle of the
   screen and the legal line is on the floor.

   `100dvh` rather than `vh`: on iOS the small-viewport reading is what is visible
   when the toolbar is out, and `dvh` is the one that tracks it. `min-` rather
   than a fixed height, so a window too short to hold the list — a phone in
   landscape — grows past the fold rather than clipping it. */
main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: clamp(64px, 12vh, 120px) var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--page);
	text-decoration: none;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	z-index: 10;
}

/* Everything in the middle of the window shares one measure and one centre. The
   rows inside it are left-aligned — a logo and a name are a list item, and
   centring a list makes a ragged left edge out of six different name lengths. */
.stack {
	width: 100%;
	max-width: 620px;
}

/* ------------------------------------------------------------- headline --- */

/* The largest type on the page and the only thing on it that is not a link.
 *
 * `line-height: 1.05` is a property of this face at this size: Cal Sans is drawn
 * tight, and the default leading opens a visible gap when the headline wraps on a
 * phone. Tracking is left alone — the face is already spaced for display.
 */
.headline {
	margin: 0 0 clamp(34px, 5vh, 56px);
	font-size: clamp(34px, 5.4vw, 60px);
	font-weight: 400;
	line-height: 1.05;
	text-align: center;
	color: var(--ink);
}

/* ---------------------------------------------------------------- cards --- */

/* One card per product, stacked. `CARD_GAP` is the app's own 16 and it is the
   only grouping device here — no rules, no dividers, no container. The card
   edge is the whole boundary. */
.apps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The whole card is the link, not the name inside it — an 88px drawing beside a
   word is a target somebody should be able to hit anywhere.
 *
 * `radius.card` and `padding.card` are the app's 28 and 24, as stated numbers
 * rather than clamps: the app does not change its corner by screen size and
 * neither does this. The padding steps down once on a phone, where 24 on each
 * side of a 64px icon is most of the width.
 *
 * No shadow and no border, which is doctrine rather than taste — see `--card`. */
.app {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 16px);
	padding: clamp(16px, 2vw, 24px);
	border-radius: 28px;
	background: var(--card);
	text-decoration: none;
	color: var(--ink);
	transition:
		background-color 160ms ease,
		transform 160ms ease;
}

.app:hover,
.app:focus-visible {
	background: var(--hover);
}

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

.app:active {
	transform: scale(0.994);
}

/* The app's own icon, at its own size.
 *
 * Its PNG ground is `--page` to the hex — the page's ground, not the card's —
 * so on a white card it is a visible square and needs a corner of its own. 20px
 * is `radius.nested`, which is the card's 28 less 8: the app's concentric rule,
 * so the tile's corner sits parallel to the card's rather than near it. What
 * shows is an app icon on a card, which is what it is. */
.app__icon {
	display: block;
	width: clamp(56px, 8vw, 88px);
	height: clamp(56px, 8vw, 88px);
	flex: none;
	border-radius: 20px;
}

/* The name sets the card's height, and on a phone it is the one thing competing
   for width with the tile and the arrow. The floor is 17px rather than 18 for
   that reason alone: *Money Agents: Track & Earn* is 26 characters, and a point
   is the difference between one line and a break before the last word. */
.app__name {
	flex: 1 1 auto;
	font-size: clamp(17px, 2vw, 24px);
	line-height: 1.25;
}

/* The one piece of motion on the page: the arrow steps right as the card lights
   up. It is `aria-hidden` in the markup — "opens getmoneyagents.com" is the
   link's own job to say, and a screen reader does not need the glyph too. */
.app__go {
	flex: none;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1;
	color: var(--rest-type);
	transition:
		transform 160ms ease,
		color 160ms ease;
}

.app:hover .app__go,
.app:focus-visible .app__go {
	transform: translateX(4px);
	color: var(--ink);
}

/* --------------------------------------------------------------- footer --- */

/* On the page itself — not a dark band, and no rule above it either. The page
   is one surface, and a slab at the foot of it would be the only second ground
   on the site; a hairline was there until it turned out that two small grey
   lines at the bottom of an otherwise empty page need no third thing drawing a
   border around them. Distance is the separation. One line: the year, the
   company, and a way to reach a person. */
.site-footer {
	box-sizing: border-box;
	padding: clamp(24px, 4vh, 36px) var(--gutter) clamp(28px, 5vh, 44px);
	text-align: center;
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.6;
	color: var(--ink-soft);
}

.site-footer address {
	margin: 0;
	font-style: normal;
}

.site-footer a {
	color: var(--ink-soft);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- the 404 --- */

/* The same two tiers as the home page, one size down, and a way back. */
.notfound {
	text-align: center;
}

.notfound p {
	margin: 0 0 clamp(28px, 4vh, 40px);
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.6;
	color: var(--ink-soft);
}

.notfound a {
	font-size: clamp(17px, 1.45vw, 20px);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rest);
	padding-bottom: 3px;
}

.notfound a:hover,
.notfound a:focus-visible {
	border-bottom-color: var(--ink);
}

/* ------------------------------------------------------------ responsive --- */

/* Two steps on the gutter, each a constant rather than a point on a curve — see
   `--gutter`. Nothing else about the page reflows: one centred column of rows
   has nothing to rearrange. */
@media (max-width: 900px) {
	:root {
		--gutter: 44px;
	}
}

@media (max-width: 560px) {
	:root {
		--gutter: 22px;
	}
}

/* The page's only motion is a 4px arrow and a colour, so there is nothing here
   worth a second still layout — the transitions simply stop. */
@media (prefers-reduced-motion: reduce) {
	.app,
	.app__go {
		transition: none;
	}

	.app:active {
		transform: none;
	}
}