/* ==========================================================================
   Modern page template - responsive editorial layout
   Extension: saurus4_150926

   Loaded AFTER styles.php, which pulls in the legacy main.css and content.css
   and repeats their rules inline. Equal-specificity selectors here therefore
   win on source order, which is why several plain element selectors below
   deliberately restate body/link/heading basics.

   The previous fixed 915px stylesheet is kept as modern_main.legacy.css.

   Palette: "millennium silver and blue" - chrome greys, a two-step blue and a
   lime marker colour, applied as Y2K trim over a modern editorial layout:
   a gradient strip at the top of the page, a brushed-chrome wordmark,
   bevelled nav pills and Aqua-lite buttons, chrome panels in the aside over a
   faint dotted grid, monospace metadata, and a blue glow doing double duty as
   the focus ring. Light theme only - there is no dark variant and no theme
   switch, so nothing here reads localStorage or a colour-scheme preference.

   Two blues on purpose: --scms-accent for fills and large type, the darker
   --scms-accent-ink for anything at body size. --scms-lime is a marker colour
   and is never used for text. See the :root block for the contrast numbers.

   Layout map (ids come from page_templates/modern_page_template.html):
     #scms_Background > #scms_Container > #scms_pageContainer
       #scms_LocationBar    breadcrumb
       #scms_Header         logo, language, title/slogan, search, menu button
       #scms_Navigation     level-1 sections (the mobile panel)
       #scms_Content        #scms_ColumnContent (article) + #scms_ColumnElements (aside)
       #scms_Footer
   ========================================================================== */

:root {
	/* Type. Georgia keeps long-form history readable; the mono stack carries the
	   metadata voice and leans period-correct (Lucida Console shipped with the
	   machines this site is about). */
	--scms-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	--scms-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--scms-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Lucida Console", "Courier New", monospace;

	/* Ink */
	--scms-ink: #1c2530;
	--scms-head: #33465c;
	--scms-muted: #5e7288;
	--scms-faint: #8c9bac;

	/* Surfaces */
	--scms-paper: #ffffff;
	--scms-panel: #eef2f6;
	--scms-chrome: #c9d2dc;
	--scms-rule: #dce3eb;

	/* Accent: millennium blue. Two blues on purpose - #3a7bd5 is only ~3.9:1 on
	   white, fine for fills and large type but short of 4.5:1 for body-sized
	   text, so link text uses the darker one (~5.8:1). Lime is ~1.4:1 and is
	   therefore a marker colour only: rules, gradient stops, active bars. It is
	   never used for text. */
	--scms-accent: #3a7bd5;
	--scms-accent-dark: #2a61b0;
	--scms-accent-ink: #2a61b0;
	--scms-lime: #9fe870;

	/* Y2K trim */
	--scms-glow: 0 0 0 3px rgba(58, 123, 213, 0.30);
	--scms-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.85);
	--scms-shadow: 0 1px 2px rgba(28, 37, 48, 0.06);

	/* Rhythm */
	--scms-gap: 2.5rem;
	--scms-pad: 1.5rem;
	--scms-measure: 74ch;
	--scms-aside: 17.5rem;
	--scms-max: 76rem;
}

/* --------------------------------------------------------------- reset ---- */

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

body {
	margin: 0;
	padding: 0;
	/* kills the tiled bg_cont.gif the legacy main.css sets */
	background: var(--scms-paper) none;
	border: none;
	font-family: var(--scms-serif);
	font-size: 17px;
	line-height: 1.7;
	color: var(--scms-ink);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--scms-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--scms-ink); text-decoration-color: var(--scms-accent); }

/* The glow doubles as the focus ring everywhere, so keyboard focus reads as
   part of the design rather than as a browser default. */
:focus-visible {
	outline: 1px solid var(--scms-accent);
	outline-offset: 2px;
	box-shadow: var(--scms-glow);
	border-radius: 3px;
}

.clear { clear: both; }

/* ----------------------------------------------------------- containers --- */

/* A 4px chrome-to-blue-to-lime strip pinned across the top of the page. It is
   the cheapest possible period signal: full bleed, no image file, and it costs
   the layout nothing because it paints inside the existing background box. */
#scms_Background {
	background-color: var(--scms-paper);
	background-image: linear-gradient(90deg,
		var(--scms-chrome) 0%,
		var(--scms-accent) 38%,
		var(--scms-accent-dark) 62%,
		var(--scms-lime) 100%);
	background-size: 100% 4px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

#scms_Container {
	width: 100%;
	max-width: var(--scms-max);
	margin: 0 auto;
	padding: 0 var(--scms-pad);
	background: none;
}

#scms_pageContainer { background: none; border: none; }

/* ----------------------------------------------------------- breadcrumb --- */

