:root{
    --paper:#EDE4CD;
    --paper-alt:#E5D8B4;
    --card:#F6EFDC;
    --ink:#1F2E28;
    --ink-soft:#57685D;
    --brown:#8B6A45;
    --green:#3F6B4F;
    --red:#B8432C;
    --line:#C9BA8F;
    --tabbar-h:44px;
    --header-h:60px;
    --sticky-h:calc(var(--tabbar-h) + var(--header-h));
    --teal:#0E93A0;
    --teal-deep:#0A6B75;
    --gold:#E2A227;
    --coral:#E8623D;
    --display: 'Yeseva One', serif;
    --quote: 'Playfair Display', serif;
    --ui: 'Manrope', sans-serif;
    --body: 'Source Serif 4', serif;
    --mono: 'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;}
  button,input,select,textarea{font-family:inherit;font-size:inherit;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;}
  a{color:inherit;}

  /* image placeholder — swap for real <img> tags on build */
  .img-slot{position:relative;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 55%,var(--gold) 100%);overflow:hidden;display:flex;align-items:flex-end;}
  .img-slot::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 14px);}
  .img-slot .img-tag{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,0.92);background:rgba(0,0,0,0.28);padding:6px 12px;margin:14px;border-radius:2px;}

  .wave-divider{height:34px;width:100%;overflow:hidden;line-height:0;}
  .wave-divider svg{width:100%;height:100%;display:block;}

  /* ---- concept nav (meta, for this mockup doc only) ---- */
  .meta-tabs{position:sticky;top:0;z-index:50;background:var(--teal-deep);display:flex;align-items:center;gap:0;height:var(--tabbar-h);font-family:var(--mono);font-size:12px;letter-spacing:.04em;}
  .meta-tabs button,.meta-tabs a{flex:none;padding:12px 18px;background:transparent;border:none;color:#CDEAEC;cursor:pointer;border-right:1px solid rgba(255,255,255,0.15);text-decoration:none;display:inline-block;}
  .meta-tabs button.active,.meta-tabs a.active{background:var(--paper);color:var(--ink);}
  .meta-tabs .label{margin-left:auto;padding:12px 18px;color:#8FC7CC;}

  .view{display:none;}
  .view.active{display:block;}

  /* ================= HOMEPAGE ================= */
  .site-header{display:flex;align-items:center;justify-content:space-between;padding:22px 48px;border-bottom:1px solid var(--line);position:sticky;top:var(--tabbar-h);z-index:40;background:var(--paper);}
  section[id]{scroll-margin-top:var(--sticky-h);}
  .wordmark{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
  .wordmark b{color:var(--ink);font-weight:600;}
  nav.primary{display:flex;gap:28px;font-family:var(--display);font-size:15px;letter-spacing:.01em;}
  nav.primary a{text-decoration:none;color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent;}
  nav.primary a:hover{color:var(--ink);border-color:var(--teal);}

  .hero{padding:72px 48px 0;max-width:1180px;margin:0 auto;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch;}
  .headword-card{background:var(--card);border:1px solid var(--line);border-right:none;padding:56px 56px;position:relative;}
  .hero .img-slot{border:1px solid var(--line);border-left:none;min-height:340px;}
  .headword-card::before{content:"";position:absolute;left:0;top:32px;bottom:32px;width:2px;background:var(--brown);}
  .accession{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);margin-bottom:18px;}
  .headword{font-family:var(--display);font-weight:400;font-size:clamp(52px,8vw,96px);line-height:.95;margin:0 0 10px;}
  .ipa{font-family:var(--mono);font-size:20px;color:var(--green);margin-bottom:28px;}
  .ipa::before{content:"/";color:var(--ink-soft);}
  .ipa::after{content:"/";color:var(--ink-soft);}
  .gloss{font-family:var(--body);font-size:19px;color:var(--ink-soft);max-width:560px;margin-bottom:8px;}
  .gloss b{color:var(--ink);font-weight:600;font-style:normal;}
  .hero-sub{font-family:var(--body);font-size:15.5px;color:var(--ink-soft);max-width:560px;margin-top:22px;}

  .catalog{padding:44px 48px 96px;max-width:1180px;margin:0 auto;}
  .catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .vol-card{background:var(--paper-alt);border:1px solid var(--line);padding:0 0 34px;position:relative;transition:transform .15s ease;overflow:hidden;}
  .vol-card:hover{transform:translateY(-3px);}
  .vol-card .vol-img{height:140px;}
  .vol-card::after{content:"";position:absolute;left:22px;top:162px;bottom:22px;width:1px;background-image:repeating-linear-gradient(var(--ink) 0 5px, transparent 5px 11px);opacity:.25;}
  .vol-card .vol-num,.vol-card .vol-title,.vol-card .vol-desc,.vol-card .vol-link{position:relative;margin-left:44px;margin-right:34px;}
  .vol-card .vol-num{margin-top:24px;}
  .vol-num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brown);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
  .vol-num .dot{width:6px;height:6px;border-radius:50%;background:var(--brown);}
  .vol-title{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 12px;}
  .vol-desc{color:var(--ink-soft);font-size:15px;margin-bottom:24px;max-width:36ch;}
  .vol-link{font-family:var(--mono);font-size:12.5px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}

  .section{padding:64px 48px;max-width:1180px;margin:0 auto;}
  .section-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);margin-bottom:20px;}
  .about-grid{display:grid;grid-template-columns:280px 1fr 280px;gap:48px;align-items:start;}
  .figure-card{background:var(--card);border:1px solid var(--line);padding:22px;overflow:hidden;}
  .figure-card .name{font-family:var(--display);font-weight:400;font-size:22px;margin:0 0 4px;}
  .figure-card .role{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);}
  .figure-photo{width:calc(100% + 44px);margin:-22px -22px 18px;height:220px;object-fit:cover;display:block;}
  .bio-facts{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);line-height:1.8;}
  .bio-facts b{color:var(--ink);font-weight:600;}
  .bio-facts a{color:var(--teal-deep);}
  .about-text{font-size:16.5px;color:var(--ink-soft);}
  .about-text b{color:var(--ink);}
  .pull-quote{font-family:var(--quote);font-style:italic;font-weight:500;font-size:24px;color:var(--teal-deep);max-width:44ch;margin:22px 0 0;line-height:1.4;position:relative;padding-left:22px;border-left:2px solid var(--gold);}
  .pull-quote cite{display:block;font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-soft);margin-top:10px;letter-spacing:.03em;}

  .resources{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .resource{background:var(--paper);padding:26px 24px;}
  .resource .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:10px;}
  .resource h4{font-family:var(--display);font-size:19px;margin:0 0 8px;font-weight:400;}
  .resource p{font-size:14px;color:var(--ink-soft);margin:0;}
  .resource h4 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);}
  .resource h4 a:hover{border-color:var(--teal);}
  .resource .pub-logo{max-height:26px;margin-bottom:12px;display:block;}

  .site-footer{padding:36px 48px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);}

  /* ================= GRAMMAR READER ================= */
  .reader{display:grid;grid-template-columns:300px 1fr;min-height:640px;}
  .reader-nav{background:var(--paper);border-right:0px solid var(--line);padding:28px 0;position:sticky;top:var(--sticky-h);align-self:start;max-height:calc(100vh - var(--sticky-h));overflow-y:auto;}
  .reader-nav .rn-head{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);padding:0 26px 16px;border-bottom:0px solid var(--line);margin-bottom:8px;}
  .unit{padding:4px 0;}
  .unit-title{font-family:var(--body);font-weight:600;font-size:14.5px;padding:10px 26px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
  .unit-title:hover{background:rgba(139,106,69,0.08);}
  .unit-title .n{font-family:var(--mono);font-size:10.5px;color:var(--brown);margin-right:8px;}
  .unit-items{padding-left:14px;}
  .unit-items a{display:block;padding:6px 26px;font-size:13px;color:var(--ink-soft);text-decoration:none;border-left:2px solid transparent;}
  .unit-items a:hover{color:var(--ink);border-left-color:var(--brown);background:rgba(139,106,69,0.06);}
  .unit-items a.current{color:var(--ink);border-left-color:var(--teal);background:var(--card);font-weight:600;}
  .sub-items a{padding-left:44px;font-size:12.5px;}

  .reader-content{padding:44px 64px;}
  .breadcrumb{font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:22px;}
  .breadcrumb b{color:var(--brown);}
  .rc-title{font-family:var(--display);font-weight:400;font-size:34px;margin:0 0 6px;}
  .rc-source{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line);}
  .rc-body p{font-size:16px;color:var(--ink);max-width:70ch;margin-bottom:18px;}
  .update{color:var(--green);font-weight:600;}
  .footnote-ref{font-family:var(--mono);font-size:11px;color:var(--brown);vertical-align:super;}
  .card-callout{background:var(--card);border-left:3px solid var(--green);padding:16px 20px;margin:26px 0;font-size:14.5px;color:var(--ink-soft);max-width:60ch;}
  .card-callout b{color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:6px;}
  .rc-nav-foot{display:flex;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;}
  .rc-nav-foot a{text-decoration:none;color:var(--ink-soft);}
  .rc-nav-foot a:hover{color:var(--ink);}

  /* ================= DICTIONARY ================= */
  .dict{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - var(--sticky-h));scroll-margin-top:var(--sticky-h);}
  .dict-side{background:var(--paper);border-right:0px solid var(--line);padding:26px;display:flex;flex-direction:column;position:sticky;top:var(--sticky-h);align-self:start;max-height:calc(100vh - var(--sticky-h));overflow-y:auto;}
  .dict-side-head{margin:-26px -26px 20px -26px;padding:26px 26px 16px 26px;border-bottom:0px solid var(--line);}
  .dict-side-head-title{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);}
  .powered{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:block;}
  .dict-side-head .powered{margin-top:6px;margin-bottom:0;}
  .dict-search{position:relative;margin-bottom:22px;}
  .dict-search input{width:100%;padding:14px 16px;font-family:var(--body);font-size:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:2px;outline:none;}
  .dict-search input:focus{border-color:var(--teal);}
  .dict-search .powered{margin-top:8px;}
  .side-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:12px;}
  .alpha-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:28px;}
  .alpha-grid button{font-family:var(--mono);font-size:12.5px;padding:7px 0;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;}
  .alpha-grid button.active,.alpha-grid button:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
  .filter-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .filter-chips span{font-family:var(--mono);font-size:11px;padding:6px 12px;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;}
  .filter-chips span.active{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600;}

  .dict-main{padding:40px 56px;}
  .dict-instructions{font-family:var(--body);font-size:13px;color:var(--ink-soft);opacity:0.7;margin-bottom:6px;}
  .dict-count{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-bottom:20px;}
  .entry-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);padding:22px 26px;margin-bottom:16px;cursor:pointer;}
  .entry-card:hover{border-left-color:var(--gold);}
  .entry-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
  .entry-word{font-family:var(--display);font-weight:400;font-size:17px;}
  .entry-ipa{font-family:var(--mono);font-size:14px;color:var(--teal-deep);}
  .entry-ipa::before{content:"/";}
  .entry-ipa::after{content:"/";}
  .entry-pos{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);padding:2px 8px;}
  .entry-etym,.entry-dialect{font-family:var(--mono);font-size:12px;color:var(--teal-deep);}
  .entry-flag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--brown);}
  .entry-def{margin-top:8px;font-size:15px;color:var(--ink-soft);}
  .entry-def b{color:var(--ink);font-weight:600;}

  .entry-detail{background:var(--card);border:1px solid var(--line);padding:40px 44px;}
  .entry-detail .entry-word{font-size:40px;}
  .entry-detail .entry-ipa{font-size:17px;}
  .audio-btn{font-family:var(--mono);font-size:11px;background:var(--teal);color:#fff;border:none;padding:6px 12px;cursor:pointer;letter-spacing:.04em;}
  .sense{margin-top:0;}
  .sense + .sense{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
  .sense-num{font-family:var(--mono);font-size:11px;color:var(--gold);margin-right:6px;}
  .example{font-family:var(--body);font-style:italic;color:var(--ink-soft);margin-top:8px;font-size:14.5px;padding-left:14px;border-left:2px solid var(--line);}
  .related{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
  .related-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .related-words a{font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--teal-deep);border:1px solid var(--line);padding:5px 10px;}
  .related-words a:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
  .api-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:30px;padding-top:16px;border-top:1px dashed var(--line);}
  .entry-expand{display:none;}
  .entry-card.open .entry-expand{display:block;}
  .entry-card.open{border-left-color:var(--gold);}
  .entry-card .caret{float:right;font-family:var(--mono);font-size:11px;color:var(--ink-soft);}

  #load-more-btn{display:block;margin:8px auto 0;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;background:var(--card);border:1px solid var(--teal);color:var(--teal-deep);padding:10px 26px;cursor:pointer;}
  #load-more-btn:hover{background:var(--teal);color:#fff;}

  /* ================= WORDLIST VIEWER ================= */
  /* Reuses .dict/.dict-side*/.powered/.side-label directly rather than
     inventing a third parallel sidebar system -- these are already
     generic enough (background/padding/sticky mechanics only), same
     conclusion reached when comparing .reader-nav and .dict-side. */
  .wordlist-nav{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:28px;}
  .wordlist-nav button{font-family:var(--mono);font-size:12.5px;text-align:left;margin:7px 0px;padding:10px 10px;width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;}
  .wordlist-nav button.active,.wordlist-nav button:hover{background:var(--teal);border-color:var(--teal);color:#fff;}

  .wl-header{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line);}
  .wl-title{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 6px;}
  .wl-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);}
  .wl-meta a{color:var(--teal-deep);}

  .wl-row{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .wl-row-multiword{opacity:0.45;}
  .wl-group-header{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);margin-top:28px;padding-bottom:8px;border-bottom:1px solid var(--line);}
  .wl-group-header:first-child{margin-top:0;}
  .wl-subgroup-header{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep);margin-top:16px;margin-bottom:4px;}
  .wl-num{font-family:var(--mono);font-size:11px;color:var(--ink-soft);min-width:24px;text-align:right;}
  .wl-prompt{font-family:var(--body);font-weight:600;min-width:160px;color:var(--ink);}
  .wl-prompt .notes{display:block;font-size:11.5px;font-weight:400;font-style:italic;color:var(--ink-soft);}
  .wl-response{flex:1;font-size:15px;color:var(--ink-soft);}
  .wl-response .sp{font-weight:600;color:var(--ink);font-family:var(--display);font-size:17px;}
  .wl-response .lc{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);padding:2px 8px;margin-left:6px;}
  .wl-response .gl{margin-left:6px;}
  .wl-empty{color:var(--ink-soft);opacity:.5;font-style:italic;}

  @media (max-width:900px){
    .about-grid{grid-template-columns:1fr;}
    .catalog-grid{grid-template-columns:1fr;}
    .resources{grid-template-columns:1fr;}
    .reader{grid-template-columns:1fr;}
  }