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

:root {
  color-scheme:light dark;

  --hue-link: 355deg;
  --hue-menu: 210deg;
  --hue-underline: 190deg;
  --hue-outline: 60deg;

  --background: hsl(32.5deg, 22.2%, 94.8%);
  --foreground: hsl(60, 7%, 10%);
  --link-hover: hsl(var(--hue-link), 100%, 40%);
  --link-underline: hsl(var(--hue-underline), 100%, 40%);
  --link-article-outline: hsl(var(--hue-outline), 10%, 80%);

  --menu: hsla(var(--hue-menu), 100%, 40%, 0.9);
  --menu-hover: hsla(var(--hue-link), 100%, 60%, .9);

  --main-inline-margin: 2rem;
  --max-content-width: 100rem;

  --max-content-width-breakpoint: 101.2rem;

  --input-focus-background: hsla(60, 100%, 80%, 1);

  --border: 1px solid #555;
  --homepage-link-bg: hsla(var(--hue-underline), 40%, 85%, .7);
  --homepage-link-hover-bg: hsla(var(--hue-link), 60%, 90%, 1);
  
  --blockquote-border: hsla(267.5deg, 40%, 50%, 1);
  --accent-a: hsla(284.4deg, 62.7%, 50.6%, 1); /* A pinkish purple */
  --svg-text: hsl(267, 40%, 50%); /* Also pinkish purple */

  --background-code-block: hsl(60, 6.7%, 87%);
  --foreground-code-block: hsl(60, 6.7%, 20%);

  font: 8px / 1.8 var(--body-type);
  height: 100vh;
  overflow: hidden scroll;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --background: hsl(60, 7%, 10%);
    --foreground: hsl(60, 7%, 96%);

    --link-hover: hsl(var(--hue-link), 100%, 80%);
    --link-underline: hsl(var(--hue-menu), 100%, 80%);
    
    --homepage-link-bg: hsla(var(--hue-underline), 60%, 25%, 1);
    --homepage-link-hover-bg: hsla(var(--hue-link), 60%, 25%, 1);

    --background-code-block: hsl(60, 6.7%, 14%);
    --foreground-code-block: hsl(60, 6.7%, 88%);
  
    --svg-text: hsla(284.4deg, 62.7%, 65.6%, 1);
  }
  
  a > svg {
    fill: var(--foreground);
  }
}

@media screen and not (prefers-reduced-motion) {
  :root {
    scroll-behavior: smooth;
  }
}

@media screen and (min-width: 668px) {
  :root {
    font-size: 10px;
  }
}

html {
  background: var(--background);
  color: var(--foreground);
}

::selection {
  background: hsla(300, 100%, 50%, 0.25);
}

body {
  padding: 0;
  margin: 0;
}

+ * + {
  margin-block: 2rem;
}

button {
  cursor: pointer;
}

[id="masthead"] {
  position: relative;
  margin: auto;
  max-width: var(--max-content-width);
}

[id="masthead"] > a {
  height: 4rem;
  display: inline-flex;
  margin-block: 4rem 0;
  margin-inline: 2rem 0;
}

@media screen and (min-width: 1001px) {
  [id=masthead] > a {
    margin-inline: 0 0;
  }
  
  .home [id=masthead] > a {
    margin-inline-start: 1rem;
  }
}

[id="masthead"] > a:is(:focus-visible, :hover) svg {
  outline: 2px dotted var(--link-underline);
  fill: var(--menu-hover);
}

[id=masthead] svg {
  height: 100%;
  width: auto;
}

main {
  font-size: 2.2rem;
  margin-block: 4rem 0;
  position: relative;
}

pre, code, tt, kbd {
  font-family: var(--mono-type);
  overflow-wrap: break-word;
}

pre {
  background: var(--background-code-block);
  color: var(--foreground-code-block);
  font-size: 1.6rem;
  min-width: 100%; /* Prevent resize from being smaller than the content well */
  padding: 1.6rem;
  overflow: auto;
  resize: both;
  /* Next two lines, allow resized pre blocks to lay over the side rail */
  position: relative;
  z-index: 1;
  
}

a {
  color: inherit;
  text-decoration-color: var(--link-underline);
}

a:is(:hover,:active,:hover svg) {
  text-decoration-color: var(--link-hover);
  text-decoration-style: wavy;
  fill: var(--link-hover);
}

a:not([rel]) {
  text-decoration-color: var(--menu);
}

a > svg {
  pointer-events: none;
}

blockquote {
  border-inline-start: 5px solid var(--blockquote-border);
  font: italic 2rem / 1.5 var(--body-type);
  margin-block: 4rem;
  margin-inline: 0;
  padding: .5rem 6rem .5rem 2rem;
}

