/*
	Loom Robotics — brand overrides
	Loaded after main.css. Holds net-new styling only; template CSS left intact.
*/

:root {
	--charcoal: #15191e;
	--graphite: #252b33;
	--graphite-line: #323a44;
	--offwhite: #f3f4f5;
	--orange: #ff6a13;
	--steel: #5b7a99;
}

/* --- Intro / hero logo (bare transparent mark, no medallion) --- */
#intro .hero-logo {
	display: block;
	width: 9rem;
	max-width: 45vw;
	margin: 0 auto 1.75rem auto;
	border-bottom: 0;
}

#intro .hero-logo img {
	width: 100%;
	height: auto;
	display: block;
}

#intro p {
	max-width: 34rem;
	font-style: normal;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.01em;
	line-height: 1.7;
}

/* Slow accent pulse on the scroll CTA */
@keyframes loom-pulse {
	0%, 100% { box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 0 rgba(255, 106, 19, 0); }
	50%      { box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 8px rgba(255, 106, 19, 0); }
}
#intro .actions .button.solo {
	animation: loom-pulse 3.5s ease-in-out infinite;
}

/* --- Section eyebrow label --- */
.eyebrow {
	display: block;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 0.75rem;
}

/* --- Capability highlights grid (Tier 2) --- */
.capabilities {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0 0 2rem 0;
}

.capability {
	background: #ffffff;
	border: solid 1px rgba(220, 220, 220, 0.6);
	border-top: solid 2px var(--orange);
	padding: 1.75rem 1.5rem;
}

.capability h3 {
	font-size: 1rem;
	margin: 0 0 0.5rem 0;
	letter-spacing: 0.02em;
}

.capability p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	color: #5b636b;
}

@media screen and (max-width: 980px) {
	.capabilities { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 736px) {
	.capabilities { grid-template-columns: 1fr; }
}

/* --- Architecture layer preview (Tier 3) --- */
.layers {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	border-top: solid 1px rgba(220, 220, 220, 0.6);
}

.layers li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: solid 1px rgba(220, 220, 220, 0.6);
}

.layers .layer-id {
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--steel);
	white-space: nowrap;
	min-width: 5.5rem;
}

.layers .layer-name {
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	min-width: 11rem;
}

.layers .layer-desc {
	font-size: 0.9rem;
	color: #5b636b;
}

@media screen and (max-width: 736px) {
	.layers li { flex-direction: column; gap: 0.25rem; }
}

/* --- Architecture explorer teaser (Tier 4) --- */
.arch-teaser {
	position: relative;
	background: var(--charcoal);
	background-image:
		linear-gradient(rgba(91, 122, 153, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(91, 122, 153, 0.12) 1px, transparent 1px);
	background-size: 40px 40px;
	border: solid 1px var(--graphite-line);
	padding: 3.5rem 2.5rem;
	text-align: center;
	color: var(--offwhite);
	margin: 0 0 2rem 0;
}

.arch-teaser h2 { color: var(--offwhite); }

.arch-teaser p {
	color: rgba(255, 255, 255, 0.65);
	max-width: 34rem;
	margin: 0 auto 1.5rem auto;
	text-align: center;
}

.arch-teaser .badge {
	display: inline-block;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--steel);
	border: solid 1px var(--steel);
	border-radius: 2rem;
	padding: 0.35rem 0.9rem;
	margin-bottom: 1rem;
}

/* --- Steel-blue secondary accent utilities --- */
.text-steel { color: var(--steel); }

/* --- Header logo mark --- */
#header .logo {
	display: inline-flex;
	align-items: center;
}
#header .logo .logo-mark {
	height: 1.4rem;
	width: auto;
	vertical-align: middle;
	margin-right: 0.55rem;
	border-bottom: 0;
}

/* --- Status pill for devlog dates --- */
.status-pill {
	display: inline-block;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	border: solid 1px var(--orange);
	border-radius: 2rem;
	padding: 0.2rem 0.7rem;
}

.status-pill.done    { color: var(--steel); border-color: var(--steel); }
.status-pill.current { color: var(--orange); border-color: var(--orange); }
.status-pill.next    { color: #8a939c; border-color: #c7cdd3; }

/* --- Media gallery grid (homepage preview + gallery.html) --- */
.media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 0 1.5rem 0;
}

.media-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--charcoal);
	background-image:
		linear-gradient(rgba(91, 122, 153, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(91, 122, 153, 0.12) 1px, transparent 1px);
	background-size: 28px 28px;
	border: solid 1px var(--graphite-line);
	border-top: solid 2px var(--orange);
	color: var(--offwhite);
	overflow: hidden;
}

.media-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.media-tile .media-label {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0.6rem 0.8rem;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}

.media-tile .media-placeholder {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--steel);
}

@media screen and (max-width: 980px) {
	.media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 736px) {
	.media-grid { grid-template-columns: 1fr; }
}

/* --- Roadmap timeline (homepage) --- */
.roadmap {
	list-style: none;
	padding: 0 0 0 1.5rem;
	margin: 0 0 2rem 0;
	border-left: solid 2px rgba(220, 220, 220, 0.7);
}

.roadmap li {
	position: relative;
	padding: 0 0 1.5rem 0.5rem;
}

.roadmap li:last-child { padding-bottom: 0; }

.roadmap li::before {
	content: "";
	position: absolute;
	left: -2.05rem;
	top: 0.3rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: #c7cdd3;
	box-shadow: 0 0 0 3px #ffffff;
}

.roadmap li.current::before { background: var(--orange); }
.roadmap li.done::before    { background: var(--steel); }

