.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);
    }
  }
}