@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./assets/font-63e313fb9c65b6b2.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/font-6d37a86241a25d63.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/font-1724047c8988ca51.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/font-69e7ae35cba23d96.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/font-0c2fad18ed36cc40.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/font-ff7cf63717c27756.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/font-1b08e7fc267a5c7e.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/font-8c883f63b2c4157d.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/font-e7a1aaf7eda9f2fa.ttf) format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/font-a7a0a9114e29fbf6.ttf) format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/font-b8f5e0a8bdd6a12c.ttf) format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/font-68c4493c7c6c9aaf.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./assets/font-643f64e9bfc140a9.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/font-6a8c9be856a6b9e0.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/font-9a9f465776e653cd.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/font-8900df5726b5a6f2.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/font-49dcdf653a004a25.ttf) format('truetype');
}

:root {
  --paper: #f4efe6;
  --paper-2: #e9e2d4;
  --ink: #1c1712;
  --soft: #5c534a;
  --faint: #8a7f72;
  --line: #d5cbbd;
  --line-strong: #1c1712;
  --burg: #7c2f38;
  --burg-deep: #5c2229;
  --gold: #8d6436;
  --pine: #1d3a34;
  --max: 1180px;
  --serif: "Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  --text: "Newsreader", "Noto Sans", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --zh-serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
  --zh-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[lang="zh-Hans"] { --text: var(--zh-serif); --serif: var(--zh-serif); --sans: var(--zh-sans); }
html[lang="zh-Hant"] { --text: "Noto Serif TC", "PMingLiU", serif; --serif: "Noto Serif TC", serif; --sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
html[lang="ja"] { --text: "Noto Sans JP", "Yu Gothic", sans-serif; --serif: "Noto Sans JP", sans-serif; --sans: "Noto Sans JP", sans-serif; }
html[lang="ko"] { --text: "Noto Sans KR", "Malgun Gothic", sans-serif; --serif: "Noto Sans KR", sans-serif; --sans: "Noto Sans KR", sans-serif; }
html[lang="ar"], html[lang="fa"], html[lang="ur"] { --text: "Noto Sans Arabic", "Segoe UI", sans-serif; --serif: "Noto Sans Arabic", sans-serif; --sans: "Noto Sans Arabic", sans-serif; }
html[lang="he"] { --text: "Noto Sans Hebrew", "Segoe UI", sans-serif; --serif: "Noto Sans Hebrew", sans-serif; --sans: "Noto Sans Hebrew", sans-serif; }
html[lang="hi"] { --text: "Noto Sans Devanagari", "Nirmala UI", sans-serif; --serif: "Noto Sans Devanagari", sans-serif; --sans: "Noto Sans Devanagari", sans-serif; }
html[lang="bn"] { --text: "Noto Sans Bengali", "Nirmala UI", sans-serif; --serif: "Noto Sans Bengali", sans-serif; --sans: "Noto Sans Bengali", sans-serif; }
html[lang="ta"] { --text: "Noto Sans Tamil", "Nirmala UI", sans-serif; --serif: "Noto Sans Tamil", sans-serif; --sans: "Noto Sans Tamil", sans-serif; }
html[lang="th"] { --text: "Noto Sans Thai", "Leelawadee UI", sans-serif; --serif: "Noto Sans Thai", sans-serif; --sans: "Noto Sans Thai", sans-serif; }
html[lang="ru"], html[lang="uk"], html[lang="el"] { --text: "Noto Sans", "Segoe UI", sans-serif; --serif: "Noto Sans", sans-serif; --sans: "Noto Sans", sans-serif; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(141, 100, 54, 0.08), transparent 50%),
    var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
}
html[lang="zh-Hans"] body, html[lang="zh-Hant"] body, html[lang="ja"] body, html[lang="ko"] body { line-height: 1.85; font-size: 1.07rem; }
html.i18n-pending body { visibility: hidden; }
img { max-width: 100%; display: block; }
html[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80;
  background: transparent; pointer-events: none;
}
.progress span { display: block; height: 100%; width: 0; background: var(--burg); }

.mast {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px;
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  text-decoration: none;
  display: flex; flex-direction: column; line-height: 1;
  min-width: 132px;
}
.brand strong {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: 0.16em;
  font-size: 0.98rem;
}
.brand em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-top: 4px;
}
.nav { display: flex; flex-wrap: wrap; gap: 8px 16px; flex: 1; }
.nav a {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--soft);
}
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--burg); }
.nav a:hover { color: var(--ink); }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang, .nav-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 6px 10px;
  cursor: pointer;
  font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", "Noto Sans Thai", var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  max-width: 11.5rem;
  background: var(--paper);
}
.lang:hover, .nav-toggle:hover { background: var(--ink); color: var(--paper); }
.nav-toggle { display: none; }

