:root {
	--palette-1: #ff0026;
	--palette-2: #d91e4d;
	--palette-3: #ff0094;
	--palette-4: #e000ff;
	--palette-5: #ff5a00;
}

body {
	font-family:system-ui,sans-serif;
	color: midnightblue;
	background-image: radial-gradient(circle, lightsteelblue 1px, ghostwhite 1px);
        background-size: 15px 15px;
}

a {
	color: lightpink;
	text-decoration: none;
	font-style: italic;
}

a:hover {
	font-weight: 1000;
	/*background: deeppink;
	color: ghostwhite;*/
}

.launcher {
	overflow: hidden;
}

.launcher .container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100dvh;
}

.launcher .frame {
	--tile-size: clamp(3.5rem, 22vw, 5.5rem);
	/* Same value as gap below, just also exposed as a variable -- the
	   shared-backdrop photo math further down (.photo img) needs to
	   read the actual gap size in a calc(), and gap itself isn't
	   readable through var(). */
	--frame-gap: clamp(0.35rem, 1vw, 0.75rem);
	display: grid;
	grid-template-columns: repeat(3, var(--tile-size));
	grid-template-rows: repeat(5, var(--tile-size));
	grid-template-areas:
		"data social phanpy"
		"code lldap intra"
		"hdm abs mealie"
		"trek guide calendar"
		"config plaza chat";
	gap: var(--frame-gap);
}

.launcher .box {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0.5rem;
	box-sizing: border-box;
}

/* Every tile's link text is wrapped in one of these (see index.html).
   display:contents below 75rem means it's completely inert there --
   renders exactly as if the text were directly inside the <a>/<label>,
   same as before this existed. Only at desktop/laptop width (75rem
   tier, further down) does it become a real box: that's what the
   per-tile rotation animations there actually spin, not the outer
   tile itself, so a tile's link/grid-area/perspective stay put while
   only its visible face turns. */
.tile-spin {
	display: contents;
}

/* On phone every service tile is square. */
.launcher :is(.intra, .hdm, .abs, .mealie, .trek, .chat, .calendar, .config, .plaza, .guide, .data, .social, .phanpy, .code, .lldap) {
	aspect-ratio: 1;
}

.launcher a:focus-visible,
.launcher .box.sound:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.2rem;
}

.data { grid-area: data; }
.social { grid-area: social; }
.phanpy { grid-area: phanpy; }
.code { grid-area: code; }
.lldap { grid-area: lldap; }
.intra { grid-area: intra; }
.hdm { grid-area: hdm; }
.abs { grid-area: abs; }
.mealie { grid-area: mealie; }
.trek { grid-area: trek; }
.chat { grid-area: chat; }
.calendar { grid-area: calendar; }
.config { grid-area: config; }
.plaza { grid-area: plaza; }
.guide { grid-area: guide; }
.hero { grid-area: hero; }
.sound { grid-area: sound; }

/* The hidden hero/input pair remains as a stable sibling anchor for the
   CSS-only automatic animations. The hero tile itself is hidden in every
   final responsive layout. */
.launcher .hero {
	display: flex;
	cursor: pointer;
}

/* Decorative expansion tiles exist in the markup but only participate
   in the shared phone/tablet rune grids. */
.launcher :is(.dummy, .ghost) {
	display: none;
}

/* Photo tiles (random nature-folder background images, see the
   inline script) are desktop/laptop only -- hidden here, switched
   back on in the desktop media query below, same pattern as the
   dummy/ghost rule above. */
.launcher .photo {
	display: none;
	position: relative;
	overflow: hidden;
}

/* Very light raspberry/magenta color wash over every photo tile --
   plain translucent overlay rather than a filter() on the img itself,
   so it doesn't need to be reapplied per breakpoint or interact with
   the img's own transform (the sound-active zoom). position:absolute
   (not fixed) stays safely inside .photo's own overflow:hidden clip,
   same reasoning as why the shared-backdrop img above uses absolute
   rather than fixed. */
.launcher .photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--palette-3);
	opacity: 0.1;
	pointer-events: none;
}

/* Shared-backdrop illusion: instead of each photo tile fitting its
   own copy of the image to its own box (four independent crops), the
   img is sized to the tile grid's full canvas (--canvas-cols x
   --canvas-rows cells) and shifted left/up by exactly the tile's own
   (--photo-col, --photo-row) position in that grid -- so the visible
   slice in each tile lines up as if one giant image sat behind the
   whole grid and every tile were just a cut-out window onto it. Both
   the canvas size and each tile's position are set per breakpoint
   below (laptop/iMac tiers use different grids), defaulting to a
   harmless 1x1/(0,0) single-tile crop if unset. */
.launcher .photo img {
	display: block;
	position: absolute;
	top: calc(-1 * var(--photo-row, 0) * (var(--tile-size) + var(--frame-gap)));
	left: calc(-1 * var(--photo-col, 0) * (var(--tile-size) + var(--frame-gap)));
	width: calc(var(--canvas-cols, 1) * (var(--tile-size) + var(--frame-gap)) - var(--frame-gap));
	height: calc(var(--canvas-rows, 1) * (var(--tile-size) + var(--frame-gap)) - var(--frame-gap));
	object-fit: cover;
	transform: scale(1);
}

