/* Critical Comms Asia — Ghost theme
   Layout: news hub. Sticky navy masthead with section nav, lead story + latest rail,
   card grids by section, Asia Watch tracker, reading column for articles.
   Fonts are bundled with the theme so pages load the same inside mainland China. */

@font-face{font-family:"Playfair Display";src:url("../fonts/playfair.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-italic.woff") format("woff");font-weight:700 900;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/sourceserif.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/sourceserif-italic.woff") format("woff");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dmmono-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dmmono-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Palette: taro purple on white. Deep violet for the masthead, vivid violet for links and kickers, taro lilac for accents and tints. */
  --brand-deep:#2b1b5c; --brand:#4b2fa0; --accent:#6a45c9; --accent-hover:#5534b0;
  --taro:#b9a3e8; --taro-soft:#d9cdf5;
  --bg:#ffffff; --surface:#f5f1fc; --rule:#e6def5;
  --fg:#1f1a2e; --muted:#6b6480; --head:#2a1d57;
  --ok:#2f8f5b; --warn:#c77a1c; --stop:#c0392b;
  --display:"Playfair Display",Georgia,"Songti SC","SimSun",serif;
  --body:"Source Serif 4",Georgia,"Songti SC","SimSun",serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --measure:680px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --brand-deep:#160f30; --brand:#2a1d57; --accent:#c4b0f0; --accent-hover:#d9cdf5;
  --taro:#9b82dc; --taro-soft:#3a2d66;
  --bg:#13101c; --surface:#1d1830; --rule:#2f2848;
  --fg:#ebe7f3; --muted:#a59cbb; --head:#f1edfa;
  --ok:#4fbf83; --warn:#e3a14a; --stop:#f07a70; color-scheme:dark}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--head);text-wrap:balance;margin:0;line-height:1.2}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin:0 auto;padding-left:var(--gutter);padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- masthead ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--brand-deep);color:#fff;border-top:4px solid var(--taro)}
.top-row{display:flex;align-items:center;gap:14px;padding-block:12px}
.logo{display:flex;align-items:baseline;text-decoration:none;font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.01em;white-space:nowrap;color:#fff;gap:.28em}
.logo b{color:var(--taro-soft);font-weight:900}
.logo img{max-height:34px;width:auto}
.spacer{flex:1}
.icon-btn{all:unset;cursor:pointer;color:rgba(255,255,255,.75);display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.top-link{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none}
.sub-btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:#fff;color:var(--brand);padding:8px 14px;border-radius:2px;white-space:nowrap}
.sub-btn:hover{background:var(--taro-soft)}
.navbar{background:var(--brand);border-top:1px solid rgba(255,255,255,.06)}
.navbar ul{list-style:none;margin:0;padding:10px 0;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.navbar ul::-webkit-scrollbar{display:none}
.navbar a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;padding-block:4px;border-bottom:2px solid transparent}
.navbar a:hover,.navbar .nav-current a{color:#fff;border-bottom-color:var(--taro)}
@media (max-width:620px){.hide-sm{display:none}.logo{font-size:21px}}

/* ---------- hero ---------- */
.hero{background:var(--brand);color:#fff}
.hero-row{padding-block:26px 32px;display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.tagline{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(21px,3vw,29px);line-height:1.25;max-width:32ch}
.hero .meta{color:rgba(255,255,255,.6)}

/* ---------- sections ---------- */
section{padding-block:44px}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--head);padding-bottom:10px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:25px}
.more{color:var(--muted);text-decoration:none;margin-left:auto}
.more:hover{color:var(--accent)}
.more-row{margin-top:26px;display:flex}
.grid-head{margin-top:48px}
.topic{padding-top:0}

/* lead */
.lead-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px}
@media (max-width:860px){.lead-grid{grid-template-columns:1fr;gap:28px}}
.kicker{display:inline-block;color:var(--accent);text-decoration:none;margin-bottom:10px}
.lead-img img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px}
.lead-title{font-size:clamp(30px,4.6vw,48px);line-height:1.1;letter-spacing:-.015em;font-weight:900;margin-bottom:16px}
.lead-title a{text-decoration:none}
.lead-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.dek{font-size:19px;max-width:60ch;margin-bottom:16px}
.byline{color:var(--muted)}
.byline b{color:var(--head);font-weight:500}

/* rail */
.rail{counter-reset:rail;display:flex;flex-direction:column}
.rail-head{color:var(--muted);font-weight:400;font-size:12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.rail-item{counter-increment:rail;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding-block:16px;border-bottom:1px solid var(--rule);text-decoration:none}
.rail-item .n::before{content:counter(rail);font-family:var(--display);font-weight:900;font-size:24px;color:var(--taro);line-height:1}
.rail-body{display:flex;flex-direction:column;gap:6px}
.rail-title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3;color:var(--head)}
.rail-item:hover .rail-title{text-decoration:underline}
.rail-item .mono{color:var(--muted);font-size:11px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:3px solid var(--head);min-width:0}
.card.tag-china-insight{border-top-color:var(--taro)}
.card-img{position:relative;display:block}
.card-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .cat{color:var(--accent);text-decoration:none;font-size:11px}
.card h3{font-size:21px;line-height:1.25}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{font-size:16px;color:var(--muted)}
.card .when{color:var(--muted);font-size:11px;margin-top:auto}

/* tracker */
.tracker-band{background:var(--surface)}
.table-scroll,.tracker-page{overflow-x:auto}
.tracker,.tracker-page table{width:100%;border-collapse:collapse;font-size:16px}
.tracker th,.tracker-page th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 14px 10px 0;border-bottom:1px solid var(--rule)}
.tracker td,.tracker-page td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tracker td:first-child,.tracker-page td:first-child{font-family:var(--display);font-weight:700;color:var(--head);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok)} .pill.wip{color:var(--warn)} .pill.stop{color:var(--stop)}
.note{margin-top:14px;color:var(--muted);font-size:11px}
.tracker-page > *:not(table){margin-bottom:12px}
@media (max-width:620px){.tracker td:first-child,.tracker-page td:first-child{white-space:normal}}

