:root {
  --font-family-gothic-regular: "Ishii Gothic R", "Yu Gothic", "YuGothic", sans-serif;
  --font-family-gothic-medium: "Ishii Gothic M", "Yu Gothic", "YuGothic", sans-serif;
  --font-family-gothic-bold: "Ishii Gothic B", "Yu Gothic", "YuGothic", sans-serif;
  --font-family-mono-regular: "TheSansMono Condensed", "Menlo", "Consolas", "Ishii Gothic R", monospace;
  --font-family-mono-bold: "TheSansMono Condensed", "Menlo", "Consolas", "Ishii Gothic B", monospace;

  --font-weight-gothic-regular: 400;
  --font-weight-gothic-medium: 500;
  --font-weight-gothic-bold: 600;
  --font-weight-mono-regular: 400;
  --font-weight-mono-bold: 700;

  --font-size-heading-1: calc(1rem * 5 / 3);
  --font-size-heading-2: calc(1rem * 5 / 4);
  --font-size-heading-3: calc(1rem * 5 / 6);
  --font-size-body: 1rem;
  --font-size-caption: calc(1rem * 5 / 6);
  --font-size-codeblock: calc(1rem * 5 / 6);

  --line-height-heading-1: 1.25rlh;
  --line-height-heading-2: 1rlh;
  --line-height-heading-3: 0.75rlh;
  --line-height-body: 1rlh;
  --line-height-caption: 0.75rlh;
  --line-height-codeblock: 0.75rlh;

  --extra-leading: 0.125rlh;

  --max-line-length: 36rem;

  --underline-thickness: 1px;
  --underline-offset: 0.125em;

  --indent-body: 2rem;

  --color-white: #ffffff;
  --color-gray-10: #dfe1e2;
  --color-gray-90: #1c1d1f;

  --color-background: var(--color-white);
  --color-text: var(--color-gray-90);
  --color-outline: rgb(0 0 0 / 0.1);

  font-size: 100%; /* 16px */
  line-height: 1.875; /* 30px */
  -webkit-text-size-adjust: 100%;

  @media (min-width: 768px) {
    font-size: 106.25%; /* 17px */
    line-height: 1.88236; /* 32px */
  }

  @media (prefers-color-scheme: dark) {
    --color-background: var(--color-gray-90);
    --color-text: var(--color-gray-10);
    --color-outline: rgb(255 255 255 / 0.05);
  }
}

:not(:lang(ja)) {
  font-kerning: auto;
}

:target {
  animation: yellow-fade 1s;
  scroll-margin-top: 1rlh;
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1rem);
  grid-template-rows:
    [header-start] auto
    [header-end] 2rlh
    [body-start] 1fr
    [body-end] 8rlh
    [footer-start] auto
    [footer-end] 1rlh;
  justify-content: center;
  min-height: 100dvh;
  margin-inline: clamp(
    1rem,
    max((100% - var(--max-line-length)) / 2, 5vw),
    6rem
  );
  max-inline-size: var(--max-line-length);

  font-family: var(--font-family-gothic-regular);
  font-weight: var(--font-weight-gothic-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-feature-settings: "chws" 1;
  font-kerning: none;
  hanging-punctuation: allow-end;
  text-spacing-trim: trim-start;
  text-autospace: normal;
  line-break: normal;
  hyphens: auto;
  /* overflow-wrap: break-word; */

  background-color: var(--color-background);
  color: var(--color-text);
}

h1 {
  font-family: var(--font-family-gothic-medium);
  font-weight: var(--font-weight-gothic-medium);
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  padding-block: 0.625rlh 0.125rlh;
  margin-block: 0;
}

h2 {
  font-family: var(--font-family-gothic-regular);
  font-weight: var(--font-weight-gothic-regular);
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
  margin-block: 2rlh 1rlh;
  margin-inline-start: var(--indent-body);
}

h3 {
  font-family: var(--font-family-gothic-bold);
  font-weight: var(--font-weight-gothic-bold);
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
  padding-block: var(--extra-leading);
  margin-block: 1rlh 0;
}

h3 + :is(p, ul, ol) {
  margin-block-start: 0;
}

hr {
  height: auto;
  border: 0;
  margin-block: 0;
  color: inherit;
  text-align: center;
  margin-block: 0.5rlh -0.5rlh;
}

hr::before {
  content: "\ff0a"; /* FULLWIDTH ASTERISK */
}

p,
ol,
ul,
dl {
  margin-block: 1rlh 0;
}

p:where(:not(.Credit):not([role="note"])) + p {
  margin-block-start: 0;
  text-indent: var(--indent-body);
}

p:has(br:only-child) + p {
  text-indent: 0;
}

ol,
ul {
  padding-inline-start: var(--indent-body);
}

:is(ol, ul, dl) :is(p, ol, ul, dl) {
  margin-block-start: 0;
}

ul li {
  list-style-type: none;
  position: relative;
}

ul li:before {
  content: "\2013"; /* EN DASH */
  position: absolute;
  inset-inline-end: 100%;
  margin-inline-end: 0.5em;
}

dt {
  margin-inline-start: var(--indent-body);
  text-indent: calc(var(--indent-body) * -1);
}

dd {
  margin-inline-start: var(--indent-body);
}

blockquote {
  margin: 0 0 0 var(--indent-body);
}

