/* Origo Law — shared styles for /blog pages (mirrors the homepage design tokens) */
:root{
  --ivory:#F6F1EB;
  --paper:#FDFBF8;
  --charcoal:#1A1A1A;
  --burgundy:#7B1D2D;
  --burgundy-deep:#4E1220;
  --muted:#6F645E;
  --hair:#D9CFC5;
  --serif:"Cormorant Garamond",Garamond,"Songti SC","Noto Serif SC","Hiragino Sans GB","Microsoft YaHei",serif;
  --serif-zh:"Noto Serif SC","Songti SC","Cormorant Garamond",serif;
  --sans:"Jost","Avenir Next","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --gut:clamp(1.25rem,5vw,4rem);
  --wide:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--charcoal);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--burgundy);color:var(--ivory)}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.01em}
p{margin:0 0 1.1em}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:.6rem 1rem;background:var(--burgundy);color:#fff}

/* nav (same as homepage) */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,241,235,.93);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-stuck{border-bottom-color:var(--hair)}
.nav-in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.nav-mark{flex:0 0 auto;display:block;width:150px;height:52px;background:url("../images/logo.png") center/contain no-repeat}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem);list-style:none;padding:0;margin-block:0}
.nav-links a{text-decoration:none;font-size:.94rem;letter-spacing:.02em;padding-block:.35rem;border-bottom:1px solid transparent;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--burgundy)}
.lang{display:flex;align-items:center;gap:.4rem;border-left:1px solid var(--hair);padding-left:1rem;margin-left:.4rem}
.lang button{font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;background:none;border:0;color:var(--muted);cursor:pointer;padding:.25rem .1rem;white-space:nowrap}
.lang button[aria-pressed="true"]{color:var(--burgundy)}
@media (max-width:820px){
  .nav-links a[data-nav]{display:none}
  .nav-mark{width:120px;height:42px}
}

@media (max-width:480px){
    .nav-in{gap:.75rem}
    .nav-links{gap:.8rem}
    .nav-links a{font-size:.9rem}
    .lang{padding-left:.6rem;margin-left:0}
    .nav-mark{width:100px;height:36px}
  }

/* page header */
.page-head{padding-block:clamp(3.5rem,8vw,5.5rem) 0}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.page-head h1{font-size:clamp(2.3rem,5vw,3.4rem);line-height:1.12}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.55;color:#39312D;max-width:62ch;margin-top:1.2rem}

