/* @import url('https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */

:root {
    --font-serif: "Bitstream Charter", Georgia, "Times New Roman", Times, serif;
    --font-sans: "Lato Latin", "Lato", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-symbol: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

    --font-weight-hairline: 100;
    --font-weight-thin:     200;
    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-heavy:    600;
    --font-weight-bold:     700;
    --font-weight-black:    900;

    --font-size-hugge:   36pt;
    --font-size-huge:    24pt;
    --font-size-bigger:  21pt;
    --font-size-big:     18pt;
    --font-size-larger:  16pt;
    --font-size-large:   14pt;
    --font-size-normal:  12pt;
    --font-size-small:   10pt;
    --font-size-smaller: 9pt;
    --font-size-tiny:    8pt;

    --bg: #fdfbf7;
    --surface: #faf4e8; /* #f6f3ed; */
    --border: #f4e6cd;
    --text: #36454f;
    --muted-text: #5b7486;

    --brand: #326750;
    --brand-dark: #145136;
    --brand-darker: #1f2d2d;

    --band: #e3f2ec;
    --band-border: #acd7c5;

    --navbar: #36454f;       /*charcoal*/
    --navbar-border: #b6c4cd;
    --navbar-text:    #f4f7f9;
}

body {
    font-family: var(--font-serif);
    font-size: var(--font-size-normal);
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: subpixel-antialiased;
}
body p {
    font-family: var(--font-serif);
}

.subhead {
    background: var(--surface);
    color: var(--muted-text);

    border-radius: 8px;
    padding: 1em 2em;
    margin-bottom: 1em;

    font-size: var(--font-size-larger);
    font-style: italic;
}
.subhead p {
    padding: 0;
    margin: 0;
}
.center {
    text-align: center;
}
.center-object {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.framed {
    border: 2px solid var(--muted-text);
}

/* header { */
/*     color: var(--text); */
/*     background: var(--bg); */
/* } */

.quarto-title-banner {
    background-color: inherit;
    background: inherit;
}

.quarto-title-banner .quarto-title .title {
    color: var(--brand-dark);
    font-weight: var(--font-weight-bold);
}

#title-block-header {
    background: var(--band);
    border-block: 1px solid var(--band-border);
    padding-bottom: 2em;
    margin-bottom: 0;
}

.quarto-title-meta-heading {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 10%;
}

.quarto-title .quarto-categories .quarto-category {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 10%;
}

.metadata, div.quarto-post .metadata, div.quarto-post .metadata a {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
    letter-spacing: 10%;
}

.listing-description a {
    font-weight: var(--font-weight-normal);
    font-style: italic;
}

.navbar {
    background-color: var(--navbar);
    border-bottom: 1px solid var(--navbar-border);
    color: var(--navbar-text);
    font-family: var(--font-sans);
}
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    color: var(--navbar-text);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    color: var(--brand);
    margin-top: 2em;
    margin-bottom: 0.5em;
}
h1, h2 { color: var(--brand-dark); }

h1 { font-size: var(--font-size-huge); text-align: center; }
h2 { font-size: var(--font-size-big); }
h3 { font-size: var(--font-size-larger); }

h1, h2 { text-wrap: balance; }
h3, h4 {font-style: italic;}


/* Apply 75ch max width for articles, but not for the index page.
   index page contains a Quarto listing */
main.content:not(:has(.quarto-listing)) {
    max-width: 75ch;
    width: 100%;
    justify-self: center;   /* center the grid item within the track */
}

a.navbar-brand, a.nav-link {
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 10%;
    font-size: var(--font-size-small);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--navbar-text);
    text-decoration: none;
    font-weight: var(--font-weight-normal);
}

#navbarCollapse > ul > li.nav-item {
    display: flex;
    align-items: center;
}

/* #navbarCollapse > ul > li.nav-item > a.nav-link { */
/*     display: flex; */
/*     align-items: center; */
/* } */

a.navbar-brand:hover, a.nav-link:hover {
    color: #fff;
}

a {
    color: var(--brand);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

a:hover {
    color: var(--brand-dark);
    text-decoration: none;
}

/* code, pre, */
/* code[class*=language-], pre[class*=language-]{ */
/*     font-family: "Inconsolata", monospace; */
/*     background-color: #eee; */
/*     padding: 0.2em 0.4em; */
/*     border-radius: 4px; */
/* } */

div.sourceCode, pre.sourceCode, .sourceCode {
    background: var(--surface);
    font-size: var(--font-size-smaller);
}

div.sourceCode {
    border: 1px solid var(--border);
    border-radius: 8px;
}

figcaption {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    margin: 1em 2em;
    color: var(--muted-text);
}

table, .table {
    font-size: var(--font-size-small);
    border-bottom: 1.5px solid var(--muted-text);
}

.table>thead {
    border-bottom: 1.5px solid var(--muted-text);
    border-top: 2px solid var(--text);
}

.table tr>td {
    border:none;
}
.table tr {
    border:none;
    border-bottom: 1px solid color-mix(in srgb, var(--muted-text) 25%, transparent);
}
/* .table:last-child { */
/*     border-bottom: none; */
/* } */

summary {
    font-family: var(--font-sans);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
}


/* one-offs */
.max-w-3-5in {
    max-width: 3.5in;
}
.max-w-5-25in {
    max-width: 5.25in
}
.sunburst {
    margin-top: .5em;
    margin-bottom: .5em;
}
.todo {
    color: firebrick;
    border: 1px solid;
    padding: 1em 2em;
    border-radius: 8px;
    background: color-mix(in srgb, firebrick 10%, transparent);
    font-family: var(--font-sans);
    margin-bottom: 1em;
}
.todo :last-child {
    margin-bottom: 0;
}

/* keep this at the bottom so that it wins in the cascade */

@media print {
    body {
        font-family: var(--font-serif);
        font-size: var(--font-size-normal);
        background-color: var(--bg);
        line-height: 1.6;
        color: #222;
        background: none !important;
    }
    header {
        display: none;
    }
    .sunburst {
        margin-left: 0;
    }
}

/* Turn off syntax highlighting when printing */
@media print {
  /* Remove colored backgrounds and borders on code blocks/inline code */
  pre, code, kbd, samp {
    background: transparent !important;
    color: #222 !important;            /* print in black */
    -webkit-print-color-adjust: exact; /* avoid odd faint colors in some browsers */
    print-color-adjust: exact;
  }

  /* Quarto/Pandoc code blocks use .sourceCode and token spans inside */
  pre.sourceCode,
  pre > code.sourceCode {
    background: transparent !important;
  }

  /* Reset token coloring (keywords, strings, etc.) to inherit */
  pre.sourceCode code span,
  code.sourceCode span {
    color: inherit !important;
    /* font-weight: inherit !important; */
    /* font-style: inherit !important; */
    /* text-decoration: none !important; */
    font-size: 8pt !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Optional: hide copy buttons or gutters if you use them */
  .code-with-copy .code-copy-button { display: none !important; }
  .sourceCode .lineNumbers { color: #222 !important; opacity: 0.5; }
}