@charset "utf-8";
/* ---------------------------------------------------
---> KtB
--------------------------------------------------- */
body{
	margin: 0px;
    padding: 0px;
    font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';	
}
*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.noSelect{
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* ---------------------------------------------------
---> KtB Home Page
--------------------------------------------------- */
#KtB{
    position: relative;
    border: thin solid rgba(255,255,255,0.00);
}
/* =============================================================================================================
	The Frame - fit
   ------------------------------------------------------------------------------------------------------------
	The LANDING PAGE ONLY. The document is locked to the window and nothing scrolls, at any size - which is a
	stronger promise than the survey's `full` frame makes. `full` stops the PAGE scrolling and hands scrolling
	to two inner panes, and it gives up below 800px and lets the page scroll again. `fit` has no inner scroller
	to hand anything to, so it can never give up: everything on the page has to be able to shrink instead.

	That is why every size in the landing rules below is a clamp() against vmin rather than a pixel count, why
	the panels are flex with min-height:0, and why the logo is given a box to fit inside rather than a width to
	be. Add a fixed height to anything in here and the page starts overflowing on some screen you did not test.

	TWO HEIGHT DECLARATIONS, AND BOTH ARE NEEDED. `100vh` is wrong on a phone - it is the height with the URL
	bar retracted, so a vh-sized page hides content behind the bar until the reader scrolls, which is exactly
	what this page must never ask for. `100dvh` is that measurement done honestly. Older browsers ignore the
	second declaration and keep the first, which is the intended fallback rather than an oversight.

	⚠ NOTHING HERE MAY TOUCH `html`, AND THAT IS THE TRAP THIS SHEET SETS. Survey.css writes the same lock as
	`html, body.KtB-Frame-full` and is right to: that sheet is loaded by two pages and both are `full`. THIS
	sheet is loaded by THREE pages across TWO frames - the landing page, which must never scroll, and Overview
	and 404, which must. A selector list is not a descendant selector, so `html, body.KtB-Frame-fit` would put
	`overflow: hidden` on the root of all three and silently cut the bottom off the Overview page.

	So the lock lives entirely on the body, and the viewport takes its overflow from the body when the root
	leaves it `visible` - which is exactly the case here. #KtB then takes 100% of a body that is already the
	window's height, so the dvh measurement is made once.

	body carries KtB-Frame-fit and #KtB carries KtB-fit; index.php stamps both from the registry's frame field.
   ============================================================================================================= */
body.KtB-Frame-fit{
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}
#KtB.KtB-fit{
	height: 100%;
	overflow: hidden;
}
/* =============================================================================================================
	Landing - The Two Panels
   ------------------------------------------------------------------------------------------------------------
	The mark on one side, the four ways in on the other.

	THE SWITCH IS ORIENTATION, NOT WIDTH, and that is deliberate. The question this page asks is "is the screen
	wider than it is tall", not "is it a phone" - a tablet held upright wants the stacked layout and a phone
	turned sideways wants the side-by-side one, and a width breakpoint gets both of those wrong. Portrait is
	the default here and landscape is the override, so anything that cannot answer the query still gets a
	layout that works in the narrower case.

	min-width and min-height 0 on the panels is what actually lets them shrink. A flex item's floor is its
	content by default, so without these two the panels refuse to go below their contents and the page - which
	cannot scroll - simply clips.
   ============================================================================================================= */
#KtB-Landing{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1.4vmin, 18px);
	height: 100%;
	padding: clamp(6px, 1.8vmin, 22px);
}
@media (orientation: landscape){
	#KtB-Landing{
		flex-direction: row;
	}
}
.KtB-Panel{
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 0px;
	min-width: 0px;
	min-height: 0px;
	padding: clamp(6px, 1.8vmin, 22px);
	background: rgba(255,255,255,0.75);
	border: 2px solid rgba(255,255,255,1.00);
	border-radius: 10px;
	box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.25);
}
/* =============================================================================================================
	Landing - The Mark
   ------------------------------------------------------------------------------------------------------------
	The animated logo, with the tagline under it. 03_Script.php draws the SVG in with GSAP on this page only.

	THE LOGO IS SIZED BY ITS BOX, NOT BY A WIDTH. #KtB-Logo is a flex item that takes the space the tagline
	does not, and the SVG fills that box on both axes; its own viewBox and the default preserveAspectRatio
	letterbox it inside. This is the whole trick that lets one markup fit a 320px phone and a 1920px desktop -
	the old page gave the logo `width: 50%` and let the height fall where it may, which cannot work on a page
	that is not allowed to scroll.
   ============================================================================================================= */
