/*!Author information for CSS code
=====================================================================
   Version 3.27 | Tuesday, April 16, 2024
   Style sheet © 2021-2024, Keith W Bell
   www.december14.biz
   ------------------------------------------------------------------
   The one where I totally dump support for Internet Explorer. 🙂
   ------------------------------------------------------------------
   This style sheet, associated graphics and web page design are
   copyrighted materials and may not be copied or reproduced by any
   party for any reason whatsoever.
===================================================================== */


/* Design notes
=====================================================================
   A simple, tasteful, typographically rigorous presentation of Land
   Court decisions on screen, with optimisations for printing.
   ------------------------------------------------------------------
   CSS architecture in line with ‘ITCSS’, i.e. rules broadly in order
   of increasing specificity (‘specificity graph’ trending upwards).
   BUT the approach eschews ‘a class for everything’ and embraces
   combinators and complex selectors because:
   - it enables a DRY, efficient way to style web documents;
   - it allows the HTML to remain clean, simple and semantic; and
   - the cascade, inheritance and specificity are features, not bugs.
   ------------------------------------------------------------------
   Documents are so structured that even in the total absence of CSS
   support, or if the style sheet fails to load, users are still
   presented with a well-formed, readable and accessible web page.
   ------------------------------------------------------------------
   C O N T E N T S                                               Flag
   ------------------------------------------------------------------
   Layer 1 - Generic                                               =1
   Layer 2 - Base                                                  =2
   Layer 3 - Components                                            =3
   Adjustments for printing                                        =4
   ------------------------------------------------------------------
   C O L O U R   M E M O                                         Code
   ------------------------------------------------------------------
   Body text ................................................ #444444
   Body background .......................................... #FFFFFF
   Blockquote background .................................... #F8F8F8
   Boldface text and table headings ......................... #555555
   Table borders ............................................ #A8A8A8
   Dotted underlines (TITLE attributes) ..................... #666666
   Link text: visited and unvisited ......................... #105CB6
   Link text: focus and hover ............................... #000033
   Selected text ............................................ #333333
   Selected text background ................................. #FFFFAA
   Alternative background: pale green ....................... #DFFFDF
   Alternative background: cream ............................ #FFFFCF
   Horizontal rule .......................................... #444444
   Footer text .............................................. #666666
   The following only if JS is supported:
   Accent & progress bars, and ‘print’ button ............... #EB3425
   Accent bar ‘active’ ...................................... #DDBBBB
===================================================================== */


