/* Casemirror Fonts */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* Theme CSS Custom Properties - Casemirror-Inspired Palette */
:root {
  /* Casemirror Light theme colors (default) */
  --color-bg: #f8f5f0; /* Casemirror cream/paper background */
  --color-text: #1a1a1a; /* Casemirror ink (charcoal) */
  --color-text-muted: #6b6b6b; /* Casemirror muted ink */
  --color-link: #8b2635; /* Casemirror burgundy for links */
  --color-link-underline: #a83a4a; /* Casemirror light burgundy for underlines */
  --color-link-visited: #6b1d2a; /* Casemirror dark burgundy for visited links */
  --color-border: #d4cfc6; /* Casemirror border */
  --color-border-dark: #4a4a4a; /* Casemirror ink-light for dark borders */

  /* Casemirror Burgundy theme colors (muted maroon) */
  --color-purple-gradient-start: #a83a4a; /* Casemirror light burgundy */
  --color-purple-gradient-mid: #8b2635; /* Casemirror burgundy */
  --color-purple-gradient-end: #6b1d2a; /* Casemirror dark burgundy */
  --color-purple-accent: #8b2635; /* Casemirror burgundy accent */
  --color-purple-light: #f0ebe3; /* Casemirror darker paper for light accents */
  --color-purple-hover: #e8e4dd; /* Casemirror light border for hover states */
  --color-purple-border: #8b2635; /* Casemirror burgundy border */
  --color-purple-blockquote: rgba(139, 38, 53, 0.08); /* Casemirror burgundy blockquote bg */

  /* Code syntax highlighting */
  --color-code-bg: transparent;
  --color-code-comment: #6a737d;
  --color-code-constant: #005cc5;
  --color-code-entity: #6f42c1;
  --color-code-variable: #24292e;
  --color-code-tag: #22863a;
  --color-code-keyword: #d73a49;
  --color-code-string: #032f62;
  --color-code-value: #e36209;

  /* Quote mark color - Casemirror burgundy */
  --color-quote-mark: %238b2635;

  /* Tag styles - Casemirror inspired */
  --color-tag-bg: #f0ebe3; /* Casemirror darker paper */
  --color-tag-text: #1a1a1a; /* Casemirror ink */
  --color-tag-border: #d4cfc6; /* Casemirror border */
  --color-tag-count: #6b6b6b; /* Casemirror muted ink */

  /* Search/form - Casemirror burgundy */
  --color-search-border: #8b2635; /* Casemirror burgundy */
  --color-search-bg: #f8f5f0; /* Casemirror paper */
  --color-selected-tag-bg: rgba(139, 38, 53, 0.12); /* Casemirror burgundy transparent */

  /* Comments - Casemirror colors */
  --color-comment-warning-bg: #e8e4dd; /* Casemirror light border */
  --color-comment-warning-border: #8b2635; /* Casemirror burgundy */

  /* Misc */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-help-bg: rgb(190, 255, 190);
  --color-help-border: green;

  /* Casemirror Fonts */
  --font-display: 'Crimson Pro', Georgia, serif; /* Headings */
  --font-body: 'Source Serif 4', Georgia, serif; /* Body text */
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; /* UI elements */
  --font-code: 'SFMono-Regular', Menlo, Monaco, Courier, monospace; /* Code */

  /* Casemirror Spacing & Layout */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --max-width: 1200px;
  --header-height: 64px;

  /* Casemirror Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08);

  /* Casemirror Extended Colors */
  --color-white: #ffffff;
  --color-burgundy: #8b2635;
  --color-burgundy-dark: #6b1d2a;
  --color-burgundy-light: #a83a4a;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* [[[cog
# Dark theme CSS variables - defined once, used twice
# Note: avoid CSS comments inside this string as they break the outer cog comment
dark_theme_vars = [
    ("", [
        ("--color-bg", "#1a1a2e"),
        ("--color-text", "#e8e8e8"),
        ("--color-text-muted", "#a0a0a0"),
        ("--color-link", "#7eb8ff"),
        ("--color-link-underline", "#5a9fd4"),
        ("--color-link-visited", "#c9a0dc"),
        ("--color-border", "#444"),
        ("--color-border-dark", "#888"),
    ]),
    ("Purple theme colors - darker variants", [
        ("--color-purple-gradient-start", "rgb(100, 67, 114)"),
        ("--color-purple-gradient-mid", "rgb(62, 47, 84)"),
        ("--color-purple-gradient-end", "rgb(65, 44, 85)"),
        ("--color-purple-accent", "rgb(100, 56, 127)"),
        ("--color-purple-light", "#2d2640"),
        ("--color-purple-hover", "#3d3355"),
        ("--color-purple-border", "#6a4580"),
        ("--color-purple-blockquote", "#6a4a7a40"),
    ]),
    ("Code syntax highlighting - dark theme", [
        ("--color-code-bg", "#161b22"),
        ("--color-code-comment", "#8b949e"),
        ("--color-code-constant", "#79c0ff"),
        ("--color-code-entity", "#d2a8ff"),
        ("--color-code-variable", "#c9d1d9"),
        ("--color-code-tag", "#7ee787"),
        ("--color-code-keyword", "#ff7b72"),
        ("--color-code-string", "#a5d6ff"),
        ("--color-code-value", "#ffa657"),
    ]),
    ("Quote mark color for dark theme", [
        ("--color-quote-mark", "%23b19cd9"),
    ]),
    ("Tag styles", [
        ("--color-tag-bg", "#2d2640"),
        ("--color-tag-text", "#e8e8e8"),
        ("--color-tag-border", "#555"),
        ("--color-tag-count", "#a0a0a0"),
    ]),
    ("Search/form", [
        ("--color-search-border", "#8a5ab0"),
        ("--color-search-bg", "#5a3a76"),
        ("--color-selected-tag-bg", "rgba(140, 90, 180, 0.35)"),
    ]),
    ("Comments", [
        ("--color-comment-warning-bg", "rgb(80, 50, 100)"),
        ("--color-comment-warning-border", "rgb(100, 56, 127)"),
    ]),
    ("Misc", [
        ("--color-shadow", "rgba(0, 0, 0, 0.4)"),
        ("--color-help-bg", "rgb(40, 80, 40)"),
        ("--color-help-border", "#4a8a4a"),
    ]),
]

comment_start = "/" + "*"
comment_end = "*" + "/"

def output_vars(indent="  "):
    first_section = True
    for comment, variables in dark_theme_vars:
        if not first_section:
            cog.outl("")
        first_section = False
        if comment:
            cog.outl(f"{indent}{comment_start} {comment} {comment_end}")
        for name, value in variables:
            cog.outl(f"{indent}{name}: {value};")

cog.outl(f"{comment_start} Dark theme {comment_end}")
cog.outl("[data-theme=\"dark\"] {")
output_vars("  ")
cog.outl("}")
cog.outl("")
cog.outl(f"{comment_start} Auto dark theme based on system preference (only when no explicit theme is set) {comment_end}")
cog.outl("@media (prefers-color-scheme: dark) {")
cog.outl("  :root:not([data-theme]) {")
output_vars("    ")
cog.outl("  }")
cog.outl("}")
]]] */
/* Dark theme - FT-inspired dark palette */
[data-theme="dark"] {
  --color-bg: #1a1814; /* Warm dark (almost black with brown undertone) */
  --color-text: #f0ebe3; /* Warm off-white */
  --color-text-muted: #9a8e82; /* Warm muted gray */
  --color-link: #ff7a9a; /* Light warm pink (brighter maroon) */
  --color-link-underline: #ff9bb5; /* Lighter pink for underline */
  --color-link-visited: #d4a0b0; /* Muted pink for visited */
  --color-border: #3d3832; /* Warm dark border */
  --color-border-dark: #5a5248; /* Slightly lighter warm border */

  /* FT Maroon theme colors - dark variants */
  --color-purple-gradient-start: #cc4d6b; /* Lighter maroon for dark mode */
  --color-purple-gradient-mid: #a82f50; /* Mid maroon */
  --color-purple-gradient-end: #8a1f40; /* Deeper maroon */
  --color-purple-accent: #d95577; /* Bright maroon accent */
  --color-purple-light: #3d2a2e; /* Warm dark brown */
  --color-purple-hover: #4d3238; /* Slightly lighter warm brown */
  --color-purple-border: #994a5c; /* Muted maroon border */
  --color-purple-blockquote: rgba(217, 85, 119, 0.15); /* FT maroon blockquote */

  /* Code syntax highlighting - dark theme */
  --color-code-bg: #161b22;
  --color-code-comment: #8b949e;
  --color-code-constant: #79c0ff;
  --color-code-entity: #d2a8ff;
  --color-code-variable: #c9d1d9;
  --color-code-tag: #7ee787;
  --color-code-keyword: #ff7b72;
  --color-code-string: #a5d6ff;
  --color-code-value: #ffa657;

  /* Quote mark color for dark theme - FT maroon */
  --color-quote-mark: %23ff7a9a;

  /* Tag styles - FT dark */
  --color-tag-bg: #3d2a2e; /* Warm dark brown */
  --color-tag-text: #f0ebe3; /* Warm off-white */
  --color-tag-border: #5a4248; /* Warm border */
  --color-tag-count: #9a8e82; /* Warm muted gray */

  /* Search/form - FT dark */
  --color-search-border: #d95577; /* Bright maroon */
  --color-search-bg: #2d2228; /* Very dark warm brown */
  --color-selected-tag-bg: rgba(217, 85, 119, 0.20); /* FT maroon transparent */

  /* Comments - FT dark */
  --color-comment-warning-bg: #4d3238; /* Warm dark brown */
  --color-comment-warning-border: #d95577; /* Bright maroon */

  /* Misc */
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-help-bg: rgb(40, 80, 40);
  --color-help-border: #4a8a4a;
}