/* Inert filler cells for the 140rem iMac grid only (see that media
   query for why) -- same hidden-unless-that-tier pattern as .photo
   above. */
.launcher .imac-filler {
	display: none;
}

/* Visually hidden but still focusable/keyboard-operable (unlike
   display:none, which would remove it from the tab order entirely).
   Now a direct child of .frame (not nested inside the hero label) so
   its :checked state can reach every tile via the general sibling
   combinator, not just hero's own -- position:absolute also takes it
   out of grid flow entirely, so it doesn't consume a grid cell. */
.hero-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Intermediate fallback layout; the final portrait/landscape media
   queries below replace it on current phone and tablet viewports. */
@media (min-width: 34rem) {
	.launcher .frame {
		--tile-size: clamp(4rem, 15vw, 7rem);
		grid-template-columns: repeat(4, var(--tile-size));
		grid-template-rows: repeat(5, var(--tile-size));
		grid-template-areas:
			"hero hero data data"
			"hero hero social phanpy"
			"code lldap intra hdm"
			"abs mealie trek chat"
			"calendar config plaza guide";
	}

	.launcher .data {
		aspect-ratio: auto;
	}

	.launcher .hero {
		aspect-ratio: 1;
	}
}

/* Tablet landscape: 8 columns x 3 rows. Hero and data are 2x2;
   social and phanpy are doubles; all other tiles are singles. */
@media (min-width: 56rem) {
	.launcher .frame {
		--tile-size: clamp(3.5rem, 10vw, 6.25rem);
		grid-template-columns: repeat(8, var(--tile-size));
		grid-template-rows: repeat(3, var(--tile-size));
		grid-template-areas:
			"hero hero data data social social phanpy phanpy"
			"hero hero data data code lldap intra hdm"
			"abs mealie trek chat calendar config plaza guide";
	}

	.launcher :is(.data, .hero) {
		aspect-ratio: 1;
	}

	.launcher :is(.social, .phanpy) {
		aspect-ratio: auto;
	}
}

/* 75rem/1200px, not 62rem/992px: iPad mini landscape is 1133px CSS
   width and should stay on the tablet grid (it's still a handheld
   touch device, not a mouse-driven desktop), so the desktop tier needs
   to start above that rather than at a value picked to fit specific
   test devices. Desktop uses only the 11-column service grid; the
   former 2x2 hero control is removed from the visible layout. */
@media (min-width: 75rem) and (hover: hover) and (pointer: fine) {
	.launcher .frame {
		--tile-size: clamp(4.75rem, 6vw, 6.5rem);
		--canvas-cols: 10;
		--canvas-rows: 4;
		grid-template-columns: repeat(10, var(--tile-size));
		grid-template-rows: repeat(4, var(--tile-size));
		grid-template-areas:
			"photo-1 photo-1 photo-1 photo-1 data data sound sound photo-2 photo-2"
			"photo-1 photo-1 photo-1 photo-1 data data sound sound photo-2 photo-2"
			"photo-3 code phanpy phanpy lldap lldap social guide intra hdm"
			"photo-3 code abs mealie trek chat social calendar config plaza";
	}

	/* Full redesign for 4 rows instead of 2 (taller/narrower overall,
	   10 cols instead of 18) -- most individual tile SHAPES are
	   unchanged from the 2-row layout though, just repositioned:
	   data/sound stay 2x2, phanpy/lldap stay 2-wide horizontal
	   doubles, code stays a 2-tall vertical double. social switches
	   from horizontal to vertical (now matches code's shape/spin-type
	   instead of needing its own). photo-1 grows to a 4x2 feature,
	   photo-2 becomes a 2x2 square, photo-3 becomes a 1x2 vertical
	   strip -- rows 0-1 are entirely photo-1/data/sound/photo-2 (no
	   gaps), rows 2-3 hold every other tile, so wave 3/4 below still
	   only need two groups (top half vs bottom half), same as the
	   2-row version. */
	.launcher :is(.data, .sound) {
		aspect-ratio: 1;
		display: flex;
	}

	.launcher .hero {
		display: none;
	}

	.launcher :is(.calendar, .config) {
		aspect-ratio: 1;
	}

	.launcher :is(.phanpy, .lldap, .social, .code) {
		aspect-ratio: auto;
	}

	.launcher .photo {
		display: block;
	}

	.photo-1 { grid-area: photo-1; --photo-col: 0; --photo-row: 0; }
	.photo-2 { grid-area: photo-2; --photo-col: 8; --photo-row: 0; }
	.photo-3 { grid-area: photo-3; --photo-col: 0; --photo-row: 2; }

	/* Every tile becomes a static, invisible (background:none) shell
	   here -- just a grid-area/perspective/link holder. Its own local
	   `perspective` (not one shared value on .launcher .frame) is what
	   makes each tile's rotation vanishing point center on *that tile*
	   instead of the whole grid -- found the hard way with hero
	   earlier: perspective on the shared grid container skewed it
	   because the vanishing point was the grid's center, not the
	   tile's. padding:0 because the real padding (for inset link text)
	   moves to .tile-spin below, which is the actual visible/rotating
	   face now. */
	.launcher .frame > .box {
		background: none;
		box-shadow: none;
		padding: 0;
		perspective: 40rem;
	}

	.box.hero {
		cursor: pointer;
	}

	/* The real, visible, rotating face of every tile -- light/dark-mode
	   background+shadow same as the plain .box rule below, just moved
	   up here onto the inner element. No animation/transform by
	   default, so every tile rests flat until the shared toggle (hero's
	   label/checkbox) turns all of them on together. */
	.tile-spin {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 0.5rem;
		box-sizing: border-box;
		background: white;
		--tile-bg: white;
		--tile-shadow: 0 0.1rem 0.3rem hsla(0, 0%, 0%, 0.15);
		box-shadow: var(--tile-shadow);
	}

	.box.guide .tile-spin {
		background: var(--palette-1);
		--tile-bg: var(--palette-1);
	}

	.box.sound.playing .tile-spin {
		background: var(--palette-1);
		--tile-bg: var(--palette-1);
	}

	#hero-toggle:focus-visible ~ .box.hero .tile-spin {
		outline: 0.2rem solid currentColor;
		outline-offset: 0.2rem;
	}

	/* Desktop motion and its shape map live in animations.css. */
	@media (prefers-color-scheme: dark) {
		.tile-spin {
			background: hsla(0, 0%, 18%, 1);
			--tile-bg: hsla(0, 0%, 18%, 1);
			--tile-shadow: 0 0.1rem 0.3rem hsla(0, 0%, 0%, 0.4);
			box-shadow: var(--tile-shadow);
		}

		.box.guide .tile-spin {
			background: var(--palette-2);
			--tile-bg: var(--palette-2);
		}

	}

}

