/* For all media types | MIT License */

@layer variable, default, component, experimental, test;

@layer variable {
  :root {
    /* Text */
    --text-small: round(0.75rem, 1px);
    --text-default: 1rem;
    --text-large: round(1.2rem, 1px);
    --text-huge: round(1.6rem, 1px);

    /* Leading */
    --leading-small: 1.2;
    --leading-default: 1.6;

    /* Space */
    --space-v-tiny: 0.125rlh;
    --space-v-small: 0.5rlh;
    --space-v-default: 1rlh;
    --space-v-large: 3rlh;
    --space-v-huge: 6rlh;
    --space-h-default: 1rem;
    --space-h-large: 2rem;

    /* Color */
    --color-bg: oklch(96% 6% 96deg);
    --color-link: oklch(51% 51% 264deg);

    /* Other */
    --line-count: 26;
    --line-length: 36;

    /* Generated */
    --half-leading: calc((1lh - 1cap) / 2);
    --space-v-rect: calc(var(--space-v-default) + var(--half-leading));
    --color-bg-rect: color-mix(in oklch, var(--color-bg), black 3%);
    --color-fg: color-mix(in oklch, var(--color-bg), black 57%);
    --color-lighten: color-mix(in oklch, currentcolor, white);
  }
}

@layer default {
  /* Root */
  html {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: sans-serif;
    font-size: max(100%, 20px);
    line-height: var(--leading-default);
    scrollbar-gutter: stable;
    text-autospace: normal;
    text-spacing-trim: trim-start;
  }

  /* Sections */
  body {
    --padding-inline-body: 5lvw;
    --max-inline-size-body: calc(var(--line-length) * 1ic);
    --margin-inline-start-body: clamp(
      0lvw,
      (100% - var(--padding-inline-body) * 2 - var(--max-inline-size-body)) / 2,
      10lvw
    );

    margin: 5svh auto 30svh var(--margin-inline-start-body);
    max-inline-size: var(--max-inline-size-body);
    padding-inline: var(--padding-inline-body);
  }

  h1 {
    font-size: var(--text-huge);
    font-weight: normal;
    line-height: var(--leading-small);
    margin-block: var(--space-v-huge);
  }

  h2 {
    font-size: var(--text-large);
    line-height: var(--leading-small);
    margin-block: var(--space-v-large) 0;
  }

  h3 {
    font-size: var(--text-default);
    margin-block: var(--space-v-large) 0;
  }

  /* Grouping Content */
  p {
    margin-block: var(--space-v-default) 0;

    :is(h2, h3, header) + & {
      margin-block-start: var(--space-v-tiny);
    }
  }

  hr {
    border: none;
    color: inherit;
    margin-block: var(--space-v-large);
    margin-inline-start: var(--space-h-large);

    &::before {
      content: "⋆ ⋆ ⋆" / "";
    }
  }

  pre {
    background-color: var(--color-bg-rect);
    font-family: monospace, "Dummy Font";
    font-size: inherit;
    margin-block: var(--space-v-rect);
    overflow-x: auto;
    padding: var(--space-v-small) var(--space-h-default);
    tab-size: 4;
    text-autospace: no-autospace;
    text-spacing-trim: space-all;
  }

  blockquote {
    margin: var(--space-v-default) 0 0 var(--space-h-large);
  }

  :is(ol, ul) {
    margin-block: var(--space-v-default) 0;
    padding-inline-start: var(--space-h-large);

    & & {
      margin-block-start: 0;
    }
  }

  li {
    margin-block-start: var(--space-v-tiny);
  }

  figure {
    margin: var(--space-v-rect) 0;
  }

  figcaption {
    font-size: var(--text-small);
  }

  /* Text-level Semantics */
  a {
    color: var(--color-link);
    text-decoration-color: var(--color-lighten);
    text-underline-offset: calc(var(--half-leading) / 2);

    &:has(img) {
      display: inline-block;
      inline-size: 100%;
    }
  }

  em {
    font-style: normal;
    font-weight: bold;
  }

  time {
    text-autospace: no-autospace;
  }

  :is(code, samp, kbd) {
    font-family: monospace, "Dummy Font";
    font-size: inherit;
  }

  mark {
    background-color: color-mix(in oklch, var(--color-bg), orange);
    color: inherit;
  }

  /* Edits */
  ins {
    text-decoration: none;
  }

  /* Embedded Content */
  :is(img, svg) {
    background-color: var(--color-bg-rect);
    block-size: auto;
    box-sizing: border-box;
    display: inline-block;
    max-block-size: 100%;
    max-inline-size: 100%;
    vertical-align: bottom;
  }

  svg {
    fill: currentcolor;
  }

  /* Tabular Data */
  table {
    border-spacing: 0;
    display: block;
    margin-block: var(--space-v-rect);
    max-inline-size: 100%;
    overflow-x: auto;
  }

  :is(td, th) {
    background-color: var(--color-bg-rect);
    padding: var(--space-v-small) var(--space-h-default);
    text-wrap-mode: nowrap;
    vertical-align: top;
    white-space-collapse: preserve-breaks;
  }

  td {
    border-block-start-style: solid;
    border-block-start-width: thin;
  }

  th {
    text-align: inherit;
    border-block-end-style: solid;
    border-block-end-width: thin;
  }

  /* Universal */
  [id] {
    scroll-margin-block-start: var(--space-v-large);
  }

  :is(pre, figure, table) {
    & + & {
      margin-block-start: calc(var(--space-v-rect) + var(--half-leading));
    }
  }
}

