/* Envoy — shared stylesheet for public content pages (per-language, Reader
   samples, reference). Same design system as the landing: modern Apple-style
   sans (real SF Pro on Apple, Inter elsewhere), passport-gold on deep navy. */
:root{
  --navy:#0F1B31; --navy-2:#16243F; --navy-3:#1E3252; --navy-hi:#26406A; --navy-deep:#0A1424;
  --gold:#CBA45C; --gold-hi:#E6CB84; --gold-deep:#B8893F;
  --text:#ECEFF6; --soft:#93A4C0; --faint:#64748F;
  --line:rgba(255,255,255,.09); --good:#59BC8C; --on-gold:#241A06; --paper:#F4EFE4;
  --disp:-apple-system,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:820px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--sans);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(120% 60% at 85% -5%,rgba(203,164,92,.10),transparent 60%),
                   radial-gradient(90% 50% at 0% 0%,rgba(38,64,106,.35),transparent 55%);
  background-attachment:fixed}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0}
a{color:var(--gold-hi);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* header */
header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(15,27,49,.9),rgba(15,27,49,.55));border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:20px;font-weight:700;color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px}
.brand .tm{font-size:.5em;vertical-align:super;color:var(--gold);margin-left:1px}
.nav .cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),var(--gold-hi));
  color:var(--on-gold);font-weight:700;font-size:14px;padding:9px 18px;border-radius:12px}
.nav .cta:hover{text-decoration:none;transform:translateY(-1px)}

/* breadcrumb */
.crumb{font-size:13px;color:var(--soft);padding:20px 0 0}
.crumb a{color:var(--soft)}
.crumb span{margin:0 7px;opacity:.6}

/* article */
main{padding:8px 0 40px}
article{padding:14px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:16px}
.flag{font-size:1.5em;line-height:1}
h1{font-size:clamp(32px,5.5vw,52px);margin:0 0 6px}
.native{color:var(--soft);font-family:var(--disp);font-weight:600;font-size:clamp(18px,3vw,24px);margin-bottom:20px}
.lede{font-size:clamp(17px,2.4vw,20px);color:var(--text);line-height:1.6;margin:0 0 22px;
  border-left:3px solid var(--gold);padding-left:18px}
article h2{font-size:clamp(23px,3.5vw,30px);margin:44px 0 14px}
article h3{font-size:19px;margin:26px 0 8px;letter-spacing:-.02em}
article p{color:var(--soft);font-size:16.5px;margin:0 0 16px}
article strong{color:var(--text);font-weight:700}
article ul{color:var(--soft);padding-left:22px;margin:0 0 18px}
article li{margin:7px 0}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.chip{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;min-width:120px}
.chip b{display:block;font-family:var(--disp);font-size:26px;font-weight:700;color:var(--gold);line-height:1}
.chip span{font-size:12.5px;color:var(--soft);margin-top:3px;display:block}

/* phrase blocks (l2 + pronunciation + english) */
.phrase{border-left:2px solid var(--gold);padding:4px 0 4px 14px;margin:0 0 14px}
.phrase .l2{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.phrase .pron{font-family:var(--mono);font-size:13px;color:var(--gold);margin-left:8px;font-weight:500}
.phrase .en{font-size:14.5px;color:var(--soft);margin-top:2px}

/* "book page" callout (reader samples) */
.paper{background:linear-gradient(180deg,#F7F1E4,#EFE6D2);color:#33291a;border:1px solid rgba(203,164,92,.4);
  border-radius:18px;padding:26px 24px;margin:22px 0;box-shadow:0 40px 84px -50px rgba(0,0,0,.7)}
.paper p{color:#5c4d33;font-size:16px;line-height:1.7;margin:0 0 15px}
.paper em{font-style:italic;color:#33291a}
.paper .p-l2{font-family:var(--disp);font-size:18px;font-weight:700;color:#2a2113;border-left:2px solid var(--gold);
  padding-left:12px;margin:0 0 3px}
.paper .p-pron{font-family:var(--mono);font-size:12.5px;color:#a37d38;font-weight:500;margin-left:6px}
.paper .p-en{color:#7c6c49;font-size:14px;padding-left:14px;margin:0 0 15px}

/* tables (FSI reference) */
.tablewrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--navy-2);color:var(--text);font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase}
td{color:var(--soft)}
tr:last-child td{border-bottom:0}
td b,td strong{color:var(--gold);font-weight:700}
caption{caption-side:bottom;color:var(--soft);font-size:12px;padding:10px 0 0;text-align:left}

/* CTA */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;padding:14px 24px;
  font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.prim{background:linear-gradient(135deg,var(--gold),var(--gold-hi));color:var(--on-gold);
  box-shadow:0 12px 30px -10px rgba(203,164,92,.55)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text)}

/* related links */
.related{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:560px){.related{grid-template-columns:1fr}}
.related a{display:block;background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:15px 17px;color:var(--text)}
.related a:hover{border-color:rgba(203,164,92,.45);text-decoration:none}
.related a b{display:block;font-family:var(--disp);font-weight:700;font-size:16px}
.related a span{font-size:13px;color:var(--soft)}

/* faq */
.faq h3{font-size:18px;margin:20px 0 6px}
.faq p{margin:0 0 4px}

.updated{color:var(--soft);font-size:13px;margin-top:34px}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 60px;color:var(--soft);font-size:13.5px}
.fnav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}
.fnav a{color:var(--soft)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
