/* ---------- tokens ---------- */
:root{
  --paper:#FBF8F4;
  --paper-2:#F2EEE6;
  --card:#FFFFFF;
  --ink:#233830;
  --ink-2:#4E6159;
  --ink-3:#77887F;
  --pine:#2E5F52;
  --pine-soft:#DDE9E3;
  --honey:#C98A28;
  --honey-soft:#FAEBD2;
  --lilac:#6F62A6;
  --lilac-soft:#E9E5F4;
  --rule:#E3DCD0;
  --focus:#2E5F52;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1120px;
  --fs:17px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141C1A; --paper-2:#1B2523; --card:#1F2A27;
    --ink:#E8EFEA; --ink-2:#B4C4BC; --ink-3:#8B9D95;
    --pine:#8FC7B4; --pine-soft:#24352F;
    --honey:#E8B461; --honey-soft:#33291A;
    --lilac:#AEA2DF; --lilac-soft:#282542;
    --rule:#2E3B37; --focus:#8FC7B4;
  }
}
:root[data-theme="dark"]{
  --paper:#141C1A; --paper-2:#1B2523; --card:#1F2A27;
  --ink:#E8EFEA; --ink-2:#B4C4BC; --ink-3:#8B9D95;
  --pine:#8FC7B4; --pine-soft:#24352F;
  --honey:#E8B461; --honey-soft:#33291A;
  --lilac:#AEA2DF; --lilac-soft:#282542;
  --rule:#2E3B37; --focus:#8FC7B4;
}
:root[data-size="large"]{ --fs:20px; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 92px)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs);line-height:1.65;-webkit-font-smoothing:antialiased;
}
[lang="ar"]{font-family:"Noto Sans Arabic","Karla",sans-serif;line-height:1.85}
[lang="zh-Hans"],[lang="ko"]{font-family:"Karla","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
h1,h2,h3,h4{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:500;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em;font-variation-settings:"SOFT" 40,"WONK" 1}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="zh-Hans"] h1,[lang="zh-Hans"] h2,[lang="zh-Hans"] h3,[lang="ko"] h1,[lang="ko"] h2,[lang="ko"] h3{font-family:inherit;font-weight:700;letter-spacing:0}
h1{font-size:clamp(2.1rem,5.4vw,3.3rem);font-weight:600;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3.2vw,2.05rem);margin-top:0}
h3{font-size:1.18rem;font-weight:600}
h4{font-size:1rem;font-weight:600;font-family:"Karla",sans-serif;margin-bottom:.35em}
p{margin:0 0 1em;max-width:68ch}
a{color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
ul,ol{max-width:68ch;padding-inline-start:1.15em}
li{margin:.3em 0}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--pine);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{inset-inline-start:0}

/* ---------- header ---------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:14px;padding:12px 20px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:1.12rem;color:var(--ink);text-decoration:none;flex-shrink:0}
.mark{width:30px;height:30px;flex:0 0 30px}
.tools{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tbtn{font:inherit;font-size:.82rem;font-weight:600;background:transparent;color:var(--ink-2);border:1px solid var(--rule);padding:6px 11px;border-radius:99px;cursor:pointer}
.tbtn:hover{border-color:var(--pine);color:var(--pine)}
#langSel{font-size:.82rem;padding:6px 10px;min-width:0;border-radius:99px}
nav.main{border-bottom:1px solid var(--rule);background:var(--paper)}
.navscroll{display:flex;gap:4px;overflow-x:auto;max-width:var(--maxw);margin:0 auto;padding:6px 20px 8px;scrollbar-width:thin}
.navscroll a{flex:0 0 auto;font-size:.88rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:7px 13px;border-radius:99px;white-space:nowrap}
.navscroll a:hover{background:var(--paper-2);color:var(--ink)}
.navscroll a[aria-current="page"]{background:var(--pine);color:var(--paper)}

/* ---------- layout ---------- */
main{padding-bottom:64px}
.page{display:block}

@keyframes fade{from{opacity:0}to{opacity:1}}
.lede{font-size:1.14em;color:var(--ink-2);max-width:60ch}
.sec{padding:46px 0;border-top:1px solid var(--rule)}
.sec.first{border-top:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.tag{display:inline-block;font-size:.76rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--pine-soft);color:var(--pine);margin-bottom:10px}
.tag.h{background:var(--honey-soft);color:var(--honey)}
.tag.l{background:var(--lilac-soft);color:var(--lilac)}
.note{background:var(--honey-soft);border-inline-start:4px solid var(--honey);padding:16px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:22px 0}
[dir="rtl"] .note{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}
.quiet{color:var(--ink-3);font-size:.92rem}
.pending{display:none;background:var(--lilac-soft);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 18px;margin:20px 0 0;font-size:.94rem;color:var(--ink-2)}
.pending.on{display:block}

