/* Responsive repairs for legacy project pages. Desktop dimensions stay unchanged. */

.celestial-work {
	width:800px;
	max-width:100%;
}

.celestial-work > .subnavbar {
	margin-bottom:8px;
}

.celestial-work-image {
	display:block;
	box-sizing:border-box;
	width:824px;
	max-width:none;
	height:auto;
	margin:0;
}

.celestial-copy {
	width:800px;
	margin-top:6px;
	text-align:left;
}

.celestial-copy .subsubtitle + .bodytype {
	margin-top:1px;
}

.celestial-copy .bodytype + .subsubtitle {
	margin-top:8px;
}

.celestial-process {
	width:800px;
}

.celestial-process-hero {
	display:block;
	box-sizing:border-box;
	width:824px;
	height:auto;
	margin:0;
}

.celestial-process-copy {
	box-sizing:border-box;
	width:800px;
	padding:12px 10px 0;
	text-align:left;
}

.celestial-process-diagram {
	display:block;
	width:537px;
	max-width:100%;
	height:auto;
	margin:12px auto;
}

.celestial-process-section {
	width:540px;
	margin:30px auto 0;
	padding-top:12px;
	border-top:1px dotted #bbb;
	text-align:center;
}

.celestial-process-grid {
	display:grid;
	grid-template-columns:repeat(2, 267px);
	gap:4px 6px;
	align-items:start;
	margin-top:4px;
}

.celestial-process-grid img {
	box-sizing:border-box;
	max-width:100%;
	height:auto;
}

.celestial-process-grid .process-wide {
	grid-column:1 / -1;
	width:540px;
}

.visible-thumbnail-grid {
	display:grid;
	grid-template-columns:repeat(3, 240px);
	gap:4px;
	width:728px;
	margin:0;
}

.visible-thumbnail-grid a,
.visible-thumbnail-grid img {
	display:block;
}

.forgotten-opening-grid {
	display:grid;
	grid-template-columns:214px 280px;
	width:max-content;
}

.forgotten-opening-grid img {
	display:block;
}

/* Rebuilt 540px project layouts: preserve the original desktop proportions,
   then stack deliberately instead of shrinking nested tables. */
.legacy-project-content {
	box-sizing:border-box;
	width:540px;
	max-width:100%;
	margin:0 auto;
	text-align:left;
}

.legacy-unavailable-note {
	box-sizing:border-box;
	margin:12px;
	padding:12px;
	border:12px solid yellowgreen;
	background-color:rgb(236, 180, 174);
	font-size:medium;
	line-height:normal;
	text-align:center;
}

.legacy-copy-columns {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:31px;
	position:relative;
	align-items:start;
}

.legacy-copy-columns::before {
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	border-left:1px dotted #bbb;
	content:"";
}

.imaps-introduction {
	margin:15px 0 10px;
}

.imaps-link-grid {
	display:grid;
	grid-template-columns:repeat(2, 267px);
	gap:5px 6px;
}

.imaps-link-grid a {
	display:block;
	box-sizing:border-box;
	text-align:center;
}

.imaps-link-grid img {
	display:block;
	box-sizing:border-box;
	width:100%;
	height:30px;
	border:0;
}

.imaps-link-grid span {
	display:block;
}

.collective-banner,
.misplaced-hero,
.kala-hero {
	display:block;
	box-sizing:border-box;
	width:100%;
	height:auto;
}

.collective-banner {
	margin:15px 0 20px;
}

.collective-introduction,
.misplaced-introduction,
.kala-introduction {
	margin:10px 0 20px;
}

.collective-content > .subsubtitle,
.misplaced-content > .subsubtitle {
	margin-bottom:1px;
}

.legacy-general-note {
	margin-top:25px;
	padding:30px 0 20px;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

.misplaced-content > .subtitlenav {
	margin-top:1px;
}

.misplaced-image-stack,
.kala-image-stack {
	display:flex;
	flex-direction:column;
	gap:16px;
	align-items:flex-start;
}

.misplaced-image-stack img,
.kala-image-stack img {
	display:block;
	box-sizing:border-box;
	max-width:100%;
	height:auto;
}

.kala-opening-grid {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:6px;
	margin-top:5px;
}

.kala-opening-grid img {
	display:block;
	box-sizing:border-box;
	width:100%;
	height:auto;
}

.kala-section {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:20px;
	margin-top:20px;
	padding-top:20px;
	border-top:1px dotted #bbb;
	text-align:left;
}

.kala-section-somnambulist > .bodytype {
	grid-column:2;
}

@media screen and (max-width:840px) {
	.responsive-project .subnavbar {
		line-height:1.65;
	}

	.responsive-project img.thickwrap,
	.responsive-project img.thinwrap,
	.responsive-project iframe.thickwrap {
		box-sizing:border-box;
		max-width:100%;
		height:auto;
	}

	.responsive-project iframe.thickwrap[src*="youtube"],
	.responsive-project iframe.thickwrap[src*="vimeo"] {
		width:100%;
		aspect-ratio:16 / 9;
	}

	.responsive-project object,
	.responsive-project embed {
		max-width:100%;
	}

	.responsive-project .botspan,
	.responsive-project .botspan2,
	.responsive-project .botspan3 {
		box-sizing:border-box;
		position:relative;
		top:auto;
		width:100%;
		margin-top:24px;
		padding-top:8px;
	}

	.visible-responsive .twocolumn_rel {
		box-sizing:border-box;
		width:100%;
	}

	.visible-responsive .leftcol,
	.visible-responsive .rightcol {
		box-sizing:border-box;
		position:relative;
		left:auto;
		top:auto;
		width:100%;
		padding:0;
		background-image:none;
	}

	.visible-responsive .leftcol {
		margin-bottom:18px;
	}

	.visible-thumbnail-grid {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:8px;
		width:100%;
	}

	.visible-thumbnail-grid img {
		box-sizing:border-box;
		width:100%;
		height:auto;
	}

	.celestial-work,
	.celestial-copy,
	.celestial-process,
	.celestial-process-copy,
	.celestial-process-section {
		box-sizing:border-box;
		width:100%;
	}

	.celestial-work-image,
	.celestial-process-hero {
		width:100%;
		max-width:100%;
	}

	.celestial-process-copy {
		padding-left:0;
		padding-right:0;
	}

	.celestial-process-grid {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		width:100%;
	}

	.celestial-process-grid .process-wide {
		width:100%;
	}

	.forgotten-opening-grid {
		grid-template-columns:minmax(0, 214fr) minmax(0, 280fr);
		box-sizing:border-box;
		width:100%;
	}

	.forgotten-opening-grid img {
		width:100%;
		height:auto;
	}
}

@media screen and (max-width:600px) {
	.legacy-unavailable-note {
		margin:8px 0 16px;
		padding:10px;
		border-width:8px;
	}

	.legacy-copy-columns,
	.kala-section,
	.kala-opening-grid,
	.imaps-link-grid {
		grid-template-columns:1fr;
	}

	.legacy-copy-columns,
	.kala-section {
		gap:16px;
	}

	.legacy-copy-columns::before {
		display:none;
	}

	.imaps-link-grid {
		gap:8px;
	}

.imaps-link-grid .thinwrap {
		width:100%;
	}

	.kala-section-somnambulist > .bodytype {
		grid-column:auto;
	}

	.misplaced-image-stack,
	.kala-image-stack {
		align-items:center;
	}

}

@media screen and (max-width:510px) {
	.visible-thumbnail-grid,
	.celestial-process-grid {
		grid-template-columns:1fr;
	}

	.celestial-process-grid .process-wide {
		grid-column:auto;
	}
}