/* Shared phone/tablet rotation primitives. Below the desktop breakpoint
   the outer boxes are the visible faces. Portrait starts the diagonal
   wave automatically; landscape uses the separate word timeline below. */
@media (max-width: 74.999rem) {
	@keyframes mobile-tile-spin-a {
		0% { transform: perspective(40rem) rotate3d(1, 1, 0, 0deg); }
		12.5% { transform: perspective(40rem) rotate3d(1, 1, 0, 20deg); }
		25% { transform: perspective(40rem) rotate3d(1, 1, 0, 55deg); }
		37.5% { transform: perspective(40rem) rotate3d(1, 1, 0, 110deg); }
		50% { transform: perspective(40rem) rotate3d(1, 1, 0, 180deg); }
		62.5% { transform: perspective(40rem) rotate3d(1, 1, 0, 250deg); }
		75% { transform: perspective(40rem) rotate3d(1, 1, 0, 305deg); }
		87.5% { transform: perspective(40rem) rotate3d(1, 1, 0, 340deg); }
		100% { transform: perspective(40rem) rotate3d(1, 1, 0, 360deg); }
	}

	@keyframes mobile-tile-spin-b {
		0% { transform: perspective(40rem) rotate3d(1, -1, 0, 0deg); }
		12.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -20deg); }
		25% { transform: perspective(40rem) rotate3d(1, -1, 0, -55deg); }
		37.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -110deg); }
		50% { transform: perspective(40rem) rotate3d(1, -1, 0, -180deg); }
		62.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -250deg); }
		75% { transform: perspective(40rem) rotate3d(1, -1, 0, -305deg); }
		87.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -340deg); }
		100% { transform: perspective(40rem) rotate3d(1, -1, 0, -360deg); }
	}

	@keyframes mobile-tile-spin-vertical {
		0% { transform: perspective(40rem) rotateY(0deg); }
		12.5% { transform: perspective(40rem) rotateY(20deg); }
		25% { transform: perspective(40rem) rotateY(55deg); }
		37.5% { transform: perspective(40rem) rotateY(110deg); }
		50% { transform: perspective(40rem) rotateY(180deg); }
		62.5% { transform: perspective(40rem) rotateY(250deg); }
		75% { transform: perspective(40rem) rotateY(305deg); }
		87.5% { transform: perspective(40rem) rotateY(340deg); }
		100% { transform: perspective(40rem) rotateY(360deg); }
	}

	@keyframes mobile-tile-spin-b-double {
		0% { transform: perspective(40rem) rotate3d(1, -1, 0, 0deg); }
		12.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -40deg); }
		25% { transform: perspective(40rem) rotate3d(1, -1, 0, -110deg); }
		37.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -220deg); }
		50% { transform: perspective(40rem) rotate3d(1, -1, 0, -360deg); }
		62.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -500deg); }
		75% { transform: perspective(40rem) rotate3d(1, -1, 0, -610deg); }
		87.5% { transform: perspective(40rem) rotate3d(1, -1, 0, -680deg); }
		100% { transform: perspective(40rem) rotate3d(1, -1, 0, -720deg); }
	}

	@keyframes mobile-tile-spin-vertical-double {
		0% { transform: perspective(40rem) rotateY(0deg); }
		12.5% { transform: perspective(40rem) rotateY(40deg); }
		25% { transform: perspective(40rem) rotateY(110deg); }
		37.5% { transform: perspective(40rem) rotateY(220deg); }
		50% { transform: perspective(40rem) rotateY(360deg); }
		62.5% { transform: perspective(40rem) rotateY(500deg); }
		75% { transform: perspective(40rem) rotateY(610deg); }
		87.5% { transform: perspective(40rem) rotateY(680deg); }
		100% { transform: perspective(40rem) rotateY(720deg); }
	}

	@keyframes shadow-return {
		0% { box-shadow: var(--tile-shadow); }
		8%, 80% { box-shadow: none; }
		100% { box-shadow: var(--tile-shadow); }
	}

	.box.hero { --spin-animation: mobile-tile-spin-a; }
	.box.data { --spin-animation: mobile-tile-spin-b; }
	.box.social { --spin-animation: mobile-tile-spin-vertical; }
	.box.phanpy { --spin-animation: mobile-tile-spin-vertical; }
	.box.code { --spin-animation: mobile-tile-spin-vertical; }
	.box.lldap { --spin-animation: mobile-tile-spin-vertical; }
	.box.sound { --spin-animation: mobile-tile-spin-vertical; }
	.box.intra { --spin-animation: mobile-tile-spin-a; }
	.box.hdm { --spin-animation: mobile-tile-spin-a; }
	.box.abs { --spin-animation: mobile-tile-spin-a; }
	.box.mealie { --spin-animation: mobile-tile-spin-b; }
	.box.trek { --spin-animation: mobile-tile-spin-b; }
	.box.chat { --spin-animation: mobile-tile-spin-a; }
	.box.calendar { --spin-animation: mobile-tile-spin-b; }
	.box.config { --spin-animation: mobile-tile-spin-b; }
	.box.plaza { --spin-animation: mobile-tile-spin-b; }
	.box.guide { --spin-animation: mobile-tile-spin-a; }
}