@layer component {
  /* Archives */
  .archives {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-v-tiny) var(--space-h-default);
    list-style-type: none;
    padding-inline-start: 0;
  }

  .archives li {
    margin-block-start: 0;
  }

  /* Back */
  .back {
    margin-block-start: 0;

    & a {
      color: inherit;
      text-decoration: none;
    }
  }

  /* Date */
  .date {
    font-size: var(--text-small);

    &:has(+ h1) {
      margin-block-start: var(--space-v-huge);
    }

    & + * {
      margin-block-start: var(--space-v-tiny);
    }
  }

  /* Excerpt */
  .excerpt {
    a:has(&) {
      text-decoration: none;
    }

    & p {
      color: var(--color-fg);
    }

    & h3 {
      text-decoration-line: underline;
      text-decoration-color: var(--color-lighten);
    }
  }

  /* Logo */
  .logo {
    line-height: 1;
    margin-block: 0;

    & svg {
      background-color: transparent;
      color: var(--color-fg);
      inline-size: 1em;
      max-inline-size: none;
    }
  }

  /* Mat */
  .mat {
    & img {
      aspect-ratio: 16 / 9;
      background-color: white;
      block-size: auto;
      inline-size: 100%;
      object-fit: contain;
      padding: calc(var(--space-v-default) + var(--half-leading));
    }
  }

  /* Page Footer */
  .page-footer {
    font-size: var(--text-small);

    &::before {
      content: "⋯⋯⋯" / "";
      display: block;
      margin-block-start: var(--space-v-huge);
    }
  }

  /* Page Header */

  /* Showcase */
  .showcase {
    align-items: safe end;
    display: grid;
    gap: var(--space-v-rect) var(--space-h-default);
    grid-template-columns: repeat(
      auto-fill,
      minmax(
        round(
          down,
          min(
            (100% - var(--padding-inline-body) * 2 + var(--space-h-default)) /
              2 - var(--space-h-default),
            (var(--max-inline-size-body) + var(--space-h-default)) / 4 -
              var(--space-h-default)
          ),
          1px
        ),
        1fr
      )
    );
    list-style-type: none;
    margin-block-start: var(--space-v-rect);
    padding-inline-start: 0;

    & li {
      margin-block-start: 0;
    }

    & p {
      font-size: var(--text-small);
      overflow-x: clip;
      text-wrap: nowrap;

      &:first-of-type {
        margin-block-start: var(--space-v-tiny);
      }

      & + p {
        margin-block-start: 0;
      }
    }

    &.oneline {
      display: flex;
      overflow-x: scroll;

      & li {
        min-inline-size: calc(100% / 3);
      }
    }
  }

  /* Site Menu */
  .site-menu {
    ul {
      list-style-type: none;
      margin-block: var(--space-v-huge);
      padding-inline-start: 0;
    }

    li:nth-last-child(2) {
      margin-block-start: var(--space-v-default);
    }
  }
}

/* stylelint-disable */
@layer experimental {
  /* Scroll smoothly when in-page navigation triggers */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  /* Crossfade when navigation triggers */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }
}
/* stylelint-enable */