/* Shared navigation. The portrait and renderer keep their existing geometry. */
:root{--nav-top:max(28px,env(safe-area-inset-top));--nav-clearance:calc(var(--nav-top) + 60px);
  --nav-shell-x:36px;--nav-shell-y:10px;--nav-glass-rim:16px;--glass-radius:32px;--glass-blur:40px;
  --glass-rail-width:clamp(380px,26vw,480px);--glass-edge:rgb(241 237 230 / 32%);
  /* One brown for the menu bar, every pill, the copy card and its button (Jesse, 2026-11-03: the black 25% pills read
     lighter and grey). 70% keeps amber and white small text at 4.5:1 or more even over the brightest (cream) footage. */
  --glass-inset:rgb(28 25 22 / 70%);--glass-label:var(--glass-inset);--glass-label-height:30px;
  --nav-shell-bottom:calc(var(--nav-top) + 44px + var(--nav-shell-y))}
.nav{position:fixed;z-index:30;isolation:isolate;top:var(--nav-top);right:calc(var(--gutter) + var(--menu-scrollbar-width,0px))}
/* A feathered corner shade gives the lockup contrast over bright film frames. */
@media(min-width:761px){
  /* Enlarge the supplied artwork within the rail's existing vertical footprint. */
  /* One edge both sides (Jesse, 2026-11-05): the rail's outer stroke and the logo's artwork both sit on the gutter, the line the page's headlines use. */
  .nav{right:calc(var(--gutter) + var(--nav-shell-x) + var(--menu-scrollbar-width,0px))}
  .nav>.lockup{height:44px;margin-left:-3.5px}
  .nav>.lockup .lockup-svg{width:114px;height:50px;align-self:center}
  .nav::before{content:'';position:fixed;z-index:-3;top:0;left:0;
    width:min(640px,44vw);height:min(420px,34vw);pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 100% 100% at -12% -18%,rgb(14 12 10 / 48%) 0%,rgb(14 12 10 / 30%) 32%,rgb(14 12 10 / 12%) 58%,rgb(14 12 10 / 0%) 86%);
    transition:opacity 180ms ease}
  .nav.is-over-film::before{opacity:1}
  .nav.is-over-dinner::before{width:min(704px,48.4vw);height:min(462px,37.4vw)}
}
.nav>.nav-links{position:relative;isolation:isolate}
.nav>.nav-links::before,.nav>.nav-links::after{content:'';position:absolute;opacity:0;pointer-events:none;
  transition:opacity 180ms ease}
.nav>.nav-links::before{z-index:-2;inset:calc(-1 * var(--nav-shell-y)) calc(-1 * var(--nav-shell-x));
  opacity:1;background:rgb(28 25 22 / 94%);border:1px solid var(--glass-edge);border-radius:var(--glass-radius)}
.nav>.nav-links::after{z-index:-1;inset:calc(var(--nav-glass-rim) - var(--nav-shell-y)) calc(var(--nav-glass-rim) - var(--nav-shell-x));
  background:var(--glass-label);border-radius:calc(var(--glass-radius) - var(--nav-glass-rim))}
/* The entire outlined rail stays glass over the hero as well as the films. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav>.nav-links::before{background:transparent;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
}
.nav.is-scrolled:not(.is-over-hero)>.nav-links::after{opacity:1}
@media(min-width:761px){
  /* Match the section label's visible pill while retaining 44px link targets. */
  .nav>.nav-links::after{top:50%;bottom:auto;height:var(--glass-label-height);box-sizing:border-box;
    border:0;border-radius:999px;transform:translateY(-50%)}
  .nav>.nav-links{box-sizing:border-box;width:calc(var(--glass-rail-width) - 2 * var(--nav-shell-x));justify-content:space-between;gap:12px}
  .nav>.nav-links a{font-size:11px;letter-spacing:.07em;gap:8px;white-space:nowrap}
}
.nav a[aria-current=location],.menu-destinations a[aria-current=location],.menu-primary a[aria-current]{color:var(--amber)}
#hero[tabindex="-1"]{outline:none}
.cta-zone{scroll-margin-top:calc(var(--nav-clearance) + 20px)}
.menu-toggle{display:none}
.mobile-menu{border:0;padding:0;margin:0;inset:0;width:calc(100% - var(--menu-scrollbar-width,0px));max-width:none;
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  height:100dvh;max-height:none;background:var(--paper);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);
  transition:transform 200ms var(--ease-drawer)}