code, kbd, samp {
  font-family: var(--font-family-mono-regular);
  font-weight: var(--font-weight-mono-regular);
  line-height: 0;
}

:is(code, kbd, samp) :is(b, strong) {
  font-family: var(--font-family-mono-bold);
  font-weight: var(--font-weight-mono-bold);
}

pre {
  font-family: inherit;
  font-size: var(--font-size-codeblock);
  line-height: var(--line-height-codeblock);
  padding-block: var(--extra-leading);
  padding-inline-start: var(--indent-body);
  margin-block: 1rlh 0;
  overflow: auto;
  overflow-wrap: normal;
  text-autospace: no-autospace;
  -webkit-overflow-scrolling: touch;
}

a {
  color: inherit;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  text-decoration: none;
}

a[href^="#fn:"] {
  font-size: var(--font-size-caption);
  line-height: 0;
  padding: 1px 0.25em;
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
}

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

iframe {
  max-width: 100%;
}

small {
  font-size: var(--font-size-caption);
  line-height: 0;
}

sup,
sub {
  font-size: 80%;
  line-height: 0;
}

b, strong {
  font-family: var(--font-family-gothic-bold);
  font-weight: var(--font-weight-gothic-bold);
  line-height: 0;
}

em:lang(ja) {
  font-style: normal;
  text-emphasis: "\2022";
}

del {
  text-decoration-line: line-through;
}

ins {
  text-decoration: none;
}

figure {
  display: grid;
  justify-content: center;
  grid-template:
    " .       " var(--padding-top, 0.5rlh)
    " figure  " auto
    " .       " var(--caption-offset, 0.5rlh)
    " caption " auto
    / auto;
  margin: 1rlh 0 0;
}

figure:has(figcaption) {
  --caption-offset: 0.25rlh;
}

figure:has(thead) {
  --padding-top: 0;
}

figure > :is(img, picture) {
  outline: 1px solid var(--color-outline);
  outline-offset: -1px;
}

figure > :is(img, picture, table) {
  grid-area: figure;
  justify-self: center;
}

figcaption {
  font-family: var(--font-family-gothic-regular);
  font-weight: var(--font-weight-gothic-regular);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
  grid-area: caption;
}

table {
  font-family: var(--font-family-gothic-regular);
  font-weight: var(--font-weight-gothic-regular);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

caption {
  caption-side: bottom;
  text-align: left;
}

th {
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
}

th, td {
  position: relative;
  padding: var(--extra-leading) 2em var(--extra-leading) 0;
  vertical-align: baseline;
  max-width: 48em;
}

tbody :is(th, td)::before,
tbody tr:last-child :is(th, td)::after {
  content: "";
  position: absolute;
  border-block-end: 1px solid;
}

tbody :is(th, td)::before {
  inset: -1px 0 auto;
}

tbody tr:last-child :is(th, td)::after {
  inset: auto 0 0;
}

header {
  grid-column: 1 / -1;
  grid-row: header;

  display: grid;
  grid-template:
    " date    logo    " auto
    " heading heading " minmax(6rlh, auto)
    / 1fr     auto;
}

.HeaderLogo,
.HeaderDate {
  font-family: var(--font-family-mono-regular);
  font-weight: var(--font-weight-mono-regular);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
  margin-block: 0;
}

.HeaderLogo {
  grid-area: logo;
  justify-self: end;
  padding-inline-start: 5ch;
}

.HeaderDate {
  grid-area: date;
  justify-self: end;
  padding-inline-start: var(--indent-body);
}

hgroup {
  grid-area: heading;
  word-break: auto-phrase;
  /* text-wrap: pretty; */
}

hgroup p {
  font-family: var(--font-family-gothic-medium);
  font-weight: var(--font-weight-gothic-medium);
  margin-block: 0;
}

main {
  grid-column: 1 / -1;
  grid-row: body;
}

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

main > :last-child {
  margin-block-end: 0;
}

footer {
  position: relative;
  grid-column: 1 / -1;
  grid-row: footer;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
  margin-inline-start: 2rem;
}

footer::before {
  content: "\30fb"; /* KATAKANA MIDDLE DOT */
  position: absolute;
  translate: 0 -50%;
}

footer nav,
footer p {
  margin-block: 1lh;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2em;
}

footer p {
  font-family: var(--font-family-mono-regular);
  font-weight: var(--font-weight-mono-regular);
}

.Credit {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
  margin-block-start: 0;
  margin-inline-start: calc(var(--indent-body) * 2);
  text-align: right;
}

.Credit small {
  font-size: 1em;
}

p[role="note"] {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
}

p[role="note"] small {
  font-size: 1em;
}

.Footnotes {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  padding-block: var(--extra-leading);
}

.PostList li,
.ReferenceList li {
  text-indent: calc(var(--indent-body) * -1);
}

.PostList li::before,
.ReferenceList li::before {
  content: normal;
}

.PostList time {
  font-family: var(--font-family-mono-regular);
  font-weight: var(--font-weight-mono-regular);
  font-size: var(--font-size-caption);
  line-height: 0;
  white-space: nowrap;
}

.PostList time::before {
  content: "\b7\b7\b7\b7\b7"; /* MIDDLE DOT */
  margin-inline-end: 0.5ch;
}

@keyframes yellow-fade {
  0% { background-color: #fee685; }
  100% { background-color: transparent; }
}