/* Text typeface. */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/PTSerif-Regular.woff') format(woff),
    url('../fonts/PTSerif-Regular.ttf') format(truetype);
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src:
    url('../fonts/PTSerif-Italic.woff') format(woff),
    url('../fonts/PTSerif-Italic.ttf') format(truetype);
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src:
    url('../fonts/PTSerif-Bold.woff') format(woff),
    url('../fonts/PTSerif-Bold.ttf') format(truetype);
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src:
    url('../fonts/PTSerif-BoldItalic.woff') format(woff),
    url('../fonts/PTSerif-BoldItalic.ttf') format(truetype);
}
/* Display typeface for headings. */
@font-face {
  font-family: 'Crete Round';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/CreteRound-Regular.woff') format(woff),
    url('../fonts/CreteRound-Regular.ttf') format(truetype);
}
@font-face {
  font-family: 'Crete Round';
  font-style: italic;
  font-weight: 400;
  src:
    url('../fonts/CreteRound-Italic.woff') format(woff),
    url('../fonts/CreteRound-Italic.ttf') format(truetype);
}
/* Monospace typeface for code. */
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/MonaspaceNeon-Regular.woff') format(woff),
    url('../fonts/MonaspaceNeon-Regular.ttf') format(truetype);
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: italic;
  font-weight: 400;
  src:
    url('../fonts/MonaspaceNeon-Italic.woff') format(woff),
    url('../fonts/MonaspaceNeon-Italic.ttf') format(truetype);
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 700;
  src:
    url('../fonts/MonaspaceNeon-Bold.woff') format(woff),
    url('../fonts/MonaspaceNeon-Bold.ttf') format(truetype);
}
/* Math typeface. */
@font-face {
  font-family: 'Noto Sans Math';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/NotoSansMath-Regular.woff') format(woff),
    url('../fonts/NotoSansMath-Regular.ttf') format(truetype);
}


html {
  font-size: 1.20vw;
  -webkit-text-size-adjust: none;
}

body {
  font-family: 'PT Serif', 'Noto Sans Math', serif;
  font-weight: 400;
  --gutter: 1.5rem;
  width: calc(100% - var(--gutter) * 2);
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

* {
  line-height: 1.35;
  box-sizing: border-box;
}

#footer {
  display: block;
  width: 100%;
  padding: 0 var(--gutter);
}
#footer > * {
  display: inline;
  line-height: 4em;
  padding: 0 0.5em;
}
#footer > *:first-child {
  padding-left: 0;
}
#footer > *:last-child {
  padding-right: 0;
}

blockquote {
  font-style: italic;
  padding: 0.5em;
}

.caption {
  font-size: 80%;
  padding: 0.5em;
  color: #333;
}

h1, h2, h3, h4, h5 {
  font-family: 'Crete Round';
  font-weight: 400;
  font-style: normal;
  text-wrap: pretty;
  letter-spacing: -0.025em;
}
h1 {
  line-height: 1.1;
}
h2, h3, h4, h5 {
  letter-spacing: -0.035em;
  font-style: italic;
}
h1 { font-size: 300%; }
h2 { font-size: 200%; }
h3 { font-size: 150%; }
h4 { font-size: 125%; }
h5 { font-size: 115%; }

h2:target,
h3:target,
h4:target,
h5:target {
  scroll-padding-top: 2em;
}
h2 .toclink,
h3 .toclink,
h4 .toclink,
h5 .toclink {
  position: relative;
  text-decoration: none;
  color: inherit;
}
h2 .toclink::before,
h3 .toclink::before,
h4 .toclink::before,
h5 .toclink::before {
  content: '¶';
  position: absolute;
  top: 0;
  left: -1.5em;
  width: 2em;
  padding: 0 0.5em 0.5em 0.5em;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}
h2 .toclink:hover::before,
h3 .toclink:hover::before,
h4 .toclink:hover::before,
h5 .toclink:hover::before {
  opacity: 0.3;
}
h2:target .toclink::before,
h3:target .toclink::before,
h4:target .toclink::before,
h5:target .toclink::before {
  opacity: 1.0;
}