/* Phones and portrait tablets have no manual toggle. Their animations
   start automatically after the shared page-load delay. */
@media (orientation: portrait) and (max-width: 74.999rem),
	(orientation: landscape) and (max-height: 500px) and (max-width: 74.999rem) {
	.launcher .hero {
		display: none;
	}
}

/* Portrait animation and shared defaults. The later 4x9 media block
   supplies the final grid for both phones and tablets. */
@media (max-width: 74.999rem) and (orientation: portrait) {
	.launcher .frame {
		--tile-size: clamp(3.5rem, 22vw, 7rem);
		grid-template-columns: repeat(3, var(--tile-size));
		grid-template-rows: repeat(5, var(--tile-size));
		grid-template-areas:
			"data social phanpy"
			"code lldap intra"
			"hdm abs mealie"
			"trek guide calendar"
			"config plaza chat";
	}

	/* Portrait uses the desktop rotation/color/shadow motion on the
	   outer tile faces. Delays follow the 4x9 raster diagonals, making
	   the wave travel from the upper-left toward the lower-right. */
	@keyframes portrait-shadow-none {
		0%, 100% { box-shadow: none; }
	}

	@keyframes portrait-half-turn-color {
		0%, 100% { background-color: var(--tile-bg); }
		50% { background-color: var(--portrait-hover-color, var(--tile-bg)); }
	}

	@keyframes portrait-double-half-turn-color {
		0%, 100% { background-color: var(--tile-bg); }
		33%, 67% { background-color: var(--portrait-hover-color, var(--tile-bg)); }
	}

	#hero-toggle.hero-toggle-input ~ .box {
		animation:
			var(--spin-animation, mobile-tile-spin-a) var(--portrait-spin-duration, 3.072s) linear 1 forwards,
			var(--portrait-color-animation, portrait-half-turn-color) var(--portrait-spin-duration, 3.072s) linear 1 forwards,
			var(--portrait-shadow-animation, shadow-return) var(--portrait-spin-duration, 3.072s) linear 1 both;
		animation-delay:
			calc(1s + var(--portrait-delay)),
			calc(1s + var(--portrait-delay)),
			calc(1s + var(--portrait-delay));
		box-shadow: none;
	}

	.box.data { --portrait-delay: 0s; }
	.box:is(.ghost-5, .hdm) { --portrait-delay: 0.04096s; }
	.box:is(.ghost-1, .lldap, .intra) { --portrait-delay: 0.08192s; }
	.box:is(.ghost-2, .ghost-7, .social, .sound) { --portrait-delay: 0.12288s; }
	.box:is(.ghost-3, .mealie, .calendar) { --portrait-delay: 0.16384s; }
	.box:is(.trek, .dummy-2, .ghost-6) { --portrait-delay: 0.2048s; }
	.box:is(.plaza, .config, .code, .ghost-8) { --portrait-delay: 0.24576s; }
	.box:is(.guide, .ghost-9) { --portrait-delay: 0.28672s; }
	.box:is(.chat, .ghost-10) { --portrait-delay: 0.32768s; }
	.box:is(.abs, .ghost-11) { --portrait-delay: 0.36864s; }
	.box.ghost-12 { --portrait-delay: 0.4096s; }
	.box.phanpy { --portrait-delay: 0.45056s; }
	.box.ghost { --portrait-shadow-animation: portrait-shadow-none; }

	.box:is(.social, .phanpy, .abs, .config, .guide) { --portrait-hover-color: var(--palette-1); }
	.box:is(.data, .sound, .code, .mealie, .calendar, .plaza) { --portrait-hover-color: var(--palette-2); }
	.box:is(.lldap, .intra, .trek) { --portrait-hover-color: var(--palette-3); }
	.box.chat { --portrait-hover-color: var(--palette-4); }
	.box.hdm { --portrait-hover-color: var(--palette-5); }

	/* A stable, random-looking half of the visible raster rotates one
	   third faster: one turn takes 2.304s instead of 3.072s. */
	.box:is(.lldap, .intra, .data, .plaza, .calendar, .code, .abs, .phanpy) {
		--portrait-spin-duration: 2.304s;
	}

	/* Every horizontal or vertical double tile turns around its centered
	   vertical axis; only singles and the square data tile use diagonals. */
	.box:is(.hdm, .social, .mealie, .plaza, .config) {
		--spin-animation: mobile-tile-spin-vertical;
	}

	/* A stable, random-looking third of the visible raster makes two
	   turns. This selection crosses both duration groups. sound took
	   over data's old 2x2 slot here, so it inherits this too. */
	.box:is(.sound, .calendar) {
		--spin-animation: mobile-tile-spin-b-double;
		--portrait-color-animation: portrait-double-half-turn-color;
	}

	.box:is(.lldap, .hdm, .config, .plaza) {
		--spin-animation: mobile-tile-spin-vertical-double;
		--portrait-color-animation: portrait-double-half-turn-color;
	}

	.box.dummy-2 {
		--spin-animation: mobile-tile-spin-b-double;
		--portrait-color-animation: portrait-double-half-turn-color;
		--portrait-spin-duration: 2.304s;
		--portrait-delay: 0.12288s;
		--portrait-hover-color: var(--palette-5);
	}

	.launcher .box.guide {
		background: var(--palette-1);
		--tile-bg: var(--palette-1);
	}
}

