:root {
  /* Type scale from https://www.fluid-type-scale.com/, smallest to largest */
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);

  /* Space scale from https://utopia.fyi/space/calculator/ */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
  --flow-space: var(--space-xs);

  /* Colors */
  --bg-primary: #fff0e5;
  --bg-secondary: #eee8d5;
  --box-primary: var(--jotter-red);
  --jotter-blue: #0d3aba;
  --jotter-red: #d32e2f;
  --link-primary: var(--jotter-blue);
  --link-hover: var(--jotter-red);
  --outline-primary: var(--jotter-blue);
  --outline-hover: var(--jotter-red);
  --text-color: black;

  /* Font family */
  --brand-font: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;

  /* Post Styles */
  --caption-size: var(--font-size-base);
  --post-title-size: var(--font-size-xl);
  --radius: 10px;

  /* Book shelf & table of content styles */
  --max-book-width: 200px;

  /* Configure the Pagefind UI */
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #000000;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;

  /* SVG icon for external links
	line left
	line right
	line bottom
	line top
	arrow left
	arrow right
	arrow diagonal
	*/
  --icon-external-link: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\
  <g style="stroke:rgb(0,0,0);stroke-width:1">\
    <line x1="5" y1="5" x2="5" y2="14" />\
    <line x1="14" y1="9" x2="14" y2="14" />\
    <line x1="5" y1="14" x2="14" y2="14" />\
    <line x1="5" y1="5" x2="9" y2="5" />\
    <line x1="10" y1="2" x2="17" y2="2" />\
    <line x1="17" y1="2" x2="17" y2="9" />\
    <line x1="10" y1="9" x2="17" y2="2" style="stroke-width:1.5" />\
  </g>\
</svg>');
}

    /* Reset and default element styles */
html {
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ol,
ul {
  margin-block: var(--space-xs);
  padding: 0;
}

ol:not([class]),
ul:not([class]) {
  margin-inline-start: var(--space-l);
}

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

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
img:not([class]) {
  margin-block-end: var(--space-s);
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

:where(h1, h2) {
  font-size: var(--font-size-xl);
  text-align: center;
  text-wrap: balance;
}
:where(article h2) {
  font-size: var(--font-size-lg);
  text-align: left;
}

:where(p) {
  margin-block: 0 var(--space-s);
  text-wrap: pretty;
}

:where(a:not(:has(img))) {
  color: var(--text-color);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 3px;
  text-decoration-style: dashed;
  text-decoration-color: var(--link-primary);
  &:hover {
    outline: 5px dashed var(--outline-hover);
    border-radius: var(--radius);
    text-decoration: none;
  }
}

:where(a:not([data-hover-text]) img) {
  border-radius: var(--radius);
  outline: 3px dashed var(--outline-primary);
  &:hover {
    outline: 5px dashed var(--outline-hover);
    /* border-radius: var(--radius); */
  }
}

/* SVG icon to indicate links to external sites */
a[data-link-type="external"]::after {
  background: no-repeat var(--icon-external-link);
  content: "";
  padding-right: 1em;
}

/* Default img to handle fluid images */
:where(img) {
  border-radius: var(--radius);
  display: block;
  max-width: 100%;
}
:where(img[width]) {
  width: auto; /* Defer to max-width */
}
:where(img[width][height]) {
  height: auto; /* Preserve aspect ratio */
}

    /*
  Page structure:
   1 column grid, forcing footer to bottom
*/
body {
  background-color: var(--bg-primary);
  /* background-image: url("/assets/img/bg-me-and-dad.jpg"); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-color);
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--brand-font);
  font-size: var(--font-size-md);
  line-height: 1.35;
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

header {
  padding-block: var(--space-s);
}
/* Highlight the nav link of the current page  */
nav a[aria-current="page"] {
  border-radius: var(--radius);
  outline: 5px dashed var(--link-hover);
  text-decoration: none;
}

#search {
  margin-block: var(--space-m);
  text-align: left;
}

.stripe-buy-button {
  display: flex;
  justify-content: center;
  margin: var(--space-s) 0;
}

/*
  Content structure
  - named grid lines for layout
  - for varying content widths within a page
*/
.content {
  --gap: clamp(0.25rem, 3vw, 1rem);
  --full: minmax(var(--gap), 1fr);
  --feature: minmax(0, 5rem);
  --popout: minmax(0, 2rem);
  --central: min(65ch, 100% - var(--gap) * 2);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [central-start] var(--central) [central-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
  max-width: 100vw;
  place-content: start center;
}
.full {
  grid-column: full;
}
.feature {
  grid-column: feature;
}
.popout {
  grid-column: popout;
}
.central {
  grid-column: central;
}

/*
  Home page grid:
  - 1 column on small screens
  - 2 columns on medium via media query
  - 4 columns on large via media query
*/
.homegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow-space);
  padding-inline: var(--space-xs);
  place-content: center;
}
.homegrid img {
  margin-block: var(--space-xs);
  margin-inline: auto;
}

@media (min-width: 700px) {
  body {
    background-image: url("/assets/img/bg-me-and-dad.jpg");
  }
  .homegrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1250px) {
  .homegrid {
    grid-template-columns: repeat(4, 1fr);
  }
  #alltags .listolinks {
    margin-inline: auto;
    max-width: 70%;
  }
}

