/* Header, menu, footer and feedback form shared by every page (site, blog, privacy).
   Loaded after site.css / blog.css. */
.skip{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;font-size:.9rem}
.skip:focus{left:16px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;gap:24px;height:76px}
.top .wm{margin-right:auto}

/* the PLAYABLE ZERIND logo */
.wm{display:inline-flex;align-items:center;text-decoration:none}
.wm img{display:block;height:18px;width:auto}
footer .wm img{height:16px}

.top nav{display:flex;align-items:center;gap:30px}
.top nav a{font-size:.95rem;color:var(--ink-2);text-decoration:none;padding-block:6px;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--cyan)}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{position:absolute;left:12px;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-btn span{top:21px}
.menu-btn span::before,.menu-btn span::after{content:"";left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:980px){
  .menu-btn{display:block}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(14,26,36,.25);padding:8px clamp(16px,4vw,48px) 16px}
  .top nav.open{display:flex}
  .top nav a{font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line)}
  .top nav a:last-child{border-bottom:0}
  .top nav a[aria-current="page"]{border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--cyan);padding-left:12px}
}
@media(max-width:520px){
  .top .wrap{gap:10px}
  .top .wm img{height:15px}
  .top .btn{display:none}
}

footer{border-top:1px solid var(--line);background:#fff}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) auto auto;gap:28px 56px;align-items:start;padding-block:44px;font-size:.88rem;color:var(--muted)}
footer .f-brand{display:grid;gap:14px;max-width:24em}
footer nav{display:grid;gap:10px}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--ink)}
@media(max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer .f-brand{grid-column:1/-1}}

/* feedback form */
.fbk{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45)}
.fbk[hidden]{display:none}
.fbk form{width:min(420px,100%);background:#fff;border-radius:18px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;box-shadow:0 25px 50px -12px rgba(0,0,0,.35)}
.fbk h3{font-size:1.05rem}
.fbk p{font-size:.88rem;color:var(--muted)}
.fbk textarea,.fbk input{font:400 1rem/1.4 var(--f);color:var(--ink);background:#fff;border:1px solid #cfd7dd;border-radius:10px;padding:12px 14px;width:100%}
.fbk textarea{min-height:110px;resize:vertical}
.fbk .row{display:flex;justify-content:flex-end;gap:8px}
.fbk .hp{position:absolute;left:-9999px}
.fbk .status{color:var(--blue);font-size:.95rem}