/* Phone and iPad portrait use the full 4x9 grid as a mixed-shape pixel
   display. Visible links/dummies cluster toward the center while
   transparent ghost pixels let the outer edges fray away. */
@media (max-width: 74.999rem) and (orientation: portrait) {
	.launcher .frame {
		/* vmin, not vw: vmin tracks the device's short side, which stays
		   the same physical length whether that device is held portrait
		   or landscape, so the same clamp() here and in the landscape
		   block below (74.999rem block further down) yields matching
		   tile sizes across an orientation change instead of drifting
		   with whichever side happens to be "width" this way up. */
		--tile-size: clamp(2.85rem, 17vmin, 4.25rem);
		font-size: clamp(0.68rem, 3.1vw, 0.9rem);
		grid-template-columns: repeat(4, var(--tile-size));
		grid-template-rows: repeat(9, var(--tile-size));
		grid-template-areas:
			"data ghost-5 ghost-1 ghost-2"
			"hdm hdm lldap ghost-7"
			"intra social social ghost-3"
			"sound sound mealie mealie"
			"sound sound trek plaza"
			"calendar dummy-2 config plaza"
			"ghost-6 code config guide"
			"ghost-8 ghost-9 chat abs"
			"ghost-10 ghost-11 ghost-12 phanpy";
	}

	.launcher .box {
		padding: 0.35rem;
		border-radius: 0.125rem;
	}

	/* Bind-rune-inspired silhouette built only from occupied and empty
	   raster cells: upper/middle arms, compact core, vertical spine and
	   two lower tips. No visual transforms alter the grid geometry. */

	.launcher :is(.social, .hdm, .mealie, .plaza, .config, .sound) {
		aspect-ratio: auto;
	}

	.launcher :is(.dummy, .ghost) {
		display: flex;
	}

	/* Ghost cells participate in the diagonal wave but return to truly
	   empty grid positions before and after it. */
	.launcher .ghost {
		background: transparent;
		--tile-bg: transparent;
		box-shadow: none;
	}

	.dummy-2 { grid-area: dummy-2; }
	.ghost-1 { grid-area: ghost-1; }
	.ghost-2 { grid-area: ghost-2; }
	.ghost-3 { grid-area: ghost-3; }
	.ghost-5 { grid-area: ghost-5; }
	.ghost-6 { grid-area: ghost-6; }
	.ghost-7 { grid-area: ghost-7; }
	.ghost-8 { grid-area: ghost-8; }
	.ghost-9 { grid-area: ghost-9; }
	.ghost-10 { grid-area: ghost-10; }
	.ghost-11 { grid-area: ghost-11; }
	.ghost-12 { grid-area: ghost-12; }

}

/* The iPad uses exactly the same portrait raster and animation as the
   phone, only with larger physical tiles and type. */
@media (min-width: 34rem) and (max-width: 74.999rem) and (orientation: portrait) {
	.launcher .frame {
		--tile-size: clamp(4rem, 13vmin, 6.5rem);
		font-size: clamp(0.85rem, 2vw, 1.1rem);
	}

	.launcher .box {
		padding: 0.5rem;
	}
}

/* iMac-class ultra-wide screens (5K iMac logical width ~2560px): the
   requested 15x8 composition. l1-l16 hold the existing service tiles;
   the named d areas are visible, inert dummy tiles. */
