/* public/blog/nav.css: the nav bar shared by the blog and the About page (mockups/blog-nav-r1.html, owner's pick 2026-10-27:
   the slim dark bar with the POKER REALMS wordmark in the middle). Its own colours, so a page with other tokens can use it. */
.nav{--ink:#241a12;--cream:#f6e7c6;--mustard:#e0a72c;--night:#3d2716;position:sticky;top:0;z-index:50;box-sizing:border-box;font-family:"Avenir Next","Trebuchet MS",-apple-system,system-ui,sans-serif;line-height:1.6;min-height:76px;display:flex;align-items:center;gap:26px;padding:12px 22px;background:var(--night);color:var(--cream);font-weight:800;font-size:20px;border-bottom:3px solid var(--ink)}
.nav a{text-decoration:none;color:inherit}
.nav a:not(.home):not(.go):hover{color:var(--mustard)}
.nav .home{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;padding:2px 6px;white-space:nowrap}
.nav .go{margin-left:auto}
/* the links sit about 65% of the way from the left edge to the wordmark, so nobody travels to the far left for them (owner, 2026-10-27); on a phone they stay at the edge */
.nav a[href="/blog"]{margin-left:clamp(0px,calc(32.5% - 92px),calc(50% - 300px))}
/* the wordmark: the logo's lettering (mustard, ink outline, a slight tilt), without the globe; the nav bar's own, see mockups/blog-nav-r1.html */
.word{display:block;font-weight:900;font-size:32px;line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--mustard);transform:rotate(-2deg);
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 3px 0 var(--ink),0 5px 0 var(--ink)}
.word small{display:block;font-size:inherit}
.nav .go{background:var(--mustard);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:6px 24px;box-shadow:0 3px 0 var(--ink)}
.nav .go:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

@media(max-width:420px){.nav{gap:14px;padding:10px 14px;font-size:18px;min-height:68px}.nav a[href="/about"]{display:none}.word{font-size:25px}.nav .go{padding:5px 18px}}