@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 */
}
img{
	display: block;
}
/*------------------------------------------------------
--> God's Word <--
------------------------------------------------------*/
#KtB{
    position: relative;
    border: thin solid rgba(255,255,255,0.00);
}
/* -----------------------------------------------------------------------------------------------------------
	One of three identical copies - MasterStyle.css, BibleBreakdown.css, Survey.css. CHANGE ALL THREE TOGETHER.
	The reasoning lives once, over the same rule in MasterStyle.css: why the path is build-local, why there is
	no background-attachment, and why this backdrop is a desktop-only element.

	`opacity: .5` USED TO BE HERE AND IS GONE. It was this sheet's only divergence from the other two, and it
	existed to knock back the brick, which was dark. Nothing paints behind this element - html and body carry
	no background - so the opacity was blending the image into browser white. A pale parchment blended half
	into white is very nearly no parchment at all. This is the first value to reach for if the new artwork
	reads too strong; put it back here only, and note that doing so re-forks this sheet from the other two.
   ----------------------------------------------------------------------------------------------------------- */
#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-Content{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    padding: 5px;
    background: rgba(255,255,255,1.00);
    border: 2px solid rgba(255,255,255,1.00);
    border-radius: 10px;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.55);
    z-index: 100;
}
/* =============================================================================================================
    Page Title
   -------------------------------------------------------------------------------------------------------------
	#BibleBreakdown was one line of italic text between two hairline rules. It is now a SECTION BANNER: the
	same .KtB_Banner-Bar1..4 and the same .KtB_Info the 76 sections use, so the page title is the same
	object as the titles beneath it rather than an imitation of one. Restyle the bars once and this follows.

	WHY THERE IS NO margin OR padding HERE ANY MORE, and it is not tidying. A section banner sits in
	.KtB_Group, which runs margin:0 at the full width of the content box. This box carried 10px of margin
	and 10px of padding left and right from its text-line days, and that 40px inset made the page title
	MEASURABLY NARROWER THAN THE SECTIONS IT INTRODUCES at any width below the 600px cap - 266px against
	306px at a 320px viewport, so the top-level title rendered smaller than its own children. Above 660px
	both hit the cap and the fault was invisible. Put either back and it returns, phones only.

	#BibleBreakdown-Banner is .KtB_Banner minus the two rules that belong to a section: sticky positioning
	and grid-area 1/1. Those exist so a section's icon staircase can pin over its title; this title has no
	icon and no grid to sit in. Everything else - white ground, overflow hidden - is copied deliberately,
	because the bars are absolutely positioned in PERCENTAGES of this box and it must therefore be exactly
	as tall as the artwork and nothing more.

	The intro takes .KtB_Content's margin and .KtB_Text's padding, so it lines up with the body text of
	every section rather than floating in a column of its own. Left-aligned for the same reason: nothing
	else on this page is centred.
   ============================================================================================================= */
#BibleBreakdown{
    position: relative;
    margin: 0px 0px 20px 0px;
    padding: 0px;
}
#BibleBreakdown-Banner{
    position: relative;
    background: rgba(255,255,255,1.00);
    overflow: hidden;
}
#BibleBreakdown-Intro{
    position: relative;
	margin: 10px 2px 0px 2px;
	padding: 5px 10px 10px 10px;
    font-size: 22px;
    font-style: italic;
    color: rgba(0,0,0,0.75);
}

.KtB_Group{
    position: relative;
	display: grid;
	width: 100%;
	max-width: 100%;
    margin: 0px;
	padding-bottom: 0px;
    background: rgba(255,255,255,1.00);
}

/*	A guard, and an honest one: it was MEASURED to change nothing on this page. Grid items default to
	min-width:auto, which can stop an item shrinking below its own content and push the document sideways -
	the usual reason to write this. Tested at 320px with the rule on and off, and again with a 55-character
	unbreakable word forced into a description: the document never grew past the viewport in any of the four
	combinations. What actually contains that case is overflow:hidden on .KtB_Content.

	Harmless to keep, and it costs nothing. Just do not credit it with work it is not doing - if a horizontal
	scrollbar ever appears here, this is not the line that failed.	*/
.KtB_Group > *{
	min-width: 0px;
}