@media (min-width: 140rem) {
	.launcher .frame {
		--tile-size: clamp(4.75rem, 6vw, 5.75rem);
		--canvas-cols: 16;
		--canvas-rows: 8;
		grid-template-columns: repeat(17, var(--tile-size));
		grid-template-rows: repeat(8, var(--tile-size));
		grid-template-areas:
			". . . . . . . photo-3 photo-3 photo-3 . . . . . ."
			"d8 l7 l13 l2 l2 l1 l1 photo-3 photo-3 photo-3 l12 l10 . . . ."
			". d1 l13 photo-4 photo-4 photo-4 photo-4 photo-3 photo-3 photo-3 l4 l4 l11 . . ."
			". . l14 photo-4 photo-4 photo-4 photo-4 photo-3 photo-3 photo-3 l4 l4 l8 l8 . ."
			". . d6 l15 l3 l3 photo-1 photo-1 photo-1 photo-2 photo-2 photo-2 photo-2 photo-2 d5 ."
			". . . d7 l3 l3 photo-1 photo-1 photo-1 photo-2 photo-2 photo-2 photo-2 photo-2 d9 ."
			". . . . . l16 photo-1 photo-1 photo-1 l5 l6 l6 d2 l9 l9 d4"
			". . . . . . photo-1 photo-1 photo-1 l5 . . . . . .";
	}

	.launcher :is(.data, .social, .phanpy, .code, .lldap, .intra, .hdm, .abs, .mealie, .config) {
		aspect-ratio: auto;
	}

	.data { grid-area: l1; }
	.social { grid-area: l2; }
	.phanpy { grid-area: l3; }
	.code { grid-area: l4; }
	.lldap { grid-area: l5; }
	.intra { grid-area: l6; }
	.hdm { grid-area: l7; }
	.abs { grid-area: l8; }
	.mealie { grid-area: l9; }
	.trek { grid-area: l10; }
	.chat { grid-area: l11; }
	.calendar { grid-area: l12; }
	.config { grid-area: l13; }
	.plaza { grid-area: l14; }
	.guide { grid-area: l15; }
	.sound { grid-area: l16; }

	.photo-1 { grid-area: photo-1; --photo-col: 6; --photo-row: 4; }
	.photo-2 { grid-area: photo-2; --photo-col: 9; --photo-row: 4; }
	.photo-3 { grid-area: photo-3; --photo-col: 7; --photo-row: 0; }
	.photo-4 { grid-area: photo-4; --photo-col: 3; --photo-row: 2; }

	/* Visible dummy tiles use the same .tile-spin face and animation as
	   service tiles; unused filler elements stay hidden. */
	.launcher :is(.filler-2, .filler-3, .filler-4, .filler-5, .filler-6, .filler-7, .filler-8, .filler-9) {
		display: block;
	}

	.filler-1 { grid-area: d; }
	.filler-2 { grid-area: d1; }
	.filler-3 { grid-area: d2; }
	.filler-4 { grid-area: d4; }
	.filler-5 { grid-area: d5; }
	.filler-6 { grid-area: d6; }
	.filler-7 { grid-area: d7; }
	.filler-8 { grid-area: d8; }
	.filler-9 { grid-area: d9; }
	.filler-10 { grid-area: d10; }
	.filler-11 { grid-area: d11; }
	.filler-12 { grid-area: d12; }

}

/* Phone and iPad landscape transpose the portrait 4x9 rune into one
   shared 9x4 raster and write IN / OUT horizontally across it. */
