/* tmj-technology.css — the Technology page's own layout.
   Owned by the technology rework; nothing else on the site uses these classes.
   Enqueued centrally so page builds never touch inc/enqueue.php.

   WHY THIS FILE EXISTS
   --------------------
   /technology/ is an inventory of 29 instruments, not an argument. Rendered with
   the shared card scaffold every name came out at .info-title size — clamp(2rem,
   4vw,3rem) serif — so the page read as 33 stacked page titles with a sentence
   under each. Client: "a column on the left that has all the technology names,
   and then the right should have all the technology descriptions/photo content,
   without such massive titles."

   So: a two-pane index. Sticky left list of every name, right pane carrying the
   descriptions and photo. All 29 entries stay in the DOM at every breakpoint —
   the page earns impressions on the individual instrument names, and tab panels
   would hide 28 of 29 from the indexable content. Navigation is plain in-page
   anchors, highlighting is CSS :target, so the whole thing works with JS off.

   HARD CORNERS throughout (the square echoes the logo diamond). The only rotated
   thing here is the small square marker before each name — a diamond, not a dot.
   ========================================================================== */

/* ---------------------------------------------------------------- sticky prereq

   tokens.css opens with `html, body { overflow-x: hidden }` to clip the logo
   marquee to the viewport. `hidden` makes BOTH elements scroll containers, and a
   position:sticky descendant then sticks to a box that never scrolls — measured
   here: at scrollY 1311 the index sat at top:-615px, i.e. it scrolled away like a
   static block. `clip` clips identically but creates no scroll container, so
   sticky works again (same probe: top:158px, pinned).

   Scoped to this page by body class so no other page's overflow behaviour moves,
   and both elements are covered because either one being a scroll container is
   enough to break it. :has() is the only way to reach <html> from a page-scoped
   rule; where it is unsupported the index simply scrolls with the page, which is
   the pre-existing behaviour and still usable. */
/* SUPERSEDED 2026-09-24: body is now overflow-x:clip site-wide (tmj-modules.css),
   so this page-scoped rule was removed -- it also keyed on a LIVE page ID that
   does not exist on this build. */

.tech-shell {
	/* --tech-top is the sticky offset AND the anchor scroll-margin: both have to
	   clear header.php's position:fixed chrome or a jumped-to entry lands under
	   the logo. Desktop = --total-header-height (52 super + 86 nav) + a gutter;
	   below 1100px the super-header is hidden and .nav-container collapses to
	   70px (tmj-header.css @media max-width:1100px), so the offset drops with it. */
	--tech-top: calc(var(--total-header-height, 138px) + 1.25rem);
	--tech-rule: #dfeae8;

	display: grid;
	grid-template-columns: minmax(14rem, 17rem) 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	/* stretch is the grid default and it makes the left column full-height, which
	   silently kills position:sticky on it. */
	align-items: start;
}

/* ---------------------------------------------------------------- left index */

.tech-index {
	position: sticky;
	top: var(--tech-top);
}

.tech-index__heading {
	margin: 0 0 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--tech-rule);
	font-family: "Libre Franklin", sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--dark);
}

.tech-index__group {
	margin: 1.375rem 0 0.5rem;
	font-family: "Libre Franklin", sans-serif;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mid);
}

.tech-index__group:first-child { margin-top: 0; }

.tech-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tech-index__link {
	display: block;
	padding: 0.3125rem 0.625rem;
	border-left: 2px solid transparent;
	font-family: "Libre Franklin", sans-serif;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--text-dark);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tech-index__link:hover,
.tech-index__link:focus-visible {
	background: var(--cream);
	border-left-color: var(--accent);
	color: var(--dark);
}

.tech-index__link:focus-visible {
	outline: 2px solid var(--mid);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------- right pane */

.tech-pane { min-width: 0; }

.tech-group {
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tech-rule);
}

.tech-group--first {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* .info-content.dark p wins on specificity (0,2,1) over a bare class, so the
   group label has to be reached through the wrapper to stay green. */
.tech-pane.info-content.dark .tech-group__label {
	margin: 0 0 1.5rem;
	font-family: "Libre Franklin", sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mid);
}

.tech-entry {
	scroll-margin-top: var(--tech-top);
	padding-left: 1.125rem;
	border-left: 2px solid transparent;
	transition: border-color 0.25s ease;
}

.tech-entry + .tech-entry { margin-top: 1.75rem; }

/* Pure-CSS "you are here": no scroll-spy script, so nothing to enqueue and
   nothing to break with JS off. Decorative only — the border carries no text. */
.tech-entry:target { border-left-color: var(--accent); }

