/* Qiao Partners Insights — research-note layout: one reading column, exhibits run wider, metadata rail on desktop. */
:root {
  --paper: #FFFFFF;
  --ink: #0C1828;
  --muted: #5A687B;
  --rule: #DCE3EC;
  --rule-strong: #B4C1D1;
  --accent: #1F5C94;      /* Qiao blue: links and highlighted exhibit marks */
  --accent-soft: #8EC5F0;
  --ex-mute: #C9D4E0;
  --wash: #F2F6FA;
  --f-display: "Hanken Grotesk", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Hanken Grotesk", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --f-data: "Hanken Grotesk", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;  /* same typeface; tabular figures for data */
  --col: 42rem;
  --wide: 56rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A1424; --ink: #E6EDF6; --muted: #9AAABF; --rule: #1E3150; --rule-strong: #34507A;
    --accent: #8EC5F0; --accent-soft: #2B5D8C; --ex-mute: #34507A; --wash: #0F1C31; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A1424; --ink: #E6EDF6; --muted: #9AAABF; --rule: #1E3150; --rule-strong: #34507A;
    --accent: #8EC5F0; --accent-soft: #2B5D8C; --ex-mute: #34507A; --wash: #0F1C31; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.65 var(--f-body);
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 72rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* site header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; flex-wrap: wrap; }
.brand { font: 600 1.05rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.brand span { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--muted); margin-left: 0.35rem; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.9rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px; }

/* labels */
.eyebrow { font: 500 0.75rem/1.2 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.crumbs { font: 400 0.8rem/1.4 var(--f-body); color: var(--muted); padding-top: 1.6rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* hub + series */
.hub-hero { padding-block: 2.5rem 2rem; border-bottom: 1px solid var(--rule); }
.hub-hero h1 { font: 400 clamp(2.4rem, 6vw, 3.6rem)/1.05 var(--f-display); margin: 0.4rem 0 0.8rem; letter-spacing: -0.01em; }
.hub-hero p { max-width: 40rem; color: var(--muted); font-size: 1.08rem; margin: 0; }
.topics { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block: 1.2rem; border-bottom: 1px solid var(--rule); }
.topics a, .topics span { font-size: 0.85rem; padding: 0.35rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 2px; text-decoration: none; color: var(--ink); }
.topics a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topics span { color: var(--muted); border-style: dashed; }

.section-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 2.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.section-h h2 { font: 600 0.8rem/1 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: var(--muted); }
.section-h a { font-size: 0.9rem; }

.series-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; padding-block: 1.5rem 2.5rem; border-bottom: 1px solid var(--rule); }
.series-feature h3 { font: 400 clamp(1.8rem, 4vw, 2.5rem)/1.1 var(--f-display); margin: 0.5rem 0 1rem; }
.series-feature h3 a { color: var(--ink); text-decoration: none; }
.series-feature h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.series-feature p { color: var(--muted); margin: 0 0 1rem; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: part; }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.4rem; padding: 0.8rem 0; color: var(--ink); text-decoration: none; }
.toc a:hover .toc-t { text-decoration: underline; }
.toc .toc-n { font: 500 0.8rem/1.6 var(--f-data); color: var(--accent); }
.toc .toc-t { font: 400 1.05rem/1.35 var(--f-display); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; padding-bottom: 3rem; }
.card { border-top: 1px solid var(--rule-strong); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card h3 { font: 400 1.35rem/1.2 var(--f-display); margin: 0; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.meta { font: 400 0.78rem/1.4 var(--f-data); color: var(--muted); }

/* article */
.art-head { padding-block: 1.2rem 2rem; border-bottom: 1px solid var(--rule); }
.art-head .inner { max-width: var(--wide); }
.art-head h1 { font: 400 clamp(2rem, 5vw, 3.1rem)/1.1 var(--f-display); margin: 0.6rem 0 1rem; letter-spacing: -0.01em; text-wrap: balance; }
.standfirst { font: 400 1.2rem/1.5 var(--f-display); color: var(--ink); max-width: var(--col); margin: 0 0 1.4rem; }
.byline { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.85rem; color: var(--muted); }
.byline b { color: var(--ink); font-weight: 600; }

.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3.5rem; padding-block: 2.2rem 3rem; }
.prose { max-width: var(--col); min-width: 0; }
.prose > p { margin: 0 0 1.15rem; }
.prose h2 { font: 600 1.15rem/1.3 var(--f-body); margin: 2.4rem 0 0.8rem; text-wrap: balance; }
.prose strong { font-weight: 600; }

.keypoints { background: var(--wash); padding: 1.3rem 1.5rem; margin: 0 0 2rem; border-left: 3px solid var(--accent); }
.keypoints h2 { font: 600 0.75rem/1 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.8rem; color: var(--muted); }
.keypoints ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.55rem; }
.keypoints li { font-size: 0.97rem; }

