:root {
  color-scheme: light;

  --text: #666;
  --text-heading: #666;
  --text-muted: silver;

  --bg-texture: url("/jam/common/images/backgrounds/bg.gif");

  --bg-page: #F9F9F0;
  --bg-page-translucent: #F9F9F0C0;

  --bg-surface: #FFFFFF;
  --bg-surface-muted: #FAFAFA;
  --bg-highlight: #F2F2F0;

  --bg-accent: #FFFFE0;

  --bg-code: var(--bg-accent);

  --border: linen;
  --border-accent: bisque;
  --border-photo: white;
  --border-ruler: white;

  --link-highlight: rgba(255,220,100,.35);
  --focus-ring: #ffcc00;

  --line-height: 1.75em;
  --line-color: rgba(0, 0, 0, 0.06);
}



@media (prefers-color-scheme: dark) {

	:root {

	  color-scheme: dark;

	  --text: #E4DED3;
	  --text-heading: #F5F2EC;
	  --text-muted: #AAA39A;

	  --bg-texture: url();

	  --bg-page: #171614;
	  --bg-page-translucent: rgba(23,22,20,.92);

	  --bg-surface: #23211F;
	  --bg-surface-muted: #2A2826;
	  --bg-highlight: #4A443C;
	  --bg-accent: #463B22;

	  --bg-code: #2E2A21;

	  --border: #625B4F;
	  --border-accent: #544430;
	  --border-photo: #555;
	  --border-ruler: black;

	  --link-highlight: rgba(230,190,80,.25);
	  --focus-ring: #FFD45C;

	  --line-height: 1.75em;
	  --line-color: rgba(230, 190, 80, 0.15);
	}

}

:root {
  --paragwidth: 60ch;
  --hover-brightness: 1.04;
  --hover-contrast: 1.1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;

  overflow-y: scroll;
  scrollbar-gutter: stable;

  background-color: var(--bg-page);
  background-image: var(--bg-texture);
}

body {
  margin: 0;
  min-height: 100vh;

  color: var(--text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem;

  color: var(--text-heading);

  line-height: 1.2;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
blockquote {
  margin: 0;
}

p,
li {
  overflow-wrap: break-word;
}

ul,
ol {
  padding-left: 1.5rem;
}



a {
  color: inherit;
  text-decoration: none;

  background:
    linear-gradient(
      transparent 60%,
      var(--link-highlight) 60%
    );
}

a:hover {
  background: var(--bg-highlight);
}

a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}



button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button.copy-link {
  all: unset;
  cursor: pointer;

  background:
    linear-gradient(
      transparent 60%,
      var(--link-highlight) 60%
    );
}

button.copy-link:hover {
  background: var(--bg-highlight);
}

button.copy-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}



img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}



figure {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 1.5rem;
}

figure picture {
  width: fit-content;
  flex-shrink: 0;
}

figure picture img {
  border: .8rem solid var(--border-photo);
  transition: filter .3s ease;
}

figure picture img:hover {
  filter:
    brightness(var(--hover-brightness))
    contrast(var(--hover-contrast));
}

figure figcaption {
  height: fit-content;
}

figure figcaption ul {
  margin: 0;
  padding: 0;
  width: fit-content;
  list-style: none;
}

figure figcaption li {
  margin-bottom: .2rem;
}



blockquote p {
  border-left: .2rem solid var(--border);
  padding-left: .5rem;
}



.inline-icon {
  display: inline;

  width: 16px;
  height: 16px;

  margin-left: .3em;

  vertical-align: baseline;
}

.bordered-photo {
  border: .6rem solid var(--border-photo);
}

.gradient-boy {
  border-top: 3px solid var(--border);
  border-radius: 100%;
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
  padding: 0.2rem;
}

.gradient-boy-dateline {
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
  padding: 0.2rem;
}

main {
  max-width: var(--paragwidth);
  margin: 0 auto;
}



[hidden] {
  display: none !important;
}



@keyframes appear {

  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}






.outmost {

  background: var(--bg-page);

  border: 1px solid var(--border-accent);
  border-radius: 33px;

  box-sizing: border-box;

  margin: 1rem auto;
  padding: 0 3rem;

  min-height: 100vh;

}


