/*
Based on:
CSS Reset by Eric Meyer - Released under Public Domain
http://meyerweb.com/eric/tools/css/reset/
with HTML 5 elements added
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } /* removed font-size:100% to enable flexible font-size */
body  { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; } /* remember to set this! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
*, *:before, *:after { box-sizing: border-box; }
/*

Versions:
- original layout: 2010.
- mobile-first adjustments: June 2018.
- adapted to include grid-based layout & HTML 5 elements: June 2019.
- tweaked code (added variables and other new-ish stuff): September 2024.
- tweaked design: June 2025.

Begins with universal styles, applicable to all visual browsers and to devices of all screen sizes:
- basic one-column floaty layout for non-grid and non-flexbox browsers;
- mobile-friendly;
- max-width: 750px for legibility.

Followed by:
- flex 'n' grid alternative mobile-friendly one-column layout;
- modern features (e.g. variables) with acceptable fall-backs for old browsers;
- grid-based two- and three-column versions for wider screens;
- print styles.

*/




/* ===============
   1 :
   fundamental stuff
   =============== */

html { height: 100%; text-align: center; width: 100%;
    --a-link-colour: #760808; /* red */
    --a-hover-colour: #0442f4; /* medium blue */
    --background-colour-box: #f4f6f9; /* very pale blue (images, boxes, blockquotes) */
    --background-colour-box-alt: #fdf9f4; /* very pale yellow (not currently in use) */
    --background-colour-main: #fbf7f7; /* very pale pink */
    --border-colour: #9aa7c6; /* pale blue : blockquote & box */
    --focus-colour: yellow;
    --heading-colour: #1c336a; /* dull dark blue */
    --heading-font-family: "latinia", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif;
    --highlight-colour:  #fff; /* white */
    --text-colour: #1d1a1a; /* very dark brown */
    --theme-colour: #e13434; /* bright red */
    --theme-colour-darker: #b22929; /* medium red : nav a background in wider layouts */
    --theme-colour-darkest: #7a1c1c; /* dark red : header gradient & 'no' border */
    }

@-ms-viewport { width: device-width; } /* IE10 hack */
@viewport { width: device-width; zoom: 1; } /* to replace HTML meta tag in due course */
@font-face {
    font-family: "latinia";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/latinia.eot"); /* eot: 21.3 kB; */
    src: local("Latinia"), local("Latinia Regular"), local("Latinia-Regular"), local("Latinia-Regular-webfont"),
         url("fonts/latinia.eot?#iefix") format("embedded-opentype"),
         url("fonts/latinia.woff") format("woff"), /* woff: 20.1 kB; */
         url("fonts/latinia.ttf") format("truetype"), /* ttf: 36.4 kB; */
         url("fonts/latinia.svg#Latinia") format("svg"); /* svg: 60.8 kB */
    }




/* ===============================================
   2 :
   basic styles:
   links, headings, paragraphs, lists, images, etc
   =============================================== */

/* for old browsers that don't recognise variables and other new-ish CSS features;
   will look presentable even if variables & colour scheme change later;
   uses #000 for text colour */
