:root {
  color-scheme: light;
  --paper:#f6f3eb; --card:#fffcf5; --ink:#242a24; --muted:#5b6256; --green:#2d493a;
  --line:#d9d5c8; --rust:#a3472e;
  --serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
}
* {box-sizing:border-box}
body {margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 var(--sans)}
button,input,textarea,select {font:inherit;color:inherit}
button,a,input,textarea,select,summary {-webkit-tap-highlight-color:transparent}
:focus-visible {outline:2px solid var(--rust);outline-offset:4px}
a {color:inherit;text-underline-offset:.25em}
button {cursor:pointer}
button:disabled {cursor:default;opacity:.5}
form {margin:0}
[hidden] {display:none!important}
.shell {width:min(100% - 44px, 1056px);margin-inline:auto}
.top {border-bottom:1px solid var(--line)}
.top-inner,.brand,.top nav {display:flex;align-items:center}
.top-inner {min-height:75px;justify-content:space-between;gap:12px}
.brand {gap:11px;text-decoration:none;font:700 1.12rem/1.3 var(--serif)}
.mark {width:35px;height:35px;display:grid;place-items:center;background:var(--green);color:var(--paper);border-radius:50%}
.brand small {display:block;margin-top:3px;letter-spacing:.12em;color:var(--muted);font: .59rem/1.4 var(--mono)}
.top nav {gap:16px;font-size:.82rem}
.top nav a {text-decoration:none;color:var(--green)}
.quiet {background:none;border:0;padding:8px 0;color:var(--muted)}
.micro {font: .69rem/1.5 var(--mono);letter-spacing:.095em;color:var(--muted)}
.accent {color:var(--rust)}
h1 {font:700 clamp(2.55rem,7.4vw,5.5rem)/1.13 var(--serif);letter-spacing:-.06em;margin:13px 0 14px;overflow-wrap:anywhere}
h1 span {color:var(--rust)}
.lede {margin:0;color:var(--muted);font:1.05rem/1.6 var(--serif);letter-spacing:.08em}
.foot {display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);margin-top:45px;padding:16px 0 26px;color:var(--muted);font:.67rem/1.6 var(--mono);letter-spacing:.11em}
.sign-in,.tools section,.entry {background:var(--card);border:1px solid var(--line);padding:20px}
.sign-in {margin:clamp(45px,9vw,100px) auto;max-width:510px;padding:clamp(21px,5vw,45px);border-top:3px solid var(--green)}
.sign-in h1,.admin h1 {font-size:clamp(2.4rem,6vw,4.4rem)}
.sign-in form {margin-top:24px}
label {display:block;font-size:.85rem;margin-bottom:5px}
input,textarea,select {display:block;width:100%;padding:9px 11px;margin-bottom:12px;border:1px solid #aaa696;border-radius:0;background:var(--card)}
textarea {resize:vertical}
.primary,.actions button {border:1px solid var(--green);padding:8px 14px;background:var(--card);min-height:44px}
.primary,.actions .primary {background:var(--green);color:#fffdf4}
.admin {padding-top:35px;max-width:850px}
.tools {display:grid;gap:12px;margin:23px 0}
@media (min-width:640px) {.tools {grid-template-columns:1fr 1fr}}
.tools h2,.admin>h2 {font:700 1.3rem/1.4 var(--serif);margin:0 0 10px}
.tools p,.entry>a {font-size:.85rem}
.notice {color:var(--rust)}
.entry {margin-bottom:9px}
.entry summary {cursor:pointer;display:flex;justify-content:space-between;gap:12px;overflow-wrap:anywhere}
.entry summary .micro {flex-shrink:0}
.entry[open] summary {margin-bottom:15px}
.entry blockquote {margin:12px 0 16px;border-left:2px solid var(--line);padding-left:12px;white-space:pre-wrap;overflow-wrap:anywhere;font:1rem/1.5 Georgia,serif}
.actions {display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:420px) {
  .shell {width:calc(100% - 30px)}
  .top nav {gap:9px}
}

/* The reading surface has its own scrollport below the masthead. */
.reading {
  --paper:#f7f3e9;
  --ink:#282722;
  --muted:#655e51;
  --copper:#8c5138;
  --line:#d9cdb9;
  --english:Palatino,"Palatino Linotype",Georgia,serif;
  --chinese:"Kaiti SC",STKaiti,KaiTi,serif;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
.reading .top-inner {
  width:min(100% - 40px, 770px);
  min-height:60px;
}
.reading .brand {gap:10px}
.reading .mark {width:30px;height:30px;background:#322a24;color:#efe2ca}
.reading .brand small {font-size:.54rem;letter-spacing:.18em}
.reader-controls {position:relative;display:flex;align-items:center;gap:14px}
.reading-menu {position:relative}
.reading[data-font="b"] {
  --english:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  --chinese:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.reading[data-font="c"] {
  --english:Didot,"Bodoni MT","Times New Roman",serif;
  --chinese:STFangsong,FangSong,"Songti SC",serif;
}
.font-menu {position:static}
.font-panel button {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  padding:8px 10px;
  text-align:left;
}
.font-panel button:last-child {border-bottom:0}
.font-panel button[aria-pressed="true"] {background:var(--selected);color:var(--copper)}
.reading-menu summary {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer;
  list-style:none;
  color:var(--muted);
  font-size:.78rem;
}
.reading-menu summary::-webkit-details-marker {display:none}
.reading .reading-panel {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(255px, calc(100vw - 40px));
  max-height:calc(100dvh - 90px);
  overflow:auto;
  display:block;
  padding:12px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 12px 32px #362b201c;
}
.reading-menu:not([open]) .reading-panel {display:none}
.reading-panel a,.reading-panel button {display:flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted)}
.reader {
  height:100%;
  overflow-x:hidden;
  scrollbar-width:none;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-snap-type:y proximity;
}
.folio {
  min-height:100%;
  display:flex;
  scroll-snap-align:start;
  position:relative;
  --page-gutter:clamp(25px,8.5vw,44px);
  padding-inline:max(var(--page-gutter),env(safe-area-inset-left)) max(var(--page-gutter),env(safe-area-inset-right));
}
.folio:focus {outline:none}
.folio-sheet {
  flex:1;
  min-width:0;
  max-width:770px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}
.folio-quote {
  width:min(100%, 590px);
  margin:auto;
  padding-block:max(40px,calc(env(safe-area-inset-top) + 32px)) max(65px,calc(env(safe-area-inset-bottom) + 50px));
}
.post-surface {position:relative}
.post-space {display:none}
@media (pointer:coarse) {
  .post-space {display:block;position:absolute;inset:0}
  .post-english a {position:relative}
  .post-english {position:relative}
  .post-english a {pointer-events:auto}
}
.post-author {
  display:flex;align-items:center;gap:5px;min-height:40px;
  text-decoration:none;color:var(--muted);font:400 .69rem/1.2 var(--sans);
}
.post-author img {border-radius:50%;object-fit:cover}
.post-english {
  margin:0;
  color:var(--ink);
  font:400 clamp(2rem,10.5vw,4rem)/1.08 var(--english);
  letter-spacing:-.03em;
  text-wrap:pretty;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.folio-medium .post-english {font-size:clamp(1.8rem,8.5vw,3.45rem);line-height:1.1}
.folio-long .post-english {font-size:clamp(1.63rem,6.8vw,2.55rem);line-height:1.13}
.post-english a {text-decoration-color:var(--copper);text-decoration-thickness:1px}
.folio-translation {
  margin-top:clamp(17px,3.5vh,31px);
  max-width:30em;
}
.folio-translation::before {
  content:"";
  display:block;
  width:1.65rem;
  height:1px;
  margin-bottom:clamp(14px,2.8vh,24px);
  background:var(--copper);
  opacity:.6;
}
.folio-translation p {
  margin:0;
  color:var(--muted);
  font:400 clamp(.94rem,4vw,1.1rem)/1.85 var(--chinese);
  letter-spacing:.06em;
  text-wrap:pretty;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.reading-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:770px;
  margin-inline:auto;
}
.reading-actions {display:flex;align-items:center;gap:3px;color:var(--copper)}
.reading-actions button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:5px;
  background:none;
}
.reading-actions button:not([aria-disabled="true"]):hover {background:var(--selected)}
.reading-actions button[aria-disabled="true"] {opacity:.35;cursor:default}
.reading-actions svg {fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.reader-empty {min-height:100%;width:min(100% - 44px,610px);margin:auto;display:grid;align-content:center}
.reader-empty h1 {font-size:clamp(1.8rem,6vw,3rem)}
@media (max-height:650px) {
  .reading .top-inner {min-height:49px}
}

/* Reading controls and the two levels of navigation. */
.reading {
  --selected:#ede4d5;
  --thumb:#fffaf0;
  --track:#e8decc;
  --masthead-mark:#322a24;
  --masthead-star:#efe2ca;
}
.reading[data-theme="night"] {
  color-scheme:dark;
  --paper:#211e19;
  --ink:#eee6d8;
  --muted:#c2b49f;
  --copper:#d8a185;
  --line:#524638;
  --selected:#3b3025;
  --thumb:#e1c4a2;
  --track:#40362b;
  --masthead-mark:#ead8ba;
  --masthead-star:#382b21;
}
.reading .mark {background:var(--masthead-mark);color:var(--masthead-star)}
.theme-switch {
  min-height:44px;
  border:0;
  padding:0;
  background:none;
  display:grid;
  place-items:center;
}
.theme-track {
  width:48px;
  height:24px;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--track);
  display:flex;
  justify-content:space-around;
  align-items:center;
  position:relative;
  color:var(--muted);
  font:14px/1 Georgia,serif;
}
.theme-track i {
  position:absolute;
  left:2px;
  width:18px;
  height:18px;
  background:var(--thumb);
  border-radius:50%;
  box-shadow:0 1px 4px #0004;
  transition:transform .18s ease;
}
.theme-switch[aria-checked="true"] i {transform:translateX(24px)}
/* Edge panels overlay the sheet, so opening controls never shifts the quote. */
.edge {position:absolute;inset-inline:0;pointer-events:none}
.reading .edge-top {top:0;z-index:3;border:0}
.edge-bottom {bottom:0;z-index:2;overflow:clip}
.edge-trigger {
  position:absolute;
  inset-inline:0;
  width:100%;
  min-height:30px;
  border:0;
  background:transparent;
  pointer-events:auto;
}
.edge-top .edge-trigger {top:0;height:calc(30px + env(safe-area-inset-top))}
.edge-bottom .edge-trigger {bottom:0;height:calc(30px + env(safe-area-inset-bottom))}
.edge-panel {
  position:relative;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:var(--paper);
  transition:transform .32s cubic-bezier(.2,.7,.25,1), opacity .24s ease, visibility 0s .32s;
}
.edge-top .edge-panel {
  transform:translateY(-100%);
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--line);
}
.edge-bottom .edge-panel {
  transform:translateY(100%);
  padding:0 max(22px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(22px,env(safe-area-inset-left));
  border-top:1px solid var(--line);
}
.edge[data-open] .edge-panel,.edge:has(:focus-visible) .edge-panel {
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
@media (hover:hover) {
  .edge:hover .edge-panel {
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
}
.section-menu {position:static}
.reading .section-menu nav {gap:0;flex-wrap:wrap}
.section-menu nav + nav {border-top:1px solid var(--line)}
.section-menu a[aria-current] {color:var(--copper);text-decoration:underline}
.reading-actions .bookmark[aria-pressed="true"] svg {fill:currentColor}
@media (max-width:380px) {
  .reading .top-inner {width:calc(100% - 28px)}
  .reader-controls {gap:8px}
}
@media (max-height:650px) {
  .folio-quote {padding-block:32px 48px}
  .folio-translation {margin-top:16px}
}
@media (prefers-reduced-motion:reduce) {.theme-track i,.edge-panel {transition:none}}
.verify-source {display:flex;align-items:baseline;gap:8px;margin:12px 0;color:var(--muted)}
.verify-source input {display:inline;width:auto;margin:0}

@media (hover:none) and (pointer:coarse) {
  .reader {scroll-snap-type:y mandatory}
  .folio {scroll-snap-stop:always}
  .post-space {display:none}
}