@charset "UTF-8";

/* 
=============================================================================
CUSTOM PROPERTIES
=============================================================================
*/
:root {
  /* Palette */
  --black: light-dark(#575279, #393b44);
  --red: light-dark(#b4637a, #c94f6d);
  --green: light-dark(#618774, #81b29a);
  --yellow: light-dark(#ea9d34, #dbc074);
  --blue: light-dark(#286983, #719cd6);
  --magenta: light-dark(#907aa9, #9d79d6);
  --cyan: light-dark(#56949f, #63cdcf);
  --white: light-dark(#e5e9f0, #dfdfe0);
  --orange: light-dark(#d7827e, #f4a261);
  --pink: light-dark(#d685af, #d67ad2);

  --dim-black: light-dark(#504c6b, #30323a);
  --dim-red: light-dark(#a5576d, #ab435d);
  --dim-green: light-dark(#597668, #6e9783);
  --dim-yellow: light-dark(#dd9024, #baa363);
  --dim-blue: light-dark(#295e73, #6085b6);
  --dim-magenta: light-dark(#816b9a, #8567b7);
  --dim-cyan: light-dark(#50848c, #54aeb0);
  --dim-white: light-dark(#c8cfde, #bebebe);
  --dim-foreground: light-dark(#4c4769, #aeafb0);

  --bright-black: light-dark(#5f5695, #575860);
  --bright-red: light-dark(#c26d85, #d16983);
  --bright-green: light-dark(#629f81, #8ebaa4);
  --bright-yellow: light-dark(#eea846, #e0c989);
  --bright-blue: light-dark(#2d81a3, #86abdc);
  --bright-magenta: light-dark(#9a80b9, #baa1e2);
  --bright-cyan: light-dark(#5ca7b4, #7ad5d6);
  --bright-white: light-dark(#e6ebf3, #e4e4e5);
  --bright-foreground: light-dark(#625c87, #d6d6d7);

  --foreground: light-dark(#575279, #cdcecf);
  --background: light-dark(#faf4ed, #192330);

  --gradient-border: linear-gradient(
    to right,
    var(--foreground),
    var(--green),
    var(--foreground)
  );

  /* Layout */
  --measure: 60ch;
  --column-min-width: calc(1/3 * 100vw);
  --column-max-width: 100%;

  --default-border-radius: 0.5rem;

  --breakout-xxs: 2rem;
  --breakout-xs: 4rem;
  --breakout-sm: 8rem;
  --breakout-md: 12rem;
  --breakout-lg: 16rem;
  --breakout-xl: 24rem;
  --breakout-xxl: 32rem;

  /* Responsive layout */
  @media (min-width: 500px) {
    --column-max-width: var(--measure);
  }

  &:has(input[name="theme-switcher"][value="light dark"]:checked) {
    color-scheme: light dark;
  }

  &:has(input[name="theme-switcher"][value="light"]:checked) {
    color-scheme: light;
  }

  &:has(input[name="theme-switcher"][value="dark"]:checked) {
    color-scheme: dark;
  }
}

/*
=============================================================================
BASE
=============================================================================
 */
html {
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: var(--column-min-width);
  max-width: var(--column-max-width);
  margin: 0 auto;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.6;

  @media (max-width: 500px) {
    padding: 0 1.5rem;
  }

  & > footer {
    border-image-slice: 1;
    border-image-source: var(--gradient-border);
    border-image-width: 1px 0 0 0;
    border-top: 1px solid;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: auto;
    padding-top: 0.5rem;

    @media (max-width: 500px) {
      flex-direction: column;
      gap: 2rem;
    }

    h2 {
      font-size: clamp(1.2rem, 2.5vw, 1.7rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1;
    }

    section div {
      display: flex;
      flex-direction: row;
      gap: 0.25rem;
    }

    & > section[aria-label="Follow me"] a {
      background-color: var(--green);
      display: inline-block;
      height: 3rem;
      mask-size: cover;
      width: 3rem;

      &:hover {
        background-color: var(--blue);
      }

      &#atom {
        mask-image: url("/static/images/rss.svg");
      }

      &#mastodon {
        mask-image: url("/static/images/mastodon.svg");
      }

      &#xmpp {
        mask-image: url("/static/images/xmpp.svg");
      }

      &#email {
        mask-image: url("/static/images/email.svg");
      }
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }
}

/*
=============================================================================
TYPOGRAPHY
=============================================================================
*/

/* --- Headings --- */
h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  margin: 1rem 0;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  margin: 1rem 0;
}

h4 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  margin: 1rem 0;
  color: var(--green);
}

h5 {
  font-size: clamp(1.2rem, 1.5vw, 1.3rem);
  font-style: italic;
  font-weight: 200;
  line-height: 1.2;
  margin: 1rem 0;
  color: var(--blue);
}

h6 {
  font-size: clamp(1.2rem, 1.2vw, 1.2rem);
  font-style: italic;
  font-weight: 200;
  line-height: 1.2;
  margin: 1rem 0;
  color: var(--magenta);
}

/* --- Body text --- */
p {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.5em;
  margin: 0;
  text-align: justify;
  text-wrap: pretty;
  word-spacing: 0.16em;

  &.center {
    text-align: center;
  }
}

/* --- Lists --- */
ul,
ol,
dl {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 2rem;
}

li,
dd {
  max-inline-size: var(--measure);
}

/* --- Rules --- */
hr {
  border: 0;
  border-top: 2px solid var(--blue);
  margin: 1em 0;
}

/* --- Links --- */
a {
  color: var(--green);
  text-decoration: none;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;

  &:hover {
    color: var(--blue);
  }
}

/* 
=============================================================================
SKIP LINK (accessibility)
=============================================================================
 */
.skip-link {
  background: #fff;
  color: #000;
  left: 0;
  padding: 0.5rem 1rem;
  position: absolute;
  text-decoration: none;
  top: 0;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
  z-index: 1000;

  &:focus,
  &:focus-visible {
    transform: translateY(0);
  }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.display-none {
  display: none !important;
}

/* 
=============================================================================
SITE HEADER
=============================================================================
*/
body > header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-evenly;
  margin-top: 4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: var(--gradient-border);
  border-image-width: 0 0 1px 0;

  & > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.25rem;
  }

  svg {
    max-width: 4em;
    max-height: 4em;
    fill: var(--green);

    @media (max-width: 500px) {
      display: none;
    }
  }

  p {
    font-size: clamp(1.1rem, 2vw, 1.75rem);
    font-style: italic;
    max-width: unset;
  }

  /* --- Navigation --- */
  nav {
    ul {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    a[aria-current="page"] {
      color: var(--blue);

      &:hover {
        color: var(--bright-blue);
      }
    }
  }

  /* --- Theme switcher --- */
  fieldset {
    align-items: center;
    border: 0;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    justify-content: flex-start;
    margin: 0;
    padding: 0;

    input[type="radio"] {
      display: none;

      &:checked + span {
        background-color: var(--yellow);
      }
    }

    label span {
      background-color: var(--foreground);
      cursor: pointer;
      display: block;
      height: 1.5rem;
      mask-size: cover;
      width: 1.5rem;
    }
  }
}

#lightmode + span,
#automode + span,
#darkmode + span {
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
}

#lightmode + span {
  mask-image: url("/static/images/light.svg");
}

#automode + span {
  mask-image: url("/static/images/auto.svg");
}

#darkmode + span {
  mask-image: url("/static/images/dark.svg");
}

/*
=============================================================================
MAIN
=============================================================================
*/
main {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

/*
=============================================================================
ARTICLES
=============================================================================
*/
article {
  max-width: var(--column-max-width);
  min-width: var(--column-min-width);

  & > header {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 2rem;

    & > div {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      :has(& > nav) {
        max-width: calc(2 / 3 * 100%);
      }

      /* --- Article metadata --- */
      & > dl {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 1rem;
        gap: calc(1 / 3 * 1rem);
        margin: 0;

        div {
          align-items: center;
          border: 1px solid var(--foreground);
          border-radius: var(--default-border-radius);
          display: flex;
          flex-direction: row;
        }

        dt {
          color: var(--bright-blue);
          padding-left: calc(1 / 3 * 1rem);
          padding-right: calc(1 / 3 * 1rem);
        }

        dd {
          margin: 0;
          padding-right: calc(1 / 3 * 1rem);

          a {
            color: var(--green);
          }
        }

        @media (max-width: 700px) {
          margin-top: 2rem;
        }

        @media (max-width: 500px) {
          flex-direction: column;
          align-items: flex-start;
        }
      }
    }

    h2 {
      margin-bottom: 0.25rem;
      margin-top: 0;
    }

    /* --- TOC --- */
    & > nav {
      border: 1px solid var(--foreground);
      border-radius: var(--default-border-radius);
      font-size: 1rem;
      line-height: 1.4;
      padding: 0.75rem;
      max-width: calc(1 / 3 * 100%);

      & > p {
        color: var(--blue);
        font-size: 1em;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 0.5rem 0;
      }

      ol {
        font-size: 1em;
        line-height: 1.4;
        margin: 0;
        padding-left: 1.5em;

        ol {
          margin-top: 0.25rem;
          padding-left: 1.25em;
        }
      }

      li {
        max-inline-size: none;

        & + li {
          margin-top: 0.25rem;
        }
      }

      a {
        overflow-wrap: anywhere;
      }

      @media (max-width: 700px) {
        margin-top: 2rem;
      }
    }
  }

  /* --- Article body --- */
  p {
    max-inline-size: var(--measure);

    & + p {
      margin-top: 1.25rem;
    }
  }

  & h3:not(:first-of-type) {
    margin-top: 2rem;
  }

  & h3 {
    color: var(--green);
  }

  & blockquote {
    font-style: italic;
    border-left: 2px solid var(--blue);
    margin: 1em 0.5em 1em 0.5em;
    padding-left: 1em;

    p {
      max-inline-size: initial;

      i {
        font-style: normal;
      }
    }

    & + p:has(cite) {
      text-align: right;
      font-size: 1rem;
      margin-left: auto;
      color: var(--dim-foreground);

      a {
        color: var(--dim-green);

        &:hover {
          color: var(--dim-blue);
        }
      }
    }
  }

  & > footer {
    margin-top: 1.5rem;
    color: var(--dim-foreground);
    font-style: italic;

    ul {
      display: block;
      font-size: 1.2rem;
      line-height: 1.5;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      display: inline;
      max-inline-size: none;
    }
    li:not(:first-child) {
      white-space: nowrap;
    }
  }

  /* --- Article separator --- */
  & + hr {
    align-items: center;
    background: none;
    border: 0;
    display: flex;
    height: 1em;
    justify-content: center;
    margin: 4em 0;
    position: relative;
    width: 100%;

    &::before {
      background-image: var(--gradient-border);
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      right: 0;
      top: 50%;
    }

    &::after {
      background-color: var(--background);
      color: var(--blue);
      content: "§";
      padding: 0 1rem;
      position: relative;
      transform: rotate(90deg);
      z-index: 1;
    }
  }
}

/*
=============================================================================
PAGINATION
=============================================================================
 */
nav:is(
  [aria-label="Page navigation"],
  [aria-label="Year archive navigation"],
  [aria-label="Monthly archive navigation"]
) {
  display: flex;
  flex-direction: row;
  justify-content: center;

  ol {
    align-items: center;
    border: 1px solid var(--foreground);
    border-radius: var(--default-border-radius);
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    list-style: none;
    margin: 2rem 0;
    padding: 0.25rem;
  }

  a,
  span {
    align-items: center;
    display: flex;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
    padding-inline: 0.5rem;
  }

  & a {
    border-radius: var(--default-border-radius);

    &:hover,
    &[aria-current="page"]:hover {
      background-color: var(--blue);
      color: var(--foreground);
    }

    &[aria-current="page"] {
      color: var(--blue);
    }
  }

  span[aria-disabled="true"] {
    color: var(--dim-foreground);
  }
}

/*
=============================================================================
IMAGES
=============================================================================
*/
img {
  height: auto;
  max-width: 100%;
}

figure:not(.trail) {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--foreground);
  border-radius: var(--default-border-radius);
  margin: 1rem 0;
  padding: 0.75rem;

  &:has(+ h3) {
    margin-top: 2rem;
  }

  &:not(p + figure):has(+ p + *) {
    margin-top: 0;
  }

  & > img {
    display: block;
    border-radius: var(--default-border-radius);
  }

  &.round > img {
    border-radius: 100%;
  }

  &:is(
      .w25,
      .w33,
      .w50,
      .w66,
      .w75,
      .breakout-xxs,
      .breakout-xs,
      .breakout-sm,
      .breakout-md,
      .breakout-lg,
      .breakout-xl,
      .breakout-xxl,
      .breakout-full
    )
    > img {
    width: 100%;
  }

  figcaption {
    color: var(--dim-foreground);
    font-size: 0.85em;
    line-height: 1.4;
    margin-top: 0.5rem;
    max-inline-size: none;
    overflow-wrap: anywhere;

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }

    p {
      font-size: inherit;
      line-height: inherit;
      max-inline-size: none;
      font-style: italic;

      & + p {
        margin-top: 0.75rem;
      }
    }

    ul,
    ol,
    dl {
      font-size: inherit;
      line-height: inherit;
      font-style: italic;
      margin-bottom: 0;
      margin-top: 0.5rem;
    }

    li,
    dd {
      max-inline-size: none;
    }

    details {
      margin-top: calc(1 / 3 * 1em);
      border: 1px dotted var(--blue);
      border-radius: var(--default-border-radius);
      padding: 0.5rem;

      summary {
        font-style: italic;
      }

      blockquote {
        border: 0;
        margin: inherit;
        padding-left: inherit;
      }

      hgroup {
        p {
          margin-bottom: 1rem;
        }
      }

      section + p {
        margin-top: 1rem;
      }
    }
  }

  & + p {
    margin-top: 0.75rem;
  }
}

img.round {
  border-radius: 100%;
}

:is(img, figure, .gallery) {
  &.center {
    display: block;
    margin-inline: auto;
  }

  &.left {
    float: left;
    margin-right: 0.75rem;
    margin-top: 0;
  }

  &.right {
    float: right;
    margin-left: 0.75rem;
    margin-top: 0;
  }

  &.w25 {
    width: 25%;
  }

  &.w33 {
    width: calc(1 / 3 * 100%);
  }

  &.w50 {
    width: 50%;
  }

  &.w66 {
    width: calc(2 / 3 * 100%);
  }

  &.w75 {
    width: 75%;
  }

  &.breakout-xxs {
    --breakout: var(--breakout-xxs);
  }

  &.breakout-xs {
    --breakout: var(--breakout-xs);
  }

  &.breakout-sm {
    --breakout: var(--breakout-sm);
  }

  &.breakout-md {
    --breakout: var(--breakout-md);
  }

  &.breakout-lg {
    --breakout: var(--breakout-lg);
  }

  &.breakout-xl {
    --breakout: var(--breakout-xl);
  }

  &.breakout-xxl {
    --breakout: var(--breakout-xxl);
  }

  &:is(
    .breakout-xxs,
    .breakout-xs,
    .breakout-sm,
    .breakout-md,
    .breakout-lg,
    .breakout-xl,
    .breakout-xxl
  ) {
    --actual-breakout: min(var(--breakout), calc((100vw - 100%) / 2));

    margin-left: calc(-1 * var(--actual-breakout));
    width: calc(100% + 2 * var(--actual-breakout));
    max-width: 100vw;
  }

  &.breakout-full {
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }

  @media (max-width: 500px) {
    &.left,
    &.right {
      float: none;
      margin: 2rem auto;
    }

    &.breakout-xs,
    &.breakout-sm,
    &.breakout-md,
    &.breakout-lg,
    &.breakout-xl {
      margin-left: calc(50% - 50vw);
      transform: none;
      width: 100vw;
    }
  }
}

article::after,
.clear {
  clear: both;
  content: "";
  display: block;
}

.missing-publication-date-warning {
  background: var(--red);
  color: var(--foreground);
  font-weight: 700;
  font-size: 1.1rem;
}

.missing-publication-date-warning > dt {
  color: var(--foreground);
}

.gallery {
  margin-block: 1rem;

  [data-direction] {
    display: flex;
    gap: var(--gap);
    width: 100%;
  }

  [data-direction="row"] {
    align-items: flex-start;
    flex-direction: row;

    & > div {
      flex: none;
      min-width: 0;
      width: var(--width);
    }
  }

  [data-direction="column"] {
    flex-direction: column;

    & > div {
      width: 100%;
    }
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--default-border-radius);
  }

  @media (max-width: 500px) {
    [data-direction] {
      flex-direction: column;
      width: 100%;
    }

    [data-direction] > div {
      flex: none;
      min-width: 0;
      width: 100%;
    }

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