.mobile-menu.is-visible{transform:translateX(0);transition-duration:280ms}
.mobile-menu::backdrop{background:rgb(11 10 9 / 32%);opacity:0;
  transition:opacity 200ms var(--ease-drawer)}
.mobile-menu.is-visible::backdrop{opacity:1;transition-duration:280ms}
.mobile-menu .menu-destinations a{opacity:0;transform:translateX(12px);
  transition:transform 180ms var(--ease-drawer),opacity 180ms var(--ease-drawer)}
.mobile-menu.is-visible .menu-destinations a{opacity:1;transform:translateX(0);transition-delay:30ms}
.mobile-menu.is-visible .menu-destinations a:nth-child(2){transition-delay:60ms}
.mobile-menu.is-instant,.mobile-menu.is-instant::backdrop,
.mobile-menu.is-instant .menu-destinations a{transition:none}
/* Lock the root only: a hidden body becomes a new scroll container and unpins the film. */
html.menu-open{overflow:hidden;overscroll-behavior:none}
html.menu-open body{padding-right:var(--menu-scrollbar-width,0px);overscroll-behavior:none}
.menu-toggle,.menu-close{min-width:48px;min-height:44px;padding:0;border:0;
  color:var(--ink);background:transparent;cursor:pointer;
  font:400 10px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.menu-toggle:active,.menu-close:active{transform:scale(.96)}
.menu-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px var(--gutter);
  background:var(--paper)}
.menu-content{display:flex;flex-direction:column;min-height:calc(100% - 76px);
  padding:clamp(48px,11svh,112px) var(--gutter) max(32px,env(safe-area-inset-bottom))}
.menu-kicker,.menu-footer{font:400 10px/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.menu-kicker{color:var(--amber);margin-bottom:24px}
.menu-destinations{display:flex;flex-direction:column}
.menu-destinations a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:24px 0;border-top:1px solid rgb(241 237 230 / 16%);
  font:500 clamp(26px,7.2vw,48px)/1.2 var(--f-display);letter-spacing:-.045em}