/* Selected entry — set by initIndexFocus() in tmj-components.js when an index
   link is clicked (the entry is also scrolled to the CENTRE of the visible area,
   not pinned to the top). A translucent white panel behind the entry, drawn by
   a pseudo-element so selecting never shifts layout; it bleeds past the text on
   the right and vertically, and starts at the accent border on the left.
   .has-selection hands the cue over from :target, which replaceState can't move. */
.tech-entry {
	position: relative;
	isolation: isolate;
}

.tech-entry::after {
	content: "";
	position: absolute;
	inset: -1rem -1.25rem -1rem 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.55);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tech-entry.is-selected { border-left-color: var(--accent); }
.tech-entry.is-selected::after { opacity: 1; }
.tech-shell.has-selection .tech-entry:target:not(.is-selected) { border-left-color: transparent; }
.tech-entry:focus { outline: none; }

.tech-index__link.is-current {
	background: var(--cream);
	border-left-color: var(--accent);
	color: var(--dark);
	font-weight: 600;
}

@media (max-width: 1023px) {
	.tech-index__link.is-current { border-color: var(--accent); }
}

@media (max-width: 767px) {
	.tech-entry::after { inset: -0.75rem -0.75rem -0.75rem 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tech-entry::after { transition: none; }
}

/* The whole point of the rework. tokens.css pins #page-container h2 to
   line-height:1em !important, which clips a wrapped two-line name, so the
   override needs both !important and more specificity than that ID rule. */
.tech-entry__name,
#page-container .tech-pane .tech-entry__name {
	margin: 0 0 1rem;
	font-family: "Libre Franklin", sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.35 !important;
	color: var(--dark);
}

/* A diamond, not a bullet — same rotated-square language as --ac-diamond. */
.tech-entry__name::before {
	content: "";
	display: inline-block;
	width: 0.4375rem;
	height: 0.4375rem;
	margin-right: 0.625rem;
	vertical-align: 0.0625rem;
	background: var(--accent);
	transform: rotate(45deg);
}

.tech-pane.info-content.dark .tech-entry__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.tech-entry__text a {
	color: var(--mid);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.tech-entry__text a:hover,
.tech-entry__text a:focus-visible { color: var(--dark); }

.tech-entry__fig {
	margin: 0 0 1rem;
	max-width: 15rem;
}

/* Width-constrained, height:auto — never cap the height, that distorts. */
.tech-entry__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- < 1024px */

@media (max-width: 1023px) {
	.tech-shell {
		display: block;
		/* Two different offsets below 1024px. The rail pins at 70px, directly under
		   the collapsed mobile header; but the rail is itself ~81px tall, so an
		   anchored entry has to clear 70 + 81 = 151px or its name lands behind the
		   rail. Measured, not guessed: entries were landing at top:86 with the rail
		   bottom at 151. --tech-top is only consumed by .tech-entry's scroll-margin
		   here, because .tech-index sets its own `top` below. */
		--tech-top: 10.5rem;    /* 70px nav + 81px rail + 17px gutter */
	}

	/* The index becomes a sticky horizontal rail. A 29-item vertical stack above
	   the content would push every description below two screenfuls; a rail keeps
	   all 29 links in the DOM, reachable at any scroll position, with no JS. */
	.tech-index {
		top: 4.375rem;
		z-index: 5;
		/* bleed to the section edges so the rail reads as a bar, not a box */
		margin: 0 -1.5rem 2rem;
		padding: 0.625rem 1.5rem;
		background: #fff;
		border-bottom: 1px solid var(--tech-rule);
	}

	.tech-index__heading {
		margin: 0 0 0.5rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.tech-index__scroll {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 0.25rem;
		scrollbar-width: none;
	}

	.tech-index__scroll::-webkit-scrollbar { display: none; }

	.tech-index__group {
		flex: 0 0 auto;
		margin: 0 0.125rem 0 0.5rem;
		padding-left: 0.5rem;
		border-left: 1px solid var(--tech-rule);
	}

	.tech-index__group:first-child {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.tech-index__list {
		display: flex;
		flex: 0 0 auto;
		gap: 0.5rem;
	}

	.tech-index__link {
		padding: 0.375rem 0.75rem;
		border: 1px solid #cfe0dd;
		border-left-width: 1px;
		white-space: nowrap;
	}

	.tech-index__link:hover,
	.tech-index__link:focus-visible {
		border-color: var(--accent);
	}

	.tech-group { margin-top: 2.25rem; }
}

@media (max-width: 767px) {
	.tech-index { margin-left: -1.5rem; margin-right: -1.5rem; }
	.tech-entry { padding-left: 0.875rem; }
	.tech-entry__fig { max-width: 100%; }
	.tech-group { margin-top: 2rem; padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tech-index__link,
	.tech-entry { transition: none; }
}