.injected-markdown {

  border-left: 4px solid var(--border-ruler);
  margin: 1rem auto 2rem;

  p {
    color: var(--text);
    font-size: 1.2rem;
    padding-bottom: 1rem;
    code {
      font-size: 1rem;
    }

    /* Subtle underlining */

    line-height: var(--line-height);
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--line-height) - 1px),
        var(--line-color) calc(var(--line-height) - 1px),
        var(--line-color) var(--line-height)
      );
  }

  .no-bottom {
    padding-bottom: 0;
  }
}

#resumen {
  font-size: smaller;
}

.lead-in {
  display: inline-block;
  margin-top: 2rem;
  color: var(--text);
  border-bottom: 3px solid var(--border);
  animation: appear .5s ease-out forwards;
}



.latest-tabular {

  display: inline-flex;
  flex-direction: column;

  gap: 1rem;

  padding: .6rem 0 .6rem 1rem;

  border-radius: 4px;

  h2 {
    margin-top: 2rem;
    text-decoration: underline;
  }

  h3 {
    margin-top: 1rem;
    margin-bottom: .4rem;
  }

}



.series-group {

  margin: 0;

  td {

    padding: 2px .4rem 0 0;

  }

  td:not(:first-child) {

    font-weight: bold;

  }
  
  td .list-subtitle {
    font-weight: normal;
  }

}


.series-header {
}

.section-footer,
.series-footer {

  p {
    margin-top: .7rem;
  }

  .taglist {

    display: flex;
    flex-wrap: wrap;
    gap: .4em;

    margin-bottom: 2rem;

  }

  .taglist span {

    padding: .1em .5em;

    border-radius: .4em;

    background: var(--bg-surface-muted);

    font-variant-caps: small-caps;

  }

}



.list-of-series,
.list-of-section {

  color: var(--text);

  table {

    margin: .5rem 0 2rem;

    border-collapse: separate;
    border-spacing: 8px;

  }

  td {

    padding: .2rem .5rem;

    border-radius: 4px;

    background: var(--bg-accent);

  }

}



.sermon {

  max-width: var(--parag-width);

  margin-inline: auto;
  margin-block: 1.5rem;

  box-sizing: border-box;

  summary {
    margin-top: 2rem;
  }

  .donation-button {
    margin-top: 1rem;
  }

}


.catalog-pages {
  
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem .4rem; /* row-gap column-gap */

  li {
    padding: .2rem .4rem;
    border-radius: 4px;
    background: var(--bg-highlight);
  }
}


.imgtitle {

  display: inline-block;

  margin-left: .4rem;
  margin-bottom: 2rem;

  text-transform: uppercase;

}



.tech-warning {

  margin-top: 2rem;
  margin-left: .3rem;

}


.server-info {

  margin-top: 3rem;
  padding-top: .4rem;

  border-top: 2px dashed var(--border-accent);

}

.section-table-date {
    min-width: 8ch;
}




.book-list {
}


.book-year {
  margin-top: 2rem;
}

.book-type {
  h4 {
    margin-top: 1.2rem;
  }
}

.book-entry {

  margin-top: 1rem;
  margin-left: 1.5rem;

}


.book-data {

  display: inline-block;

  margin: 0;
  padding: 0;

  list-style: none;

  li:first-child span {

    background: var(--bg-accent);

  }

  .author {
    font-style: italic;
  }

}


.book-comment {

  margin: 0;
  padding: 0;

}

@media (min-width: 400px) {

  .outmost {
    width: 85vw;
    max-width: 800px;
  }

}

@media (max-width: 399px) {

  .outmost {
    padding: 0 0.2rem;
    width: 100vw;
  }

}

header {

  display: flex;
  max-width: var(--paragwidth);
  margin: 3rem auto 0;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  picture {
    border: 3px solid var(--border);
    img {
      border-radius: 0px;
    }
  }

  .topmenu {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    a {
      font-size: 1rem;
      font-weight: normal;
      color: var(--text-muted);
    }

    .logobox {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .landingpage-list {

      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: .5rem;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
      }

      a {
        color: var(--text);
        font-weight: 500;
        border-radius: .25rem;
      }
    }
  }
}



footer {

  display: flex;
  justify-content: space-between;
  max-width: var(--paragwidth);
  margin: 5rem auto 2rem;
  color: var(--text-muted);

  .box {
    padding: 1rem 0.2rem 0.2rem 0.2rem;
    text-align: left;
    border-top: 3px solid var(--border);
  }
}




