@font-face{font-family:'LXGW WenKai TC';src:url('../assets/fonts/lxgw-wenkai-tc-subset.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap;unicode-range:U+2013-2027,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
*{box-sizing:border-box;margin:0}
:root{
  --paper:#F7F5EF; --ink:#1f1c18;
  --ink70:rgba(31,28,24,.7); --ink50:rgba(31,28,24,.5); --ink30:rgba(31,28,24,.3); --ink14:rgba(31,28,24,.14);
  --inkBody:rgba(31,28,24,.85); --inkMeta:rgba(31,28,24,.66);
  --gold:#96703A;            
  --link:#8E6A37;            
  --goldL:#C4A467;
  --col:660px;      
  --Lh:105vh; --Lx:0vw; --Ly:52%; --Lo:.12; --Lr:-4deg; --Lsx:.9; --Lsy:1;
  --Rh:112vh; --Rx:2.8vw; --Ry:55.4%; --Ro:.12; --Rr:-.5deg; --Rsx:1; --Rsy:1;
  --fishW:140px; --coilW:430px; --coilOp:.63; --coilX:-25px; --endGap:880px;
  --fadeKeep:calc((100vw - var(--col))/2 * 0.30);   
  --fadeEnd:calc((100vw - var(--col))/2 + 20px);    
}
@font-face{font-family:'EB Garamond';src:url('../assets/fonts/eb-garamond-subset.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-024F,U+2000-206F;}
body{font-family:'EB Garamond','LXGW WenKai TC',"Songti TC","Noto Serif TC",serif;background:var(--paper);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.8;mix-blend-mode:multiply;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.46 0 0 0 0.09 0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.012 0.28" numOctaves="2" seed="11"/><feColorMatrix type="matrix" values="0 0 0 0 0.50 0 0 0 0 0.46 0 0 0 0 0.38 0 0 0 0.07 0"/></filter><rect width="420" height="420" filter="url(%23f)"/></svg>')}

.fr{position:fixed;z-index:1;pointer-events:none;transform-origin:center}

#frL{-webkit-mask-image:linear-gradient(to right, #000 0, #000 var(--fadeKeep), transparent var(--fadeEnd));
             mask-image:linear-gradient(to right, #000 0, #000 var(--fadeKeep), transparent var(--fadeEnd))}
#frR{-webkit-mask-image:linear-gradient(to left,  #000 0, #000 var(--fadeKeep), transparent var(--fadeEnd));
             mask-image:linear-gradient(to left,  #000 0, #000 var(--fadeKeep), transparent var(--fadeEnd))}
body.nofade #frL, body.nofade #frR{-webkit-mask-image:none;mask-image:none}

body.panel main{background:rgba(255,255,255,.62);
  box-shadow:0 0 0 1px rgba(31,28,24,.06), 0 2px 40px rgba(31,28,24,.05);
  padding-left:48px;padding-right:48px;border-radius:3px}
#frL{left:var(--Lx);top:var(--Ly);height:var(--Lh);opacity:var(--Lo);
     transform:translateY(-50%) rotate(var(--Lr)) scale(var(--Lsx),var(--Lsy))}
#frR{right:var(--Rx);top:var(--Ry);height:var(--Rh);opacity:var(--Ro);
     transform:translateY(-50%) rotate(var(--Rr)) scale(var(--Rsx),var(--Rsy))}

main{position:relative;z-index:3;max-width:var(--col);margin:0 auto;padding:9vh 20px 0}

.masthead{text-align:center;margin-bottom:30px}
.masthead .brand{letter-spacing:.3em;font-size:27px;font-weight:700}
.masthead .sub{color:var(--gold);font-size:17.4px;letter-spacing:.16em;margin-top:8px;font-weight:600}
.lang{position:absolute;top:9vh;right:20px;font-size:16.2px;letter-spacing:.06em}
.lang [aria-current]{font-weight:700}
.lang .sl{opacity:.5;margin:0 3px}
.lang a{color:inherit;text-decoration:none;opacity:.62}
.lang a:hover{opacity:1}

.nav{display:flex;gap:24px;justify-content:center;font-size:17.4px;letter-spacing:.12em;
  margin:0 0 44px;padding-bottom:10px;border-bottom:1px solid var(--ink14)}
.nav a{text-decoration:none;color:var(--inkMeta);padding-bottom:6px}
.nav a .bi-zh{display:block;line-height:1.35}
.nav a .bi-en{display:block;line-height:1.3;font-size:.78em;letter-spacing:.06em;opacity:.62}
.nav a:hover{color:var(--ink70)}
.nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--gold)}

.row{padding:22px 4px;border-bottom:1px solid var(--ink14);transition:background 300ms ease}
.row:hover{background:rgba(31,28,24,.022)}
.row .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row .d{font-size:16.2px;color:var(--inkMeta);letter-spacing:.15em}
.row h2{font-size:28.2px;font-weight:600;letter-spacing:.04em;margin:7px 0 4px;line-height:1.45}
.row h2 a{color:inherit;text-decoration:none}
.row h2 a:hover{color:var(--inkBody)}
.row p{font-size:18px;color:var(--inkBody);line-height:1.85}
.tag{display:inline-block;font-size:15px;letter-spacing:.1em;color:var(--inkMeta);
  border:1px solid var(--ink14);border-radius:2px;padding:3px 9px;text-decoration:none}
a.tag:hover{border-color:var(--ink30)}

.row .tagrow{display:none}

.pager{display:flex;gap:2px;align-items:center;justify-content:center;font-size:17.4px;margin:46px 0 0}
.pager a,.pager span{padding:7px 12px;text-decoration:none;color:var(--inkMeta);letter-spacing:.05em}
.pager a:hover{color:var(--ink)}
.pager [aria-current]{color:var(--ink);border-bottom:2px solid var(--gold)}
.pager .sep{color:var(--ink30);padding:0 2px}

.btn{display:inline-block;padding:6px 2px;border-bottom:1.5px solid var(--ink30);color:var(--ink);
  font-size:18px;letter-spacing:.1em;text-decoration:none;transition:border-color 240ms ease,border-width 240ms ease}
.btn:hover,.btn:focus-visible{border-bottom-color:var(--ink);border-bottom-width:2.5px}

blockquote{border-left:2px solid var(--ink30);padding:3px 0 3px 18px;margin:26px 0;
  font-size:18.6px;color:var(--inkBody);line-height:2}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:15.6px;color:var(--inkMeta);letter-spacing:.1em}

.divider{text-align:center;color:var(--ink30);letter-spacing:1em;font-size:18.6px;margin:40px 0}

.artHead{text-align:center;margin:0 0 44px}
.artHead h1{font-size:34.8px;letter-spacing:.03em;line-height:1.5;margin-bottom:12px}
.artHead .m{font-size:15.6px;color:var(--inkMeta);letter-spacing:.16em}
.artHead .m .tag{margin-left:8px;vertical-align:2px}

.prose{font-size:19.2px;line-height:2.05;color:var(--inkBody);overflow-wrap:break-word}   
.prose p{margin:0 0 22px}
.prose h2{font-size:22.8px;color:var(--ink);letter-spacing:.1em;margin:38px 0 14px}
.prose a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness 180ms ease}
.prose a:hover,.prose a:focus-visible{text-decoration-thickness:2.5px}
body.linkAlt .prose a{text-decoration:none;color:var(--gold)}
body.linkAlt .prose a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:52px 0 0;
  padding-top:26px;border-top:1px solid var(--ink14);font-size:17.4px}