.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.wrap-s { width: min(820px, calc(100% - 48px)); margin: 0 auto; }

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burg);
  margin: 0 0 12px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 560; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 6vw, 5.1rem); margin: 0 0 18px; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 12px; }
h3 { font-size: 1.45rem; margin: 0 0 8px; }
.deck { font-size: 1.35rem; line-height: 1.45; max-width: 40rem; color: var(--ink); }
html[lang="zh-Hans"] .deck, html[lang="zh-Hant"] .deck { font-size: 1.2rem; line-height: 1.7; }
.lede { font-size: 1.22rem; }
p { margin: 0 0 1rem; }
.soft { color: var(--soft); }

.nameplate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: end;
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--ink);
}
.nameplate .side {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.nameplate .side.right { text-align: right; }
.nameplate .mark { text-align: center; }
.nameplate .mark strong {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 560;
  letter-spacing: 0.18em;
  display: block;
  line-height: 0.85;
}
.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }
.rule.double { border-top: 3px solid var(--ink); height: 4px; border-bottom: 1px solid var(--ink); }

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 42px;
  padding: 36px 0 10px;
  align-items: end;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn:hover { background: var(--burg); color: var(--paper); border-color: var(--burg); }

.frame { margin: 0; }
.frame img { width: 100%; object-fit: cover; }
.frame.ratio-3-2 img { aspect-ratio: 3 / 2; }
.frame.ratio-16-9 img { aspect-ratio: 16 / 9; }
.frame.ratio-4-5 img { aspect-ratio: 4 / 5; }
.frame.art img { object-fit: contain; background: #e5ddcf; aspect-ratio: 4 / 5; }
.frame.ratio-1 img { aspect-ratio: 1; }
figcaption {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--soft);
  padding-top: 8px;
  line-height: 1.45;
}

.stats {
  list-style: none; padding: 0; margin: 28px 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.stats li { padding: 18px 16px 16px 0; }
.stats li + li { border-left: 1px solid var(--line); padding-left: 16px; }
.stats strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.stats span { display: block; color: var(--soft); font-size: 0.98rem; }

.section { padding: 54px 0; }
.section + .section { border-top: 1px solid var(--line); }

.layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.toc {
  position: sticky; top: 78px;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px;
}
.toc a {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--soft);
  line-height: 1.35;
}
.toc a:hover { color: var(--burg); }

.prose a { color: var(--burg); }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose p { max-width: 68ch; }
.drop::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 3.4rem;
  line-height: 0.8;
  padding-right: 10px;
  color: var(--burg);
}

.pull {
  margin: 1.6rem 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--burg);
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.25;
  max-width: 28ch;
}
html[lang="zh-Hans"] .pull, html[lang="zh-Hant"] .pull { font-size: 1.45rem; line-height: 1.5; }

.caution {
  background: #f7f1e4;
  border: 1px solid var(--line);
  border-left: 3px solid var(--burg);
  padding: 14px 16px;
  margin: 1.2rem 0 1.4rem;
  max-width: 68ch;
}
.caution p:last-child { margin: 0; }