body  { background: #fff; background: silver; color: #000; font-family: system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; font-size: 100%; line-height: 1.7; text-align: left; width: 100%; }
#header-inner  { background: #e13434; float: left; width: 100%; }
.container  { clear: both; margin: 0 auto; max-width: 750px; padding: 0 3%; }
.sitename-p  { background: #e13434; color: #1c336a; font-family: "latinia", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; line-height: 1.2; margin: 0; }
a:link  { color: #760808; text-decoration: underline; }
a:hover  { border-bottom: 2px solid #0442f4; color: #0442f4; }
a:focus  { background: yellow; }
h1, h2, h3, h4  { color: #1c336a; font-family: "latinia", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; }
blockquote  { background: #f4f6f9; border-left: 2px solid #9aa7c6; }
.box, .box-alt  { background: #f4f6f9; border: 1px solid #9aa7c6; }
img  { border: 1px solid #9aa7c6; }
.nav-a,:link .nav-a:visited  { background: #760808; border: 1px solid #760808; }
.nav-a:hover  { border: 1px solid  #0442f4; color: #0442f4; }
.nav-a:focus  { background: yellow; }
.nav-a[aria-current]:link, .nav-a[aria-current]:visited, .nav-a[aria-current]:hover, .nav-a[aria-current]:focus, .nav-a[aria-current]:active  { background: #fff; border: 1px solid #000; color: #000; }
.readmore-a:link  { background: var(--highlight-colour); border: 2px solid #760808; color: #000; }
.readmore-a:hover  { background: #760808; border: 2px solid #760808; }
.readmore-a:focus  { background: yellow; }

/* for newer browsers */
body  { background: var(--background-colour-main); color: var(--text-colour); font-size: calc(15px + 0.390625vw); } /* font-size tip: https://matthewjamestaylor.com/responsive-font-size */

/* links */
a:link  { color: var(--a-link-colour); text-decoration: underline solid var(--a-link-colour) 1px; text-underline-offset: 0.15em; word-break: break-word; }
a:visited  { color: var(--a-link-colour); text-decoration: underline solid var(--text-colour); }
a:hover { background: var(--highlight-colour); border-bottom: 2px solid var(--a-hover-colour); border-top: 1px dotted var(--a-hover-colour); color: var(--a-hover-colour); text-decoration: none; }
a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid #000; outline-offset: 0.25rem; }
a:focus-visible { outline: 6px double black; z-index: 100; } /* keyboard focus (see https://www.sarasoueidan.com/blog/focus-indicators/) */
a:active  { color: var(--a-hover-colour); }

/* headings (thanks to https://royalfig.github.io/fluid-typography-calculator/) */
h1, h2, h3, h4  { color: var(--heading-colour); font-family: var(--heading-font-family); font-weight: normal; line-height: 1.35; margin: 1.2em 0 0 0; }
h1  { font-size: 2.4rem; font-size: clamp(2.4rem, 2.1599999999999997rem + 1.2000000000000002vw, 3.6rem); margin: 0.8em 0 0 0; }
h2  { font-size: 1.8rem; font-size: clamp(1.8rem, 1.6600000000000001rem + 0.7vw, 2.5rem); }
#related-h2  { border-top: 1px solid var(--heading-colour); margin-top: 1.5em; padding: 1em 0 0 0; }
h1 + h2, .box > h2, .box-alt > h2  { margin-top: 0.8em; }
h3  { font-size: 1.4rem; font-size: clamp(1.4rem, 1.3199999999999998rem + 0.4000000000000002vw, 1.8rem); }
h4  { font-size: 1.2rem; font-size: clamp(1.2rem, 1.14rem + 0.30000000000000004vw, 1.5rem); }

/* paragraphs and lists (hyphenation from https://clagnut.com/blog/2395) */
p  { hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; margin: 0.8em 0 0 0; }
ul  { list-style: disc; margin: 0.5em 0 0 1.5rem; }
ol  { list-style: decimal; margin: 0.5em 0 0 2rem; }
li  { line-height: 1.5; padding: 0.3em 0; }
li::marker  { color: var(--heading-colour); }
.sub-ul li::marker { color: var(--theme-colour); }

/* minor elements */
strong, b  { font-weight: bold; }
cite, em, i, span[lang="de"], span[lang="es"], span[lang="fr"], span[lang="it"], span[lang="la"] { font-style: italic; }
abbr  { border-bottom: 1px dotted var(--text-colour); cursor: help; speak: spell-out; text-decoration: none; }
blockquote  { background: var(--background-colour-box); border-left: 2px solid var(--border-colour); margin: 1em 0 0.5em 0; padding: 0.2em 0.5em 0.7em 1em; }
.box, .box-alt  { background: var(--background-colour-box); border-bottom: 1px solid var(--border-colour); border-top: 1px solid var(--border-colour); float: left; margin: 2em 0 1em 0; padding: 0 1em 1em 1em; }

/* figures and images (not currently required) */
img  { background: var(--background-colour-box); border: 1px solid var(--border-colour); float: right; height: auto; margin: 1em 0 1em 1em; max-width: 100%; padding: 0.3em; }
figure  { float: left; max-width: 100%; width: 100%; }
figcaption { color: var(--heading-colour); line-height: 1.4; margin: 0.5em 0 0 0; }
figure img  { margin: 1em 0 0 0; }




/* ========================================
   3 :
   basic component styles:
   skipnav, header, navigation, footer, etc
   ======================================== */

/* sitename: banner */
.sitename-p  { background: var(--theme-colour); color: var(--highlight-colour); font: normal 2em/1.5 var(--heading-font-family); margin: 0; text-align: center; text-transform: lowercase; }
#sitename-a  { color: var(--highlight-colour); text-decoration: none; }
#sitename-a:hover  { background: transparent; border: none; color: var(--focus-colour); text-decoration: underline; }
#sitename-a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid var(--highlight-colour); }

/*  skipnav link */
#skipnav-p  { background: var(--theme-colour); border-top: 1px solid var(--highlight-colour); margin: 0; text-align: center; }
#skipnav-a:link, #skipnav-a:visited  { color: var(--highlight-colour); padding: 0.2em 0.5em; text-decoration: none; }
#skipnav-a:hover  { background: var(--background-colour-box); border-bottom: none; color: var(--a-hover-colour); text-decoration: underline; }
#skipnav-a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid var(--highlight-colour); }

/* category list */
#nav-ul  { border-top: 2px dashed var(--theme-colour); float: left; list-style: none; margin: 2em 0 1em 0; padding: 1em 0 0 0; max-width: 750px; width: 100%; }
.nav-li  { float: left; width: 100%; }
.nav-a:link, .nav-a:visited  { background: var(--a-link-colour); border: 1px solid var(--a-link-colour); color: var(--highlight-colour); display: block; float: left; padding: 0.3em 5%; text-decoration: none; width: 100%; }
.nav-a:hover  { background: var(--highlight-colour); border: 1px solid  var(--a-hover-colour); color: var(--a-hover-colour); text-decoration: underline; }
.nav-a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid #000; }
.nav-a:focus-visible, .nav-a:active  { box-shadow: none; }
.nav-a[aria-current]:link, .nav-a[aria-current]:visited, .nav-a[aria-current]:hover, .nav-a[aria-current]:focus, .nav-a[aria-current]:active  { background: var(--background-colour-main); border: 1px solid var(--text-colour); color: var(--text-colour); cursor: default; text-decoration: none; }

/* footer: privacy statement, top-of-the-page link, and links to article list & site map pages */
footer  { padding: 0 0 1.5em 0; }
#gotop-p  { border-top: 2px solid var(--theme-colour); float: left; margin: 1em 0 0 0; padding: 1em 0 0 0; width: 100%; }
#gotop-a:link, #gotop-a:visited  { background: var(--a-link-colour); border: 2px solid var(--a-link-colour); color: var(--highlight-colour); float: left; padding: 0.1em 0.5em; text-decoration: none; }
#gotop-a:hover  { background: var(--highlight-colour); border: 2px solid var(--a-hover-colour); color: var(--a-hover-colour); text-decoration: underline; }
#gotop-a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid 000; }
#privacy-p  { color: var(--heading-colour); line-height: 1.5; margin: 1.5em 0 0 0; }
.footer-a[aria-current]:link, .footer-a[aria-current]:visited, .footer-a[aria-current]:hover, .footer-a[aria-current]:focus, .footer-a[aria-current]:active  { background: transparent; border: none; color: var(--text-colour); cursor: default; text-decoration: none; }

/* read-more links (for excerpts on the home page and maybe search results in due course) */
.readmore-a:link  { background: var(--highlight-colour); border: 2px solid var(--a-link-colour); color: var(--text-colour); display: inline-block; font-size: 110%; font-style: italic; line-height: 1.35; margin: 0.5em 0 1em 0; padding: 0.3em 0.6em; text-decoration: none; width: auto; }
.readmore-a:visited  { background: var(--background-colour-main); border: 2px solid var(--text-colour); color: var(--text-colour); }
.readmore-a:hover  { background: var(--a-link-colour); border: 2px solid var(--a-link-colour); color: var(--highlight-colour); }
.readmore-a:focus  { background: var(--focus-colour); color: var(--text-colour); }
.readmore-a:active  { background: var(--focus-colour); }
.arrows  { font-weight: bold; padding: 0 0.1em 0 0.3em; }




/* =============
   MEDIA QUERIES
   ============= */




@supports (display: grid) { /* to weed out older browsers */




/* ======================
   4 :
   over-ride floaty stuff
   ====================== */

@media all and (min-width: 250px)  {

body, #header-inner, .container, #nav-ul, .nav-li, main, #nav-related, footer  { display: flex; flex-direction: column; }
header  { display: flex; }
figure  { display: flex; flex-direction: column; margin: 0.5em 0 1em 0; } /* full width by default; may need to change this for wider screens, depending on size of images used */
#gotop-p  { display: flex; }

} /* end of basic flex styles */




/* ============================
   5 :
   one column, max-width: 750px
   ============================ */

@media all and (min-width: 450px)  {

html { scrollbar-color: var(--theme-colour) lightgrey; }
::-webkit-scrollbar { background: lightgrey; }
::-webkit-scrollbar-thumb  { background: var(--theme-colour); }

/* header area */
header  { background: var(--theme-colour); background: linear-gradient(var(--theme-colour), var(--theme-colour-darkest)); border-top: 1px solid var(--theme-colour-darkest);
    display: grid;
    grid-template-columns: 1fr minmax(400px, 750px) 1fr;
    grid-template-rows: auto;
    grid-template-areas: ".  header-inner .";
    }
#header-inner  { align-items: center; background: none; flex-direction: row; grid-area: header-inner; justify-content: space-between; padding: 0 1rem; width: 100%; }
.sitename-p  { background: transparent; max-width: 50%; text-align: left; }
#no  { background: var(--theme-colour); border: 1px solid var(--theme-colour-darkest); border-radius: 3px; padding: 0 0.25em 0 0.3em; }
#sitename-a  { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); }
#skipnav-p  { background: transparent; border: 0; max-width: 50%; text-align: right; }

/* main area, nav, etc */
.container  { padding: 0 1rem; }
img  { border-radius: 3px; }
.nav-a  { border-radius: 3px; }
.box, .box-alt  { border: 1px solid var(--border-colour); border-radius: 5px; display: inline; float: left; font-size: 95%; margin: 1.3em 1.5em 0.5em 0; width: 50%; }
.box-alt  { float: right; margin: 1.3em 0 0.5em 1.5em; }
.readmore-a:link  { border-radius: 5px; }

/* footer */
#footer-ul  { display: flex; flex-flow: row wrap; list-style: none; margin: 1em 0 0 0; }
.footer-li  { padding: 0 1em; }
#footer-articles-li  { border-right: 2px dotted var(--heading-colour); padding: 0 1em 0 0; }

} /* end of min-width: 450px styles */




/* ============================
   6 :
   one column, min-width: 700px
   ============================ */

@media all and (min-width: 700px)  {
h1  { letter-spacing: 0.025em; margin: 1em 0 0 0; padding: 0 0 0.3em 0; text-wrap: balance; }
p  { text-wrap: pretty; }
} /* end of min-width: 700px styles */




/* =================================================================
   7 :
   first two-column layout
   970px wide - should suit older 1024x600 laptops & monitors
   (as with all of these, 50px is added to accommodate a scroll bar)
   ================================================================= */

@media all and (min-width: 1020px)  {

/* header area */
header  { border-bottom: 5px solid var(--theme-colour); grid-area: header; grid-template-columns: 1fr 970px 1fr; }
#header-inner  { padding: 0.2em 0; }
.sitename-p  { max-width: 45%; }
#skipnav-p  { max-width: 45%; }
#skipnav-a:link, #skipnav:visited, #skipnav-a:hover  { background: transparent; border: 1px transparent; color: transparent; } /* doesn't need to be visible in two-column layout */
#skipnav-a:focus  { background: var(--focus-colour); color: #000; outline: 3px solid var(--highlight-colour); } /* to reinstate visibility in :focus state */

/* main area */
.container  { margin: 0; padding: 0; max-width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr     640px    30px    300px     1fr;
    grid-template-areas:  "header  header   header  header    header"
                          ".       main     .       nav-cats  ."
                          ".       related  .       .         ."
                          ".       footer   footer  footer    .";
    } /* 'related' is ignored on non-article pages */
main  { grid-area: main; margin: 0 0 2rem 0; width: 100%; }

/* naviagation */
#nav-categories  { grid-area: nav-cats; }
#nav-related  { grid-area: related; }
#nav-ul  { background: var(--theme-colour); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; border-top: none; align-items: center; margin: 0; max-width: 100%; padding: 0 0 0.5em 0; width: 100%; }
.nav-li  { width: 95%; }
.nav-a:link, .nav-a:visited  { background: var(--theme-colour-darker); border: 1px solid var(--highlight-colour); border-radius: 5px; }
.nav-a:hover  { background: var(--highlight-colour); border: 1px solid var(--highlight-colour); }
.nav-a:focus  { background: var(--focus-colour); outline: 3px solid var(--highlight-colour); text-decoration: underline; }
.nav-a[aria-current]:link, .nav-a[aria-current]:visited, .nav-a[aria-current]:hover, .nav-a[aria-current]:focus, .nav-a[aria-current]:active  { background: var(--background-colour-main); border: 1px solid var(--highlight-colour); color: var(--heading-colour); text-decoration: none; }

/* footer */
footer  { border-bottom: 5px solid var(--theme-colour); grid-area: footer; }
#gotop-p  { border-top: 5px solid var(--theme-colour); }
#gotop-a:link  { border-radius: 5px; padding: 0.2em 1em; }

} /* end of first two-column (min-width: 1020px) layout */




/* ==============================
   8 :
   wider layout : 1250px
   as wide as the minor pages get
   ============================== */

@media all and (min-width: 1300px)  {

header  { grid-template-columns: 1fr 1250px 1fr; }
.sitename-p  { width: 1200px; }
.container  { grid-template-columns: 1fr 780px 90px 380px 1fr; }
.nav-li  { width: 92.5%; }
.box, .box-alt  { padding: 0 1.5em 1em 1.5em; }

} /* end of min-width: 1250px layout */




/* =====================================
   9 :
   widest layout: 1800px
   (for HD 1920x1080 monitors)
   3-column pages only: index & articles
   ===================================== */

@media all and (min-width: 1850px)  {

#header-alt  { grid-template-columns: 1fr 1800px 1fr; }
#sitename-alt  { width: 1800px; }
#container-alt  { grid-template-columns: 1fr 1320px 100px 380px 1fr; }
article  { grid-area: article; }
h1  { grid-area: h1; }
h2  { grid-area: h2; }
#no-magic  { grid-area: no-magic; }
#latest-01  { grid-area: latest-01; }
#latest-02  { grid-area: latest-02; }
#related-h2  { border-top: 0; margin: 0.7em 0 0 0; }
#related-articles-ul  { border-right: 2px dashed var(--theme-colour); padding-right: 40px; }
/* home page */
#main-index  {
    display: grid;
    grid-template-columns:  610px     100px  610px;
    grid-template-areas:   "h1        h1     h1"
                           "no-magic  .      h2"
                           "no-magic  .      latest-01"
                           ".         .      latest-02";
    }
/* articles pages */
#main-articles  {
    display: grid;
    grid-template-columns:  420px    100px  800px;
    grid-template-areas:   "related  .      article";
    }

} /* end of mind-width: 1800px layout */




} /* end of @supports (display: grid) */




/* ============
   10 :
   print layout
   ============ */

@media print  {

@page  { margin: 1.5cm 2cm; }
body, header, .container  { background: var(--highlight-colour); border: none; color: #000; display: flex; flex-direction: column; font: 12pt/1.7 georgia, serif; text-align: justify; width: 100%; }
.container, #container-alt  {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
        "main"
        "related";
    }
h1, h2, #related-h2, h3, h4, h5, h6 { border: none; color: #000; font-family: georgia, serif; font-weight: bold; page-break-after: avoid; text-align: left; }
h1  { font-size: 20pt; margin: 0.25cm 0 0 0; padding: 0; }
h2  { font-size: 18pt; margin: 0.5cm 0 0 0; }
#related-h2  { border-top: 1px dotted #000; margin: 0.5cm 0 0 0; padding: 0.5cm 0 0 0; }
h3  { font-size: 14pt; margin: 0.5cm 0 0 0; }
h4  { font-size: 12pt; }
h5  { font-size: 10pt; }
h6  { font-size: 8pt; }
p  { orphans: 2; widows: 2; }
.sitename-p  { border-bottom: 1px dotted #000; color: #000; font: bold 15pt/1.4 georgia, serif; margin: 0 0 0.5em 0; padding: 1em 0; page-break-after: avoid; width: 100%; }
#sitename-a  { color: #000; display: inline; text-decoration: none; text-shadow: none; }
#no  { background: none; border: none; padding: 0; }
a:link, a:visited  { border: none; color: #000; text-decoration: none; }
li::marker, .sub-ul li::marker  { color: #000; }
a.articles-a[href]::after, a.url-print::after, a.readmore-a::after { content: " (" attr(href) ")"; }
a.url-no-print[href]::after  { content: ""; } /* just in case any exceptions turn up */
.box, .box-alt  { background: var(--highlight-colour); border: none; border-bottom: 1px dotted #000; border-top: 1px dotted #000; border-radius: 0; float: right; font-size: 12pt; margin: 1em 0 1em 2rem; padding: 1em 0; }
.readmore-a:link, .readmore-a:visited  { background: var(--highlight-colour); border: none; font-size: 12pt; font-style: normal; padding: 0; }
.arrows  { display: none; }
blockquote  { background: var(--highlight-colour); border-left: 2px solid #000; }
img  { border: 1px solid #000; box-decoration-break: clone; float: left; margin: 1em 1em 1em 0; page-break-inside: avoid; }
figcaption  { color: #000; }
abbr { border: none; }
abbr[title]::after {  content: " [" attr(title) "]"; }
#skipnav-p, #nav-ul, footer  { display: none; }

} /* end of print styles */


/*
==========
nicht mehr
==========
*/