:root {
  --font-family-chinese: "Noto Sans", sans-serif;
  --font-family-alt: "KaiTi", 楷体, STKaiti, 华文楷体, serif;
  --font-weight: 400;
  --font-weight-bold: 700;
  --text-scale: 1.2;
  --font-size-x-display: 4.3rem;
  --font-size-display: 3.583rem;
  --font-size-xxx-large: 2.986rem;
  --font-size-xx-large: 2.488rem;
  --font-size-x-large: 2.074rem;
  --font-size-large: 1.728rem;
  --font-size-medium: 1.2rem;
  --font-size: 1rem;
  --font-size-small: 0.833rem;
  --line-height-text: 1.5;
  --line-height-heading: 1;

  --color-background: #fff;
  --color-background-moon: hsla(31, 42%, 80%, 1.00);
  --color-background-cover: hsla(29, 32%, 56%, 1.00);
  --color-text-default: #302921;
  --color-text-alt: #fff;
  --color-accent: #bc262c;
  --color-accent-darker: #821b20;
  --border-color: var(--color-text-default);

  --malarkeys-grid: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
  --grid-column-gap: 2vw;
  --grid-row-gap: 4vh;
  --max-width: 84rem;
  --spacing-xx-small: 0.25rem;
  --spacing-x-small: 0.5rem;
  --spacing-small: 0.75rem;
  --spacing: 1rem;
  --spacing-medium: 1.5rem;
  --spacing-large: 2rem;
  --spacing-x-large: 4rem;
  --spacing-xx-large: 8rem;
  --duration-default: 0.25s;
  --duration-long: 5s;

  --border-radius-circle: 50%;
  --border-width: 1px;
  --border-width-thick: 3px;
  --border-style-thin: var(--border-width) solid var(--border-color);
  --border-style-thick: var(--border-width-thick) solid var(--border-color);

  --max-width: 90rem;
  --min-width: 60rem;
  --spacing-x-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing: 0.75rem;
  --spacing: 1rem;
  --spacing-medium: 1.5rem;
  --spacing-large: 2rem;
  --spacing-x-large: 4rem;

}

@media (min-width: 48em) {
  :root {
    --font-size-x-display: 5.16rem;
    --font-size-display: 4.3rem;
    --font-size-xxx-large: 3.583rem;
    --font-size-xx-large: 2.986rem;
    --font-size-x-large: 2.488rem;
    --font-size-large: 2.074rem;
    --font-size-medium: 1.728rem;
    --font-size: 1.2rem;
  }
}

html {
  font-family: var(--font-family-chinese);
  font-size: var(--font-size);
  color: var(--color-text-default);
}

body {
  margin: 0;
}

header,
nav,
main,
footer {
  margin: var(--spacing-small);
}

.cover-photo {
  width: 100%;
}

.rong-cheng g {
  fill: var(--color-background-moon);
}

.family-seal {
  width: 50px;
}

.moon {
  width: 200px;
  height: 200px;
  z-index: 10;
  background-color: var(--color-background-moon);
  border-radius: var(--border-radius-circle);
  transform: translateX(-30px);
  animation: moon-rise var(--duration-long) ease-in;
}

@media (min-width: 48em) {

  body {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
    grid-row-gap: var(--grid-row-gap);
  }

  /* header {
    grid-column: 2 / 8;
    grid-row: 1;
    margin: 0;
  } */

  header {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-block-start: var(--spacing-medium);
    writing-mode: vertical-lr;
  }

  .rong-cheng {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    align-content: center;
    justify-content: end;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-background-cover);
    
  }

  .rong-cheng svg {
    width: 400px;
  }
  
  .book-title {
    grid-column: 2 / 5;
    grid-row: 1;
    align-self: center;
    z-index: 1;
  }

  .moon {
    grid-column: 2 / 3;
    grid-row: 1;
  }

  .cover-photo {
    grid-column: 6 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    object-fit: cover;
    width: initial;
    min-width: 50%;
    min-height: 50vh;
  }

  .family-seal {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-self: end;
    margin-block-end: var(--spacing-medium);
  }

  .village-painting {
    grid-column: 2 / 8;
    z-index: 1;
  }

  article h1 {
    margin: 0;
    margin-block-end: var(--spacing-medium);
  }

  article h2 {
    margin-block-end: var(--spacing);
  }

  figure {
    width: min-content;
    margin: 0;
  }

  article h1,
  article h2,
  article figure {
    column-span: all;
  }

  h1:lang(en) {
    grid-column: 2 / -1;
    grid-row: 2;
    margin: 0;
  }

  main {
    grid-column: 3 / 8;
    margin: 0;
  }

  article p {
    margin: 0;
    margin-block-end: var(--spacing-small);
  }

  p + p {
    text-indent: 1em;
  } 

  article {
    max-width: 80ch;
    margin-block-end: var(--spacing-medium);
  }

  .f-inline-start {
    float: inline-start;
    margin-inline-end: 1em;
  }

  .f-inline-end {
    float: inline-end;
    margin-inline-start: 1em;
  }
  
  article figure {
    margin-block-end: 1em;
  }

  figcaption p {
    margin: 0;
    font-size: var(--font-size-x-small);
    color: var(--color-accent);
  }

  blockquote p {
    margin: 0;
    font-family: var(--font-family-chinese-alt);
   
  }

  figcaption p + p,
  article blockquote p + p {
    text-indent: 0;
  } 

  .descendants article {
    column-width: initial;
  }

  .standfirst {
    font-size: var(--font-size-medium);
  }

  .standfirst + cite {
    margin-block-end: var(--spacing-large);
  }

  
  .book-credits article p:first-of-type {
    text-indent: 0;
  }

  footer {
    grid-column: 2 / 8;
    grid-row: 3;
  }

}

