html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* .masthead sets its own display, which as an author rule beats the
   browser's default [hidden]{display:none} at equal specificity —
   same trap as .gate-signup-btn earlier, same fix. */
.masthead[hidden]{display:none;}
/* ---------- site nav ---------- */
.shell{display:flex; align-items:stretch; flex:1 1 auto;}
/* Homepage-only (2026-09-18+5, per Eduardo): the sidebar and masthead
   load visually collapsed even for a signed-in visitor, and open when
   they click the "BOLD.OS" hero heading below — see the auth script's
   revealChrome(). Reuses .sidebar's own flex-basis/width transition
   above rather than a bespoke one, so it opens with the same timing as
   the sidebar-collapse button elsewhere in the app. [hidden] can't be
   transitioned, which is why this is a class instead of the hidden
   attribute the guest/signed-out state below still uses. */
/* The .is-collapsed variant is listed too: a stored boldNavCollapsed
   preference adds .is-collapsed (a 40px rail with the » button), which
   is declared later at equal specificity and would otherwise win, leaving
   the hero off-centre and shifting it when the sidebar mounts. Also drops
   the border width — a border-box can't be narrower than its border. */
.shell.chrome-collapsed .sidebar, .shell.chrome-collapsed.is-collapsed .sidebar{flex-basis:0; width:0; border-right-width:0; overflow:hidden;}
/* Smooth open/close. The sidebar and masthead share one duration + easing so
   the hero re-centres in step with both. The masthead's transition lives on
   the base rule, not on .chrome-collapsed: a transition only applies from the
   state being entered, so declaring it on the collapsed class animated
   closing but made opening snap. max-height (not height) because height can't
   interpolate to auto; 160px clears the wrapped mobile masthead. */
:root{--chrome-ease:cubic-bezier(.22,.61,.36,1); --chrome-dur:.38s;}
.shell .sidebar{
  transition:flex-basis var(--chrome-dur) var(--chrome-ease), width var(--chrome-dur) var(--chrome-ease), border-right-width var(--chrome-dur) var(--chrome-ease);
}
.masthead{
  max-height:160px; overflow:hidden;
  transition:max-height var(--chrome-dur) var(--chrome-ease), padding var(--chrome-dur) var(--chrome-ease), opacity var(--chrome-dur) ease, border-bottom-color var(--chrome-dur) ease;
}
.masthead.chrome-collapsed{
  max-height:0; padding-top:0; padding-bottom:0; opacity:0; border-bottom-color:transparent;
}
/* Keep the sidebar's contents at full width while the box narrows, so the
   links clip instead of re-wrapping each frame, and fade with the slide. */
.shell:not(.is-collapsed) .sidebar-inner, .shell.chrome-collapsed .sidebar-inner{min-width:199px;}
.shell .sidebar-inner{transition:padding .22s ease, opacity var(--chrome-dur) ease;}
.shell.chrome-collapsed .sidebar-inner{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .shell .sidebar, .masthead, .sidebar-inner{transition:none;}
}
.home-hero h1.hero-clickable{cursor:pointer;}
.home-hero h1.hero-clickable:focus-visible{outline:2px solid var(--accent); outline-offset:6px;}
/* The hero is pinned to the viewport centre rather than centred in whatever
   space the sidebar/masthead leave, so "BOLD.OS" stays put while they open
   and close. Sidebar and masthead sit above it (z-index) so they win any
   overlap and stay clickable. */
.shell-main{position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;}
.shell .sidebar, .masthead{position:relative; z-index:1;}
@media (max-width:820px){ .shell .sidebar{position:fixed; z-index:200;} }
/* ---------- signed-out signup nudge (reuses the sign-in gate's own styling
   from the other pages, since the homepage doesn't hard-gate its content —
   only the sidebar hides for a signed-out visitor) ---------- */
.gate-alt{
  font-family:var(--sans); font-size:13px; font-weight:400; color:var(--muted);
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line);
}
.gate-signup-btn{
  display:inline-block; font-family:var(--sans); font-weight:500; font-size:14px;
  color:var(--ink-soft); text-decoration:underline; text-decoration-color:rgba(26,43,74,.32); text-underline-offset:3px;
  padding:0; margin-top:8px; border:none; background:none; cursor:pointer;
}
.home-guest-links{
  display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:10px;
  margin-top:8px;
}
.home-guest-links .gate-signup-btn{margin-top:0;}
.home-guest-links .home-guest-or{font-family:var(--sans); font-size:12px; color:var(--muted);}
/* ---------- hero ---------- */
.home-hero{text-align:center; padding:40px var(--gutter);}
.home-hero h1{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(32px, 7vw, 60px);
  line-height:1.05;
  text-wrap:balance;
}
.home-hero h1 strong{font-weight:700; color:var(--accent);}
#homeGuestNote{margin-top:28px;}