#scms_LocationBar {
	padding: 1.1rem 0 0;
	font-family: var(--scms-mono);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--scms-faint);
	background: none;
}
#scms_LocationBar ul { margin: 0; padding: 0; list-style: none; }
#scms_LocationBar li { display: inline; }
#scms_LocationBar li + li::before {
	content: "/";
	margin: 0 0.5em;
	color: var(--scms-accent);
}
#scms_LocationBar a { color: var(--scms-faint); text-decoration: none; }
#scms_LocationBar a:hover { color: var(--scms-accent-ink); text-decoration: underline; }

/* --------------------------------------------------------------- header --- */

#scms_Header {
	position: relative;
	background: none;
	border: none;
	height: auto;
	padding: 1.75rem 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title  lang"
		"title  logo"
		"search search";
	gap: 0.5rem 1.5rem;
	align-items: start;
}

#scms_TitleSlogan { grid-area: title; }

#scms_Title h1 { margin: 0; padding: 0; font-size: 1em; font-weight: 400; }
/* Brushed-chrome wordmark. The flat colour is declared first and stays the
   real value; only browsers that can actually clip a background to the glyphs
   get the gradient, via the @supports block below. Without that guard a
   non-supporting browser would paint transparent text on nothing. */
#scms_Title h1 a {
	font-family: var(--scms-sans);
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.1rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--scms-accent-dark);
	text-decoration: none;
	display: inline-block;
	background-image: linear-gradient(172deg,
		#6d9ce0 0%,
		var(--scms-accent) 30%,
		var(--scms-accent-dark) 52%,
		var(--scms-ink) 74%,
		var(--scms-accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
#scms_Title h1 a:hover {
	color: var(--scms-ink);
	background-image: linear-gradient(172deg,
		#8fb6ea 0%,
		var(--scms-accent) 34%,
		var(--scms-accent-dark) 60%,
		var(--scms-accent) 100%);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	#scms_Title h1 a,
	#scms_Title h1 a:hover { color: transparent; }
}

#scms_Slogan { margin-top: 0.35rem; }
#scms_Slogan h2 {
	margin: 0;
	padding: 0;
	font-family: var(--scms-mono);
	font-size: 0.76rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--scms-muted);
}

#scms_Logo { grid-area: logo; justify-self: end; }
#scms_Logo img { max-height: 46px; width: auto; }
#scms_headerArticle { float: none; margin: 0; }

#scms_LanguageSelector { grid-area: lang; justify-self: end; }
#scms_LanguageSelector ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 0.4rem; }
#scms_LanguageSelector li { float: none; }
#scms_LanguageSelector a {
	font-family: var(--scms-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--scms-muted);
	text-decoration: none;
}
#scms_LanguageSelector a.active { color: var(--scms-ink); text-decoration: underline; }
#scms_LanguageSelector a:hover { color: var(--scms-accent-ink); }
/* The flex gap already separates the languages; the literal "|" is noise. */
li.scms_LanguageSeparator { display: none; }

/* ---------------------------------------------------------- header form --- */

#scms_HeaderSearchBox { grid-area: search; width: 100%; }
#scms_HeaderSearchBox form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

#scms_HeaderSearchBox .input,
#scms_ColumnSearchInput {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	font-family: var(--scms-sans);
	font-size: 0.85rem;
	color: var(--scms-ink);
	background: var(--scms-paper);
	border: 1px solid var(--scms-chrome);
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(28, 37, 48, 0.07);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#scms_HeaderSearchBox .input:focus,
#scms_ColumnSearchInput:focus {
	border-color: var(--scms-accent);
	outline: none;
	box-shadow: inset 0 1px 2px rgba(28, 37, 48, 0.07), var(--scms-glow);
}

/* "Aqua-lite": a vertical blue gradient, a darker hairline to sit it down, and
   an inset white highlight along the top edge. That specular top line is the
   single detail that reads as 2001 more than anything else here. */
#scms_HeaderSearchBox .button,
#scms_Poll input[type="submit"] {
	padding: 0.55rem 1.1rem;
	font-family: var(--scms-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--scms-paper);
	background-color: var(--scms-accent);
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.05) 48%,
		rgba(28, 37, 48, 0.12) 100%);
	border: 1px solid var(--scms-accent-dark);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--scms-shadow);
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
#scms_HeaderSearchBox .button:hover,
#scms_Poll input[type="submit"]:hover {
	background-color: var(--scms-accent-dark);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--scms-glow);
}
#scms_HeaderSearchBox .button:active,
#scms_Poll input[type="submit"]:active {
	background-image: linear-gradient(180deg,
		rgba(28, 37, 48, 0.16) 0%,
		rgba(255, 255, 255, 0.06) 100%);
	box-shadow: inset 0 1px 3px rgba(28, 37, 48, 0.32);
}

#scms_HeaderColumnSearchLinks,
#scms_ColumnSearchLinks {
	flex: 1 0 100%;
	margin: 0.15rem 0 0;
	font-family: var(--scms-mono);
	font-size: 0.7rem;
	color: var(--scms-faint);
}
#scms_HeaderColumnSearchLinks a,
#scms_ColumnSearchLinks a { color: var(--scms-muted); text-decoration: none; }
#scms_HeaderColumnSearchLinks a:hover,
#scms_ColumnSearchLinks a:hover { text-decoration: underline; }