#KtB-Mark{
	align-items: center;
	justify-content: center;
	gap: clamp(4px, 1.2vmin, 14px);
}
#KtB-Logo{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0px;
}
#KtB-Logo svg{
	display: block;
	width: 100%;
	height: 100%;
}
/* -----------------------------------------------------------------------------------------------------------
	THE TAGLINE SPANS THE PANEL, by the same measured-cqi method as the card titles - see .KtB-Card-Title for
	the full reasoning and the re-measuring recipe. Its number:

	  string                                                    Jost      fallback   used
	  A School of Ministry from Commission Network Ministries  24.447em  25.284em     3.87cqi

	It takes the FALLBACK number and is right to: it never asks for Jost, it inherits the body stack, and that
	column is the wider of the two anyway.

	⚠ THE WORDMARK LINE THAT USED TO SIT ABOVE THIS IS GONE (Nick, 2026-08-14) - the panel is the artwork and
	then the tagline, nothing else. It was an <h1> reading "Know the Bible", set to fill the panel at a
	measured 10.24cqi in uppercase; it was tried in regular case first, at a re-measured 12.16cqi, and Nick
	still did not like the look of it. Both numbers are recorded here rather than deleted because the string
	and the method have not changed - if it ever comes back, it is one <h1> in Home.php and one rule here, and
	⚠ the number depends on the CASE: "KNOW THE BIBLE" measures 9.562em against 8.062em for "Know the Bible",
	so measure the string AS IT RENDERS, text-transform and letter-spacing included.

	📝 Removing it gave the whole of its height back to #KtB-Logo, which is a flex: 1 1 auto item - the
	artwork is materially larger on every screen now, and that is the visible half of this change.

	📝 THE SITE'S NAME MOVED RATHER THAN VANISHED. With no <h1> the page had no heading and the artwork no
	text alternative, so the SVG carries role="img" and aria-label="Know the Bible" - see the head of
	_Dev1.0/_images/KtB-Logo.php. The two go together; putting the line back means taking those off.

	#KtB-Mark-Text HAD TO BECOME A FULL-WIDTH CONTAINER for any of this to work. It was flex: 0 0 auto inside
	a centred column, which makes it shrink-to-fit - it was as wide as its longest line and no wider, so a cqi
	against it would have been a percentage of the text's own width and the fill would never converge. It
	still has to be, for the tagline, even though it now wraps a single line.

	📝 The tagline's margin-top went 0.4em -> 0 with the wordmark. That 0.4em was the space between the two
	LINES; the space between the artwork and the text is #KtB-Mark's gap, which was always doing that job and
	is still doing it. Leaving both in would have double-counted the gap now there is nothing above.
   ----------------------------------------------------------------------------------------------------------- */
#KtB-Mark-Text{
	flex: 0 0 auto;
	width: 100%;
	container-type: inline-size;
	text-align: center;
}
#KtB-Tagline{
	margin: 0px;
	font-size: clamp(10px, 1.7vmin, 17px);
	font-size: 3.87cqi;
	line-height: 1.35;
	white-space: nowrap;
	color: rgba(0,0,0,0.70);
}
/* =============================================================================================================
	Landing - The Four Ways In
   ------------------------------------------------------------------------------------------------------------
	Four cards, equal share of the panel, each one a real anchor - so the keyboard, the middle click and
	open-in-new-tab all work, and none of it needs JavaScript. The devID is written into the href by the page.

	THE HOVER LIFT IS A TRANSFORM, NOT A MARGIN OR A SIZE. On a page with no scrollbar to absorb it, animating
	anything that changes layout would reflow the whole grid on every mouse move; transform and box-shadow are
	composited and move nothing. Keep any animation added later to the same two properties and opacity.

	These are the hooks for the DOM animation Nick is taking: .KtB-Card in source order for a stagger, with the
	title and the text as separate elements inside so they can move independently.
   ============================================================================================================= */
