.site-header{position:sticky;top:0;z-index:5000;background:linear-gradient(to bottom,#f4e7d4e0,#e8d2b8e0);backdrop-filter:blur(6px) saturate(1.05);border-bottom:1px solid #b8926a55;box-shadow:0 2px 6px #0000002e;transition:box-shadow .25s ease} .site-header.scrolled{box-shadow:0 4px 14px #00000040} body.night .site-header{background:radial-gradient(circle at 50% 0%,#4a3825e0 0%,#1b140de0 70%);backdrop-filter:blur(8px) brightness(0.9);border-bottom:1px solid #ffdc964d;box-shadow:0 2px 8px #000000b3} .site-header .wrap{max-width:1200px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg)} .brand img{width:2.4rem;height:2.4rem;object-fit:contain} .brand-name{font-family:"Playfair Display",serif;font-size:1.25rem;font-weight:600;letter-spacing:.015em} body.night .brand{color:#f5e4b2} .header-actions{display:flex;align-items:center;gap:.4rem} .header-btn,.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border:1px solid var(--bord);border-radius:.5rem;background:var(--card);cursor:pointer;transition:background .2s ease,transform .2s ease} .header-btn:hover,.theme-toggle:hover,.menu-toggle:hover{background:var(--card);transform:translateY(-1px)} .menu-toggle::before,.menu-toggle::after,.menu-toggle span{content:"";display:block;width:1.25rem;height:2px;background:var(--fg);border-radius:2px;transition:transform .35s ease,opacity .3s ease} .menu-toggle::before{transform:translateY(-6px)} .menu-toggle::after{transform:translateY(6px)} .menu-toggle.active::before{transform:rotate(45deg)} .menu-toggle.active::after{transform:rotate(-45deg)} .menu-toggle.active span{opacity:0} body.night .menu-toggle::before,body.night .menu-toggle::after,body.night .menu-toggle span{background:#f6eedd} .header-tools{display:flex;align-items:center;gap:.75rem} .cat-jump select,.header-tools input[type="search"],.header-tools button[type="submit"]{font-size:.95rem;padding:.35rem .65rem;border:1px solid #503c284d;border-radius:.5rem;background:#ffffffc7;color:#332a1a;transition:all .25s ease} .header-tools input[type="search"]{max-width:200px} .header-tools input[type="search"]:focus,.cat-jump select:focus{background:#fffdf9;border-color:#503c28b3;box-shadow:0 0 0 2px #b48c5a4d} body.night .header-tools select,body.night .header-tools input[type="search"]{background:#281e14e6;color:#f6e3b1;border-color:#dcbe8c4d} @media (max-width:840px) { .header-tools{flex-wrap:wrap;justify-content:center;gap:.5rem .75rem} .header-tools input[type="search"]{width:70%;max-width:320px} } @media (max-width:700px) { .site-header .wrap{flex-wrap:wrap;justify-content:center;text-align:center} .header-actions{justify-content:center;order:3} .header-tools{width:100%;flex-direction:column;gap:.6rem;order:4} .brand img{width:2rem;height:2rem} .brand-name{font-size:1.1rem} } .menu-toggle::before, .menu-toggle::after, .menu-toggle span { display:none !important;content:none !important;} .header-actions .theme-toggle, .header-actions .menu-toggle { width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:.5rem;border:1px solid var(--bord);background:var(--card);padding:0;cursor:pointer;transition:background .2s ease, transform .2s ease, box-shadow .25s ease;} .header-actions .theme-toggle:hover, .header-actions .menu-toggle:hover { background:var(--card);transform:translateY(-1px);} body.night .theme-toggle, body.night .menu-toggle { background-color:#ffffff0d;border-color:#ffffff14;} .theme-toggle::before { content:"🌞";font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;transform:none !important;} body.night .theme-toggle::before { content:"🌙";} .menu-toggle { font-size:1.2rem;line-height:1;display:grid;place-items:center;} @media (max-width:700px) { .site-header .wrap { display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.4rem;padding-bottom:.4rem;} .site-header .brand { display:flex;align-items:center;gap:.6rem;flex-shrink:1;min-width:0;} .site-header .brand-name { font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .site-header .header-actions { display:flex !important;flex-direction:row !important;align-items:center;gap:.45rem;} .site-header .header-tools { display:none !important;} .theme-toggle, #menuToggle.header-btn { width:2.1rem;height:2.1rem;min-width:2.1rem;min-height:2.1rem;border-radius:.45rem;padding:0;} } @media (max-width:480px) { .unified-head { flex-direction:column !important;align-items:stretch !important;gap:.6rem !important;} .head-left { width:100% !important;flex-direction:column !important;align-items:flex-start !important;gap:.4rem !important;} .ornament-meta-row { flex-wrap:wrap;gap:.4rem .6rem;width:100%;} .head-right { width:100% !important;display:flex !important;gap:.45rem !important;overflow-x:auto !important;padding-bottom:.3rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .head-right::-webkit-scrollbar { display:none;} .head-right .antique-btn { width:1.85rem !important;height:1.85rem !important;font-size:.85rem !important;flex:0 0 auto;} .antique-title { font-size:1.1rem !important;line-height:1.2 !important;} }