/* -------------------------------------------------------- menu toggle ----- */
/* Hidden by default and on desktop; the mobile media query reveals it.       */

#scms_MenuToggle {
	display: none;
	position: absolute;
	top: 1.25rem;
	right: 0;
	width: 52px;
	height: 52px;
	padding: 0;
	background-color: var(--scms-accent);
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.05) 48%,
		rgba(28, 37, 48, 0.12) 100%);
	border: 1px solid var(--scms-accent-dark);
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--scms-shadow);
	cursor: pointer;
}
#scms_MenuToggle:hover { background-color: var(--scms-accent-dark); }
#scms_MenuToggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px auto;
	background: var(--scms-paper);
	transition: transform 0.18s ease, opacity 0.18s ease;
}
#scms_MenuToggle em {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
body.scms-nav-open #scms_MenuToggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.scms-nav-open #scms_MenuToggle span:nth-child(2) { opacity: 0; }
body.scms-nav-open #scms_MenuToggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------- top nav ------ */

#scms_Navigation {
	background: none;
	border-top: 2px solid var(--scms-ink);
	border-bottom: 1px solid var(--scms-rule);
	padding: 0;
}
#scms_Navigation ul {
	margin: 0;
	padding: 0.7rem 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.45rem;
}
#scms_Navigation li { float: none; }

/* Bevelled chrome pills. The white-to-panel gradient plus the inset top
   highlight is the same trick as the buttons, turned down. */
#scms_Navigation a {
	display: block;
	padding: 0.5rem 0.95rem;
	font-family: var(--scms-sans);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: -0.012em;
	color: var(--scms-head);
	text-decoration: none;
	background-color: var(--scms-panel);
	background-image: linear-gradient(180deg, var(--scms-paper) 0%, var(--scms-panel) 100%);
	border: 1px solid var(--scms-chrome);
	border-radius: 4px;
	box-shadow: var(--scms-bevel);
	transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#scms_Navigation a:hover {
	color: var(--scms-accent-ink);
	border-color: var(--scms-accent);
	box-shadow: var(--scms-bevel), var(--scms-glow);
}
#scms_Navigation a.active {
	color: var(--scms-paper);
	background-color: var(--scms-accent);
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.26) 0%,
		rgba(255, 255, 255, 0.04) 50%,
		rgba(28, 37, 48, 0.10) 100%);
	border-color: var(--scms-accent-dark);
	/* lime only ever appears as a marker, never as text */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 var(--scms-lime);
}
#scms_Navigation a.active:hover { color: var(--scms-paper); }

/* ----------------------------------------------------------- content ------ */

#scms_Content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scms-gap);
	padding: 2.25rem 0 3rem;
	background: none;
}

/* The template ends #scms_Content with a float-clearing <div class="clear">.
   As a flex item it takes default order 0, so it sorts BEFORE the ordered
   columns and its gap pushes the article column off the grid. */
#scms_Content > .clear { display: none; }

#scms_ColumnContent {
	order: 1;
	flex: 1 1 28rem;
	min-width: 0;
	width: auto;
	max-width: var(--scms-measure);
	padding: 0;
	background: none;
}

/* The article column is capped at --scms-measure and the aside does not grow,
   so on a wide screen the leftover space collected AFTER the aside and left it
   floating short of the page edge. The auto margin hands that slack to the
   left instead, which pins the aside to the container's right edge. */
#scms_ColumnElements {
	order: 2;
	flex: 0 1 var(--scms-aside);
	min-width: 0;
	width: auto;
	margin-left: auto;
	padding: 0;
	background: none;
}

/* Content typography. content.css targets bare h1/h2/h3, so these need the
   same or greater specificity, hence the id prefix. */
#scms_ColumnContent h1,
#scms_ColumnContent h2,
#scms_ColumnContent h3 {
	font-family: var(--scms-sans);
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.18;
	color: var(--scms-head);
	padding-top: 0;
}
#scms_ColumnContent h1 {
	margin: 2.2rem 0 0.7rem;
	font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.15rem);
	color: var(--scms-ink);
}
/* A short lime tick under every article title - the one place the marker
   colour appears in the reading column. */
#scms_ColumnContent h1::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-top: 0.55rem;
	border-radius: 2px;
	background-image: linear-gradient(90deg, var(--scms-accent) 0%, var(--scms-lime) 100%);
}
#scms_ColumnContent h2 { margin: 2rem 0 0.6rem; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.65rem); }
#scms_ColumnContent h3 { margin: 1.7rem 0 0.5rem; font-size: 1.15rem; }
#scms_ColumnContent > :first-child,
#scms_ColumnContent > div > :first-child { margin-top: 0; }

