/* /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)}
#cv-bar .cvn-cta{display:inline-block; padding:.5rem .95rem; border-radius:2px; background:var(--cvn-gold);
  color:var(--cvn-white); font-size:.8rem; font-weight:600; white-space:nowrap}
#cv-bar .cvn-cta:hover{background:#A2762F}
#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:#B8873B; 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))}}

.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}