/* Auto dark theme based on system preference - DISABLED for light-only mode */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1a1814;
    --color-text: #f0ebe3;
    --color-text-muted: #9a8e82;
    --color-link: #ff7a9a;
    --color-link-underline: #ff9bb5;
    --color-link-visited: #d4a0b0;
    --color-border: #3d3832;
    --color-border-dark: #5a5248;

    --color-purple-gradient-start: #cc4d6b;
    --color-purple-gradient-mid: #a82f50;
    --color-purple-gradient-end: #8a1f40;
    --color-purple-accent: #d95577;
    --color-purple-light: #3d2a2e;
    --color-purple-hover: #4d3238;
    --color-purple-border: #994a5c;
    --color-purple-blockquote: rgba(217, 85, 119, 0.15);

    --color-code-bg: #161b22;
    --color-code-comment: #8b949e;
    --color-code-constant: #79c0ff;
    --color-code-entity: #d2a8ff;
    --color-code-variable: #c9d1d9;
    --color-code-tag: #7ee787;
    --color-code-keyword: #ff7b72;
    --color-code-string: #a5d6ff;
    --color-code-value: #ffa657;

    --color-quote-mark: %23b19cd9;

    --color-tag-bg: #2d2640;
    --color-tag-text: #e8e8e8;
    --color-tag-border: #555;
    --color-tag-count: #a0a0a0;

    --color-search-border: #8a5ab0;
    --color-search-bg: #5a3a76;
    --color-selected-tag-bg: rgba(140, 90, 180, 0.35);

    --color-comment-warning-bg: rgb(80, 50, 100);
    --color-comment-warning-border: rgb(100, 56, 127);

    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-help-bg: rgb(40, 80, 40);
    --color-help-border: #4a8a4a;
  }
}
*/
/*[[[end]]]*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
h5 {
  margin-bottom: 0.7em;
}
q:before,
q:after {
  content: "";
}
pre {
  white-space: pre-wrap;
  overflow: auto;
  width: 98%;
  margin-bottom: 1.6em;
  font-family: var(--font-code);
}
code {
  font-family: var(--font-code);
}
a:link {
  color: var(--color-link);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--color-link-underline);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blogmark-image {
  display: block;
  margin: 1em auto;
  box-shadow: 0px 0px 6px 3px var(--color-shadow);
}

a:visited {
  color: var(--color-link-visited);
  border-color: var(--color-link-visited);
}

a:link:focus,
a:link:hover,
a:link:active {
  text-decoration: none;
  border-bottom-style: dotted;
}

a.a-img:link,
a.a-img:link:focus,
a.a-img:link:hover,
a.a-img:link:active {
  /* No border on links that just contain an image */
  border-bottom: none;
}