blockquote:first-child {
  margin-block-start: 0rem;
}

blockquote > p:only-child {
  margin-block-end: 0;
}

abbr {
  text-decoration: none;
  border: 0;
}

[id="unsolicited_advice"] {
  display: inline-flex;
  height: auto;
}

[id="unsolicited_advice"] {
  display: block;
  margin: 0 auto;
  max-width: var(--max-content-width);
}

[id="tagline"] {
  text-align: end;
  font-size: clamp(1.4rem, 2vh, 2rem);
  font-family: var(--tagline-type);
  text-transform: lowercase;
}

:is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--heading-type);
  text-wrap: balance;
  line-height: 1.2;
  margin-block: 0 2rem;
}

@supports not (text-wrap: balance) {
  :is(h1,h2,h3,h4,h5,h6) {
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

:is(h1,h2,h3,h4,h5,h6) em {
  font-family: var(--h1h6-ital);
}

.article_index--latest h2 {
  hyphens: initial;
}


h1 {
  font-size: 6rem;
}

h2 {
  font-size: 3.6rem;
}

h3 {
  font-size: 3.2rem;
}

h4 {
  font-size: 2.8rem;
}

h5 {
  font-size: 2.4rem;
}

h6 {
  font-size: 2.2rem;
}

article {
  margin-inline: auto;
}

article a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  text-decoration-style: solid;
  text-decoration-color: var(--link-underline);
}

@supports (text-decoration-thickness: 1px) {
  article a:hover {
    text-decoration-style: wavy;
    text-decoration-thickness: .2rem;
  }
}

@supports (-moz-appearance: none) and (text-decoration-thickness: 1px) {
  article a:hover {
    text-decoration-style: dotted;
    text-decoration-thickness: .3rem;
  }
}

article img {
  display: block;
  height: auto;
  width: 100%;
}

.published-on {
  font-family: var(--accent-type);
}

.footnote :is(ol,ul) {
  padding-inline-start: 2rem;
}

@media screen and (min-width: 1000px) {
  [id="sidebar"] {
    border: 0;
    position: sticky;
    top: 0;
    right: 0;
    margin-block-start: -2rem;
    padding-block-start: 1rem;
  }
}

[id="sidebar"] h2 {
  font-size: 3.2rem;
  text-transform: lowercase;
}

.meta-list {
  padding-inline-start: 0rem;
  list-style:none;
}

.meta-list li {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1rem;
}

.sr {
  position: absolute;
  left: -9999rem;
}

.content p:first-of-type {
  margin-block-start: 0;
}

main + footer {
  font: normal 1.6rem / 1.5 var(--body-type);
  padding-inline: 2rem;
  font-style: italic;
}

main + footer p {
  margin: auto;
  max-width: var(--max-content-width);
  padding-block: 6rem;
}

.pagination_page-count-heading {
  margin: auto;
  max-width: var(--max-content-width);
  padding-inline: 1rem;
}

[id=pagination] {
  display: grid;
  gap: 2rem;
  margin-inline: 2rem;
  max-width: var(--max-content-width);

  > * {
    margin-block: 0;
  }

  ul {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(2ch, 5ch));
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

@media screen and (min-width: 1000px) {
  [id=pagination] {
    margin-inline: auto;
  }
}

[id=pagination] {
  :is(a,b) {
    color: var(--foreground);
    display: flex;
    font-weight: 700;
    justify-content: center;
    padding: 1rem;
  }

  a {
    background: var(--homepage-link-bg);
    transition: background ease-in-out 150ms, transform ease-in-out 150ms;
    border-bottom: 0.3rem solid transparent;
    text-decoration: none;
  }

  b {
    background: var(--menu);
    color: var(--background);
  }
}

[id=pagination] {
  a:is(:hover, :active, :focus) {
    background: var(--homepage-link-hover-bg);
    color: inherit;
    border-bottom-color: var(--link-hover);
  }

  a:not(:hover,:focus):visited {
    background: #ccc;
  }
}

@supports(-moz-transform: scale(1)) {
  a:is(:hover,:active,:hover svg),
  article a:hover,
  [id=pagination] a:is(:hover, :focus) {
    text-decoration-thickness: 0.1rem !important;
  }
}

ins {
  text-decoration: none;
}

del {
  display: none;
}

.pages__footer {
  font-style: italic;
}

.article_index--latest--book img {
  filter: drop-shadow(0 0 25px #0002);
  height: auto;
  transform: rotate(-10deg);
  rotate: -10deg;
  max-width: 30rem;
  margin-inline: auto;
  margin-block-end: 5rem;
}

.content > *:first-child {
  margin-block-start: 0;
}

.page article {
  grid-template-areas: "content content" "footer footer";
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
}