.prevnext a{text-decoration:none;color:var(--inkBody);line-height:1.7}
.prevnext a:hover{color:var(--ink)}
.prevnext .lb{display:block;font-size:13.2px;letter-spacing:.2em;color:var(--inkMeta);margin-bottom:5px}
.prevnext .r{text-align:right}

#guide{position:fixed;z-index:2;pointer-events:none;width:var(--fishW);opacity:0}
#guide .idle{animation:idle 5.6s ease-in-out infinite alternate;animation-play-state:paused}
#guide.settled .idle{animation-play-state:running}
#guide img{width:100%;display:block}
@keyframes idle{0%{transform:translateY(-3px)}100%{transform:translateY(4px)}}

#coilWrap{position:relative;z-index:2;pointer-events:none;height:var(--endGap)}
#coil{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--coilX)),-50%);
  opacity:0;transition:opacity 200ms ease-out}
#coil.show{opacity:var(--coilOp)}
#coil img{width:min(var(--coilW),94vw);display:block;animation:tide 10s ease-in-out infinite alternate}
@keyframes tide{from{opacity:.065}to{opacity:1}}

footer.site{position:relative;z-index:3;max-width:var(--col);margin:0 auto;
  padding:8vh 20px 7vh;text-align:center}   
footer.site .fwave{position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:100vw;height:34px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:420px 100%;mask-size:420px 100%;
  animation:uwmaskmove 8s linear infinite}
