/* Magic Kids Foundation — Premium editorial identity | November 2026 */
:root {
  --navy: #193346;
  --navy-dark: #122735;
  --ink: #263b48;
  --muted: #5c6c73;
  --cream: #f8f7f3;
  --paper: #ffffff;
  --line: #d8dfdf;
  --turquoise: #197f93;
  --gold: #b78d54;
  --serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', Georgia, serif;
  --sans: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 4px; }
[hidden] { display:none !important; }
.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; top:-100px; left:10px; z-index:30; background:white; padding:10px 15px; }
.skip:focus { top:10px; }
.container { width: min(100% - 100px, 1250px); margin-inline:auto; }
/* Minimal masthead */
.announcement { background:var(--navy-dark); color:#e2ebeb; font-size:11px; min-height:31px; display:flex; align-items:center; justify-content:space-between; padding:6px max(50px, calc((100vw - 1250px) / 2)); letter-spacing:.015em; gap:20px; }
.top-location { opacity:.7; }
.site-header { position:relative; background:white; border-bottom:1px solid var(--line); z-index:5; }
.header-wrap { min-height:90px; display:flex; justify-content:space-between; align-items:center; gap:28px; }
.wordmark { display:inline-flex; align-items:center; gap:13px; text-decoration:none; flex-shrink:0; }
.brand-logo-image { display:block; width:68px; height:66px; object-fit:contain; }
.brand-text { display:block; color:var(--navy); font-size:17px; font-weight:700; line-height:1.15; letter-spacing:-.015em; }
.brand-text small { display:block; margin-top:5px; font-weight:500; font-size:10px; letter-spacing:.11em; }
.desktop-nav { display:flex; gap:clamp(17px, 2.1vw, 31px); align-items:center; margin-left:auto; }
.desktop-nav a,.mobile-nav a { font-size:12px; text-decoration:none; color:var(--navy); font-weight:600; }
.desktop-nav a:hover,.mobile-nav a:hover,.footer-links a:hover { text-decoration:underline; text-underline-offset:5px; }
.header-actions { display:flex; align-items:center; gap:16px; }
.language { color:var(--navy); background:transparent; border:1px solid var(--line); padding:9px 8px; font:600 12px var(--sans); border-radius:0; cursor:pointer; min-width:70px; }
.mobile-menu { display:none; width:38px; height:38px; padding:10px 7px; border:0; background:transparent; cursor:pointer; }
.mobile-menu span { display:block; width:23px; height:1px; background:var(--navy); margin:5px auto; }
.mobile-nav { background:white; border-top:1px solid var(--line); padding:8px 26px 18px; }
.mobile-nav a { display:block; padding:12px 0; border-bottom:1px solid var(--line); }
/* Hero, two calm editorial columns */
.hero { padding-block:88px 105px; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 100px); align-items:center; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.055em; line-height:1.5; margin:0 0 24px; color:var(--turquoise); }
h1,h2,h3,p { overflow-wrap:break-word; }
h1,h2 { color:var(--navy); }
h1,.large-title,.languages-section h2,.contact-section h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.035em; line-height:1.075; }
.hero h1 { font-size:clamp(56px,5.2vw,90px); margin:0; max-width:720px; }
h1 em,h2 em { font-style:italic; font-weight:400; color:inherit; }
.hero .intro { margin:27px 0 30px; max-width:530px; font-size:16px; line-height:1.8; color:var(--muted); }
.hero-buttons { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; gap:24px; text-decoration:none; padding:16px 22px; font-size:12px; font-weight:700; transition:background .2s ease; }
.button-dark { background:var(--navy); color:white; }
.button-dark:hover { background:var(--turquoise); }
.text-button { display:inline-flex; align-items:center; gap:13px; font-size:12px; font-weight:700; color:var(--navy); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:4px; }
.hero-note { color:#738189; border-top:1px solid var(--line); padding-top:16px; margin-top:54px; font-size:11px; }
/* Flat project cover, no fake 3D, no stars */
.hero-feature { min-height:550px; background:#e9eeeb; border:1px solid #dce3e0; display:flex; flex-direction:column; justify-content:space-between; padding:32px 34px 27px; }
.feature-top,.feature-bottom { display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#50646c; }
.feature-top { border-bottom:1px solid #bdc9c6; padding-bottom:16px; }
.feature-bottom { border-top:1px solid #bdc9c6; padding-top:18px; }
.feature-center { padding-block:50px; text-align:left; }
.feature-kicker { display:block; color:var(--turquoise); font-size:12px; margin-bottom:25px; }
.feature-title { font-family:var(--serif); font-weight:400; color:var(--navy); letter-spacing:-.065em; font-size:clamp(66px, 8vw, 124px); line-height:.94; }
.feature-period { color:var(--turquoise); }
.feature-subtitle { display:block; margin-top:35px; font-size:14px; color:#415b65; }
/* Four typographic focus areas */
.focus-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.focus-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.focus-grid span { padding:30px 18px; text-align:center; font-size:12px; font-weight:700; color:var(--navy); border-right:1px solid var(--line); letter-spacing:.015em; }
.focus-grid span:first-child { border-left:1px solid var(--line); }
/* Section foundation */
.section { padding-block:118px 126px; }
.section-top { display:flex; justify-content:space-between; align-items:baseline; gap:15px; border-top:1px solid var(--line); padding-top:14px; margin-bottom:44px; }
.section-top .eyebrow { margin:0; }
.section-index { font-size:11px; color:#829096; }
.large-title { font-size:clamp(48px, 5.2vw, 77px); margin:0; max-width:760px; }
.approach-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(50px,7vw,120px); }
.body-copy { padding-top:8px; max-width:490px; font-size:16px; line-height:1.85; color:var(--muted); }
.body-copy p { margin:0 0 19px; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); margin-top:80px; border-top:1px solid var(--line); }
.pillar { padding:29px 34px 5px 0; min-height:203px; border-right:1px solid var(--line); }
.pillar:not(:first-child) { padding-left:35px; }
.pillar:last-child { border-right:0; }
.pillar-num { font-family:var(--serif); font-size:17px; color:var(--gold); }
.pillar h3 { font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:-.025em; margin:21px 0 12px; color:var(--navy); }
.pillar p { font-size:14px; line-height:1.75; color:var(--muted); margin:0; }
/* Project pages are typographic, not fabricated device product shots */
.projects-section { background:#f0f2f0; }
.projects-section .section-top { border-color:#d1d8d6; }
.section-title-row { display:flex; align-items:end; justify-content:space-between; gap:55px; margin-bottom:51px; }
.section-teaser { max-width:300px; font-size:15px; line-height:1.8; color:var(--muted); margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.project-card { background:white; border:1px solid #e1e6e3; }
.project-visual { height:275px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:23px 25px; overflow:hidden; }
.visual-book { background:#ecdfcc; }
.visual-box { background:#dce8e8; }
.visual-map { background:#e3e7e0; }
.project-visual-index { color:#587078; font-size:11px; }
.project-visual-heading { font-family:var(--serif); font-size:clamp(45px,4vw,70px); line-height:1.02; letter-spacing:-.055em; color:var(--navy); font-weight:400; }
.project-visual-heading.small-title { font-size:clamp(41px,3.65vw,59px); }
.project-visual-footer { border-top:1px solid #aebdbb; padding-top:12px; font-size:11px; color:#435d66; }
.project-info { padding:25px 25px 35px; }
.project-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:7px 14px; font-size:10px; color:#58747c; }
.status { color:#8b6b42; }
.project-info h3 { margin:28px 0 12px; font-family:var(--serif); font-size:31px; font-weight:400; color:var(--navy); letter-spacing:-.025em; }
.project-info p { color:var(--muted); font-size:14px; line-height:1.75; margin:0; }
/* Research and funding */
.research-section { background:var(--navy); color:white; padding-block:122px 130px; }
.research-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(50px,6vw,110px); }
.light-eyebrow { color:#a7d5d9; }
.light-title { color:white; }
.research-text { padding-top:42px; color:#dae3e7; font-size:16px; line-height:1.8; }
.research-text p { margin:0 0 25px; }
.research-chip { display:inline-block; border-top:1px solid #7e969d; margin-top:12px; padding-top:17px; color:#d5dfe1; font-size:11px; }
.funding-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,120px); }
.funding-intro { color:var(--muted); font-size:16px; line-height:1.85; max-width:520px; margin:33px 0 30px; }
.notice { color:#4e6770; font-size:13px; line-height:1.6; border-left:2px solid var(--turquoise); padding:3px 0 3px 17px; max-width:500px; }
.funding-options { border-top:1px solid var(--line); }
.funding-option { display:grid; grid-template-columns:33px 1fr; column-gap:18px; padding:26px 0; border-bottom:1px solid var(--line); }
.funding-option>span { color:var(--gold); font-family:var(--serif); font-size:16px; }
.funding-option h3 { margin:0; font-family:var(--serif); font-weight:400; font-size:25px; letter-spacing:-.02em; color:var(--navy); }
.funding-option p { grid-column:2; margin:8px 0 0; color:var(--muted); line-height:1.7; font-size:14px; }
/* Language support — editorial index instead of decorative orbit */
.languages-section { padding-block:110px; background:#edf0ed; }
.language-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:90px; align-items:start; }
.languages-section h2 { font-size:clamp(47px,4.7vw,70px); margin:0 0 25px; }
.languages-section p:not(.eyebrow) { color:var(--muted); max-width:500px; font-size:16px; line-height:1.85; }
.language-list { border-top:1px solid #c9d3d0; }
.language-list div { display:grid; grid-template-columns:45px 1fr; align-items:baseline; border-bottom:1px solid #c9d3d0; padding:16px 0; }
.language-list span { font-size:11px; color:var(--turquoise); }
.language-list strong { color:var(--navy); font-size:18px; font-weight:500; }
.language-list .language-more strong { color:var(--muted); font-size:14px; }
/* Contact, legal and footer */
.contact-section { background:var(--navy-dark); color:white; padding-block:110px; }
.contact-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:90px; }
.contact-section h2 { color:white; font-size:clamp(48px,5vw,76px); margin:0 0 26px; }
.contact-section p:not(.eyebrow) { max-width:470px; font-size:16px; line-height:1.8; color:#cfdee0; }
.contact-card { border-top:1px solid #637a85; padding:23px 0 0; margin-top:48px; }
.contact-card h3 { font-family:var(--serif); font-weight:400; font-size:32px; margin:0 0 15px; color:white; }
.contact-card p { margin:0 0 22px; }
.contact-card .contact-note { border-top:1px solid #526a75; padding-top:19px; font-size:13px !important; }
.footer { background:#0e202c; color:#e9f0f0; padding:56px 0 28px; }
.footer-main { display:flex; justify-content:space-between; gap:50px; padding-bottom:50px; }
.footer-logo-row { display:flex; align-items:center; gap:15px; }
.footer-logo-image { width:64px; height:62px; object-fit:contain; background:white; padding:3px; }
.footer-logo { font-size:16px; font-weight:700; color:white; letter-spacing:-.015em; }
.footer-logo small { display:block; margin-top:4px; font-size:10px; letter-spacing:.08em; font-weight:400; }
.footer-brand p { margin-top:19px; color:#b9cbd1; font-size:13px; }
.footer-links { display:grid; grid-template-columns:repeat(2,1fr); align-content:start; gap:14px 55px; }
.footer-links a { color:#e0e8ea; font-size:12px; text-decoration:none; }
.footer-bottom { border-top:1px solid #405761; padding-top:24px; display:flex; flex-wrap:wrap; gap:13px 28px; color:#afc0c6; font-size:11px; }
.translation-notice { position:fixed; bottom:14px; left:14px; z-index:1000; border:1px solid #c7bb9f; background:#fffdf6; color:#5c554b; padding:12px 15px; font-size:12px; max-width:340px; }
section[id] { scroll-margin-top:20px; }
@media (max-width:1100px) {
  .container { width:min(100% - 64px,1250px); }
  .desktop-nav { gap:15px; }
  .desktop-nav a { font-size:11px; }
  .hero { gap:42px; }
  .hero-feature { min-height:470px; }
  .feature-title { font-size:clamp(62px,8vw,104px); }
  .approach-grid,.research-grid,.funding-grid,.language-grid,.contact-grid { gap:45px; }
}
@media (max-width:820px) {
  .container { width:min(100% - 40px,620px); }
  .announcement { padding:7px 20px; }
  .top-location { display:none; }
  .header-wrap { min-height:75px; }
  .brand-logo-image { width:54px; height:54px; }
  .brand-text { font-size:15px; }
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  .hero { grid-template-columns:1fr; padding-block:64px 72px; gap:46px; }
  .hero h1 { font-size:clamp(54px,11vw,76px); }
  .hero-feature { min-height:420px; }
  .feature-title { font-size:clamp(70px,16vw,112px); }
  .hero-note { margin-top:36px; }
  .focus-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .focus-grid span { border-bottom:1px solid var(--line); padding:20px 10px; font-size:11px; }
  .focus-grid span:nth-child(2n+1) { border-left:1px solid var(--line); }
  .focus-grid span:nth-child(n+3) { border-bottom:0; }
  .section { padding-block:80px 90px; }
  .section-top { margin-bottom:35px; }
  .section-index { display:none; }
  .approach-grid,.research-grid,.funding-grid,.language-grid,.contact-grid { grid-template-columns:1fr; gap:26px; }
  .large-title { font-size:clamp(46px,9vw,66px); }
  .body-copy { padding-top:0; }
  .pillars { grid-template-columns:1fr; margin-top:48px; }
  .pillar,.pillar:not(:first-child) { padding:19px 0 24px; min-height:auto; border-bottom:1px solid var(--line); border-right:0; }
  .pillar h3 { margin:8px 0; }
  .pillar:last-child { border-bottom:0; }
  .section-title-row { display:block; }
  .section-teaser { max-width:480px; margin-top:22px; }
  .project-grid { grid-template-columns:1fr; }
  .project-visual-heading { font-size:70px; }
  .project-visual-heading.small-title { font-size:62px; }
  .research-section { padding-block:85px; }
  .research-text { padding-top:0; }
  .languages-section { padding-block:78px; }
  .contact-section { padding-block:84px; }
  .contact-card { margin-top:10px; }
  .footer-main { flex-direction:column; gap:38px; }
}
@media (max-width:390px) {
  .container { width:calc(100% - 32px); }
  .hero h1 { font-size:50px; }
  .hero-feature { padding:24px 20px; min-height:355px; }
  .feature-title { font-size:65px; }
  .feature-bottom { font-size:10px; }
  .project-visual-heading { font-size:60px; }
  .project-visual-heading.small-title { font-size:52px; }
  .language-list strong { font-size:16px; }
  .brand-logo-image { width:48px; height:50px; }
  .brand-text { font-size:13px; }
  .header-actions { gap:7px; }
  .language { min-width:61px; padding:7px 5px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}

/* Standalone editorial About Us / Donation pages */
.desktop-nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color:var(--turquoise); text-decoration:underline; text-underline-offset:7px; }
.desktop-nav { gap:clamp(11px,1.3vw,21px); }
.interior-hero { padding-block:90px 105px; border-bottom:1px solid var(--line); }
.interior-hero .eyebrow { margin-bottom:24px; }
.interior-hero h1 { font-size:clamp(68px,8vw,120px); margin:0 0 27px; letter-spacing:-.045em; }
.interior-lead { max-width:850px; color:var(--muted); font-size:clamp(19px,2vw,25px); line-height:1.65; margin:0; }
.interior-section { padding-block:95px 105px; }
.interior-section .eyebrow { margin-bottom:36px; }
.interior-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(45px,7vw,125px); }
.interior-section h2 { font-family:var(--serif); font-size:clamp(42px,4.7vw,69px); font-weight:400; letter-spacing:-.035em; line-height:1.12; margin:0; }
.interior-prose p, .interior-two>p, .interior-two>div>p { color:var(--muted); line-height:1.87; font-size:16px; margin:0 0 23px; }
.interior-shade { background:#f0f2f0; }
.interior-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.interior-three article { min-height:205px; padding:26px 34px 20px 0; border-right:1px solid var(--line); }
.interior-three article:not(:first-child) { padding-left:30px; }
.interior-three article:last-child { border-right:0; }
.small-number { font-family:var(--serif); color:var(--gold); font-size:18px; }
.interior-three h3 { font-family:var(--serif); font-size:clamp(23px,2.7vw,33px); color:var(--navy); font-weight:400; line-height:1.2; margin:18px 0 14px; }
.interior-three p, .donation-option>p:not(.eyebrow) { color:var(--muted); line-height:1.77; font-size:15px; margin:0; }
.interior-navy { background:var(--navy-dark); color:#f3f6f6; }
.interior-navy h2 { color:#fff; }
.interior-navy .interior-two>p,.interior-navy .interior-two>div>p {color:#d5e1e5;}
.donation-columns { display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.donation-option { border-top:1px solid var(--line); padding-top:20px; }
.donation-option .eyebrow { margin-bottom:25px; }
.donation-option h2 { font-size:clamp(37px,4vw,56px); margin-bottom:24px; }
.interior-navy .no-payment { font-size:12px; padding-top:21px; border-top:1px solid #5a747f; }
@media(max-width:1180px) { .desktop-nav { display:none; } .mobile-menu { display:block; } }
@media(max-width:820px) { .interior-hero { padding-block:64px 72px; } .interior-section { padding-block:73px 80px; } .interior-two,.interior-three,.donation-columns { grid-template-columns:1fr; gap:26px; } .interior-three article,.interior-three article:not(:first-child) { min-height:0; padding:20px 0 25px; border-right:0; border-bottom:1px solid var(--line); } .interior-three article:last-child { border-bottom:0; } .interior-lead { font-size:19px; } }

/* Language coverage: CJK fallback and respectful wrapping without a new design. */
html[lang="zh-Hans"] body { font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", var(--sans); }
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="zh-Hans"] .feature-title { font-family: "Noto Serif CJK SC", "Songti SC", "SimSun", var(--serif); }
.desktop-nav a, .mobile-nav a { overflow-wrap:normal; }
.project-visual-heading.small-title { overflow-wrap:anywhere; }

/* Translation review note belongs to the page footer, never floating over content. */
.translation-notice { position:static; max-width:none; width:100%; margin:0; padding:12px max(20px, calc((100vw - 1250px) / 2)); border:0; border-top:1px solid var(--line); background:#f8f7f3; color:var(--muted); font-size:11px; }