:root{--ink:#0e2430;--ink-soft:#35505c;--muted:#657b83;--brand:#0d8b7a;--brand-dark:#096b62;--mint:#dff6ef;--cream:#fbf9f4;--wash:#f0f5f3;--line:#dce6e2;--white:#fff;--orange:#e9a35a;--shadow:0 14px 38px rgba(14,36,48,.085);--r:17px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #edae73;outline-offset:2px}img{max-width:100%}.wrap{max-width:1180px;margin:auto;padding:0 28px}.hidden{display:none!important}.subtle{opacity:.45}.muted{color:var(--muted)}.eyebrow{font-size:.74rem;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.14em}.site-header{background:var(--ink);position:sticky;top:0;z-index:20;color:#f6fcf9;border-bottom:1px solid rgba(255,255,255,.1)}.header-inner{height:76px;display:flex;align-items:center;gap:24px;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.05em;line-height:1.12;font-size:17px;white-space:nowrap}.brand b{color:#7ee1ca}.brand small{display:block;color:#bed0cb;font-size:10px;letter-spacing:.1em;font-weight:500;margin-top:4px}.brand:hover{text-decoration:none}.brand-symbol{width:42px;height:42px;display:grid;place-items:center;border:2px solid #65d9bd;border-radius:13px;color:#f8ffff;font-weight:900;font-size:23px;position:relative}.brand-dot{color:var(--orange);font-size:14px;position:absolute;right:5px;bottom:3px}.top-nav{display:flex;gap:4px;align-items:center}.top-nav a{padding:9px 17px;color:#bed1cc;border-radius:10px;font-size:.9rem;font-weight:600}.top-nav a:hover,.top-nav a.active{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}.mobile-menu{display:none;border:1px solid rgba(255,255,255,.25);color:white;background:none;border-radius:8px;padding:5px 12px;font-size:23px}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 19px;border-radius:11px;font-weight:750;font-size:.91rem;border:1px solid transparent;white-space:nowrap;transition:transform .12s,background .12s;text-decoration:none}.btn:hover:not(:disabled){text-decoration:none;transform:translateY(-1px)}.btn-primary{background:var(--brand);color:white}.btn-primary:hover{background:var(--brand-dark)}.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#1a3e4e}.btn-light{background:white;color:var(--ink);border-color:var(--line)}.btn-light:hover{background:#f5faf7}.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn-soft{background:#e5f4ee;color:var(--brand-dark)}.btn-lg{font-size:1rem;padding:14px 24px}.btn-sm{padding:7px 12px;border-radius:9px;font-size:.79rem}.tag{display:inline-block;padding:4px 9px;border-radius:7px;background:#e9f2ef;color:#1e6e5e;font-weight:750;font-size:.71rem;letter-spacing:.01em}.tag-orange{background:#fdf0e1;color:#945d20}.tag-outline{background:white;border:1px solid var(--line);color:var(--ink-soft)}.hero{background:var(--ink);color:white;padding:82px 0 88px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;pointer-events:none;right:-170px;top:-240px;height:640px;width:640px;border-radius:50%;border:110px solid rgba(91,224,191,.065)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}.hero .eyebrow{color:#80dcc4}.hero h1{font-family:Georgia,serif;font-weight:600;font-size:clamp(3.1rem,5.5vw,5.4rem);letter-spacing:-.043em;line-height:1.08;margin:17px 0 24px}.hero h1 em{font-style:normal;color:#7fdfc5}.hero p{max-width:560px;font-size:1.06rem;line-height:1.82;color:#cadbd7}.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}.hero-cta .btn-light{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:white}.hero-preview{padding:20px;background:#fff;color:var(--ink);border-radius:23px;box-shadow:0 26px 60px rgba(0,0,0,.17);transform:rotate(1.6deg)}.preview-top{display:flex;gap:9px;align-items:center;padding:0 0 15px;color:var(--muted);font-size:.79rem;font-weight:650}.mini-dots{display:flex;gap:5px;margin-right:auto}.mini-dots i{height:8px;width:8px;background:#d7e7e0;border-radius:50%}.preview-photo,.card-photo,.article-photo{background:linear-gradient(135deg,#72cfc4,#184d63);position:relative;overflow:hidden}.preview-photo{border-radius:12px;min-height:218px}.preview-photo img,.card-photo img,.article-photo img{width:100%;height:100%;display:block;object-fit:cover;position:absolute;inset:0}.photo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d9fff2;font-size:70px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 50%),linear-gradient(135deg,#4eaa9a,#183f58)}.preview-bottom{padding:16px 3px 4px}.preview-bottom h3{font-size:1.18rem;line-height:1.35;margin:7px 0}.levels{display:flex;gap:5px;flex-wrap:wrap}.level-chip{border-radius:7px;padding:4px 10px;font-weight:800;font-size:.75rem;background:#edf3f0;border:1px solid transparent;color:#376156}.level-chip.active{background:var(--brand);color:white}.level-chip.clickable{cursor:pointer}.level-chip.clickable:hover{border-color:var(--brand)}.section{padding:60px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section-heading h2{font-family:Georgia,serif;font-weight:600;letter-spacing:-.03em;font-size:2.25rem;line-height:1.15;margin:7px 0}.section-heading p{color:var(--muted);max-width:700px;margin:8px 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.content-card{background:white;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 4px 14px rgba(12,43,51,.025);display:flex;flex-direction:column;min-height:350px}.content-card:hover{border-color:#98c8b8;box-shadow:var(--shadow)}.card-photo{height:190px}.card-body{padding:19px 19px 22px;flex:1;display:flex;flex-direction:column}.card-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.card-body h3{font-family:Georgia,serif;font-size:1.32rem;line-height:1.3;letter-spacing:-.025em;margin:14px 0 8px}.card-body p{font-size:.88rem;color:var(--muted);margin:0 0 16px}.card-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.card-bottom .levels{gap:3px}.card-bottom .level-chip{font-size:.66rem;padding:3px 6px}.arrow-link{color:var(--brand-dark);font-size:.85rem;font-weight:800}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.feature{display:flex;gap:13px;align-items:flex-start;padding:21px;background:#f3f8f4;border:1px solid var(--line);border-radius:14px}.feature-symbol{font-size:24px}.feature b{display:block}.feature p{color:var(--muted);font-size:.86rem;margin:3px 0 0}.page-head{padding:47px 0 34px;background:#eff6f1;border-bottom:1px solid var(--line)}.page-head h1{font:600 clamp(2.1rem,4vw,3.2rem)/1.15 Georgia,serif;letter-spacing:-.036em;margin:8px 0}.page-head p{max-width:770px;color:var(--ink-soft);margin:0}.library-tools{margin:29px 0 23px;display:flex;gap:13px;flex-wrap:wrap}.search{min-width:220px;flex:1;border:1px solid #cadbd4;background:white;border-radius:11px;padding:11px 14px;outline-offset:2px}.select{background:white;border:1px solid #cadbd4;border-radius:11px;padding:11px 14px;color:var(--ink)}.filter-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:25px}.filter-pill{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 15px;color:var(--ink-soft);font-weight:700;font-size:.87rem}.filter-pill.active{background:var(--ink);color:white}.result-count{font-size:.84rem;color:var(--muted);margin-left:auto}.empty-state{padding:48px;text-align:center;background:white;border:1px dashed #bdd2c7;border-radius:16px;color:var(--muted)}.detail-layout{display:grid;grid-template-columns:minmax(0,740px) 298px;gap:28px;align-items:start;padding:42px 0 70px}.crumb{display:inline-flex;align-items:center;color:var(--muted);font-size:.84rem;font-weight:700;margin-bottom:13px}.detail h1{font:600 clamp(2.2rem,4.5vw,3.5rem)/1.13 Georgia,serif;letter-spacing:-.045em;margin:13px 0 16px}.detail-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.detail-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}.article-photo{height:320px;border-radius:17px}.photo-credit{font-size:.73rem;color:var(--muted);padding:8px 3px}.paper{background:white;border:1px solid var(--line);padding:30px 33px;border-radius:var(--r);margin:20px 0;box-shadow:0 5px 17px rgba(14,36,48,.02)}.paper h2{font-family:Georgia,serif;letter-spacing:-.028em;font-size:1.7rem;font-weight:600;margin:0 0 18px}.reading-paragraph{font-size:1.045rem;line-height:1.93;color:#263e47;margin:0 0 20px}.reading-paragraph:last-child{margin-bottom:0}.citation-mark{font-size:.65rem;vertical-align:super;color:var(--brand);font-weight:800;margin-left:3px}.vocab-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.vocab-card{padding:14px;background:#f5f8f6;border-radius:11px}.vocab-word{font-size:1.07rem;font-weight:820}.vocab-pos{font-size:.72rem;color:var(--muted);font-weight:650;margin-left:7px}.vocab-pron{font-size:.77rem;color:var(--brand-dark);margin:3px 0 6px}.vocab-meaning{font-size:.87rem;line-height:1.45}.vocab-example{color:var(--muted);font-size:.81rem;line-height:1.4;margin-top:7px;font-style:italic}.questions-list{margin:0;padding:0;list-style:none;counter-reset:ques}.questions-list li{counter-increment:ques;display:flex;align-items:flex-start;gap:13px;margin:0;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.02rem}.questions-list li:before{content:counter(ques);background:#e1f2eb;color:#097160;font-size:.85rem;font-weight:850;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;flex-shrink:0}.questions-list li:last-child{border:0}.references{padding-left:18px;color:var(--muted);font-size:.86rem}.references li{padding:4px 0}.references a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.side-sticky{position:sticky;top:104px}.side-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px}.side-panel h3{font-size:.94rem;margin:0 0 13px}.side-panel p{font-size:.84rem;color:var(--muted);margin:8px 0}.side-panel .levels{margin-bottom:13px}.side-panel .level-chip{padding:7px 11px}.side-steps{display:grid;gap:8px;margin:16px 0}.side-steps a{font-size:.87rem;color:var(--ink-soft);padding:8px 12px;background:#f4f8f5;border-radius:8px}.notice{font-size:.8rem;color:#546d76;border-left:3px solid var(--brand);padding:11px 15px;background:#eef6f1;border-radius:4px}.notice-warn{border-color:#d69a51;background:#fdf5e8}.discussion-part{border:1px solid var(--line);border-radius:15px;overflow:hidden;margin:18px 0}.discussion-part h3{padding:18px 19px;margin:0;background:#edf6f1;font-family:Georgia,serif;font-size:1.34rem}.discussion-part .part-focus{padding:10px 19px;color:var(--muted);font-size:.89rem;border-bottom:1px solid var(--line)}.discussion-warmup{margin:15px 19px;background:#fff5e9;padding:14px;border-radius:11px}.discussion-warmup b{font-size:.86rem}.discussion-warmup p{margin:4px 0}.discussion-question{margin:0 19px;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:11px}.discussion-question:last-child{border:0}.question-num{background:#dfefe8;color:#096b62;min-width:29px;height:29px;display:grid;place-items:center;border-radius:50%;font-size:.79rem;font-weight:900}.q-type{font-size:.66rem;color:var(--brand-dark);font-weight:800;letter-spacing:.05em}.q-starter{font-size:.85rem;color:var(--brand-dark);background:#e8f7ee;margin-top:5px;padding:4px 7px;border-radius:6px;display:inline-block}.import-layout{display:grid;grid-template-columns:1fr 330px;gap:25px;align-items:start;padding:35px 0 65px}.upload-zone{background:white;border:2px dashed #9cbfb1;border-radius:17px;padding:40px 24px;text-align:center;transition:.15s;cursor:pointer}.upload-zone.dragging{background:#e6f7ee;border-color:var(--brand)}.upload-zone .upload-icon{font-size:43px;color:var(--brand)}.upload-zone h2{font:600 1.65rem Georgia,serif;margin:8px 0}.upload-zone p{color:var(--muted);font-size:.9rem}.upload-zone input{display:none}.file-meta{padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#f5faf7;font-size:.9rem;margin-top:15px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}.status-good{color:#087f5b}.status-warn{color:#986217}.status-bad{color:#b33a40}.import-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.field{display:grid;gap:7px;margin:15px 0}.field label{font-weight:800;font-size:.88rem}.field input,.field select{border:1px solid #c6d6d0;border-radius:10px;padding:9px 12px;background:white}.help-note{font-size:.77rem;color:var(--muted)}.local-list{font-size:.85rem;color:var(--ink-soft);margin:12px 0}.site-footer{background:#e9f1ec;color:#647a76;font-size:.8rem}.footer-inner{display:flex;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:24px}.teaching-overlay{position:fixed;inset:0;z-index:60;background:#0d2430;color:#fff;display:flex;flex-direction:column}.teach-top{height:64px;border-bottom:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:13px;flex-shrink:0}.teach-top strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw}.teach-mid{display:flex;align-items:center;gap:10px}.teach-pill{font-size:.72rem;border:1px solid rgba(255,255,255,.2);padding:4px 9px;border-radius:7px;color:#d5e7e2}.teach-top .btn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}.teach-content{flex:1;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:30px 7vw}.teach-slide{width:min(1030px,100%);max-height:100%;overflow-y:auto;background:#fafcf9;color:var(--ink);border-radius:22px;padding:clamp(24px,4vw,57px);box-shadow:0 18px 60px rgba(0,0,0,.19);min-height:55%;display:flex;flex-direction:column;justify-content:center}.teach-slide .eyebrow{font-size:.82rem}.teach-slide h2{font:600 clamp(2.15rem,4.6vw,4.7rem)/1.17 Georgia,serif;letter-spacing:-.035em;margin:16px 0 27px}.teach-slide .slide-body{font-size:clamp(1.1rem,2vw,1.8rem);line-height:1.62;max-width:900px}.teach-slide .slide-body p{margin:0 0 20px}.teach-slide .slide-vocab{display:grid;grid-template-columns:1fr 1fr;gap:14px}.teach-slide .vocab-card{background:#eaf5ef}.teach-slide .slide-questions{display:grid;gap:20px;margin:0;padding:0;list-style:none}.teach-slide .slide-questions li{font-size:clamp(1.25rem,2.5vw,2.2rem);line-height:1.42;display:flex;align-items:flex-start;gap:15px}.teach-slide .slide-questions li span:first-child{color:#0d8b7a;font-size:.85em;font-weight:800}.teach-slide .slide-questions small{display:block;font-size:.54em;color:#2d806a;background:#e9f7ee;padding:5px 10px;border-radius:6px;margin-top:8px;width:fit-content}.teach-bottom{height:72px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:15px}.teach-bottom .btn{background:rgba(255,255,255,.12);color:white;border-color:rgba(255,255,255,.2)}.teach-count{color:#a8c3bd;font-weight:750;font-size:.9rem}.teach-progress{height:3px;background:#294a4d;position:absolute;bottom:72px;left:0;right:0}.teach-progress > div{height:100%;background:#63d5b8;transition:width .2s}.shadow-layout{display:grid;grid-template-columns:1fr 298px;gap:24px;padding:36px 0 64px}.shadow-sentence{font:500 clamp(1.6rem,3vw,2.5rem)/1.5 Georgia,serif;letter-spacing:-.012em;margin:25px 0}.shadow-controls{display:flex;flex-wrap:wrap;gap:9px}.wavebox{background:#f3f8f5;border:1px solid var(--line);height:74px;border-radius:13px;display:flex;justify-content:center;align-items:center;gap:4px;margin:18px 0}.wavebox i{display:block;width:5px;background:#60c8aa;border-radius:8px;height:calc(9px + var(--n)*2px)}.rec-status{font-size:.88rem;color:var(--muted);margin:12px 0;min-height:22px}.shadow-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.toast{position:fixed;z-index:80;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;box-shadow:var(--shadow);border-radius:11px;padding:12px 19px;max-width:calc(100vw - 30px);font-size:.88rem}.empty-state h3{color:var(--ink)}
@media(max-width:950px){.hero-grid{gap:24px}.detail-layout,.shadow-layout,.import-layout{grid-template-columns:1fr}.side-sticky{position:static}.cards{grid-template-columns:repeat(2,1fr)}.feature-strip{grid-template-columns:1fr}.hero{padding:64px 0}.hero-preview{transform:none}.teach-slide{min-height:65%}}
@media(max-width:680px){.wrap{padding:0 17px}.header-inner{height:64px}.brand{font-size:14px}.brand-symbol{height:37px;width:37px}.mobile-menu{display:block}.top-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--ink);padding:10px 20px 20px;flex-direction:column;align-items:stretch}.top-nav.open{display:flex}.hero-grid{grid-template-columns:1fr}.hero-preview{max-width:420px}.hero{padding:55px 0 60px}.hero h1{font-size:3rem}.hero p{font-size:.95rem}.section{padding:40px 0}.section-heading{align-items:start;flex-direction:column;gap:9px}.section-heading h2{font-size:1.95rem}.cards{grid-template-columns:1fr}.card-photo{height:210px}.page-head{padding:35px 0 25px}.detail-layout{padding-top:26px}.detail h1{font-size:2.4rem}.paper{padding:21px 19px}.vocab-list{grid-template-columns:1fr}.article-photo{height:225px}.footer-inner{flex-direction:column;gap:5px}.teach-top{padding:0 12px;height:55px}.teach-top strong{max-width:140px;font-size:.73rem}.teach-top .btn{padding:7px 10px}.teach-mid{gap:4px}.teach-pill{display:none}.teach-content{padding:16px 10px}.teach-slide{padding:24px 20px;border-radius:12px}.teach-slide h2{font-size:2.25rem}.teach-slide .slide-vocab{grid-template-columns:1fr}.teach-bottom{padding:0 13px;height:65px}.teach-progress{bottom:65px}.teach-bottom .btn{padding:9px}.teach-count{font-size:.76rem}.library-tools{flex-direction:column}.search,.select{width:100%}.result-count{width:100%}.shadow-sentence{font-size:1.7rem}}