#KtB-Links{
	justify-content: center;
	gap: clamp(5px, 1.3vmin, 15px);
}
.KtB-Card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 0px;
	min-height: 0px;
	padding: clamp(6px, 1.8vmin, 20px);
	container-type: inline-size;
	background: rgba(150,0,0,1.00);
	border: 2px solid rgba(255,255,255,1.00);
	border-radius: 5px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.25), 0px 0px 1px 1px rgba(0,0,0,0.25);
	text-align: center;
	text-decoration: none;
	color: rgba(255,255,255,1.00);
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.KtB-Card:hover,
.KtB-Card:focus-visible{
	background: rgba(178,0,0,1.00);
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.25), 0px 3px 8px 2px rgba(0,0,0,0.35);
	transform: translateY(-2px);
	outline: none;
}
.KtB-Card:focus-visible{
	border-color: rgba(255,225,150,1.00);
}
.KtB-Card:active{
	transform: translateY(0px);
}
/* -----------------------------------------------------------------------------------------------------------
	THE TITLE SPANS THE WIDTH OF ITS CARD, AND ALL FOUR ARE THE SAME SIZE - the longest string sets it, so the
	four read as one set rather than four sizes (Nick's call). 1cqi is 1% of the card's own content width, and
	.KtB-Card is declared container-type: inline-size to be that container, so this fills the same proportion
	of the button at every screen size with no script and no resize handler.

	8.54cqi WAS MEASURED, NOT ESTIMATED, and it is derived from the longest title in Home.php:

	  string                  Jost      fallback
	  Bible Breakdown         8.427em   8.563em
	  Old Testament Survey   10.773em  11.085em
	  New Testament Survey   11.178em  11.475em   <- the longest, and what this number comes from
	  Know the Bible          7.490em   7.642em

	Both fonts were measured because they differ and the WIDER one has to decide. Jost arrives from Google
	Fonts; on a visitor whose request fails, the Gotham/Helvetica/Arial fallback renders 1.5% to 2.7% wider,
	and a size derived from Jost alone would overflow exactly there - the case nobody tests. 98 / 11.475 =
	8.54, so the widest string fills 98% of the card and 2% is left as margin.

	⚠ ADD OR LENGTHEN A CARD TITLE AND THIS NUMBER IS WRONG. Re-measure: render the new string at 100px in
	Jost 700 with letter-spacing .03em, and again in the fallback stack, take the wider width in px, divide by
	100, and set this to 98 divided by that.

	THE 5.4vh CAP IS FOR PORTRAIT ONLY, AND IT IS A vh AND NOT A CONTAINER UNIT ON PURPOSE. A width-derived
	size is too big when a card is wide and short, which is what a card becomes on a tablet held upright: at
	768x1024 the cards are 707px wide and 108px tall, and 8.54cqi wanted 57.7px in a box with room for 56.7.

	Capping against the card's OWN height was tried first - container-type: size, min(8.54cqi, 50cqh) - and it
	is wrong for a reason worth recording. Flex hands the four cards heights that differ by a fraction of a
	pixel, so each card computed a slightly different cap and THE FOUR TITLES CAME OUT AT DIFFERENT SIZES,
	which is the one thing this rule exists to prevent. Measured: same-size false at 360x640 and 768x1024. A
	per-container cap cannot produce one shared size. A viewport unit is global, so all four always agree.

	5.4vh, because in portrait the four cards reliably take 10.5% to 11.2% of the window height each, and half
	of that is the room a title has once the description and padding are paid for. It is scoped to portrait
	because in landscape the cards are tall and the cap would bite where there is 80px to spare - measured, at
	1280x800 a global 5.4vh cap would have cut a 47.3px title to 43.2px for no reason.

	white-space: nowrap is not decoration. The page cannot scroll, so a title that wrapped to a second line
	would grow the card and clip the panel; nowrap makes an overshoot show as text meeting the card edge - a
	visible cosmetic fault instead of a broken layout.

	clamp() first, cqi second, and the order is the fallback: a browser without container query units treats
	the second declaration as invalid and keeps the first. Same pattern as the vh/dvh pair on the frame.
   ----------------------------------------------------------------------------------------------------------- */
.KtB-Card-Title{
	display: block;
	font-family: "Jost", Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: clamp(16px, 2.5vmin, 28px);
	font-size: min(8.54cqi, 5.4vh);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	white-space: nowrap;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.50);
}
/* -----------------------------------------------------------------------------------------------------------
	The portrait height cap lifted. ⚠ THIS MUST STAY BELOW THE RULE ABOVE - a media query adds no specificity,
	so if this sat with the other landscape rule up at #KtB-Landing, the unconditional declaration further
	down the sheet would simply win and the cap would never lift. Source order is the whole mechanism here.
   ----------------------------------------------------------------------------------------------------------- */