body {
  font-family: var(--font-ui);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
strong {
  font-weight: bold;
}
em,
em strong {
  font-style: italic;
}
dl {
  margin-bottom: 1em;
}
dt {
  font-weight: bold;
}
dd {
  padding-left: 1.5em;
}
p.smallhead-toolbar {
  width: 940px;
  margin: 0 auto 3px auto;
}
a#atomfeedlink {
  float: right;
  border-bottom: none;
}
a#atomfeedlink svg {
  height: 20px;
  width: 20px;
}
p.bighead-toolbar img,
p.smallhead-toolbar img {
  vertical-align: top;
  padding-top: 2px;
}
p.bighead-toolbar a.signin,
p.smallhead-toolbar a.signin {
  text-decoration: none;
}
img.bubble {
  vertical-align: top;
}
.date-and-tags {
  font-size: 0.85rem;
}
div#sidead {
  margin-top: 2em;
}
div#ft {
  margin-top: auto;
  padding: var(--space-md) 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.85em;
  clear: both;
  width: 100%;
}
div#ft ul {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  display: block;
  color: var(--color-text-muted);
}
div#ft li {
  display: inline;
  padding-right: 1em;
}
div#ft a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: none;
}
div#ft a:hover {
  color: var(--color-link-visited);
}
p#previouslyhosted {
  clear: both;
  padding: 0.5em 0 0.5em 35px;
  font-size: 0.8em;
  color: var(--color-text-muted);
}
div#wrapper {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: hidden;
  flex: 1;
}
div#primary {
  width: 560px;
  margin-right: 35px;
  float: left;
}
div#primary blockquote,
.item-link blockquote,
div#primary .quote blockquote blockquote {
  margin: 1em 0;
  border-left: 0.75em solid var(--color-purple-blockquote);
  padding-left: 0.75em;
}
div#primary blockquote blockquote,
.item-link blockquote blockquote {
  border-left: none;
  padding-left: 1.5em;
}
div#secondary {
  width: 280px;
  float: left;
}
div#secondary img.bubble {
  vertical-align: top;
  padding-top: 1px;
}
div#secondary h2 {
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  line-height: 1.4em;
  border-bottom: 1px solid var(--color-border);
}
div#secondary h3 {
  font-family: var(--font-display);
  margin: 0.5em 0;
}
div#secondary ul li {
  margin-bottom: 0.56em;
  font-size: 0.9em;
}
div#secondary div.photos {
  clear: both;
}
div#secondary a.photolink {
  position: relative;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  width: 40px;
  height: 40px;
}
div#secondary div.photos img {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  position: absolute;
  top: 0px;
  left: 0px;
}
div#secondary ul {
  clear: both;
  margin-top: 0.5em;
}
.item-quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  text-indent: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  word-break: break-word;
}
.item-quote > blockquote p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
.quote .context {
  font-weight: normal;
}
p.cite {
  text-indent: 16px;
  font-weight: bold;
}
div.metabox {
  font-size: 0.9em;
}
div.metabox p {
  margin-bottom: 0.8em;
}
div.series-info {
  margin: 2em 0;
}
div.series-info li {
  margin-left: 1.5em;
  list-style-type: decimal;
}
div.entryPage {
  border-bottom: none;
}
.entry img,
.blogmark img,
.note img,
.entry video,
.blogmark video,
.note video {
  max-width: 100%;
}
/* Center embedded tweets in articles */
div.entry div.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}
div.entry a {
  word-break: break-word;
}
div.entry table,
div.blogmark table {
  margin: 1em 0;
}
div.entry table th,
div.entry table td,
div.blogmark table th,
div.blogmark table td,
div.note table th,
div.note table td {
  font-size: 0.9em;
  padding-right: 0.5em;
}
div.entry table td,
div.blogmark table td,
div.note table td {
  vertical-align: top;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
}
div.entry table th,
div.blogmark table th,
div.note table th {
  font-weight: bold;
  border-bottom: 1px solid var(--color-border-dark);
}
div.entry span.textago {
  font-family: helvetica, sans-serif;
  color: var(--color-text-muted);
  font-size: 0.75em;
  font-weight: normal;
  white-space: nowrap;
}
div.entry h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  margin: 0 0 0.75em 0;
  color: var(--color-text);
}
div.entry h2 a {
  margin-left: -27px;
  padding-left: 27px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: none;
  transition: color var(--transition-fast);
}
div.entry h2 a:hover {
  background: url(/static/css/img/arrow.png);
  background-repeat: no-repeat;
  background-position: 0 3px;
  color: var(--color-burgundy);
}
div.entry h3,
div.entry h4 {
  line-height: 1.4;
  font-family: var(--font-display);
  font-size: 1.2em;
  margin: 1.2em 0 0.5em 0;
}
div.entry h4 {
  font-size: 1.1em;
}
div.entry p,
div.day p {
  margin: 0 0 0.8em 0;
  font-family: var(--font-body);
  line-height: 1.7;
}
div.entry ul,
div.entry ol,
div.blogmark ul,
div.blogmark ol,
div.quote ul,
div.quote ol,
div.note ul,
div.note ol {
  margin-bottom: 0.8em;
}
div.entry li,
div.blogmark li,
div.quote li,
div.note li {
  margin-left: 1em;
  list-style-type: square;
}
div.entry ol li,
div.blogmark ol li,
div.note ol li,
div.quote ol li {
  list-style-type: decimal;
  margin-left: 2em;
}
div.entry ol li ul li,
div.blogmark ol li ul li {
  list-style-type: square;
}
div.entry iframe {
  width: 100%;
}
div.entry div.entryFooter {
  font-size: 0.9em;
  margin-top: 1em;
  border-top: 1px solid var(--color-purple-border);
  padding-top: 0.5em;
}
div.entry p.mobile-date {
  color: var(--color-text-muted);
  margin-bottom: 0.5em;
  margin-top: -0.5em;
  display: none;
}
div#bighead {
  width: 100%;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 15px;
}
div#bighead-inner {
  width: 940px;
  margin: 0 auto;
  padding: 25px 10px 15px 10px;
}
div#bighead h1 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
  line-height: 1.1;
  font-family: var(--font-display);
  color: var(--color-text);
}
div#bigheadcontainer {
  position: relative;
}
div#secondary div.day {
  border-bottom: 1px solid var(--color-border);
  clear: both;
}
div#searchbox {
  width: 280px;
  position: absolute;
  top: 0px;
  left: 485px;
}
div#searchbox input.text {
  border: 1px solid var(--color-search-border);
  vertical-align: middle;
  width: 150px;
  padding: 1px 1px 2px 1px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#searchbox input.image {
  vertical-align: middle;
}
div#smallhead {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 15px;
}
div#smallhead #smallhead-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-md) 75px var(--space-md) 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
div#smallhead #smallhead-inner h1 {
  font-weight: normal;
}
div#smallhead a {
  color: var(--color-link); /* Casemirror burgundy for cream background */
  text-decoration: none;
  border: none;
}
div#smallhead nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}
div#smallhead nav a {
  font-family: var(--font-ui);
  font-size: 0.9em;
  padding: 0;
}
#smallhead-about {
  padding-right: 0;
}
div#smallhead span {
  float: right;
  padding: 2px 5px 1px 0px;
  font-size: 0.9em;
  vertical-align: middle;
}
div#smallhead span u {
  font-family: var(--font-code);
}
div#smallhead span input {
  padding: 0 0 0 5px;
  vertical-align: middle;
}
div#smallhead span form {
  display: inline;
  margin: 0;
  padding: 0;
}
body.smallhead div#smallhead {
  margin-bottom: 0px;
  padding: 2px 0;
}
body.smallhead div#ft {
  margin-top: 0px;
}
body.smallhead div#wrapper {
  padding: 15px 0;
}
p#commentwarning {
  padding: 0.4em;
  border: 1px dotted var(--color-comment-warning-border);
  background-color: var(--color-comment-warning-bg);
}
div#comment-wrapper {
  width: 940px;
  margin-left: 35px;
}
div#comments {
  float: left;
  width: 620px;
  padding-right: 35px;
  padding-top: 1em;
}
div#comments p {
  overflow: auto;
  margin-bottom: 0.6em;
}
div#comments ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#comments li {
  margin: 0 0 1em 0;
  font-size: 0.9em;
}
div#comments li li {
  font-size: 1em;
}
div#comments li ul {
  list-style-type: square;
  padding-left: 1em;
}
div#comments li ol {
  padding-left: 1em;
  list-style-type: decimal;
}
div#comments blockquote {
  margin: 1em 1.5em;
}
div#comments em {
  font-style: italic;
}
div#comments q {
  font-style: italic;
}
div#comments p.commentFooter {
  font-size: 0.85em;
  position: relative;
  top: 5px;
  margin: 10px 0 0 45px;
  color: var(--color-text-muted);
}
div#comments ol li {
  background-image: url(/static/css/img/comment-top-grey.gif);
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 0 2em 0;
}
div#comments ol li li {
  background: none;
  margin: 0 0 1em 0;
}
div#comments div.comment {
  padding: 1em 1em 0 1em;
  background-image: url(/static/css/img/comment-bottom-grey.gif);
  background-repeat: no-repeat;
  background-position: bottom;
}
div#comments ol li.openid {
  background-image: url(/static/css/img/comment-top-orange.gif);
}
div#comments ol li.openid div.comment {
  background-image: url(/static/css/img/comment-bottom-orange.gif);
}
div#comments ol li.simon {
  background-image: url(/static/css/img/comment-top-purple.gif);
}
div#comments ol li.simon div.comment {
  background-image: url(/static/css/img/comment-bottom-purple.gif);
}
div#comments p.commentFooter a:link,
div#comments p.commentFooter a:visited {
  color: var(--color-text);
}
div#comments p.commentFooter a:hover,
div#comments p.commentFooter a:active {
  color: var(--color-text-muted);
}
div.commentpreview {
  font-size: 0.9em;
  padding: 0.5em;
  border: 2px solid var(--color-border);
  margin-bottom: 1em;
}
div#addcomment {
  float: left;
  padding: 1em 0;
  width: 280px;
}
div#addcomment p {
  font-size: 0.9em;
}
div#addcomment p.formrow {
  clear: both;
}
div#addcomment p.formrow label {
  float: left;
  width: 70px;
}
div#addcomment input.text {
  border: 1px solid var(--color-search-border);
  font-size: 1.05em;
  float: left;
  width: 206px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#addcomment textarea {
  border: 1px solid var(--color-search-border);
  padding: 3px;
  width: 270px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
