/* site.css — Oxedyne.
 *
 * Red's palette and Red's typeface, at a size Red never needs: this is one page
 * that is read once, not an instrument used all day. So: bigger type, more air,
 * and nothing on the screen that is not a mark or a sentence. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The one scale every mark is a fraction of. */
:root { --mark: clamp(180px, 21vw, 330px); }

body {
	font-family: var(--font);
	background: var(--bg-primary);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
}

/* ── The grid: two columns, four rows ─────────────────────────── */

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1500px;
	margin: 0 auto;
	padding: clamp(32px, 6vw, 110px) clamp(24px, 5vw, 80px);
	column-gap: clamp(32px, 5vw, 96px);
	row-gap: clamp(56px, 8vw, 140px);
	align-items: center;
}

.cell { min-width: 0; }

/* Every mark gets the same box, and fits itself inside it. The four logos have
   wildly different aspect ratios -- fe2o3 is a long wordmark, Oxegen is a tall X
   above one -- so sizing them by width made Oxegen tower over the rest. Sizing
   them by a shared box means each is limited by whichever dimension it is fat
   in, which is what makes them read as the same size. */
.mark {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mark);
	padding: clamp(8px, 2vw, 32px);
}

.copy p {
	font-size: clamp(17px, 1.32vw, 22px);
	color: var(--text-secondary);
	margin-bottom: 0.85em;
	max-width: 34em;                 /* a line the eye can return from */
}
.copy p:last-child { margin-bottom: 0; }

/* A product's name, or a term being coined, in the ink of the page rather than
   the ink of the prose. */
.copy b { color: var(--text-primary); font-weight: 600; }
.copy i { color: var(--text-primary); font-style: italic; }

/* Lists carry the claims. The marker is the accent, set outside the text block,
   so the lines hang together as a column rather than as four stray sentences. */
.copy ul {
	list-style: none;
	margin: 0.2em 0 0.85em;
	max-width: 34em;
}
.copy p + ul { margin-top: -0.35em; }
.copy li {
	position: relative;
	padding-left: 1.15em;
	margin-bottom: 0.42em;
	font-size: clamp(17px, 1.32vw, 22px);
	color: var(--text-secondary);
}
.copy li:last-child { margin-bottom: 0; }
.copy li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

/* ── The marks ────────────────────────────────────────────────── */

/* The four marks have very different shapes -- fe2o3 is a long wordmark (3.16
   wide to 1 tall), Oxegen a tall X above one (0.71) -- so any single box makes
   one of them shout and another whisper. Each is instead given the height that
   lands it on roughly the same *area* as its neighbours, which is what the eye
   actually compares. Heights are fractions of one scale, so the whole set
   breathes together. */
.logo {
	display: block;
	width: auto;
	max-width: 100%;
}
.logo-oxedyne { height: calc(var(--mark) * 0.70); }   /* aspect 1.46 */
.logo-fe2o3   { height: calc(var(--mark) * 0.48); }   /* aspect 3.16 */
.logo-oxegen  { height: calc(var(--mark) * 1.00); }   /* aspect 0.71 */

.logo-link { display: flex; align-items: center; justify-content: center; }

.logo-link,
.brand-link {
	display: block;
	text-decoration: none;
	border-radius: var(--radius);
	transition: opacity 120ms ease, transform 120ms ease;
}
.logo-link:hover,
.brand-link:hover { opacity: 0.82; transform: translateY(-2px); }

.logo-link:focus-visible,
.brand-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 8px;
}

/* Red, set as the app sets it: the flame, then the word, in the accent. Sized to
   sit in the same box as the other three, so it carries the same weight. */
.brand-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 26px);
	height: 100%;
	color: var(--accent);
}
.brand-flame {
	height: calc(var(--mark) * 0.56);                  /* aspect 0.77 */
	width: auto;
	display: block;
}
.brand-word {
	font-size: calc(var(--mark) * 0.36);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* ── Narrow ───────────────────────────────────────────────────── */
/* One column. Every row leads with its mark, so the page reads mark-then-words
   the whole way down rather than alternating — which is why each cell carries
   its row number, and the order is set from that. */

@media (max-width: 860px) {
	.grid {
		grid-template-columns: 1fr;
		row-gap: clamp(28px, 6vw, 48px);
	}
	.mark[data-row="1"] { order: 1; }  .copy[data-row="1"] { order: 2; }
	.mark[data-row="2"] { order: 3; }  .copy[data-row="2"] { order: 4; }
	.mark[data-row="3"] { order: 5; }  .copy[data-row="3"] { order: 6; }
	.mark[data-row="4"] { order: 7; }  .copy[data-row="4"] { order: 8; }

	/* A mark and its words belong together, so the gap between a row's two
	   halves closes and the gap between rows opens. */
	.mark { padding-bottom: clamp(8px, 3vw, 20px); }
	.copy { margin-bottom: clamp(24px, 7vw, 56px); }
	/* Marks shrink with the column, but keep their relative weights. */
	:root { --mark: clamp(150px, 38vw, 230px); }
	.copy p { font-size: 17px; margin-bottom: 0.8em; }
}