/* mehmetceylan.org: Round 4 visual prototype ("Margin"). Not production code. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-ext-standard-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin-ext-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* CJK-safe Latin: em dash, curly quotes and ellipsis fall through to the Chinese system font */
@font-face { font-family: "Newsreader CJK-safe"; src: url("fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0304, U+0308, U+2000-2013, U+2015-2017, U+201E-2025, U+2027-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Newsreader CJK-safe"; src: url("fonts/newsreader-latin-ext-standard-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "Plex CJK-safe"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0304, U+0308, U+2000-2013, U+2015-2017, U+201E-2025, U+2027-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex CJK-safe"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0304, U+0308, U+2000-2013, U+2015-2017, U+201E-2025, U+2027-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Plex CJK-safe"; src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }

/* ---------- Tokens ---------- */
:root {
  --paper: #F7F5F0;
  --ink: #1F2423;
  --ink-muted: #59605E;
  --ink-quiet: #6C726F;      /* unavailable items, status text (~4.6:1 on paper) */
  --rule: #DCD8CE;
  --rule-strong: #BDB8AC;
  --teal: #1E5C57;
  --teal-dark: #144440;
  --teal-tint: #E5EDEA;
  --teal-line: rgba(30, 92, 87, .35);

  --cjk-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC";
  --font-serif: "Newsreader", Georgia, "Times New Roman", var(--cjk-sans), serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, var(--cjk-sans), sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: 48px; --fs-title: 38px; --fs-lede: 27px; --fs-h2: 26px; --fs-item: 22px;
  --fs-body: 17px; --fs-small: 15px; --fs-meta: 14px; --fs-label: 13px;
  --lh-body: 1.6; --lh-tight: 1.2;

  --container: 1080px; --rail: 200px; --gap: 40px; --content: 720px; --wide: 840px; --pad: 40px;
  --target: 44px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;
}
[lang^="zh"] { --font-serif: "Newsreader CJK-safe", var(--cjk-sans), serif; --font-sans: "Plex CJK-safe", var(--cjk-sans), sans-serif; --lh-body: 1.8; }
[lang^="zh"] :is(span, li, p)[lang="en"] { font-family: "IBM Plex Sans", Arial, sans-serif; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body:lang(zh) { line-break: strict; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--teal-line); }
a:hover { color: var(--teal-dark); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--s4); top: var(--s4); background: var(--paper); padding: var(--s2) var(--s3); z-index: 10; }
.wrap { max-width: calc(var(--container) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }

/* Unavailable items: readable, not underlined, not clickable */
.is-unavailable { color: var(--ink-quiet); text-decoration: none; cursor: not-allowed; }
/* Terminology awaiting expert approval */
.term-pending { text-decoration: underline dotted var(--ink-quiet); text-decoration-thickness: 1.5px; text-underline-offset: .24em; }
.status-note { font-size: var(--fs-label); color: var(--ink-quiet); line-height: 1.5; }

/* Target-size helper: 44px tall hit area, no visual box */
.hit { display: inline-flex; align-items: center; min-height: var(--target); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav lang"; align-items: center; column-gap: var(--s6); padding-top: 10px; padding-bottom: 10px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.site-nav { grid-area: nav; justify-self: end; }
.site-nav ul { display: flex; flex-wrap: wrap; column-gap: 26px; }
.site-nav a, .site-nav .is-unavailable { display: inline-flex; align-items: center; min-height: var(--target); font-size: 15px; white-space: nowrap; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 7px; }

.lang { grid-area: lang; border-left: 1px solid var(--rule); padding-left: 14px; font-size: var(--fs-label); white-space: nowrap; }
.lang ul { display: flex; align-items: center; }
.lang li + li::before { content: "·" / ""; color: var(--ink-quiet); }
.lang a, .lang .is-unavailable { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: 34px; padding: 0 6px; }
.lang a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
.lang a:hover { color: var(--teal); text-decoration-color: currentColor; }
.lang a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration-color: var(--teal); }
.lang [lang^="zh"] { font-family: var(--cjk-sans), sans-serif; }

/* ---------- Sections ---------- */
.section { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gap); padding-block: var(--s8); border-top: 1px solid var(--rule); }
.section__label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500; color: var(--ink-muted); line-height: 1.4; padding-top: .45em; }
.section__body { max-width: var(--content); min-width: 0; }
.section__body--wide { max-width: var(--wide); }

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: var(--rail) minmax(0, var(--content)); column-gap: var(--gap); padding-block: var(--s8) 80px; }
.intro__portrait { grid-column: 1; grid-row: 1 / span 5; display: block; width: 168px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center; border: 1px solid var(--rule); }
.intro h1 { grid-column: 2; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 22px; }
.intro__statement { grid-column: 2; font-family: var(--font-serif); font-size: var(--fs-lede); line-height: 1.36; margin-bottom: 28px; max-width: 30em; }
.intro__affil { grid-column: 2; font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.5; max-width: 40em; }
.intro__affil li + li { margin-top: 6px; }
.intro__affil strong { color: var(--ink); font-weight: 500; }
.profiles { grid-column: 2; display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 12px; font-size: var(--fs-meta); font-weight: 500; }
.profiles a, .profiles .is-unavailable { display: inline-flex; align-items: center; min-height: var(--target); white-space: nowrap; }
.orcid-icon { width: 15px; height: 15px; margin-right: 6px; flex: none; }
.intro__status { grid-column: 2; margin-top: var(--s4); }
.intro__status p { margin-bottom: 4px; }
[lang^="zh"] .intro__statement { font-family: var(--font-sans); font-size: 25px; line-height: 1.6; max-width: 26em; }
[lang^="zh"] .intro__affil { line-height: 1.6; }