/* -----------------------------------------------------------------------------------------------------------
	🔴 DO NOT PUT aspect-ratio BACK ON THIS ELEMENT. It cost 2.8 SECONDS PER CLICK.

	This box used to be sized `aspect-ratio: 20 / 3; height: auto`, which is a tidy way to say "a strip six
	and two thirds times wider than it is tall" - and it is what made opening a part take one to two seconds.

	Measured, on a faithful full-scale copy of this page (76 sections, 333 part rows, 49,898px tall): the
	click handler itself ran in 0.6ms and the layout that followed took 2,839ms. Deriving a height from
	aspect-ratio needs an extra layout pass, there are 76 of these boxes, and they sit in 76 nested grids -
	so the passes compound. Giving the box a definite height instead took the same click to 93ms.

	Things that were measured and made NO difference, so do not spend time on them again: the 152 sticky
	elements (2,620ms with sticky off), the fixed background (2,807ms), hiding the backdrop entirely
	(2,717ms), contain:layout on the icon (3,030ms) or on the group (2,929ms). It was never any of those.

	HOW THE HEIGHT IS DEFINITE NOW: .KtB_Logo is in flow rather than absolute, so this box simply takes its
	height from the one child it has. That keeps the strip proportional at every width - at a 380px column
	the logo measures 55x55 exactly as it did before - without ever asking the layout engine to solve for it.
	The tier offsets still come from `left` on .KtB_Bible/.KtB_Testament/.KtB_Type/.KtB_Book, which relative
	positioning honours the same way absolute did, so the staircase is unchanged to the pixel.
   ----------------------------------------------------------------------------------------------------------- */
.KtB_Icon{
    position: -webkit-sticky;
    position: sticky;
	grid-area: 1 / 1;
    top: 0;
	width: 100%;
	max-width: 600px;
    z-index: 200;
	pointer-events: none;
}
.KtB_Bible{
    left: 0%;
}
.KtB_Testament{
    left: 15%;
}
.KtB_Type{
    left: 30%;
}
.KtB_Book{
    left: 45%;
}
.KtB_Logo{
    position: relative;
    top: 0;
    width: 15%;
    z-index: 300;
    cursor: pointer;
	pointer-events: auto;
}
/*	relative, not absolute, and that is load-bearing - see the note over .KtB_Icon. In flow this element
	gives its parent a definite height; out of flow the parent had to derive one, which is what cost the
	seconds. display:block on the image removes the baseline gap an inline image would otherwise add,
	so the box is exactly the logo and not a pixel more.	*/
.KtB_Logo img{
	display: block;
}

.KtB_Content{
    position: relative;
	margin: 10px 2px 0px 2px;
    background: rgba(188,214,107,0.15);
    box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.25);
	border-radius: 10px;
	overflow: hidden;
}
/* -----------------------------------------------------------------------------------------------------------
	The banner shares row 1 with the icon, which is what keeps the pinned staircase sitting on top of the
	title exactly as before. The content box then auto-places into row 2, underneath it.

	grid-area is what puts it there. Without it the banner would be auto-placed, find row 1 already claimed
	by the icon, and drop to a row of its own - which would push the title graphic clear of the icons and
	break the staircase. .KtB_Content deliberately has NO grid-area for the same reason, in reverse: it used
	to claim 1/1 so it sat under the icon, and now it must fall to the next row instead.

	See the Banner note in _pages/Bible_Breakdown.php for why this element is a child of the group rather
	than of the content box. Moving it back would restore the 181px window where no banner was pinned.
   ----------------------------------------------------------------------------------------------------------- */
.KtB_Banner{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	grid-area: 1 / 1;
	align-self: start;
    background: rgba(255,255,255,1.00);
    overflow: hidden;
    z-index: 150;
}
.KtB_Banner-Bar1{
	position: absolute;
	top: 10%;
	left: 0;
	height: 5%;
	width: 100%;
	background: rgba(188,214,107,1.00);
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.25);
	z-index: 100;
}
.KtB_Banner-Bar2{
	position: absolute;
	top: 15%;
	left: 0;
	height: 5%;
	width: 100%;
	background: rgba(255,255,255,1.00);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.25);
	z-index: 200;
}
.KtB_Banner-Bar3{
	position: absolute;
	bottom: 15%;
	left: 0;
	height: 5%;
	width: 100%;
	background: rgba(255,255,255,1.00);
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.25);
	z-index: 200;
}
.KtB_Banner-Bar4{
	position: absolute;
	bottom: 10%;
	left: 0;
	height: 5%;
	width: 100%;
	background: rgba(188,214,107,1.00);
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.25);
	z-index: 100;
}

