:root {
  --paper: #f3efe9;
  --ink: #141416;
  --dim: #5b5650;
  --mark: #86601f;
  --night: #0b0b0c;
  --moon: #eadfd3;
  --on-night: #f3ece3;
  --on-night-dim: #bdb4a9;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --song: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --book: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151517;
    --ink: #ece5db;
    --dim: #b3aba0;
    --mark: #eadfd3;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.85 var(--sans);
}

.sheet {
  width: min(100%, 1120px);
  margin-inline: auto;
  padding-inline: 2.5rem;
}

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--mark); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1;
  padding: .4rem .8rem;
  background: var(--paper);
  color: var(--ink);
}
.skip:focus { top: 1rem; }

.masthead {
  background: var(--night) url(/moon.svg) no-repeat right max(3rem, calc(50% - 520px)) center / auto 82%;
  color: var(--on-night);
  padding-block: 1.75rem 3.75rem;
}
.masthead a { color: var(--on-night); }
.masthead :focus-visible { outline-color: var(--moon); }

.masthead nav { display: flex; gap: 2rem; }
.masthead nav a {
  display: grid;
  line-height: 1.3;
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 2px solid transparent;
}
.masthead nav a span[lang] { color: var(--on-night-dim); font: .8rem/1.3 var(--book); }
.masthead nav a:hover { color: var(--moon); }
.masthead nav a[aria-current] { border-bottom-color: var(--moon); }

h1 {
  margin: 4.5rem 0 0;
  font: 500 clamp(3rem, 7vw, 4.75rem)/1.1 var(--song);
  letter-spacing: .06em;
}
h1 span {
  display: block;
  margin-top: .6rem;
  color: var(--on-night-dim);
  font: 400 1.5rem/1.2 var(--book);
  letter-spacing: 0;
}

.meta {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--on-night);
  font-size: 1rem;
  line-height: 1.75;
}
.meta span {
  display: block;
  margin-top: .5rem;
  color: var(--on-night-dim);
  font-family: var(--book);
  line-height: 1.55;
}

main { padding-block: 1.5rem 3rem; }

.clause {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2.75rem;
  padding-block: 2.25rem;
}
.clause.plain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.no {
  margin: 0;
  color: var(--mark);
  font: 400 2.5rem/1 var(--book);
  text-align: right;
}

h2 { margin: 0 0 .7rem; }
.zh h2 { font: 600 1.3rem/1.5 var(--song); }
.en h2 { font: 600 1.25rem/1.56 var(--book); }

.clause p, .clause ul { margin: 0; }
.clause li + li { margin-top: .5rem; }
.clause ul { padding-left: 1.2rem; }
.en { font: 1.04rem/1.65 var(--book); }

code { font-size: .9em; overflow-wrap: anywhere; }

.colophon {
  padding-block: 2.5rem 3rem;
  background: var(--night);
  color: var(--on-night-dim);
  font-size: .9rem;
}
.colophon a { color: var(--on-night); }
.colophon p { margin: 0 0 .25rem; }
.colophon [lang] { font-family: var(--book); }
.colophon .owner { margin-bottom: .75rem; color: var(--on-night); }

@media (max-width: 860px) {
  .sheet { padding-inline: 1.25rem; }
  .masthead { background-position: calc(100% + 170px) 45%; background-size: 400px; padding-bottom: 2.75rem; }
  .masthead nav { gap: 1.5rem; }
  h1 { margin-top: 3rem; }
  .clause, .clause.plain { grid-template-columns: minmax(0, 1fr); padding-block: 1.75rem; }
  .no { font-size: 1.9rem; text-align: left; margin-bottom: .5rem; }
  .en { margin-top: 1.25rem; }
}

@media (max-width: 560px) {
  .masthead { background-position: calc(100% + 250px) 50%; background-size: 340px; }
  .meta { max-width: 78%; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .masthead, .colophon { background: none; color: #000; padding-block: 0 1rem; }
  .masthead a, .masthead nav, .skip { display: none; }
  h1 span, .meta, .meta span, .colophon, .colophon a { color: #000; }
  .clause { break-inside: avoid; padding-block: .75rem; }
}