body form.commentpreview ul.errorlist li {
  list-style-type: none;
  margin: 0;
  background-color: var(--color-purple-accent);
  color: white;
  padding: 3px 3px 1px 3px;
}
form.commentpreview p.formrow {
  margin-top: 5px;
  clear: both;
}
form.commentpreview p.formrow label {
  width: 4em;
  display: block;
  float: left;
}
form.commentpreview ul li {
  list-style-type: none;
  margin: 0 0 0 4em;
}
table.monthcalendar {
  border: 1px solid var(--color-border);
  width: 241px;
  margin-left: 1px;
  margin-bottom: 25px;
}
table.monthcalendar caption {
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
  padding-bottom: 4px;
}
table.monthcalendar caption a.nextprev {
  text-decoration: none;
  padding: 0 7px;
  border-bottom: none;
}
table.monthcalendar td,
table.monthcalendar th {
  font-size: 0.9em;
  border: 1px solid var(--color-border);
  text-align: center;
  width: 14.28%;
}
table.monthcalendar td strong {
  font-size: 1.1em;
}
table.monthcalendar td.today {
  border: 2px solid #888;
}
table.monthcalendar td a {
  display: block;
  padding: 1px 4px 0px 4px;
  text-decoration: none;
  border-bottom: none;
}
table.monthcalendar td a:link:focus,
table.monthcalendar td a:link:hover,
table.monthcalendar td a:link:active {
  border-bottom: none;
}
div#primary h2 {
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  line-height: 1.4em;
  border-bottom: 1px solid var(--color-border);
}
div#primary div.photoset {
  font-size: 0.9em;
  position: relative;
}
div#primary div.photoset p.meta {
  font-size: 0.9em;
}
div#primary div.segment {
  clear: both;
  padding: 0 0 0.75em 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75em;
}
div#primary div.blogmark {
  font-size: 0.9em;
}
div#primary div.blogmark p,
div#primary div.quote p,
div#primary .elsewhere-in-primary p:not(:last-child) {
  margin-bottom: 0.8em;
}
div#primary div.photoset img.primary {
  background-image: url(/static/css/img/set_case.png);
  padding: 8px 8px 12px 8px;
  background-repeat: no-repeat;
  margin-right: 8px;
}
div#primary div.photoset a.primary:link,
div#primary div.photoset a.primary:visited,
div#primary div.photoset a.primary:hover,
div#primary div.photoset a.primary:active {
  float: left;
}
div#primary div.quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  border-left: none;
}
/* The text-indent is ignored on the first paragraph if it
is also the last paragraph (because it is inline), so in
the case where there is only one contained paragraph we
indent the blockquote itself. */
div#primary div.quote > blockquote:has(p:only-child),
div#primary div.quote > blockquote p:first-child {
  text-indent: 23px;
}
/* But not on nested blockquote */
div#primary div.quote blockquote blockquote:has(p:only-child),
div#primary div.quote blockquote  blockquote p:first-child {
  text-indent: 0;
}

