/* Copied from: https://matklad.github.io/2026/06/04/css-unavoidable-bad-parts.html */
* {
  box-sizing: border-box;

  font-size-adjust: ex-height 0.53;
  /* TODO: Remove explicit seting of font-size in this whole CSS file */

  line-height: 1.3em;
}

/* Improve word breaking, important on narrow screens
   From: https://matklad.github.io/2025/04/22/horizontal-scroll.html */
p { hyphens: auto; }
a.url { word-break: break-all; }

/* Main code */
:root {
  --code-bg-colour: #fdf6e3;
  --code-colour: #657b83;

  --quote-bg-colour: #f5f5f5;
  --quote-sidebar-colour: #ccc;
}

html {
  font-size: 62.5%;
  font-family: sans-serif;
}

body {
  width: min(90%, 60rem);
  margin: 0 auto;
  padding: 0 5%;

  /* Make sure padding doesn't shrink width of content */
  box-sizing: content-box;

  font-size: 1.6rem;
  color: #000;
}

/* Link colour (overwritten for menu's, etc.) */
a { color: #3995F7; }
a:visited { color: #8839F7; }

header {
  border-bottom: 0.2rem solid #000;
}

nav {
  text-align: right;
}

nav a {
  font-size: 1.8rem;
  font-weight: bold;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
}

footer {
  margin-top: 3rem;
  padding: 1.2rem 0;
  border-top: 0.2rem solid #000;
  font-size: 1.2rem;
  color: #555;
  text-align: right;
}

h1 {
  font-size: 2.4rem;
}

h2 {
  font-size: 2rem;
}

article .header {
  font-size: 1.4rem;
  font-style: italic;
  color: #555;
}

.logo a {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

/* TODO: Replace media queries with usage of `calc` and `min` */
@media (max-width: 639px) {
  header {
    margin: 4.2rem 0;
  }
  nav {
    margin: 0 auto 3rem;
    text-align: center;
  }
  .logo {
    text-align: center;
    margin: 1rem auto 3rem;
  }
  .logo a {
    font-size: 2.4rem;
  }
}

@media (max-width: 319px) {
  nav a {
    display: block;
    line-height: 1.6;
  }
}
@media (min-width: 320px) {
  nav a {
    display: inline;
    margin: 0 0.6rem;
  }
}

@media (min-width: 640px) {
  header {
    margin: 0 0 3rem;
    padding: 1.2rem 0;
  }
  nav {
    margin: 0;
    text-align: right;
  }
  nav a {
    margin: 0 0 0 1.2rem;
    display: inline;
  }
  .logo {
    margin: 0;
    text-align: left;
  }
  .logo a {
    float: left;
    font-size: 1.8rem;
  }
}

/* Block quotes */
blockquote {
  background: var(--quote-bg-colour);
  font-size: 1em;
  border-left: .7em solid var(--quote-sidebar-colour);
  margin: 1em .5em;
  padding: .5em 1em;
  /* quotes: "\201C""\201D"; */
}

blockquote p {
  display: inline;
}

/* Tables, see https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables */
table {
  border-collapse: collapse;
}
th, td {
  vertical-align: top;
  padding: 0.3em;
}
tr:nth-child(even) {
  background-color: #EEEEEE;
}

/* Source code */
pre {
  background: var(--code-bg-colour);
  color: var(--code-colour);

  padding: 0.4em 0.8em;
  margin: 1em 0.2em;

  overflow-x: scroll;
}

/* Style links, inspired by gwern.net */
main a[href^="http"]::after {
    position: relative;
    bottom: 0.6em;
    font-size: 0.6em;

    /* TODO: Styling doesn't seem to work. */
    text-decoration: none;
}
main a[href^="http"]:where([href*="wikipedia.org/"])::after {
    content: "W";
}
main a[href^="http"]:where([href*="github.com/"])::after {
    content: "GH";
}
main a[href^="http"]:where([href*="xkcd.com/"])::after {
    content: "xkcd";
}
main a[href^="http"]:where([href$=".pdf"])::after {
    content: "PDF";
}
main a[href^="http"]:where([href*="youtube.com/"])::after {
    content: "YT";
}
main a[href^="http"]:where([href*="lwn.net/"])::after {
    content: "LWN";
}
main a[href^="http"]:where([href*="arxiv.org/"])::after {
    content: "arXiv";
}

/* Sidenotes, stolen from:
  https://github.com/slotThe/slotThe.github.io/blob/f4c22e2add974d9ba35ef0fc63895efafb1eae21/css/sidenotes.css */
/* Using `main` instead of `body` here fixed a problem I had where footnotes in <ol> lists would not increment the counter. */
main {
    counter-reset: sidenote-counter;
}
:root {
  --fg-link: #0000EE;
}

.sidenote,
.marginnote,
.marginnote-left {
    float: right;
    clear: right;
    margin-right: -56%;
    width: 49%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.8em;
    line-height: 1.2;
    vertical-align: baseline;
    position: relative;
    text-align: left;
    @media (width <= 1120px) {
        margin-right: -40%;
        width: 33%;
    }
}

.marginnote-left {
    float: left;
    clear: left;
    margin-left: -32%;
    width: 25%;
    position: relative;
    text-align: right;
    /* The first condition is for the case of a left-aligned layout (on a smaller
       screen), and the second condition for a more centered layout on a
       larger screen. It's a bit awkward, sadly :/ */
    @media (width <= 1349px) or ((width >= 1367px) and (width <= 1620px)) {
        margin-left: -33%;
        width: 30%;
    }
}

.sidenote:hover {
  border: 1px solid;
  padding: 0.2em;
}

.sidenote code {
    font-size: 0.94em;
}

/* For some reason, although only `overflow-x` is set in `default.css`,
   block code in side and marginnotes gets a vertical (!) scrollbar no
   matter what; disable that.
*/
div .marginnote pre,
div .sidenote pre {
    overflow-y: hidden;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number:after {
    content: "[" counter(sidenote-counter) "]";
    font-size: 0.8rem;
    top: -0.5rem;
}

/* Properly position sidenote number and adjust position of sidenote
   paragraphs:
    https://github.com/edwardtufte/tufte-css/issues/93#issuecomment-670695382
*/
.sidenote::before {
    content: counter(sidenote-counter) " ";
    font-size: 0.8rem;
    top: -0.4rem;
    position: absolute;
    right: calc(100% + 0.5em);
}

.sidenote p {
    margin: 1em 0;
    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        margin-bottom: 0;
    }
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline-block;
    max-height: 2rem; /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

@media (width <= 960px) {
    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote,
    .marginnote,
    .marginnote-left {
        display: none;
    }

    /* Linkify sidenotes iff they are clickable */
    .sidenote-number:after {
        color: var(--fg-link);
        text-decoration: none;
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote,
    .margin-toggle:checked + .marginnote-left {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
        text-align: left;
    }

    label {
        cursor: pointer;
    }
}

/* A full-width figure, for ones that are too wide or big to fit on the page
   otherwise (and shrinking them would make everything look worse.) */
figure, div .sourceCode {
    /* Big screens */
    vertical-align: baseline;
    max-width: none;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 1em -56% 1em 0;

    /* Small or vertical screens */
    @media (width <= 1120px) {
        margin-right: -40%;
    }

    /* Phones or heavily zoomed in */
    @media (width <= 960px) {
        margin-right: 0;
        max-width: 100%;
    }
}
figure {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}

/* View Transitions */
/*
 * https://css-tricks.com/toe-dipping-into-view-transitions/
 * https://piccalil.li/blog/some-practical-examples-of-view-transitions-to-elevate-your-ui/
 * https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/
 */
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}