@media (orientation: landscape){
	.KtB-Card-Title{
		font-size: 8.54cqi;
	}
}
/* -----------------------------------------------------------------------------------------------------------
	THE SUB-TEXT IS SET TO A SHARE OF THE CARD, NOT TO ITS FULL WIDTH - and that is the one place this rule
	differs from the title above it. Same method, same container, its own number:

	  string                                      fallback   Jost
	  All 66 books, one scrollable structure       16.342em  15.779em
	  Thirteen classes, Creation to the Return     17.675em  16.463em
	  Fourteen classes, Gospels to Revelation      17.954em      -      <- replaced "Thirteen classes, syllabus
	  Why we study, and what this school is for    18.212em  17.452em   <- the longest, and what the fill is of

	⚠ THE NEW TESTAMENT LINE CHANGED ON 2026-08-14 AND THIS NUMBER DID NOT. Its old string ("Thirteen classes,
	syllabus in progress", 16.674em) stopped being true when the real fourteen-class course landed in
	_data.php. The replacement was measured first and comes in at 17.954em - still under "Why we study", which
	is the string this constant divides, so 4.83cqi is unchanged and no rule below moved. Had it come out
	longer it would have BECOME the longest and this number would have had to be re-derived. The Jost column
	is blank for it on purpose: that font would not load in the measuring harness, and a guess in this table
	is worse than a gap. It is not read by this rule anyway - see the note below.

	⚠ THE TARGET IS 88% OF THE CARD, NOT 98% (Nick, 2026-08-14: "a bit smaller"). 88 / 18.212 = 4.83cqi,
	against the 5.38cqi that filled the card edge to edge. THE FILL TARGET IS THE THING TO CHANGE if this
	wants tuning again - keep the measurement, move the 88, and the four lines stay in proportion with each
	other because they all divide the same measured width.

	⚠ CHANGE A CARD'S SUB-TEXT AND THIS NUMBER IS WRONG. Same recipe as the title: render the new string at
	100px in the body stack at weight 400, take the width in px, divide by 100, set this to 88 divided by that
	- and remember it is the LONGEST of the four that decides, not the one you edited. This line does NOT ask
	for Jost, it inherits the body stack, so the fallback column is the one that matters (and is wider anyway).

	⚠ THE MARGIN AND THE LINE-HEIGHT ARE BOTH GONE (Nick, 2026-08-14), and the history is worth keeping: the
	gap was margin-top 0.25em, then 0.1em ("closer to the top text"), and now nothing. line-height: 1.3 went
	with it, so this line falls to normal - about 1.15 to 1.2 depending on the rendering font. What holds the
	two lines apart now is the TITLE's line-height: 1.1, which leaves leading under its own cap; that number
	is load-bearing for this spacing and is not free to change.

	⚠ BOTH REMOVALS MAKE THE CARD CONTENT SHORTER, NEVER TALLER, which is the only reason this did not need a
	re-sweep: the measured worst case was 4.6px of spare at 320x480 and it can only have grown. That is a
	directional argument and not a measurement - if a card is ever reported clipping, measure before assuming
	it is these.

	THE TEXT-SHADOWS ARE PAINT ONLY - 3px/3px/3px on the title, 1px/1px/1px here, both black at 50%. A shadow
	contributes nothing to layout and nothing to scrollable overflow, so no fit changed. ⚠ It CAN paint outside
	its card: the title fills 98% of the container, leaving about 1% a side, and 3px of offset plus 3px of
	blur reaches further than that on a small card. .KtB-Card has no overflow: hidden, so it renders rather
	than clipping - cosmetic either way, and mentioned because it is the thing to look at on a phone.
   ----------------------------------------------------------------------------------------------------------- */
