@layer components {
  .blog-index {
    --blog-frame: 95rem;
    --blog-gutter: 1.25rem;
    --blog-indent: 1.25rem;
    --blog-node-y: .5rem;
    --blog-timeline-columns: minmax(10rem, 1fr) minmax(0, 44rem) minmax(0, 1fr);
    --blog-cross-mark: linear-gradient(var(--blog-cross), var(--blog-cross)) 0 5px / 11px 1px no-repeat,
      linear-gradient(var(--blog-cross), var(--blog-cross)) 5px 0 / 1px 11px no-repeat;
    isolation: isolate;
    padding-inline: var(--blog-gutter);
    position: relative;
    overflow-x: clip;

    @media (width >= 40rem) {
      --blog-gutter: 2.5rem;
    }

    @media (width >= 48rem) {
      --blog-indent: 1.5rem;
    }

    &:lang(zh) {
      --blog-node-y: calc(.5rem - 1px);
    }

    &:before {
      z-index: -1;
      pointer-events: none;
      content: "";
      background-image: radial-gradient(60% 70% at 18% 0, light-dark(oklch(100% .006 85 / .9), oklch(30% .006 80 / .2)), #0000 72%);
      height: min(56rem, 100%);
      position: absolute;
      inset: 0 0 auto;
    }

    & > * {
      max-width: var(--blog-frame);
      margin-inline: auto;
      margin-inline-start: max(0px, round(down, (100% - var(--blog-frame)) / 2, 1px));
    }
  }

  .blog-index :not(.blog-hatch-text)::selection {
    color: inherit;
    background-color: color-mix(in oklab, var(--blog-text) 16%, transparent);
  }

  .blog-masthead {
    padding-top: calc(3.75rem + round(clamp(4rem, 1rem + 8vw, 8rem), 1rem));
    padding-bottom: round(clamp(3.5rem, 2rem + 4vw, 6rem), 1rem);
  }

  @media (width >= 64rem){
    .blog-masthead.blog-rails:after {
      top: 3.75rem;
      mask-image: linear-gradient(#0000, #000 6rem);
    }
  }

  .blog-masthead-title {
    max-width: 12em;
    font-size: round(clamp(2.875rem, 1.5rem + 5.25vw, 7rem), 1px);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.03em;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin: 0;
    line-height: round(1.04em, 1px);

    &:not(:lang(zh)) {
      text-box: trim-both cap alphabetic;
      margin-block: calc(-1 * round(.25em, 1px));
      margin-inline-start: -.06em;
      padding-block: round(.25em, 1px) calc(round(.25em, 1px) + round(up, 1cap, 1px) - 1cap);
    }

    &:lang(zh) {
      letter-spacing: .04em;
      margin-block: round(-.11em, 1px) round(-.18em, 1px);
      font-size: round(clamp(2.875rem, 1.5rem + 5.25vw, 7rem) / 1.19048, 1px);
      line-height: round(1.2em, 1px);
    }
  }

  .blog-year {
    grid-template-columns: var(--blog-timeline-columns);
    align-items: start;
    display: grid;
  }

  .blog-year-label {
    font-size: round(clamp(2rem, 1rem + 2.75vw, 3.5rem), 1px);
    font-weight: var(--font-weight-regular);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--blog-text-faint);
    text-box: trim-both cap alphabetic;
    grid-area: 1 / 1;
    margin: calc(3.6725rem + .016em) 0 3.5rem;
    line-height: 1;
    position: sticky;
    top: 6rem;
  }

  .blog-year-posts {
    padding: 3.5rem 0 5rem var(--blog-indent);
    grid-area: 1 / 2;
    margin: 0;
    list-style: none;
    position: relative;
    container: blog-posts / inline-size;

    &:before {
      border-inline-start: 1px solid var(--blog-guide);
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
    }

    &:after {
      background: var(--blog-cross-mark);
      pointer-events: none;
      content: "";
      width: 11px;
      height: 11px;
      position: absolute;
      top: -5px;
      left: -5px;
    }
  }

  @media (48rem <= width < 64rem) {
    .blog-year {
      border-top: 1px solid var(--blog-guide);
    }

    .blog-year-posts:after {
      top: -6px;
    }
  }

  .blog-timeline-end {
    grid-template-columns: var(--blog-timeline-columns);
    height: 0;
    display: grid;
    position: relative;

    &:after {
      background: var(--blog-cross-mark);
      pointer-events: none;
      content: "";
      grid-column: 2;
      width: 11px;
      height: 11px;
      position: absolute;
      top: -5px;
      left: -5px;
    }
  }

  .blog-entry {
    position: relative;

    & + & {
      margin-top: 4rem;
    }

    &:before {
      top: var(--blog-node-y);
      left: calc(var(--blog-indent) * -1);
      border-top: 1px solid var(--blog-tick-major);
      width: .75rem;
      transition: border-color var(--blog-slow) var(--blog-ease);
      content: "";
      position: absolute;
    }

    & > .blog-entry-signal {
      z-index: 1;
      top: calc(var(--blog-node-y) - 2px);
      left: calc(var(--blog-indent) * -1 - 2px);
      position: absolute;
    }

    &:has( > .blog-entry-link:focus-visible):before {
      border-color: var(--blog-text-quiet);
      transition-duration: var(--blog-base);
    }

    @media (hover: hover) {
      &:has( > .blog-entry-link:hover):before {
        border-color: var(--blog-text-quiet);
        transition-duration: var(--blog-base);
      }
    }
  }

  .blog-entry-link {
    --blog-marks-inset: .75rem;
    width: fit-content;
    max-width: 36rem;
    color: var(--blog-text-body);
    scroll-margin-block: 5.5rem 2rem;
    text-decoration: none;
    display: block;

    &:before {
      inset: calc(.1725rem - var(--blog-marks-inset)) calc(var(--blog-marks-inset) * -1) calc(.6rem - var(--blog-marks-inset));
      opacity: 0;
      transition: opacity var(--blog-slow) var(--blog-ease), inset var(--blog-quick) var(--blog-ease);
    }

    &:is(:focus-visible, :active):before {
      opacity: 1;
      transition-duration: var(--blog-base), var(--blog-quick);
    }

    @media (hover: hover) {
      &:hover:before {
        opacity: 1;
        transition-duration: var(--blog-base), var(--blog-quick);
      }

      &:hover:not(:focus-visible, :active):before {
        transition-delay: 80ms;
      }
    }

    &:active {
      --blog-mark: var(--blog-text-faint);
      --blog-marks-inset: calc(.75rem - 2px);
    }

    &:focus-visible {
      outline-offset: .5rem;
      outline: 2px solid #0000;

      &:before {
        outline: 2px solid var(--blog-text-faint);
        outline-offset: -2px;
        background: none;
      }
    }
  }

  .blog-entry-link:has( > .blog-entry-description:lang(zh)):before {
    inset-block-end: calc(.625rem - var(--blog-marks-inset));
  }

  .blog-entry-meta {
    color: var(--blog-text-quiet);
    flex-wrap: wrap;
    column-gap: .5rem;
    font-size: .8125rem;
    line-height: 1rem;
    display: flex;

    & > :nth-child(n+2):before {
      color: var(--blog-text-faint);
      content: "·";
      margin-inline-end: .5rem;
    }
  }

  .blog-entry-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -.015em;
    color: var(--blog-title);
    text-wrap: balance;
    overflow-wrap: break-word;
    margin: 1rem 0 0;
    line-height: 2.25rem;

    &:not(:lang(zh)) {
      margin-inline-start: -.04em;
    }

    &:lang(zh) {
      letter-spacing: 0;
      word-break: keep-all;
      text-autospace: normal;
      line-height: 2.5rem;
    }
  }

  .blog-title-half {
    display: block;
  }

  .blog-entry-description {
    text-wrap: pretty;
    margin: 1rem 0 0;
    font-size: .9375rem;
    line-height: 1.875rem;

    &:lang(zh) {
      line-break: strict;
      line-height: 2rem;
    }
  }

  @container blog-posts (width < 14em) {
    .blog-entry :is(.blog-entry-title, .blog-entry-description):lang(en) {
      hyphens: auto;
    }
  }

  @media (width < 48rem) {
    .blog-year {
      border-top: 1px solid var(--blog-guide);
      padding-inline-start: var(--blog-indent);
      display: block;

      &:before {
        background: var(--blog-cross-mark);
        pointer-events: none;
        content: "";
        width: 11px;
        height: 11px;
        position: absolute;
        top: -6px;
        left: -5px;
      }

      &:after {
        border-inline-start: 1px solid var(--blog-guide);
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
      }
    }

    .blog-timeline-end {
      display: block;
    }

    .blog-year-label {
      height: round(up, 1cap, 1px);
      margin-block: 2.5rem 0;
      margin-inline-start: -.02em;
      position: static;
    }

    .blog-year-posts {
      padding: 2rem 0 4rem;
      position: static;

      &:before, &:after {
        display: none;
      }
    }

    .blog-masthead-title:not(:lang(zh)) {
      letter-spacing: -.02em;
    }

    .blog-entry-title {
      font-size: 1.25rem;
      line-height: 2rem;

      &:lang(zh) {
        line-height: 2.25rem;
      }
    }

    .blog-entry-link {
      --blog-marks-inset: .5rem;
      width: auto;
      transition: opacity var(--blog-base) var(--blog-ease);

      &:active {
        --blog-marks-inset: calc(.5rem - 2px);
        opacity: .64;
        transition-duration: var(--blog-quick);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .blog-entry:before, .blog-entry:has( > .blog-entry-link:is(:hover, :focus-visible)):before, .blog-entry-link, .blog-entry-link:before, .blog-entry-link:is(:hover, :focus-visible, :active):before, .blog-entry-link:hover:not(:focus-visible, :active):before {
      transition: none;
    }
  }

  @media print {
    .blog-index {
      color-scheme: light;
      background-color: canvas;
    }

    .blog-masthead {
      padding-top: var(--spacing-xl);
    }

    .blog-year-label {
      position: static;
    }

    .blog-entry {
      break-inside: avoid;
    }
  }

  @media (forced-colors: active), print {
    .blog-index:before, .blog-year-posts:after, .blog-timeline-end:after {
      display: none;
    }

    .blog-entry-link:hover:not(:focus-visible) {
      outline-offset: .375rem;
      outline: 1px solid canvastext;
    }

    @media (width < 48rem) {
      .blog-year:before {
        display: none;
      }
    }

    @media (width >= 64rem){
      .blog-year {
        border-top: 1px solid canvastext;

        @media print {
          border-top-color: var(--blog-guide);
        }
      }
    }
  }
}

:root:has(.blog-index) :is(.ui-header, .ui-footer) > :not(hr) {
  max-width: 95rem;
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-weight-regular:400;--spacing-xl:2rem}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}