/* index.css | MIT License */

/* Variable */
:root {
  /* Color */
  --color-background: hsl(48, 48%, 93%);
  --color-background-tone: hsl(48, 48%, 90%);
  --color-on-background: hsl(0, 0%, 15%);
  --color-link: hsl(213, 96%, 42%);

  /* Font Size */
  --font-size-default: 1rem;
  --font-size-small: calc(var(--font-size-default) / var(--ratio-1));
  --font-size-large: calc(var(--font-size-default) * var(--ratio-1));
  --font-size-huge: calc(var(--font-size-large) * var(--ratio-1));

  /* Line Height */
  --line-height-default: calc(var(--ratio-2));
  --line-height-small: calc(var(--line-height-default) / var(--ratio-1));

  /* Ratio */
  --ratio-1: 1.272;
  --ratio-2: calc(var(--ratio-1) * var(--ratio-1));
  --ratio-4: calc(var(--ratio-2) * var(--ratio-2));

  /* Space */
  --space-v-default: calc(var(--ratio-2) * 1rem);
  --space-v-small: calc(var(--space-v-default) / var(--ratio-4));
  --space-v-large: calc(var(--space-v-default) * var(--ratio-2));
  --space-v-tiny: calc(var(--space-v-small) / var(--ratio-2));
  --space-v-huge: calc(var(--space-v-large) * var(--ratio-2));
  --space-v-gargantuan: calc(var(--space-v-huge) * var(--ratio-2));
  --space-v-rect: calc(
    var(--space-v-default) + (var(--line-height-default) - 1) * 1em / 2
  );
  --space-h-default: calc(
    var(--width-column) / var(--ratio-4) / var(--ratio-4) / var(--ratio-4) /
      var(--ratio-1)
  );
  --space-h-small: calc(var(--space-h-default) / var(--ratio-4));

  /* Width */
  --width-column: calc(
    var(--ratio-4) * var(--ratio-4) * var(--ratio-4) * var(--ratio-4) * 1rem
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color */
    --color-background: hsl(228, 48%, 6%);
    --color-background-tone: hsl(228, 48%, 15%);
    --color-on-background: hsl(0, 0%, 93%);
    --color-link: hsl(213, 96%, 69%);
  }
}

/* Root */
html {
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: sans-serif;
  font-size: 112.5%;
  line-height: var(--line-height-default);
}

/* Sections */
body {
  background-color: inherit;
  margin: var(--space-v-default) auto var(--space-v-default)
    clamp(
      0px,
      (
          100vw - var(--space-h-small) - var(--width-column) -
            var(--space-h-small) - 20px
        ) / 2,
      var(--ratio-4) * var(--ratio-4) * var(--ratio-2) * 1vw
    );
  max-width: var(--width-column);
  padding-inline: var(--space-h-small);
}

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

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

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

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

:where(h2, h3) + p {
  margin-block-start: var(--space-v-tiny);
}

hr {
  border-block-end: none;
  border-block-start-style: solid;
  border-block-start-width: thin;
  border-inline: none;
  margin-block: var(--space-v-rect);
  margin-inline-start: 0;
  width: calc(var(--width-column) / var(--ratio-4) / var(--ratio-4));
}

:where(main) + hr {
  margin-block-start: var(--space-v-gargantuan);
}

pre {
  background-color: var(--color-background-tone);
  /* stylelint-disable-next-line font-family-no-duplicate-names */
  font-family: monospace, monospace;
  font-size: inherit;
  margin-block: var(--space-v-rect);
  overflow-x: auto;
  padding: var(--space-v-small) var(--space-h-small);
  tab-size: 4;
}

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

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

:where(li) > :is(ul, ol) {
  margin-block-start: 0;
}

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

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

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

/* Text-level Semantics */
a {
  color: var(--color-link);
}

a:visited {
  color: inherit;
}

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

code,
samp,
kbd {
  /* stylelint-disable-next-line font-family-no-duplicate-names */
  font-family: monospace, monospace;
  font-size: inherit;
}

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

/* Embedded Content */
img {
  border: none;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: bottom;
}

svg {
  display: inline-block;
  fill: currentcolor;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: bottom;
}

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

td {
  background-color: var(--color-background-tone);
  border-block-start-style: solid;
  border-block-start-width: thin;
  padding: var(--space-v-small) var(--space-h-small);
  vertical-align: top;
  white-space: pre;
}

th {
  background-color: var(--color-background-tone);
  border-block-end-style: solid;
  border-block-end-width: thin;
  padding: var(--space-v-small) var(--space-h-small);
  text-align: inherit;
  vertical-align: top;
  white-space: pre;
}

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

:focus {
  scroll-margin-block: var(--space-v-huge);
}

/* Affiliate */
.affiliate img {
  aspect-ratio: 16 / 9;
  background-color: white;
  height: auto;
  object-fit: contain;
  padding: var(--space-v-default) var(--space-h-default);
  width: 100%;
}

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

h2 + .date {
  margin-block-start: var(--space-v-default);
}

.page-header > .date:first-child {
  margin-block-start: var(--space-v-gargantuan);
}

.date + * {
  margin-block-start: 0;
}

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

.page-footer ul {
  padding-inline-start: var(--space-h-small);
}

/* Site Menu */
.site-menu {
  font-size: var(--font-size-small);
}

.site-menu p {
  margin-block-start: 0;
}

.site-menu a {
  word-break: keep-all;
}

.site-menu svg {
  color: var(--color-on-background);
  max-width: none;
  width: calc(var(--line-height-default) * 1em);
}

/* Yearly Archives */
.yearly-archives a {
  word-break: keep-all;
}