:where(html) {
  /**
   * Shadow variables
   */
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001;
  --shadow-1: 0 1px 2px -1px
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3:
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4:
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-5:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-6:
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --inner-shadow-0: inset 0 0 0 1px
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-1:
    inset 0 1px 2px 0
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
    var(--inner-shadow-highlight);
  --inner-shadow-2:
    inset 0 1px 4px 0
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
    var(--inner-shadow-highlight);
  --inner-shadow-3:
    inset 0 2px 8px 0
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
    var(--inner-shadow-highlight);
  --inner-shadow-4:
    inset 0 2px 14px 0
      hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
    var(--inner-shadow-highlight);

  /**
   * Site Variables
   */
  --base-font-family:
    'Manrope', 'Helvetica Neue', 'Noto Sans JP', 'Noto Sans CJK JP',
    'Noto Sans CJK Japanese', -apple-system, BlinkMacSystemFont, Meiryo,
    sans-serif;
  --font-weight-base: 400;
  --font-weight-bold: 700;
  --color-adjust-direction: 1;
  --color-theme-hue: 220deg;
  --color-brand: oklch(50% 100% var(--color-theme-hue));
  --color-background: oklch(
    calc(0.63 + 0.36 * var(--color-adjust-direction)) 0.008
      var(--color-theme-hue)
  );
  --color-foreground: oklch(
    calc(0.5 - 0.2 * var(--color-adjust-direction)) 0.02 var(--color-theme-hue)
  );
  --color-link: color-mix(in oklch, var(--color-brand) 30%, inherit 70%);
  --page-padding: min(4vw, 2rem);

  /**
   * Dark mode overrides
   */
  @media (prefers-color-scheme: dark) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007;
    --color-adjust-direction: -1;
  }
}

/**
 * Object styles
 */

.o-plain-text {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Element base styles
 */

* {
  box-sizing: border-box;
}

:where(html) {
  font-display: swap;
  font-family: var(--base-font-family);
  font-weight: var(--font-weight-base);
  font-weight: var(--font-weighlt-b7d);
  font-feature-settings: 'palt' 1;
  color: var(--color-foreground);
  background-color: var(--color-background);
  scroll-behavior: smooth;
}

:where(body) {
  display: flex;
  min-block-size: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  max-inline-size: 100%;
  word-break: auto-phrase;
  font-weight: var(--font-weight-base);
  font-weight: var(--font-weighlt-b7d);
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl) {
  margin-block: 0.5em 0;
}

:where(h1) {
  font-size: 2rem;
}

:where(h2) {
  font-size: 1.5rem;
}

:where(h3) {
  font-size: 1.25rem;
}

:where(img, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(svg) {
  fill: none;
}

:where(a:any-link) {
  color: var(--color-link);
}

/**
 * Component styles
 */

.c-heading {
  text-decoration: none;
  color: var(--color-foreground);
  margin-block: 0 0.5em;
  font-size: min(3rem, 10vw);
  font-weight: 200;
}

.c-section-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin-block-start: 5em;
  background-color: color-mix(
    in oklch,
    var(--color-background) 90%,
    var(--color-foreground) 10%
  );
  padding-block: 2em;
  padding-inline: var(--page-padding);

  > *:first-child {
    margin-block-start: 0;
  }
}

.c-header {
  display: flex;
  inline-size: 100%;
  padding: var(--page-padding);
}

.c-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;

  > :where(img) {
    width: clamp(2rem, 10vw, 3rem);
  }
}

.c-main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  flex: 1;

  > *:first-child {
    margin-block-start: 0;
  }

  &:not(:has(.c-about-block:last-child)) {
    margin-block-end: 5rem;
  }
}

