/*
	Precambrian Software — overrides on top of Phantom.

	This file is loaded AFTER main.css and is not generated from the SASS, so
	edits here survive a `npx sass` recompile. Put local changes here, not in
	main.css.
*/

/* ---------------------------------------------------------------------------
	Pin the menu button to the content column, not the viewport.

	Phantom sets `#header nav { position: fixed; right: 2em }`, which anchors the
	button to the VIEWPORT's right edge. Everything else on the page lives inside
	a centred 68em column. So the two drift apart as the window widens — the
	button ended up 192px right of the column at 1920px, and 512px right of it at
	2560px, marooned on its own in the margin with nothing beneath it.

	Keep it fixed (that is deliberate — it stays reachable as you scroll past the
	header) but align its right edge to the column's content edge, so it sits
	directly above the right end of the banner.

	The maths: the column is 68em wide and centred, so its edge is 34em from the
	middle; 2.5em of that is the .inner padding we want to sit inside of. Both are
	in em, so this tracks Phantom's root-font changes across breakpoints on its
	own.

	The max() fallback is the column's own padding, so that once the viewport is
	narrower than 68em and the column goes full-bleed, the button lines up with the
	content's edge rather than the screen's. Phantom drops that padding to 1.25em
	below 736px, so the fallback follows it.
--------------------------------------------------------------------------- */
#header nav {
	right: max(2.5em, calc(50% - 34em + 2.5em));
}

@media screen and (max-width: 736px) {
	#header nav {
		right: max(1.25em, calc(50% - 34em + 1.25em));
	}
}

/* ---------------------------------------------------------------------------
	Close the gap above the logo.

	Phantom pads #header with `8em 0 0.1em` — a 149px empty band across the top of
	every page. The menu button is position:fixed near the top of the VIEWPORT, so
	it ended up floating alone inside that band, 103px above the logo's centre line
	and connected to nothing. It looked like the button was hogging space; it was
	really the padding.

	Dropping the top padding to 2.5em raises the logo until its centre lands on the
	button's, so the two read as one row — the site's name on the left, the way into
	it on the right. Chosen, not guessed: the button's centre sits at 2em + half its
	own 56px height, and 2.5em puts the logo's centre in the same place.

	Mobile has its own numbers (Phantom uses 4em padding and top:0.5em there), so it
	gets its own value.
--------------------------------------------------------------------------- */
#header {
	padding-top: 2.5em;
}

@media screen and (max-width: 736px) {
	#header {
		padding-top: 1em;
	}
}

/* ---------------------------------------------------------------------------
	Drop the wordmark on narrow screens, keep the P mark.

	"PRECAMBRIAN SOFTWARE" is set with 0.35em letter-spacing, which makes it wide;
	below ~460px its right edge slides under the fixed menu button and the two
	collide ("SOFTWA☰E"). Verified: clear at 480px (34px gap), overlapping by
	480px. So below 480 the wordmark text goes and the P mark carries the brand —
	the standard mobile header, logo-left / menu-right.

	NOT display:none. The P image has empty alt on purpose, so the wordmark text is
	the ONLY accessible name on the home-link. Hiding it outright would leave that
	link nameless for screen readers and search. Instead it's visually clipped but
	kept in the accessibility tree — the link still announces "Precambrian
	Software", it just isn't painted. Taking it out of flow also collapses the
	logo to the P alone, which is the whole point.
--------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	#header .logo .title {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ---------------------------------------------------------------------------
	The app list.

	Phantom's .tiles overlay the app name ON TOP of the tile image. That works for
	a screenshot; it is wrong for an icon, where laying type across the artwork
	defaces the one asset a person already recognises.

	So the app list is its own thing: the icon, then the name and description as
	real text beneath it. That is what every peer does — Agile Tortoise, Red
	Sweater, Rogue Amoeba, Flexibits, Cultured Code — because the icon is what sits
	on the visitor's home screen and what they tapped in the App Store. The
	screenshots moved to the app pages, where they are big enough to read.

	The icon <a> is aria-hidden with tabindex=-1 on purpose: it points at the same
	page as the heading link right beside it, so exposing both would make screen
	reader and keyboard users tab through a duplicate. The heading link is the real
	one.
--------------------------------------------------------------------------- */
.apps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	gap: 3em 3.5em;
	margin: 3em 0 0 0;
}

.apps article {
	display: flex;
	align-items: flex-start;
	gap: 1.5em;
}