div#primary div.quote > blockquote p:last-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
div#primary div.quote p.cite {
  font-size: 0.9em;
  text-indent: 16px;
}

div#primary div.note p:not(.date-and-tags) {
  margin-bottom: 1em;
}

ul#searchorder {
  border-bottom: 1px solid var(--color-text);
  margin: 0 0 0.5em 0;
  padding: 0;
  height: 1em;
}
ul#searchorder li {
  display: block;
  float: left;
  border: 1px solid var(--color-text);
  margin: 0 0 0 1em;
  line-height: 1em;
  position: relative;
  top: -2px;
  padding-top: 1px;
}
ul#searchorder li.selected {
  border-bottom: 1px solid var(--color-bg);
}
ul#searchorder a {
  line-height: 1em;
  padding: 0.2em 1em;
  text-decoration: none;
  font-size: 0.8em;
}
.quote blockquote br,
div#secondary div.day br {
  display: block;
  line-height: 0;
  margin-bottom: 0.3em;
}
div.paginator {
  clear: both;
  padding: 0.5em 0;
  font-size: 0.9em;
}
.pagination {
  margin-bottom: 1em;
}
.paginator a {
  text-decoration: none;
}
.paginate-pages {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-first,
.paginate-last {
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  font-weight: bold;
}
.paginate-previous,
.paginate-next {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-link {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
}
.paginate-current {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  font-weight: bold;
  background-color: var(--color-purple-accent);
  color: white;
}
p#tagcloud {
  font-size: 1.2em;
  line-height: 1.9em;
  text-align: center;
  margin-top: 1.5em;
}
p#tagcloud .not-popular-at-all {
  font-size: 0.7em;
}
p#tagcloud .not-very-popular {
  font-size: 0.89em;
}
p#tagcloud .somewhat-popular {
  font-size: 1.07em;
}
p#tagcloud .somewhat-more-popular {
  font-size: 1.26em;
}
p#tagcloud .popular {
  font-size: 1.44em;
}
p#tagcloud .more-than-just-popular {
  font-size: 1.63em;
}
p#tagcloud .very-popular {
  font-size: 1.81em;
}
p#tagcloud .ultra-popular {
  font-size: 2em;
}
p#currenttags .more {
  text-decoration: none;
  border: none;
}
div#wrapper div.wide {
  width: 640px;
}
div.help {
  font-size: 0.9em;
  border: 1px solid var(--color-help-border);
  background-color: var(--color-help-bg);
  padding: 0.5em 45px 0 0.8em;
  background-image: url(/static/css/img/questionmark.png);
  background-repeat: no-repeat;
  background-position: top right;
}
div.help p {
  margin: 0 0 1em 0;
}

