/* NAVIGATION PREVIEW 7 — full top navigation, compact contextual scroll state */
:root{
  --nav-font:"Roboto Condensed","Arial Narrow","Helvetica Neue Condensed","Liberation Sans Narrow","DejaVu Sans Condensed",sans-serif;
  --compact-h:48px;
  --resource-h:42px;
}
/* Full navigation is normal document flow. It is intentionally NOT sticky. */
.top{position:relative;z-index:50;border-bottom:1px solid var(--line);background:rgba(250,250,247,.98)}
.nav{min-height:58px;display:flex;align-items:center;gap:24px;overflow-x:auto;white-space:nowrap}
.brand,.global-link{flex:0 0 auto}.brand{text-decoration:none;font-weight:900}.global-link{position:relative;padding:17px 0;text-decoration:none}.global-link:hover{opacity:.72}.global-link.active{font-weight:850}.global-link.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;border-radius:3px 3px 0 0}
/* Compact sticky state, shown only after scrolling. */
.scroll-compact{position:fixed;top:0;left:0;right:0;z-index:80;display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);border-bottom:1px solid var(--line);background:rgba(250,250,247,.97);backdrop-filter:blur(10px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.scroll-compact.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .16s ease,transform .16s ease,visibility 0s linear 0s}
.scroll-compact-inner{min-height:var(--compact-h);display:flex;align-items:center;gap:14px}
.scroll-brand{font-family:var(--nav-font);font-weight:900;font-size:1.05rem;text-decoration:none;letter-spacing:-.01em}
.scroll-context{font-family:var(--nav-font);font-size:.93rem;font-weight:760;text-decoration:none;padding:6px 9px;border-radius:7px;background:var(--soft)}
.scroll-context:hover{background:color-mix(in srgb,var(--soft) 78%,var(--ink) 22%)}
.scroll-menu-toggle{margin-left:auto;appearance:none;border:0;background:transparent;color:var(--ink);width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:0;cursor:pointer}
.scroll-menu-toggle:hover{background:var(--soft)}
.mobile-nav-icon{display:block;width:21px;height:15px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}.mobile-nav-icon::after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}
.mobile-menu{display:none}.mobile-menu.open{position:absolute;left:0;right:0;top:var(--compact-h);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;background:var(--paper,#fff);border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.08);padding:10px 14px;z-index:85}
.mobile-menu.open a{display:block;text-decoration:none;font-family:var(--nav-font);font-size:1rem;font-weight:700;padding:10px 8px;border-radius:7px}.mobile-menu.open a:hover,.mobile-menu.open a.active{background:var(--soft)}
/* Level 2: work/trilogy navigation. */
.subnav{border-bottom:1px solid var(--line);background:var(--subnav-tint,#f7f7f3);position:relative;z-index:35}
.subnav-inner{min-height:44px;display:flex;align-items:center;gap:10px;overflow-x:auto;white-space:nowrap;padding:5px 0}
.subnav-group{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.subnav-link{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:5px 7px;border-radius:7px;text-decoration:none;color:var(--muted);font-family:var(--nav-font);font-size:.89rem;line-height:1.05;font-weight:700;letter-spacing:.005em;text-transform:none;white-space:nowrap}
.subnav-link:hover{background:color-mix(in srgb,var(--subnav-accent,#333) 8%,var(--subnav-tint,#f7f7f3));color:var(--ink)}.subnav-link.active{background:var(--subnav-accent,#181817);color:#fff;font-weight:800}
/* Level 3: film resources. Normal at top, sticky below compact bar after scrolling. */
.page-resource-bar{position:sticky;top:var(--compact-h);z-index:70;border-bottom:1px solid var(--line);background:rgba(250,250,247,.98);backdrop-filter:blur(8px)}
.page-resource-bar .subnav-inner{min-height:var(--resource-h);padding:4px 0}.page-resource-nav{display:flex!important;gap:1px}.page-resource-bar .subnav-link{min-height:30px;padding:4px 7px;font-size:.84rem}.page-resource-nav .subnav-link{font-weight:720}
/* Level 5: page-local navigation on overview pages. */
.page-anchor-nav{position:sticky;top:calc(var(--compact-h) + var(--resource-h));z-index:69;border-bottom:1px solid var(--line);background:rgba(250,250,247,.98);backdrop-filter:blur(8px)}
.page-anchor-nav-inner{display:flex;gap:.18rem;align-items:center;min-height:40px;overflow-x:auto;padding:4px 0;scrollbar-width:thin}
.page-anchor-nav a{flex:0 0 auto;white-space:nowrap;text-decoration:none;font-family:var(--nav-font);font-size:.83rem;line-height:1.1;font-weight:700;letter-spacing:.005em;text-transform:none;color:var(--ink);padding:.24rem .32rem;border-radius:6px}.page-anchor-nav a:hover{background:var(--soft)}.page-anchor-nav a .nav-short{display:none}
.section[id]{scroll-margin-top:96px}
/* Level 4: screenplay tool, visually attached to level 3. */
.script-jump{display:flex;align-items:center;gap:10px;padding:7px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(250,250,247,.98);margin:0 0 18px;position:sticky;top:calc(var(--compact-h) + var(--resource-h));z-index:68}
.script-jump label{flex:0 0 auto;font-family:var(--nav-font);font-size:.77rem;line-height:1;font-weight:740;letter-spacing:.01em;color:var(--muted);text-transform:none;white-space:nowrap}.script-jump select{font:inherit;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--paper);min-width:280px;max-width:640px}
@media(max-width:900px){
 .nav{gap:17px;padding-inline:12px}.brand,.global-link{font-family:var(--nav-font)}.brand{font-size:.98rem}.global-link{font-size:.93rem;padding:17px 0}
 .scroll-compact-inner{padding-inline:12px}.scroll-context{font-size:.86rem;padding:5px 8px}
 .subnav-inner{padding-inline:12px;gap:4px}.subnav-link{font-size:.84rem;padding-inline:6px}.page-resource-bar .subnav-inner{padding-inline:12px}.page-resource-bar .subnav-link{font-size:.81rem;padding-inline:6px}
 .page-anchor-nav-inner{padding-inline:10px;gap:.12rem}.page-anchor-nav a{font-size:.77rem;padding:.2rem .27rem}.page-anchor-nav a .nav-long{display:inline}.page-anchor-nav a .nav-short{display:none}
 .script-jump{gap:8px;padding:7px 0}.script-jump label{font-size:.72rem}.script-jump select{min-width:0;max-width:none;flex:1;width:auto;padding:7px 9px}
 .section[id]{scroll-margin-top:92px}
}
@media(max-width:560px){
 .nav{gap:12px;padding-inline:9px}.brand{font-size:.91rem}.global-link{font-size:.84rem}
 .scroll-compact-inner{padding-inline:9px}.scroll-brand{font-size:1rem}.scroll-context{font-size:.82rem}
 .subnav-inner{padding-inline:8px}.subnav-link{font-size:.8rem;padding-inline:5px}.page-resource-bar .subnav-link{font-size:.77rem;padding-inline:5px}
 .page-anchor-nav-inner{padding-inline:8px;gap:.08rem}.page-anchor-nav a{font-size:.72rem;padding-inline:.23rem}.page-anchor-nav a .nav-long{display:none}.page-anchor-nav a .nav-short{display:inline}
 .script-jump{gap:7px;padding:7px 0}.script-jump label{font-size:.67rem}.script-jump select{font-size:.86rem;padding:7px 8px}
 .mobile-menu.open{grid-template-columns:1fr}
}
@media(max-width:420px){.brand{font-size:.87rem}.global-link{font-size:.8rem}.nav{gap:10px}.subnav-link{font-size:.77rem}.page-resource-bar .subnav-link{font-size:.75rem}.page-anchor-nav a{font-size:.69rem}.script-jump label{font-size:.64rem}.script-jump select{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.global-link,.subnav-link{transition:none!important}}

:root{--nav-gutter:28px}
/* Alignment pass: every navigation layer shares the same .wrap content axis. */
.top .nav,.scroll-compact-inner,.subnav-inner,.page-resource-bar .subnav-inner,.page-anchor-nav-inner{padding-left:0;padding-right:0}
.script-jump{padding-left:0;padding-right:0;width:100%}
@media(max-width:820px){:root{--nav-gutter:18px}.top .nav,.scroll-compact-inner,.subnav-inner,.page-resource-bar .subnav-inner,.page-anchor-nav-inner{padding-left:0;padding-right:0}.script-jump{padding-left:0;padding-right:0}}
@media(max-width:560px){.top .nav,.scroll-compact-inner,.subnav-inner,.page-resource-bar .subnav-inner,.page-anchor-nav-inner{padding-left:0;padding-right:0}.script-jump{padding-left:0;padding-right:0}}


/* NAVIGATION PREVIEW 11 — centered content rail, same left text axis as page content */
:root{--nav-rail-max:var(--max);--nav-rail-gutter:28px}
/* The navigation rail itself is centered at the same max width as .wrap.
   Its inner text begins exactly where ordinary .wrap content begins. */
.top>.nav,
.subnav>.subnav-inner,
.page-resource-bar>.subnav-inner,
.page-anchor-nav-inner,
.scroll-compact-inner{
  width:100%;
  max-width:var(--nav-rail-max);
  margin-inline:auto!important;
  padding-inline:var(--nav-rail-gutter)!important;
}
/* Do not add a second inset inside the centered rail. */
.top>.nav,
.scroll-compact-inner,
.subnav-inner,
.page-resource-bar .subnav-inner,
.page-anchor-nav-inner,
.script-jump{box-sizing:border-box}
/* The screenplay jump is part of the same content rail when present. */
.script-jump{width:100%;max-width:var(--nav-rail-max);margin-left:auto!important;margin-right:auto!important}
@media(max-width:820px){
  :root{--nav-rail-gutter:18px}
  .top>.nav,
  .subnav>.subnav-inner,
  .page-resource-bar>.subnav-inner,
  .page-anchor-nav-inner,
  .scroll-compact-inner{max-width:none;padding-inline:var(--nav-rail-gutter)!important}
  .script-jump{max-width:none}
}

/* Overview pages retain the same resource + page-anchor stack as film detail pages. */