/* ===== Field Guides — shared navigation (global bar + guide sub-bar + support) =====
   Works on the new pages (which define these tokens inline) AND on existing guide pages,
   by bridging to the style.css tokens (so it follows their light/dark theme too). */
:root{
  --paper: var(--bg-elev, #f7faf9);
  --ink: var(--text, #101f1e);
  --muted: var(--text-muted, #526463);
  --faint: var(--text-faint, #5c6f6e);
  --line: var(--border, #d9e2e0);
  --line-strong: var(--border-strong, #bfcdca);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* ---- global bar ---- */
/* masthead: identity row over a hairline strip of the domains (the strip folds into the Menu item under 1040px) */
.nav{position:relative;z-index:40;padding:22px 0 0;}
.nav .row1{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;}
.wordmark{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.nav .row2{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);}
.nav .row2 .strip{gap:0;}
.nav .row2 .nav-btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 10px 11px 0;margin-right:10px;}
.nav .row2 .chev{width:10px;height:10px;}
.nav .row2 .dropdown{top:calc(100% + 1px);}
.nav .tally{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.nav .tally b{color:var(--accent);font-weight:500;}
@media (max-width:1199px){.nav .tally{display:none;}}
.wordmark em{font-style:italic;font-weight:400;color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-item{position:relative;}
.nav-item.mobile{display:none;}
.nav-btn{all:unset;cursor:pointer;font-family:var(--sans);font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;padding:8px 0;white-space:nowrap;transition:color .25s;}
.nav-btn:hover,.nav-item.open .nav-btn{color:var(--ink);}
.nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
.chev{transition:transform .3s cubic-bezier(.2,.7,.2,1);opacity:.7;}
.nav-item.open .chev{transform:rotate(180deg);}

/* the panel. ::before is an invisible bridge over the gap between button and panel,
   so moving the cursor down into the panel never leaves the hover area. */
.dropdown{position:absolute;top:calc(100% + 10px);left:-14px;width:340px;background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;padding:10px;
  box-shadow:0 22px 44px -24px rgba(80,50,20,.35),0 1px 0 rgba(0,0,0,.02);display:grid;grid-template-columns:1fr;gap:1px 8px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.2,1);}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
.dropdown.two{width:600px;grid-template-columns:1fr 1fr;}
.nav-item.right .dropdown{left:auto;right:-14px;}
.nav-item.open .dropdown,.nav-item:focus-within .dropdown{opacity:1;transform:none;pointer-events:auto;}
@media (hover:hover){
  .nav-item:hover .dropdown{opacity:1;transform:none;pointer-events:auto;}
  .nav-item:hover .chev{transform:rotate(180deg);}
  .nav-item:hover .nav-btn{color:var(--ink);}
}
.dd-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding:6px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .25s;}
.dd-head:hover{color:var(--ink);}
.dd-head b{color:var(--accent);font-weight:500;}
.dd-sub{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:8px 10px 2px;}
.dd-g{display:block;padding:7px 10px;border-radius:7px;font-family:var(--serif);font-size:14.5px;line-height:1.3;color:var(--ink);text-decoration:none;transition:background .25s ease,color .25s;}
.dd-g:hover{background:color-mix(in srgb, var(--accent) 6%, transparent);color:var(--accent);}
.dd-g.on{background:color-mix(in srgb, var(--accent) 8%, transparent);color:var(--accent);}
.dd-g .num{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:8px;}
.dd-g.on .num{color:var(--accent);}
@media (max-width:1040px){.nav .row2{display:none;}.nav-item.mobile{display:block;}}
@media (max-width:720px){.dropdown,.nav-item.right .dropdown{position:fixed;left:16px;right:16px;top:74px;width:auto;grid-template-columns:1fr;}}

/* ---- Support ---- */
.nav-item.support{margin-left:6px;}
.sp-btn{padding:7px 14px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink);font-size:13.5px;transition:border-color .25s,background .25s,color .25s;}
.sp-btn:hover,.nav-item.support.open .sp-btn{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent);color:var(--accent);}
@media (hover:hover){.nav-item.support:hover .sp-btn{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent);color:var(--accent);}}
.sp-heart{color:var(--accent);font-size:14px;line-height:1;margin-right:2px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.sp-btn:hover .sp-heart{transform:scale(1.18);}
.sp-panel{width:380px;display:block;padding:14px 12px 10px;}
.sp-head{font-family:var(--serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:2px 10px 8px;}
.sp-intro{margin:0 10px 10px;padding-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted);}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;transition:background .25s;color:var(--ink);text-decoration:none;}
a.sp-row:hover{background:color-mix(in srgb, var(--accent) 6%, transparent);}
a.sp-row:hover .sp-name,a.sp-row:hover .sp-arr{color:var(--accent);}
.sp-l{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sp-name{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:-.01em;transition:color .25s;}
.sp-note{font-size:12px;color:var(--faint);}
.sp-arr{color:var(--faint);transition:color .25s,transform .25s;}
a.sp-row:hover .sp-arr{transform:translateX(3px);}
.sp-copy{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted);transition:border-color .25s,color .25s;max-width:170px;}
.sp-copy code{font-family:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;padding:0;}
.sp-copy:hover,.sp-copy.ok{border-color:var(--accent);color:var(--accent);}
.sp-copied{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.sp-foot{display:block;margin:8px 10px 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);text-decoration:none;transition:color .25s;}
.sp-foot:hover{color:var(--accent);}
.fg-legal{margin:72px 0 0;padding-top:20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);}
.fg-legal a{color:inherit;text-decoration:none;}
.fg-legal a:hover{color:var(--accent);}
.support-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start;margin:56px 0 0;padding:26px 28px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.support-card .sc-k{font-family:var(--serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px;}
.support-card .sc-l p{margin:0;font-size:15px;color:var(--muted);line-height:1.55;}
.support-card .sc-r{display:flex;flex-direction:column;gap:2px;}
@media (max-width:720px){.sp-panel{width:auto;}.support-card{grid-template-columns:1fr;gap:16px;padding:20px;}}

/* ---- sponsor slot (hidden while SPONSOR.enabled is false) ---- */
.sponsor{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);}
.sponsor.hub{margin-top:30px;padding:12px 16px;max-width:680px;}
.sponsor.chapter{flex-direction:column;align-items:flex-start;gap:6px;margin-top:26px;padding:14px 14px 12px;}
.spn-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.spn-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;text-decoration:none;color:var(--ink);}
.spn-name{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:-.01em;transition:color .25s;}
.spn-body:hover .spn-name{color:var(--accent);}
.spn-tag{font-size:12.5px;color:var(--muted);line-height:1.4;}
.spn-cta{font-family:var(--serif);font-size:13px;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line-strong);text-decoration:none;transition:color .25s,border-color .25s;}
.spn-cta:hover{color:var(--accent);border-color:var(--accent);}
@media (max-width:640px){.sponsor.hub{flex-wrap:wrap;}}

