@font-face {
	font-family: "Michroma";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/michroma-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Tenor Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/tenor-sans-regular.woff2") format("woff2");
}

:root {
	--void: #0b0907;
	--umber: #3b2416;
	--clay: #a05e22;
	--ochre: #c1892f;
	--gold: #dcb46c;
	--gold-quiet: #a8854f;
	--engineered: "Michroma", "Eurostile", "Arial Narrow", sans-serif;
	--humanist: "Tenor Sans", "Gill Sans", "Optima", sans-serif;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	/* Table geometry, mirrored in script.js: ring radius R = side / 2.3, seen tilted.
	   --rise-n / --rise-s: where the ring's north and south points land, in units of R. */
	--rise-n: 0.818;
	--rise-s: 0.907;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color-scheme: dark;
	background: var(--void);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--void);
	color: var(--gold);
	font-family: var(--humanist);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	caret-color: var(--ochre);
}

::selection {
	background: var(--clay);
	color: var(--void);
}

html {
	scrollbar-color: var(--umber) var(--void);
	scrollbar-width: thin;
}

/* The sand table: one WebGL surface behind everything. */
.sand {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}

.gl .sand {
	opacity: 1;
}

.house {
	position: relative;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	padding: 0 max(1rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* Measurement readouts: the table's instrument margin. */
.readouts {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: clamp(1rem, 2.6vh, 1.6rem) clamp(0.25rem, 1.5vw, 1rem) 0;
	color: var(--gold-quiet);
	pointer-events: none;
}

.readouts p {
	margin: 0;
}

.ring-count {
	font-family: var(--humanist);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.bearing {
	font-family: var(--engineered);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
}

.deg {
	font-family: var(--humanist);
	font-size: 1.15em;
	margin-left: 0.08em;
}

.bearing-value {
	display: inline-block;
	min-width: 5.4ch;
	text-align: right;
}

/* The ring itself. Its box defines the shader's geometry: ring radius = side / 2.3. */
.table {
	--side: clamp(16rem, min(100vw - 1.5rem, (100dvh - 9.5rem) / 0.9), 64rem);
	--r: calc(var(--side) / 2.3);
	position: relative;
	width: var(--side);
	height: calc(var(--side) * 0.9);
	align-self: center;
	justify-self: start;
	margin-inline: calc((100% - var(--side)) / 2);
	border-radius: 50%;
	cursor: grab;
	touch-action: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.table.dragging {
	cursor: grabbing;
}

/* No-JS / no-WebGL: the settled table as a rendered plate. */
.table::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/poster.jpg") center / 100% 100% no-repeat;
	pointer-events: none;
}

.js .table::before {
	display: none;
}

.js.no-gl .table::before {
	display: block;
}

.table:focus-visible::after {
	content: "";
	position: absolute;
	top: calc(50% - var(--r) * var(--rise-n) - 0.6rem);
	bottom: calc(50% - var(--r) * var(--rise-s) - 0.6rem);
	left: calc(50% - var(--r) - 0.6rem);
	right: calc(50% - var(--r) - 0.6rem);
	border-radius: 50%;
	outline: 1px solid var(--gold);
	outline-offset: 0;
	box-shadow: 0 0 0 4px rgba(220, 180, 108, 0.14);
	pointer-events: none;
}

/* The fixed index at 12 o'clock: the only thing on the table that never turns. */
.notch {
	position: absolute;
	left: 50%;
	top: calc(50% - var(--r) * var(--rise-n) - 0.2rem);
	width: 0;
	height: 0;
	border-left: 0.32rem solid transparent;
	border-right: 0.32rem solid transparent;
	border-top: 0.5rem solid var(--gold);
	transform: translateX(-50%);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.letter {
	position: absolute;
	left: 50%;
	bottom: calc(50% + var(--r) * var(--rise-n) + 0.75rem);
	transform: translateX(-50%);
	font-family: var(--engineered);
	font-size: clamp(0.8rem, 1.6vmin, 1rem);
	line-height: 1;
	letter-spacing: 0;
	color: var(--gold);
	transition:
		opacity 0.5s var(--ease-out),
		transform 0.5s var(--ease-out);
}

.letter.turning {
	opacity: 0.25;
	transform: translateX(-50%) translateY(0.15rem);
	transition-duration: 0.12s;
}

.wordmark {
	margin: 0;
	padding: clamp(0.75rem, 2vh, 1.25rem) 0 clamp(1.25rem, 4.5vh, 3rem);
	font-family: var(--engineered);
	font-weight: 400;
	font-size: clamp(1.15rem, 0.7rem + 2.1vw, 2.2rem);
	line-height: 1;
	letter-spacing: 0.52em;
	text-indent: 0.52em;
	text-transform: uppercase;
	color: var(--gold);
	white-space: nowrap;
}

/* Poster capture mode: render the table alone. */
.poster .readouts,
.poster .wordmark,
.poster .notch,
.poster .letter {
	visibility: hidden;
}

/* Narrow portrait: the outer berms bleed past the screen edge; the cipher stays whole. */
@media (orientation: portrait) and (max-width: 40rem) {
	.table {
		--side: clamp(16rem, min(118vw, (100dvh - 9.5rem) / 0.9), 40rem);
	}

	/* Hold the wordmark under the ring; the sand fills the bands above and below. */
	.house {
		grid-template-rows: auto 1fr auto auto 1fr;
	}

	.table {
		grid-row: 3;
	}

	.wordmark {
		grid-row: 4;
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.table {
		--side: clamp(15rem, (100dvh - 2rem) / 0.9, 40rem);
	}

	.house {
		grid-template-rows: auto auto auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sand,
	.letter {
		transition: none;
	}
}