:root {
	--mopa-blue:   #4a8ab5;
	--mopa-gold:   #c9a84c;
	--mopa-bronze: #a0682a;
	--mopa-purple: #7a5ca0;
	--mopa-teal:   #2d8a7a;
	--mopa-copper: #b87040;

	--accent:      var(--mopa-blue);
	--accent-warm: var(--mopa-gold);

	--bg:   #191919;
	--text: rgba(255, 255, 255, 0.88);
	--dot:  rgba(255, 255, 255, 0.09);

	--hot:  #ff6a00;      /* laser-hot orange */
	--cool: var(--text);  /* foreground; swap both here for light-mode */

	--bar-height:   3rem;
	--dot-radius:   3px;
	--dot-spacing:  44px;

	/* Nav geometry — single source for every layout calc below. Base values:
	   each shape's box aspect ratio (width:height) and the vertical face-center
	   where its label sits. Change a shape here and the grid, the stacked and
	   ultrawide fallbacks, and the label alignment all follow. */
	--cube-ar:  1;
	--cup-ar:   0.663;
	--sheet-ar: 1.819;

	--cube-face:  0.65;
	--cup-face:   0.53;
	--sheet-face: 0.533;

	/* Derived. Column = cube above sheet, full-width each, so heights add. */
	--col-ar:   calc(1 / (1/var(--cube-ar) + 1/var(--sheet-ar)));
	/* Default grid = column beside cup; width:height. */
	--grid-ar:  calc(var(--col-ar) + var(--cup-ar));
	/* All three stacked full-width (tall layout); height:width. */
	--stack-ar: calc(1/var(--cube-ar) + 1/var(--cup-ar) + 1/var(--sheet-ar));
}

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

/* LAYOUT */

body {
	flex-direction: column;

	display: flex;

	margin: 0;
	height: 100dvh;
	overflow: hidden;

	background-color: var(--bg);
	background-image: radial-gradient(circle, var(--dot) var(--dot-radius), transparent var(--dot-radius));
	background-size: var(--dot-spacing) var(--dot-spacing);

	font-family: system-ui, -apple-system, sans-serif;
	color: var(--text);
}

header,
footer {
	align-items: center;
	justify-content: center;

	display: flex;

	height: var(--bar-height);

	background: rgba(10, 10, 10, 0.95);
}

main {
	flex: 1;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	container-type: size;
	display: flex;

	padding: 1.5rem 2rem;
}

/* END LAYOUT */

/* HEADER */

.wordmark {
	font-family: ui-monospace, monospace;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;

	color: var(--text);
	text-decoration: none;
}

/* END HEADER */

/* NAV GRID */

.nav-grid {
	--gap: 2cqmin;

	align-items: center;
	justify-content: center;
	gap: var(--gap);
	display: flex;

	height: min(100cqh, 100cqw / var(--grid-ar));
}

.nav-grid > * { flex: none; }

.nav-col {
	flex-direction: column;
	gap: var(--gap);
	display: flex;

	aspect-ratio: var(--col-ar);
	height: 100%;
}

.nav-box {
	--r: 16px;

	position: relative;
	display: flex;

	aspect-ratio: var(--ar);
	padding: var(--gap);

	background:
		linear-gradient(var(--accent) 0 0) top left    / var(--r) 1.5px no-repeat,
		linear-gradient(var(--accent) 0 0) top left    / 1.5px var(--r) no-repeat,
		linear-gradient(var(--accent) 0 0) top right   / var(--r) 1.5px no-repeat,
		linear-gradient(var(--accent) 0 0) top right   / 1.5px var(--r) no-repeat,
		linear-gradient(var(--accent) 0 0) bottom left / var(--r) 1.5px no-repeat,
		linear-gradient(var(--accent) 0 0) bottom left / 1.5px var(--r) no-repeat,
		linear-gradient(var(--accent) 0 0) bottom right/ var(--r) 1.5px no-repeat,
		linear-gradient(var(--accent) 0 0) bottom right/ 1.5px var(--r) no-repeat;

	color: var(--text);
	text-decoration: none;
}