/* tabs */
.tabs{display:flex;gap:clamp(1.2rem,4vw,2.8rem);border-bottom:1px solid var(--hair);margin-top:1rem;overflow-x:auto}
.tab{font-family:var(--sans);font-size:1rem;letter-spacing:.02em;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;padding:.9rem 0;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.tab[aria-selected="true"]{color:var(--burgundy);border-bottom-color:var(--burgundy)}
.tab:hover{color:var(--charcoal)}
.panel{padding-block:.4rem clamp(4rem,9vw,6rem)}
.panel[hidden]{display:none}
.panel-intro{color:#4A423E;max-width:64ch;font-size:1rem;margin-top:1.8rem}

/* post list (same look as homepage .posts) */
.posts{list-style:none;padding:0;margin:1.6rem 0 0}
.posts li{border-top:1px solid var(--hair);padding:1.7rem 0}
.posts li:last-child{border-bottom:1px solid var(--hair)}
.posts .date{font-size:.86rem;color:var(--muted);letter-spacing:.03em}
.posts .tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy);border:1px solid var(--burgundy);padding:.05rem .5rem;margin-left:.6rem;vertical-align:1px}
.posts h3{margin:.4rem 0 .45rem;font-size:1.4rem;line-height:1.35;transition:color .2s}
.posts a{text-decoration:none;display:block}
.posts a:hover h3{color:var(--burgundy)}
.posts p{margin:0;color:#4A423E;max-width:66ch;font-size:.98rem}
.empty{border:1px dashed var(--hair);padding:2rem;margin-top:1.6rem;color:var(--muted);text-align:center;font-family:var(--serif);font-size:1.25rem}
.subscribe{margin-top:1.6rem;font-size:.95rem;color:#4A423E}
.subscribe a{color:var(--burgundy);text-underline-offset:4px}

/* article */
.crumbs{font-size:.88rem;color:var(--muted);padding-top:clamp(2rem,5vw,3rem);max-width:760px;margin-inline:auto}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--burgundy)}
.article{max-width:760px;margin-inline:auto;padding-bottom:clamp(4rem,9vw,6rem)}
.article .kicker{display:inline-block;background:var(--burgundy);color:var(--ivory);font-size:.78rem;letter-spacing:.08em;padding:.2rem .8rem;margin-top:1.6rem}
.article h1{font-family:var(--serif-zh);font-size:clamp(1.7rem,3.6vw,2.3rem);line-height:1.45;margin:1.1rem 0 .8rem;font-weight:400}
.article .meta{color:var(--muted);font-size:.9rem;padding-bottom:1.6rem;border-bottom:1px solid var(--hair);margin-bottom:2rem}
.article .body{font-size:1.02rem;line-height:1.95;color:#2C2522}
.article .body .lead{font-size:1.1rem}
.article .body h2{font-family:var(--serif-zh);font-size:1.4rem;line-height:1.5;color:var(--burgundy);margin:2.6rem 0 1rem;padding-left:.9rem;border-left:3px solid var(--burgundy);max-width:none;font-weight:400}
.article .body ul,.article .body ol{padding-left:1.4rem;margin:0 0 1.2em}
.article .body li{margin-bottom:.5em}
.article .body b{font-weight:500;color:#1A1A1A}
.article .body a{color:var(--burgundy);text-underline-offset:3px}
.article .small{font-size:.9rem;color:var(--muted)}
.article .src{list-style:none;padding-left:0 !important;font-size:.86rem;color:var(--muted);line-height:1.7}
.article .src li{margin-bottom:.8rem;word-break:break-all}
.article .box{background:var(--paper);border:1px solid var(--hair);padding:1.3rem 1.5rem;margin-top:2.6rem}
.article .box p{font-size:.9rem;color:#4A423E;line-height:1.8}
.article .box p:last-child{margin:0}
.back{display:inline-block;margin-top:2.4rem;text-decoration:none;color:var(--burgundy);border-bottom:1px solid var(--burgundy);font-size:.95rem}

/* footer (same as homepage) */
.foot{background:var(--burgundy-deep);color:#E8DCD8}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start;padding-block:clamp(3rem,6vw,4rem)}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}
.foot-mark{width:190px;aspect-ratio:1488/512;background:url("../images/logo-light.png") center/contain no-repeat;opacity:.95}
.foot p{font-size:.87rem;line-height:1.75;color:#DCC9C9;max-width:70ch;margin-bottom:.9em}
.foot a{color:#E8DCD8}
.foot .fine{color:#BFA5A6;font-size:.8rem}
.rule{height:6px;background:var(--burgundy)}
.panel .posts li:first-child{border-top:0}

/* bilingual blocks: show only the current language */
html[lang="en"] [data-lang-block="zh"],html[lang="zh-Hans"] [data-lang-block="en"]{display:none !important}
.readin{font-family:var(--sans);font-size:.85rem;background:none;border:1px solid var(--burgundy);color:var(--burgundy);padding:.15rem .7rem;margin-left:.6rem;cursor:pointer;vertical-align:1px}
.readin:hover{background:var(--burgundy);color:var(--ivory)}

/* English headings: use the Latin serif so apostrophes/quotes are not full-width */
html[lang="en"] .article h1{font-family:var(--serif);font-size:clamp(1.95rem,4vw,2.6rem);line-height:1.3}
.article .body[lang="en"] h2{font-family:var(--serif);font-size:1.6rem}