/* Posts */

.post {
  padding: 0.50em var(--gutter) 1.00em var(--gutter);
  border-bottom: 0.05em solid #ccc;
}

.post .content {
  padding-bottom: 2em;
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5 {
  margin: 0.75em 0 0.25em 0;
}

.post .top-date {
  font-style: italic;
  font-size: 75%;
  color: #666;
  padding-top: 0.25em;
}

.post ul, .post ol {
  margin: 1em 2em 0 2em;
}

.post li {
  list-style: disc;
  padding: 0.25em;
}

.post ol li {
  list-style: decimal;
}

.post p {
  padding: 1em 0 0 0;
}
.post h2 + p,
.post h3 + p,
.post h4 + p,
.post h5 + p {
  padding-top: 0.5em;
}
.post .content > p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.post li p {
  padding: 0; 
}

.post .content > .highlight,
.post .content > pre {
  margin-top: 1em;
}

.post em {
  font-style: italic;
}

.post strong {
  font-weight: 700;
}

.post sub {
  font-size: 75%;
  position: relative;
  top: 0.25em;
}

.post pre {
  padding: 1em 1em;
  border: 0.05em solid #666;
  background: #efefef;
  white-space: pre-wrap;
}

.post .content > .highlight,
.post .content > pre,
.post p code,
.post ul code,
.post ol code {
  font-family: 'Monaspace Neon', 'Noto Sans Math', courier;
  font-weight: 400;
  font-size: 85%;
}

.post code {
  background: #efefef;
}

.post p code,
.post ul code,
.post ol code {
  padding: 0 0.25em;
  white-space: nowrap;
}

.post blockquote {
  position: relative;
  margin: 1.75em 0 0.25em 0;
  padding: 0 2.5em;
}
.post blockquote::before {
  position: absolute;
  top: -0.25em;
  left: 0;
  content: '“';
  font-size: 400%;
  opacity: 0.2;
}
.post blockquote p:first-child {
  padding: 0; 
}
.post blockquote strong {
  font-style: inherit;
}

.post small {
  font-style: italic;
  font-size: 75%;
  color: #666;
}

.post .image {
  margin: 1em 0;
  text-align: center;
}

.post .image a img {
  border: 0.1em solid blue;
  max-width: 100%;
}

.post .image a:visited img {
  border: 0.1em solid purple;
}

.post .matrix {
  margin-top: 0.50em;
  margin-bottom: 0.50em;
  margin-left: auto;
  margin-right: auto;
}

.post .matrix td {
  border: 0.01em solid gray;
  padding: 0.25em 0.50em;
}

.post .matrix .col-header,
.post .matrix .row-header {
  background: #ddd;
}

.post .matrix .col-header.row-header {
  border: none;
  background: inherit;
}

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

@media screen and (max-width: 899px) {
  html {
    font-size: 3.5vw;
  }
  body {
    max-width: 65ch;
    --gutter: 1.25rem;
  }
  h1 { font-size: 200%; }
  h2 { font-size: 170%; }
  h3 { font-size: 140%; }
  h4 { font-size: 120%; }
  h5 { font-size: 110%; }
  h2 .toclink::before,
  h3 .toclink::before,
  h4 .toclink::before,
  h5 .toclink::before {
    left: calc(-1 * var(--gutter));
    width: var(--gutter);
    padding: 0;
    text-align: center;
  }
  .post {
    padding: 0 0 1em 0;
  }
  .post .content > .highlight,
  .post .content > pre {
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(-1 * var(--gutter));
  }
  .post .content > .pre {
    margin: 0;
  }
  .post .content .highlight,
  .post .content pre {
    border-left: none;
    border-right: none;
  }
  .post .content > .highlight,
  .post .content > pre,
  .post p code {
    font-size: 75%;
  }
  .post .content > .highlight > pre,
  .post .content > pre {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  #footer {
    padding: 0;
  }
}