.nav-col .nav-box { width: 100%; }   /* cube/sheet fill column width; height from --ar */
.cup { align-self: stretch; }        /* cup fills grid height; width from --ar */

.cube  { --ar: var(--cube-ar); }
.sheet { --ar: var(--sheet-ar); }
.cup   { --ar: var(--cup-ar); }

/* Sequence — About, Services, Contact — applied wherever the column
   dissolves into a single stack (tall & ultrawide layouts). */
.cube  { order: 1; }
.cup   { order: 2; }
.sheet { order: 3; }

.shape {
	position: relative;
	display: flex;

	width: 100%;
	height: 100%;
}

.shape > svg:not(.burn-label) { width: 100%; }

/* Decorative shape svg only — must not reach the burn-label path. */
.shape > svg:not(.burn-label) :is(rect, path) {
	vector-effect: non-scaling-stroke;
	stroke-width: 0.25vmin;
}

/* app.js typesets .copy into stroke paths here and sets the viewBox + size; the
   label is centred on each shape's face. Text is one fixed size across boxes. */
.burn-label {
	position: absolute;
	transform: translate(-50%, -50%);   /* centre on the face point below */
	overflow: visible;
	pointer-events: none;
}

/* Face-centre of each shape within its tangent-cropped viewBox. */
.cube  .burn-label { left: 35%;   top: 65%; }
.cup   .burn-label { left: 50%;   top: 53%; }
.sheet .burn-label { left: 47.6%; top: 53.3%; }

/* Authorable label text — read by app.js and screen readers, never shown raw. */
.copy {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Single-line engraving strokes (Hershey futural), drawn solid so they read as
   filled letters rather than a hairline outline. app.js sets each stroke's width
   (in svg user units, so it scales with the text) and its exact dash length. */
.burn-label path {
	fill: none;
	stroke: var(--cool);
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: stroke 1s ease-out, filter 1s ease-out;
}

/* Instant heat when laser is active; transition fires on removal → 1s cooldown. */
.burn-label path.heat {
	stroke: var(--hot);
	filter: drop-shadow(0 0 3px var(--hot));
	transition: none;
}

.beam {
	--beam-color: #ff0000;

	r: 3.2px;
	fill: var(--beam-color);
	filter: drop-shadow(0 0 2px var(--beam-color));
	opacity: 0;
}

/* Extreme-tall viewports: flatten to three full-width stacked rows. */
@container (max-aspect-ratio: 3/4) {
	.nav-grid {
		flex-direction: column;
		height: auto;
		width: min(100cqw, 100cqh / var(--stack-ar));
	}

	.nav-col { display: contents; }   /* dissolve column; cube · cup · sheet stack in order */
	.nav-box { width: 100%; }
	.cup     { height: auto; align-self: auto; }
}

/* Ultrawide: flatten to a centered row — cube · cup · sheet.
   --W (equal box width) is the sizing knob; heights and the
   label-aligning margins all derive from it. */
@container (min-aspect-ratio: 2/1) {
	.nav-grid {
		--W: min(100cqh * var(--cup-ar), (100cqw - 2 * var(--gap)) / 3);

		flex-direction: row;
		align-items: flex-start;
		height: 100cqh;
	}

	.nav-col { display: contents; }   /* dissolve column; cube & sheet join the row */

	.nav-grid .nav-box { width: var(--W); height: auto; }
	.cup { align-self: auto; }

	/* Face-centers onto one line; cup (fills height) is the reference. */
	.cube  { margin-top: calc(var(--W) * (var(--cup-face)/var(--cup-ar) - var(--cube-face))); }
	.sheet { margin-top: calc(var(--W) * (var(--cup-face)/var(--cup-ar) - var(--sheet-face)/var(--sheet-ar))); }
}

/* END NAV GRID */