.w77p6cz-a{border-bottom:1px solid;background:white}.w77p6cz-a header{display:flex;gap:1em;align-items:center;padding:1rem 4rem;@media (max-width:749px){flex-direction:column}.w77p6cz-a &.frontpage{background:url(data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%2020%208%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%2220%22%20height=%224%22%20fill=%22white%22%20fill-opacity=%220.3%22/%3E%3C/svg%3E)center/10px 4px repeat,url(/front_header.jpg)center/cover no-repeat;padding-block:4rem;flex-direction:column;text-align:center}}.w77p6cz-a img{height:3.5rem;width:auto}
.wgx9ykkyb{align-self:end}.wgx9ykkyb footer{background:#201917;color:white;padding:2rem 4rem;display:flex;gap:3em;flex-wrap:wrap;justify-content:center}.wgx9ykkyb ul{list-style:none;display:flex;gap:1em;padding-inline-start:0}.wgx9ykkyb a{color:var(--color-orange-300);.wgx9ykkyb &:visited{color:var(--color-orange-400)}.wgx9ykkyb &:is(:hover,:focus){color:var(--color-orange-200)}}
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: .2s;
}

html {
  --color-orange-50: oklch(0.98 0.016 73.684);
  --color-orange-100: oklch(0.954 0.038 75.164);
  --color-orange-200: oklch(0.901 0.076 70.697);
  --color-orange-300: oklch(0.837 0.128 66.29);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-orange-500: oklch(0.705 0.213 47.604);
  --color-orange-600: oklch(0.646 0.222 41.116);
  --color-orange-700: oklch(0.553 0.195 38.402);
  --color-orange-800: oklch(0.47 0.157 37.304);
  --color-orange-900: oklch(0.408 0.123 38.172);
  --color-orange-950: oklch(0.266 0.079 36.259);

  /* via https://www.fluid-type-scale.com/ */
  --text-sm: clamp(0.8rem, 0.24vi + 0.74rem, 0.93rem);
  --text-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
  --text-md: clamp(1.25rem, 0.48vi + 1.13rem, 1.51rem);
  --text-lg: clamp(1.56rem, 0.67vi + 1.4rem, 1.93rem);
  --text-xl: clamp(1.95rem, 0.92vi + 1.72rem, 2.46rem);
  --text-xxl: clamp(2.44rem, 1.27vi + 2.12rem, 3.14rem);
  --text-xxxl: clamp(3.05rem, 1.73vi + 2.62rem, 4rem);

  --lead: 1.4;

  font: normal var(--text-base)/var(--lead) Inter,Roboto,'Helvetica Neue','Arial Nova','Nimbus Sans',Arial,sans-serif;
  color: oklch(21.6% 0.006 56.043);
  background-color: oklch(98.4% 0.003 247.858);
  background-image:
    radial-gradient(50vw 50vh at left 10vh, white, #fff0),
    radial-gradient(60vw 70vh at 95% 40vh, oklch(93.2% 0.032 255.585), oklch(93.2% 0.032 255.585 / 0)),
    radial-gradient(40vw 40vh at 18% 80vh, oklch(95.3% 0.051 180.801), oklch(95.3% 0.051 180.801 / 0)),
    radial-gradient(30vw 30vh at 64% 20vh, oklch(90.3% 0.076 319.62), oklch(90.3% 0.076 319.62 / 0));
  background-attachment: fixed;
}

body {
  margin: 0;
  @media (min-width: 400px) {
    display: grid;
  }
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  min-height: 100svh;
}

main {
  width: min(100svw, 55rem);
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

a {
  color: var(--color-orange-700);
  &:visited {
    color: var(--color-orange-800);
  }
  &:is(:hover, :focus) {
    color: var(--color-orange-600);
  }
}

h1, h2, h3, h4 {
  font-weight: normal;
}

h1 {
  font-size: var(--text-xxxl);
  line-height: 1.2;
}

h2 {
  font-size: var(--text-xxl);
  margin-block: calc(var(--lead) * 2rem) calc(var(--lead) * 1rem)
}

h3 {
  font-size: var(--text-xl);
  margin-block: calc(var(--lead) * 1rem) calc(var(--lead) * .5rem)
}

h4 {
  font-size: var(--text-lg);
  margin-block: calc(var(--lead) * 1rem) calc(var(--lead) * .5rem)
}

blockquote {
  border-inline-start: .2rem solid #0003;
  margin-inline-start: 0;
  padding-inline-start: 1.8rem;
  font-style: italic;
  color: #000b;
}

img {
  max-width: 100%;
  height: auto;
}


:where(:focus-visible) {
  outline: 2px solid var(--color-orange-300);
  outline-offset: 2px;
}

.post-list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1em;
  & li {
    display: grid;
  }
}

.post-teaser {
  --margin: 1.0em;
  display: flex;
  flex-direction: column;
  background-color: oklch(98.4% 0.003 247.858);
  box-shadow: inset 0 0 0 1px #0002;
  border-radius: 5px;
  &:focus-within {
    outline: 2px solid var(--color-orange-300);
    outline-offset: 2px;
  }
  & img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 240/150;
    object-fit: cover;
  }
  & aside {
    padding: var(--margin) var(--margin) calc(var(--margin) / 2);
  }
  & h2 {
    margin: 0;
    font-size: var(--text-lg);
  }
  .post-teaser_image,
  .post-teaser_title {
    &:focus-visible {
      outline: none;
    }
  }
  .post-teaser_title {
    hyphens: auto;
    text-wrap: balance;
    padding: calc(var(--margin) / 2) var(--margin) var(--margin);
    flex: 1 0 1fr;
  }
  .post-teaser_abstract {
    hyphens: auto;
    padding: 0 var(--margin) var(--margin);
    flex: 1 0 1fr;
  }
}