.KtB_Info{
    position: relative;
	width: 100%;
	max-width: 600px;
}

/* -----------------------------------------------------------------------------------------------------------
	THE TEXT IS DARK BECAUSE THE FACTS ARE NOW REAL. The bar fades green to white across its width and the
	text used to be white, which was fine for exactly as long as every fact was the placeholder "..." - it
	never reached the pale end. With all 76 written, every bar runs past 85% of the width, so the last words
	of every fact were white on white.

	Dark ink is the change that survives any length of fact. Nothing else moved: same bar, same gradient,
	same weight and italic. The white text-shadow that was carrying the old contrast is gone with it - a
	shadow doing the work of a colour is a sign the colour is wrong.
   ----------------------------------------------------------------------------------------------------------- */
.KtB_FunFact{
	position: relative;
	margin: 10px 0px 35px 0px;
	padding: 6px 12px;
	background: linear-gradient(90deg, rgba(188,214,107,1.00) 0%, rgba(255,255,255,1.00) 100%);
	border: 2px solid rgba(255,255,255,1.00);
	box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.25);
	border-radius: 8px;
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-size: 17px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.15;
	color: rgba(40,50,25,1.00);
}
.KtB_FunFact-Intro{
	color: rgba(255,255,255,1.00);
	text-shadow: 1px 1px 1px rgba(40,50,25,0.50);
}
.KtB_FunFact-Right{
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	height: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1.00) 90%);
}

/* =============================================================================================================
	Jump Links  (_Dev1.0)
   ------------------------------------------------------------------------------------------------------------
	One child per ROW - icon, name, then a one-line description directly underneath it. The band answers
	"what is in here?" without opening anything, which is the whole reason it sits above the collapsed parts.

	It used to be inline-block chips flowing across the width. The chips read as navigation and nothing more:
	seventeen identical green pills told a reader the History section had seventeen books and nothing about
	any of them. A row per child costs vertical space - History runs seventeen rows now - and buys a page a
	reader can actually browse.

	The description hangs under the NAME, not under the icon, and a WRAPPER is what does it: .ql_Text holds
	the title and the description as two block children, so they stack by themselves and the icon sits beside
	the pair. No margin is involved. An earlier version did indent the description by the icon width instead,
	and the note describing that survived the change longer than the code did - corrected 2026-08-06.
   ============================================================================================================= */
.KtB_QuickLinks{
	position: relative;
	border-top: thin solid rgba(0,0,0,0.12);
}
/* -----------------------------------------------------------------------------------------------------------
	Two flex children: .ql_Logo, a fixed 75px that never shrinks, and .ql_Text carrying the title and the
	description. align-items centres the icon against that two-line block.

	NOWRAP IS DELIBERATE (Nick, 2026-08-06). THE ICON STAYS BESIDE THE NAME AT EVERY WIDTH.

	It used to be `wrap`, and that was not overflow protection - it was the only thing that ever dropped
	.ql_Text onto its own line below the icon. .ql_Text has no flex-basis, so its base size is the description
	set on ONE line, and flexbox wraps an item before it shrinks it, which made the switch happen early and
	row by row. Measured with `wrap`: 0 rows wrapped at 753px and 1425px, 11 at 600px, 65 at 480px, all 75 at
	375px and below - so between roughly 400 and 660px the band was MIXED, some rows icon-beside-name at 75px
	tall and others icon-above-name at up to 150px, on the same screen.

	`nowrap` ends that: ONE layout at every width, and a shorter one where it matters. Measured after the
	change, 75 rows, 320-1425px: 0 rows wrapped at every width, no horizontal scroll, nothing clipped.

	Row heights are now driven by how long a description is rather than by which layout mode a row fell into -
	75px flat at 480px and up, 75.5-118.8px at 320px where the longest descriptions run to four lines. With
	`wrap` the same rows were 150.5-173.5px at 320px. A/B on the same page: History's jump-link band 2,750px ->
	1,819px (-931), the whole page 88,115px -> 83,809px (-4,306).

	⚠️ THE TRADE, AND WHY IT IS SAFE. At 320px .ql_Text gets 197px instead of the full 280px, so descriptions
	run to more lines in a narrower column. It cannot overflow, because a flex item will not shrink below its
	own min-content width - the longest single word - and .KtB_Content clips anything that ever did. Both were
	measured after the change, not assumed. If a future description carries a very long unbroken token, that
	is the one thing that could push this row: check it here first.
   ----------------------------------------------------------------------------------------------------------- */