/* ---------- Research questions ---------- */
.rq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); }
.rq { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.rq h3 { font-size: var(--fs-item); line-height: 1.24; margin-bottom: var(--s3); }
.rq p { font-size: 16px; line-height: 1.55; margin: 0; }

/* ---------- Publication rows ---------- */
.pub-row { padding-block: 22px; }
.pub-row:first-child { padding-top: 0; }
.pub-row + .pub-row { border-top: 1px solid var(--rule); }
.pub-row h3 { font-size: var(--fs-item); line-height: 1.28; margin-bottom: var(--s2); }
.pub-row h3 a { color: var(--ink); text-decoration: none; }
.pub-row h3 a:hover { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pub-meta { font-size: var(--fs-meta); color: var(--ink-muted); line-height: 1.5; margin-bottom: 0; }
.pub-desc { margin: var(--s3) 0 var(--s1); font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; column-gap: 22px; font-size: var(--fs-meta); font-weight: 500; }
.actions a, .actions .is-unavailable { display: inline-flex; align-items: center; min-height: var(--target); }

/* ---------- Resources ---------- */
.res { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.res th { text-align: left; font-weight: 500; font-size: var(--fs-label); color: var(--ink-muted); padding: 0 var(--s5) 10px 0; border-bottom: 1px solid var(--rule-strong); }
.res td { padding: 16px var(--s5) 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.res th:last-child, .res td:last-child { padding-right: 0; white-space: nowrap; }
.res__abbr { display: block; font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.25; }
.res__full { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 3px; }
.status { display: block; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--teal); vertical-align: 1px; }
.status--dev::before { background: transparent; border: 1px solid var(--ink-muted); }
.status__detail { display: block; color: var(--ink-quiet); font-size: 13.5px; margin-top: 2px; }
.res .actions { flex-direction: column; margin-top: -10px; }

.note p { max-width: 38em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 36px 56px; font-size: var(--fs-meta); color: var(--ink-muted); line-height: 1.55; }
.site-footer .wrap { display: grid; grid-template-columns: var(--rail) minmax(0, var(--content)); column-gap: var(--gap); }
.foot-name { font-family: var(--font-serif); font-size: 18px; color: var(--ink); padding-top: 10px; }
.site-footer p { margin-bottom: var(--s3); }
.site-footer .profiles { margin: 0 0 var(--s3); }
.contact-list { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 var(--s4); font-size: var(--fs-meta); }
.contact-list li { display: flex; flex-wrap: wrap; gap: 0 8px; }
.contact-list span { color: var(--ink-quiet); }
.contact-list a { overflow-wrap: anywhere; }

/* ---------- Publication page ---------- */
.pub-page { display: grid; grid-template-columns: var(--rail) minmax(0, var(--content)); grid-template-rows: auto auto 1fr; column-gap: var(--gap); padding-block: 56px var(--s9); }
/* Desktop: grid placement only; source order is head, quick, brief, more, body */
.rail-quick { grid-column: 1; grid-row: 1; align-self: start; padding-top: 12px; }
.rail-more { grid-column: 1; grid-row: 2 / 4; align-self: start; position: sticky; top: var(--s5); padding-top: var(--s2); }
.pub-head { grid-column: 2; grid-row: 1; padding-bottom: var(--s6); border-bottom: 1px solid var(--rule); }
.crumb { font-size: var(--fs-meta); font-weight: 500; display: inline-flex; align-items: center; min-height: var(--target); margin-bottom: var(--s1); }
.pub-head h1 { font-size: var(--fs-title); line-height: 1.16; letter-spacing: -.01em; margin-bottom: var(--s4); }
.authors { font-size: 16px; margin: 0; }
.authors a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.facts > div { margin-bottom: 14px; }
.facts dt { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); line-height: 1.4; }
.facts dd { font-size: var(--fs-meta); line-height: 1.45; margin-top: 2px; }
.facts .doi a { overflow-wrap: anywhere; }
.btns { display: grid; gap: var(--s2); margin: var(--s2) 0 var(--s5); }
.btn { display: flex; align-items: center; justify-content: center; min-height: var(--target); padding: 0 14px; border: 1px solid var(--teal); border-radius: 4px; color: var(--teal); background: transparent; font: 500 var(--fs-meta)/1.2 var(--font-sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { background: var(--teal-tint); color: var(--teal-dark); }
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }
.btn.is-unavailable { border-color: var(--rule-strong); color: var(--ink-quiet); background: transparent; cursor: not-allowed; }
.rail-more .status-note { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.pub-brief { grid-column: 2; grid-row: 2; }
.pub-body { grid-column: 2; grid-row: 3; }
.pub-brief h2, .pub-body h2 { font-size: var(--fs-h2); margin: 52px 0 14px; }
.pub-brief h2 { margin-top: 40px; }
.pub-body h3 { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; margin: 0 0 6px; line-height: 1.4; }
.inbrief { border-left: 2px solid var(--teal); padding: 2px 0 2px 22px; }
.inbrief p { font-family: var(--font-serif); font-size: 22px; line-height: 1.45; margin: 0; max-width: 32em; }
.pub-body > p, .pub-body > ul, .two-up p { max-width: 40em; }
.keyfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); margin-top: var(--s5); border-top: 1px solid var(--rule); }
.keyfacts div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.keyfacts dt { font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.keyfacts dd { font-size: var(--fs-small); margin-top: 2px; }
.findings li { position: relative; padding-left: 22px; margin-bottom: var(--s3); }
.findings li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1px; background: var(--teal); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
.two-up p { font-size: 16px; }
.cite { background: var(--teal-tint); padding: 24px 26px 18px; border-radius: 2px; }
.cite__ref { font-size: 16px; line-height: 1.6; padding-left: 2em; text-indent: -2em; margin-bottom: var(--s4); }
.cite__ref a { overflow-wrap: anywhere; }
.cite__tools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; font-size: var(--fs-meta); }
.cite .btn { display: inline-flex; }
.cite__formats { flex-basis: 100%; display: grid; }
.cite summary { cursor: pointer; color: var(--teal); font-weight: 500; min-height: var(--target); display: flex; align-items: center; }
.cite pre { font-family: var(--font-code); font-size: 12.5px; line-height: 1.5; background: var(--paper); border: 1px solid var(--rule); padding: 12px 14px; overflow-x: auto; margin: 0 0 var(--s3); }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.plain-list li:first-child { border-top: 1px solid var(--rule); }
.plain-list .pub-meta { display: block; margin-top: 2px; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  :root { --pad: 32px; --fs-display: 42px; --fs-title: 34px; --fs-lede: 24px; }
  .site-header .wrap { grid-template-columns: 1fr auto; grid-template-areas: "brand lang" "nav nav"; padding-top: 6px; padding-bottom: 4px; }
  .site-nav { justify-self: start; }
  .lang { border-left: 0; padding-left: 0; margin-right: -6px; }
  .section { grid-template-columns: 1fr; row-gap: var(--s4); padding-block: 56px; }
  .section__label { padding-top: 0; }
  .intro { grid-template-columns: minmax(0, 1fr) 88px; column-gap: var(--s5); padding-block: 44px 56px; }
  .intro__portrait { grid-column: 2; grid-row: 1; width: 88px; align-self: center; }
  .intro h1 { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .intro__statement { margin-top: 22px; }
  .intro__statement, .intro__affil, .profiles, .intro__status { grid-column: 1 / -1; }
  .rq-grid { grid-template-columns: 1fr; }
  .rq { padding-block: 18px 26px; max-width: 40em; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .foot-name { padding-top: 0; }

  /* Publication: one column in source order (no CSS reordering) */
  .pub-page { display: block; padding-top: 32px; }
  .pub-head { border-bottom: 0; padding-bottom: var(--s4); }
  .rail-quick { border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .rail-more { position: static; margin-top: var(--s6); border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .rail-quick .facts > div { display: grid; grid-template-columns: 4.5em 1fr; column-gap: var(--s3); align-items: baseline; margin-bottom: 4px; }
  .rail-quick .btns { margin-bottom: 0; }
  .rail-quick .btn--primary { max-width: 320px; }
  .rail-more .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .rail-more .btns { grid-template-columns: repeat(3, max-content); }
  .pub-brief h2 { margin-top: var(--s6); }
}

/* ---------- Mobile ---------- */
@media (max-width: 719px) {
  :root { --pad: 20px; --fs-display: 36px; --fs-title: 28px; --fs-lede: 21px; --fs-h2: 23px; --fs-item: 20px; --fs-body: 16.5px; }
  .brand { font-size: 19px; }
  .site-nav { justify-self: stretch; }
  .site-nav ul { justify-content: space-between; column-gap: 12px; }
  .site-nav a, .site-nav .is-unavailable { font-size: 14px; }
  .section { padding-block: 44px; }
  .intro { grid-template-columns: minmax(0, 1fr) 84px; column-gap: var(--s4); padding-block: 28px 44px; }
  .intro__portrait { width: 84px; }
  .intro__statement { margin: 18px 0 22px; }
  [lang^="zh"] .intro__statement { font-size: 20px; }
  .profiles { column-gap: 18px; }

  .res thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .res, .res tbody, .res tr, .res td { display: block; width: 100%; }
  .res tr { padding: 16px 0 6px; border-bottom: 1px solid var(--rule); }
  .res tr:first-child { border-top: 1px solid var(--rule-strong); }
  .res td { border: 0; padding: 3px 0; white-space: normal !important; }
  .res td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-muted); margin-top: 8px; }
  .res .actions { flex-direction: row; margin-top: 4px; }

  .pub-head h1 { line-height: 1.2; }
  .rail-quick .btn--primary { max-width: none; }
  .rail-more .btns { grid-template-columns: 1fr 1fr; }
  .rail-more .btns .btn:last-child { grid-column: 1 / -1; }
  .inbrief p { font-size: 19px; }
  .keyfacts { grid-template-columns: 1fr 1fr; }
  .two-up { grid-template-columns: 1fr; }
  .cite { padding: 20px 18px 14px; margin-inline: -8px; }
}

/* Below ~430 px: the same balanced 3 + 2 navigation grid for every language */
@media (max-width: 429px) {
  .site-nav ul { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; column-gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }