/* ==========================================================================
   shared/public.css — the public screens' chrome (D4, 2026-10-01): the homepage's
   sky, site bar and footer (index.html, B4), shared by sign-in, 404 and
   "What's a frame?". Loaded after ws.css + lens.css. The homepage keeps its own
   copy of these rules; change both together.
   ========================================================================== */
:root{
  --s0:#060511; --s1:#0F0A21; --s2:#160F2F; --s3:#1E163B; --s4:#251D44;
  --pub-sky:linear-gradient(180deg,var(--s0) 0%,var(--s1) 22%,var(--s2) 48%,var(--s3) 76%,var(--s4) 100%);
  --plate:rgba(255,255,255,.045); --plate-2:rgba(255,255,255,.07);
  --rim:rgba(236,238,246,.11); --rim-2:rgba(236,238,246,.2);
}
html,body{background:var(--s0)}
body{margin:0;font:var(--t-read);color:var(--text)}
.pub{background:var(--pub-sky);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}
.pub main{flex:1}
.gutter{padding-inline:max(16px,4vw,env(safe-area-inset-left))}
.inner{max-width:1180px;margin:0 auto}
.pub h1,.pub h2,.pub h3{font-family:var(--font-d);text-wrap:balance;margin:0}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 14px;border-radius:var(--r-md);background:var(--frost);color:var(--on-frost);font:var(--t-ui-strong);text-decoration:none}
.skip:focus{top:12px}
.pub :where(a,button,input,textarea,summary):focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- site bar ---------- */
.site{display:flex;align-items:center;gap:16px;padding-block:20px}
.site .home{display:inline-flex;text-decoration:none;border-radius:8px}
.site .ws-word{font-size:25px}
.site nav{display:flex;gap:22px;margin-left:auto;font:var(--t-ui-strong);color:var(--text-2)}
.site nav a{text-decoration:none;border-radius:6px;color:inherit}
.site nav a:hover{color:var(--text)}
.site .acts{display:flex;gap:8px;align-items:center}
.site .signin{font:var(--t-ui-strong);color:var(--text-2);text-decoration:none;padding:8px 6px;border-radius:6px}
.site .signin:hover{color:var(--text)}
@media (max-width:760px){.site nav{display:none}.site .acts{margin-left:auto}}
@media (max-width:400px){.site .ws-word{font-size:21px}.site .signin{display:none}}

/* ---------- footer ---------- */
.foot{padding-block:28px calc(28px + env(safe-area-inset-bottom));border-top:1px solid rgba(236,238,246,.08);color:var(--text-3);font:var(--t-meta);display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--text-2);text-decoration:none;border-radius:4px}
.foot a:hover{color:var(--text)}

/* ---------- shared type ---------- */
.pub .eyebrow{font:var(--t-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-soft);margin:0}
.pub .h1{font-weight:650;font-size:clamp(34px,5.6vw,60px);line-height:1.02;letter-spacing:-.035em}
.pub .h2{font-weight:650;font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-.025em}
.pub .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--text-2);max-width:56ch;text-wrap:pretty;margin:0}
.pub .lead b{color:var(--text);font-weight:600}
.pub .btns{display:flex;flex-wrap:wrap;gap:10px}