@media (prefers-reduced-motion: reduce) {
  .moon {
    animation: none;
  }
}

@keyframes moon-rise {  
  from {
    opacity: 0;
    /* transform: translateX(-20px) translateY(-400px); */
  }

  to {
    opacity: 1;
    /* transform: translateX(-20px) translateY(-10px); */
  }
}

h1 {
  font-size: var(--font-size-x-display);
  color: var(--color-accent);
}

header h1 {
  margin-block-start: 0;
  margin-inline-start: var(--spacing-small);
  font-size: var(--font-size-large);
}

h1:lang(en) {
  margin: var(--spacing-small);
}


.toc h1 {
  margin-block-start: 0;
  margin-block-end: var(--spacing-medium);
}

.toc ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .toc ol {
    columns: 18em;
    column-gap: 2vw;
  }
}



h1 span {
  display: block;
  font-size: var(--font-size-large);
  color: var(--color-accent-darker);
}

h2 {
  font-size: var(--font-size-xxx-large);
}

h3 {
  font-size: var(--font-size-xx-large);
}

h4 {
  font-size: var(--font-size-x-large);
}

h5 {
  font-size: var(--font-size-medium);
}

h6 {
  font-size: var(--font-size-medium);
}

p {
  font-size: var(--font-size);
  line-height: var(--line-height-text);
}

li {
  font-size: var(--font-size);
  line-height: var(--line-height-text);
}

li+li {
  margin-block-start: var(--spacing);
}

footer {
  margin: 0;
}

footer ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

footer ul li {
  margin: var(--spacing) var(--spacing) var(--spacing) 0;
  font-size: var(--font-size-small);

}

cite {
  display: block;
}

/* =Subscripts */

sub {
  font-feature-settings: "subs"1;
}

@supports (font-variant-position: sub) {
  sub {
    font-feature-settings: normal;
    font-variant-position: sub;
  }
}

@supports ((font-variant-position: sub) or (font-feature-settings: "subs"1)) {
  sub {
    font-size: inherit;
    vertical-align: inherit;
  }
}

/* =Superscripts */

sup a {
  text-decoration: none;
}

sup {
  font-feature-settings: "sups"1;
}

@supports (font-variant-position: super) {
  sup {
    font-feature-settings: normal;
    font-variant-position: super;
  }
}

@supports ((font-variant-position: super) or (font-feature-settings: "sups"1)) {
  sup {
    font-size: inherit;
    vertical-align: inherit;
  }
}

a:link {
  color: var(--color-accent);
}

a:visited {
  color: var(--color-accent-darker);
}

a:hover,
a:focus {
  outline: 1px dotted var(--color-background-cover);
}

header a:link,
header a:visited,
header a:hover,
header a:focus {
  color: inherit;
  text-decoration: none;
}

/* table */

table {
  margin: var(--spacing) 0;
}

th,
td {
  padding: 0 var(--spacing-x-small);
  font-family: var(--font-family-chinese);
  font-size: var(--font-size-small);
  text-align: start;
  white-space: nowrap;
  vertical-align: top;

}

thead th,
thead td {
  border-bottom: var(--border-width) solid var(--border-color);
}

tbody th,
tbody td {
  border-bottom: var(--border-width) solid var(--border-color);
}

tbody tr:last-of-type th,
tbody tr:last-of-type td {
  border-bottom-width: 0;
}