@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #f8f6ef;
  --ink: #28372e;
  --muted: #6d756a;
  --green: #3d624a;
  --line: #deded1;
  --focus: #3d624a;
}

* {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 28px}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
a {color: inherit; text-decoration: none}
a, summary {-webkit-tap-highlight-color: transparent}
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
  border-radius: 2px;
}
h1, h2, h3, p {margin: 0}
.site-shell {width: min(1120px, calc(100% - 96px)); margin: 0 auto}
.skip-link {
  position: fixed;
  top: 12px;
  left: 20px;
  z-index: 10;
  padding: 9px 15px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-180%);
}
.skip-link:focus {transform: translateY(0)}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 108px;
  border-bottom: 1px solid var(--line);
}
.site-name {font-size: 23px; font-weight: 650; letter-spacing: -.6px; white-space: nowrap}
.site-name span {color: var(--green); margin-left: 3px}
.site-header nav {display: flex; gap: 36px; font-size: 14px; color: #546151}
.site-header nav a {padding: 8px 0}
.site-header nav a:hover {color: var(--green); text-decoration: underline; text-underline-offset: 6px}

.introduction {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 72px;
  padding: 86px 0 92px;
}
h1 {
  font-family: "STIX Two Text", "Songti SC", "SimSun", serif;
  font-size: clamp(40px, 4.8vw, 66px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.05em;
}
.introduction-copy {max-width: 330px; padding-bottom: 8px; color: var(--muted); font-size: 15px; line-height: 1.95}
.introduction-copy p:first-child {margin-bottom: 12px; color: var(--green); font-size: 17px}

.section-heading {display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 23px}
h2 {font-size: 22px; font-weight: 600; letter-spacing: -.02em}
.section-heading p {font-size: 12px; color: var(--muted)}
.notes {padding-bottom: 76px}
.note {border-top: 1px solid var(--line)}
.note:last-child {border-bottom: 1px solid var(--line)}
.note summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  align-items: center;
  gap: 36px;
  padding: 29px 0 31px;
  cursor: pointer;
  list-style: none;
}
.note summary::-webkit-details-marker {display: none}
.note summary::marker {content: ""}
.note-heading {display: block; min-width: 0}
.note-title {display: block;font-size: 20px; font-weight: 550; letter-spacing: -.02em; line-height: 1.6}
.note-description {display: block;margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.8}
.note summary:hover .note-title {color: var(--green)}
.note-meta {display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted)}
.note-meta time {font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap}
.note-toggle {font-size: 28px; font-weight: 300; color: var(--green); line-height: 1; transition: transform .18s ease}
.note[open] .note-toggle {transform: rotate(45deg)}
.note[open] summary {padding-bottom: 18px}
.note-content {max-width: 720px; padding: 0 0 32px; color: #4f5a4f; font-size: 15px; line-height: 2}
.note-content p + p {margin-top: 15px}

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 52px;
  padding: 41px 0 53px;
  border-top: 1px solid var(--line);
}
.about h2 {font-size: 19px; color: var(--green)}
.about > div {max-width: 595px; font-size: 14px; line-height: 1.95; color: var(--muted)}
.about p + p {margin-top: 9px}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 27px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.site-footer a:hover {color: var(--green); text-decoration: underline; text-underline-offset: 4px}

@media (max-width: 820px) {
  .site-shell {width: calc(100% - 56px)}
  .site-header {min-height: 91px}
  .introduction {gap: 35px; padding: 63px 0 72px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr)}
  h1 {font-size: 43px}
  .introduction-copy {font-size: 14px; padding-bottom: 5px}
  .introduction-copy p:first-child {font-size: 15px}
  .note summary {gap: 25px; grid-template-columns: minmax(0, 1fr) 130px}
  .note-title {display: block;font-size: 19px}
  .about {gap: 32px}
}

@media (max-width: 560px) {
  html {scroll-padding-top: 20px}
  .site-shell {width: calc(100% - 40px)}
  .site-header {min-height: 82px; gap: 16px}
  .site-name {font-size: 20px}
  .site-header nav {gap: 20px; font-size: 13px}
  .introduction {grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 45px 0 52px}
  h1 {font-size: clamp(36px, 9.8vw, 48px); line-height: 1.43}
  .introduction-copy {max-width: 350px; padding: 0; font-size: 14px; line-height: 1.9}
  .introduction-copy p:first-child {margin-bottom: 7px}
  .section-heading {padding-bottom: 18px; gap: 16px}
  h2 {font-size: 20px}
  .section-heading p {font-size: 11px}
  .notes {padding-bottom: 43px}
  .note summary {grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 23px 0}
  .note-title {display: block;font-size: 18px; line-height: 1.65}
  .note-description {display: block;font-size: 13px; margin-top: 6px}
  .note-meta {gap: 20px}
  .note-meta time {font-size: 11px}
  .note-toggle {font-size: 24px}
  .note-content {padding-bottom: 26px; font-size: 14px; line-height: 1.95}
  .about {grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 31px 0 34px}
  .about h2 {font-size: 18px}
  .site-footer {align-items: flex-start; flex-direction: column; gap: 7px; padding: 23px 0 28px; font-size: 11px}
}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  .note-toggle {transition: none}
}