.KtB_QuickLink{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0px 8px;
	margin: 10px;
	cursor: pointer;
}
.ql_Logo{
	position: relative;
	flex: 0 0 auto;
	width: 75px;
}
.ql_Logo img{
	display: block;
	width: 100%;
}
.ql_Text{
	position: relative;
	padding: 3px 0px;
}
.ql_Title{
	position: relative;
	padding: 3px 0px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	color: rgba(0,100,0,1.00);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.15);
}
.KtB_QuickLink:hover .ql_Title{
	text-decoration: underline;
}
/*	no flex anything and no left margin - this is a plain block inside .ql_Text, so it already starts under
	the title simply by being the second child. padding-right keeps the last word off the edge of the box.	*/
.ql_Desc{
	position: relative;
	padding-right: 10px;
	line-height: 1.35;
	font-size: 15px;
	color: rgba(50,60,30,0.75);
}

/* =============================================================================================================
	Section Content  --  the class system the part bodies are written in
   ------------------------------------------------------------------------------------------------------------
	This replaced a set inherited from Commission Church (gw_Details*) that had drifted into a single shape:
	1,773 bullets, 35 paragraphs and 3 headings across 409 parts. Everything was a bullet whether it was a
	list or not, and there was effectively no heading level at all.

	  .KtB_Text      the wrapper every part body opens with
	  .KtB_Lead      THE SECTION'S MAIN PARAGRAPH - the always-open summary at the top of a section
	  .KtB_Head      a heading inside a part
	  .KtB_Para      a paragraph
	  .KtB_Points    a list
	  .KtB_Point     an item in it
	  .KtB_Point-Sub an item that carries a nested list rather than text of its own

	WHY .KtB_Lead DROPS THE BULLET MARKERS. 55 of the 76 section summaries were written as bulleted lists,
	but they are prose - full sentences, two or three of them, describing what the section is. Rewriting
	them into paragraphs would have meant editing Nick's words in 55 files. Styling the lead so its items
	render as paragraphs gets the same reading experience and leaves every word exactly as written. If a
	summary is later rewritten as real paragraphs it needs no CSS change - .KtB_Para already sits here.
   ============================================================================================================= */
.KtB_Text{
	position: relative;
	padding: 5px 10px 10px 10px;
}
.KtB_Lead{
	position: relative;
	margin-top: 4px;
}
.KtB_Lead .KtB_Text{
	padding: 8px 12px 10px 12px;
}
.KtB_Lead .KtB_Points{
	margin: 0px;
	padding: 0px;
}
.KtB_Lead .KtB_Point{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	list-style: none;
	font-size: 17px;
	line-height: 1.5;
}
.KtB_Lead .KtB_Point:last-child{
	margin-bottom: 0px;
}
.KtB_Lead .KtB_Para{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	font-size: 18px;
	line-height: 1.35;
}
.KtB_Lead .KtB_Para:last-child{
	margin-bottom: 0px;
}
.KtB_Head{
	position: relative;
	margin: 14px 0px 6px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: thin solid rgba(50,60,30,0.25);
	font-size: 17px;
	font-weight: bold;
	font-style: italic;
	color: rgba(50,60,30,0.85);
}
.KtB_Head:first-child{
	margin-top: 0px;
}
.KtB_Para{
	position: relative;
	margin: 0px 0px 10px 0px;
	font-size: 16px;
	color: rgba(50,60,30,0.75);
}
.KtB_Points{
	position: relative;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 22px;
	line-height: 1.45;
	font-size: 16px;
	color: rgba(50,60,30,0.75);
}
.KtB_Points:last-child{
	margin-bottom: 0px;
}
.KtB_Point{
	position: relative;
	margin: 0px 0px 4px 0px;
	padding: 0px 0px 0px 4px;
	list-style-type: disc;
}
/*	the marker is the only thing that distinguishes the second level, and it is enough - a nested list is
	already indented by its parent's padding, so re-indenting it as well pushed sub-points off to the right	*/