.search-input,
.search-submit {
  border: 1px solid var(--color-search-border);
  padding: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
.search-input {
  width: 80%;
  background-color: var(--color-bg);
  color: var(--color-text);
}
.search-submit {
  background-color: var(--color-link);
  color: white;
  cursor: pointer;
}
div p.search-selections {
  margin-top: 0.5em;
  font-size: 0.8em;
}
a.selected-tag {
  border: 1px solid var(--color-border-dark);
  text-decoration: none;
  padding: 2px 5px;
  background-color: var(--color-selected-tag-bg);
  color: var(--color-text);
}
div p.search-selections .filters {
  padding-right: 0.6em;
}

.archive-h2 {
  font-size: 1.4em;
}
h3.blog-mixed-list-year {
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-size: 1.2em;
}

.elsewhere-date {
  display: none;
}

#primary .elsewhere-in-primary {
  display: none;
}

@media (max-width: 964px) {
  div.entry {
    max-width: 680px;
  }
  div.entry p.mobile-date {
    display: block;
  }
  #primary .elsewhere-in-primary {
    display: block;
  }
  .elsewhere-date {
    display: inline;
  }
  .hide-secondary-on-mobile {
    display: none;
  }
  div#secondary {
    float: none;
    width: auto;
    padding-top: 15px;
    clear: both;
  }
  div#primary {
    width: 100%;
  }
  div#wrapper {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 10px;
  }
  body.smallhead div#wrapper {
    width: auto;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    background-image: none;
  }
  div#bighead-inner {
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
  div#bighead h1 {
    font-size: 1.5em;
  }
  div#smallhead #smallhead-inner {
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
  }
  div#searchbox {
    display: none;
  }
  p.this-is {
    display: none;
  }
  object,
  img {
    max-width: 100%;
  }
  p#currenttags {
    width: auto;
  }
}