@media (orientation: landscape) and (max-width: 74.999rem),
	(orientation: landscape) and (min-width: 75rem) and (max-width: 90rem) and (pointer: coarse),
	(orientation: landscape) and (min-width: 75rem) and (max-width: 90rem) and (hover: none) {
	.launcher .frame {
		/* Same bounds and vmin unit as the portrait block above, so a
		   phone/iPad shows the same tile size in both orientations. */
		--tile-size: clamp(2.85rem, 17vmin, 4.25rem);
		font-size: clamp(0.6rem, 1.8vw, 0.85rem);
		gap: clamp(0.35rem, 1vmin, 0.75rem);
		grid-template-columns: repeat(9, var(--tile-size));
		grid-template-rows: repeat(4, var(--tile-size));
		grid-template-areas:
			"data hdm intra sound sound calendar ghost-6 ghost-8 ghost-10"
			"ghost-5 hdm social sound sound dummy-2 code ghost-9 ghost-11"
			"ghost-1 lldap social mealie trek config config chat ghost-12"
			"ghost-2 ghost-7 ghost-3 mealie plaza plaza guide abs phanpy";
	}

	.launcher .hero {
		display: none;
	}

	.launcher .box {
		border-radius: 0.125rem;
	}

	.launcher :is(.hdm, .social, .mealie, .config, .plaza, .sound) {
		aspect-ratio: auto;
	}

	.launcher :is(.dummy, .ghost) {
		display: flex;
	}

	.launcher .ghost {
		background: transparent;
		--tile-bg: transparent;
		box-shadow: none;
	}

	.dummy-2 { grid-area: dummy-2; }
	.ghost-1 { grid-area: ghost-1; }
	.ghost-2 { grid-area: ghost-2; }
	.ghost-3 { grid-area: ghost-3; }
	.ghost-5 { grid-area: ghost-5; }
	.ghost-6 { grid-area: ghost-6; }
	.ghost-7 { grid-area: ghost-7; }
	.ghost-8 { grid-area: ghost-8; }
	.ghost-9 { grid-area: ghost-9; }
	.ghost-10 { grid-area: ghost-10; }
	.ghost-11 { grid-area: ghost-11; }
	.ghost-12 { grid-area: ghost-12; }

	/* Landscape runs IN / OUT twice in one timeline. Every inter-word
	   pause stays empty; the resting grid returns only after the second OUT. */
	@keyframes ipad-landscape-words {
		0% { background-color: var(--tile-bg); opacity: 1; }
		3.16% { background-color: var(--tile-bg); opacity: 0; }
		4.21%, 13.16% { background-color: var(--landscape-in, var(--tile-bg)); opacity: var(--landscape-visible-in, 0); }
		20.53%, 26.84% { background-color: var(--tile-bg); opacity: 0; }
		27.89%, 36.84% { background-color: var(--landscape-out, var(--tile-bg)); opacity: var(--landscape-visible-out, 0); }
		44.21%, 50.53% { background-color: var(--tile-bg); opacity: 0; }
		51.58%, 60.53% { background-color: var(--landscape-in, var(--tile-bg)); opacity: var(--landscape-visible-in, 0); }
		67.89%, 74.21% { background-color: var(--tile-bg); opacity: 0; }
		75.26%, 84.21% { background-color: var(--landscape-out, var(--tile-bg)); opacity: var(--landscape-visible-out, 0); }
		91.58%, 96.84% { background-color: var(--tile-bg); opacity: 0; }
		100% { background-color: var(--tile-bg); opacity: 1; }
	}

	.launcher .box {
		--landscape-in: initial;
		--landscape-out: initial;
		--landscape-visible-in: 0;
		--landscape-visible-out: 0;
		animation: ipad-landscape-words 22.8s linear 1;
		animation-delay: 5s;
	}

	/* I */
	.box:is(.iphone-cell-0, .iphone-cell-3, .iphone-cell-4, .iphone-cell-5, .iphone-cell-6, .iphone-cell-7, .iphone-cell-8, .iphone-cell-11) {
		--landscape-in: var(--palette-2);
		--landscape-visible-in: 1;
	}

	/* N, placed to the right of I */
	.box:is(.iphone-cell-19, .iphone-cell-20, .iphone-cell-21, .iphone-cell-22, .iphone-cell-25, .iphone-cell-30, .iphone-cell-32, .iphone-cell-33, .iphone-cell-34, .iphone-cell-35) {
		--landscape-in: var(--palette-3);
		--landscape-visible-in: 1;
	}

	/* O */
	.box:is(.iphone-cell-0, .iphone-cell-1, .iphone-cell-2, .iphone-cell-3, .iphone-cell-4, .iphone-cell-7, .iphone-cell-8, .iphone-cell-9, .iphone-cell-10, .iphone-cell-11) {
		--landscape-out: var(--palette-5);
		--landscape-visible-out: 1;
	}

	/* U, placed to the right of O */
	.box:is(.iphone-cell-12, .iphone-cell-13, .iphone-cell-14, .iphone-cell-15, .iphone-cell-19, .iphone-cell-20, .iphone-cell-21, .iphone-cell-22, .iphone-cell-23) {
		--landscape-out: var(--palette-1);
		--landscape-visible-out: 1;
	}

	/* T, placed to the right of OU */
	.box:is(.iphone-cell-24, .iphone-cell-28, .iphone-cell-29, .iphone-cell-30, .iphone-cell-31, .iphone-cell-32) {
		--landscape-out: var(--palette-4);
		--landscape-visible-out: 1;
	}

}

