/* written by Kroc Camen, no ai */

@font-face {            font-family: "Archeologicaps";
                        font-weight: normal; font-style: normal;
                        src: url("fonts/Archeologicaps.ttf")   format(truetype),
                             url("fonts/Archeologicaps.woff")  format(woff)
                             url("fonts/Archeologicaps.woff2") format(woff2)
                        ;
}
@font-face {            font-family: "CapitalisTypOasis";
                        font-weight: normal; font-style: normal;
                        src: url("fonts/CapitalisTypOasis.ttf")   format(truetype),
                             url("fonts/CapitalisTypOasis.woff2") format(woff2)
                             url("fonts/CapitalisTypOasis.woff")  format(woff)
                        ;
}

:root                   /* shamelessly taken from: https://modernfontstacks.com */
{                       --system-ui: system-ui, sans-serif;
                        --transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
                        --old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
                        --humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
                        --geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
                        --classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
                        --neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
                        --slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
                        --antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro',
                            Georgia, serif;
                        --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
                        --handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

                        --font-subtitle: "Liberation Serif", Palatino, Domitian, Georgia, serif;
                        --font-engrave: -2px -2px #0004;

                        /* "laser print" -- black on white */
                        --theme-lt-1-bg: #eeeded;
                        --theme-lt-1-mg: #201c1c;
                        --theme-lt-1-fg: #201c1c;
                        --theme-lt-1-lk: #1c1ced;
                        --theme-lt-1-vi: #781c88;
                        /* "extrovert" -- pink on pink */
                        --theme-lt-2-bg: #ffd5ee;
                        --theme-lt-2-mg: #ff6ec6;
                        --theme-lt-2-fg: #8a206b;
                        --theme-lt-2-lk: #de409f;
                        --theme-lt-2-vi: #fd6ac2;
                        /* "radiant" -- yellow */
                        --theme-lt-3-bg: #f0e2c9;
                        --theme-lt-3-mg: #817566;
                        --theme-lt-3-fg: #655442;
                        --theme-lt-3-lk: #cf6800;
                        --theme-lt-3-vi: #d8941f;
                        /* "HiCON" -- pure white on black (+neon) */
                        --theme-dk-1-bg: black;
                        --theme-dk-1-mg: white;
                        --theme-dk-1-fg: white;
                        --theme-dk-1-lk: lime;
                        --theme-dk-1-vi: fuchsia;
                        /* "melancholy" -- blue/grey dark theme */
                        --theme-dk-2-bg: #4a4a4d;
                        --theme-dk-2-mg: #7a7a7f;
                        --theme-dk-2-fg: #aaaab2;
                        --theme-dk-2-lk: #009ddc;
                        --theme-dk-2-vi: #8964c5;
                        /* "beclog" -- brown dark theme */
                        --theme-dk-3-bg: #423b30;
                        --theme-dk-3-mg: #b0a596;
                        --theme-dk-3-fg: #f8ecdb;
                        --theme-dk-3-lk: #d8941f;
                        --theme-dk-3-vi: #cf6800;
}

html                    { /* map the default theme to theme in use;
                          /  this mapping is what gets overridden */
                          --theme-bg: var(--theme-dk-2-bg); /* <= "background" */
                          --theme-mg: var(--theme-dk-2-mg); /* <= "midground" */
                          --theme-fg: var(--theme-dk-2-fg); /* <= "foreground", i.e. font colour */
                          --theme-lk: var(--theme-dk-2-lk); /* <= "link" colour */
                          --theme-vi: var(--theme-dk-2-vi); /* <= "visited" link colour */

                          /* at normal system scale 12pt will equal 16px, ergo from here on 1rem == 16px,
                          /  and this size is chosen because the rem number works for many pixel sizes:
                          /  .125rem=2px, .25rem=4px, .5rem=8px, 1rem=16px, 1.25rem=20px, 1.5rem=24px */
                          font: normal 12pt/1.5em --system-ui; color: var(--theme-fg);
                          background-color: var(--theme-bg); }

body                    { /* relative position is required to make the controls align against
                          / the right-edge of the content rather than the screen (see below) */
                          position: relative; box-sizing: border-box; border: 0;
                          width: 100%; max-width: 50rem; margin: 0 auto; padding: 0 5rem 0;
                          /* 12pt is too small for us but at the same time we still want to keep the 1rem = 16px metric,
                          /  which is why we override the previous font-size here; this won't change the value of 1rem! */
                          font-size: 15pt; }

a                       { color: var(--theme-lk);
                          text-decoration: none; }
a:hover, a:visited      { color: var(--theme-vi); }

/* === form ============================================================================================================== */
/* NB: `form>fieldset` are the text control button-groups,
/      `#theme>fieldset` is the themes button-group,
/      `label` is each button within */ 

