/* A compact, usable navigation and reading rhythm for smaller screens. */
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.menu-toggle { display:none; align-items:center; gap:7px; min-height:44px; padding:8px 13px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); font-family:inherit; font-size:14px; font-weight:750; line-height:1.2; cursor:pointer; }
.menu-toggle span:first-child { font:700 22px/1 system-ui,sans-serif; }
.menu-toggle:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.site-header { flex-wrap:nowrap; gap:16px; }
.site-header #main-nav { order:2; gap:12px; margin-left:auto; }
.site-header #main-nav a { font-size:13px; white-space:nowrap; }
.site-header .header-actions { order:3; margin-left:0; }
@media (max-width:1100px) {
  .site-header { position:relative; flex-wrap:wrap; gap:8px 14px; padding:12px 0; min-height:70px; }
  .brand { min-width:0; }
  .brand strong { font-size:clamp(14px,3.6vw,17px); }
  .brand small { display:none; }
  .site-header .menu-toggle { display:inline-flex; }
  .site-header #main-nav { display:none; width:100%; order:3; flex-basis:100%; margin:5px 0 0; padding:11px 0 4px; border-top:1px solid var(--line); }
  .site-header .header-actions { order:2; margin-left:auto; }
  .site-header #main-nav.is-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .site-header #main-nav a, .site-header #main-nav a.membership-nav, .site-header #main-nav .download-link { display:flex; min-width:0; min-height:48px; align-items:center; justify-content:flex-start; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-size:14px; line-height:1.3; text-align:left; text-decoration:none; white-space:normal; max-width:none; }
  .site-header #main-nav a.membership-nav { background:#dff3f2; color:#00546f; }
  .site-header #main-nav .download-link { background:var(--ink); color:var(--white); }
  [data-theme=dark] .site-header #main-nav a.membership-nav { background:#244b55; color:#d6f6f4; }
  [data-theme=dark] .site-header #main-nav .download-link { background:#176b80; color:#fff; }
}
@media (max-width:640px) {
  .site-header { width:calc(100% - 32px); }
  .header-actions { gap:6px; }
  .header-actions .theme-toggle { width:44px; min-height:44px; padding:8px; }
  .header-actions .menu-toggle { padding:8px 11px; }
  .intro-shell { width:calc(100% - 20px); padding:32px 22px 24px; gap:25px; }
  .intro-shell h1 { font-size:clamp(36px,10vw,46px); line-height:1.07; }
  .lede { margin-top:16px; }
  .hero-quote { margin-top:20px; padding:13px 15px; }
  .hero-quote p { font-size:21px; }
  .intro-actions { margin-top:22px; gap:9px; }
  .featured-card { min-height:215px; padding:22px; }
  .featured-hanzi, .featured-card[data-watermark] .featured-hanzi { margin-top:18px; font-size:clamp(35px,10vw,50px); }
  .featured-title { font-size:18px; }
  .featured-foot { padding-top:12px; }
  .quiz-section { width:calc(100% - 32px); padding:38px 0 50px; }
  .quiz-levels { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .quiz-levels button { min-width:0; min-height:50px; padding:7px; }
  .quiz-panel { padding:20px 16px; min-height:0; }
  .quiz-option { min-height:56px; }
  .promo-callout { width:calc(100% - 32px); }
  .membership-section { width:calc(100% - 32px); margin:48px auto 64px; }
  .membership-plans { grid-template-columns:1fr; gap:9px; }
  .membership-plan, .membership-plan:nth-child(2), .membership-plan:nth-child(3) { min-height:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; }
  .membership-plan>span { display:none; }
  .membership-plan h3 { margin:0; font-size:17px; }
  .membership-plan p { margin:0; }
  .membership-plan strong { font-size:clamp(21px,6vw,28px); white-space:nowrap; }
  .bundle-feature { margin-top:22px; padding:22px; gap:17px; }
  .bundle-feature img { width:min(100%,290px); }
  .library-section { padding:54px 0 42px; }
  .level-grid { gap:12px; }
  .level-card { min-height:0; grid-template-columns:75px minmax(0,1fr); gap:13px; padding:12px; }
  .level-cover { min-height:145px; padding:12px; }
  .level-cover strong { font-size:44px; }
  .level-copy { padding:0; }
  .level-copy h3 { margin-top:8px; }
  .level-copy p { font-size:13px; margin-top:6px; }
  .level-actions { gap:9px; padding-top:10px; margin-top:10px; }
  .level-actions .download-file { margin-left:0; }
  .business-section { padding:26px 20px; }
  .how-it-works { padding-top:42px; overflow:visible; }
  .how-it-works ol { min-width:0; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .how-it-works li { padding:12px 3px; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
  .lessons-section { padding:54px 0 70px; }
  .lessons-section h2 { font-size:clamp(28px,8vw,38px); }
  .lesson-card { min-height:220px; padding:20px; }
  .card-hanzi { margin-top:20px; }
  .card-action { padding-top:13px; }
}
@media (max-width:360px) {
  .site-header .brand-mark { width:34px; height:34px; }
  .site-header .brand strong { font-size:13px; }
  .site-header #main-nav.is-open { grid-template-columns:1fr; }
  .quiz-stats { grid-template-columns:1fr; }
}

.manhua-callout{width:calc(100% - 64px);max-width:1120px;margin:38px auto 10px;display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center;padding:24px;border:2px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.manhua-callout h2{font-size:clamp(28px,4vw,38px);line-height:1.18;margin:6px 0 14px}.manhua-callout p{line-height:1.7}.manhua-callout .button{margin-top:12px}.manhua-preview{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:#efe8dc;border:1px solid var(--line)}.manhua-preview img{position:absolute;width:300%;height:300%;max-width:none;left:0;top:0}
@media(max-width:640px){.manhua-callout{width:calc(100% - 32px);grid-template-columns:1fr;gap:18px;padding:20px;margin-top:24px}.manhua-callout h2{font-size:30px}.manhua-callout .button{width:100%;justify-content:center}.manhua-preview{width:100%}}

.manhua-preview{aspect-ratio:418/403}.manhua-preview img{width:300%;height:311.166253%;}

.manhua-preview{aspect-ratio:1}.manhua-preview img{position:static;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:top}