/* brand-pass.css — site-wide navigation strip and readability floor.
Added 2026-08-21. Purely additive: this file overrides, it never edits
existing rules, so removing the one directly under , which is why the menu sat in a
different place and did not stick there. So this block carries the full
layout, not just the colour overrides: on those pages there is nothing
underneath it to inherit from. */
body > .bar{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:1rem !important;
padding-left:clamp(1rem,4vw,3rem) !important;
padding-right:clamp(1rem,4vw,3rem) !important;
background:var(--navy-deep) !important;
color:var(--d-ink) !important;
border-bottom:1px solid rgba(194,118,79,.28) !important;
padding-top:.62rem !important; padding-bottom:.62rem !important;
position:sticky !important; top:0 !important; z-index:20 !important;
}
body > .bar .brand,
body > .bar .brand a{
color:var(--d-ink) !important;
font-family:var(--serif) !important;
font-size:1.12rem !important;
font-weight:600 !important;
letter-spacing:.01em !important;
}
/* The full .nav base, not just overrides. vitalybook-about.html defines no
.nav rule of its own — the other pages each carry one inline — so a
stylesheet that only overrode gap and size left that page's menu with no
flex layout and the body serif instead of the mono face. Same failure as
the book pages having no .bar: this file has to stand alone. */
body > .bar .nav{
display:flex !important;
align-items:center;
flex-wrap:wrap;
font-family:var(--type) !important;
gap:1.05rem !important;
font-size:.74rem !important;
line-height:1.2;
}
body > .bar .nav a{ text-decoration:none !important; white-space:nowrap; }
body > .bar .brand{
display:flex; align-items:center; line-height:1;
}
body > .bar .brand a{ text-decoration:none !important; }
body > .bar .nav a{color:rgba(238,231,216,.72) !important;display:inline-flex;align-items:center;gap:.4rem}
body > .bar .nav a:hover{color:var(--gold) !important}
body > .bar .nav a[aria-current="page"]{color:#fff !important}
/* the coming-soon tag, same hard-offset language as the site's buttons */
body > .bar .nav .tag{
font-family:var(--type);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
background:var(--rust);color:#fff;border-radius:2px;padding:.14rem .38rem;
box-shadow:2px 2px 0 rgba(8,14,26,.45);
}
@media(max-width:620px){
body > .bar{flex-wrap:wrap;justify-content:center !important}
body > .bar .nav{gap:.8rem !important;font-size:.74rem !important;flex-wrap:wrap;justify-content:center}
}
/* ---- 2. readability floor for text people actually read ---- */
.fineprint{font-size:.78rem !important;line-height:1.75 !important}
.stamp{font-size:.72rem !important}
.stamp small{font-size:.68rem !important}
.sx-stamp{font-size:.72rem !important}
.sx-stamp small{font-size:.68rem !important}
.counter{font-size:.74rem !important}
.pill{font-size:.72rem !important}
.firstline-lab{font-size:.72rem !important}
.snip figcaption{font-size:.74rem !important;line-height:1.7 !important}
.storycard figcaption{font-size:.74rem !important;line-height:1.7 !important}
.storycard figcaption b{font-size:.74rem !important}
.arc-h{font-size:.72rem !important}
.arc-note{font-size:.74rem !important;line-height:1.7 !important}
.arc-list .d{font-size:.72rem !important}
.cell span{font-size:.72rem !important}
.term i{font-size:.74rem !important}
.sx-hint{font-size:.76rem !important;line-height:1.7 !important}
/* an interactive control was shipping at roughly 9px — this is a tap target,
not decoration */
.themes button{font-size:.74rem !important;padding:.42rem .72rem !important}
/* footer social icons take the on-dark token; the light-mode --ink-2 on a
navy band was dark-on-dark */
.ft-social a{color:var(--d-ink-2) !important}
/* Sticky needs a containing block that does not clip. If any ancestor sets
overflow or transform, position:sticky silently degrades to static — which
is the usual cause of "the menu scrolls away on some pages". */
html,body{overflow-x:clip}
body{overflow-y:visible}
/* Fallback: a page whose nav was never wrapped in .bar still gets the strip,
so the bar can never be missing entirely. */
body > nav.nav{
position:sticky;top:0;z-index:20;
display:flex;align-items:center;gap:1.05rem;flex-wrap:wrap;
padding:.62rem clamp(1rem,4vw,3rem);
background:var(--navy-deep);
border-bottom:1px solid rgba(194,118,79,.28);
}
body > nav.nav a{color:rgba(238,231,216,.72)}
body > nav.nav a:hover{color:var(--gold)}
/* ---- nav: capitals, and an underline that says where you are and where you
are pointing. The underline sits on the strip's bottom edge rather than
under the words, so it reads as a tab indicator rather than a text
decoration. -0.62rem is exactly the strip's own vertical padding.
Scoped to `body >` deliberately: `.bar` is also the laptop mockup's titlebar
and every in the 50-bar chart on the app page, so an unscoped rule
restyles things that are not navigation. ---- */
body > .bar .nav a,
.navstrip .topnav a{
position:relative;
text-transform:uppercase !important;
letter-spacing:.13em !important;
font-size:.74rem !important;
}
body > .bar .nav a::after,
.navstrip .topnav a::after{
content:"";
position:absolute;
left:0; right:0; bottom:-.62rem;
height:3px;
background:var(--gold);
transform:scaleX(0);
transform-origin:center;
transition:transform .16s ease, background-color .16s ease;
pointer-events:none;
}
body > .bar .nav a:hover::after,
body > .bar .nav a:focus-visible::after,
.navstrip .topnav a:hover::after,
.navstrip .topnav a:focus-visible::after{
transform:scaleX(1);
background:var(--gold);
}
body > .bar .nav a[aria-current="page"]::after,
.navstrip .topnav a[aria-current="page"]::after,
.navstrip .topnav a.here::after{
transform:scaleX(1);
background:var(--rust);
}
body > .bar .nav a[aria-current="page"],
.navstrip .topnav a[aria-current="page"],
.navstrip .topnav a.here{ color:#fff !important; }
/* the coming-soon tag should not inherit the link's letter-spacing twice */
body > .bar .nav .tag,
.navstrip .topnav .tag{ letter-spacing:.12em !important; }
@media (prefers-reduced-motion: reduce){
body > .bar .nav a::after,
.navstrip .topnav a::after{ transition:none }
}