/* Clif Games.

   THE WHOLE IDENTITY IS ONE IDEA: a cliff face. The name reads as "cliff", so the site
   is built from strata — horizontal bands of rock under a hard top edge, sky above.
   Nothing here is a stock gradient; the bands are the brand, and they are the only
   decorative element the page has.

   The palette is a sunlit sandstone face at the end of the day: cool shadowed rock at
   the base, warm ochre where the light still reaches, deep sky over the top. */
:root {
	--night:  #14161f;   /* sky at the top of the frame */
	--stone:  #1c1f2a;   /* card and panel ground */
	--edge:   #2b3040;   /* hairlines */
	--text:   #eef1f6;
	--muted:  #99a2b6;

	--ochre:  #e09a45;   /* the lit face — the one accent, used sparingly */
	--rust:   #b8542f;
	--sand:   #d8c3a0;

	--display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

	--measure: 36rem;
	--gutter:  clamp(1.25rem, 5vw, 2.5rem);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--night);
	color: var(--text);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* --- The strata -----------------------------------------------------------------
   Six bands of rock at the FOOT of the document — the ground the whole site stands on,
   with the hard edge on top. That edge IS the cliff, and everything above it is air.

   THE FIRST VERSION PINNED THIS TO THE VIEWPORT and it was wrong in a way that only
   showed up in a screenshot: fixed at 46vh, the bands sat across the middle of the page
   and sliced through the game cards, so the brand motif read as arbitrary stripes rather
   than as stone. Anchored to the bottom of the document instead, it is bedrock: content
   sits on it, nothing is cut by it.

   Real strata are never evenly bedded — the varied band heights are what stop this
   reading as a stripe pattern. */
.strata {
	position: absolute;
	inset: auto 0 0 0;
	height: 20rem;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	z-index: 0;
	/* Dense at the base, dissolving upward into the page background, so there is no
	   hard seam where the formation begins. */
	mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
	opacity: .55;
}
.strata span { display: block; width: 100%; }
.strata span:nth-child(1) { height: 5%;  background: var(--ochre); }
.strata span:nth-child(2) { height: 11%; background: #8d5a35; }
.strata span:nth-child(3) { height: 7%;  background: var(--rust); }
.strata span:nth-child(4) { height: 20%; background: #5c3b2c; }
.strata span:nth-child(5) { height: 13%; background: #3a2b28; }
.strata span:nth-child(6) { height: 44%; background: #241d20; }

/* The wordmark's own strata, reused as a section rule: the six bands compressed to a
   few pixels. Same idea at two scales is what makes it read as an identity rather than
   as decoration on one page. */
.rule {
	height: 5px;
	border-radius: 999px;
	margin: 0 0 3rem;
	background: linear-gradient(to right,
		var(--ochre) 0 18%, #8d5a35 18% 38%, var(--rust) 38% 52%,
		#5c3b2c 52% 74%, #3a2b28 74% 88%, #241d20 88% 100%);
}

body { position: relative; }

.page {
	position: relative;
	z-index: 1;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 var(--gutter) 5rem;
}

/* --- Masthead --- */
.masthead {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 2rem 0 3rem;
}
.wordmark {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -.02em;
	color: var(--text);
	text-decoration: none;
}
/* "Games" sits a step below "Clif" — the wordmark is itself a two-layer strata. */
.wordmark span {
	color: var(--ochre);
	margin-left: .3ch;
}
.nav { display: flex; gap: 1.5rem; }
.nav a, .foot a {
	color: var(--muted);
	text-decoration: none;
	font-size: .95rem;
}
.nav a:hover, .foot a:hover { color: var(--ochre); }

/* --- Hero --- */
.hero { padding: 1rem 0 4.5rem; }
.eyebrow {
	margin: 0 0 1rem;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ochre);
}
h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2.5rem, 7vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 0 0 1.25rem;
}
.lede {
	max-width: var(--measure);
	margin: 0;
	color: var(--muted);
	font-size: 1.15rem;
}

.section-title {
	font-family: var(--display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--edge);
}

/* --- Games --- */
.grid {
	list-style: none;
	margin: 0 0 4.5rem;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.game {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem;
	background: color-mix(in srgb, var(--stone) 88%, transparent);
	border: 1px solid var(--edge);
	border-radius: 14px;
	backdrop-filter: blur(6px);
}
/* The preview is portrait 9:19.5 — the phone's shape. Held to a fixed width so four
   cards line up regardless of how long each video is. */
.shot {
	flex: 0 0 8.5rem;
	align-self: flex-start;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--edge);
}
.shot video { display: block; width: 100%; height: auto; }
.meta { min-width: 0; }
.icon {
	border-radius: 14px;
	margin-bottom: .6rem;
	border: 1px solid var(--edge);
}
.meta h3 {
	font-family: var(--display);
	font-size: 1.3rem;
	margin: 0 0 .15rem;
	letter-spacing: -.02em;
}
.kind {
	margin: 0 0 .6rem;
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ochre);
}
.meta p { margin: 0 0 .9rem; color: var(--muted); font-size: .95rem; }
.tag {
	font-family: var(--body);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sand);
	border: 1px solid var(--edge);
	border-radius: 999px;
	padding: .15rem .5rem;
	vertical-align: middle;
	white-space: nowrap;
}
.soon { color: var(--sand); font-size: .9rem; }
.badge img { display: block; }

/* --- About + footer --- */
.about p { max-width: var(--measure); color: var(--muted); }
.about a { color: var(--ochre); }
.foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--edge);
	color: var(--muted);
	font-size: .9rem;
}
.foot nav { display: flex; gap: 1.5rem; }
.foot p { margin: 0; }

@media (max-width: 34rem) {
	.game { flex-direction: column; }
	.shot { flex-basis: auto; max-width: 11rem; }
}

/* Respect a stated preference for less motion: the previews stop looping. */
@media (prefers-reduced-motion: reduce) {
	.shot video { animation: none; }
}