#scms_ColumnContent p { margin: 0 0 1.15rem; }
#scms_ColumnContent ul, #scms_ColumnContent ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
#scms_ColumnContent li { margin-bottom: 0.35rem; }

#scms_ColumnContent p.qoute {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	font-style: italic;
	color: var(--scms-head);
	background: var(--scms-panel);
	border: 1px solid var(--scms-rule);
	border-left: 3px solid var(--scms-accent);
	border-radius: 0 4px 4px 0;
}

/* Long URLs, file paths and code tokens must not widen the column. Without
   this a single unbreakable string pushes the whole page into horizontal
   scrolling on a phone. */
#scms_ColumnContent { overflow-wrap: break-word; word-wrap: break-word; }
#scms_ColumnContent code,
#scms_ColumnContent kbd,
#scms_ColumnContent samp {
	font-size: 0.92em;
	overflow-wrap: break-word;
	word-break: break-word;
}
#scms_ColumnContent pre { max-width: 100%; overflow-x: auto; }

/* Wide tables scroll inside themselves rather than stretching the layout. */
#scms_ColumnContent table {
	max-width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}
#scms_ColumnContent td { font-family: inherit; font-size: inherit; color: inherit; }

/* Belt and braces: nothing may cause a sideways scroll on the document. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ------------------------------------------------------------- aside ------ */

/* Faint dotted grid behind the aside. The panels below are opaque, so the
   dots only show in the gaps between them - texture, not noise. */
#scms_ColumnElements {
	background-image: radial-gradient(rgba(140, 155, 172, 0.38) 1px, transparent 1px);
	background-size: 16px 16px;
	background-position: 2px 2px;
}

#scms_ColumnElements .box { background: none; border: none; }

/* Chrome panels. Same bevel language as the nav pills so the page reads as one
   system rather than a pile of effects. */
#scms_ColumnElements #scms_ColumnMenu,
#scms_ColumnElements #scms_ColumnSearch,
#scms_ColumnElements #scms_ListOfLinks,
#scms_ColumnElements #scms_Poll {
	padding: 1rem 1.1rem 1.1rem;
	background-color: var(--scms-paper);
	background-image: linear-gradient(180deg, var(--scms-paper) 0%, var(--scms-panel) 100%);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	box-shadow: var(--scms-bevel), var(--scms-shadow);
}

#scms_ColumnAddon h3,
#scms_ColumnElements h3 {
	margin: 0 0 0.6rem;
	padding: 0 0 0.45rem;
	font-family: var(--scms-sans);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--scms-accent-ink);
	border-bottom: 2px solid var(--scms-chrome);
}
#scms_ColumnAddon h4 {
	margin: 0.8rem 0 0.35rem;
	font-family: var(--scms-sans);
	font-size: 0.85rem;
	color: var(--scms-muted);
}
#scms_ColumnAddon a { color: var(--scms-accent-ink); }
#scms_ColumnAddon p { margin: 0 0 0.5rem; font-size: 0.95rem; }

#scms_ListOfLinks, #scms_Poll, #scms_ColumnSearch {
	margin-bottom: 2rem;
}

/* #scms_ColumnMenu_2Level repeats the second-level links that #scms_SectionTree
   already shows. The template builds it from $section_1 read outside its own
   foreach, so it renders whatever the loop happened to end on. Hidden rather
   than deleted, so the markup stays untouched for anyone relying on it. */
#scms_ColumnMenu_2Level { display: none; }

#scms_Poll ul, #scms_Poll ol { margin: 0 0 0.8rem; padding-left: 1.1rem; }
#scms_Poll ul { list-style: none; padding-left: 0; }
#scms_Poll li { margin-bottom: 0.3rem; font-size: 0.95rem; }
#scms_Poll label { margin-left: 0.35rem; }
/* Sizing only - the Aqua-lite paint is shared with the header button above. */
#scms_Poll input[type="submit"] {
	margin-top: 0.4rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.78rem;
}

#scms_ColumnSearchForm { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
#scms_ColumnSearchSubmit { flex: 0 0 auto; }

/* Sidebar section tree: the top nav already carries level 1, so show only the
   children of the section you are in. Avoids duplicating the whole menu and
   gives the article column the width back. */
#scms_ColumnMenu { margin-bottom: 2rem; }
#scms_SectionTree, #scms_SectionTree ul { margin: 0; padding: 0; list-style: none; }
#scms_SectionTree > li > a { display: none; }
#scms_SectionTree > li > ul { display: block; }
#scms_SectionTree ul a {
	display: block;
	padding: 0.3rem 0;
	font-family: var(--scms-sans);
	font-size: 0.9rem;
	color: var(--scms-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--scms-rule);
}
#scms_SectionTree ul a:hover { color: var(--scms-accent-ink); }
#scms_SectionTree ul a.active_2Level {
	color: var(--scms-ink);
	font-weight: 700;
	padding-left: 0.55rem;
	box-shadow: inset 3px 0 0 var(--scms-accent);
}