/* about + services */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px}
@media (max-width:760px){.two{grid-template-columns:1fr;gap:36px}}
.about p{max-width:62ch;margin-bottom:14px}
.svc{list-style:none;padding:0;margin:0}
.svc li{padding-block:14px;border-bottom:1px solid var(--rule)}
.svc b{display:block;font-family:var(--display);font-size:19px;color:var(--head);margin-bottom:2px}
.svc span{color:var(--muted);font-size:16px}

/* subscribe + footer */
.subscribe{background:var(--brand);color:#fff;padding-block:0}
.subscribe-row{padding-block:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.subscribe h2{color:#fff;font-size:clamp(24px,3.4vw,32px);max-width:24ch}
.subscribe p{color:rgba(255,255,255,.6);margin-top:8px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 18px;border-radius:2px;background:#fff;color:var(--brand)}
.btn:hover{background:var(--taro-soft)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.site-foot{background:var(--brand-deep);color:rgba(255,255,255,.55)}
.foot-row{padding-block:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.site-foot a{color:var(--taro-soft);text-decoration:none}

/* archive pages */
.archive-head{border-bottom:2px solid var(--head);padding-bottom:18px;margin-bottom:30px}
.archive-head h1{font-size:clamp(32px,5vw,48px);font-weight:900}
.archive-desc{color:var(--muted);margin-top:10px;max-width:62ch}
.author-head{display:flex;gap:20px;align-items:center}
.avatar-lg{width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pagination a{text-decoration:none;color:var(--head)}
.pagination a:hover{color:var(--accent)}

/* ---------- article ---------- */
.article{padding-block:44px 20px}
.wrap-narrow{max-width:calc(var(--measure) + 32px);margin:0 auto;padding-left:var(--gutter);padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap-wide{max-width:1040px;margin:0 auto}
.article-title{font-size:clamp(32px,5vw,50px);font-weight:900;line-height:1.1;letter-spacing:-.015em;margin-bottom:16px}
.article-dek{font-size:21px;color:var(--muted);margin-bottom:22px}
.article-byline{display:flex;align-items:center;gap:14px;padding-block:16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.avatars{display:flex}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--bg)}
.avatars .avatar + .avatar{margin-left:-12px}
.avatar-init{display:inline-block;background:var(--brand);color:#fff;font-size:0;line-height:40px;text-align:center;overflow:hidden}
.avatar-init::first-letter{font-family:var(--display);font-weight:700;font-size:18px}
.byline-name{color:var(--head);font-size:12px;text-decoration:none}
.byline-name a{text-decoration:none}
.byline-meta{color:var(--muted);font-size:15px}
.article-image{margin-block:32px 0;padding-inline:0}
.article-image img{width:100%}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);padding:10px var(--gutter) 0;text-align:center}

/* body copy from the Ghost editor */
.gh-content{padding-top:34px;padding-left:var(--gutter);padding-right:max(16px,env(safe-area-inset-right,0px));font-size:19px;line-height:1.8}
.gh-content > *{max-width:var(--measure);margin:0 auto 1.3em}
.gh-content > p:first-of-type::first-letter{font-family:var(--display);font-weight:900;font-size:4.1em;float:left;line-height:.78;margin:.08em .1em 0 0;color:var(--head)}
.gh-content h2{font-size:28px;margin-top:2em;padding-top:14px;border-top:1px solid var(--rule)}
.gh-content h3{font-size:22px;margin-top:1.6em}
.gh-content a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.gh-content strong{font-weight:600;color:var(--head)}
.gh-content ul,.gh-content ol{padding-left:1.3em}
.gh-content li{margin-bottom:.4em}
.gh-content blockquote{border-left:4px solid var(--taro);background:var(--surface);padding:18px 24px;font-family:var(--display);font-style:italic;font-size:22px;line-height:1.45;color:var(--head)}
.gh-content blockquote.kg-blockquote-alt{border:0;background:none;text-align:center;font-size:26px;padding:10px 0;border-top:2px solid var(--head);border-bottom:2px solid var(--head)}
.gh-content hr{border:0;height:1px;background:linear-gradient(to right,var(--taro),var(--rule),transparent)}
.gh-content figure{margin-block:2em}
.gh-content img{margin:0 auto}
.gh-content table{border-collapse:collapse;width:100%;font-size:16px;display:block;overflow-x:auto}
.gh-content th,.gh-content td{border-bottom:1px solid var(--rule);padding:10px 14px 10px 0;text-align:left;vertical-align:top}
.gh-content th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gh-content code{font-family:var(--mono);font-size:.85em;background:var(--surface);padding:2px 5px}
.gh-content pre{overflow-x:auto;background:var(--surface);padding:16px;font-size:15px}
.gh-content .kg-width-wide{max-width:1040px}
.gh-content .kg-width-full{max-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
.gh-content .kg-width-full img{width:100%}
.gh-content .kg-callout-card{font-size:17px}

.article-foot{padding-block:24px 10px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{border:1px solid var(--rule);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--muted);font-size:11px}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.author-bio{background:var(--surface);border-left:3px solid var(--taro);padding:18px 20px;margin-bottom:20px}
.author-bio p{font-size:16px;font-style:italic;color:var(--muted);margin-top:6px}
.comments{margin-top:30px}
.related{border-top:1px solid var(--rule)}

/* ---------- video ---------- */
.video-band{background:var(--brand-deep);color:#fff}
.video-band .sec-head,.video-band .archive-head{border-bottom-color:rgba(255,255,255,.85)}
.video-band h1,.video-band h2,.video-band h3{color:#fff}
.video-band .more,.video-band .when,.video-band .archive-desc,.video-band .pagination{color:rgba(255,255,255,.65)}
.video-band .pagination a{color:#fff}
.video-band .kicker{color:var(--taro)}
.video-archive{padding-block:44px 60px}
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.vgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vgrid,.vgrid-3{grid-template-columns:1fr}}
.vcard{display:flex;flex-direction:column;gap:10px;min-width:0}
.vthumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#3a2d66}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.vthumb-blank{position:absolute;inset:0;background:linear-gradient(135deg,var(--brand),#7b5fd0)}
.vthumb:hover img{transform:scale(1.03)}
.play{position:absolute;left:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:0 2px 10px rgba(20,10,50,.35)}
.play svg{margin-left:2px}
.play-sm{width:34px;height:34px;left:10px;bottom:10px}
.vlabel{position:absolute;right:10px;top:10px;background:var(--taro);color:#1f1440;font-size:10px;padding:3px 8px}
.vcard h3{font-size:19px;line-height:1.3}
.vcard h3 a{text-decoration:none}
.vcard h3 a:hover{text-decoration:underline}
.vcard .when{font-size:11px}

/* video post template: dark screen band, first card (the video) sits across its lower edge */
.video-article{padding-top:0}
.video-article .screen{background:var(--brand-deep);color:#fff;padding-block:44px 150px}
.video-article .screen .article-title{color:#fff}
.video-article .screen .article-dek,.video-article .screen .byline-meta{color:rgba(255,255,255,.7)}
.video-article .screen .kicker{color:var(--taro)}
.video-article .gh-content{padding-top:0}
.video-article .gh-content > *:first-child{max-width:1040px;margin-top:-120px;position:relative;margin-bottom:2.2em}
.video-article .gh-content > p:first-of-type::first-letter{float:none;font:inherit;color:inherit;margin:0;line-height:inherit}
.gh-content .kg-embed-card iframe{width:100%;height:auto;aspect-ratio:16/9;display:block}
.gh-content .kg-embed-card{display:block}
@media (max-width:620px){.video-article .screen{padding-bottom:90px}.video-article .gh-content > *:first-child{margin-top:-70px}}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- partner content (paid, always labelled) ---------- */
.partner-band{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.partner-band .sec-head{border-bottom-color:var(--taro)}
.partner-note{color:var(--muted);font-size:11px}
.partner-label{display:inline-block;align-self:flex-start;font-size:10px;letter-spacing:.12em;color:var(--brand);background:var(--taro-soft);padding:3px 8px}
.pcard h3{font-size:18px;color:var(--head)}
.pcard h3 a{color:inherit}
.vlabel-partner{background:#fff;color:var(--brand)}
.disclosure{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--taro);padding:12px 16px;margin-bottom:22px;max-width:var(--measure)}
.disclosure .mono{color:var(--brand);font-size:11px}
.disclosure p{font-size:15px;color:var(--muted);flex:1;min-width:220px}
.video-article .screen .disclosure{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);border-left-color:var(--taro);padding-inline:16px;margin-inline:0}
.video-article .screen .disclosure .mono{color:var(--taro)}
.video-article .screen .disclosure p{color:rgba(255,255,255,.75)}
@media (prefers-color-scheme:dark){.partner-label{color:#fff;background:var(--taro-soft)}.disclosure .mono{color:var(--accent)}}