/* Shared navigation for every theme, page and mockup. */
.main-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;position:relative;z-index:40}
.main-nav>.nav-dropdown{position:static}
.main-nav>a,.main-nav>.nav-dropdown>summary{display:block;padding:12px 15px;border-radius:100px;line-height:1.3;text-decoration:none;transition:background .15s,color .15s}
.main-nav>a:hover,.main-nav>.nav-dropdown>summary:hover,.main-nav>.nav-dropdown[open]>summary{background:var(--soft,#f5eee9);color:var(--accent,#9b385a)}
.nav-dropdown>summary,.mobile-menu>summary{cursor:pointer;list-style:none}
.nav-dropdown>summary::-webkit-details-marker,.mobile-menu>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary::after{content:'⌄';display:inline-block;margin-left:9px;transition:transform .15s}
.nav-dropdown[open]>summary::after{transform:rotate(180deg)}
.nav-dropdown:not([open])>.nav-submenu,.mobile-menu:not([open])>nav{display:none}
.main-nav>.nav-dropdown>.nav-submenu{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 8px);width:auto;min-width:0;max-width:none;max-height:min(620px,65dvh);overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px;padding:22px;border:1px solid var(--line,#e5dad5);border-radius:20px;background:#fff;color:var(--ink,#30252b);box-shadow:0 20px 50px #2c172b21;box-sizing:border-box;text-align:left;text-transform:none;letter-spacing:normal;font-family:var(--body,var(--sans,system-ui));font-size:14px}
.nav-submenu{box-sizing:border-box;position:relative}
.nav-submenu a{display:block;white-space:normal;line-height:1.5;text-decoration:none}
.main-nav>.nav-dropdown>.nav-submenu>a:first-child{grid-column:1/-1;font-size:15px;font-weight:600;padding:4px 48px 17px 2px;border-bottom:1px solid var(--line,#e5dad5);border-radius:0;color:var(--accent,#9b385a)}
.main-nav>.nav-dropdown>.nav-submenu>a:not(:first-child),.nav-submenu>.nav-dropdown>summary{padding:14px 16px;border:1px solid var(--line,#e5dad5);border-radius:12px;background:var(--paper,#fffaf7);font-size:14px;font-weight:500;line-height:1.5}
.nav-submenu>.nav-dropdown{position:relative;width:100%;min-width:0}
.nav-submenu>.nav-dropdown>summary{display:flex;align-items:center;justify-content:space-between}
.nav-submenu>.nav-dropdown>summary::after{flex-shrink:0}
.nav-submenu a:hover,.nav-submenu>.nav-dropdown>summary:hover,.nav-submenu>.nav-dropdown[open]>summary{color:var(--accent,#9b385a);background:var(--soft,#f5eee9)}
.nav-submenu .nav-submenu{position:static;width:auto;min-width:0;margin:12px 0 0 12px;display:flex;flex-direction:column;gap:2px;padding:0 0 2px 12px;border:0;border-left:2px solid var(--line,#e5dad5);box-shadow:none;background:transparent}
.nav-submenu .nav-submenu>a{padding:9px 10px;border-radius:8px;font-size:13px}
.nav-submenu .nav-submenu>a:first-child{font-weight:600;color:var(--accent,#9b385a)}
.nav-close{position:absolute;top:13px;right:13px;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line,#e5dad5);border-radius:50%;background:#fff;color:var(--ink,#30252b);font:24px/1 system-ui;cursor:pointer}
.nav-close:hover{background:var(--soft,#f5eee9);color:var(--accent,#9b385a)}
.main-nav a:focus-visible,.nav-dropdown>summary:focus-visible,.mobile-menu>summary:focus-visible,.nav-close:focus-visible{outline:2px solid var(--accent,#9b385a);outline-offset:4px}
.mobile-menu{display:none}
.site-header .site-nav.main-nav{gap:6px 10px;padding:10px 0;margin:0;font-size:13px;text-transform:none;letter-spacing:normal;justify-content:center}
.site-header .site-nav.main-nav a:hover::after{display:none}
.theme-lena .site-header .main-nav>.nav-dropdown[open]>summary,.theme-lena .site-header .main-nav>a:hover,.theme-lena .site-header .main-nav>.nav-dropdown>summary:hover{background:#f8d7e5;color:var(--ink)}
@media(min-width:981px) and (max-width:1100px){.main-nav{gap:4px}.main-nav>a,.main-nav>.nav-dropdown>summary{padding:11px 10px}.main-nav>.nav-dropdown>.nav-submenu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
 .main-nav,.site-header .site-nav.main-nav{display:none}
 .mobile-menu{display:block;position:relative;z-index:40;margin:12px 0 0;font-family:var(--body,var(--sans,system-ui));font-size:14px}
 .mobile-menu>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:11px 16px;border:1px solid var(--line,#e5dad5);border-radius:12px;background:#fff;color:var(--ink,#30252b);box-sizing:border-box}
 .mobile-menu[open]>summary{border-radius:12px 12px 0 0;background:var(--soft,#f5eee9)}
 .mobile-menu>nav{display:flex;flex-direction:column;gap:5px;max-height:65dvh;overflow:auto;padding:12px;border:1px solid var(--line,#e5dad5);border-top:0;border-radius:0 0 14px 14px;background:#fff;color:var(--ink,#30252b);box-shadow:0 14px 25px #2c172b14}
 .mobile-menu>nav>a,.mobile-menu>nav>.nav-dropdown>summary{display:block;padding:13px 12px;min-height:44px;border-radius:8px;line-height:1.4;box-sizing:border-box}
 .mobile-menu>nav>.nav-dropdown>summary{display:flex;align-items:center;justify-content:space-between}
 .mobile-menu>nav>.nav-dropdown[open]>summary{background:var(--soft,#f5eee9);color:var(--accent,#9b385a)}
 .mobile-menu .nav-dropdown{position:relative;width:100%}
 .mobile-menu .nav-submenu{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;width:auto;margin:4px 0 12px 5px;padding:12px;border:1px solid var(--line,#e5dad5);border-radius:12px;box-shadow:none;background:var(--paper,#fffaf7)}
 .mobile-menu .nav-submenu>a{padding:10px;border-radius:8px;font-size:14px}
 .mobile-menu .nav-submenu>a:first-child{padding-right:35px;font-weight:600;color:var(--accent,#9b385a)}
 .mobile-menu .nav-submenu .nav-submenu{margin:10px 0 0 10px;padding:0 0 0 10px;border:0;border-left:2px solid var(--line,#e5dad5);border-radius:0;background:transparent;gap:3px}
 .mobile-menu .nav-submenu .nav-submenu>a{font-size:13px}
 .mobile-menu .nav-close{top:9px;right:9px;width:30px;height:30px;font-size:21px}
 .nav-dropdown:not([open])>.nav-submenu,.mobile-menu:not([open])>nav{display:none}
}
@media(prefers-reduced-motion:reduce){.main-nav>a,.main-nav>.nav-dropdown>summary,.nav-dropdown>summary::after{transition:none}}

.main-nav>.nav-dropdown:not([open])>.nav-submenu,.nav-dropdown:not([open])>.nav-submenu{display:none}

@media(min-width:981px){.reader .site-header .main-nav{gap:4px 8px;padding:10px 0;font-size:12px;letter-spacing:.04em}.reader .site-header .main-nav>a,.reader .site-header .main-nav>.nav-dropdown>summary{padding:12px 13px}}

/* A pale pink reading panel with dark text in live pages and mockups. */
body .article-toc{background:#fff6f9;color:#4d2437;border:1px solid #e4bdcc;font-size:14px}
body .article-toc a,body .article-toc summary,body .article-toc>span{color:#4d2437}
body .article-toc a:hover{color:#721e46;text-decoration:underline;text-underline-offset:3px}