.exhibit { margin: 2rem 0 2.2rem; max-width: var(--wide); width: calc(100% + 0px); }
.exhibit figcaption { display: grid; gap: 0.2rem; border-top: 2px solid var(--ink); padding-top: 0.7rem; margin-bottom: 0.9rem; }
.ex-num { font: 500 0.75rem/1 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ex-title { font: 600 1rem/1.35 var(--f-body); }
.ex-body { overflow-x: auto; }
.ex-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.ex-note, .ex-source { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin: 0.6rem 0 0; }
.ex-source { border-bottom: 1px solid var(--rule); padding-bottom: 0.7rem; }
.ex-source a { color: var(--muted); }

.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 600 0.72rem/1.3 var(--f-data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; }
td { padding: 0.65rem 0.9rem 0.65rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td:first-child { font-weight: 600; }
.tbl-dense { min-width: 640px; font-size: 0.85rem; }

.rail { font-size: 0.85rem; color: var(--muted); }
.rail-block { border-top: 1px solid var(--rule-strong); padding-top: 0.9rem; margin-bottom: 1.8rem; }
.rail-block h2 { font: 600 0.72rem/1 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.8rem; color: var(--muted); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rail ol a { color: var(--ink); text-decoration: none; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); line-height: 1.35; }
.rail ol a:hover span:last-child { text-decoration: underline; }
.rail ol a[aria-current="page"] { font-weight: 600; }
.rail ol a span:first-child { font-family: var(--f-data); color: var(--accent); }
.rail-sticky { position: sticky; top: 1.5rem; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-top: 1px solid var(--rule); padding-block: 1.6rem; max-width: var(--col); }
.pager a { text-decoration: none; color: var(--ink); display: grid; gap: 0.3rem; }
.pager a:last-child { text-align: right; }
.pager .meta { color: var(--accent); }
.pager span:last-child { font: 400 1.05rem/1.3 var(--f-display); }

.cta { background: var(--wash); padding-block: 2.2rem; margin-top: 1rem; }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cta p { margin: 0; max-width: 38rem; font: 400 1.2rem/1.45 var(--f-display); }
.btn { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 0.75rem 1.2rem; font-size: 0.9rem; font-weight: 600; border-radius: 2px; }
.btn:hover { background: var(--accent); }

.disclaimer { border-top: 1px solid var(--rule); padding-block: 1.6rem 2.4rem; font-size: 0.78rem; color: var(--muted); }
.disclaimer p { max-width: 50rem; margin: 0 0 0.6rem; }

@media (max-width: 900px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .rail-sticky { position: static; }
  .series-feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a:last-child { text-align: left; }
  .site-nav { gap: 0.9rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .site-head, .rail, .cta, .pager { display: none; } }

table:not(.tbl-dense) td:first-child { white-space: nowrap; }

/* ---- Qiao site chrome: navy header, banner, footer, pill buttons ---- */
:root{--navy:#0A1C36;--navy-2:#11284A;--baby:#8EC5F0;--on-dark:#F3F7FC;--on-dark-muted:#AFC0D4}
h1,h2,h3{font-weight:300;letter-spacing:-.015em}
.art-head h1,.hub-hero h1{font-weight:300}
.q-banner{background:var(--navy-2);color:var(--on-dark);font-size:14px;text-align:center}
.q-banner .wrap{padding-block:10px}
.q-banner a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.q-banner i{width:8px;height:8px;border-radius:50%;background:#5FD08A;box-shadow:0 0 0 4px rgba(95,208,138,.2)}
.q-head{background:var(--navy);color:var(--on-dark);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--navy)}
.q-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.q-logo{display:inline-flex;align-items:flex-end;gap:12px;text-decoration:none;color:var(--on-dark)}
.q-logo svg{height:34px;width:auto;overflow:visible}
.q-logo .word{font-family:"Hanken Grotesk",Arial,sans-serif;font-weight:500;font-size:34px;fill:currentColor}
.q-logo .partners{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--baby);padding-bottom:3px}
.q-nav{display:flex;gap:30px;font-size:15px}
.q-nav a{color:var(--on-dark);opacity:.78;text-decoration:none}
.q-nav a:hover,.q-nav a[aria-current]{opacity:1}
.q-nav a[aria-current]{color:var(--baby)}
.q-right{display:flex;align-items:center;gap:24px}
.q-lang{position:relative}
.q-lang summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.06em;opacity:.78;display:inline-flex;gap:8px;align-items:center}
.q-lang summary::-webkit-details-marker{display:none}
.q-lang summary i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.q-lang[open] summary i{transform:translateY(1px) rotate(-135deg)}
.q-lang ul{position:absolute;right:-16px;top:calc(100% + 10px);list-style:none;margin:0;padding:4px 0 8px;background:var(--navy);text-align:right;z-index:30}
.q-lang li a{display:block;padding:7px 16px;color:var(--on-dark);opacity:.6;text-decoration:none;font-size:13px;letter-spacing:.08em}
.q-lang li a:hover{opacity:1}.q-lang li a[aria-current]{opacity:1;color:var(--baby)}
.btn{display:inline-flex;align-items:center;gap:12px;background:transparent;color:inherit;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 55%,transparent);border-radius:999px;text-decoration:none;font-weight:400;font-size:15px;padding:12px 26px;transition:background-color .35s,color .35s,border-color .35s}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.q-head .btn{padding:9px 20px;font-size:14px;color:var(--on-dark)}
.q-head .btn:hover{background:var(--baby);color:var(--navy);border-color:var(--baby)}
@media (max-width:900px){.q-nav{display:none}}
@media (max-width:560px){.q-head .btn{display:none}}
.cta .btn{color:var(--ink)}
.q-foot{background:var(--navy);color:var(--on-dark-muted);font-size:13px;margin-top:3rem}
.q-foot .wrap{padding-block:32px;display:grid;gap:10px}
.q-foot a{color:var(--on-dark)}
.upcoming{border:1px dashed var(--rule-strong);padding:1rem 1.2rem;color:var(--muted);font-size:.95rem}
.upcoming b{color:var(--ink);font-weight:500}
.lang-note{background:var(--wash);border-left:3px solid var(--accent-soft);padding:.8rem 1rem;font-size:.95rem;color:var(--muted)}

/* ---- Pictures: hub hero, series, card thumbnails, article cover, photo breaks ---- */
.hub-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:2.5rem;align-items:center}
.hub-pic,.series-pic,.cover,.photo-break{margin:0}
.hub-pic img,.series-pic img,.cover img,.photo-break img,.thumb img{display:block;width:100%;max-width:100%;height:100%;object-fit:cover;background:var(--wash)}
.hub-pic{aspect-ratio:4/3;max-width:100%;overflow:hidden}
.series-pic{aspect-ratio:16/9;max-width:100%;overflow:hidden;margin-bottom:1.2rem}
.thumb{display:block;aspect-ratio:16/10;max-width:100%;overflow:hidden;margin-bottom:.4rem}
.thumb img{transition:transform 1.2s ease}
.card:hover .thumb img{transform:scale(1.04)}
.card.soon{opacity:.62}
.card.soon .thumb img{filter:grayscale(1)}
.card.soon h3{color:var(--muted)}
.cover{margin-top:2rem;max-width:100%}
.cover img{aspect-ratio:21/9;height:auto}
.cover figcaption,.photo-break figcaption{font-size:.8rem;color:var(--muted);margin-top:.5rem}
.photo-break{margin:2.4rem 0}
.photo-break img{aspect-ratio:16/9;height:auto}
.prose h2[id]{scroll-margin-top:110px}
.rail .contents li{margin-bottom:.45rem}
.rail .contents a{color:var(--muted);text-decoration:none;font-size:.88rem;line-height:1.35;display:block}
.rail .contents a:hover{color:var(--accent)}
@media (max-width:860px){.hub-hero{grid-template-columns:minmax(0,1fr);gap:1.5rem}.cover img{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.thumb img{transition:none}}

/* One typeface everywhere: numbers line up in tables and charts */
body{font-variant-numeric:tabular-nums}
/* Cover photo sits in the reading width so smaller photos stay sharp */
.cover{max-width:var(--wide)}