/* /site-nav.css — the site bar, its dropdowns, the phone drawer and the footer
   columns. Session 162 (27 September 2026), founder-approved structure.
   Loaded by every public page with /site-nav.js, which writes the markup into
   <div id="cv-bar"> so the navigation lives in one place. Self-contained: the
   form pages do not load caveris.css, so every value here is its own. */

#cv-bar{
  --cvn-pine:#14342A; --cvn-pine-deep:#0E241C; --cvn-sand:#DECFBB; --cvn-gold:#B8873B;
  --cvn-white:#FFFFFF; --cvn-paper:#FBF8F3; --cvn-rule:#E6E2DA; --cvn-charcoal:#3A352F;
  --cvn-muted:#8A867C; --cvn-grey:#EDEBE7;
  --cvn-bg:var(--cvn-pine); --cvn-fg:var(--cvn-sand); --cvn-fg-strong:var(--cvn-white);
  --cvn-h:58px;
  position:sticky; top:0; z-index:1000; min-height:var(--cvn-h);
  background:var(--cvn-bg); border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  transition:transform .25s ease;
}
body.platform #cv-bar{
  --cvn-bg:var(--cvn-grey); --cvn-fg:var(--cvn-charcoal); --cvn-fg-strong:var(--cvn-pine);
  border-bottom:1px solid var(--cvn-grey);
}
#cv-bar.cvn-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){#cv-bar{transition:none}}

#cv-bar *{box-sizing:border-box}
#cv-bar .cvn-in{max-width:72rem; margin:0 auto; padding:0 1.5rem; height:var(--cvn-h);
  display:flex; align-items:center; gap:1.5rem}
#cv-bar .cvn-mark{display:flex; align-items:center; gap:.6rem; line-height:0; flex:none; margin-right:auto}
#cv-bar .cvn-mark img{display:block; height:18px; width:auto}
#cv-bar .cvn-mark .cvn-glyph{height:28px}
#cv-bar a{text-decoration:none}
#cv-bar :focus-visible{outline:2px solid var(--cvn-gold); outline-offset:3px; border-radius:2px}

/* desktop menu */
#cv-bar .cvn-menu{display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0}
#cv-bar .cvn-menu > li{position:relative}
#cv-bar .cvn-top{display:inline-flex; align-items:center; gap:.35rem; background:none; border:0;
  margin:0; padding:.55rem .6rem; cursor:pointer; font:inherit; font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cvn-fg); border-bottom:1px solid transparent}
#cv-bar .cvn-top:hover, #cv-bar .cvn-top[aria-expanded=true]{color:var(--cvn-fg-strong)}
#cv-bar .cvn-top.cvn-current{color:var(--cvn-fg-strong); box-shadow:inset 0 -1px 0 var(--cvn-gold)}
#cv-bar .cvn-caret{width:.55rem; height:.55rem; flex:none; transition:transform .15s ease}
#cv-bar .cvn-top[aria-expanded=true] .cvn-caret{transform:rotate(180deg)}

#cv-bar .cvn-panel{position:absolute; top:calc(100% + 6px); left:-.4rem; min-width:17rem;
  background:var(--cvn-paper); border:1px solid var(--cvn-rule); border-top:3px solid var(--cvn-gold);
  border-radius:2px; box-shadow:0 12px 32px rgba(20,52,42,.16); padding:.5rem 0; display:none}
#cv-bar .cvn-panel.cvn-open{display:block}
#cv-bar .cvn-panel::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
#cv-bar .cvn-link{display:block; padding:.5rem 1.1rem; color:var(--cvn-charcoal); font-size:.92rem; line-height:1.35}
#cv-bar .cvn-link small{display:block; font-size:.78rem; color:var(--cvn-muted); margin-top:.1rem}
#cv-bar .cvn-link:hover{background:var(--cvn-grey); color:var(--cvn-pine)}
#cv-bar .cvn-link[aria-current=page]{color:var(--cvn-pine); font-weight:600; box-shadow:inset 3px 0 0 var(--cvn-gold)}
#cv-bar .cvn-group{padding:.7rem 1.1rem .25rem; margin-top:.3rem; border-top:1px solid var(--cvn-rule);
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cvn-gold)}