/* ---- guide sub-bar: what this guide contains ---- */
.subnav-wrap{position:sticky;top:0;z-index:35;background:var(--bg,#eef2f1);border-bottom:1px solid var(--line);margin-top:22px;}
.subnav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;}
.subnav .guide{display:flex;align-items:baseline;gap:10px;min-width:0;}
.subnav .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.subnav .gname{font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;color:var(--ink);text-decoration:none;transition:color .25s;}
.subnav .guide{flex:1 1 auto;}
.subnav .sections{flex:0 0 auto;gap:16px;}
.subnav .gname:hover{color:var(--accent);}
.subnav .sections{display:flex;align-items:center;gap:20px;}
.subnav .nav-btn{font-size:13.5px;}
.subnav .dropdown{width:360px;}
.subnav .pn{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:13.5px;color:var(--muted);white-space:nowrap;}
.subnav .pn a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;transition:color .25s;}
.subnav .pn a:hover{color:var(--accent);}
.subnav .pn .sep{color:var(--line-strong);}
.subnav .count{font-family:var(--serif);font-size:13.5px;color:var(--muted);white-space:nowrap;}
.subnav .count b{color:var(--accent);font-weight:500;}
@media (max-width:1040px){.subnav .sections{display:none;}.subnav .nav-item.mobile{display:block;}}
@media (max-width:720px){.subnav .pn span.lbl{display:none;}.subnav .crumb{display:none;}}
/* existing guide pages: keep the sticky chapter sidebar below the sticky sub-bar */
.subnav-wrap ~ .layout .sidebar{top:60px;max-height:calc(100vh - 60px);}
.fg-topbar + .layout{margin-top:8px;}