.langtabs {

  display: inline-block;

  input.lang-selector {
    display: none;
  }

  label {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .5rem;
    border: 1px solid var(--border);
  }

}

.panel {
  display: none;
}


#english:checked ~ .english,
#spanish:checked ~ .spanish {

  display: block;

}


#english:checked ~ label[for="english"],
#spanish:checked ~ label[for="spanish"] {

  background: var(--bg-accent);

}



.langtabs-free {

  max-width: 68ch;
  margin: 2rem auto;

  p {
    color: var(--text);
    font-size: 1.2rem;
    padding-bottom: 1rem;
  }

  p:first-child {
    padding-top: 1rem;
  }
}




.favlinks {

  padding: 0 4rem;


  ul {

    list-style: none;

    margin-bottom: 2rem;

  }


  li {

    display: inline;

    margin-right: .3rem;

    padding: .2rem .3rem;

    border-radius: 3px;

    background: var(--bg-surface);

  }


  .separator {

    background: var(--bg-accent);

  }

}



/* ==========================================================
   Code layout
   ========================================================== */

pre.sourceCode,
.sourceCode {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  box-sizing: border-box;
}

pre > code.sourceCode {
  white-space: pre;
  position: relative;
  display: block;
}


pre > code.sourceCode > span {
  display: inline-block;
  line-height: 1.25;
}


pre > code.sourceCode > span:empty {
  height: 1.2em;
}


code.sourceCode > span {
  color: inherit;
  text-decoration: inherit;
}


div.sourceCode {
  margin: 1.2rem 0;
  padding: .3rem .5rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: .25rem;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}


/* Do not disable scrolling on pre */
pre.sourceCode {
  margin: 1.2rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}


@media print {
  pre > code.sourceCode {
    white-space: pre-wrap;
  }

  pre > code.sourceCode > span {
    text-indent: -5em;
    padding-left: 5em;
  }
}

/* ==========================================================
   Syntax colours
   ========================================================== */


/* Alert */

code span.al {
  color: #ff0000;
  font-weight: bold;
}


/* Annotation */