/*!
 * GitHub Light v0.5.0
 * Copyright (c) 2012 - 2017 GitHub, Inc.
 * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
 */

.pl-c /* comment, punctuation.definition.comment, string.comment */ {
  color: var(--color-code-comment);
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
  color: var(--color-code-constant);
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
  color: var(--color-code-entity);
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
  color: var(--color-code-variable);
}

.pl-ent /* entity.name.tag, markup.quote */ {
  color: var(--color-code-tag);
}

.pl-k /* keyword, storage, storage.type */ {
  color: var(--color-code-keyword);
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
  color: var(--color-code-string);
}

.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
  color: var(--color-code-value);
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
  color: #b31d28;
}

.pl-ii /* invalid.illegal */ {
  color: #fafbfc;
  background-color: #b31d28;
}

.pl-c2 /* carriage-return */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2::before /* carriage-return */ {
  content: "^M";
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  font-weight: bold;
  color: #22863a;
}

.pl-ml /* markup.list */ {
  color: #735c0f;
}

.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
  font-weight: bold;
  color: #005cc5;
}

.pl-mi /* markup.italic */ {
  font-style: italic;
  color: #24292e;
}

.pl-mb /* markup.bold */ {
  font-weight: bold;
  color: #24292e;
}

.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
  color: #b31d28;
  background-color: #ffeef0;
}