/* ESL VALLEY BRAND IDENTITY SYSTEM · v0.2 -------------------------------- */
:root{
 --ink:#1C3A27;--ink-soft:#47534C;--muted:#67706B;--brand:#1C3A27;
 --brand-dark:#142D20;--mint:#EBF0E9;--cream:#FAF7F2;--wash:#F3F1EB;
 --line:#E2DFD7;--white:#fff;--orange:#C86D51;
 --shadow:0 12px 34px rgba(28,58,39,.075);--r:9px;
}
body{color:#2B2B2B;font-family:Inter,"Work Sans",system-ui,sans-serif;background:var(--cream)}
h1,h2,h3,h4,.shadow-sentence{color:var(--ink)}
.site-header{background:var(--cream);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 3px 18px rgba(28,58,39,.035)}
.header-inner{height:84px}
.brand{letter-spacing:.18em;font-size:17px;font-weight:400;gap:12px;color:var(--ink)}
.brand-mark{display:block;object-fit:contain;height:45px;width:44px;flex-shrink:0}
.brand b{font-weight:500;color:var(--ink)}
.brand small{color:#64736A;font-size:9px;letter-spacing:.18em;font-weight:600;margin-top:7px}
.top-nav a{color:var(--ink);font-size:.9rem;font-weight:600}
.top-nav a:hover,.top-nav a.active{background:#E9EEE7;color:var(--ink)}
.mobile-menu{color:var(--ink);border-color:#BBC9BB}
.eyebrow{color:var(--brand);letter-spacing:.18em;font-weight:800}
.hero{background:var(--cream);color:var(--ink);padding:86px 0 91px;border-bottom:1px solid var(--line)}
.hero:after{position:absolute;right:-7%;top:-33%;width:74%;height:145%;border:0;border-radius:0;opacity:.53;background-image:url('assets/contours.svg');background-repeat:no-repeat;background-size:contain;background-position:center right;pointer-events:none}
.hero-grid{z-index:1;gap:70px}
.hero .eyebrow{color:var(--orange)}
.hero h1{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(3rem,5.1vw,5.4rem);letter-spacing:-.045em;color:var(--ink)}
.hero h1 em{color:var(--orange);font-style:italic}
.hero p{color:#46574B;line-height:1.8}
.hero p.help-note{color:#667466!important;letter-spacing:.12em;font-size:.7rem}
.hero-cta .btn-light{border:1px solid #CAD2C8;background:rgba(255,255,255,.8);color:var(--ink)}
.hero-cta .btn-light:hover{background:#fff}
.hero-preview{transform:rotate(1deg);border:1px solid var(--line);border-radius:12px;box-shadow:0 25px 70px rgba(30,49,33,.12)}
.preview-photo{border-radius:7px}
.preview-bottom h3{font-family:"Playfair Display",Georgia,serif;font-size:1.25rem}
.btn{border-radius:8px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:#2D5036}
.btn-dark{background:var(--brand);color:white}
.btn-light:hover,.btn-ghost:hover{background:#F1F1EA}
.section{background:var(--cream)}
.section-heading h2,.page-head h1,.detail h1,.paper h2,.content-card h3,.teach-slide h2,.discussion-part h3,.side-panel h3{font-family:"Playfair Display",Georgia,serif;color:var(--ink);font-weight:600}
.section-heading h2{font-size:2.3rem}
.page-head{background:#F0F2EB;padding:52px 0 38px}
.page-head p{color:#506152}
.content-card{border-radius:10px;box-shadow:0 6px 20px rgba(28,58,39,.045);transition:transform .18s ease,box-shadow .18s ease}
.content-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(28,58,39,.12)}
.content-card h3{line-height:1.32;letter-spacing:-.018em}
.card-photo,.article-photo,.preview-photo{background:#94A896}
.photo-fallback{background:radial-gradient(ellipse at 10% 20%,rgba(250,247,242,.3),transparent 60%),linear-gradient(135deg,#94A896 5%,#1C3A27 96%);color:#FAF7F2}
.content-card .card-photo:has(.photo-fallback):not(:has(img)) .photo-fallback{background-image:url('assets/contours.svg'),linear-gradient(145deg,#94A896,#1C3A27);background-blend-mode:screen,normal;background-position:center;background-size:cover}
.tag{background:#E8EEE7;color:var(--brand);border-radius:5px}
.tag-orange{background:#F8EAE4;color:#A14F35}
.level-chip{border-radius:5px}
.level-chip.active{background:#1C3A27;color:#fff}
.filter-pill.active{background:#1C3A27;color:#fff}
.filter-pill:hover{border-color:#94A896}
.arrow-link{color:#1C3A27}
.feature{background:#F0F3ED}
.feature-strip{gap:18px}
.paper,.side-panel{background:#fff;border:1px solid var(--line);box-shadow:0 3px 16px rgba(28,58,39,.025)}
.q-starter{color:#1C3A27;background:#E7EEE5}
.notice{color:#455647;background:#EFF2EB;border-left-color:#C86D51}
.citation-mark,.vocab-pron{color:#B36146}
.teaching-overlay{background:#203D2B}
.teach-slide{background:#FAF7F2;color:#2B2B2B;border-radius:13px;border:1px solid #DEDCD2;box-shadow:0 20px 60px rgba(0,0,0,.16)}
.teach-slide .slide-questions li span:first-child{color:#C86D51}
.teach-slide .slide-questions small{color:#1C3A27;background:#E8EEE7}
.teach-slide .vocab-card{background:#EEF1E9}
.teach-progress{background:#426047}
.teach-progress>div{background:#C86D51}
.teach-top .btn,.teach-bottom .btn{border-radius:7px}
.site-footer{background:#EBEEE7;color:#526256}
@media(max-width:950px){.hero-grid{gap:30px}.hero-preview{transform:none}}
@media(max-width:680px){.header-inner{height:67px}.brand-mark{height:37px;width:37px}.brand{font-size:13px;gap:8px}.brand small{font-size:7.5px}.hero{padding:61px 0}.hero:after{opacity:.22;width:120%;height:150%;right:-40%}.hero h1{font-size:clamp(2.5rem,10vw,3.3rem)}.page-head{padding:35px 0 26px}.section-heading h2{font-size:1.95rem}}

/* ESL Valley v0.3 — continuous classroom presentation and inline listening */
.section-label{color:#8d5947;font-weight:800;letter-spacing:.15em;font-size:.67rem;margin-bottom:5px}
.paragraph-with-audio{display:flex;align-items:flex-start;gap:13px;max-width:100%}
.paragraph-with-audio .reading-paragraph{margin:0 0 21px;flex:1;min-width:0;color:#2B2B2B}
.paragraph-with-audio:last-child .reading-paragraph{margin-bottom:0}
.inline-play{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:35px;height:35px;border-radius:50%;border:1px solid #b4c4b5;background:#eaf0e8;color:#1C3A27;cursor:pointer;transition:background .15s,transform .15s;vertical-align:middle}
.inline-play:hover{background:#d4e2d5;transform:scale(1.04)}
.inline-play:focus-visible{outline:3px solid #C86D51;outline-offset:3px}
.inline-play svg{display:block;margin-left:2px}
.vocab-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vocab-head .vocab-pos{margin-left:0}
.vocab-head .inline-play{height:27px;width:27px;margin-left:auto}
.vocab-head .inline-play svg{height:12px;width:12px}
.vocab-card{background:#edf1ea}

.teaching-overlay{background:#1C3A27;overflow:hidden;min-height:0}
.teach-top{background:#1C3A27;height:70px;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(14px,2.2vw,38px);border-bottom:1px solid rgba(250,247,242,.22)}
.teach-top .teach-article-name{color:#f5f4ec;font-size:clamp(.7rem,1.05vw,.93rem);font-weight:600;max-width:32vw;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.teach-mid{display:flex;align-items:center;justify-content:center;gap:24px;min-width:0}
.teach-brand{display:flex;align-items:center;gap:10px;color:#FAF7F2;letter-spacing:.15em;white-space:nowrap;font-size:.86rem;font-weight:400}
.teach-wordmark b{font-weight:700}
.teach-brand-icon{height:38px;width:38px;border-radius:7px;background:#FAF7F2;display:grid;place-items:center}
.teach-brand-icon img{height:29px;width:29px;object-fit:contain}
.teach-mid .levels{gap:5px;flex-wrap:nowrap}
.teach-mid .level-chip{background:transparent;color:#FAF7F2;border:1px solid rgba(250,247,242,.36);border-radius:6px;padding:7px 10px;font-size:.77rem;font-weight:750}
.teach-mid .level-chip.active{background:#FAF7F2;color:#1C3A27;border-color:#FAF7F2}
.teach-top .btn{background:transparent;color:#FAF7F2;border:1px solid rgba(250,247,242,.4);white-space:nowrap}
.teach-top .btn:hover{background:rgba(250,247,242,.15)}
.teach-content{background:#FAF7F2;flex:1;min-height:0;padding:0;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden}
.teach-slide{background:#FAF7F2;color:#2B2B2B;display:block;flex:1;width:100%;height:100%;max-width:none;max-height:none;min-height:0;overflow-y:auto;border:0;border-radius:0;box-shadow:none;padding:clamp(24px,4.6vh,62px) clamp(24px,6.5vw,116px)}
.teach-inner{width:100%;max-width:1260px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}
.teach-slide h2{color:#1C3A27;font-family:"Playfair Display",Georgia,serif;font-size:clamp(2.15rem,4.3vw,4.35rem);margin:14px 0 25px;line-height:1.12;letter-spacing:-.038em}
.teach-slide .eyebrow{font-size:.78rem;color:#81513e}
.teach-slide .slide-body{max-width:1160px;font-size:clamp(1.15rem,1.9vw,1.8rem);line-height:1.6}
.teach-slide .slide-body .paragraph-with-audio{align-items:flex-start;gap:17px;margin:16px 0 22px}
.teach-slide .slide-body .reading-paragraph{font-size:inherit;line-height:1.6;margin:0}
.teach-slide .slide-body .inline-play{height:44px;width:44px;margin-top:6px}
.teach-slide .slide-vocab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:1180px}
.teach-slide .vocab-card{background:#e9eee6;padding:clamp(12px,1.5vw,23px);border-radius:11px}
.teach-slide .vocab-head .vocab-word{font-size:clamp(1.03rem,1.35vw,1.38rem)}
.teach-slide .vocab-meaning{font-size:clamp(.93rem,1.1vw,1.1rem)}
.teach-slide .vocab-example{font-size:clamp(.87rem,1vw,1.02rem)}
.teach-slide .vocab-pron{font-size:clamp(.8rem,.95vw,1rem)}
.teach-slide .slide-questions{max-width:1200px;gap:24px}
.teach-slide .slide-questions li{font-size:clamp(1.35rem,2.4vw,2.65rem)}
.teach-slide .slide-questions li span:first-child{color:#C86D51}
.slide-title-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.9fr);gap:clamp(22px,4vw,65px);align-items:center}
.slide-title-grid .slide-title{font-size:clamp(2.35rem,4.9vw,5.5rem);line-height:1.14;margin:18px 0}
.slide-subtitle{color:#526454;font-size:clamp(1.05rem,1.6vw,1.4rem)}
.slide-cover{width:100%;aspect-ratio:4/3;max-height:min(50vh,500px);border-radius:12px;position:relative;overflow:hidden;box-shadow:0 5px 25px rgba(28,58,39,.08);background:#94A896}
.slide-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.teach-bottom{background:#1C3A27;color:#fff;height:74px;min-height:74px;padding:0 clamp(14px,2.2vw,38px);display:grid;grid-template-columns:1fr auto 1fr;gap:14px;border-top:1px solid rgba(250,247,242,.22);align-items:center}
.teach-bottom .btn{background:rgba(250,247,242,.1);border:1px solid rgba(250,247,242,.25);color:#fff;width:fit-content}
.teach-bottom .btn:hover{background:rgba(250,247,242,.2)}
.teach-bottom .btn:last-of-type{justify-self:end}
.teach-bottom .teach-count{color:#e7eee4;font-weight:700;letter-spacing:.04em}
.teach-progress{bottom:74px;height:3px;background:rgba(250,247,242,.18)}
.teach-progress > div{background:#C86D51}
@media(max-width:900px){.teach-mid{gap:12px}.teach-top .teach-article-name{max-width:24vw}.slide-title-grid{grid-template-columns:1fr 1fr}.teach-slide{padding:28px 35px}}
@media(max-width:680px){
 .teach-top{height:62px;min-height:62px;padding:0 11px;gap:8px}
 .teach-top .teach-article-name{display:none}
 .teach-mid{justify-content:space-between;flex:1;gap:8px}
 .teach-brand{gap:5px;letter-spacing:.07em;font-size:.68rem}
 .teach-brand-icon{height:29px;width:29px}
 .teach-brand-icon img{height:23px;width:23px}
 .teach-mid .level-chip{padding:5px 6px;font-size:.69rem}
 .teach-top .btn{padding:7px 8px;font-size:.73rem}
 .teach-slide{padding:25px 19px}
 .teach-slide h2{font-size:clamp(2rem,7.7vw,3rem);margin:12px 0 18px}
 .teach-slide .slide-body{font-size:1.17rem}
 .teach-slide .slide-vocab{grid-template-columns:1fr}
 .teach-slide .vocab-card{padding:12px 14px}
 .slide-title-grid{grid-template-columns:1fr;gap:18px}
 .slide-title-grid .slide-title{font-size:clamp(2.25rem,8vw,3.5rem)}
 .slide-cover{max-height:29vh;aspect-ratio:16/8}
 .teach-bottom{height:64px;min-height:64px;padding:0 12px}
 .teach-bottom .btn{padding:8px 11px;font-size:.8rem}
 .teach-progress{bottom:64px}
 .teach-slide .slide-body .inline-play{height:36px;width:36px;margin-top:2px}
 .teach-slide .slide-body .paragraph-with-audio{gap:9px}
}
@media(prefers-reduced-motion:reduce){.inline-play{transition:none}}