.KtB-Card-Text{
	display: block;
	font-size: clamp(10px, 1.3vmin, 13px);
	font-size: 4.83cqi;
	white-space: nowrap;
	color: rgba(255,255,255,0.80);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.50);
}
/* -----------------------------------------------------------------------------------------------------------
	SQUARISH PORTRAIT - a tablet held upright, and the one shape where width-derived text does not fit.

	A card there is about 707x108: 6.5 wide to 1 tall, against 4.75:1 on a phone. Both lines are sized off the
	WIDTH, so on the wider-for-its-height card they both come out too big for the height - measured, the card
	content ran 29px past the card once the sub-text started filling too.

	⚠ THE TRIGGER IS ASPECT RATIO, AND min-width WAS WRONG. It was first written `min-width: 700px` on the
	reasoning that phones are safe and tablets are not. Measured at 699x1000 - one pixel under the threshold -
	the card overflowed by 19.4px. Width is not the constraint: in portrait a card is about 10.6% of the
	VIEWPORT HEIGHT tall and the viewport width wide, so its aspect follows the viewport's, and a tall narrow
	699px window is the same shape problem as a 768px tablet. 5/9 is just below the squarest phone in the
	sweep, so every shape at or above it is capped and the tall ones are left alone.

	⚠ THE CAPS MUST COVER BOTH LINES, WHICH IS WHY THIS BLOCK EXISTS RATHER THAN A BIGGER TITLE CAP. Capping
	only the title hands the freed height to a sub-text that is also growing, and the card still overflows.
	The budget is title x 1.1 plus sub x 1.4 (its line-height plus its 0.1em margin), against the card height
	less padding - roughly 7.9vh of a 10.6vh card.

	📝 The sub-text cap moved 2.2vh -> 1.95vh with the 2026-08-14 resize, held to the same proportion of the
	cqi size so the capped shapes keep the relation the uncapped ones have. It buys headroom rather than
	spending it: the smaller margin took the multiplier from 1.55 to 1.4 as well.

	⚠ THESE SHAPES ARE THE TIGHT ONES AND A FIFTH CARD IS WHAT WOULD BREAK THEM. Worst spare across the
	sweep is 4.6px, at 320x480 - up from 1.3px before the resize, measured both ways on the same harness, so
	the tightness is inherited rather than new. What CANNOT eat it is longer copy: at any shape this block
	catches, both lines are sized by the vh caps and not by the strings, so a longer description changes the
	width fill and not the height. What CAN is a fifth .KtB-Card - they are flex: 1 1 0, so a fifth one makes
	every card about a fifth shorter while these caps stay where they are. Re-sweep if one is ever added.

	vh and not a container unit, for the reason recorded on .KtB-Card-Title: flex gives the four cards
	sub-pixel different heights, so a cqh cap makes the four disagree and the whole point is that they match.
   ----------------------------------------------------------------------------------------------------------- */
@media (orientation: portrait) and (min-aspect-ratio: 5/9){
	/* The padding comes down too, and on these shapes it is not cosmetic. It is clamp(6px, 1.8vmin, 20px),
	   and vmin is the WIDTH in portrait - so on a squarish window it grows with the very dimension that is
	   already generous while the card height stays about 10.6vh. Measured at 900x1000 it was eating 32px of
	   a 106px card and the content still overflowed by 1.5px with both caps applied. Costless here: the two
	   font sizes are vh-bound at these shapes, so the wider content box does not make the text grow back. */
	.KtB-Card{
		padding: clamp(4px, 1vmin, 12px);
	}
	.KtB-Card-Title{
		font-size: min(8.54cqi, 3.8vh);
	}
	.KtB-Card-Text{
		font-size: min(4.83cqi, 1.95vh);
	}
}
/* -----------------------------------------------------------------------------------------------------------
	THE LAST RESORT, for a short landscape window - a phone turned sideways is about 375px tall and four cards
	plus a logo do not fit with a second line of text on each. The descriptions go and the titles stay, because
	a card that says only "Bible Breakdown" still works and a clipped page does not.
   ----------------------------------------------------------------------------------------------------------- */