/* On desktop the level-1 links are hidden (the top nav already carries them),
   so a section with no children left an empty panel sitting above the sidebar
   search. Hide the whole box when it has no second-level link to show.

   Scoped to >=1024px on purpose: the tablet query below puts the level-1 links
   back, so the box has real content there and must stay.

   Browsers without :has() drop this rule and keep today's behaviour. */
@media (min-width: 1024px) {
	#scms_ColumnElements #scms_ColumnMenu:not(:has(#scms_SectionTree ul a)) {
		display: none;
	}
}

/* ------------------------------------------------------------ footer ------ */

/* The footer sits inside #scms_Container, which is padded and max-width, so it
   is a panel rather than a full-bleed band. Breaking out of the container to
   get edge-to-edge colour is not worth the layout risk. */
#scms_Footer {
	margin: 0 0 2rem;
	padding: 1.25rem 1.25rem 1.35rem;
	background-color: var(--scms-panel);
	background-image: linear-gradient(180deg, var(--scms-paper) 0%, var(--scms-panel) 100%);
	border: 1px solid var(--scms-chrome);
	border-top: 3px solid var(--scms-accent);
	border-radius: 0 0 6px 6px;
	box-shadow: var(--scms-bevel);
}
#scms_Footer, #scms_Footer p {
	font-family: var(--scms-mono);
	font-size: 0.74rem;
	color: var(--scms-muted);
}
#scms_Footer p { margin: 0; }
#scms_Footer a { color: var(--scms-accent-ink); }

/* ==========================================================================
   Content-template surfaces

   Everything above styles the #scms_* shell. The pages inside it - blog,
   forum, gallery, documents, search results, registration - are still painted
   by the 2005-era content.css (Lucida Sans 13px, #85A5EF links, #DAE3FA
   bands), which styles.php re-emits inline ahead of this file. Left alone,
   those pages stay exactly as plain as they were.

   Every rule here is scoped under #scms_ColumnContent so it outranks both
   content.css and the inline copy on specificity rather than source order,
   and every colour comes from the tokens so the palette stays in one place.
   Class names are whatever the content_templates/ and object_templates/
   partials actually emit - do not rename them here.
   ========================================================================== */

/* -------------------------------------------------------------- tables --- */

/* The generic wide-table rule above sets display:block so long tables scroll
   inside themselves. On a block <table> the inner anonymous table box still
   shrinks to its content, so width:100% widens the box but not the grid and
   the header band stops short. These two get display:table back for the width,
   and the narrow breakpoint hands the scrolling behaviour back. */
#scms_ColumnContent table.DataTable,
#scms_ColumnContent table.ZebraTable {
	display: table;
	width: 100%;
	margin: 0 0 1.5rem;
	font-family: var(--scms-sans);
	font-size: 0.88rem;
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--scms-shadow);
}
#scms_ColumnContent table.DataTable thead td,
#scms_ColumnContent table.DataTable thead th,
#scms_ColumnContent table.ZebraTable thead td,
#scms_ColumnContent table.ZebraTable thead th {
	padding: 0.6rem 0.75rem;
	font-weight: 700;
	text-align: left;
	color: var(--scms-paper);
	background-color: var(--scms-accent);
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.22) 0%,
		rgba(255, 255, 255, 0.03) 50%,
		rgba(28, 37, 48, 0.10) 100%);
	border-bottom: 1px solid var(--scms-accent-dark);
}
#scms_ColumnContent table.DataTable thead a,
#scms_ColumnContent table.ZebraTable thead a { color: var(--scms-paper); }
/* The table cannot clip its children to the border-radius without an
   overflow:hidden that would break horizontal scrolling, so the corner cells
   carry the radius themselves. */
#scms_ColumnContent table.DataTable thead tr > *:first-child,
#scms_ColumnContent table.ZebraTable thead tr > *:first-child { border-top-left-radius: 5px; }
#scms_ColumnContent table.DataTable thead tr > *:last-child,
#scms_ColumnContent table.ZebraTable thead tr > *:last-child { border-top-right-radius: 5px; }
#scms_ColumnContent table.DataTable td,
#scms_ColumnContent table.ZebraTable td {
	padding: 0.55rem 0.75rem;
	color: var(--scms-ink);
	border-bottom: 1px solid var(--scms-rule);
	vertical-align: top;
}
/* content.css sets white-space:nowrap on DataTable cells; only the cells the
   template marks as wrapping should get it back. */
#scms_ColumnContent td.DataTableWrap { white-space: normal; }

#scms_ColumnContent tr.dark, #scms_ColumnContent td.dark { background: var(--scms-panel); }
#scms_ColumnContent tr.light, #scms_ColumnContent td.light { background: var(--scms-paper); }
#scms_ColumnContent tr.dark:hover, #scms_ColumnContent tr.light:hover { background: #e3ecf7; }

#scms_ColumnContent table.ArticleColumns { border: none; box-shadow: none; }
#scms_ColumnContent table.ArticleColumns td {
	border: none;
	background: none;
	padding: 0 1.25rem 0 0;
}