.c-site-logo-mark {
  --_size: min(3rem, 8vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: calc(var(--_size) * 0.5);
  padding-block: calc(var(--_size) * 2);
}

.c-site-mark {
  inline-size: calc(var(--_size) * 2);
}

.c-site-logo {
  margin-block-start: 0;
  inline-size: calc(var(--_size) * 8);
}

.c-site-logo__img {
  inline-size: 100vw;
  display: block;
}

.c-profile-icon {
  border: 1px solid oklch(from currentColor l c h / 0.25);
  border-radius: 1e5px;
  inline-size: 5rem;
}

.c-job-title {
  --_gap: 1em;

  column-gap: var(--_gap);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  justify-content: center;
  list-style: none;
  padding-inline-start: 0;

  & > * {
    padding-inline-start: 0;
    position: relative;

    & + &::before {
      background-color: oklch(from currentColor l c h / 0.5);
      block-size: 1em;
      content: '';
      display: block;
      inline-size: 1px;
      inset-block: 0;
      inset-inline-start: calc(var(--_gap) / -2);
      margin: auto;
      position: absolute;
      rotate: 15deg;
      translate: 0 10%;
    }
  }
}

.c-link-list {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 2em;
  gap: 0.5em;

  > * {
    padding-inline-start: 0;
  }
}

.c-link-with-mark {
  display: flex;
  gap: 0.5em;
}

.c-link-list__mark {
  inline-size: 2em;
}

.c-footer {
  padding-block: 2rem 2rem;
  padding-inline: var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 1em;
  background-color: var(--color-foreground);
  color: var(--color-background);
}

.c-post-list {
  display: flex;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  /* margin-inline: auto; */
  max-inline-size: 100rem;
  padding-inline: var(--page-padding);

  > * {
    flex: 0 0 min(100%, 20rem);
  }
}

.c-block {
  --_padding: 2em;
  padding: var(--_padding);
  background-color: oklch(
    from var(--color-background) calc(l + 0.05 * var(--color-adjust-direction))
      calc(c - 0.1) h
  );
  corner-shape: superellipse(1.75);
  border-radius: calc(var(--_padding) * 1.5);
  box-shadow: var(--shadow-5);
}

.c-arrow-link {
  --_size: 0.5em;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;

  &::after {
    content: '';
    inline-size: var(--_size);
    block-size: var(--_size);
    border-style: solid;
    border-width: 0 0 2px 2px;
    border-color: currentColor;
    rotate: -135deg;
  }
}

.c-arrow-link--back {
  flex-direction: row-reverse;

  &::after {
    rotate: 45deg;
  }
}

.c-home-log-link {
  margin-block-start: 3rem;
}

.c-post-list-item-link {
  text-decoration: none;
  color: var(--color-foreground);
  display: block;
  transition: 0.2s ease-out;
  transition-property: box-shadow, translate;

  &:hover {
    box-shadow: var(--shadow-3);
    translate: 0 2px;
  }

  &:active {
    box-shadow: var(--shadow-1);
    translate: 0 3px;
  }
}

.c-post-list-item {
  > *:first-child {
    margin-block-start: 0;
  }
}

.c-post-back-link-block {
  align-self: start;
  padding-inline: var(--page-padding);
  padding-block-end: 1rem;

  > *:first-child {
    margin-block-start: 0;
  }
}

.c-post-block {
  inline-size: min(40em, 90vw);

  > *:first-child {
    margin-block-start: 0;
  }
}

.c-post-date {
  color: color-mix(
    in oklch,
    var(--color-foreground) 70%,
    var(--color-background) 30%
  );
}

.c-post-content {
  padding-block-start: 1em;
  line-height: 1.75;

  :where(h1, h2, h3) {
    font-weight: var(--font-weight-base);
    font-weight: var(--font-weighlt-b7d);
  }

  :where(h4, h5, h6) {
    font-weight: var(--font-weight-bold);
  }

  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):not(:first-child) {
    margin-block-start: 1em;
  }
}

.c-pagination {
  inline-size: min(100%, 20rem);
}

.c-pagination__list {
  padding: var(--page-padding);
  justify-content: space-between;
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding-inline: 0;
}

.c-pagination__item--older {
  grid-column: 1;
}

.c-pagination__item--newer {
  grid-column: 2;
  justify-self: end;
}

.c-pagination__link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.c-pagination__link--older::before,
.c-pagination__link--newer::after {
  --_size: 0.5rem;
  content: '';
  inline-size: var(--_size);
  block-size: var(--_size);
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: currentColor;
  rotate: 45deg;
}

.c-pagination__link--newer::after {
  rotate: -135deg;
}