/* right side */
#cv-bar .cvn-side{display:flex; align-items:center; gap:1rem; flex:none}
#cv-bar .cvn-signin{font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cvn-fg)}
#cv-bar .cvn-signin:hover{color:var(--cvn-fg-strong)}
/* session 166: the button is the opposite of the bar. Sand on the green bar, green on the light Platform bar. */
#cv-bar .cvn-cta{display:inline-block; padding:.5rem .95rem; border-radius:2px; background:#EFE7DA;
  color:var(--cvn-pine); font-size:.8rem; font-weight:600; white-space:nowrap}
#cv-bar .cvn-cta:hover{background:#E4D8C6}
body.platform #cv-bar .cvn-cta{background:var(--cvn-pine); color:var(--cvn-white)}
body.platform #cv-bar .cvn-cta:hover{background:var(--cvn-pine-deep)}
#cv-bar .cvn-burger{display:none; background:none; border:0; padding:.45rem; margin:0 -.45rem 0 0;
  cursor:pointer; color:var(--cvn-fg-strong); line-height:0}
#cv-bar .cvn-burger svg{width:24px; height:24px}

/* phone drawer */
.cvn-scrim{position:fixed; inset:0; background:rgba(20,52,42,.45); z-index:1001; opacity:0;
  pointer-events:none; transition:opacity .2s ease}
.cvn-drawer{position:fixed; top:0; right:0; bottom:0; width:min(86vw,22rem); z-index:1002;
  background:#FBF8F3; box-shadow:-12px 0 32px rgba(20,52,42,.2); transform:translateX(100%);
  transition:transform .25s ease; display:flex; flex-direction:column; overflow-y:auto;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; visibility:hidden}