/* --------------------------------------------------------------- forms --- */

#scms_ColumnContent table.FormTable {
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background-color: var(--scms-panel);
	background-image: linear-gradient(180deg, var(--scms-paper) 0%, var(--scms-panel) 100%);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	box-shadow: var(--scms-bevel), var(--scms-shadow);
	border-collapse: separate;
	border-spacing: 0 0.35rem;
}
#scms_ColumnContent table.FormTable caption {
	padding: 0 0 0.6rem;
	font-family: var(--scms-sans);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--scms-accent-ink);
}
#scms_ColumnContent table.FormTable td {
	padding: 0.2rem 0.4rem;
	font-family: var(--scms-sans);
	font-size: 0.85rem;
	color: var(--scms-head);
	border: none;
	background: none;
}

#scms_ColumnContent input.FormText,
#scms_ColumnContent select.FormSelect,
#scms_ColumnContent textarea.FormTextArea {
	max-width: 100%;
	padding: 0.45rem 0.6rem;
	font-family: var(--scms-sans);
	font-size: 0.85rem;
	color: var(--scms-ink);
	background: var(--scms-paper);
	border: 1px solid var(--scms-chrome);
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(28, 37, 48, 0.07);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* content.css pins these to 170px/300px and 17px tall, which is unusable on a
   phone and cramped everywhere else. */
#scms_ColumnContent input.FormText,
#scms_ColumnContent select.FormSelect { width: 22rem; height: auto; }
#scms_ColumnContent textarea.FormTextArea { width: 100%; height: 11rem; }
#scms_ColumnContent input.FormText:focus,
#scms_ColumnContent select.FormSelect:focus,
#scms_ColumnContent textarea.FormTextArea:focus {
	border-color: var(--scms-accent);
	outline: none;
	box-shadow: inset 0 1px 2px rgba(28, 37, 48, 0.07), var(--scms-glow);
}
#scms_ColumnContent input[type="submit"],
#scms_ColumnContent input[type="button"] {
	padding: 0.5rem 1.05rem;
	font-family: var(--scms-sans);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--scms-paper);
	background-color: var(--scms-accent);
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.05) 48%,
		rgba(28, 37, 48, 0.12) 100%);
	border: 1px solid var(--scms-accent-dark);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--scms-shadow);
	cursor: pointer;
}
#scms_ColumnContent input[type="submit"]:hover,
#scms_ColumnContent input[type="button"]:hover {
	background-color: var(--scms-accent-dark);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--scms-glow);
}

/* ------------------------------------------------------------- search ---- */

#scms_ColumnContent #SearchTypeSelector {
	height: auto;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--scms-sans);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--scms-panel);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
}
#scms_ColumnContent #SearchTypeSelector a { color: var(--scms-accent-ink); text-decoration: none; }
#scms_ColumnContent #SearchTypeSelector a:hover { text-decoration: underline; }
#scms_ColumnContent #SearchResultsLabel { color: var(--scms-muted); }
#scms_ColumnContent #SearchCount { font-weight: 700; color: var(--scms-accent-ink); }
#scms_ColumnContent #FoundResults {
	padding: 0 0.35rem;
	font-weight: 700;
	color: var(--scms-ink);
	background: var(--scms-lime);
	border-radius: 3px;
}
#scms_ColumnContent #Disabled { color: var(--scms-faint); }
#scms_ColumnContent div.ResultTitle { margin-top: 1.25rem; }
#scms_ColumnContent div.ResultTitle a {
	font-family: var(--scms-sans);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--scms-accent-ink);
}
#scms_ColumnContent div.ResultDescription { margin-bottom: 0.4rem; color: var(--scms-head); }
#scms_ColumnContent #SearchPaging {
	margin-top: 1.5rem;
	padding-top: 0.85rem;
	font-family: var(--scms-mono);
	font-size: 0.8rem;
	border-top: 1px solid var(--scms-rule);
}
/* Emitted by the query_highlight output filter. */
#scms_ColumnContent span.highlight {
	padding: 0 0.15rem;
	color: var(--scms-ink);
	background: var(--scms-lime);
	border-radius: 2px;
}

/* ---------------------------------------------------------- documents ---- */

#scms_ColumnContent div.Document {
	margin: 0 0 0.9rem;
	padding: 0.85rem 1rem;
	background: var(--scms-paper);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	box-shadow: var(--scms-shadow);
	overflow: hidden;
}
#scms_ColumnContent div.Document:hover { border-color: var(--scms-accent); }
#scms_ColumnContent h1.DocumentTitle {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	font-weight: 700;
}
#scms_ColumnContent h1.DocumentTitle::after { display: none; }
#scms_ColumnContent h1.DocumentTitle a { color: var(--scms-accent-ink); }
#scms_ColumnContent p.DocumentDesc { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--scms-head); }
#scms_ColumnContent p.DocumentData {
	margin: 0;
	font-family: var(--scms-mono);
	font-size: 0.72rem;
	color: var(--scms-muted);
}