.roadmap h3 {
	font-size: 1rem;
	margin: 0.1rem 0 0.35rem 0;
	letter-spacing: 0.02em;
}

.roadmap p {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	color: #5b636b;
}

.roadmap .status-pill { margin-bottom: 0.4rem; }

/* --- Gallery page section spacing --- */
.gallery-group { margin: 0 0 2.5rem 0; }
.gallery-group h2 { margin-bottom: 0.35rem; }
.gallery-group .group-note {
	font-size: 0.9rem;
	color: #5b636b;
	margin: 0 0 1.25rem 0;
}

/* =================================================================
	White paper page (technical.html)
	A research-paper read: lede header, then a two-column body with a
	sticky, scroll-spied table of contents beside the prose.
	================================================================= */

.whitepaper .paper-subtitle {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #5b636b;
	max-width: 42rem;
	margin: 0 0 1rem 0;
}

/* The Massively template sets #wrapper { overflow: hidden }, which would
	become the sticky containing block and stop the TOC from sticking to the
	viewport. Relax it on this page, desktop-only (the TOC is static on mobile,
	and the template's mobile off-canvas relies on the default overflow). */
@media screen and (min-width: 981px) {
	body.page-whitepaper #wrapper { overflow: visible; }
}

/* Two-column layout: sticky TOC + body. align-items:start lets the
	aside stick within the grid track. */
.paper-layout {
	display: grid;
	grid-template-columns: 14rem 1fr;
	gap: 3rem;
	align-items: start;
}

/* --- Table of contents (sticky, scroll-spy) --- */
.paper-toc {
	position: sticky;
	top: 2rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	padding-right: 0.5rem;
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

.paper-toc .toc-label {
	display: block;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 0.85rem;
}

.paper-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: solid 1px rgba(220, 220, 220, 0.8);
}

.paper-toc ol ol {
	border-left: 0;
	margin: 0.35rem 0 0.5rem 0;
}

.paper-toc li { margin: 0; }

.paper-toc a {
	display: block;
	padding: 0.3rem 0 0.3rem 1rem;
	margin-left: -1px;
	border-left: solid 2px transparent;
	font-size: 0.8rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: #6b737b;
	border-bottom: 0;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.paper-toc ol ol a {
	padding-left: 1.6rem;
	font-size: 0.75rem;
	color: #8a929a;
}

.paper-toc a:hover { color: var(--charcoal); }

.paper-toc a.active {
	color: var(--orange);
	border-left-color: var(--orange);
	font-weight: 600;
}

/* --- Body prose --- */
.paper-body { min-width: 0; }

.paper-section { scroll-margin-top: 1.5rem; }
.paper-subsection { scroll-margin-top: 1.5rem; }

.paper-section + .paper-section {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: solid 1px rgba(220, 220, 220, 0.7);
}

.paper-section > h2 {
	font-size: 1.5rem;
	letter-spacing: 0.01em;
	margin-bottom: 1.25rem;
}

.paper-subsection { margin: 0 0 2rem 0; }
.paper-subsection:last-child { margin-bottom: 0; }

.paper-subsection > h3 {
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--charcoal);
	margin-bottom: 0.6rem;
}

.paper-body p {
	line-height: 1.75;
	color: #2f353b;
}

/* --- Display equation --- */
.paper-eq {
	background: var(--charcoal);
	border: solid 1px var(--graphite-line);
	border-left: solid 2px var(--orange);
	color: var(--offwhite);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 1.25rem 1rem;
	margin: 1.5rem 0 0.75rem 0;
}

.paper-eq sub {
	font-size: 0.7em;
	color: var(--steel);
}

.paper-eq-caption {
	font-size: 0.85rem !important;
	color: #6b737b !important;
	text-align: center;
	max-width: 34rem;
	margin: 0 auto 0 auto;
}

/* --- Code / schema blocks (YAML) --- */
.paper-code {
	display: block;
	background: var(--charcoal);
	border: solid 1px var(--graphite-line);
	border-left: solid 2px var(--steel);
	color: var(--offwhite);
	font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
	font-size: 0.8rem;
	line-height: 1.65;
	padding: 1.1rem 1.25rem;
	margin: 1rem 0 1.5rem 0;
	overflow-x: auto;
	white-space: pre;
	-webkit-text-size-adjust: 100%;
}

/* --- Numbered contribution blocks --- */
.contribution {
	display: flex;
	gap: 1.1rem;
	padding: 1.25rem 0;
	border-top: solid 1px rgba(220, 220, 220, 0.6);
}

.contribution:last-child { border-bottom: solid 1px rgba(220, 220, 220, 0.6); }

.contribution-id {
	font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--steel);
	white-space: nowrap;
	padding-top: 0.2rem;
	min-width: 2.6rem;
}

.contribution-body { min-width: 0; }

.contribution-body h4 {
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	margin-bottom: 0.4rem;
}

.contribution-body p {
	font-size: 0.92rem;
	margin: 0;
}

/* --- Responsive: collapse to a single column; TOC becomes a plain
	non-sticky block above the prose. --- */
@media screen and (max-width: 980px) {
	.paper-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.paper-toc {
		position: static;
		top: auto;
		padding: 1.25rem 1.25rem 0.75rem 1.25rem;
		background: #ffffff;
		border: solid 1px rgba(220, 220, 220, 0.7);
		border-top: solid 2px var(--orange);
	}
}

@media screen and (max-width: 736px) {
	.contribution { flex-direction: column; gap: 0.3rem; }
	.contribution-id { padding-top: 0; }
}