.menu-destinations a:last-child{border-bottom:1px solid rgb(241 237 230 / 16%)}
.menu-destinations .menu-arrow{color:var(--amber);font-size:22px;flex-shrink:0}
.menu-destinations [aria-current=page]{color:var(--amber)}
.menu-footer{color:var(--muted);margin-top:auto;padding-top:56px}
@media(hover:hover) and (pointer:fine){
  .menu-toggle:hover,.menu-close:hover,.menu-destinations a:hover{color:var(--amber)}
}
@media(max-width:760px){
  :root{--nav-top:max(20px,env(safe-area-inset-top));--nav-shell-x:20px;--nav-shell-y:10px;--nav-glass-rim:10px;--glass-radius:32px;
    --nav-reserve-inset:6px;--nav-reserve-fill:#49433d}
  .nav{top:var(--nav-top)}
  .nav-links{gap:16px}
  .nav-enhanced .nav .editorial-link{display:none}
  .nav-enhanced .menu-toggle{display:flex;align-items:center;gap:8px}
  /* The visible fill is inset evenly in the rail; its link keeps a 44px hit area. */
  .nav-links a.reserve{position:relative;isolation:isolate;min-height:44px;padding:10px 15px;gap:8px;
    margin-right:calc(var(--nav-glass-rim) + var(--nav-reserve-inset) - var(--nav-shell-x));
    border:0;border-radius:999px;background:transparent;color:var(--ink);
    font-weight:500;letter-spacing:.08em;white-space:nowrap;flex-shrink:0}
  .nav-links a.reserve::before{content:'';position:absolute;z-index:-1;pointer-events:none;
    inset:var(--nav-reserve-inset) 0;border-radius:inherit;background:var(--nav-reserve-fill)}
  .nav-links a.reserve:active::before{background:#3f3a35}
  .nav-links a.reserve:focus-visible{outline:none}
  .nav-links a.reserve:focus-visible::before{outline:2px solid var(--amber);outline-offset:2px}
  .nav-links .reserve .nav-dot{order:-1;flex-shrink:0}
  .nav-links .reserve>.reserve-arrow{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0}
  .reserve-arrow svg{display:block;width:100%;height:100%}
  .menu-header{padding-top:max(16px,env(safe-area-inset-top))}
  /* If JavaScript is unavailable, all destinations remain reachable. */
  html:not(.nav-enhanced) .nav{flex-wrap:wrap;gap:4px}
  html:not(.nav-enhanced) .nav-links{flex-wrap:wrap;gap:8px 16px}
}
/* Phones: the glass rail and its stroke run the full width as a floating capsule, so the logo sits on the glass
   instead of over the content scrolling past; the links and their solid pill keep their exact place (Jesse,
   2026-11-02). Desktop keeps the right-hand rail: it lines up with the film's glass cards and leaves the film open. */
@media(max-width:760px){
  .nav::after{content:'';position:absolute;z-index:-2;pointer-events:none;
    background:rgb(28 25 22 / 94%);border:1px solid var(--glass-edge);border-radius:var(--glass-radius)}
  .nav>.nav-links::before{display:none}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav::after{background:rgb(28 25 22 / 55%);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}   /* tinted, so the logo reads over the cream Range footage too */
  }
  /* A floating capsule: 10px from the screen's sides and top; the logo and the Reserve pill sit 16px inside its ends. */
  .nav{--rail-edge:10px;--rail-pad:16px;left:calc(var(--rail-edge) + var(--rail-pad));
    right:calc(var(--rail-edge) + var(--rail-pad) + var(--nav-shell-x) - var(--nav-glass-rim) - var(--nav-reserve-inset) + var(--menu-scrollbar-width,0px))}
  .nav::after{inset:calc(-1 * var(--nav-shell-y)) calc(var(--nav-glass-rim) + var(--nav-reserve-inset) - var(--rail-pad) - var(--nav-shell-x)) calc(-1 * var(--nav-shell-y)) calc(-1 * var(--rail-pad))}
}
@media(max-width:360px){
  :root{--nav-shell-x:16px}
  .nav-links,.menu-header{gap:10px}
  .nav-links a.reserve{padding:10px 9px;gap:6px}
}
@media(max-width:760px) and (hover:hover) and (pointer:fine){
  .nav-links a.reserve:hover:not(:active)::before{background:#56504a}
}
@media(prefers-reduced-motion:reduce){
  .nav::before,.nav>.nav-links::before,.nav>.nav-links::after,.mobile-menu,.mobile-menu::backdrop,.mobile-menu .menu-destinations a{transition:none}
}

/* The rail stays compact; the directory has room for product and film navigation. */
.scene-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;
  background:transparent;color:var(--ink);font:400 11px/1.5 var(--f-mono);
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.scene-toggle.is-current,.scene-toggle[aria-expanded=true]{color:var(--amber)}
.scene-toggle:focus-visible{outline:1px solid var(--amber);outline-offset:5px;border-radius:4px}
.menu-content{padding-top:24px;gap:40px}
.menu-primary{display:grid;align-content:start}
.menu-primary a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:92px;padding:18px 0;border-bottom:1px solid rgb(241 237 230 / 16%);font:500 clamp(26px,2.8vw,40px)/1.15 var(--f-display);letter-spacing:-.035em}
.menu-primary a:first-child{padding-top:0}
.menu-primary small{display:block;margin-top:8px;font:400 13px/1.5 var(--f-sans);letter-spacing:0;color:#beb5a8}
.menu-primary .menu-arrow{flex:none;color:var(--amber)}
.menu-primary a:focus-visible{outline-offset:4px}
.menu-scenes h3{margin:0 0 20px;font:500 22px/1.2 var(--f-display);letter-spacing:-.025em}
.menu-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.menu-footer span{font:400 12px/1.5 var(--f-sans);text-transform:none;letter-spacing:0}
.menu-destinations .scene-link{display:grid;grid-template-columns:80px minmax(0,1fr) 18px;
  gap:16px;padding:16px 0;min-height:96px;font:inherit;letter-spacing:normal}
.scene-thumb{display:block;width:80px;height:64px;border-radius:8px;object-fit:cover;
  object-position:76% 50%;background:#211e1b}
.scene-thumb-portrait{object-fit:contain;object-position:50% 0%}
.scene-label{display:grid;gap:5px}
.scene-label strong{font:500 18px/1.2 var(--f-display);letter-spacing:-.025em}
.scene-label>span{font:400 12px/1.45 var(--f-sans);color:var(--muted)}
.menu-secondary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:18px 0;color:var(--ink);font:500 16px/1.3 var(--f-display)}
.menu-secondary[aria-current=page]{color:var(--amber)}
@media(hover:hover) and (pointer:fine){.scene-toggle:hover,.menu-secondary:hover,.menu-primary a:hover{color:var(--amber)}}
@media(min-width:761px){
  .mobile-menu{inset:calc(var(--nav-shell-bottom) + 16px) calc(var(--gutter) + var(--menu-scrollbar-width,0px)) auto auto;
    width:min(940px,calc(100vw - 2 * var(--gutter)));height:auto;max-height:calc(100dvh - var(--nav-shell-bottom) - 40px);
    margin:0;padding:32px;border:1px solid var(--glass-edge);border-radius:var(--glass-radius);
    background:rgb(28 25 22 / 96%);transform:translateY(-8px);opacity:0;
    transition:transform 180ms cubic-bezier(.23,1,.32,1),opacity 180ms cubic-bezier(.23,1,.32,1)}
  .mobile-menu.is-visible{transform:translateY(0);opacity:1;transition-duration:200ms}
  .mobile-menu.is-instant{transition:none}
  .mobile-menu::backdrop{background:rgb(11 10 9 / 5%)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    /* Blur preserves the scene's color; exposure keeps pale film frames legible. */
    .mobile-menu{background:rgb(28 25 22 / 5%);
      -webkit-backdrop-filter:blur(calc(var(--glass-blur) * 2)) brightness(.71);
      backdrop-filter:blur(calc(var(--glass-blur) * 2)) brightness(.71)}
    .mobile-menu .menu-primary small,.mobile-menu .scene-label>span,.mobile-menu .menu-footer{color:#d8d0c4}
  }
  .mobile-menu .menu-header{position:static;gap:12px;padding:0;background:transparent}
  .mobile-menu .menu-header .reserve{display:none}
  .mobile-menu .menu-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:28px;min-height:0;padding:28px 0 0}
  .mobile-menu .menu-close{font-size:10px;min-width:44px}
  .mobile-menu .menu-footer{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid rgb(241 237 230 / 16%);font-size:10px}
  .mobile-menu .menu-destinations a{transform:none;transition:opacity 160ms ease}
  .mobile-menu .scene-link{grid-template-columns:64px minmax(0,1fr) 16px;gap:12px;min-height:88px;padding:12px 0}
  .mobile-menu .scene-thumb{width:64px;height:64px}
  .mobile-menu .scene-label strong{font-size:17px}
  .mobile-menu .scene-label>span{font-size:12px}
}
@media(max-width:760px){
  .nav-enhanced .nav .scene-toggle,.scene-menu-heading{display:none}
  .menu-primary a{font-size:32px}
  .menu-footer{margin-top:0;padding-top:0}
  .menu-destinations .scene-link{grid-template-columns:64px minmax(0,1fr) 18px;gap:14px}
  .scene-thumb{width:64px;height:72px}
}
@media(prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu .menu-destinations a{transition:none;transform:none}}

.nav a[aria-current=page]{color:var(--amber)}