.bars { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 8px; max-width: 720px; }
.bar-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 12px; align-items: center; }
.bar-label { font-family: var(--sans); font-size: 0.82rem; }
.track { height: 9px; background: var(--paper-2); }
.track span { display: block; height: 100%; background: var(--ink); width: var(--w); }
.track.alt span { background: var(--burg); }
.bar-val { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card {
  text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 100%;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.card:hover h3 { color: var(--burg); }
.card .meta, .meta {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.index-no {
  font-family: var(--serif);
  color: var(--burg);
  font-size: 0.95rem;
}

.city {
  position: relative;
  color: #f6f1e8;
  min-height: 280px;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.city img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city .shade {
  position: relative;
  width: 100%;
  padding: 18px;
  background: linear-gradient(transparent, rgba(18, 12, 8, 0.78));
}
.city h3 { margin: 0 0 4px; font-size: 1.8rem; }
.city p { margin: 0; color: #f0e6d8; font-size: 0.98rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--soft);
}
.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--sans); font-size: 0.92rem; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.filters button, .search {
  border: 1px solid var(--line);
  background: transparent;
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search { min-width: min(280px, 100%); text-transform: none; letter-spacing: 0; cursor: text; }

.receipt {
  background: #fffdf8;
  border: 1px solid var(--ink);
  padding: 18px 18px 8px;
  max-width: 460px;
  box-shadow: 8px 8px 0 rgba(28, 23, 18, 0.06);
}
.receipt label { display: block; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.receipt input[type="number"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 12px;
}
.receipt dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 12px; }
.receipt dt { color: var(--soft); }
.receipt dd { margin: 0; font-variant-numeric: tabular-nums; }
.total-line { border-top: 1px solid var(--ink); padding-top: 8px; font-family: var(--serif); font-size: 1.3rem; }

details.term { border-bottom: 1px solid var(--line); padding: 10px 0; }
details.term summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; }
details.term p { color: var(--soft); margin: 8px 0 4px; max-width: 68ch; }

.checks { list-style: none; padding: 0; margin: 12px 0 0; }
.checks li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.checks label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checks input { margin-top: 0.4rem; accent-color: var(--burg); }

.seen {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.dots { display: flex; gap: 6px; align-items: center; }
.dots i {
  width: 9px; height: 9px; border: 1px solid var(--ink); display: block; font-style: normal;
}
.dots i.on { background: var(--burg); border-color: var(--burg); }

.nextbar {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 0 10px;
  border-top: 1px solid var(--ink);
  margin-top: 20px;
}
.nextbar a { text-decoration: none; }
.nextbar a:hover { color: var(--burg); }
.nextbar small { display: block; font-family: var(--sans); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; color: var(--faint); }

.sources { font-size: 0.95rem; color: var(--soft); }
.sources a { color: var(--burg-deep); }
.sources li { margin: 0 0 6px; }

.footer {
  border-top: 1px solid var(--ink);
  margin-top: 20px;
  padding: 28px 0 48px;
  color: var(--soft);
  font-size: 0.95rem;
}
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }

.essay-list { display: flex; flex-direction: column; }
.essay-list a {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  text-decoration: none;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.essay-list a:hover h3 { color: var(--burg); }
.essay-list h3 { font-size: 1.45rem; margin: 0; }
.mins { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--faint); white-space: nowrap; }

.note-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

hr.quiet { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

@media (max-width: 980px) {
  .hero, .layout, .grid-3, .grid-2, .note-split, .footer .cols, .grid-6 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats li + li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .nameplate { grid-template-columns: 1fr; text-align: left; }
  .nameplate .side.right { text-align: left; }
  .toc { position: static; flex-direction: row; overflow: auto; gap: 14px; padding-bottom: 8px; }
  .toc a { white-space: nowrap; }
  .essay-list a { grid-template-columns: 48px 1fr; }
  .mins { grid-column: 2; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .brand { order: 1; }
  .nav-toggle { order: 2; }
  .tools { order: 3; }
  .nav {
    display: none;
    order: 4;
    position: static;
    flex: 1 0 100%;
    flex-direction: column;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 12px 0 4px;
    gap: 12px;
  }
  .mast.open .nav { display: flex; }
  .mast { flex-wrap: wrap; padding: 12px 16px; }
  .wrap, .wrap-s { width: min(var(--max), calc(100% - 32px)); }
  .bar-row { grid-template-columns: 1fr; gap: 4px; }
  h1 { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.share-page{scroll-margin-top:72px}
h1,h2{scroll-margin-top:76px}
.share-page+.share-page{border-top:1px solid var(--line)}


html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-width:320px}*,*::before,*::after{box-sizing:border-box}img,video{max-width:100%}input,select,textarea{font-size:16px}:focus-visible{outline:2px solid #b79b61;outline-offset:4px}[data-lang],#langs,.lang-button,.lang-btn,[aria-label="Language"],[aria-label="Choose language"],[aria-label="Select language"],[aria-label="语言"]{display:none!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}