legend, input           { /* hide, but don't remove the legends so that they remain accessible to screen readers */
                          /* also, use the labels to activate the buttons rather than worrying about styling controls */
                          position: absolute; visibility: hidden; }

form                    { /* line all the controls up vertically */
                          display: flex; flex-flow: column nowrap; gap: 1.25rem; }

form>fieldset, button   { /* outline the theme button and text control button-groups */
                          margin: 0; padding: 0;
                          border: 1px solid var(--theme-mg); border-radius: .5rem;
                          background: var(--theme-bg); }

form>fieldset>label,    /* shared style of the button interiors */
button                  { display: block; box-sizing: border-box; overflow: hidden;
                          position: relative; width: 2.5rem; height: 2.5rem;
                          /* line-height equal to height centres vertical-align of text */
                          line-height: 2.5rem; font-size: 1rem; text-align: center;
                          color: var(--theme-mg); cursor: pointer; }
button                  { /* for <button> elements, there's not a wrapping fieldset,
                          /  so allow its border to sit outside the width to match */
                          box-sizing: content-box; }
button:hover            { /* hover state for <button> */
                          color: var(--theme-fg); border-color: var(--theme-fg); }
#theme-open             { /* make the sun emoji bigger for the theme button */ 
                          font-size: 1.75rem; }

form>fieldset           /* hover / checked effects for button-groups */
{                       
    label:hover         { color: var(--theme-fg); }
    label:has( :checked )
                        { color: var(--theme-fg); }
    label:has( :checked ):hover
                        { color: var(--theme-fg); }
}

/* layout controls for the "large" view:
*/
@media screen and (width >= 50rem) and (height >= 32rem) {
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* position the buttons on the right: using `right` with `position: fixed` will always attach to the right of the screen,
/  not the container, so we use a `position: absolute` container to move the form to the right, relative to the body,
/  with a `position: fixed` inner element without left/right properties to fix it above everything where it stands */

body>header             { position: absolute; right: 0;
                          /* when the window reaches the minimum width for the buttons on the right,
                          /  ensure they don't bump against the screen edge itself */
                          width: 2.5rem; padding-right: 1.25rem;
                          font-family: var(--system-ui); }
form                    { position: fixed; top: 1.25rem; }

form>fieldset>label:nth-of-type(1n+2)
                        { /* line between buttons in button-group */
                          border-top: 1px solid var(--theme-mg); }

    /* for touch screens, align the controls to the bottom
    /  of the screen rather than the top!
    */
    @media screen and (pointer: coarse) {
    /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

    form                { top: auto; bottom: 1.25rem;
                          /* flip the button order so that they run upwards! */
                          flex-direction: column-reverse; }
    }

/* layout controls for the "small" view: 
/
/  the minimum width for the full-size design is 50rem (as set on body), anything narrower and we're in portrait territory
/  or super scaled up. the height of the control strip, with spacing, is roughly 32rem so if the screen is not tall enough
/  to display the control strip without clipping we also switch to the small-screen view. this is typically a smartphone
/  in landscape as they have the necessary width but not enough height
*/
} @media screen and ((width < 50rem) or (height < 32rem)) {
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body                    { /* always fill screen */
                          width: auto; max-width: 100vw;
                          /* text layout is 10% left gutter, 80% text, 10% right gutter */
                          padding: 0 10vw; }

/* for smartphone, place the controls at the bottom of the screen in the thumb-zone */

body>header             { position: absolute; width: 100vw; inset: auto 0 0 0;
                          z-index: 1; }
form                    { position: fixed; width: 31rem; flex-direction: row-reverse;
                          inset: auto .5rem .5rem auto; }

form>fieldset           { /* align buttons in the button-groups lengthwise */
                          display: flex; flex-direction: row;}

form>fieldset>label:nth-of-type(1n+2)
                        { /* line between buttons in button-group */
                          border-left: 1px solid var(--theme-mg); }

form>fieldset, button   { /*box-shadow: 0 0 15px var(--theme-bg);*/ }

.book-title             { font-size: 3rem !important; }

}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* create the ragged/justify icon: */

label[for="text-align-justify"]::before
                        { /* WARNING: zero-width spaces between these em-dashes!
                          /  this forces line-breaks to create a hamburger */
                          content: "—​–​—​–​—"; display: inline-block;
                          width: 2ch; vertical-align: -.35rem; text-align: left;
                          line-height: 2.5pt; }

label[for="text-align-justify"]:has( :checked )::before
                        { /* WARNING: zero-width spaces between these em-dashes!
                          /  this forces line-breaks to create a hamburger */
                          content: "—​—​—​—​—"; }

/* create the "text size" icons: */

