@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/media/fonts/fraunces-latin.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/media/fonts/fraunces-latin-italic.woff2') format('woff2');}
:root{
  --bg:#ffffff; --bg2:#f7f7f7; --card:#ffffff; --line:#e5e5e5;
  --text:#1a1a1a; --muted:#666666; --accent:#ce8339; --accent2:#a8651f;
  --gold:#a8651f;
}
[data-theme="dark"]{
  --bg:#0c110d; --bg2:#121812; --card:#171f18; --line:#2c372d;
  --text:#f2ede2; --muted:#a3ada0; --accent:#e0a05f; --accent2:#ce8339;
  --gold:#e6c878;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c110d; --bg2:#121812; --card:#171f18; --line:#2c372d;
    --text:#f2ede2; --muted:#a3ada0; --accent:#e0a05f; --accent2:#ce8339;
    --gold:#e6c878;
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;}}
body{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  font-size:17px; line-height:1.7; letter-spacing:.011em;
}
h1,h2,h3,.logo{font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:700; color:var(--text);}
a{color:var(--accent); text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset:3px;}
a:hover{text-decoration-color:var(--accent);}
::selection{background:rgba(224,160,95,.28);}

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 6%; border-bottom:1px solid var(--line); background:var(--bg);
}
.logo-wrap{display:flex; align-items:center; gap:11px; text-decoration:none;}
.logo-mark{height:26px; width:auto; display:block;}
[data-theme="dark"] .logo-mark{filter:invert(1) sepia(.14) brightness(1.05);}
.logo{font-size:1.18rem; letter-spacing:.24em; font-weight:600; color:var(--text);}
nav a{
  color:var(--muted); text-decoration:none; margin-left:26px;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:color .2s;
}
nav a:hover{color:var(--gold);}

main{max-width:780px; margin:0 auto; padding:64px 6% 90px;}
.eyebrow{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--gold); text-transform:uppercase; letter-spacing:.2em;
  font-size:.72rem; font-weight:600; margin-bottom:14px;
}
h1{font-size:clamp(2.1rem, 5vw, 2.8rem); line-height:1.12; letter-spacing:.005em; margin-bottom:12px;}
.updated{
  color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:44px;
}
h2{
  font-size:1.65rem; line-height:1.25; margin:52px 0 16px; padding-top:30px;
  border-top:1px solid var(--line);
}
h3{font-size:1.22rem; margin:30px 0 10px;}
p, li{color:var(--text); font-size:1rem; margin-bottom:15px; max-width:68ch;}
ul, ol{padding-left:22px; margin-bottom:15px;}
li::marker{color:var(--accent);}
strong{color:var(--text); font-weight:600;}
img{max-width:100%; height:auto;}
main img{border:1px solid var(--line); border-radius:10px;}
.page-hero{display:block; width:100%; height:auto; margin-bottom:30px;}
.page-hero.portrait{max-width:min(430px,100%); margin:0 auto 30px;}
main video{max-width:100%; height:auto; border:1px solid var(--line);}
figure{margin:26px 0;}
figure.portrait{max-width:min(420px,100%); margin:26px auto;}
blockquote{
  border-left:2px solid var(--accent); padding:4px 0 4px 20px; margin:22px 0;
  color:var(--muted); font-style:italic;
}
.note{
  background:var(--bg2); border:1px solid var(--line); border-left:2px solid var(--accent);
  padding:18px 20px; font-size:.92rem; color:var(--muted); margin:24px 0; border-radius:0 8px 8px 0;
}
table{border-collapse:collapse; width:100%; margin:22px 0; font-size:.95rem;}
th{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-align:left;}
th, td{padding:10px 14px 10px 0; border-bottom:1px solid var(--line);}

footer{
  padding:46px 6%; text-align:center; color:var(--muted);
  font-size:.8rem; font-weight:500; letter-spacing:.06em; border-top:1px solid var(--line);
  background:var(--bg2);
}
.footer-legal{margin-top:18px; display:flex; justify-content:center; flex-wrap:wrap; gap:20px;}
.footer-legal a, footer a{
  color:var(--muted); text-decoration:none; font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; transition:color .2s;
}
.footer-legal a:hover, footer a:hover{color:var(--gold);}

/* journal index list */
.jlist{list-style:none; padding:0; margin-top:30px;}
.jlist li{max-width:none; padding:20px 0; margin:0; border-bottom:1px solid var(--line);}
.jlist a{
  font-family:'Fraunces', Georgia, serif; font-size:1.32rem; font-weight:600;
  color:var(--text); text-decoration:none; transition:color .2s;
}
.jlist a:hover{color:var(--accent);}
.jlist .jdesc{display:block; color:var(--muted); font-size:.92rem; margin-top:6px; max-width:68ch;}

/* CJK */
html[lang^="zh"] body{line-height:1.95;}
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .logo{
  font-family:'Fraunces', Georgia, "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", serif;
  letter-spacing:.05em;
}
html[lang^="zh"] .eyebrow, html[lang^="zh"] nav a{letter-spacing:.3em;}
html[lang^="zh"] p, html[lang^="zh"] li{line-height:1.95;}

@media(max-width:600px){
  header{padding:16px 5%;}
  nav a{margin-left:13px; font-size:.62rem; letter-spacing:.1em;}
  main{padding:46px 5% 64px;}
  h1{font-size:1.85rem;}
  h2{font-size:1.4rem; margin-top:40px;}
}