@media (max-height: 460px){
	.KtB-Card-Text{
		display: none;
	}
	#KtB-Tagline{
		display: none;
	}
}
/* -----------------------------------------------------------------------------------------------------------
	Respect a reader who has asked for less motion. The GSAP logo build is not covered by this - that is
	scripted, and turning it off belongs in 03_Script.php if it is ever wanted.
   ----------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.KtB-Card{
		transition: none;
	}
	.KtB-Card:hover,
	.KtB-Card:focus-visible{
		transform: none;
	}
}
/* -----------------------------------------------------------------------------------------------------------
	THIS RULE IS ONE OF THREE IDENTICAL COPIES - MasterStyle.css, BibleBreakdown.css, Survey.css. There is no
	shared base stylesheet here (each sheet defines the #KtB frame itself, so a page loads exactly one), so the
	backdrop is written out per sheet. CHANGE ALL THREE TOGETHER or the four pages disagree about the theme.
	The reasoning below is written once, here; the other two carry a short pointer to it.

	THE IMAGE IS BUILD-LOCAL. `../_images/` is _Dev1.0/_images/, NOT the shared _images/ at the site root. The
	root copy is the brick that _Dev0.0 still serves, and overwriting it would retheme the live public build
	the moment the file was saved. One `../` is the whole difference - the stylesheet already lives inside the
	build, so the build's own artwork is the nearer path, not the farther one.

	NO background-attachment, and its absence is deliberate. This element is position:fixed at viewport size,
	so its background is already viewport-anchored and the property changed nothing - while being the one
	background property iOS handles badly. It was removed rather than left as decoration.

	WHERE THIS IS ACTUALLY SEEN: on a desktop window, and almost nowhere else. #KtB-Content is
	`width:100%; max-width:1000px` with auto margins that compute to zero, so below about 1020px the content
	column spans the full width and the backdrop is a 1px sliver each side - measured 1px at 320, 375, 414,
	768 and 1000; 140px at 1280; 460px at 1920. Judge this artwork at desktop widths; a phone barely sees it.

	THE FILENAME CARRIES THE WIDTH, AND A RE-CUT MUST TAKE A NEW NAME. A CSS url() has no cache-buster - the
	`?v` that busts everything else is on the stylesheet link, not on what the stylesheet fetches - so bumping
	$version re-downloads this file and NOT the image inside it. Overwriting Background-2880.jpg in place
	would leave anyone holding a cached copy on the old artwork indefinitely. The previous parchment shipped
	as Background.jpg at v1.17; this one is a new name for exactly that reason, and the next is too.

	2880 wide is not arbitrary: it is 1:1 on a 1440px window at 2x device pixel ratio, the ordinary
	high-quality desktop case. Measured against the 6016px original rastered at 2880: mean difference 3.40 of
	255, against 5.25 for the 1600px cut this replaces. q90 reached 3.10 for another 314 KB and was declined.

	The artwork carries its own vignette, and `cover` keeps the left and right of it on a landscape window -
	which is where it is visible. If a tall window ever crops the top and bottom edge away, layer a vignette
	OVER the image rather than re-cutting the file:
	    background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(61,43,20,0.28) 100%),
	                      url("../_images/Background-2880.jpg");
	    background-size: cover, cover;
   ----------------------------------------------------------------------------------------------------------- */
#KtB-Background{
    position: fixed;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
	background: url("../_images/Background-2880.jpg");
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center;
	border: 2px solid rgba(255,255,255,1.00);
    box-shadow: inset 0px 0px 3px 3px rgba(0,0,0,0.25);
}
#KtB-Giving{
    position: relative;
	padding: 0px 10px;
    background: rgba(0,0,0,1.00);
    border-bottom: thin solid rgba(255,255,255,1.00);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.25);
    text-align: right;
    z-index: 100;
}
#Giving-Text{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    color: rgba(255,255,255,0.75);
}
#Giving-Logo{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
}
#Giving-Logo img{
    display: block;
}
#DonateButton{
    position: relative;
    cursor: pointer;
}

#KtB-Info{
    position: relative;
    width: 96%;
    max-width: 1000px;
    margin: 10px auto;
    background: rgba(255,255,255,0.75);
    border: 2px solid rgba(255,255,255,1.00);
    border-radius: 10px;
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.25);
}
/* -----------------------------------------------------------------------------------------------------------
	#KtB-Logo used to be declared HERE as `width: 50%; margin: 0 auto` - the old landing page, where the logo
	sat above the text and half the column was a reasonable size for it. It is now declared once, up in the
	landing rules, where it is a flex item sized by its box on both axes.

	IT WAS REMOVED BECAUSE IT WAS STILL WINNING. Two #id rules for the same element have equal specificity, so
	the LATER one applies - and this one was later. The new rule read correctly and had no effect: measured at
	1920x1080 the logo was 444.6px wide inside an 889px panel, exactly the 50% this rule was still imposing.
	Nothing looked broken, which is why it needed measuring rather than reading.
   ----------------------------------------------------------------------------------------------------------- */

/* =============================================================================================================
	Overview - Page Head
   ------------------------------------------------------------------------------------------------------------
	The two elements the Overview page adds above the copy it inherited from the old landing page. Everything
	below them is .Info-Box, unchanged and still shared with the 404 page.

	#KtB_Buttons and .KtB_Button-Section used to sit here - the two red buttons on the old landing page. Their
	only markup was in Home.php and their only behaviour was a click handler in 03_Script.php; the landing
	rebuild replaced all three with real anchors, so the rules went with them rather than being left behind.
   ============================================================================================================= */