/* ------------------------------------------------------------ gallery ---- */

/* A gallery is not prose, so it is not held to the ~74ch reading measure - it
   takes the full column width and lays the tiles out on a grid. Text pages are
   untouched and keep the measure. */
#scms_ColumnContent:has(#GalleryContainer),
#scms_ColumnContent:has(#GalleryListContainer) { max-width: none; }

/* The album view drops the thumbnails straight into #GalleryContainer next to
   the heading and lead paragraph, so everything that is not a tile is told to
   span the full row. (The template's inline <style> is display:none and never
   becomes a grid item.) */
#scms_ColumnContent #GalleryContainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.4rem 1.25rem;
	align-items: stretch;
}
#scms_ColumnContent #GalleryContainer > *:not(.GalleryThumbnail) { grid-column: 1 / -1; }

/* The album list wraps each tile in div.gallery. */
#scms_ColumnContent #GalleryList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.4rem 1.25rem;
	align-items: stretch;
}
#scms_ColumnContent #GalleryList > div.gallery { float: none; clear: none; margin: 0; }

#scms_ColumnContent div.GalleryThumbnail {
	/* Overrides the template's inline `div.GalleryThumbnail { width:150px }`,
	   which is only (0,1,1) against this rule's (1,1,1). */
	width: auto;
	height: auto;
	float: none;
	margin: 0;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--scms-paper);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	box-shadow: var(--scms-bevel), var(--scms-shadow);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#scms_ColumnContent div.GalleryThumbnail:hover {
	border-color: var(--scms-accent);
	box-shadow: var(--scms-glow);
}
/* Same story for the inline `div.GalleryThumbnail table { height:150px;
   width:150px }` - the image box has to be fluid for the tile to scale. */
#scms_ColumnContent div.GalleryThumbnail table {
	display: table;
	width: 100%;
	height: auto;
	margin: 0;
	border: none;
	background: none;
	table-layout: fixed;
}
#scms_ColumnContent div.GalleryThumbnail td {
	border: none;
	background: none;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}
#scms_ColumnContent div.GalleryThumbnail a.thumbnail { display: block; }
/* contain, not cover: these are archive photographs and cropping them to fill
   a box loses part of the picture. The fixed ratio keeps the grid tidy and the
   panel colour fills the letterbox. */
#scms_ColumnContent div.GalleryThumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--scms-panel);
	border-radius: 4px;
	display: block;
}

/* content.css clamps the caption to a 32px box with overflow:hidden, which
   cuts most of these titles off mid-word. Let them wrap instead. */
#scms_ColumnContent div.Description {
	height: auto;
	overflow: visible;
	font-family: var(--scms-sans);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--scms-head);
}

/* --------------------------------------------------------------- blog ---- */

#scms_ColumnContent div#BlogContainer h1 a { color: var(--scms-ink); }
#scms_ColumnContent div#BlogAddOns {
	padding: 0.9rem 1rem;
	background-color: var(--scms-panel);
	background-image: linear-gradient(180deg, var(--scms-paper) 0%, var(--scms-panel) 100%);
	border: 1px solid var(--scms-chrome);
	border-radius: 6px;
	box-shadow: var(--scms-bevel);
}
#scms_ColumnContent ul.BlogArchiveLinks,
#scms_ColumnContent ul.BlogLatestLinks {
	font-family: var(--scms-sans);
	font-size: 0.85rem;
}
#scms_ColumnContent ul.BlogArchiveLinks a,
#scms_ColumnContent ul.BlogLatestLinks a { color: var(--scms-accent-ink); }
#scms_ColumnContent div.BlogDetails {
	font-family: var(--scms-mono);
	font-size: 0.72rem;
	color: var(--scms-muted);
}

/* ---------------------------------------------------------- misc bits ---- */

#scms_ColumnContent ul.ArticleList { list-style: none; padding-left: 0; }
#scms_ColumnContent ul.ArticleList li {
	padding: 0.5rem 0 0.5rem 1.1rem;
	border-bottom: 1px solid var(--scms-rule);
	background-image: linear-gradient(90deg, var(--scms-accent) 0%, var(--scms-accent) 100%);
	background-size: 4px 4px;
	background-repeat: no-repeat;
	background-position: 0 1.05rem;
}

/* Dates carry the metadata voice used by the breadcrumb and footer. */
#scms_ColumnContent span.Date {
	font-family: var(--scms-mono);
	font-size: 0.72rem;
	color: var(--scms-muted);
}
#scms_ColumnContent p.separator {
	height: 0;
	margin: 1.5rem 0;
	font-size: 0;
	border: none;
	border-top: 1px solid var(--scms-rule);
}
#scms_ColumnContent a.JumpLink {
	font-family: var(--scms-sans);
	font-size: 0.78rem;
	color: var(--scms-accent-ink);
}
#scms_ColumnContent .ucase {
	font-family: var(--scms-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--scms-muted);
}