.post-byline {
  font-size: var(--text-sm);
}

.post-image {
  width: calc(100% + 2rem);
  max-width: none;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  margin-inline: -1rem;
  margin-bottom: -50%;
  position: relative;
  z-index: -1;
  mask-image: linear-gradient(black, black 10%, #000a 20%, #0006 30%, #0002 50%, transparent);
  @media (min-width: 1400px) {
    margin-inline: -10rem;
    width: calc(100% + 20rem);
    margin-bottom: -60%;
  }
}

.post-tools {
  display: flex;
  gap: 1em;
  button, a {
    border: 2px solid;
    border-radius: .1em;
    color: var(--color-orange-950);
    background: white;
    display: inline-block;
    padding: .2em .4em .2em .2em;
    text-decoration: none;
    font: inherit;
    &:where(:hover, :focus) {
      color: var(--color-orange-800);
    }
  }
  i {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    text-align: center;
    line-height: 1.2em;
    vertical-align: middle;
    box-shadow: inset 0 0 5px #0003;
    border-radius: .2em;
  }
}

.share-dialog {
  .preview {
    display: flex;
    flex-direction: column;
    gap: .25em;
  }
  .title {
    font-weight: bold;
  }
  .url {
    color: oklch(0.553 0.195 218.402);
  }
  .img {
    max-width: 340px;
    margin-inline: auto;
  }
  & form {
    float: inline-end;
    margin: 0 0 .2em .2em;
  }
  & ul {
    display: flex;
    gap: .5em;
    padding-inline-start: 0;
    list-style: none;
  }
  & button, .btn {
    border: 2px solid;
    border-radius: .1em;
    color: var(--color-orange-950);
    background: white;
    display: inline-block;
    padding: .2em .4em .2em .2em;
    text-decoration: none;
    font: inherit;
    &:where(:hover, :focus) {
      color: var(--color-orange-800);
    }
  }
}
/**
 * Darcula theme
 *
 * Adapted from a theme based on:
 * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
 *
 * @author Alexandre Paradis <service.paradis@gmail.com>
 * @version 1.0
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #a9b7c6;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	color: inherit;
	background: rgba(33, 66, 131, .85);
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	color: inherit;
	background: rgba(33, 66, 131, .85);
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #2b2b2b;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.cdata {
	color: #808080;
}

.token.delimiter,
.token.boolean,
.token.keyword,
.token.selector,
.token.important,
.token.atrule {
	color: #cc7832;
}

.token.operator,
.token.punctuation,
.token.attr-name {
	color: #a9b7c6;
}

.token.tag,
.token.tag .punctuation,
.token.doctype,
.token.builtin {
	color: #e8bf6a;
}

.token.entity,
.token.number,
.token.symbol {
	color: #6897bb;
}

.token.property,
.token.constant,
.token.variable {
	color: #9876aa;
}

.token.string,
.token.char {
	color: #6a8759;
}

.token.attr-value,
.token.attr-value .punctuation {
	color: #a5c261;
}

.token.attr-value .punctuation:first-child {
	color: #a9b7c6;
}

.token.url {
	color: #287bde;
	text-decoration: underline;
}

.token.function {
	color: #ffc66d;
}

.token.regex {
	background: #364135;
}

.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.inserted {
	background: #294436;
}

.token.deleted {
	background: #484a4a;
}

code.language-css .token.property,
code.language-css .token.property + .token.punctuation {
	color: #a9b7c6;
}

code.language-css .token.id {
	color: #ffc66d;
}

code.language-css .token.selector > .token.class,
code.language-css .token.selector > .token.attribute,
code.language-css .token.selector > .token.pseudo-class,
code.language-css .token.selector > .token.pseudo-element {
	color: #ffc66d;
}