/* Top navigation links & list of all tags in footer */
.listolinks {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
  justify-content: space-around;
  list-style: none;
  text-align: center;
}
.listolinks a {
  padding: 0 var(--space-3xs);
}
.listolinks li {
  margin: var(--space-3xs) var(--space-2xs);
}
nav .listolinks {
  justify-content: center;
}

/* Bookshelf */
.bklist {
  display: grid;
  font-size: var(--font-size-base);
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(var(--max-book-width), 1fr));
  margin-block-start: var(--space-l);
  place-items: start center;
}
.bkitem {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
}
.bktitle {
  font-weight: bold;
  margin-block-start: var(--space-2xs);
  width: var(--max-book-width);
  text-wrap: pretty;
}
.bookyear {
  background: var(--bg-secondary);
  margin-block-start: var(--space-m);
  margin-inline: auto;
  width: 90%;
}
.bookyears a {
  margin-inline: var(--space-3xs);
}

/*
  "scroll to top" SVG image link
  lives inside of the <header> markup
*/
.stt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  outline: 3px dashed var(--outline-primary);
  background: var(--bg-secondary)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='0d3aba' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E")
    center no-repeat;
}
.stt:hover {
  background: var(--bg-primary)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='black' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E")
    center no-repeat;
  border-radius: 50%;
  opacity: 1;
  outline: 5px dashed var(--outline-hover);
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
  font-style: italic;
  list-style: none;
  margin-block: 0 var(--space-xl);
  padding: 0;
}

.postmeta {
  text-align: center;
  & .taglist {
    justify-content: center;
    margin-block-end: var(--space-s);
  }
  & img {
    margin-block-end: var(--space-2xs);
  }
}

/* image captions */
.caption {
  font-size: var(--caption-size);
  font-style: italic;
  margin-block-start: var(--space-3xs);
  text-align: center;
}

.table-of-contents,
.email-comment {
  margin: var(--space-m) auto;
  padding: var(--space-m);
  width: fit-content;
  background-color: var(--bg-secondary);
  border: 1px solid var(--box-primary);
  border-radius: var(--radius);
  & h2 {
    text-align: center;
  }
}

blockquote {
  border-inline-start: var(--space-2xs) solid var(--jotter-blue);
  font-style: italic;
  font-size: var(--font-size-md);
  grid-column: popout;
  margin: var(--space-s) 0;
  padding: var(--space-s);
}

/* position the copy code button */
pre:has(code) {
  position: relative;
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
}

pre:has(code) button {
  position: absolute;
  top: 3px;
  right: 3px;
  border-radius: calc(var(--radius) / 2);
  font-size: var(--font-size-sm);
}

    footer {
  padding-block-start: var(--space-m);
}
#alltags {
  margin-inline: var(--space-m);
}
footer > p {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--jotter-red);
  padding-block: var(--space-xs);
}

/* Social icons appearing in the footer of every page */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-block: var(--space-s);
  justify-content: center;
  gap: var(--space-s);
}

.social-icons li {
  position: relative;
}

.social-icons a {
  display: inline-block;
  padding: var(--space-2xs);
  transition: transform 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover,
.social-icons a:focus {
  transform: scale(1.1);
  outline: none;
}

.social-icons a::after {
  content: attr(data-hover-text);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: var(--space-3xs) var(--space-3xs);
  border-radius: var(--space-2xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.social-icons a:hover::after,
.social-icons a:focus::after {
  opacity: 1;
}

.social-icons li a img {
  height: var(--space-l);
  width: var(--space-l);
}

    /* Utility classes */
.bg-color {
  background-color: var(--bg-primary);
  opacity: 0.7;
}

.bold {
  font-weight: bold;
}

.boxed {
  background-color: var(--bg-secondary);
  border: 1px solid var(--box-primary);
  border-radius: var(--radius);
  padding: var(--space-s);
}

.flow > * + * {
  margin-block-start: var(--flow-space);
}

.ital {
  font-style: italics;
}

.list-none {
  list-style: none;
}

.round-img {
  clip-path: circle(50%);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.parenthetical {
  font-size: var(--font-size-md);
  font-weight: normal;
  font-style: italic;
}

.strikethrough {
  text-decoration: line-through;
}

.no-bot-margin {
  margin-block-end: 0;
}