@supports not (-ms-high-contrast: none) { /* Hide everything from any lingering instances of IE! */


/* Layer 1 - Generic                                               =1
=====================================================================
 * Basic reset.
 * Selected text highlighting.
===================================================================== */

* {
	margin:     0;
	padding:    0;
	box-sizing: border-box;
	}

::selection {
	color:            #333333;
	background-color: #FFFFAA;
	}


/* Layer 2 - Base                                                  =2
=====================================================================
 * Simple selectors: no ID or CLASS attributes and no combinators.
   ------------------------------------------------------------------
 * Scroll behaviour is set on the HTML element in order to apply to
   the viewport. It will not propagate to the viewport if set on BODY.
 * CSS variables are set on the HTML element as it is the document
   root and less specific than :root.
   ------------------------------------------------------------------
 * Font stack: For reasons of speed, simplicity and familiarity, this
   style sheet uses only system fonts. ‘Georgia’ by Matthew Carter
   was inspired by the early 19th century ‘Scotch Roman’ typefaces of
   the Edinburgh type foundry Miller & Richard. Scotch Romans are
   highly legible designs, and Georgia is an elegant example that
   works well on screen and in print, and is supported on both Apple
   and Windows platforms. Devices that do not have Georgia available
   will fall back to their default serif face.
 * Calibri provides an ideal, compact, clear sans-serif for tables on
   Windows platforms. Carlito has the same metrics, and *might* be
   available on certain Chrome OS, Linux, MacOS and iOS platforms.
   system-ui should render the text in the default system font for
   the user’s platform: normally a sans-serif, and currently aliases
   to San Francisco on MacOS/iOS. SF has larger metrics than Calibri,
   unfortunately. But at least it gives Apple users a familiar
   sans-serif, though its bold face is almost as ugly as Arial.
   Failing all of that, the font will fall back to the stack defined
   for BODY.
===================================================================== */

html {
	scroll-behavior:   smooth;
	font-size:         100%;
	--progressPercent: 0;
	--font-body:       Georgia, serif;
	--font-sans:       Calibri, carlito, system-ui;
	--lead-body:       1.5;
	--lead-sans:       1.25;
	--factor-01:       0.8;
	--factor-02:       0.875;
	--factor-03:       0.95;
	--factor-04:       1.1;
	--factor-05:       1.15;
	}

body {
	margin:      0 auto;
	padding:     5%;
	max-width:   75ch;
	font-family: var(--font-body);
	font-size:   clamp(100%, 90% + 0.5vw, 125%);
	line-height: var(--lead-body);
/*	Take the edge off the black-on-white contrast, but maintain
	better than WCAG 2.2 Level AA compliance. */
	color:       #444444;
	background:  #FFFFFF;
/*	Apple disabled subpixel antialiasing on MacOS in 2018, but Chrome
	and Safari on MacOS still use subpixel antialiasing by default.
	It needs to be explicitly turned off, because it makes text a bit
	too heavy. */
	-webkit-font-smoothing: antialiased;
	}


/* Sectioning content.
---------------------------------------------------------------------
 * Mobile first: initially constrain the size of text elements in the
   HEADER for small screens. Go full size on larger screens.
   ------------------------------------------------------------------
 * Add some top margin to the FOOTER to provide a bit of separation
   from body text.
 * Georgia has a very *bold* bold weight; almost a black. Lighten the
   text colour so that it does not appear so heavy.
--------------------------------------------------------------------- */

header {
	font-size:            calc(1em * var(--factor-01));
	text-align:           center;
	text-wrap:            balance;
	font-variant-numeric: lining-nums;
	}

@media (min-width: 46.25em) {

	header {
		font-size: 1em;
		}

} /* Close the @media rule. */

footer {
	margin-top:  3em;
	font-weight: bold;
	color:       #666666;
	}


/* Headings.
---------------------------------------------------------------------
 * To ensure separation *between* sections, but proximity of the
   heading to the related section following it, set the top margin 
   greater than the bottom. 
 * The default bold weight is too heavy, and rather ugly. So
   distinguish heading levels primarily by size, as in the rules
	that follow.
 * Headings need tighter leading than body text. 
 * A little reduction in tracking makes headings more optically
   balanced, readable, and pleasant to view. 
--------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin-top:      1.5em;
	margin-bottom:   0.75em;
	font-weight:     normal;
	line-height:     calc(var(--lead-body) * var(--factor-02));
	letter-spacing: -0.01em;
	}

h1 {
	font-size:  2em;
	text-align: center;
	}

h2 {
	font-size: 1.8em;
	}

h3 {
	font-size: 1.6em;
	}

h4 {
	font-size: 1.35em;
	}

h5 {
	font-size:  1.2em;
	}

h6 {
	font-size:  1em;
	font-style: italic;
	}


/* Body text.
--------------------------------------------------------------------- */

p, ul, ol, dl, table,
blockquote, hr,
figcaption, img {
/*	Basic block spacing for body text elements; based on the leading
	set on BODY. */
	margin-bottom: 1.5em;
	}

blockquote {
/*	A tiny amount of bottom padding prevents collapsing of the bottom
	margin on the final paragraph or list in a blockquote.
	Set the element off with a pale grey background. */
	padding:          1em 1.5em 1px;
	background-color: #F8F8F8;
	}

ul, ol {
/*	Pull up the top margin to associate the list more closely with
	the preceding paragraph. Indent the list from the left margin:
	- sufficiently to accommodate OL numbers comfortably;
	- to align text with other ‘first level’ indented paragraphs, e.g.
	  [data-1-]. */
	margin-top: -0.75em;
	margin-left: 3em;
	}

ol {
/*	The most common number style used on ordered lists is lower roman,
	so set that as the default. */
	list-style-type: lower-roman;
	}

li {
/*	Make vertical spacing between list items tighter than between 
	paragraphs. */
	margin-bottom: 0.75em;
	}

dt {
/*	Each new DT needs some vertical space above. Base it on regular
	list item spacing. */
	margin-top:     0.75em;
/*	Make the space below the same as for DD. */
	margin-bottom:  0.25em;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	}

dd {
/*	Make vertical spacing between description items tighter than
	between regular list items.
	Be consistent with other left margins for ‘first level’
	indents. */
	margin-bottom: 0.25em;
	margin-left:   1.5em;
	}

figcaption {
/*	Pull the caption up closer to the item to which it relates.
	(FIGCAPTION is always placed *after* the item. */
	margin-top:   -0.5em;
	margin-right:  calc(1.5em / var(--factor-02));
	margin-left:   calc(1.5em / var(--factor-02));
	font-family:   var(--font-sans);
	font-size:     calc(1em * var(--factor-02));
	line-height:   var(--lead-sans);
	}

hr {
/*	Make a 1px high rule. Both colour *and* background colour must be
	set, and must be the same. */
	border:           0;
	height:           1px;
	color:            #444444;
	background-color: #444444;
	}


/* Data tables.
---------------------------------------------------------------------
 * Begin by removing all borders from tables, rows and cells.
 * Then set basic TABLE element properties for all screen sizes.
   ------------------------------------------------------------------
 * For tables, we reverse the normal ‘mobile first’ philosophy and
   make special provision for small screens, i.e. to enable scrolling
   horizontally. (A TABINDEX="0" attribute on the TABLE tag in the
   HTML already makes the scrolling container keyboard accessible.)
 * Apply the rule to screen media only.
   ------------------------------------------------------------------
 * Finally, set the properties for rows, cells and captions.
--------------------------------------------------------------------- */

table, tr, th, td {
	border: none;
	}

table {
/*	Centre all tables. */
	margin-right:    auto;
	margin-left:     auto;
/*	Not too narrow, and not too wide. */
	min-width:       50%;
	max-width:       100%;
/*	Minimal borders. */
	border-top:      1px solid #A8A8A8;
	border-collapse: collapse;
/*	Fix the table font size regardless of viewport width. */
	font-size:       1rem;
/*	Table text needs tighter leading than body text, especially in TH
	cells, which dictate the dimension. TDs need to fall into line to
	maintain vertical rhythm within rows, so set leading on TABLE. */
	line-height:     var(--lead-sans);
	}

@media screen and (max-width: 37.5em) {

/*	Table width exceeds available screen width? Just let it scroll! */

	table {
	/*	The following 4 declarations facilitate horizontal scrolling,
		making the table a ‘scroll container’. All properties and
		values are required. */
		display:    inline-block;
		width:      auto;
		max-width:  100%;
		overflow-x: auto;
	/*	The table is the scroll container, so the basic ‘snap’ type
		properties are set in this rule.
		- Snap in the inline direction.
		- Force the scroll container viewport to rest on a snap point. */
		scroll-snap-type: inline mandatory;
	/*	Background gradients at the extremities of the scroll
		container give a visual clue to users with small screens that
		the table may be scrolled horizontally. */
		background:
			linear-gradient(to right, white 30%, rgba(255,255,255,0)),
			linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
			radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
			radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
		background-color:      white;
		background-repeat:     no-repeat;
		background-position:   0 0, 100%, 0 0, 100%;
		background-size:       40px 100%, 40px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
		}

} /* Close the @media rule. */

tr {
	border-bottom: 1px solid #A8A8A8;
	}

th, td {
/*	Use absolute units for padding to keep everything ‘tight’.*/
	padding:           4px 10px 4px 5px;
	vertical-align:    top;
	text-align:        left;
/*	Set the start of TH and TD cells as snap points within the scroll
	container viewport. (Only effective on small screens.) */
	scroll-snap-align: start;
	}

th {
	font-weight: bold;
	color:       #555555;
	}

td {
/*	Tabular, lining figures work best in tables, but these features
	are not supported in all fonts (though they are in Georgia and
	Calibri). Even without tabular spacing, lining figures are still
	better for table data in general, and for currency values in
	particular, than ‘old style’ figures which may be the default (as
	in Georgia, for example). This declaration sets an order of
	preference, depending on what is available in the font:
	- tabular spacing with lining figures;
	- tabular spacing with default style figures;
	- default spacing with lining figures;
	- default spacing with default style figures (the fallback). */
	font-variant-numeric: tabular-nums lining-nums;
	}

caption {
	margin-top:     1em;
	margin-bottom:  1em;
	line-height:    calc(var(--lead-sans) * var(--factor-04));
	text-align:     center;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	}


/* Inline elements.
---------------------------------------------------------------------
 * EM and STRONG are used where the purpose is truly for emphasis. I
   and B are used when drawing attention to text without conveying
   extra importance or mood.
   ------------------------------------------------------------------
 * For the sake of typographic harmony, make SUP, SUB and SMALL text
   all the same size.
   ------------------------------------------------------------------
 * The declared property values for SUP and SUB ensure that:
   - superscripts and subscripts do not interfere with lines of text
     above or below;
   - vertical line spacing is not affected by the presence of
     superscripts or subscripts.
--------------------------------------------------------------------- */

i, em {
/*	Bizarrely, the Georgia italic face is slightly bigger than the
	roman, and italics stick out like a sore thumb when set amongst a
	line of roman text. Reduce the size for a better match. */
	font-size:  calc(1em * var(--factor-03));
	font-style: italic;
	}

b, strong {
	font-weight: bold;
	color:       #555555;
	}

sup, sub, small {
	font-size: calc(1em * var(--factor-02));
	}

sup, sub {
	position:             relative;
	font-variant-numeric: lining-nums;
	vertical-align:       baseline;
	line-height:          0;
	}

sup {
	top: -0.5em;
	}

sub {
	bottom: -0.25em;
	}

img {
	display:      block;
	margin-right: auto;
	margin-left:  auto;
	max-width:    100%;
	height:       auto;
	}

button {
/*	Initial style properties for the ‘print’ button created by JS.
	Button dimensions account for a 24px square icon appended by JS.
	Position allows space for the reader progress bar at top. */
	position:   fixed;
	top:        6px;
	left:       0;
	width:      32px;
	height:     32px;
	padding:    3px;
	border:     0;
	background: #EB3425;
	}


/* Layer 3 - Components                                            =3
=====================================================================
 * Fully designed blocks or UI elements.
===================================================================== */


/* Section headings and subheadings.
---------------------------------------------------------------------
 * Refine the vertical spacing between headings, subheadings and
   subsequent text by nixing the top margin on any element following
   a heading: including other headings.
--------------------------------------------------------------------- */

h3 + *,
h4 + *,
h5 + *,
h6 + * {
	margin-top: 0;
	}


/* The document header.
---------------------------------------------------------------------
 * Give headings in the title region a bit more breathing room.
 * Reduce the H3 font size to make application type/subjects details
   less ‘loud’.
 * De-emphasise text colour for the citation reference. And yes, I
   *am* going to use the CITE element!
--------------------------------------------------------------------- */

header h1, header h2, header h3 {
	line-height: var(--lead-body);
	}

header h3 {
	font-size: 1.4em;
	}

header cite {
	display:       block;
	margin-bottom: 1.5em;
	font-size:     calc(1em * var(--factor-05));
	font-style:    normal;
	text-align:    right;
	color:         #666666;
	}


/* Blockquotes.
---------------------------------------------------------------------
 * Tighten up the spacing between paragraphs. These are often short,
   ‘list-like’ items in quoted legislation, where the base bottom
   margin feels uncomfortably large. Also reduces the length of the
   blockquote regions a little.
 * Join consecutive blockquotes seamlessly by shifting up the top
   margin to eliminate the whitespace between. Use when there is a
   second or subsequent opening quotation mark in a block of quoted
   text.
--------------------------------------------------------------------- */

blockquote p {
	margin-bottom: 1em;
	}

blockquote + blockquote {
	margin-top: -2.5em;
	}


/* Additional paragraphs in table cells.
---------------------------------------------------------------------
 * Add a small top margin and remove the global bottom margin to
   rationalise vertical spacing.
 * Note that a P tag is only applied to the second and subsequent
   paragraphs in the cell, where these exist.
--------------------------------------------------------------------- */

th p, td p {
	margin-top:    0.5em;
	margin-bottom: 0;
	}


/* Footnote paragraphs.
---------------------------------------------------------------------
 * Footnotes are contained in ASIDE elements: ASIDE is reserved for
   this purpose.
 * Reduce the paragraph bottom margin to give the same vertical
   spacing as a list item. Indent the paragraph from the left margin.
 * Move the superscripted footnote number back to the left margin.
--------------------------------------------------------------------- */

aside p {
	margin-bottom: 0.75em;
	margin-left:   2em;
  }

aside sup {
	display:      inline-block;
	text-indent: -2.285em;
  }


/* Nested lists, and other elements inside list items.
---------------------------------------------------------------------
 * Set the alternative number style on nested ordered lists.
 * Adjust the top and bottom margins to ensure the vertical spacing
   between nested lists and paragraphs or other elements *inside*
   list items is consistent with that *between* list items. Note that
   these rules are adequate for just *one* level of nesting.
 * Blockquotes and tables inside list items are rare, but do exist in
   some cases.
--------------------------------------------------------------------- */

ol ol {
	list-style-type: lower-alpha;
	}

li ul, li ol {
	margin-top:     0.75em;
	margin-bottom: -2.25em;     /* 1.5 + 0.75 */
	}

li p {
	margin-bottom: 0.75em;
	}

li table {
	margin-top: 1.3em;
	margin-bottom: -1.3em;
	}

li blockquote {
	margin-bottom: -2.25em;
	padding-top:    0.75em;
	padding-bottom: 1px;
	}

li blockquote + p {
	margin-top:     3em;        /* 2.25 + 0.75 */
	margin-bottom: -1.5em;
	}


/* Title attributes in elements.
---------------------------------------------------------------------
 * Styles to indicate to sighted users that there is TITLE text
   available (e.g. expansion of an abbreviation).
--------------------------------------------------------------------- */

[title] {
	border-bottom:   1px dotted #666666;
	text-decoration: none;
	cursor:          help;
	}


/* Type attributes in ordered lists.
---------------------------------------------------------------------
 * Where necessary, the default list style for any OL may be
   overridden by hard coding in the HTML.
--------------------------------------------------------------------- */

[type="1"] {
	list-style-type: decimal;
	}

[type="i"] {
	list-style-type: lower-roman;
	}

[type="a"] {
	list-style-type: lower-alpha;
	}


/* Layout and utility classes and pseudo classes.
---------------------------------------------------------------------
 * Set a radius and offset for the default :focus outline.
   ------------------------------------------------------------------
 * Add some top margin to targets when scrolling to give some
   breathing space above superscripted footnote numbers.
   ------------------------------------------------------------------
 * Provide for small caps where required.
   ------------------------------------------------------------------
 * Render an element at full width of the containing block. Handy
   for ‘evening out’ widths of consecutive tables.
   ------------------------------------------------------------------
 * Adjust alignment of figures in parentheses in table cells, e.g.
   for negative currency values.
   ------------------------------------------------------------------
 * Text alignment. Useful for table cells, where there may be numeric
   data; and for appendix headings. And there’s nothing wrong with
   just calling them ‘centre’, ‘right’ and ‘middle’ here!
   ------------------------------------------------------------------
 * Revert to normal font weight and style with a SPAN. Sometimes
   useful inside a TH, which otherwise defaults to boldface.
   ------------------------------------------------------------------
 * Occasionally a list needs to be presented without item markers.
   Apply the .no-marker class to the UL/OL tag.
   ------------------------------------------------------------------
 * Apply a shadowed ‘frame’ around an IMG.
   ------------------------------------------------------------------
 * Alternative background colours may be most usefully employed in
   table heading and subheading rows and cells for added clarity or
   distinction. Use sparingly.
   ------------------------------------------------------------------
 * Legacy classes. Only in use on some early documents. Apply only on
   wider screens.
--------------------------------------------------------------------- */

:focus {
	border-radius:  0.15em;
	outline-width:  2px;
	outline-style:  solid;
	outline-color:  #105CB6;
	outline-offset: 0.15em;
	}

:target {
	scroll-margin-top: 12px;
	}

.sc {
	font-variant: small-caps;
	}

.full {
	width: 100%;
	}

.parens {
	padding-right: calc(10px - 0.315em);
	}

.centre {
	text-align: center;
	}

.right {
	text-align: right;
	}

.middle {
	vertical-align: middle;
	}

.normal {
	font-weight:    normal;
	font-style:     normal;
	text-transform: none;
	}

.no-marker {
	list-style-type: none;
	}

.framed {
	padding:    clamp(0.5vw, 0.75vw, 5px);
	box-shadow: 0 0 5px 1px rgba(75, 75, 75, 0.5);
	}

.alt-bg-01 {
/*	Pale green. Maintains better than WCAG 2.2 Level AA compliance. */
	background-color: #DFFFDF;
	}

.alt-bg-02 {
/*	Cream. Maintains better than WCAG 2.2 Level AA compliance. */
	background-color: #FFFFCF;
	}

@media (min-width: 46.25em) {

	.record {
		float:       right;
		margin-top:  0;
		margin-left: 1em;
		width:       15em;
		}

	.application {
		margin: 1.5em 0;
		}

	.court,
	.subscription {
		text-align: center;
		}

	.member1of2 {
		float:      left;
		margin-top: 0;
		width:      50%;
		}

	.member1of3 {
		float:      left;
		margin-top: 0;
		width:      33%;
		}
}


/* Indented paragraphs in quoted legislation.
---------------------------------------------------------------------
 * The sole purpose of this set of rules is to simulate the styling
   of paragraphs adopted by Acts and Statutory Instruments of the UK
   and Scottish parliaments. This measure preserves familiarity for
   users accustomed to seeing the quoted legislation in its original
   form, and respects the Decision author’s formatting.
 * Nested OLs (however appealing an idea or however cleverly styled)
   are entirely unsuitable for marking up legislation, because web
   browsers treat list item numbers as *presentation*, whereas they
   are actually *content* and must be stable. See:
   https://siderea.dreamwidth.org/1819759.html
   ------------------------------------------------------------------
 * Arabic numbered: first level indent.
 * Alpha numbered:  second level indent.
 * Roman numbered:  third level indent.
   ------------------------------------------------------------------
 * '-' suffixed items, e.g. [data-1-], are for unnumbered paragraphs
   at the related level of indent.
--------------------------------------------------------------------- */

[data-1], [data-1-] {
	margin-left: 1.5em;
	}

[data-a], [data-a-] {
	margin-left: 4em;
	}

[data-i], [data-i-] {
	margin-left: 6.5em;
	}

[data-1], [data-a], [data-i] {
/*	Outdent the first line to accommodate a paragraph number. */
	text-indent: -1.5em;
	}


/* Lists of authorities.
---------------------------------------------------------------------
 * Apply .authorities class to UL tag to remove left margins and list
   markers.
 * Where the list has been given a paragraph number, apply .numbered
   to the UL tag also, to shift the first item up to the same ‘line’
   as the number, while making room for the number at the left.
 * Define a more compact presentation than for regular lists. Set a
   tighter LI leading than the default, so that multiple lines do not
   appear disconnected. Adjust bottom margin in the ratio of tighter
   leading to the normal LI leading, e.g. (1.3/1.5 × 0.75em) = 0.65em.
--------------------------------------------------------------------- */

.authorities {
	margin-left:     0;
	list-style-type: none;
	}

.numbered {
/*	Logic dictates the top margin should be -1.5em. My eyes tell me it
	needs to be -1.4em. */
	margin-top: -1.4em;
	margin-left: 2em;
	}

.authorities li {
	--lead-auth:   calc(var(--lead-body) * var(--factor-02));
	margin-bottom: calc(0.75em * var(--lead-auth) / var(--lead-body));
	line-height:   var(--lead-auth);
	}


/* Link and anchor states.
---------------------------------------------------------------------
 * Keep base states the same as main site styles, for consistency.
   ------------------------------------------------------------------
 * De-clutter the appearance of links in superscripts (e.g. footnote
   references):
   - remove any border applied by a TITLE attribute (TITLE attributes
     may sometimes be added to provide footnote and reference links
     with unique accessible names);
   - remove underlines and overlines;
   - restore a normal link pointer cursor.
   ------------------------------------------------------------------
 * Highlight targetted footnote numbers or references in the text
   with a red outline instead of the default :focus colour.
--------------------------------------------------------------------- */

a:link, a:visited {
	text-decoration: underline;
	color:           #105CB6;
	}

a:hover, a:focus {
	text-decoration: underline overline;
	color:           #000033;
	}

a:focus {
	text-decoration: none;
	}

sup :link {
	border:          0;
	text-decoration: none;
	cursor:          pointer;
	}

sup :target {
	color:         #105CB6;
	outline-color: #CC0000;
  }


/* Particular table treatments.
---------------------------------------------------------------------
 * Sometimes the accessible name for a table is provided by a TITLE,
   but we want a ‘normal’ cursor to appear on tables, and no dotted
   bottom border.
   ------------------------------------------------------------------
 * Sometimes lines on a table are intrusive, so apply the .unlined
   class to the TABLE tag if helpful.
   ------------------------------------------------------------------
 * Negation will apply the sans-serif to all tables except those with
   a .legal class (for tables quoted from legislation).
--------------------------------------------------------------------- */

table[title] {
	border: none;
	cursor: auto;
	}

.unlined tr, .unlined th, .unlined td {
	border-bottom: 0;
	}

table:not(.legal) {
	font-family: var(--font-sans);
	}


/* Particular paragraph treatments.
---------------------------------------------------------------------
 * Introductory paragraphs. When the MAIN content opens with a
   paragraph that is not immediately preceded by a heading:
   - increase the vertical spacing between it and the HEADER; and
   - increase the font size a little.
--------------------------------------------------------------------- */

main > p:first-child {
	margin-top: 2.5em;
	font-size:  calc(1em * var(--factor-04));
	}


/* Particular table cell treatments.
---------------------------------------------------------------------
 * Keith’s clever columns classes: keep the table markup clean.
   ------------------------------------------------------------------
 * For ‘simple’ tables (i.e. without rowspan or colspan attributes on
   cells), these classes provide for setting the alignment of whole
   columns just by applying classes to the TABLE tag, e.g.
   - .c1r  sets all TD cells in column 1 to right aligned;
   - .c9c  sets all TD cells in column 9 to centre aligned;
   - .c1rh sets all TH cells in column 1 to right aligned;
   - .c9ch sets all TH cells in column 9 to centre aligned.
   Mix and match as required.
   ------------------------------------------------------------------
 * The TD and TH alignment rules could each be combined under one
   classname, but separating them allows more flexibility.
--------------------------------------------------------------------- */

.c1r td:nth-child(1), .c1rh th:nth-child(1),
.c2r td:nth-child(2), .c2rh th:nth-child(2),
.c3r td:nth-child(3), .c3rh th:nth-child(3),
.c4r td:nth-child(4), .c4rh th:nth-child(4),
.c5r td:nth-child(5), .c5rh th:nth-child(5),
.c6r td:nth-child(6), .c6rh th:nth-child(6),
.c7r td:nth-child(7), .c7rh th:nth-child(7),
.c8r td:nth-child(8), .c8rh th:nth-child(8),
.c9r td:nth-child(9), .c9rh th:nth-child(9) {text-align: right}

.c1c td:nth-child(1), .c1ch th:nth-child(1),
.c2c td:nth-child(2), .c2ch th:nth-child(2),
.c3c td:nth-child(3), .c3ch th:nth-child(3),
.c4c td:nth-child(4), .c4ch th:nth-child(4),
.c5c td:nth-child(5), .c5ch th:nth-child(5),
.c6c td:nth-child(6), .c6ch th:nth-child(6),
.c7c td:nth-child(7), .c7ch th:nth-child(7),
.c8c td:nth-child(8), .c8ch th:nth-child(8),
.c9c td:nth-child(9), .c9ch th:nth-child(9) {text-align: center}


/* Particular blockquote treatments.
---------------------------------------------------------------------
 * Provide space for a hanging quotation mark on the first paragraph
   that is a direct child of a blockquote by means of a negative
   text indent, unless:
   - [1] that paragraph is centred, such as a part or chapter title
         in quoted legislation; or
   - [2] the indent is explicitly nullified by a .flush class,
         applied in the smaller number of cases where there is no
         quotation mark. An inelegant hack perhaps, but what can a
         poor boy do?
 * Indented paragraphs need to add that same negative indent amount
   to the existing indent; thus: -0.4em - 1.5em = -1.9em.
   ------------------------------------------------------------------
 * One day, we’ll perhaps be able to simplify this with
   ‘hanging-punctuation: first’.
--------------------------------------------------------------------- */

/* [1], [2] */
blockquote > p:first-child:not(.centre):not(.flush) {
	text-indent: -0.4em;
	}

/* [2] */
blockquote > p[data-1]:first-child:not(.flush),
blockquote > p[data-a]:first-child:not(.flush),
blockquote > p[data-i]:first-child:not(.flush) {
	text-indent: -1.9em;
	}


/* Reader progress bar.
---------------------------------------------------------------------
 * Display the accent and progress bars for screen media only.
 * Both bar DIVs are inserted by JS, so only where JS is enabled.
 * The dynamic value of --progressPercent is calculated by the JS.
 * The bar colours maintain WCAG 2.2 Level AA contrast with the page
   background.
--------------------------------------------------------------------- */

@media screen {

	#progress-bar,
	#accent-bar,
	#accent-bar-active {
		z-index:          10;
		position:         fixed;
		top:              0;
		left:             0;
		width:            100%;
		height:           6px;
		background-color: #EB3425;
		}

	#progress-bar {
		z-index:          20;
		width:            var(--progressPercent);
		}

	#accent-bar-active {
		background-color: #DDBBBB;
		}

} /* Close the @media rule. */