code span.an {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Attribute */

code span.at {

  color: #7d9029;

}


/* BaseN */

code span.bn {

  color: #40a070;

}


/* Built-in */

code span.bu {

  color: #008000;

}


/* Control flow */

code span.cf {

  color: #007020;

  font-weight: bold;

}


/* Character */

code span.ch {

  color: #4070a0;

}


/* Constant */

code span.cn {

  color: #880000;

}


/* Comment */

code span.co {

  color: #60a0b0;

  font-style: italic;

}


/* Comment variable */

code span.cv {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Documentation */

code span.do {

  color: #ba2121;

  font-style: italic;

}


/* Data type */

code span.dt {

  color: #902000;

}


/* Decimal value */

code span.dv {

  color: #40a070;

}


/* Error */

code span.er {

  color: #ff0000;

  font-weight: bold;

}


/* Float */

code span.fl {

  color: #40a070;

}


/* Function */

code span.fu {

  color: #06287e;

}


/* Import */

code span.im {

  color: #008000;

  font-weight: bold;

}


/* Information */

code span.in {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Keyword */

code span.kw {

  color: #007020;

  font-weight: bold;

}


/* Operator */

code span.op {

  color: #666666;

}


/* Other */

code span.ot {

  color: #007020;

}


/* Preprocessor */

code span.pp {

  color: #bc7a00;

}


/* Special character */

code span.sc {

  color: #4070a0;

}


/* Special string */

code span.ss {

  color: #bb6688;

}


/* String */

code span.st {

  color: #4070a0;

}


/* Variable */

code span.va {

  color: #19177c;

}


/* Verbatim */

code span.vs {

  color: #4070a0;

}


/* Warning */

code span.wa {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}








@media (prefers-color-scheme: dark) {


code span.cf,
code span.kw,
code span.ot {

  color: #9cdc8a;

}


code span.fu,
code span.va {

  color: #9dbdff;

}


code span.st,
code span.ch,
code span.sc,
code span.vs {

  color: #d8b4ff;

}


code span.co,
code span.an,
code span.cv,
code span.in,
code span.wa {

  color: #a8a8a8;

}


code span.dt {

  color: #ffcc99;

}


code span.er,
code span.al {

  color: #ff8080;

}


code span.bn,
code span.dv,
code span.fl {

  color: #8fd3a8;

}


}



:root {
    /* Paper */

    /* Yellow */
    --sticky-bg-top-y:      #fff9b8;
    --sticky-bg-bottom-y:   #fff08c;

    /* Pale green */
    --sticky-bg-top-g:      #dff4c7;
    --sticky-bg-bottom-g:   #cfeaa9;

    /* Pale blue */
    --sticky-bg-top-b:      #d9efff;
    --sticky-bg-bottom-b:   #bfdfff;


    /* Texture */
    --sticky-highlight:   rgba(255,255,255,.18);
    --sticky-speckle:     rgba(0,0,0,.03);

    /* Text #4a4332 */
    --sticky-text:        var(--text-muted);

    /* Shadow */
    --sticky-shadow:      rgba(0,0,0,.18);

    /* Geometry */
    --sticky-radius:      3px;
    --sticky-rotation:    0deg;
}

/* Dark mode still looks like paper, just lit less brightly */
[data-theme="dark"] {

    /* Yellow */
    --sticky-bg-top-y:      #d4ca78;
    --sticky-bg-bottom-y:   #bcae52;
    --sticky-fold-y:        #9c8f45;

    /* Pale green */
    --sticky-bg-top-g:      #a8c38a;
    --sticky-bg-bottom-g:   #8fad6d;
    --sticky-fold-g:        #78945a;

    /* Pale blue */
    --sticky-bg-top-b:      #9dbed6;
    --sticky-bg-bottom-b:   #82a8c3;
    --sticky-fold-b:        #6d8fa8;

    --sticky-highlight:   rgba(255,255,255,.05);
    --sticky-speckle:     rgba(0,0,0,.08);

    --sticky-text:        #2a2418;

    --sticky-shadow:      rgba(0,0,0,.45);
    --sticky-fold-shadow: rgba(0,0,0,.35);
}


.sticky-note {
    position: relative;

    width: 11rem;
    min-height: 3rem;
    padding: 0.8rem;

    color: var(--sticky-text);

    line-height: 1.4;

    background:
        radial-gradient(circle at 22% 28%,
            var(--sticky-highlight) 1px,
            transparent 1px) 0 0 / 6px 6px,

        linear-gradient(
            180deg,
            var(--sticky-bg-top),
            var(--sticky-bg-bottom)
        );

    border-radius: 2px 5px 3px 4px / 3px 2px 5px 4px;

    transform: rotate(var(--sticky-rotation));

    box-shadow:
        3px 4px 10px var(--sticky-shadow),
        inset 0 1px 0 rgba(255,255,255,.4);
}


.sticky-note:nth-child(3n) {
    --sticky-rotation: 2deg;
}

.sticky-note:nth-child(3n + 1) {
    --sticky-rotation: -0.4deg;
}

.sticky-note:nth-child(3n + 2) {
    --sticky-rotation: -1deg;
}



.sticky-note.yellow {
    --sticky-bg-top:    var(--sticky-bg-top-y);
    --sticky-bg-bottom: var(--sticky-bg-bottom-y);
    --sticky-fold:      var(--sticky-fold-y);
}

.sticky-note.green {
    --sticky-bg-top:    var(--sticky-bg-top-g);
    --sticky-bg-bottom: var(--sticky-bg-bottom-g);
    --sticky-fold:      var(--sticky-fold-g);
}

.sticky-note.blue {
    --sticky-bg-top:    var(--sticky-bg-top-b);
    --sticky-bg-bottom: var(--sticky-bg-bottom-b);
    --sticky-fold:      var(--sticky-fold-b);
}


/* Fix <a> hover */

.sticky-note {
    position: relative;
    isolation: isolate; /* creates a clean stacking context */
}

/* Keep the note contents above the fold */
.sticky-note > * {
    position: relative;
    z-index: 1;
}

/* Fold stays visual only */
.sticky-note::after {
    pointer-events: none;
    z-index: 0;
}

.sticky-note a {
    color: #5b4a2f;
}

.sticky-note a:hover {
    color: #5b4a2f;
    background: rgba(255,255,255,.25);
}




.homepage-stickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}