.Info-Title{
	position: relative;
	margin: 10px;
	padding: 10px;
	border-bottom: thin solid rgba(0,0,0,0.25);
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	color: rgba(120,0,0,1.00);
}
.Info-Back{
	position: relative;
	margin: 0px 10px;
	font-size: 16px;
	text-align: center;
}
.Info-Back a{
	color: rgba(120,0,0,1.00);
}
/* =============================================================================================================
	Overview - Feedback Survey Call-out
   ------------------------------------------------------------------------------------------------------------
	The one element on this page that is meant to interrupt. Everything else in #KtB-Info is a white .Info-Box
	on a white panel, so a button styled like the page would be invisible in a column of twenty boxes - this
	one inverts instead: a FILLED red block on a tinted card, against boxes that are white with red text.

	THE TINTED CARD IS WHAT MAKES THE BUTTON READ AS A SECTION rather than a stray link. Dropping the button
	alone between .Info-Back and the first .Info-Box put a floating control in a run of prose with nothing
	tying it to a purpose; the lead line and the card give it one.

	THE HOVER IS A TRANSFORM, NOT A MARGIN - the same rule the landing cards follow. Animating a margin or a
	size reflows everything below it; a transform is composited and moves nothing else on the page. :focus is
	styled ALONGSIDE :hover deliberately, because this is the only interactive control on the page and a
	keyboard reader gets no cursor to tell them where they are.

	COLOUR: rgba(120,0,0,1.00) is this page existing red - .Info-Title and .Info-Back a both already use it,
	so the button is not introducing a colour, it is filling with one. White on that red measures ~9.7:1,
	comfortably past WCAG AA for the 18px weight used here.
   ============================================================================================================= */
.Info-Survey{
	position: relative;
	margin: 10px;
	padding: 20px 15px;
	background: rgba(120,0,0,0.06);
	border: 2px solid rgba(120,0,0,0.35);
	border-radius: 10px;
	text-align: center;
}
.Info-Survey-Lead{
	margin: 0px 0px 6px;
	font-size: 22px;
	font-weight: bold;
	line-height: 28px;
	color: rgba(120,0,0,1.00);
}
.Info-Survey-Text{
	max-width: 620px;
	margin: 0px auto 16px;
	font-size: 17px;
	line-height: 23px;
	color: rgba(0,0,0,0.75);
}
.Info-Survey-Button{
	display: inline-block;
	padding: 13px 30px;
	background: rgba(120,0,0,1.00);
	border-radius: 6px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	color: rgba(255,255,255,1.00);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.35);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.Info-Survey-Button:hover,
.Info-Survey-Button:focus{
	background: rgba(160,0,0,1.00);
	box-shadow: 0px 4px 9px rgba(0,0,0,0.40);
	transform: translateY(-2px);
}
.Info-Survey-Button:active{
	box-shadow: 0px 2px 4px rgba(0,0,0,0.35);
	transform: translateY(0px);
}
/* -----------------------------------------------------------------------------------------------------------
	A phone is the narrow case that decides the padding. At 320px the card is 96% of the panel less its own
	margins, and 30px of horizontal button padding either side plus the label still fits on one line - the
	button is inline-block, so it is only ever as wide as its text and cannot be the thing that overflows.
   ----------------------------------------------------------------------------------------------------------- */
@media (max-width: 400px){
	.Info-Survey{
		padding: 16px 10px;
	}
	.Info-Survey-Lead{
		font-size: 20px;
		line-height: 26px;
	}
	.Info-Survey-Button{
		padding: 12px 22px;
		font-size: 17px;
	}
}

/* =============================================================================================================
	Overview - Course Section Headings
   ------------------------------------------------------------------------------------------------------------
	v1.28: the course list splits into Released Courses / Coming Soon / Written Lessons on Discipleship. The
	heading is a smaller .Info-Title - same red, same rule underneath - rather than a new device: it labels a
	run of .Info-Box entries, so it should read as the page's own furniture and not compete with the survey
	call-out above. The 30px top margin is the section gap; the boxes below keep their own 10px margins.
   ============================================================================================================= */
.Info-Head{
	position: relative;
	margin: 30px 10px 0px;
	padding: 10px 10px 6px;
	border-bottom: thin solid rgba(0,0,0,0.25);
	font-size: 23px;
	font-weight: bold;
	text-align: center;
	color: rgba(120,0,0,1.00);
}

