/* Shared public top nav. Used by the homepage and every article page. */
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block}
.nav{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);height:var(--nav-h,64px);display:flex;align-items:center;padding:0 var(--s-4,16px);gap:var(--s-4,16px)}
[data-theme="dark"] .nav{background:rgba(19,16,12,.85)}
@media(min-width:768px){.nav{padding:0 var(--s-6,24px)}}
.nav-brand{display:flex;align-items:center;gap:var(--s-2,8px);font-family:var(--font-d,"Playfair Display",serif);font-size:1.375rem;font-weight:500;color:var(--text);flex:1;white-space:nowrap;letter-spacing:0;text-decoration:none}
.nav-brand em{font-style:italic;color:var(--accent);font-weight:600}
.nav-brand .table-badge{display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:#fff;padding:4px 10px;border-radius:var(--r-full,999px);font-size:.7rem;font-weight:600;font-family:var(--font-b,Sarabun,sans-serif);margin-left:var(--s-2,8px)}
.nav-links{display:none;gap:var(--s-1,4px)}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links button,.nav-links a{padding:var(--s-2,8px) var(--s-4,16px);border-radius:var(--r-full,999px);font-size:.875rem;font-weight:500;color:var(--text-2,var(--muted));transition:background var(--dur-fast,.16s) var(--ease,ease),color var(--dur-fast,.16s) var(--ease,ease);text-decoration:none;border:0;background:transparent;font:inherit;cursor:pointer}
.nav-links button.on,.nav-links a.on{background:var(--text);color:var(--bg)}
.nav-links button:not(.on):hover,.nav-links a:not(.on):hover{background:var(--surface-2,var(--surface2));color:var(--text)}
.nav-links .eg-site{color:var(--accent);border:1px solid var(--border);background:var(--surface)}
.nav-actions{display:flex;gap:var(--s-2,8px);align-items:center}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-full,999px);background:var(--surface-2,var(--surface2));color:var(--text);position:relative;transition:background var(--dur-fast,.16s) var(--ease,ease),transform var(--dur-fast,.16s) var(--ease,ease);border:0;cursor:pointer}
.nav-btn:hover{background:var(--accent-bg,var(--surface2));transform:translateY(-1px)}
.nav-btn:active{transform:translateY(0)}
.nav-eg{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:40px;padding:0 12px;border-radius:var(--r-full,999px);background:var(--accent);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-decoration:none;transition:background var(--dur-fast,.16s) var(--ease,ease),transform var(--dur-fast,.16s) var(--ease,ease)}
.nav-eg:hover{background:var(--accent-hover,var(--accent));transform:translateY(-1px)}
.lang-pill{display:inline-flex;align-items:center;background:var(--surface-2,var(--surface2));border:1px solid var(--border);border-radius:var(--r-full,999px);padding:2px;gap:2px}
.nav-actions .lang-pill{display:none}
@media(min-width:768px){.nav-actions .lang-pill{display:inline-flex}}
.lang-pill button{font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:6px 11px;border-radius:var(--r-full,999px);color:var(--text-3,var(--soft));min-width:36px;line-height:1;transition:background var(--dur-fast,.16s) var(--ease,ease),color var(--dur-fast,.16s) var(--ease,ease);border:0;background:transparent;cursor:pointer}
.lang-pill button.on{background:var(--text);color:var(--bg)}
.lang-pill button:not(.on):hover{color:var(--text)}
.lang-pill-drawer{display:flex;margin-top:var(--s-3,12px);width:max-content}
.lang-pill-drawer button{padding:9px 16px;font-size:.8rem}
.cart-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:#fff;border-radius:var(--r-full,999px);font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.nav-ham{display:inline-flex}
@media(min-width:768px){.nav-ham{display:none}}
.nav-drawer{position:fixed;top:var(--nav-h,64px);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg,0 14px 30px rgba(31,22,17,.14));padding:var(--s-4,16px);transform:translateY(-120%);transition:transform var(--dur,.24s) var(--ease,ease);z-index:99}
.nav-drawer.on{transform:translateY(0)}
.nav-drawer button,.nav-drawer a{display:flex;align-items:center;gap:var(--s-3,12px);width:100%;padding:var(--s-3,12px) var(--s-4,16px);border-radius:var(--r-md,8px);font-size:1rem;font-weight:500;color:var(--text-2,var(--muted));text-align:left;text-decoration:none;border:0;background:transparent;font-family:inherit;cursor:pointer}
.nav-drawer button.on,.nav-drawer a.on{background:var(--accent-bg,var(--surface2));color:var(--accent)}
.nav-drawer button:hover,.nav-drawer a:hover{background:var(--surface-2,var(--surface2))}
.nav-drawer .eg-site{color:var(--accent);font-weight:600}