.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
  color: #22863a;
  background-color: #f0fff4;
}

.pl-mc /* markup.changed, punctuation.definition.changed */ {
  color: #e36209;
  background-color: #ffebda;
}

.pl-mi2 /* markup.ignored, markup.untracked */ {
  color: #f6f8fa;
  background-color: #005cc5;
}

.pl-mdr /* meta.diff.range */ {
  font-weight: bold;
  color: #6f42c1;
}

.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
  color: #586069;
}

.pl-sg /* sublimelinter.gutter-mark */ {
  color: #959da5;
}

.pl-corl /* constant.other.reference.link, string.other.link */ {
  text-decoration: underline;
  color: #032f62;
}

/* Custom page templates */
.entry-wide div#primary {
  width: auto;
  margin: 0 1em;
  float: none;
  max-width: 98%;
}
.entry-wide div#wrapper {
  overflow: visible;
}

body.homepage .hide-on-homepage {
  display: none;
}

#h1-nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.5rem;
}
#h1-nav-wrapper h1 {
  margin-right: 0;
  margin-bottom: 0;
}
#h1-nav-wrapper nav {
  display: flex;
  align-items: center;
}
#h1-nav-wrapper ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
#h1-nav-wrapper li {
  display: inline;
}
#h1-nav-wrapper li a {
  border-bottom: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}
#h1-nav-wrapper li a:hover {
  color: var(--color-burgundy);
}

/* Tag styles */
a.item-tag,
a.item-tag:link,
a.item-tag:visited {
  display: inline-block;
  background-color: var(--color-tag-bg);
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--color-tag-border);
  border-bottom: 1px solid var(--color-tag-border);
  text-decoration: none;
  color: var(--color-tag-text);
  margin-right: 0.3em;
  margin-bottom: 0.5em;
}
a.item-tag:hover,
a.item-tag:link:hover,
a.item-tag:visited:hover {
  background-color: var(--color-purple-hover);
}
#bighead a.item-tag,
#bighead a.item-tag:link,
#bighead a.item-tag:visited {
  padding: 0px 8px;
}
.item-tag span {
  color: var(--color-tag-count);
  font-size: 0.6em;
  vertical-align: middle;
}

/* Nested lists - used on /2020/ page

/* Inline #3 | http://0.0.0.0:8033/2019/ */

div.entry li li {
  margin-bottom: 0.2em;
}
div.entry ul ul {
  margin-bottom: 0;
}
div.entry li li:first-of-type {
  margin-top: 0.2em;
}

.card-container img {
  display: block;
  max-width: 100%;
}

a:link.photoswipe-img,
a:visited.photoswipe-img,
a:hover.photoswipe-img,
a:focus.photoswipe-img,
a:active.photoswipe-img {
  border: none;
}

div.ea-placement a:link {
  border-bottom: none;
}

.recent-articles {
  margin-top: 1em;
}
.recent-articles li {
  list-style-type: square;
  margin-left: 1em;
  margin-bottom: 0.1em;
}

.tag-description {
  margin-bottom: 1em;
}

/* Theme toggle button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5em;
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
#theme-toggle:hover {
  opacity: 1;
}
#theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Edit page link */
body div .edit-page-link {
  margin-top: 0.5em;
}
a.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  padding: 3px 8px;
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.edit-link:hover {
  background-color: var(--color-purple-hover);
}
a.edit-link svg {
  flex-shrink: 0;
}
a.random-post-link {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-top: 0.3em;
  margin-right: 0.75em;
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.random-post-link:hover {
  background-color: var(--color-purple-hover);
  border-bottom: 1px solid var(--color-purple-border);
}
a.random-post-link svg {
  flex-shrink: 0;
}
a.random-tag-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-right: 1em;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}
a.random-tag-nav:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
a.random-tag-nav svg {
  flex-shrink: 0;
}