/* ==========================================================================
   Tablet: single column, aside drops below the article
   ========================================================================== */

@media (max-width: 1023px) {
	:root { --scms-gap: 2rem; }

	/* Stay flex so the order:1 / order:2 still puts the article first;
	   display:block would fall back to DOM order and float the aside on top. */
	#scms_Content { flex-direction: column; }
	#scms_ColumnContent { flex: 1 1 auto; max-width: none; }
	#scms_ColumnElements {
		flex: 1 1 auto;
		margin-top: 2.5rem;
		padding-top: 1.75rem;
		border-top: 2px solid var(--scms-chrome);
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
	}
	#scms_ColumnElements > * { flex: 1 1 15rem; min-width: 0; }
	/* With room to spare in a stacked row, show the whole tree again. */
	#scms_SectionTree > li > a {
		display: block;
		padding: 0.3rem 0;
		font-family: var(--scms-sans);
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--scms-head);
		text-decoration: none;
	}
	#scms_SectionTree ul { padding-left: 0.8rem; }
}

/* ==========================================================================
   Mobile: collapsed menu, full-bleed reading column
   ========================================================================== */

@media (max-width: 899px) {
	:root { --scms-pad: 1.1rem; }

	body { font-size: 17px; line-height: 1.68; }

	#scms_MenuToggle { display: block; }

	#scms_Header {
		padding: 1.1rem 0 1.25rem;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"lang"
			"search";
		gap: 0.75rem 0;
		/* keep the title clear of the 52px toggle */
		padding-right: 4.25rem;
	}
	#scms_Header #scms_HeaderSearchBox { margin-right: -4.25rem; }

	#scms_Logo { display: none; }
	#scms_LanguageSelector { justify-self: start; }

	#scms_Title h1 a { font-size: clamp(1.85rem, 1.35rem + 2.4vw, 2.5rem); }

	/* Collapsed only once nav.js has marked the document, so a no-JS visitor
	   still gets a usable menu. */
	.scms-js #scms_Navigation {
		display: none;
		border-top: 1px solid var(--scms-rule);
	}
	.scms-js body.scms-nav-open #scms_Navigation,
	body.scms-nav-open #scms_Navigation { display: block; }

	#scms_Navigation ul { display: block; padding: 0.7rem 0; }
	#scms_Navigation li { margin-bottom: 0.4rem; }
	#scms_Navigation a {
		padding: 0.8rem 0.9rem;
		font-size: 1.02rem;
	}
	/* Stacked, the lime bar reads better down the leading edge than under it. */
	#scms_Navigation a.active {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 4px 0 0 var(--scms-lime);
	}

	#scms_Content { padding: 1.75rem 0 2.5rem; }

	#scms_ColumnElements { display: block; margin-top: 2rem; }
	#scms_ColumnElements > * { margin-bottom: 1.75rem; }
}

@media (max-width: 560px) {
	#scms_HeaderSearchBox .button { flex: 1 0 auto; }
	#scms_ColumnContent h1 { margin-top: 1.6rem; }
	#scms_ColumnContent input.FormText,
	#scms_ColumnContent select.FormSelect { width: 100%; }
	/* Too narrow to lay a grid out: let them scroll sideways again. */
	#scms_ColumnContent table.DataTable,
	#scms_ColumnContent table.ZebraTable { display: block; overflow-x: auto; }
}

/* Respect a reduced-motion preference for the toggle animation and for the
   hover transitions the Y2K trim added. */
@media (prefers-reduced-motion: reduce) {
	#scms_MenuToggle span,
	#scms_Navigation a,
	#scms_HeaderSearchBox .input,
	#scms_ColumnSearchInput,
	#scms_HeaderSearchBox .button,
	#scms_Poll input[type="submit"],
	#scms_ColumnContent div.GalleryThumbnail,
	#scms_ColumnContent input.FormText,
	#scms_ColumnContent select.FormSelect,
	#scms_ColumnContent textarea.FormTextArea { transition: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	#scms_Navigation, #scms_ColumnElements, #scms_MenuToggle,
	#scms_HeaderSearchBox, #scms_LanguageSelector, #scms_LocationBar { display: none; }
	body { font-size: 11pt; color: #000; }
	#scms_ColumnContent { max-width: none; }

	/* No gradients, tints or glow on paper. */
	#scms_Background, #scms_Footer, #scms_ColumnContent p.qoute,
	#scms_ColumnContent table.FormTable, #scms_ColumnContent div.Document,
	#scms_ColumnContent div.GalleryThumbnail, #scms_ColumnContent div#BlogAddOns,
	#scms_ColumnContent table.DataTable thead td,
	#scms_ColumnContent table.DataTable thead th {
		background: none;
		box-shadow: none;
		color: #000;
	}
	#scms_Title h1 a {
		background: none;
		color: #000;
		-webkit-text-fill-color: #000;
	}
	#scms_ColumnContent h1::after { display: none; }
}