/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

:root {
    /* Catppuccin Mocha color palette (dark) */
    --dark-base-bg: #1e1e2e;
    --dark-surface0-bg: #313244;
    --dark-surface1-bg: #45475a;
    --dark-surface2-bg: #585b70;
    --dark-overlay0-bg: #6c7086;
    --dark-overlay1-bg: #7f849c;
    --dark-overlay2-bg: #9399b2;
    --dark-text-fg: #cdd6f4;
    --dark-text-muted: #bac2de;
    --dark-text-subtle: #a6adc8;
    --dark-accent-primary: #89b4fa;
    --dark-accent-secondary: #74c7ec;
    --dark-accent-tertiary: #94e2d5;
    --dark-accent-warn: #f9e2af;
    --dark-accent-error: #f38ba8;
    --dark-accent-success: #a6e3a1;

    /* Catppuccin Frappé color palette (light) - lavender theme */
    --light-base-bg: #babbf1;
    --light-surface0-bg: #c6d0f5;
    --light-surface1-bg: #b5bfe2;
    --light-surface2-bg: #a5adce;
    --light-overlay0-bg: #85c1dc;
    --light-overlay1-bg: #81c8be;
    --light-overlay2-bg: #a6d189;
    --light-text-fg: #303446;
    --light-text-muted: #414559;
    --light-text-subtle: #51576d;
    --light-accent-primary: #8caaee;
    --light-accent-secondary: #ca9ee6;
    --light-accent-tertiary: #81c8be;
    --light-accent-warn: #e5c890;
    --light-accent-error: #1e66f5;
    --light-accent-success: #8caaee;

    /* Default to dark */
    --base-bg: var(--dark-base-bg);
    --surface0-bg: var(--dark-surface0-bg);
    --surface1-bg: var(--dark-surface1-bg);
    --surface2-bg: var(--dark-surface2-bg);
    --overlay0-bg: var(--dark-overlay0-bg);
    --overlay1-bg: var(--dark-overlay1-bg);
    --overlay2-bg: var(--dark-overlay2-bg);
    --text-fg: var(--dark-text-fg);
    --text-muted: var(--dark-text-muted);
    --text-subtle: var(--dark-text-subtle);
    --accent-primary: var(--dark-accent-primary);
    --accent-secondary: var(--dark-accent-secondary);
    --accent-tertiary: var(--dark-accent-tertiary);
    --accent-warn: var(--dark-accent-warn);
    --accent-error: var(--dark-accent-error);
    --accent-success: var(--dark-accent-success);
}

@media (prefers-color-scheme: light) {
    :root {
        --base-bg: var(--light-base-bg);
        --surface0-bg: var(--light-surface0-bg);
        --surface1-bg: var(--light-surface1-bg);
        --surface2-bg: var(--light-surface2-bg);
        --overlay0-bg: var(--light-overlay0-bg);
        --overlay1-bg: var(--light-overlay1-bg);
        --overlay2-bg: var(--light-overlay2-bg);
        --text-fg: var(--light-text-fg);
        --text-muted: var(--light-text-muted);
        --text-subtle: var(--light-text-subtle);
        --accent-primary: var(--light-accent-primary);
        --accent-secondary: var(--light-accent-secondary);
        --accent-tertiary: var(--light-accent-tertiary);
        --accent-warn: var(--light-accent-warn);
        --accent-error: var(--light-accent-error);
        --accent-success: var(--light-accent-success);
    }
}

.override-light {
    --base-bg: var(--light-base-bg);
    --surface0-bg: var(--light-surface0-bg);
    --surface1-bg: var(--light-surface1-bg);
    --surface2-bg: var(--light-surface2-bg);
    --overlay0-bg: var(--light-overlay0-bg);
    --overlay1-bg: var(--light-overlay1-bg);
    --overlay2-bg: var(--light-overlay2-bg);
    --text-fg: var(--light-text-fg);
    --text-muted: var(--light-text-muted);
    --text-subtle: var(--light-text-subtle);
    --accent-primary: var(--light-accent-primary);
    --accent-secondary: var(--light-accent-secondary);
    --accent-tertiary: var(--light-accent-tertiary);
    --accent-warn: var(--light-accent-warn);
    --accent-error: var(--light-accent-error);
    --accent-success: var(--light-accent-success);
}

.override-dark {
    --base-bg: var(--dark-base-bg);
    --surface0-bg: var(--dark-surface0-bg);
    --surface1-bg: var(--dark-surface1-bg);
    --surface2-bg: var(--dark-surface2-bg);
    --overlay0-bg: var(--dark-overlay0-bg);
    --overlay1-bg: var(--dark-overlay1-bg);
    --overlay2-bg: var(--dark-overlay2-bg);
    --text-fg: var(--dark-text-fg);
    --text-muted: var(--dark-text-muted);
    --text-subtle: var(--dark-text-subtle);
    --accent-primary: var(--dark-accent-primary);
    --accent-secondary: var(--dark-accent-secondary);
    --accent-tertiary: var(--dark-accent-tertiary);
    --accent-warn: var(--dark-accent-warn);
    --accent-error: var(--dark-accent-error);
    --accent-success: var(--dark-accent-success);
}

body {
    font-family: system-ui;
    padding: 0;
    padding-left: 2rem;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--base-bg);
    color: var(--text-fg);
    line-height: 1.5;
}

a.footnote-ref {
  padding-top: 10px;
}

body > main {
    display: flex;
    flex: 1;
}

#content {
    background-color: var(--surface0-bg);
    padding: 1.66rem 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    max-width: 40rem;
}

#sidenotes {
    flex: 1;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.83rem;
    max-width: 30rem;
    position: relative;
}

a {
    color: var(--accent-error);
    text-decoration: underline;
}

a:hover {
    text-decoration: underline wavy;
}

#content .byline {
    font-style: italic;
}

#content main p {
    margin: 1.33rem 0;
}

@keyframes target-fade {
    0% {
        background-color: color-mix(in srgb, var(--accent-warn) 20%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

#sidenotes :target {
    animation: target-fade 1s ease-out;
}

#backlog {
  padding-top: 1.5rem;
  max-width: 15rem;
  font-size: 0.83rem;
}

#backlog ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-right: 1rem;
}

#backlog h3 {
  font-size: 0.66rem;
  text-transform: uppercase;
  margin-top: 1.33rem;
  margin-bottom: 0.33rem;
}

#benediction {
  opacity: 0.4;
  font-style: italic;
  font-size: 0.66rem;
  margin: 1rem 0;
}

#sidenotes sup {
  border-left: 2px solid transparent;
  padding-left: 2px;
}

#sidenotes .hovered-footnote sup {
  border-left: 2px solid var(--text-fg);
}

.spoiler, .spoiler * {
  opacity: 0;
  background: var(--overlay2-bg);
  cursor: pointer;
}

.spoiler:hover, .spoiler:hover * {
  opacity: 1;
  background: inherit;
}

label {
  color: var(--accent-error);
  cursor: pointer;
}

blockquote {
  border-left: 0.33rem solid var(--overlay2-bg);
  padding-left: 0.66rem;
  opacity: 0.9;
}