/* Playfair Display, self-hosted and Latin-subset, so Chinese pages get the
   brand face without a request to Google, which is unreachable in mainland China. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/playfair-600.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/playfair-700.woff2') format('woff2')}

/* Liquidity Partner: article pages. Purpose-built, not a copy of index.html styles. */
:root{
  --ink:#0D1B2A; --paper:#FBF9F5; --slate:#415A77; --muted:#6B7A88;
  --body:#38454F; --line:#DEDEDC;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
/* Mainland China cannot reach Google Fonts, so Chinese pages resolve to
   locally installed CJK faces rather than waiting on a blocked request. */
html[data-zh]{
  --serif:'Playfair Display','Songti SC','STSong','Noto Serif CJK SC','Noto Serif SC','Source Han Serif SC',serif;
  --sans:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--body);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.75}

.site-h{display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
.site-h .logo{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.05;
  color:var(--ink);text-decoration:none;letter-spacing:.01em}
/* Back link sits left, wordmark right. Matches the deployed article template. */
.site-h .back{font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px}
.site-h .back:hover{opacity:.7}
/* The house wordmark, the same vector index.html uses. Not a type reproduction. */
.site-h .logo{display:inline-flex;align-items:center}
.site-h .wm{height:34px;width:auto;display:block}
.site-h .logo:hover{opacity:.75}
@media(max-width:600px){.site-h .wm{height:28px}}
.site-h .back .ar{font-style:normal;font-size:1.05rem;line-height:1}
/* One meta line under the hero: date, category, read time. */
.metaline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.9rem;
  color:var(--muted);margin:0 0 14px}
.metaline .cat{color:var(--slate);font-weight:600;font-size:.9rem;letter-spacing:0;
  text-transform:none;margin:0}
.metaline .sep{color:var(--line)}
html[data-zh] .metaline{font-size:.92rem}
/* Keep the meta line on one row on a phone so no separator is left dangling.
   Below 380px the read time drops rather than wrapping. */
@media(max-width:460px){.metaline{font-size:.8rem;gap:7px;flex-wrap:nowrap;white-space:nowrap}
 .metaline .cat{font-size:.8rem}}
@media(max-width:379px){.metaline .rt,.metaline .rt-sep{display:none}}
.site-h .lang{font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.site-h .lang:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.art{max-width:720px;margin:0 auto;padding:44px 24px 132px}
/* Article hero. Each piece already has bespoke artwork on the insight rail;
   this is the same drawing at full width on its own page. */
.art-hero{margin:0 0 30px;border-radius:3px;overflow:hidden;line-height:0}
.art-hero svg{display:block;width:100%;height:auto}
@media(max-width:600px){.art-hero{margin-bottom:22px;border-radius:2px}}
.crumb{margin-bottom:32px}
.crumb a{color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:500}
.crumb a:hover{color:var(--ink)}
.cat{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
html[data-zh] .cat{letter-spacing:.08em;text-transform:none;font-size:.78rem}
h1{font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.65rem,4.6vw,2.5rem);line-height:1.24;letter-spacing:-.01em;margin-bottom:16px}
html[data-zh] h1{letter-spacing:0;line-height:1.4}
.meta{font-size:.8rem;color:var(--muted);margin-bottom:8px}
.byline{font-size:.86rem;color:var(--ink);padding:14px 0;margin-top:10px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline span{color:var(--line);margin:0 6px}
.byline strong{font-weight:600}

.prose{margin-top:34px}
.prose p{margin-bottom:20px;font-size:1.02rem}
html[data-zh] .prose p{font-size:1.04rem;line-height:1.95;text-align:justify}
.prose h2{font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:1.28rem;line-height:1.35;margin:38px 0 14px}
.prose p:last-child{margin-bottom:0}

.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.share .lbl{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-right:4px}
html[data-zh] .share .lbl{letter-spacing:.06em;text-transform:none}
.share a,.share button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:none;display:flex;align-items:center;justify-content:center;color:var(--ink);
  cursor:pointer;padding:0;transition:.2s}
.share a:hover,.share button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.share svg{width:18px;height:18px;fill:currentColor}
.share button.ok{background:var(--slate);color:#fff;border-color:var(--slate)}

.lp-qr-ov{position:fixed;inset:0;background:rgba(13,27,42,.62);display:flex;align-items:center;
  justify-content:center;z-index:9999;padding:24px}
.lp-qr-ov[hidden]{display:none}
.lp-qr-box{background:var(--paper);border-radius:14px;padding:30px 26px 26px;max-width:330px;
  width:100%;text-align:center;position:relative}
.lp-qr-x{position:absolute;top:8px;right:14px;border:0;background:none;font-size:26px;
  line-height:1;color:var(--muted);cursor:pointer}
.lp-qr-h{font-family:var(--serif);font-size:1.16rem;color:var(--ink);margin-bottom:16px}
.lp-qr-c{display:flex;justify-content:center;margin-bottom:14px}
.lp-qr-c svg{width:196px;height:196px;display:block}
.lp-qr-p{font-size:.8rem;line-height:1.7;color:var(--muted)}
.lp-qr-cp{margin-top:16px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:none;color:var(--ink);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.lp-qr-cp:hover{background:var(--ink);color:#fff;border-color:var(--ink)}


@media(max-width:640px){
  .art{padding:30px 20px 16px}
  .site-h{padding:16px 20px}
  .lp-qr-c svg{width:168px;height:168px}
}

/* ===== LP colour ramps. Sage carries the green, cream is the paper family. =====
   Sage L* 27-90, hue 150-156. Cream L* 60-99, hue 82-91, anchored on --paper/--cream.
   Sage is the house: page, covers, leather, seal, door.
   Cream is the paper: cards, certificates, envelopes, cartouche.
   Physical objects are cut one step richer than the screen (Sage 60), because
   pigment loses chroma that an emissive display does not. */
:root{
  --sage-90:#39423B; --sage-80:#454F47; --sage-70:#525C54; --sage-60:#5A6D60;
  --sage-50:#6C7770; --sage-40:#828C85; --sage-30:#99A19B; --sage-20:#B3B9B4;
  --sage-12:#CBCFCB; --sage-06:#E1E4E1;
  --cream-74:#999185; --cream-60:#AFA79C; --cream-46:#C3BCB1; --cream-34:#D3CDC3;
  --cream-24:#E0DAD1; --cream-16:#EAE5DD; --cream-10:#F2EEE7; --cream-06:#F9F6F0;
  --cream-04:#FBF9F6; --cream-02:#FEFCF9;
}