footer.site .fwave svg{position:absolute;left:0;top:0;width:200%;height:34px;animation:uwflowx 12s linear infinite}
@keyframes uwmaskmove{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:420px 0;mask-position:420px 0}}
@keyframes uwflowx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){footer.site .fwave,footer.site .fwave svg{animation:none}}
footer.site .syms{font-size:22.8px;color:#686661;margin-bottom:16px;display:flex;gap:26px;justify-content:center}
footer.site .syms a{color:inherit;text-decoration:none;transition:color 240ms ease}
footer.site .syms a:hover{color:var(--gold)}
footer.site .syms .keeper{opacity:0;transition:opacity 600ms ease}
footer.site:hover .syms .keeper{opacity:1}
footer.site .line{font-size:15.6px;letter-spacing:.22em;color:var(--inkMeta)}
footer.site .ph{margin-top:10px;font-size:14.4px;letter-spacing:.14em;color:var(--ink30)}

@media (prefers-reduced-motion: reduce){ #guide .idle,#coil img{animation:none} }

@media (max-width:780px){
  :root{ --rev:calc(100vw * .105); --coilX:0px; }   
  .fr{ -webkit-mask-image:none; mask-image:none; }
  #frL{ left:0; right:auto; height:104vh; top:50%; opacity:.205;
        transform:translate(calc(-100% + var(--rev) + 16px),-50%);
        -webkit-clip-path:inset(0 16px 0 calc(100% - var(--rev) - 16px));
        clip-path:inset(0 16px 0 calc(100% - var(--rev) - 16px)); }
  #frR{ right:0; left:auto; height:110vh; top:52%; opacity:.205;
        transform:translate(calc(100% - var(--rev) - 11px),-50%);
        -webkit-clip-path:inset(0 calc(100% - var(--rev) - 11px) 0 11px);
        clip-path:inset(0 calc(100% - var(--rev) - 11px) 0 11px); }
  main{ max-width:480px; padding-left:24px; padding-right:24px; }
  .artHead h1{ font-size:27px; line-height:1.22; text-wrap:balance; }
  .masthead .brand{ font-size:clamp(18px,6vw,24px); letter-spacing:.22em; white-space:nowrap; }
  .masthead .sub{ font-size:15px; }
  .nav{ justify-content:flex-start; gap:12px; font-size:13.5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ flex:0 0 auto; white-space:nowrap; }
  #guide{ display:none; }   
  .row p{ display:none; }
  .row h2{ font-size:17.5px; line-height:1.38; margin:6px 0 2px; }
  .row .meta{ line-height:1.35; gap:8px; }
  .row .meta .tag{ display:none; }
  .row .d{ font-size:12.5px; }
  .tag{ font-size:11.5px; padding:2px 6px; }
  .nav{ margin-bottom:18px; }
  .row{ padding:14px 2px; }
  .row .tagrow{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; opacity:.72; }
  .row .tagrow .tag{ display:inline-block; border:none; background:none; padding:0; font-size:10.5px; letter-spacing:.08em; }
  .row{ padding:14px 2px; }
  .prose{ font-size:17px; line-height:1.75; }
  article .toggles .tgbody{ font-size:17px; line-height:1.75; }
  article .prose .note{ font-size:16px; line-height:1.75; }
  article .prose blockquote,article .toggles .tgbody blockquote{ font-size:16.5px; line-height:1.75; }
  .prevnext{ grid-template-columns:1fr; gap:22px; }
  .prevnext .r{ text-align:left; }
}

#tools{position:fixed;left:12px;bottom:12px;z-index:20;background:rgba(22,19,16,.93);color:#e9e4dc;
  border-radius:8px;padding:10px 13px;font:11.5px/1.7 -apple-system,sans-serif;max-width:330px}
#tools b{color:#E2B371}
#tools label{display:flex;gap:6px;align-items:center;margin-top:7px;cursor:pointer}
#tools a{color:#C4A467}