.Info-Box{
	position: relative;
	margin: 10px;
	padding: 10px;
    background: rgba(255,255,255,0.75);
	border-top: thin solid rgba(0,0,0,0.25);
	border-bottom: thin solid rgba(0,0,0,0.25);
    font-size: 18px;
    line-height: 24px;
    color: rgba(0,0,0,0.85);
}
.Info-Box li{
    margin: 15px 10px;
}
/* -----------------------------------------------------------------------------------------------------------
	v1.28: the two released course titles are anchors now. The page red, same as .Info-Back a, so a link in
	the prose is the site's own colour; the default underline stays as the affordance that it IS a link.
   ----------------------------------------------------------------------------------------------------------- */
.Info-Box a{
	color: rgba(120,0,0,1.00);
}
.Info-Logo{
    position: relative;
    width: 50%;
    margin: 0px auto;
}


#ktb{
    position: relative;
    width: 96%;
    max-width: 800px;
    margin: 0px auto;
}
#ktbNav{
    position: relative;
}
#NavSlider{
    position: relative;
	margin: 20px;
}
#NavButtons{
    position: relative;
}
.NavButton{
    position: relative;
    display: inline-block;
    padding: 3px 10px;
    border: thin solid rgba(150,150,150,1.00);
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.25);
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(150,150,150,0.75);
    cursor: pointer;
}
/* ---------------------------------------------------
---> KtB Bible Study
--------------------------------------------------- */
#KtB-Disciple{
    position: relative;
}
#KtB-Access{
    position: relative;
    padding: 3px 6px;
    background: rgba(255,255,255,0.75);
    border-bottom: thin solid rgba(255,255,255,1.00);
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.25);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: rgba(0,0,0,0.50);
}
.KtB-PageButton{
    position: relative;
    margin: 20px 0px;
    padding: 15px 25px;
    background: rgba(100,0,0,1.00);
    border-top: 2px solid rgba(255,255,255,1.00);
    border-bottom: 2px solid rgba(255,255,255,1.00);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.25);
    font-size: 28px;
    text-align: center;
    color: rgba(255,255,255,1.00);
    cursor: pointer;
}

.KtB-SectionTitle{
    position: relative;
    margin: 10px;
    padding: 10px;
    border-top: thin solid rgba(0,0,0,0.25);
    border-bottom: thin solid rgba(0,0,0,0.25);
    font-size: 24px;
    text-align: center;
    color: rgba(0,0,0,0.75);
}
.KtB-Video{
    position: relative;
    width: 600px;
    margin: 10px auto;
    border: thin solid rgb(0,0,0,1.00);
    box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.25);
}





/* ---------------------------------------------------
---> KtB Bible Study
--------------------------------------------------- */
#ktb-Video{
    position: relative;
    width: 98%;
    max-width: 1400px;
    margin: 0px auto;
    padding: 10px 10px 100px 10px;
}
.ktb-Link{
    position: relative;
    margin: 10px;
    padding: 10px;
    border-top: thin solid rgba(0,0,0,0.25);
    border-bottom: thin solid rgba(0,0,0,0.25);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.ktb-Section{
    display: flex;
    justify-content: center;
    margin: 10px;
}
#ktb-Logo{
    flex: 25%;
}
#ktb-Title{
    flex: 75%;
    margin: 10px;
    padding: 10px;
    border-top: thin solid rgba(0,0,0,0.25);
    border-bottom: thin solid rgba(0,0,0,0.25);
    font-size: 80px;
    color: rgba(0,0,0,0.75);
}
#ktb-TitleText{
    display: flex;
    height: 100%;
    align-items: center;
}
.ktb-Video{
    flex: 600px;
    border: thin solid rgb(0,0,0,1.00);
    box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.25);
}
.ktb-Script{
    flex: calc(100% - 600px);
    width: 100%;
    height: 338px;
    border: thin solid rgb(00,0,0,1.00);
    overflow-y: scroll;
}

.ktb-TimeStamp{
    position: relative;
    margin: 10px 5px 0px 5px;
    border-top: thin solid rgba(0,0,0,0.25);
    border-bottom: thin solid rgba(0,0,0,0.25);
    font-size: 14px;
    color: rgba(0,0,0,0.75);
}
.ktb-ScriptText{
    position: relative;
    padding: 5px;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
}