style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100&family=Noto+Sans+JP:wght@100&family=Noto+Sans+KR:wght@100&family=Noto+Sans+SC:wght@100&family=Noto+Sans+TC:wght@100&family=Noto+Serif+JP&family=Noto+Serif+KR&family=Noto+Serif+TC&display=swap');
@import url(https://cdn.jsdelivr.net/gh/yeun/open-color@v1.7.0/open-color.css);

:root {
  --c-header: var(--oc-gray-9);
  --c-header-text: var(--oc-gray-1);
  --c-header-link: var(--oc-gray-3);
  --c-header-link-active: var(--oc-gray-0);
  --c-header-highlight: var(--oc-gray-0);

  --c-toc: var(--oc-gray-2);
  --c-toc-border: var(--oc-gray-6);
  --c-toc-link: var(--oc-gray-6);

  --c-term-arrow: var(--oc-gray-6);

  --c-content-bg: white;
  --c-content-text: var(--oc-gray-9);
  --c-content-link: blue;
  --c-content-link-active: red;
  --c-content-link-visited: purple;

  --c-table-border: var(--oc-gray-6);
  --c-table-header: var(--oc-gray-2);
  --c-table-header-subtext: var(--oc-gray-7);

  --c-romaninization-tone-sup: var(--oc-gray-6);

  --c-cognate-group-1: var(--oc-red-1);
  --c-cognate-group-2: var(--oc-indigo-1);
  --c-cognate-group-3: var(--oc-green-1);
  --c-cognate-group-4: var(--oc-orange-1);

  --c-correspond-1: var(--oc-indigo-4);
  --c-correspond-1-hover: var(--oc-indigo-9);
  --c-correspond-2: var(--oc-red-4);
  --c-correspond-2-hover: var(--oc-red-9);
  --c-correspond-3: var(--oc-green-3);
  --c-correspond-3-hover: var(--oc-green-6);
  --c-correspond-4: var(--oc-orange-5);
  --c-correspond-4-hover: var(--oc-orange-9);
  --c-correspond-5: var(--oc-pink-3);
  --c-correspond-5-hover: var(--oc-pink-8);

  --c-footnote-border: var(--oc-gray-6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-header: var(--oc-gray-8);
    --c-header-text: var(--oc-gray-3);
    --c-header-link: var(--oc-gray-1);
    --c-header-link-active: var(--oc-gray-0);
    --c-header-highlight: var(--oc-gray-0);

    --c-toc: var(--oc-gray-8);
    --c-toc-border: var(--oc-gray-7);
    --c-toc-link: var(--oc-gray-7);

    --c-term-arrow: var(--oc-gray-6);

    --c-content-bg: var(--oc-gray-9);
    --c-content-text: var(--oc-gray-1);
    --c-content-link: var(--oc-blue-5);
    --c-content-link-active: var(--oc-red-6);
    --c-content-link-visited: var(--oc-grape-4);

    --c-table-border: var(--oc-gray-7);
    --c-table-header: var(--oc-gray-8);
    --c-table-header-subtext: var(--oc-gray-4);

    --c-romaninization-tone-sup: var(--oc-gray-5);

    --c-cognate-group-1: hsl(0,      20%, 25%);
    --c-cognate-group-2: hsl(230deg, 20%, 31%);
    --c-cognate-group-3: hsl(123deg, 20%, 20%);
    --c-cognate-group-4: hsl(17deg,  20%, 28%);

    --c-correspond-1: var(--oc-indigo-9);
    --c-correspond-1-hover: var(--oc-indigo-4);
    --c-correspond-2: var(--oc-red-9);
    --c-correspond-2-hover: var(--oc-red-4);
    --c-correspond-3: var(--oc-green-6);
    --c-correspond-3-hover: var(--oc-green-3);
    --c-correspond-4: var(--oc-orange-9);
    --c-correspond-4-hover: var(--oc-orange-5);
    --c-correspond-5: var(--oc-pink-8);
    --c-correspond-5-hover: var(--oc-pink-3);

    --c-footnote-border: var(--oc-gray-6);
  }
}

.term {
  font-weight: 100;
  text-decoration-skip-ink: none;
  text-decoration-skip: none;
}

.term:lang(en) {
  font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.term:lang(ko) {
  font-family:
    'Noto Sans CJK KR',
    NotoSansCJKkr,
    'Noto Sans KR',
    'Noto Sans CJK',
    NotoSansCJK,
    sans-serif;
}

.term:lang(zh-Hans), .term:lang(zh-CN) {
  font-family:
    'Noto Sans CJK SC',
    NotoSansCJKsc,
    'Noto Sans SC',
    'Noto Sans CJK',
    NotoSansCJK,
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    sans-serif;
}

.term:lang(zh-Hant), .term:lang(zh-TW) {
  font-family:
    'Noto Sans CJK TC',
    NotoSansCJKtc,
    'Noto Sans TC',
    'Noto Sans CJK',
    NotoSansCJK,
    'STKaitiTC-Black',
    'PingFang TC',
    'Hiragino Sans CNS',
    'Microsoft JhengHei',
    sans-serif;
}

.term:lang(zh-HK) {
  font-family:
    'Noto Sans CJK HK',
    NotoSansCJKhk,
    'Noto Sans HK',
    'Noto Sans CJK',
    NotoSansCJK,
    'PingFang TC',
    'Hiragino Sans CNS',
    'Microsoft JhengHei',
    sans-serif;
}

.term:lang(ja) {
  font-family:
    'Noto Sans CJK JP',
    NotoSansCJKjp,
    'Noto Sans JP',
    'Noto Sans CJK',
    NotoSansCJK,
    'Hiragino Sans',
    'Hiragino Kaku Gothic Pro',
    'Yu Gothic',
    YuGothic,
    Meiryo,
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--c-content-bg);
}

body > *:not(div.terms, header) {
  margin-left: auto;
  margin-right: auto;
  max-width: 55rem;
}

@media (max-width: 1023px) {
  body > *:not(div.terms, header) {
    max-width: calc(100% - 2rem);
  }
}

:root {
  font-family: serif;
  color: var(--c-content-text);
}

body > header {
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: var(--c-header);
  color: var(--c-header-text);
  text-align: center;
}

body > header > nav > a {
  text-decoration: none;
  color: var(--c-header-link);
  margin-left: 1rem;
}

body > header > nav > a:link, body > header > nav > a:visited {
  color: var(--c-header-link);
}

body > header > nav > a:active, body > header > nav > a:visited:active {
  color: var(--c-header-link-active);
}

body > header > nav > a:first-child {
  margin-left: 0;
}

body > header > nav > a:not([rel=canonical]):hover {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

body > header > nav > a[rel=canonical] {
  font-weight: bolder;
  color: var(--c-header-highlight);
  cursor: default;
}

body > header > nav > a[rel=source-code] {
  margin-left: 1.5rem;
}

body > header > nav > a[rel=source-code], body > header > nav > a[rel=license] {
  font-size: smaller;
}

h1 {
  font-weight: normal;
}

h2 {
  margin-top: 2rem;
  font-weight: normal;
}

h2 > a.toc, h3 > a.toc {
  display: none;
  font-family: sans-serif;
  font-size: small;
  font-weight: bolder;
  vertical-align: super;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-toc-link);
}

h3 > a.toc {
  font-size: x-small;
}

h2 > a.toc:before, h3 > a.toc:before {
  content: '\2191';
  padding-right: .2rem;
}

h2:hover > a.toc, h3:hover > a.toc {
  display: inline;
}

#toc > div {
  display: inline-block;
  border: 1px solid var(--c-toc-border);
  background-color: var(--c-toc);
}