/* Adjustments for printing.                                       =4
=====================================================================
 * Reset the body text size and colour.
 * Shrink the headings in the title region so as to occupy less space
   on the printed page.
 * Prevent headings being orphaned from the text that follows.
 * Prevent display of ‘print’ button (created by JS).
 * Remove background colour and vertical padding from blockquotes,
   and add a border as a marker of the margin position instead.
 * Restore vertical spacing between consecutive blockquotes.
 * Prevent printing of borders on:
   - elements with TITLE attributes;
   - blockquotes with a DATA-HAS-TABLE attribute. One day, we’ll be
     able to do blockquote:has(table) and we can find and remove the
     attributes from the HTML.
 * Remove colour, overlines and underlines from link text.
===================================================================== */

@media print {

	body {
		font-size: 100%;
		color:     #000000;
		}

	header {
		font-size: calc(1em * var(--factor-01));
		}

	h1, h2, h3, h4, h5, h6, figure, img {
	/*	Try both old CSS2 & new CSS3 properties. You never know - one
		day, all browsers might actually respect these declarations! */
		page-break-inside: avoid;
		break-inside:      avoid-page;
		page-break-after:  avoid;
		break-after:       avoid-page;
		}

	button {
		display: none;
		}

	blockquote {
		padding-top:           0;
		padding-bottom:        0;
		border-left: 1px solid #A8A8A8;
		background-color:      #FFFFFF;
		}

	blockquote + blockquote {
		padding-top: 2em;
		}

	[title],
	[data-has-table] {
		border: 0;
		}

	a:link, a:visited {
		text-decoration: none;
		color:           inherit;
		}

} /* Close the @media rule. */

} /* Close the @supports rule. */


/* And finally...
=====================================================================
 * Web Design is 95% Typography:
   https://ia.net/topics/the-web-is-all-about-typography-period
===================================================================== */