.apps .icon-link {
	flex: none;
	display: block;
	border-bottom: 0;
	line-height: 0;
}

.apps .icon-link img {
	width: 7.5em;
	height: 7.5em;
	/* Apple's squircle is ~22.5% of the side. Matching it stops the icon reading as
	   a screenshot of an icon. */
	border-radius: 22.5%;
	box-shadow: 0 6px 20px rgba(31, 27, 24, 0.16);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.apps article:hover .icon-link img {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(31, 27, 24, 0.24);
}

.apps .detail { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------------
	Product names are set as they are written.

	Phantom uppercases and heavily letter-spaces every h2 — which is right for a
	section heading ("FOR PLAYERS") and destructive for a proper noun. "mORK" is
	deliberately a lower-case m followed by ORK (it is Mobile ORK); the stylesheet
	was rendering it "M O R K" and throwing the brand away. "Ultreïa" is a word,
	not an acronym, and shouting it is no better.

	Put .as-written on any heading that is a product name.
--------------------------------------------------------------------------- */
.as-written,
.apps h2 {
	text-transform: none;
	letter-spacing: -0.015em;
}

.apps h2 {
	margin: 0 0 0.15em 0;
	font-size: 1.35em;
}

.apps h2 a { border-bottom: 0; }

/* The ↗ on an entry that links off-site (Maptivities). Smaller than the name,
   quiet, and nudged up so it reads as a superscript cue rather than a character
   in the title. Its purpose is honesty: this link leaves precambriansoftware.com. */
.apps h2 .ext {
	display: inline-block;
	font-size: 0.62em;
	color: #8b8175;
	vertical-align: 0.35em;
	margin-left: 0.1em;
	transition: transform 0.2s ease, color 0.2s ease;
}

.apps article:hover h2 .ext {
	transform: translate(1px, -1px);
	color: #a74922;
}

/* The platform line is metadata, not prose — set it small, uppercase and quiet so
   it reads as a label and never competes with the description. */
.apps .platforms {
	margin: 0 0 0.6em 0;
	font-size: 0.7em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8b8175;
}

.apps .detail p:last-child { margin: 0; }

@media screen and (max-width: 480px) {
	.apps article { flex-direction: column; gap: 1em; }
	.apps .icon-link img { width: 6em; height: 6em; }
}

/* ---------------------------------------------------------------------------
	Company banner on the homepage.

	Phantom ships no banner slot — its homepage header is an <h1> and a
	paragraph. This adds one.

	The banner artwork CONTAINS the company name, so it replaces the text <h1>
	rather than sitting above it — otherwise the page says "Precambrian Software"
	twice. It stays inside the <h1> element with alt text, so screen readers and
	search engines still get a real top-level heading.

	Sized against the content column: #wrapper > * > .inner is max-width 68em,
	and Phantom scales the root font to 16pt on wide screens (≈21.3px), so the
	column maxes out at ≈1344px of actual content. Supply artwork at 2× that.
--------------------------------------------------------------------------- */
#main > .inner > header .banner {
	margin: 0 0 1.5em 0;
	padding: 0;
	border: 0;
}

#main > .inner > header .banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
	Hero screenshots on the app pages.

	Phantom's `.image.main` is full-bleed, which is right for a wide landscape
	banner and very wrong for a portrait phone screenshot — a 1242×2688 shot
	stretched to the container width becomes a thousand-pixel wall you have to
	scroll past before reaching a word of copy. Cap it at roughly phone size and
	centre it.
--------------------------------------------------------------------------- */
#main .image.main.screenshot {
	max-width: 340px;
	margin: 0 auto 3em auto;
}

#main .image.main.screenshot img {
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(31, 27, 24, 0.18);
}

/* ---------------------------------------------------------------------------
	Primary buttons lead with hematite.

	Phantom paints .button.primary in the body-text color and only reveals the
	accent on hover — which meant the one color the palette is built around was
	invisible until you touched something. The primary call to action is exactly
	where it should lead: "Download on the App Store" is the loudest thing on an
	app page, and the rust seam is the loudest thing in the mark.

	Everything else stays quiet. This is the only place the palette raises its
	voice at rest.
--------------------------------------------------------------------------- */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: #a74922;
	color: #fcfaf7 !important;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background-color: #8c3d1d;
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	background-color: #77341a;
}

/* ---------------------------------------------------------------------------
	Store buttons sit side by side on mORK's page (App Store + Google Play).
--------------------------------------------------------------------------- */
#main .row > * > .actions {
	margin-top: 1em;
}