/* Dictionary family alignment: design's watercolor hero and right-hand TOC,
   AI's readable editorial panels. Functional controls live in styles.css. */
:root { --ink:#3c3029; --muted:#746960; --orange:#914621; --rose:#a36542; --line:#e4d7c5; --panel:#fffdf8; }
.word-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.save-card { font-size:11px; padding:5px 10px; border-radius:24px; }
.about-body { padding-top:28px; max-width:1000px; }
.about-body .article { display:block; }
.term-english { overflow-wrap:anywhere; }
.shell { width:min(1280px,calc(100% - 88px)); }
.header { background:#fffcf6; }
.header-inner { gap:28px; min-height:88px; }
.brand { font-size:27px; letter-spacing:.06em; gap:14px; }
.brand svg { width:50px; height:46px; color:var(--orange); flex:none; }
.brand small { font-size:10px; letter-spacing:.04em; font-weight:400; }
.nav { margin-left:auto; gap:28px; font-size:12px; font-weight:600; }
.header-actions { display:flex; align-items:center; gap:24px; }
.header-search { display:grid; place-items:center; }
.header-search svg { width:23px; height:23px; }
.header-saved { display:flex; gap:8px; align-items:center; border:1px solid #d5bfa9; border-radius:30px; padding:8px 14px; color:var(--orange); font-size:11px; text-decoration:none; white-space:nowrap; }
.header-saved svg { width:19px; height:19px; }
.mobile-menu { display:none; position:relative; }
.hero { position:relative; isolation:isolate; background:#faf4e8; border-top:0; border-bottom:1px solid var(--line); }
.hero .shell { display:block; min-height:0; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; z-index:-2; }
.hero:after { z-index:-1; background:linear-gradient(90deg,#faf7f040 0%,#faf7f0dc 39%,#faf7f0ae 54%,transparent 68%); }
.home-hero { min-height:570px; }
.hero-inner { position:relative; }
.breadcrumbs { color:#665b4d; font-size:11px; padding:18px 0 0; gap:10px; }
.breadcrumbs a { text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.hero-copy { max-width:800px; padding:15px 0 35px 35px; }
.script-label { font:italic 42px/1.3 Georgia,serif; letter-spacing:.035em; color:var(--rose); margin:8px 0 17px; }
.hero h1 { font:600 clamp(38px,3.65vw,54px)/1.5 var(--serif); color:var(--ink); margin:0; letter-spacing:.02em; }
.hero h1 em { color:var(--orange); font-style:normal; }
.hero-lead { font:600 22px/1.85 var(--serif); color:var(--orange); letter-spacing:.06em; margin:10px 0 0; }
.hero-desc { font:500 15px/2 var(--serif); letter-spacing:.035em; margin:22px 0 0; max-width:680px; }
.search-form { width:min(680px,100%); height:66px; gap:14px; margin:26px 0 0; padding:7px 8px 7px 21px; border:1px solid #ccb9a2; border-radius:99px; background:#fffefaee; box-shadow:0 3px 11px #70514320; }
.search-form svg { width:23px; height:23px; flex:none; color:var(--rose); }
.search-form input { padding:0; font-size:13px; }
.search-form .primary { height:49px; min-width:114px; border:0; border-radius:99px; padding:7px 20px; letter-spacing:.12em; font-size:15px; }
.search-form:focus-within { outline:2px solid var(--rose); outline-offset:3px; }
.quick { margin:15px 8px 0; gap:7px 18px; font-size:11px; color:#5d4d40; }
.quick a { border:0; background:none; padding:0; color:var(--orange); border-radius:0; }
.quick a:hover { text-decoration:underline; }
.hero-note { font-size:10px; margin:12px 8px 0; color:#665b4d; }
.section { padding-top:35px; }
.heading { margin-bottom:20px; }
.heading h2 { color:var(--orange); font:600 27px/1.6 var(--serif); }
.heading p { font-size:12px; }
.heading .eyebrow { display:none; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.category-card { border:1px solid var(--line); border-radius:9px; background:radial-gradient(ellipse at 90% 90%,#eedbb443,transparent 60%),#fffaf1; text-decoration:none; position:relative; padding:23px; min-height:168px; overflow:hidden; }
.category-card>div { position:relative; z-index:1; width:69%; }
.category-card h3 { font:600 20px/1.7 var(--serif); color:var(--orange); margin:0 0 8px; }
.category-card p { font-size:12px; color:var(--muted); line-height:1.8; margin:0 0 13px; }
.category-art { position:absolute; right:-10px; bottom:-7px; width:160px; height:137px; opacity:.8; }
.category-card:hover { border-color:var(--rose); }
.round-arrow { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--rose); color:white; font:24px Georgia; }
.journey { border-radius:10px; }
.journey .step { color:var(--rose); }
.sample-card { border-radius:10px; }
.tag { border:1px solid #e1c9b0; border-radius:99px; background:#f5e7d7cc; color:var(--orange); padding:3px 11px; font-size:11px; text-decoration:none; }
.sample-card h3 { color:var(--orange); }
.practice-strip { background:#f0e6d5; }
.catalog-grid { gap:12px; }
.word { border:1px solid var(--line); padding:18px 20px; border-radius:9px; background:var(--panel); align-self:start; }
.word summary { font:600 18px/1.5 var(--serif); color:var(--orange); }
.word .category-label { margin-top:8px; font:11px var(--sans); }
.word p { font-size:13px; }
.word[open] { border-color:#c4a68b; }
.term-hero { min-height:450px; }
.term-hero .hero-art { object-position:center 70%; }
.term-hero .hero-copy { max-width:760px; padding:5px 0 25px 35px; }
.term-hero .script-label { font-size:36px; margin-top:4px; margin-bottom:10px; }
.term-hero h1 { font-size:clamp(38px,4.3vw,60px); color:var(--orange); line-height:1.35; overflow-wrap:anywhere; }
.term-english { font:24px/1.5 Georgia,var(--serif); color:var(--rose); margin:8px 0 14px; overflow-wrap:anywhere; }
.term-summary { font:500 17px/2 var(--serif); margin:0; max-width:680px; }
.term-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.save-word { background:#fffdf5dc; border:1px solid #d5bfa9; border-radius:30px; font-size:11px; color:var(--orange); padding:5px 14px; }
.term-reading { font-size:10px; color:#685b4c; margin:12px 0 0; }
.saved-msg:empty { display:none; }
.article-layout { grid-template-columns:minmax(0,1fr) 326px; gap:24px; padding-top:24px; }
.article { grid-column:1; grid-row:1; }
.article section { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:26px 30px; margin-bottom:16px; box-shadow:0 3px 12px #49301904; }
.article h2 { color:var(--orange); font:600 26px/1.55 var(--serif); border-bottom:0; padding:0; margin-bottom:16px; }
.section-no { color:var(--rose); font-size:20px; }
.article p { color:#52443a; }
.article .hint,.sources,.article .sources p { font-size:12px; color:var(--muted); }
.meaning-box { background:#f8f0e3; border:0; border-radius:6px; padding:20px 23px; }
.meaning-box p { font-family:var(--serif); font-weight:500; }
.toc { grid-column:2; grid-row:1; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px 22px; top:24px; }
.toc h2 { color:var(--orange); font:600 26px var(--serif); margin:0 0 16px; }
.toc a { display:flex; align-items:center; gap:14px; border-bottom:1px solid #eee2d4; padding:12px 0; font:500 13px var(--serif); color:#634633; }
.toc-number { width:27px; height:27px; border-radius:50%; background:#f1e1d2; display:grid; place-items:center; font:italic 19px Georgia; color:var(--orange); flex:none; }
.toc a b { font:22px Georgia; margin-left:auto; font-weight:400; }
.toc .back { font:12px var(--sans); border-top:0; border-bottom:0; margin-top:12px; padding:12px 0; }
.toc .print-button { background:#fffaf0; font-size:11px; }
.formula { background:#f4e8d5; border-color:#e0c9a6; }
.tip { background:#f1f0e6; border-color:#dedfc9; }
.workbench { border-color:#d6b998; background:#fcf6eb; }
.metric-row { gap:10px; }
.metric { padding:16px; background:#fffaf2; }
.metric strong { font-size:22px; }
.term-footer { padding:17px 2px 32px; margin-top:0; }
.footer { margin-top:26px; }
@media (max-width:1100px) {
 .shell { width:calc(100% - 48px); }
 .header-inner { gap:20px; }
 .brand { font-size:23px; }
 .nav { gap:17px; font-size:11px; }
 .nav a:nth-child(3) { display:none; }
 .header-actions { gap:16px; }
 .hero-copy { max-width:71%; padding-left:18px; }
 .hero h1 { font-size:40px; }
 .hero-lead { font-size:19px; }
 .hero-desc { font-size:13px; }
 .home-hero { min-height:535px; }
 .category-card { padding:18px; }
 .category-card h3 { font-size:17px; }
 .category-art { width:130px; }
 .term-hero .hero-copy { max-width:68%; padding-left:18px; }
 .term-hero h1 { font-size:48px; }
 .term-english { font-size:21px; }
 .term-summary { font-size:15px; }
 .article-layout { grid-template-columns:minmax(0,1fr) 270px; gap:20px; }
 .article section { padding:23px; }
}
@media (max-width:850px) {
 .shell { width:calc(100% - 36px); }
 .nav { display:none; }
 .header-actions { margin-left:auto; }
 .mobile-menu { display:block; }
 .mobile-menu summary { display:grid; gap:5px; padding:10px; cursor:pointer; list-style:none; }
 .mobile-menu summary::-webkit-details-marker { display:none; }
 .mobile-menu summary span { display:block; width:18px; height:1px; background:var(--ink); }
 .mobile-menu nav { position:absolute; z-index:10; right:0; top:40px; min-width:220px; padding:14px 20px; border:1px solid var(--line); background:var(--panel); box-shadow:0 8px 24px #49301917; border-radius:8px; }
 .mobile-menu nav a { display:block; padding:8px 0; font-size:13px; text-decoration:none; }
 .hero-copy { max-width:80%; padding-left:10px; }
 .hero h1 { font-size:35px; }
 .hero:after { background:linear-gradient(90deg,#fff8ed90 0%,#fff8ed66 52%,transparent 86%); }
 .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .term-hero .hero-copy { max-width:78%; padding-left:10px; }
 .article-layout { grid-template-columns:minmax(0,1fr) 220px; gap:16px; }
 .toc { padding:22px 17px; }
 .toc a { font-size:12px; gap:9px; }
 .toc h2 { font-size:23px; }
 .article h2 { font-size:23px; }
}
@media (max-width:600px) {
 .header-inner { min-height:74px; gap:12px; }
 .brand { font-size:22px; gap:8px; letter-spacing:.02em; }
 .brand svg { width:38px; height:38px; }
 .brand small { font-size:8px; }
 .header-actions { gap:12px; }
 .header-saved { padding:7px; width:36px; height:36px; justify-content:center; }
 .header-saved span { display:none; }
 .header-search svg { width:21px; }
 .mobile-menu summary { padding:6px; }
 .hero { display:flex; flex-direction:column; overflow:hidden; }
 .hero-inner { order:1; }
 .hero .shell { min-height:0; }
 .hero-art { position:relative; order:2; width:100%; height:265px; z-index:auto; object-position:72% 65%; margin-top:-1px; mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000); }
 .hero:after { display:none; }
 .home-hero { min-height:0; background:radial-gradient(ellipse at 90% 35%,#edc39b24,transparent 75%),#faf5eb; }
 .breadcrumbs { padding:15px 0 0; font-size:10px; gap:8px; }
 .hero-copy { max-width:100%; width:100%; padding:18px 5px 20px; }
 .script-label { font-size:34px; margin:0 0 15px; }
 .hero h1 { font-size:clamp(23px,6.5vw,37px); line-height:1.5; letter-spacing:0; white-space:nowrap; }
 .hero-lead { font-size:15px; margin:11px 0 0; letter-spacing:.02em; }
 .hero-desc { font-size:12px; letter-spacing:0; margin:18px 0 0; line-height:2; }
 .search-form { height:58px; width:100%; margin-top:22px; padding:5px 6px 5px 13px; gap:9px; }
 .search-form svg { width:20px; height:20px; }
 .search-form input { font-size:16px; }
 .search-form input::placeholder { font-size:11px; }
 .search-form .primary { height:44px; min-width:65px; padding:6px 11px; font-size:13px; }
 .quick { font-size:10px; gap:5px 12px; margin:12px 3px 0; }
 .hero-note { font-size:9px; margin:10px 3px 0; }
 .section { padding-top:30px; }
 .heading h2 { font-size:23px; }
 .heading p { font-size:11px; }
 .category-grid { gap:10px; }
 .category-card { padding:16px 13px; min-height:171px; }
 .category-card>div { width:100%; }
 .category-card h3 { font-size:15px; }
 .category-card p { font-size:11px; max-width:120px; min-height:40px; }
 .category-art { width:93px; height:88px; bottom:-7px; right:-17px; opacity:.5; }
 .round-arrow { width:25px; height:25px; }
 .catalog-grid { gap:10px; }
 .word { padding:17px 18px; }
 .word summary { font-size:18px; }
 .term-hero { min-height:0; background:radial-gradient(ellipse at 90% 35%,#edc39b24,transparent 75%),#faf5eb; }
 .term-hero .hero-copy { max-width:100%; padding:16px 5px 20px; }
 .term-hero .script-label { font-size:31px; margin:0 0 14px; }
 .term-hero h1 { font-size:clamp(29px,8vw,40px); white-space:normal; letter-spacing:.015em; }
 .term-english { font-size:19px; line-height:1.65; margin:8px 0 12px; }
 .term-summary { font-size:15px; line-height:1.9; }
 .term-meta { gap:9px; margin-top:16px; }
 .tag,.save-word { font-size:10px; }
 .term-reading { font-size:9px; margin-top:10px; }
 .term-hero .hero-art { height:220px; object-position:72% 66%; }
 .article-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-top:18px; }
 .article { grid-column:1; grid-row:2; }
 .toc { grid-column:1; grid-row:1; position:static; margin-bottom:0; padding:21px 18px 15px; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
 .toc h2 { grid-column:1/-1; font-size:23px; margin-bottom:13px; }
 .toc a { margin-right:0; padding:10px 0; font-size:12px; }
 .toc a b { display:none; }
 .toc-number { width:24px; height:24px; font-size:17px; }
 .toc .back { grid-column:1/-1; margin-top:8px; }
 .toc .print-button { display:none; }
 .article section { padding:21px 18px; margin-bottom:14px; }
 .article h2 { font-size:22px; line-height:1.6; }
 .section-no { font-size:18px; margin-right:9px; }
 .article p { font-size:16px; line-height:1.9; }
 .article .hint { font-size:12px; }
 .meaning-box { padding:17px; }
 .workbench { padding:19px 16px; }
 .metric { padding:16px; }
 .footer .shell { font-size:11px; }
}
@media print {
 .affiliate-ads { display:none!important; }
 .hero-art,.hero .script-label,.hero .breadcrumbs,.term-meta,.term-reading,.saved-msg { display:none!important; }
 .hero:after { display:none; }
 .hero { min-height:0!important; background:white; display:block; border:0; }
 .hero .shell,.hero-copy,.term-hero .hero-copy { width:100%; max-width:100%; padding:0; }
 .article-layout { display:block; }
 .article section { padding:16px; box-shadow:none; }
 .article p { font-size:12px; }
}