/* ---------- hero ---------- */
.hero{padding:54px 0 12px;position:relative;overflow:hidden}
.hero .inner{position:relative;z-index:2}
.hero h1{max-width:18ch}
.blob{position:absolute;inset:auto -120px -220px auto;width:520px;height:520px;background:radial-gradient(circle at 35% 35%,var(--pine-soft),transparent 62%);z-index:1;pointer-events:none}
.doors{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:30px}
.door{display:block;text-align:start;background:var(--card);border:1px solid var(--rule);border-inline-start:5px solid var(--pine);border-radius:var(--radius);padding:20px;cursor:pointer;font:inherit;color:var(--ink);transition:transform .18s}
.door:nth-child(2){border-inline-start-color:var(--honey)}
.door:nth-child(3){border-inline-start-color:var(--lilac)}
.door:nth-child(4){border-inline-start-color:var(--ink-3)}
.door:hover{transform:translateY(-2px)}
.door b{display:block;font-family:"Fraunces",serif;font-size:1.12rem;font-weight:600;margin-bottom:6px}
[lang="ar"] .door b,[lang="zh-Hans"] .door b,[lang="ko"] .door b{font-family:inherit;font-weight:700}
.door span{color:var(--ink-2);font-size:.93rem;line-height:1.5;display:block}

/* ---------- timeline ---------- */
.tl{border-inline-start:2px solid var(--rule);margin:0;padding:0;padding-inline-start:26px;list-style:none;max-width:72ch}
.tl li{position:relative;margin:0 0 30px}
.tl li::before{content:"";position:absolute;inset-inline-start:-33px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--pine);border:3px solid var(--paper)}
.tl .yr{font-family:"Fraunces",serif;font-size:1.22rem;font-weight:600;color:var(--pine);display:block;line-height:1.2}
.tl h3{margin:.15em 0 .25em;font-size:1.02rem;font-family:"Karla",sans-serif;font-weight:700}
.tl p{margin:0;color:var(--ink-2);font-size:.96rem}

/* ---------- stats ---------- */
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:24px 0}
.stat{background:var(--paper-2);border-radius:var(--radius-sm);padding:18px}
.stat b{display:block;font-family:"Fraunces",serif;font-size:1.85rem;font-weight:600;color:var(--pine);line-height:1}
.stat span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:6px}

/* ---------- state map ---------- */
.mapwrap{overflow-x:auto;padding:6px 0 14px}
.usmap{display:grid;grid-template-columns:repeat(11,minmax(44px,1fr));gap:5px;min-width:560px;direction:ltr}
.st{font:inherit;font-size:.78rem;font-weight:700;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--pine-soft);color:var(--pine);border:1px solid transparent;border-radius:9px;cursor:pointer;padding:0;transition:background .15s}
.st:hover{background:var(--pine);color:var(--paper)}
.st[aria-pressed="true"]{background:var(--pine);color:var(--paper);border-color:var(--ink)}
.picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 20px}
select,input[type="search"]{font:inherit;font-size:.95rem;padding:10px 13px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);min-width:200px}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0;padding-inline-start:46px;margin:0 0 22px}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--pine);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;font-family:"Karla",sans-serif}
.steps h4{margin-top:4px}
.steps p{margin-bottom:.4em;color:var(--ink-2);font-size:.96rem}
.btnlink{display:inline-block;font-size:.85rem;font-weight:600;color:var(--pine);background:var(--pine-soft);padding:5px 12px;border-radius:99px;text-decoration:none;margin:3px 6px 3px 0}
.btnlink:hover{background:var(--pine);color:var(--paper)}

/* ---------- accordion ---------- */
details{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--pine);font-weight:400;line-height:1}
details[open] summary::after{content:"–"}
details .body{padding:0 18px 18px;color:var(--ink-2)}
details .body p:last-child,details .body ul:last-child{margin-bottom:0}

/* ---------- misc ---------- */
table{width:100%;border-collapse:collapse;font-size:.94rem;margin:18px 0}
th,td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:700;color:var(--ink);background:var(--paper-2)}
.pill{display:inline-block;font-size:.8rem;font-weight:600;padding:4px 11px;border-radius:99px;background:var(--paper-2);color:var(--ink-2);margin:0 5px 5px 0}
footer.site{border-top:1px solid var(--rule);background:var(--paper-2);padding:34px 0;margin-top:20px}
footer.site p{font-size:.9rem;color:var(--ink-2)}
.crisis{background:var(--lilac-soft);border-radius:var(--radius);padding:20px 22px;border:1px solid var(--rule)}
.crisis h3{color:var(--lilac);margin-top:0}
.langbar{background:var(--pine-soft);padding:10px 0;font-size:.9rem}
.langbar .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.langbar button{font:inherit;font-size:.86rem;background:none;border:0;color:var(--pine);cursor:pointer;text-decoration:underline;padding:2px 0;text-underline-offset:3px}
@media (max-width:640px){
  .sec{padding:34px 0}
  .bar{padding:10px 16px}
  .wrap{padding:0 16px}
  .navscroll{padding:6px 16px 8px}
}

/* multi-page additions */
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px;padding:0;list-style:none}
.footnav a{font-size:.88rem;font-weight:600;text-decoration:none}
.footnav a:hover{text-decoration:underline}
.breadcrumb{font-size:.86rem;color:var(--ink-3);padding:16px 0 0}
.breadcrumb a{color:var(--ink-3)}
.prose h2{margin-top:0}
.contactgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kv{margin:0 0 14px}
.kv dt{font-weight:700;font-size:.92rem}
.kv dd{margin:0 0 10px;color:var(--ink-2);font-size:.95rem}