.KtB_Point-Sub{
	position: relative;
	margin: 4px 0px 6px 0px;
	padding: 0px;
	list-style: none;
}
.KtB_Point-Sub > .KtB_Points{
	margin-bottom: 0px;
	padding-left: 18px;
}
.KtB_Point-Sub > .KtB_Points > .KtB_Point{
	list-style-type: circle;
}

/* =============================================================================================================
	Summary, Jump Links and Parts  (_Dev1.0)
   ------------------------------------------------------------------------------------------------------------
	A section renders in three bands, IN THIS ORDER, and each answers a different question a reader has.

	  .KtB_Lead        what is this? Always open, no title, no arrow. ONE paragraph. Real markup in the page.
	  .KtB_Part        tell me more. Collapsed, one row per title, as many as the section has content for.
	  .KtB_QuickLinks  where can I go from here? Last, because a link out ENDS this section - everything it
	                   has to say about itself comes first. Always visible, so moving around the structure
	                   never requires opening anything.

	THE OPEN IS ANIMATED AGAIN, AND THE HISTORY MATTERS MORE THAN THE RULE.

	The body is a grid whose single row is 0fr closed and 1fr open, transitioned. This was removed on
	2026-08-06 and put back the same day, and the reason it was removed turned out to be a WRONG DIAGNOSIS -
	worth knowing so nobody repeats it in either direction:

	  the symptom     opening a part started sliding and then hitched partway.
	  the first call  blamed grid-template-rows being a layout property, made expensive by the ~152 sticky
	                  elements on this page. That was wrong.
	  what it was     `aspect-ratio` on .KtB_Icon - see the note over that rule. Every frame of the
	                  transition forced a layout, and each layout cost 2.8 SECONDS because of it. The
	                  animation was not the problem; it was just the thing asking for layout 60 times a
	                  second and getting billed 2.8s each time. With sticky disabled the cost was still
	                  2,620ms, which is what proved the first diagnosis wrong.

	So the transition is back now that a layout costs ~100ms instead of 2,839ms. ⚠️ 100ms is still over the
	16.7ms a 60fps frame gets, and it was NOT possible to measure real frame times in the authoring
	environment - so if the open ever looks rough again, this line is the first thing to try removing, and
	the fallback that cannot hitch is to animate opacity and a small translateY on .KtB_Part-Inner instead
	and let the height snap. Those run on the compositor and never ask for layout at all.

	The earlier jQuery slideDown was removed for a different and still-valid reason: it measured the target
	height the instant it started, which with images in the body happened before they loaded, so it animated
	to the wrong height and then jumped. A fraction unit resolves against whatever the content turns out to
	be, so it cannot make that mistake.

	The arrow also moves, on transform - compositor only, touches no layout.

	BOTH boxes clip, and both are load-bearing. The row track collapses to zero height but an element sitting
	in it still draws its own padding, so padding alone would leave a visible band under every closed title.
	overflow:hidden on the outer box is what clips that away; min-height:0 on the inner is what allows a grid
	item to shrink below its content in the first place. Remove either and the collapsed state breaks.

	.KtB_Part-Open is set by the script and drives everything: the arrow and the row. Adding that one class
	is the whole state change, which is why no JavaScript here touches height.
   ============================================================================================================= */
.KtB_Parts{
	position: relative;
	margin-top: 6px;
}
.KtB_Part{
	position: relative;
	border-top: thin solid rgba(0,0,0,0.12);
}
.KtB_Part-Title{
	position: relative;
	padding: 9px 10px 9px 26px;
	font-size: 16px;
	font-weight: 700;
	color: rgba(50,60,30,0.75);
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.KtB_Part-Title:hover{
	background: rgba(0,0,0,0.05);
}
.KtB_Part-Arrow{
	position: absolute;
	top: 50%;
	left: 8px;
	width: 0px;
	height: 0px;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid rgba(0,0,0,0.55);
	-webkit-transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
}
.KtB_Part-Open > .KtB_Part-Title > .KtB_Part-Arrow{
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.KtB_Part-Body{
	position: relative;
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.22s ease;
}
.KtB_Part-Open > .KtB_Part-Body{
	grid-template-rows: 1fr;
}
.KtB_Part-Inner{
	min-height: 0px;
	overflow: hidden;
}
.KtB_Part-Problem{
	padding: 10px 0px;
	font-style: italic;
	opacity: 0.7;
}