/* iPad landscape uses the same raster and animation at a larger scale. */
@media (orientation: landscape) and (min-width: 48rem) and (max-width: 74.999rem) and (min-height: 28rem),
	(orientation: landscape) and (min-width: 75rem) and (max-width: 90rem) and (pointer: coarse),
	(orientation: landscape) and (min-width: 75rem) and (max-width: 90rem) and (hover: none) {
	.launcher .frame {
		--tile-size: clamp(4rem, 13vmin, 6.5rem);
		font-size: clamp(0.75rem, 1.5vw, 1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.launcher :is(.box, .tile-spin) {
		animation: none !important;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 74.999rem) {
	.launcher .frame > .box {
		box-shadow: var(--tile-shadow);
	}

	.launcher .frame > .ghost {
		box-shadow: none;
	}
}

   a:nth-child(5n):hover { background: var(--palette-1); }
   a:nth-child(5n+1):hover { background: var(--palette-2); }
   a:nth-child(5n+2):hover { background: var(--palette-3); }
   a:nth-child(5n+3):hover { background: var(--palette-4); }
   a:nth-child(5n+4):hover { background: var(--palette-5); }

   a:nth-child(5n):active { background: var(--palette-1); }
   a:nth-child(5n+1):active { background: var(--palette-2); }
   a:nth-child(5n+2):active { background: var(--palette-3); }
   a:nth-child(5n+3):active { background: var(--palette-4); }
   a:nth-child(5n+4):active { background: var(--palette-5); }

   /* Same nth-child hover/active colors, but targeting .tile-spin
      (the descendant that actually carries the visible background from
      75rem up) instead of the <a> itself -- from that width, the <a>'s
      own background is turned off (.launcher .frame > .box), so the
      rule above has nothing left to color. Below 75rem .tile-spin is
      display:contents/invisible, so these are simply inert there and
      the rules above keep doing the job as before.

      !important: while the grid animation is running, .tile-spin's
      background-color is continuously being set by the flash-*
      keyframes -- a running CSS animation always wins over a static
      author rule for the same property, no matter how specific, with
      exactly one exception: !important declarations rank above
      animations in the cascade. Without it, hovering a tile mid-
      animation would have no visible effect at all. */
   a:nth-child(5n):hover .tile-spin { background: var(--palette-1) !important; }
   a:nth-child(5n+1):hover .tile-spin { background: var(--palette-2) !important; }
   a:nth-child(5n+2):hover .tile-spin { background: var(--palette-3) !important; }
   a:nth-child(5n+3):hover .tile-spin { background: var(--palette-4) !important; }
   a:nth-child(5n+4):hover .tile-spin { background: var(--palette-5) !important; }

   a:nth-child(5n):active .tile-spin { background: var(--palette-1) !important; }
   a:nth-child(5n+1):active .tile-spin { background: var(--palette-2) !important; }
   a:nth-child(5n+2):active .tile-spin { background: var(--palette-3) !important; }
   a:nth-child(5n+3):active .tile-spin { background: var(--palette-4) !important; }
   a:nth-child(5n+4):active .tile-spin { background: var(--palette-5) !important; }

   .box.social:hover,
   .box.social:active,
   .box.social:hover .tile-spin,
   .box.social:active .tile-spin {
	background: var(--palette-1) !important;
   }

   .box.calendar:hover,
   .box.calendar:active,
   .box.calendar:hover .tile-spin,
   .box.calendar:active .tile-spin {
	background: var(--palette-2) !important;
   }

   .box.data:hover,
   .box.data:active,
   .box.data:hover .tile-spin,
   .box.data:active .tile-spin {
	background: var(--palette-2) !important;
   }

   .box.intra:hover,
   .box.intra:active,
   .box.intra:hover .tile-spin,
   .box.intra:active .tile-spin {
	background: var(--palette-3) !important;
   }

   /* Resting and hover/active are both palette-1 now (see .box.guide
      further down and its .tile-spin override in the desktop tier
      above) -- kept as its own rule anyway so guide still reliably
      outranks the generic hover cycle below it and the plain .box
      rules, not because hover needs to look any different from rest
      anymore. */
   .box.guide:hover,
   .box.guide:active,
   .box.guide:hover .tile-spin,
   .box.guide:active .tile-spin {
	background: var(--palette-1) !important;
   }


.frame div,a,label {
	border-radius:0.35rem;
}

.box {
	background: white;
	--tile-bg: white;
	--tile-shadow: 0 0.1rem 0.3rem hsla(0,0%,0%, 0.15);
	box-shadow: var(--tile-shadow);
	/*box-shadow: 0 0.1rem 0.2rem hsla(205,50%,53%, 0.5);*/

}

/* .box.guide (not just .guide) so this reliably outranks both the
   light and dark-mode .box background rules regardless of source
   order. palette-1, the actually-red swatch (calendar uses the darker
   strawberry palette-2 instead) -- only actually visible below 75rem --
   from 75rem up .tile-spin carries the real background instead (see its
   own .box.guide .tile-spin override above), this element's own
   background is turned off there. */
.box.guide {
	background: var(--palette-1);
	--tile-bg: var(--palette-1);
}

/* .sound is a real <button>, not an <a> like every other tile -- no
   native audio controls (no CSS/HTML way exists to toggle play/pause
   without JS, confirmed there's no hack around that), just a tiny
   click handler in index.html calling audio.play()/.pause() and
   toggling this class. Neutralize the browser's own button chrome
   (border/font/cursor) and replicate the <a> tile-label look, since
   button text doesn't pick up the tag-based `a{}` rule above. */
.box.sound {
	appearance: none;
	border: none;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	color: lightpink;
	text-decoration: none;
	font-style: italic;
}

.box.sound:hover {
	font-weight: 1000;
}

.box.sound audio {
	display: none;
}

.box.sound:hover,
.box.sound:hover .tile-spin {
	background: var(--palette-2) !important;
}

/* Same permanent-color treatment as .box.guide above, and the same
   reason for staying at two classes instead of three: .sound.playing
   (not .box.sound.playing) so this reliably loses to the desktop
   shell rule (.launcher .frame > .box, three classes) instead of
   tying with it on specificity and winning via source order --
   confirmed as a real bug, not theoretical: with three classes here,
   the outer .box (meant to be an invisible desktop-tier shell) stayed
   solid red while only its child .tile-spin actually rotated, showing
   a static red patch behind the spinning tile. Two classes still
   correctly outranks the plain .box{background:white} rule. */
.sound.playing {
	background: var(--palette-1);
	--tile-bg: var(--palette-1);
}

@media (prefers-color-scheme: dark) {
	body {
	background-image: radial-gradient(circle, hsla(0,0%,14%,1) 1px, hsla(0,0%,10%,1) 1px);
        background-size: 15px 15px;
	color: ghostwhite;
	}
	a, .box.sound {
		color: hsla(0,0%,50%,1);

	}
	a:hover, .box.sound:hover {
		color:black;
	}
        .box {
		background: hsla(0,0%,18%,1);
		--tile-bg: hsla(0,0%,18%,1);
		--tile-shadow: 0 0.1rem 0.3rem hsla(0, 0%,0%, 0.4);
		box-shadow: var(--tile-shadow);
		/*, 0 0.5rem 0.2rem hsla(0, 0%,0%, 1);*/
		/*box-shadow: 0 0.1rem 0.2rem rgba(255, 20,147, 0.5);*/
	}
}