body.cvn-drawer-open .cvn-scrim{opacity:1; pointer-events:auto}
body.cvn-drawer-open .cvn-drawer{transform:none; visibility:visible}
body.cvn-drawer-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cvn-scrim,.cvn-drawer{transition:none}}
.cvn-drawer *{box-sizing:border-box}
.cvn-drawer :focus-visible{outline:2px solid #B8873B; outline-offset:2px}
.cvn-drawer .cvn-dhead{display:flex; align-items:center; justify-content:space-between;
  padding:0 1.2rem; min-height:58px; border-bottom:1px solid #E6E2DA}
.cvn-drawer .cvn-dmark{display:flex; align-items:center; gap:.5rem; line-height:0}
.cvn-drawer .cvn-dhead img{height:16px; width:auto; display:block}
.cvn-drawer .cvn-dhead .cvn-glyph{height:24px}
.cvn-drawer .cvn-close{background:none; border:0; padding:.45rem; margin-right:-.45rem; cursor:pointer; color:#14342A; line-height:0}
.cvn-drawer .cvn-close svg{width:22px; height:22px}
.cvn-drawer ul{list-style:none; margin:0; padding:0}
.cvn-drawer .cvn-dtop{display:flex; width:100%; align-items:center; justify-content:space-between;
  background:none; border:0; border-bottom:1px solid #E6E2DA; margin:0; padding:1rem 1.2rem; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#14342A; text-align:left; text-decoration:none}
.cvn-drawer .cvn-dtop svg{width:.65rem; height:.65rem; transition:transform .15s ease}
.cvn-drawer .cvn-dtop[aria-expanded=true] svg{transform:rotate(180deg)}
.cvn-drawer .cvn-dsub{display:none; background:#F1E9DC; border-bottom:1px solid #E6E2DA; padding:.35rem 0}
.cvn-drawer .cvn-dsub.cvn-open{display:block}
.cvn-drawer .cvn-link{display:block; padding:.65rem 1.2rem .65rem 1.6rem; color:#3A352F; font-size:.95rem;
  line-height:1.35; text-decoration:none}
.cvn-drawer .cvn-link small{display:block; font-size:.8rem; color:#8A867C; margin-top:.1rem}
.cvn-drawer .cvn-link[aria-current=page]{color:#14342A; font-weight:600; box-shadow:inset 3px 0 0 #B8873B}
.cvn-drawer .cvn-group{padding:.8rem 1.2rem .2rem 1.6rem; font-size:.68rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#B8873B}
.cvn-drawer .cvn-dfoot{margin-top:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.7rem}
.cvn-drawer .cvn-dfoot a{display:block; text-align:center; padding:.75rem; border-radius:2px;
  font-size:.9rem; font-weight:600; text-decoration:none}
.cvn-drawer .cvn-dfoot .cvn-cta{background:#14342A; color:#fff}
.cvn-drawer .cvn-dfoot .cvn-signin{border:1px solid #14342A; color:#14342A}

@media (max-width:66rem){
  #cv-bar .cvn-menu, #cv-bar .cvn-signin{display:none}
  #cv-bar .cvn-burger{display:block}
  #cv-bar .cvn-in{gap:.9rem}
}
@media (max-width:22rem){
  #cv-bar .cvn-cta{padding:.45rem .7rem; font-size:.75rem}
  #cv-bar .cvn-in{padding:0 1rem}
}
:target{scroll-margin-top:72px}

/* footer columns */
footer .cvn-foot{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem 1.4rem; margin:0 0 1.6rem}
footer .cvn-foot h4{margin:0 0 .45rem; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#3A352F}
footer .cvn-foot ul{list-style:none; margin:0; padding:0}
footer .cvn-foot li{margin:0 0 .35rem; line-height:1.35}
footer .cvn-foot a{margin:0 !important}
@media (max-width:34rem){footer .cvn-foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer .cvn-social{margin:-.6rem 0 1.2rem; font-size:.8rem}
footer .cvn-social a{margin:0 !important}

.cvn-noscript{margin:0; padding:1.1rem 1.5rem; font-size:.8rem}
.cvn-noscript a{color:#DECFBB; margin-right:1rem}
body.platform .cvn-noscript a{color:#14342A}

/* pages that belong to one edition sit indented under its heading, with a rule beside them */
#cv-bar .cvn-link.cvn-sub{margin-left:1.1rem; padding-left:.9rem; border-left:1px solid var(--cvn-rule)}
.cvn-drawer .cvn-link.cvn-sub{margin-left:1.6rem; padding-left:1rem; border-left:1px solid rgba(184,135,59,.45)}

/* Phone fix, session 164 (30 September 2026). On a 375px phone the bar was
   wider than the screen: the logo, Start practicing and the menu button needed
   376px of a 327px row, so the menu button sat off the right edge and the page
   scrolled sideways. Smaller logo and button below 30rem; below 21.4rem the
   bar keeps the logo and the menu only (Start practicing is in the menu). */
@media (max-width:30rem){
  #cv-bar .cvn-in{padding:0 1rem; gap:.6rem}
  #cv-bar .cvn-mark{gap:.45rem}
  #cv-bar .cvn-mark .cvn-word{height:14px}
  #cv-bar .cvn-mark .cvn-glyph{height:24px}
  #cv-bar .cvn-side{gap:.6rem}
  #cv-bar .cvn-cta{padding:.45rem .7rem; font-size:.75rem}
}
@media (max-width:21.4rem){ #cv-bar .cvn-side .cvn-cta{display:none} }

/* Session 164, later: Home joined the menu, so the menu needs more room. Menu
   labels stay on one line, and the phone menu takes over below 66rem (1056px)
   instead of 60rem. The bar no longer hides on scroll (see site-nav.js). */
#cv-bar .cvn-top{white-space:nowrap}

/* Session 168 (4 October 2026, founder): tablets and narrow windows keep the
   menu across the top instead of the phone menu. Between 40rem (640px) and
   66rem (1056px) the menu is compact; below 56rem (896px) the logo shows the
   mark alone to make room. Below 40rem the phone menu takes over as before. */
@media (min-width:40rem) and (max-width:66rem){
  #cv-bar .cvn-menu{display:flex}
  #cv-bar .cvn-signin{display:inline; font-size:.62rem}
  #cv-bar .cvn-burger{display:none}
  #cv-bar .cvn-in{gap:.6rem; padding:0 1rem}
  #cv-bar .cvn-top{font-size:.62rem; letter-spacing:.06em; padding-left:.45rem; padding-right:.45rem}
  #cv-bar .cvn-cta{padding:.45rem .7rem; font-size:.72rem}
}
@media (min-width:40rem) and (max-width:56rem){
  #cv-bar .cvn-mark .cvn-word{display:none}
}