label[for^="font-size"]::before
                        { display: inline-block; }
label[for="font-size-small"]::before
                        { content: "S"; }
label[for="font-size-medium"]::before
                        { content: "M"; }
label[for="font-size-large"]::before
                        { content: "L"; }

/* create the "line spacing" icons: */

label[for^="line-height"]::before
                        { /* WARNING: zero-width spaces between these em-dashes!
                          /  this forces line-breaks to create a hamburger */
                          content: "—​—​—"; display: inline-block;
                          width: 2ch; vertical-align: -75%; }
label[for="line-height-100"]::before
                        { line-height: 3.2pt; }
label[for="line-height-125"]::before
                        { line-height: 4.5pt; }
label[for="line-height-150"]::before
                        { line-height: 5.5pt; }

/* --- theme dialog ------------------------------------------------------------------------------------------------------ */

#theme
{                       margin: auto; padding: 2rem;
                        border: 2px solid var(--theme-mg); border-radius: 1.5rem;
                        background: var(--theme-bg);
                        color: var(--theme-fg);

    fieldset            { display: grid; grid-template-columns: repeat(3, auto);
                          row-gap: 2rem; column-gap: 2rem;
                          margin: 0; padding: 0; border: none; }
    label               { box-sizing: border-box; width: 6rem; height: 6rem;
                          font-size: .875rem; text-align: center; line-height: 6rem;
                          border-radius: 1rem; cursor: pointer; }
    label:has( :checked )
                        { border: 2px solid var(--theme-mg); }

    label[for="theme-lt-1"]
                        { color: var(--theme-lt-1-fg); background-color: var(--theme-lt-1-bg); }
    label[for="theme-lt-2"]
                        { color: var(--theme-lt-2-fg); background-color: var(--theme-lt-2-bg); }
    label[for="theme-lt-3"]
                        { color: var(--theme-lt-3-fg); background-color: var(--theme-lt-3-bg); }
    label[for="theme-dk-1"]
                        { color: var(--theme-dk-1-fg); background-color: var(--theme-dk-1-bg); }
    label[for="theme-dk-2"]
                        { color: var(--theme-dk-2-fg); background-color: var(--theme-dk-2-bg); }
    label[for="theme-dk-3"]
                        { color: var(--theme-dk-3-fg); background-color: var(--theme-dk-3-bg); }
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* apply theme choice: */

html:has( #theme-lt-1:checked )
                        { --theme-bg: var(--theme-lt-1-bg);
                          --theme-mg: var(--theme-lt-1-mg);
                          --theme-fg: var(--theme-lt-1-fg);
                          --theme-lk: var(--theme-lt-1-lk);
                          --theme-vi: var(--theme-lt-1-vi); }
html:has( #theme-lt-2:checked )
                        { --theme-bg: var(--theme-lt-2-bg);
                          --theme-mg: var(--theme-lt-2-mg);
                          --theme-fg: var(--theme-lt-2-fg);
                          --theme-lk: var(--theme-lt-2-lk);
                          --theme-vi: var(--theme-lt-2-vi); }
html:has( #theme-lt-3:checked )
                        { --theme-bg: var(--theme-lt-3-bg);
                          --theme-mg: var(--theme-lt-3-mg);
                          --theme-fg: var(--theme-lt-3-fg);
                          --theme-lk: var(--theme-lt-3-lk);
                          --theme-vi: var(--theme-lt-3-vi); }
html:has( #theme-dk-1:checked )
                        { --theme-bg: var(--theme-dk-1-bg);
                          --theme-mg: var(--theme-dk-1-mg);
                          --theme-fg: var(--theme-dk-1-fg);
                          --theme-lk: var(--theme-dk-1-lk);
                          --theme-vi: var(--theme-dk-1-vi); }
html:has( #theme-dk-2:checked )
                        { --theme-bg: var(--theme-dk-2-bg);
                          --theme-mg: var(--theme-dk-2-mg);
                          --theme-fg: var(--theme-dk-2-fg);
                          --theme-lk: var(--theme-dk-2-lk);
                          --theme-vi: var(--theme-dk-2-vi); }
html:has( #theme-dk-3:checked )
                        { --theme-bg: var(--theme-dk-3-bg);
                          --theme-mg: var(--theme-dk-3-mg);
                          --theme-fg: var(--theme-dk-3-fg);
                          --theme-lk: var(--theme-dk-3-lk);
                          --theme-vi: var(--theme-dk-3-vi); }

/* apply "typeface" choice: */

body:has( #font-face-sans:checked ), label[for="font-face-sans"]
                        { font-family: var(--system-ui); }
body:has( #font-face-serif:checked ), label[for="font-face-serif"]
                        { font-family: var(--didone); }

/* apply "text justification" choice: */

body:has( #text-align-justify:checked )
{                       /* notes on justification / hyphenation:
                        /  https://cloudfour.com/thinks/justified-text-better-than-expected
                        /  to this I've added `text-align-last` as this prevents excess stretching
                        /  on the last line of paragraphs when the text doesn't fill the full line */
    p                   { text-align: justify; text-align-last: start;
                          hyphens: auto; hyphenate-limit-chars: 7;
                          text-wrap: pretty; }
}

/* apply "text size" choice: */

body:has( #font-size-small:checked )
                        { font-size: 12pt; }
body:has( #font-size-medium:checked )
                        { font-size: 15pt; }
body:has( #font-size-large:checked )
                        { font-size: 18pt; }

/* apply "line spacing" choice: */

body:has( #line-height-100:checked )
                        { line-height: 1.5em; }
body:has( #line-height-125:checked )
                        { line-height: 1.75em; }
body:has( #line-height-150:checked )
                        { line-height: 2em; }

/* === common style ====================================================================================================== */

h1, h2, h3,
blockquote, p           { margin: 0; padding: 0 0 .5em; }

h1                      { position: sticky; top: 0;
                          margin: 0 0 1rem 0; padding: .5em 0;
                          border-bottom: 2px solid var(--theme-mg);
                          font-size: 1.5em; letter-spacing: .15em;
                          font-weight: normal; font-variant: small-caps;
                          font-variant-caps: all-small-caps;
                          background-color: var(--theme-bg); }

hr                      { margin: 2em 0 2.5em; padding: 0;
                          border: 1px dashed var(--theme-mg); }

ul, ol                  { margin: 1em 0 1.5em; padding: 0; }
ul                      { list-style-type: square; }
li                      { margin: 0; padding: 0; }
li:last-of-type         /* allow P-spacing between LIs, but remove the last one */
 p:last-of-type         { padding-bottom: 0;  }

/* auto-number paragraphs: */

body                    { counter-reset: para; }

#foreword ~ section     /* do not do any paragraph numbering until the actual chapter content */
{   p                   { counter-increment: para; }

    p::before           { /* increment the paragraph count */
                          content: counter( para ); z-index: -1;
                          /* pull paragraph counter into the left-margin */
                          display: block; width: 3.75rem; position: absolute; left: 0;
                          /* don't copy the font properties from the paragraph! */
                          font: normal .875em/inherit var(--classical-humanist) !important;
                          font-variant-numeric: oldstyle-nums !important;
                          font-family: var(--classical-humanist) !important;
                          color: var(--theme-mg) !important;
                          /* don't get changed by the justify button! */
                          text-align: right; text-align-last: auto; }
}
#afterword p::before,
#afterword ~ section    /* stop the numbering once the main content ends */
 p::before              { display: none !important; }

h1::before              { display: block; width: 4rem; height: 100%; position: absolute;
                          left: -4rem; top: 0; content: ''; /* <-- required to create */
                          background-color: var(--theme-bg); }

/* === book-specific ===================================================================================================== */

h1>strong               { /* used to separate the chapter numeral and name in the ebook */
                          font-weight: normal; }
h1:empty                { /* used to force page-breaks in the ebook */
                          display: none; }

.book-title             { padding-top: 3rem; padding-bottom: .25em;
                          font-family: "Archeologicaps", serif;
                          /* this font is "all caps" in lowercase */
                          text-transform: lowercase; font-size: 4em;
                          letter-spacing: 1pt; }
.book-subtitle          { font-family: var(--font-subtitle); letter-spacing: .325em;
                          font-variant: small-caps; font-variant: all-small-caps;
                          font-size: 1em; }

.book-edition           { font-family: var(--font-subtitle);
                          font-variant: small-caps; font-variant: all-small-caps; }
.book-edition::first-line
                        { font-family: "CapitalisTypOasis", serif;
                          letter-spacing: .6em; }

.book-author            { font-family: "CapitalisTypOasis", serif;
                          /* extra spacing between the C's in "Kroc Camen" */
                          word-spacing: .5em; }

.book-title, .book-subtitle, .book-edition, .book-author
                        { text-align: center; }

.statement              { position: absolute; visibility: hidden; }

.toc li                 { list-style: none; }

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

.centred                { text-align: center; text-align-last: auto; padding: 0 2em; }
.centred p              { /* have to force-undo the justify button! */
                          text-align: center !important; text-align-last: auto !important; }

.small                  { font-size: .875em; }

.gap-before             { margin-top: 2em; }

.gap                    { margin-top: 1em;
                          margin-bottom: 1em; }

.patreon                { font-size: 1.5em;
                          font-variant: small-caps;
                          font-variant: all-small-caps;
                          text-align: center !important;
                          text-align-last: auto !important; }