#toc h2 {
  margin: 0.5em;
  text-align: center;
  font-size: large;
  font-weight: bolder;
}

#toc ul {
  margin: 0;
  font-size: medium;
}

#toc .toc > ul {
  margin: 0.5em 1em 0.5em 0;
}

h3:lang(en), h3:lang(fr) {
  font-weight: normal;
}

h3:lang(en), h3 :lang(en), h3:lang(fr), h3 :lang(fr) {
  font-style: italic;
}

h3:lang(ja), h3:lang(ko), h3:lang(zh) {
  font-weight: bolder;
}

h3:lang(ja) :not(:lang(ja)),
h3:lang(ko) :not(:lang(ko)),
h3:lang(zh) :not(:lang(zh)) {
  font-weight: normal;
}

body > dl > dt {
  float: left;
  clear: both;
}

body > dl > dt:after {
  content: '\2192';
  color: var(--c-term-arrow);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

body > dl > dd, body > dl > dd > p {
  margin: 0;
}

h3[id] + p, h3[id] + p + p, h3[id] + p + p + p,
h3[id] + p + dl {
  padding-left: 1rem;
}

p:lang(en), li:lang(en) {
  line-height: 130%;
}

h1:lang(en),
h2:lang(en),
p:lang(en),
q:lang(en),
dl:lang(en),
li:lang(en),
span:lang(en), span:lang(fr),
nav :lang(en) {
  font-family: serif;
}

h1:lang(ko),
h2:lang(ko),
p:lang(ko),
q:lang(ko),
dl:lang(ko),
li:lang(ko),
span:lang(ko),
nav :lang(ko) {
  font-family: 'Noto Serif KR', serif;
}

h1:lang(ja),
h2:lang(ja),
p:lang(ja),
q:lang(ja),
dl:lang(ja),
li:lang(ja),
span:lang(ja),
nav :lang(ja) {
  font-family: 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
}

h1:lang(zh),
h2:lang(zh),
p:lang(zh),
q:lang(zh),
dl:lang(zh),
li:lang(zh),
span:lang(zh),
nav :lang(zh) {
  font-family: 'Songti TC', 'Noto Serif TC', serif;
}

p:lang(ja), p:lang(ko), p:lang(zh),
li:lang(ja), li:lang(ko), li:lang(zh) {
  line-height: 160%;
  text-align: justify;
}

a:link {
  color: var(--c-content-link);
}

a:active {
  color: var(--c-content-link-active);
}

a:visited {
  color: var(--c-content-link-visited);
}

a:visited:active {
  color: var(--c-content-link-active);
}

.footnote {
  margin-top: 2rem;
}

.footnote > hr {
  border: none;
  border-top: 1px solid var(--c-footnote-border);
}

.footnote > ol {
  font-size: smaller;
}

rt {
  user-select: none;
}

div.terms {
  max-width: 100%;
  overflow: auto;
}

table.terms {
  width: calc(100% - 2rem);
  margin: 1rem 1rem 3rem 1rem;
  border: 2px solid var(--c-table-border);
  border-top: none;
  border-bottom-width: 1px;
  border-spacing: 0;
  font-family: sans-serif;
}

table.terms > thead {
  background-color: var(--c-table-header);
  text-align: center;
}

@media (max-width: 1023px) {
  table.terms {
    font-size: smaller;
  }
  table.terms > thead {
    font-size: x-small;
  }
}

table.terms > thead > tr:first-child > td,
table.terms > thead > tr:first-child > th {
  border-top: 2px solid var(--c-table-border);
}

table.terms > thead td[rowspan],
table.terms > thead th[rowspan],
table.terms > thead > tr:last-child > td,
table.terms > thead > tr:last-child > th {
  border-bottom: 1px solid var(--c-table-border);
}

@-moz-document url-prefix() {
  table.terms > thead {
    position: sticky;
    top: 0;
  }
}

table.terms > thead .native-name {
  color: var(--c-table-header-subtext);
  font-size: smaller;
}

@media (max-width: 1023px) {
  table.terms > thead .native-name {
    display: none;
  }
}

table.terms > tbody {
  vertical-align: top;
}

table.terms th {
  font-weight: normal;
}

table.terms > thead td[rowspan],
table.terms > thead td[colspan],
table.terms > thead td:first-child,
table.terms > tbody td {
  border-left: 1px solid var(--c-table-border);
}

table.terms th,
table.terms td {
  padding: .5em;
}

table.terms > tbody td[rowspan],
table.terms > tbody th[rowspan],
table.terms > tbody > tr.group-foot > td,
table.terms > tbody > tr.group-foot > th {
  border-bottom: 1px solid var(--c-table-border);
}

table.terms .term {
  word-break: keep-all;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  table.terms .term {
    font-size: smaller;
  }
}

@media (min-width: 1024px) {
  table.terms .term {
    font-size: x-large;
  }
}

table.terms .romanization {
  font-family: sans-serif;
  display: block;
  word-break: keep-all;
  white-space: nowrap;
}

table.terms .romanization:lang(yue-HK-Latn-jyutping) sup {
  color: var(--c-romaninization-tone-sup);
  font-size: x-small;
}

@media (max-width: 1023px) {
  table.terms .romanization {
    font-size: x-small;
  }
}

.cognate-group-1,
.cognate-group-2,
.cognate-group-3,
.cognate-group-4,
.cognate-group-5 {
  --offset: 0%;
  --height: 100%;
  background-clip: padding-box;
  background-image:
    linear-gradient(
      to bottom,
      var(--color) 0 .5rem,
      transparent .5rem 100%
    ),
    linear-gradient(
      to top,
      transparent 0 var(--offset),
      var(--color) var(--offset) calc(var(--offset) + .5rem),
      transparent .5rem 100%
    ),
    linear-gradient(
      to right,
      var(--color) .5rem,
      transparent .5rem calc(100% - .5rem),
      var(--color) calc(100% - .5rem)
    );
  background-size: auto, auto, 100% var(--height);
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.cognate-group-1[rowspan="2"],
.cognate-group-2[rowspan="2"],
.cognate-group-3[rowspan="2"],
.cognate-group-4[rowspan="2"],
.cognate-group-5[rowspan="2"] {
  --offset: 49.9985858798%;
  --height: 50%;
}

.cognate-group-1[rowspan="3"],
.cognate-group-2[rowspan="3"],
.cognate-group-3[rowspan="3"],
.cognate-group-4[rowspan="3"],
.cognate-group-5[rowspan="3"] {
  --offset: 66.66%;
  --height: 33.33%;
}

.cognate-group-1 {
  --color: var(--c-cognate-group-1);
}

.cognate-group-2 {
  --color: var(--c-cognate-group-2);
}

.cognate-group-3 {
  --color: var(--c-cognate-group-3);
}

.cognate-group-4 {
  --color: var(--c-cognate-group-4);
}

.hover-correspond-1 .term:not(.correspond-1),
.hover-correspond-2 .term:not(.correspond-2),
.hover-correspond-3 .term:not(.correspond-3),
.hover-correspond-4 .term:not(.correspond-4),
.hover-correspond-5 .term:not(.correspond-5) {
  opacity: 0.5;
}

.correspond-1 {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--c-correspond-1);
}

.hover-correspond-1 .correspond-1 {
  text-decoration-color: var(--c-correspond-1-hover);
}

.correspond-2 {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: var(--c-correspond-2);
}

.hover-correspond-2 .correspond-2 {
  text-decoration-color: var(--c-correspond-2-hover);
}

.correspond-3 {
  text-decoration: underline;
  text-decoration-color: var(--c-correspond-3);
  text-decoration-thickness: 0.2rem;
}

.hover-correspond-3 .correspond-3 {
  text-decoration-color: var(--c-correspond-3-hover);
}

.correspond-4 {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--c-correspond-4);
}

.hover-correspond-4 .correspond-4 {
  text-decoration-style: solid;
  text-decoration-color: var(--c-correspond-4-hover);
}

.correspond-5 {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--c-correspond-5);
}

.hover-correspond-5 .correspond-5 {
  text-decoration-color: var(--c-correspond-5-hover);
}

/* vim: set et sw=2 ts=2 sts=2 ft=css: */